yhui-yuanhuan/es/components/table/src/setting.mjs

A Component Library for Vue 3 based on element-plus

import { ref, watch } from 'vue';

const actionsColumnProp = "_@_actions";
const _SettingData = class {
  constructor(param) {
    this.columns = [];
    this.slotItems = [];
    this.purifiedSlotItems = [];
    this.propEnum = [];
    this.id = Date.now().toString();
    if (param.id)
      this.id = param.id;
    if (param.slotItems) {
      this.slotItems = param.slotItems;
      this.setColumns();
    }
  }
  static getInstance(param) {
    if (!param.id)
      return new _SettingData(param);
    const storageSetting = _SettingData.unstore({
      id: param.id,
      slotItems: param.slotItems
    });
    if (storageSetting)
      return storageSetting;
    return new _SettingData(param);
  }
  validateProp(prop, current) {
    const isElTableColumn = getIsElTableColumn(current);
    if (!isElTableColumn)
      return;
    if (!prop) {
      console.log(current);
      throw new Error(`"prop" attribute is required for ElTableColumn in YhTable`);
    }
    const hasSameProp = this.propEnum.includes(prop);
    if (hasSameProp)
      throw new Error(`prop ${prop} is duplicated`);
  }
  purifySlotItems(slotItems) {
    this.propEnum = [];
    const purifiedSlotItems = slotItems.reduce((pre, cur) => {
      var _a, _b;
      const type = cur.type.toString();
      const prop = (_a = cur.props) == null ? void 0 : _a.prop;
      const isComment = type === "Symbol(Comment)";
      const isTemplate = type === "template";
      if (isComment || isTemplate)
        return pre;
      const isFragment = ["Symbol(v-fgt)", "Symbol(Fragment)"].includes(type);
      if (isFragment && ((_b = cur.children) == null ? void 0 : _b.length)) {
        pre.push(...this.purifySlotItems(cur.children));
        return pre;
      }
      this.validateProp(prop, cur);
      this.propEnum.push(prop);
      pre.push(cur);
      return pre;
    }, []);
    return purifiedSlotItems;
  }
  generateColumns(purifiedSlotItems) {
    if (!purifiedSlotItems)
      return [];
    const columns = purifiedSlotItems.map((it) => {
      var _a, _b, _c;
      const type = (_a = it.props) == null ? void 0 : _a.type;
      const prop = (_b = it.props) == null ? void 0 : _b.prop;
      const label = (_c = it.props) == null ? void 0 : _c.label;
      const checked = true;
      const disabled = false;
      return { type, prop, label, checked, disabled };
    });
    return columns;
  }
  setColumns() {
    const purifiedSlotItems = this.purifySlotItems(this.slotItems);
    const columns = this.generateColumns(purifiedSlotItems);
    this.purifiedSlotItems = purifiedSlotItems;
    this.columns = columns;
  }
  clear() {
    if (!this)
      return;
    let oldMapping = _SettingData.unstore();
    if (typeof oldMapping !== "object")
      oldMapping = {};
    const mapping = { ...oldMapping, [this.id]: void 0 };
    localStorage.setItem(_SettingData.key, JSON.stringify(mapping));
    this.setColumns();
  }
  watch(theRef) {
    const thisRef = ref(this);
    const targetRef = theRef || thisRef;
    watch(() => targetRef.value, () => targetRef.value.store(), { deep: true });
  }
  store() {
    if (!this)
      return;
    let oldMapping = _SettingData.unstore();
    if (typeof oldMapping !== "object")
      oldMapping = {};
    const mapping = {
      ...oldMapping,
      [this.id]: {
        ...this,
        slotItems: void 0,
        purifiedSlotItems: void 0
      }
    };
    localStorage.setItem(_SettingData.key, JSON.stringify(mapping));
  }
  static clear() {
    localStorage.removeItem(_SettingData.key);
  }
  static unstore(option) {
    const string = localStorage.getItem(_SettingData.key);
    if (!string)
      return null;
    const mapping = JSON.parse(string);
    if (typeof mapping !== "object")
      return null;
    if (!(option == null ? void 0 : option.id))
      return mapping;
    const mappedArg = mapping[option.id];
    if (!mappedArg)
      return null;
    const setting = new _SettingData({
      ...mappedArg,
      slotItems: option.slotItems
    });
    if (!(option == null ? void 0 : option.columns))
      return setting;
    const columns = option.columns.map((cInOption) => {
      const cInSetting = setting.columns.find((c) => c.prop === cInOption.prop);
      if (cInSetting)
        return { ...cInOption, ...cInSetting };
      return { ...cInOption };
    });
    setting.columns = columns;
    return setting;
  }
};
let SettingData = _SettingData;
SettingData.key = "YH-TABLE-SETTING-MAPPING";
function getIsElTableColumn(node) {
  var _a;
  return ((_a = node.type) == null ? void 0 : _a["name"]) === "ElTableColumn";
}

export { SettingData, actionsColumnProp };
//# sourceMappingURL=setting.mjs.map