@vuesax-alpha/nightly/lib/components/table/src/tr2.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var lodashUnified = require('lodash-unified');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
require('../../../utils/index.js');
var tr = require('./tr.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var table = require('../../../tokens/table.js');
var error = require('../../../utils/error.js');
var shared = require('@vue/shared');
var index$1 = require('../../../hooks/use-base-component/index.js');
var index$2 = require('../../../hooks/use-common-props/index.js');
var color = require('../../../utils/color.js');

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

exports["default"] = Tr;
//# sourceMappingURL=tr2.js.map