@vuesax-alpha/nightly/es/components/table/src/tr2.mjs

A Component Library for Vue 3

import { defineComponent, useSlots, inject, ref, computed, watch, nextTick, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createBlock, Transition, withCtx, unref, createCommentVNode } from 'vue';
import { isEqual } from 'lodash-unified';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import '../../../utils/index.mjs';
import { tableTrProps, tableTrEmits } from './tr.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { tableContextKey } from '../../../tokens/table.mjs';
import { throwError } from '../../../utils/error.mjs';
import { isArray } from '@vue/shared';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';

const _hoisted_1 = ["colspan"];
const __default__ = defineComponent({
  name: "VsTr"
});
const _sfc_main = defineComponent({
  ...__default__,
  props: tableTrProps,
  emits: tableTrEmits,
  setup(__props, { emit }) {
    const props = __props;
    const ns = useNamespace("table");
    const slots = useSlots();
    const table = inject(tableContextKey);
    if (!table) {
      throwError("vs-tr", "component must be called inside table component");
    }
    const trRef = ref();
    const contentExpandRef = ref();
    const expand = ref(false);
    const isSelected = computed(() => {
      if (props.isSelected != null)
        return props.isSelected;
      const modelValue = isArray(table.modelValue.value) ? table.modelValue.value : [table.modelValue.value];
      return modelValue.some((e) => isEqual(e, props.data));
    });
    const vsBaseClasses = useVuesaxBaseComponent(useColor());
    const trKls = computed(() => [
      vsBaseClasses,
      ns.b("tr"),
      ns.is("selected", isSelected.value),
      ns.is("expand", expand.value),
      ns.is("has-expand-slot", !!slots.expand)
    ]);
    const trStyles = computed(() => [
      ns.cssVar({
        color: getVsColor(props.color)
      })
    ]);
    const click = (evs) => {
      if (slots.expand) {
        if (!evs.target.className.includes(ns.is("edit"))) {
          expand.value = !expand.value;
        }
      }
      if (evs.target.nodeName == "TD" && !props.notClickSelected) {
        table.selected(props.data);
        emit("selected", props.data);
      }
      emit("click", evs);
    };
    watch(expand, (val) => {
      if (val) {
        nextTick(() => {
          const content = contentExpandRef.value;
          if (!content)
            return;
          content.style.height = `${content.scrollHeight}px`;
        });
      }
    });
    watch(
      () => props.data,
      () => {
        var _a;
        (_a = trRef.value) == null ? void 0 : _a.style.removeProperty(ns.cssVarName("color"));
        expand.value = false;
      }
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        Fragment,
        null,
        [
          createElementVNode(
            "tr",
            {
              ref_key: "trRef",
              ref: trRef,
              class: normalizeClass(trKls.value),
              style: normalizeStyle(trStyles.value),
              onClick: click
            },
            [
              renderSlot(_ctx.$slots, "default")
            ],
            6
          ),
          _ctx.$slots.expand ? (openBlock(), createBlock(Transition, {
            key: 0,
            name: "fade-expand"
          }, {
            default: withCtx(() => [
              expand.value ? (openBlock(), createElementBlock(
                "tr",
                {
                  key: 0,
                  ref_key: "trRef",
                  ref: trRef,
                  class: normalizeClass(unref(ns).b("tr-expand"))
                },
                [
                  createElementVNode("td", {
                    class: normalizeClass(unref(ns).be("tr-expand", "td")),
                    colspan: unref(unref(table).colspan)
                  }, [
                    createElementVNode(
                      "div",
                      {
                        ref_key: "contentExpandRef",
                        ref: contentExpandRef,
                        class: normalizeClass(unref(ns).be("tr-expand", "content"))
                      },
                      [
                        createElementVNode(
                          "div",
                          {
                            class: normalizeClass(unref(ns).bem("tr-expand", "content", "inner"))
                          },
                          [
                            renderSlot(_ctx.$slots, "expand")
                          ],
                          2
                        )
                      ],
                      2
                    )
                  ], 10, _hoisted_1)
                ],
                2
              )) : createCommentVNode("v-if", true)
            ]),
            _: 3
          })) : createCommentVNode("v-if", true)
        ],
        64
      );
    };
  }
});
var Tr = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/table/src/tr.vue"]]);

export { Tr as default };
//# sourceMappingURL=tr2.mjs.map