epic-designer/dist/hooks/src/plugin/useComponentManager.js

基于vue3的设计器,可视化开发页面表单

import { ref as H } from "vue";
import { loadAsyncComponent as T } from "../../../utils/src/common/component.js";
import "@vueuse/core";
import "../store/index.js";
import "../../../manager/src/pluginManager.js";
import "../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
function K() {
  let l = [];
  const r = {};
  let f = {};
  const a = {}, m = /* @__PURE__ */ new Map(), d = H([]);
  let u = [], c = ["表单", "布局"];
  function b(e) {
    l.push(e);
  }
  function x() {
    f = {};
  }
  function C() {
    c = [], i();
  }
  function h(e) {
    l = e;
  }
  function N(e, t) {
    f[e] = t;
  }
  function B(e) {
    u = e, i();
  }
  function S(e, t, n = 99) {
    (m.get(e) ?? 99) > n || (m.set(e, n), typeof t == "function" && (t = T(t)), a[e] = t);
  }
  function i() {
    const e = [];
    Object.values(r).forEach((t) => {
      if (!u.includes(t.defaultSchema.type) && t.groupName) {
        const n = f[t.groupName] ?? t.groupName;
        let o = e.findIndex(
          (p) => p.title === n
        );
        o === -1 && (e.push({
          title: n,
          list: []
        }), o = e.length - 1);
        const s = e[o].list.findIndex(
          (p) => p.type === t.defaultSchema.type
        );
        s === -1 ? e[o].list.push(t.defaultSchema) : e[o].list[s] = t.defaultSchema;
      }
    }), e.sort((t, n) => {
      const o = c.indexOf(t.title), s = c.indexOf(n.title);
      return o === -1 ? 1 : s === -1 ? -1 : o - s;
    }), e.forEach((t) => {
      t.list.sort((n, o) => {
        var g, G;
        const s = ((g = r[n.type]) == null ? void 0 : g.sort) ?? 1e3, p = ((G = r[o.type]) == null ? void 0 : G.sort) ?? 1e3;
        return s - p;
      });
    }), d.value = e;
  }
  function P(e) {
    return a[e];
  }
  function v(e) {
    var t;
    return ((t = r[e]) == null ? void 0 : t.defaultSchema.label) ?? "";
  }
  function A(e) {
    var t;
    return ((t = r[e]) == null ? void 0 : t.icon) ?? "icon--epic--component";
  }
  function I(e) {
    var t, n;
    return (n = (t = r[e]) == null ? void 0 : t.editConstraints) == null ? void 0 : n.locked;
  }
  function M(e) {
    return r[e];
  }
  function w() {
    return r;
  }
  function E() {
    return a;
  }
  function O() {
    return d;
  }
  function k(e) {
    u.push(e), i();
  }
  function L(e) {
    S(
      e.defaultSchema.type,
      e.component,
      e.priority
    ), e.config.action || (e.config.action = []), e.defaultSchema.input && e.config.action.unshift(
      {
        // 参数配置
        argsConfigs: [
          {
            ...e.defaultSchema,
            field: "0",
            label: "设置数据"
          }
        ],
        description: "设置值",
        type: "setValue"
      },
      {
        description: "获取值",
        type: "getValue"
      }
    );
    const t = [
      ...e.config.attribute || []
    ].filter(({ field: n }) => String(n).startsWith("props"));
    e.config.action.push({
      argsConfigs: [
        // 第一个参数为选择属性
        {
          field: "0",
          label: "选择属性",
          props: {
            clearable: !0,
            options: t.map(({ field: n, label: o }) => ({
              label: o,
              value: String(n).replace("props.", "")
            })),
            placeholder: "请选择"
          },
          type: "select"
        },
        // 动态生成所有可被修改的属性参数
        ...t.map((n, o) => {
          const s = String(n.field).replace("props.", "");
          return {
            // 属性字段默认为 index+1，即 args 数组的下标
            field: String(o + 1),
            label: n.label || "属性值",
            props: n.props,
            // 仅当选择的属性与当前属性字段匹配时显示
            show: ({ values: p }) => p[0] === s,
            type: n.type || "input"
          };
        })
      ],
      description: "修改属性",
      type: "setAttr"
    }), e.defaultSchema.componentProps && (e.defaultSchema.props = e.defaultSchema.componentProps, delete e.defaultSchema.componentProps, console.warn(
      `[Epic] 注册组件 ${e.defaultSchema.type} 的 componentProps 属性已被弃用，请使用 props 代替。`
    )), r[e.defaultSchema.type] = e, i();
  }
  function V() {
    l.forEach((e) => {
      y(e);
    }), h([]), i();
  }
  function y(e) {
    delete r[e], delete a[e];
  }
  function j(e) {
    c = e, i();
  }
  function F(e) {
    u = u.filter((t) => t !== e), i();
  }
  return {
    addBaseComponentType: b,
    addComponent: S,
    baseComponentTypes: l,
    clearComponentGroupNameMap: x,
    clearSortedGroups: C,
    componentConfigs: r,
    componentGroupNameMap: f,
    components: a,
    componentSchemaGroups: d,
    // 组件获取
    getComponent: P,
    getComponentConfigByType: M,
    getComponentConfigs: w,
    getComponents: E,
    getComponentSchemaGroups: O,
    getIcon: A,
    getLabel: v,
    getLocked: I,
    hiddenComponents: u,
    // 组件显示控制
    hideComponent: k,
    // 组件注册
    registerComponent: L,
    removeBaseComponents: V,
    // 组件移除
    removeComponent: y,
    setBaseComponentTypes: h,
    setComponentGroupNameMap: N,
    setHideComponents: B,
    setSortedGroups: j,
    showComponent: F,
    sortedGroups: c
  };
}
export {
  K as useComponentManager
};