hongluan-business-ui/es/components/table-toolbar/src/col-config.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, onMounted, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createElementVNode, createVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
import { HlPopover, HlCheckboxGroup, HlCheckbox } from 'hongluan-ui';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const TABLE_COLS_KEY = "$$c_table_cols$$";
const _sfc_main = defineComponent({
  name: "ColConfig",
  components: { HlPopover, HlCheckboxGroup, HlCheckbox },
  props: {
    cols: {
      type: Array,
      default: () => []
    },
    storeKey: String,
    version: {
      type: String,
      default: "v1"
    },
    colLabelField: {
      type: String,
      default: "label"
    }
  },
  emits: ["col-change"],
  setup(props, { emit }) {
    const newCols = ref(props.cols);
    const selectedCols = ref([]);
    const getLabelField = () => {
      return props.colLabelField || "label";
    };
    const assignDefault = () => {
      selectedCols.value = props.cols.map((c) => c[getLabelField()]);
    };
    const colChanged = (label, val) => {
      const storeKey = props.storeKey || document.location.pathname + document.location.hash;
      const col = newCols.value.find((c) => c[getLabelField()] === label);
      if (col) {
        col.$show$ = val;
      }
      let colsConfigs = JSON.parse(localStorage.getItem(TABLE_COLS_KEY));
      if (!colsConfigs) {
        colsConfigs = {};
      }
      colsConfigs[storeKey] = { v: props.version, cols: selectedCols.value };
      localStorage.setItem(TABLE_COLS_KEY, JSON.stringify(colsConfigs));
      emit("col-change");
    };
    onMounted(() => {
      const storeKey = props.storeKey || document.location.pathname + document.location.hash;
      const colsConfig = JSON.parse(localStorage.getItem(TABLE_COLS_KEY));
      const isAssignDefault = !colsConfig || colsConfig && !colsConfig[storeKey];
      if (isAssignDefault) {
        assignDefault();
      } else {
        const config = colsConfig[storeKey];
        if (config.v !== props.version) {
          assignDefault();
        } else {
          newCols.value.forEach((col) => {
            col.$show$ = config.cols.indexOf(col[getLabelField()]) > -1;
          });
          selectedCols.value = config.cols;
        }
      }
    });
    return {
      newCols,
      selectedCols,
      getLabelField,
      colChanged
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_checkbox = resolveComponent("hl-checkbox");
  const _component_hl_checkbox_group = resolveComponent("hl-checkbox-group");
  const _component_hl_popover = resolveComponent("hl-popover");
  return openBlock(), createBlock(_component_hl_popover, {
    placement: "bottom",
    trigger: "click"
  }, {
    reference: withCtx(() => [
      renderSlot(_ctx.$slots, "reference")
    ]),
    default: withCtx(() => [
      createElementVNode("div", null, [
        createVNode(_component_hl_checkbox_group, {
          modelValue: _ctx.selectedCols,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.selectedCols = $event),
          min: 1,
          dir: "vertical",
          gap: "var(--md)"
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.newCols, (col) => {
              return openBlock(), createBlock(_component_hl_checkbox, {
                key: col[_ctx.getLabelField()],
                label: col[_ctx.getLabelField()],
                onChange: (val) => _ctx.colChanged(col[_ctx.getLabelField()], val)
              }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(col[_ctx.getLabelField()]), 1)
                ]),
                _: 2
              }, 1032, ["label", "onChange"]);
            }), 128))
          ]),
          _: 1
        }, 8, ["modelValue"])
      ])
    ]),
    _: 3
  });
}
var ColConfig = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { ColConfig as default };
//# sourceMappingURL=col-config.mjs.map