t-ui-plus/lib/packages/components/table/src/ColumnSet.vue2.js

Page level components developed based on Element Plus.

'use strict';

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

var vue = require('vue');
var vuedraggable_umd = require('../../../../node_modules/.pnpm/vuedraggable@2.24.3/node_modules/vuedraggable/dist/vuedraggable.umd.js');

const _hoisted_1 = {
  key: 0,
  class: "title"
};
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "ColumnSet"
  },
  __name: "ColumnSet",
  props: {
    columns: { default: () => [] },
    title: { default: "" },
    name: { default: "" },
    columnSetBind: { default: () => ({}) }
  },
  emits: ["columnSetting"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const $attrs = vue.useAttrs();
    const columnBind = vue.computed(() => {
      const columnSetBind = { btnTxt: "\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", ...props.columnSetBind };
      return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind };
    });
    const getColumnSetCache = () => {
      let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]";
      let columnOption = initColumnSet();
      let valueArr = JSON.parse(value) || [];
      columnOption.map((item) => {
        let findEle = valueArr.find(
          (ele) => ele.label === item.label && ele.prop === item.prop
        );
        item.hidden = findEle ? findEle.hidden : false;
      });
      value = JSON.stringify(valueArr.length ? valueArr : columnOption);
      return value ? JSON.parse(value) : initColumnSet();
    };
    const initColumnSet = () => {
      return props.columns.map((col) => {
        return {
          label: col.label,
          prop: col.prop,
          checkBoxDisabled: false,
          hidden: false
        };
      });
    };
    const emits = __emit;
    const state = vue.reactive({
      columnSet: []
    });
    vue.onMounted(() => {
      state.columnSet = getColumnSetCache();
      emits("columnSetting", state.columnSet);
    });
    vue.watch(
      () => state.columnSet,
      (val) => {
        emits("columnSetting", val);
        localStorage.setItem(
          `t-ui-plus:TTable.columnSet-${props.name || props.title}`,
          JSON.stringify(val)
        );
      },
      { deep: true }
    );
    const reSetColumnSet = () => {
      let value = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`);
      state.columnSet = JSON.parse(value);
      emits("columnSetting", state.columnSet);
    };
    const checkChanged = (checked, index) => {
      state.columnSet[index].hidden = !checked;
      let obj = {};
      state.columnSet.map((val) => {
        val.hidden in obj || (obj[val.hidden] = []);
        obj[val.hidden].push(val.hidden);
      });
      if (obj.false.length < 2) {
        state.columnSet.map((val, key) => {
          if (!val.hidden) {
            state.columnSet[key].checkBoxDisabled = true;
          }
        });
      } else {
        state.columnSet.map((val, key) => {
          if (!val.hidden) {
            state.columnSet[key].checkBoxDisabled = false;
          }
        });
      }
    };
    __expose({
      reSetColumnSet
    });
    return (_ctx, _cache) => {
      const _component_el_button = vue.resolveComponent("el-button");
      const _component_el_checkbox = vue.resolveComponent("el-checkbox");
      const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
      const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
      const _component_el_dropdown = vue.resolveComponent("el-dropdown");
      return vue.openBlock(), vue.createBlock(_component_el_dropdown, {
        trigger: "click",
        "popper-class": "column_set"
      }, {
        dropdown: vue.withCtx(() => [
          columnBind.value.isShowTitle ? (vue.openBlock(), vue.createElementBlock(
            "div",
            _hoisted_1,
            vue.toDisplayString(columnBind.value.title || "\u5217\u8BBE\u7F6E"),
            1
            /* TEXT */
          )) : vue.createCommentVNode("v-if", true),
          vue.createVNode(_component_el_dropdown_menu, null, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_el_dropdown_item, {
                divided: columnBind.value.isShowTitle
              }, {
                default: vue.withCtx(() => [
                  vue.createVNode(vue.unref(vuedraggable_umd.default), {
                    class: "t_table_column_setting_dropdown",
                    modelValue: state.columnSet,
                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.columnSet = $event),
                    "item-key": "prop"
                  }, {
                    item: vue.withCtx(({ element, index }) => [
                      vue.createVNode(_component_el_checkbox, {
                        checked: !element.hidden,
                        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                        }, ["stop"])),
                        disabled: element.checkBoxDisabled,
                        onChange: (checked) => checkChanged(checked, index)
                      }, {
                        default: vue.withCtx(() => [
                          vue.createTextVNode(
                            vue.toDisplayString(element.label),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["checked", "disabled", "onChange"])
                    ]),
                    _: 1
                    /* STABLE */
                  }, 8, ["modelValue"])
                ]),
                _: 1
                /* STABLE */
              }, 8, ["divided"])
            ]),
            _: 1
            /* STABLE */
          })
        ]),
        default: vue.withCtx(() => [
          vue.createVNode(
            _component_el_button,
            vue.normalizeProps(vue.guardReactiveProps(columnBind.value)),
            {
              default: vue.withCtx(() => [
                vue.createTextVNode(
                  vue.toDisplayString(columnBind.value.btnTxt || "\u5217\u8BBE\u7F6E"),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            },
            16
            /* FULL_PROPS */
          )
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

exports.default = _sfc_main;