hongluan-business-ui/lib/components/table-toolbar/src/col-config.js

Hongluan Business Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const TABLE_COLS_KEY = "$$c_table_cols$$";
const _sfc_main = vue.defineComponent({
  name: "ColConfig",
  components: { HlPopover: hongluanUi.HlPopover, HlCheckboxGroup: hongluanUi.HlCheckboxGroup, HlCheckbox: hongluanUi.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 = vue.ref(props.cols);
    const selectedCols = vue.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");
    };
    vue.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 = vue.resolveComponent("hl-checkbox");
  const _component_hl_checkbox_group = vue.resolveComponent("hl-checkbox-group");
  const _component_hl_popover = vue.resolveComponent("hl-popover");
  return vue.openBlock(), vue.createBlock(_component_hl_popover, {
    placement: "bottom",
    trigger: "click"
  }, {
    reference: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "reference")
    ]),
    default: vue.withCtx(() => [
      vue.createElementVNode("div", null, [
        vue.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: vue.withCtx(() => [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.newCols, (col) => {
              return vue.openBlock(), vue.createBlock(_component_hl_checkbox, {
                key: col[_ctx.getLabelField()],
                label: col[_ctx.getLabelField()],
                onChange: (val) => _ctx.colChanged(col[_ctx.getLabelField()], val)
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(vue.toDisplayString(col[_ctx.getLabelField()]), 1)
                ]),
                _: 2
              }, 1032, ["label", "onChange"]);
            }), 128))
          ]),
          _: 1
        }, 8, ["modelValue"])
      ])
    ]),
    _: 3
  });
}
var ColConfig = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = ColConfig;
//# sourceMappingURL=col-config.js.map