@wocwin/t-ui-plus/es/packages/components/table/src/densitySet.vue2.mjs

Page level components developed based on Element Plus.

import { createElementVNode, defineComponent, useAttrs, computed, resolveComponent, createBlock, openBlock, withCtx, createVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, unref } from 'vue';
import '../../../hooks/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';

const _hoisted_1 = /* @__PURE__ */ createElementVNode(
  "svg",
  {
    viewBox: "0 0 1024 1024",
    focusable: "false",
    "data-icon": "column-height",
    fill: "currentColor",
    "aria-hidden": "true"
  },
  [
    /* @__PURE__ */ createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" })
  ],
  -1
  /* HOISTED */
);
const _hoisted_2 = { class: "density_set_list" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "DensitySet"
  },
  __name: "densitySet",
  props: {
    defaultSize: { default: "default" },
    densitySetBind: { default: () => ({}) }
  },
  emits: ["clickDensity"],
  setup(__props, { emit: __emit }) {
    const { t } = useLocale();
    const emit = __emit;
    const props = __props;
    const attrs = useAttrs();
    const densityBind = computed(() => {
      const densitySetBind = {
        btnTxt: t("plus.table.density"),
        ...props.densitySetBind
      };
      return { size: "default", iconSize: 18, iconColor: "", ...attrs, ...densitySetBind };
    });
    const buttonNameDensity = [
      {
        size: "default",
        text: computed(() => t("plus.table.default"))
      },
      {
        size: "large",
        text: computed(() => t("plus.table.loose"))
      },
      {
        size: "small",
        text: computed(() => t("plus.table.compact"))
      }
    ];
    const handleClickDensity = (size) => {
      emit("clickDensity", size);
    };
    return (_ctx, _cache) => {
      const _component_el_icon = resolveComponent("el-icon");
      const _component_el_button = resolveComponent("el-button");
      const _component_el_dropdown = resolveComponent("el-dropdown");
      return openBlock(), createBlock(_component_el_dropdown, {
        trigger: "click",
        "popper-class": "density_set"
      }, {
        dropdown: withCtx(() => [
          createElementVNode("div", _hoisted_2, [
            (openBlock(), createElementBlock(
              Fragment,
              null,
              renderList(buttonNameDensity, (item) => {
                return createVNode(_component_el_button, {
                  key: item.size,
                  plain: _ctx.defaultSize !== item.size,
                  type: "primary",
                  size: "small",
                  onClick: ($event) => handleClickDensity(item.size)
                }, {
                  default: withCtx(() => [
                    createTextVNode(
                      toDisplayString(unref(item.text)),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 2
                  /* DYNAMIC */
                }, 1032, ["plain", "onClick"]);
              }),
              64
              /* STABLE_FRAGMENT */
            ))
          ])
        ]),
        default: withCtx(() => [
          createVNode(
            _component_el_button,
            normalizeProps(guardReactiveProps(densityBind.value)),
            {
              icon: withCtx(() => [
                createVNode(_component_el_icon, {
                  size: densityBind.value.iconSize,
                  color: densityBind.value.iconColor,
                  class: "density_set__toolbar__icon"
                }, {
                  default: withCtx(() => [
                    _hoisted_1
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["size", "color"])
              ]),
              default: withCtx(() => [
                createTextVNode(
                  " " + toDisplayString(densityBind.value.btnTxt),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            },
            16
            /* FULL_PROPS */
          )
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

export { _sfc_main as default };