epic-designer-gold/dist/pluginManager-BNLy8dPz.js

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

var x = Object.defineProperty;
var A = (i, e, n) => e in i ? x(i, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[e] = n;
var l = (i, e, n) => A(i, typeof e != "symbol" ? e + "" : e, n);
import { defineAsyncComponent as G, ref as v, shallowRef as w } from "vue";
import { u as I } from "./index-B1s67XDZ.js";
const d = (i, e) => G({
  loader: i,
  loadingComponent: e,
  delay: 80
});
function y(i = 10) {
  const e = "abcdefghijklmnopqrstuvwxyz0123456789";
  let n = "";
  for (let s = 0; s < i; s++) {
    const t = Math.floor(Math.random() * e.length);
    n += e[t];
  }
  return n;
}
function L(i) {
  return i.charAt(0).toUpperCase() + i.slice(1);
}
const { t: S } = I();
function m(i, e = /* @__PURE__ */ new WeakMap()) {
  if (typeof i != "object" || i === null)
    return i;
  if (e.has(i))
    return e.get(i);
  if (Array.isArray(i)) {
    const s = i.map((t) => m(t, e));
    return e.set(i, s), s;
  }
  const n = {};
  return e.set(i, n), Object.keys(i).forEach((s) => {
    n[s] = m(i[s], e);
  }), n;
}
function R(i) {
  const [e] = M([m(i)], (n) => {
    var t, o;
    const s = {
      ...n,
      id: `${n.type}_${y(8)}`
    };
    return (s.field || s.input) && !((o = (t = z.getComponentConfingByType(s.type)) == null ? void 0 : t.editConstraints) != null && o.fixedField) && (s.field = s.id), s;
  });
  return e;
}
function b(i, e, n = !0) {
  for (const [s, t] of Object.entries(e)) {
    let o = i == null ? void 0 : i[s];
    o && t && typeof o == "object" && typeof t == "object" ? (Array.isArray(o) && !Array.isArray(t) ? o = i[s] = {} : !Array.isArray(o) && Array.isArray(t) && (o = i[s] = []), b(o, t, n)) : i[s] = t;
  }
  n && Object.keys(i).reverse().forEach((s) => {
    e.hasOwnProperty(s) || (Array.isArray(i) ? i.splice(Number(s), 1) : delete i[s]);
  });
}
function D(i, e, n = [], s = /* @__PURE__ */ new WeakMap()) {
  const t = (o) => {
    if (Array.isArray(o))
      return o.map(t);
    if (typeof o == "object" && o !== null) {
      if (s.has(o))
        return "[Circular]";
      s.set(o, !0);
      const r = Object.keys(o).sort(), a = {};
      return r.forEach((u) => {
        n.includes(u) || (a[u] = t(o[u]));
      }), s.delete(o), a;
    } else
      return o;
  };
  return JSON.stringify(t(i)) === JSON.stringify(t(e));
}
function V(i, e) {
  const n = [];
  let s = !1;
  function t(o) {
    if (n.push(o), o.id === e && (s = !0), !s && o.children != null && o.children.length > 0)
      for (let r = 0; r < o.children.length && (t(o.children[r]), !s); r++)
        ;
    if (!s && o.slots)
      for (let r in o.slots)
        for (let a = 0; a < o.slots[r].length && (t(o.slots[r][a]), !s); a++)
          ;
    s || n.pop();
  }
  return i.forEach(t), s || console.error(`没有查询到id为${e}的节点`), n;
}
function N(i, e, n) {
  const s = e.split(".");
  let t = i;
  for (let o = 0; o < s.length; o++) {
    if (t == null)
      return n;
    t = t[s[o]];
  }
  return t === void 0 ? n : t;
}
function W(i, e, n) {
  const s = e.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
  let t = i;
  for (let o = 0; o < s.length - 1; o++) {
    const r = s[o];
    t[r] == null && (t[r] = isNaN(Number(s[o + 1])) ? {} : []), t = t[r];
  }
  return t[s[s.length - 1]] = n, i;
}
function q(i, e = "default") {
  return k(i, e).map((s) => s.field);
}
function k(i, e = "default") {
  const n = p(
    i,
    (t) => {
      var o;
      return t.type === "form" && (((o = t.componentProps) == null ? void 0 : o.name) ?? t.name === e);
    },
    !0
  );
  return p(
    (n == null ? void 0 : n.children) ?? [],
    (t) => !!t.input,
    !1,
    (t) => t.type !== "subform"
  );
}
function p(i, e, n = !1, s) {
  const t = [], o = [...i];
  for (; o.length; ) {
    const r = o.pop();
    if (r != null && r.children && (!s || s(r)) && o.push(...r.children), r != null && r.slots && (!s || s(r)))
      for (let a in r.slots)
        o.push(...r.slots[a]);
    if (e(r) && (t.push(r), n))
      return r;
  }
  return n ? !1 : t;
}
function M(i, e, n) {
  const s = [...i];
  for (; s.length; ) {
    const t = s.pop();
    if (t != null && t.children && (!n || n(t)) && s.push(...t.children), t != null && t.slots && (!n || n(t)))
      for (let o in t.slots)
        s.push(...t.slots[o]);
    b(t, e(t));
  }
  return i;
}
function $(i, e) {
  const n = p(
    i,
    (s) => s.id === e,
    !0
  );
  if (!n)
    throw new Error(`没有查询到id为${e}的节点`);
  return n;
}
function U(i, e) {
  const n = [{ type: "", children: i }];
  let s = 0, t = null;
  if (p(
    n,
    (o) => {
      if (t = o.children ?? null, !t) {
        if (o != null && o.slots)
          for (let r in o.slots) {
            t = o.slots[r];
            for (let a = 0; a < t.length; a++)
              if (t[a].id === e)
                return s = a, !0;
          }
        return !1;
      }
      for (let r = 0; r < t.length; r++)
        if (t[r].id === e)
          return s = r, !0;
      return !1;
    },
    !0
  ), !t)
    throw new Error(`没有查询到id为${e}的节点`);
  return {
    list: t,
    schema: t[s],
    index: s
  };
}
function J(i) {
  const e = {
    schemas: [
      {
        type: "page",
        id: "root",
        label: S("page"),
        children: [
          {
            label: S("form"),
            type: "form",
            icon: "epic-icon-daibanshixiang",
            labelWidth: i.config.labelWidth || 100,
            name: "default",
            componentProps: {
              layout: i.config.layout || "horizontal",
              labelWidth: i.config.labelWidth || 100,
              labelLayout: i.config.labelLayout === "flex" ? "fixed" : "flex",
              labelCol: i.config.labelCol || { span: 5 },
              wrapperCol: i.config.wrapperCol || { span: 19 },
              hideRequiredMark: i.config.hideRequiredMark || !1,
              colon: i.config.colon || !0,
              labelAlign: i.config.labelAlign || "right",
              size: i.config.size || "middle"
            },
            children: [],
            id: "form_" + y()
          }
        ],
        componentProps: {
          style: {
            padding: "16px"
          }
        }
      }
    ],
    script: i.script || ""
  };
  return e.schemas[0].children[0].children = c(i.list), e;
}
function c(i, e) {
  return i.map((n) => {
    var u, g, C;
    let s = n.type ?? "";
    const t = n.options ?? {}, o = (f, h) => {
      s === f && (s = h, t.defaultValue && (t.defaultValue = JSON.parse(t.defaultValue)));
    };
    if (o("uploadImg", "upload-image"), o("uploadFile", "upload-file"), s === "date" && t.range && (t.type = "daterange", delete t.range), (s === "date" || s === "time") && (t.valueFormat = t.format), s === "textarea") {
      const { minRows: f, maxRows: h } = t;
      t.autoSize = { minRows: f, maxRows: h }, delete t.minRows, delete t.maxRows;
    }
    s === "number" && !t.precision && delete t.precision, t.width && (t.style = { width: t.width }, delete t.width), s === "grid" && (s = "row"), e && e.type === "grid" && (s = "col", t.span = n.span, n.key = y());
    const r = {
      label: n.label,
      type: s,
      icon: n.icon || "",
      field: n.model,
      componentProps: t,
      id: n.key
    };
    return (t.noFormItem || !t.showLabel) && (r.noFormItem = !0, delete t.noFormItem, delete t.showLabel), t.clearable && (t.allowClear = !0, delete t.clearable), [
      "input",
      "textarea",
      "number",
      "password",
      "select",
      "cascader",
      "checkbox",
      "radio",
      "date",
      "time",
      "slider",
      "switch",
      "color-picker",
      "upload-file",
      "upload-image"
    ].includes(s) && (r.input = !0, ((g = (u = n.rules) == null ? void 0 : u[0]) == null ? void 0 : g.required) === !1 && n.rules.shift(), ((C = n.rules) == null ? void 0 : C.length) > 0 && (r.rules = n.rules)), n.list && (r.children = c(n.list, n)), n.columns && (r.children = c(n.columns, n)), n.trs && (r.children = c(n.trs, n)), n.tds && (r.children = c(n.tds, n)), r;
  });
}
function B(i) {
  return { all: i = i || /* @__PURE__ */ new Map(), on: function(e, n) {
    var s = i.get(e);
    s ? s.push(n) : i.set(e, [n]);
  }, off: function(e, n) {
    var s = i.get(e);
    s && (n ? s.splice(s.indexOf(n) >>> 0, 1) : i.set(e, []));
  }, emit: function(e, n) {
    var s = i.get(e);
    s && s.slice().map(function(t) {
      t(n);
    }), (s = i.get("*")) && s.slice().map(function(t) {
      t(e, n);
    });
  } };
}
const P = B();
class O {
  constructor() {
    // 已初始化基础UI
    l(this, "initialized", v(!1));
    // 数据源存储
    l(this, "sourceData", []);
    // 组件对象字典，key 为组件type，value 为组件
    l(this, "components", {});
    // 组件配置记录字典，key 为组件type，value 为组件配置
    l(this, "componentConfigs", {});
    // 基础组件type，切换ui时，可先移除该数组记录的type
    l(this, "baseComponentTypes", []);
    // 组件模式分组，使用 Vue Composition API 的 ref 进行响应式处理
    l(this, "componentSchemaGroups", v([]));
    // 隐藏的组件列表，存储需要隐藏的组件名称
    l(this, "hiddenComponents", []);
    // 表单模式默认schema数据
    l(this, "formSchemas", [
      {
        label: "表单",
        type: "form",
        componentProps: {
          layout: "horizontal",
          name: "default",
          labelWidth: 100,
          labelLayout: "fixed",
          labelCol: {
            span: 5
          },
          wrapperCol: {
            span: 19
          },
          colon: !0,
          labelAlign: "right",
          labelPlacement: "left"
        },
        children: [],
        id: "root"
      }
    ]);
    // 组件分组名称映射，key 为组件原名称，value 为组件分组映射名称
    l(this, "componentGroupNameMap", {});
    // 组件分组排序列表(设置之后，按该数组下标排序)
    l(this, "sortedGroups", ["表单", "布局", "业务组件"]);
    // 视图容器模型，包含活动栏和右侧边栏的配置
    l(this, "viewsContainers", {
      activitybars: w([]),
      // 活动栏配置列表
      rightSidebars: w([])
      // 右侧边栏配置列表
    });
    // 公共方法模型，存储插件的公共方法
    l(this, "publicMethods", {
      // 示例数据
      // publicTest: {
      //   describe: "测试函数",
      //   name: "test",
      //   handler: (e) => {
      //     console.log(e)
      //     // alert("测试函数弹出");
      //   },
      // },
    });
  }
  /**
   * 添加组件到插件管理器中
   * @param componentType 组件类型
   * @param component 组件
   */
  component(e, n) {
    typeof n == "function" && (n = d(n)), this.components[e] = n;
  }
  /**
   * 注册组件到插件管理器中
   * @param componentConfig 组件配置
   */
  registerComponent(e) {
    this.component(e.defaultSchema.type, e.component), e.defaultSchema.input && (e.config.action || (e.config.action = []), e.config.action.unshift(
      {
        type: "setValue",
        describe: "设置值",
        // 参数配置
        argsConfigs: [
          {
            ...e.defaultSchema,
            label: "设置数据",
            field: "0"
          }
        ]
      },
      {
        type: "getValue",
        describe: "获取值"
      }
    )), this.componentConfigs[e.defaultSchema.type] = e, this.computedComponentSchemaGroups();
  }
  /**
   * 从已记录的基础组件类型中移除特定类型的组件
   * @param componentType 要移除的组件类型
   */
  removeComponent(e) {
    delete this.componentConfigs[e], delete this.components[e];
  }
  /**
   * 设置数据源
   * @param
   */
  setSourceData(e) {
    this.sourceData = e, P.emit("updateSource", /* @__PURE__ */ new Date());
  }
  /**
   * 获取数据源
   * @returns
   */
  getSourceData() {
    return Object.prototype.toString.call(this.sourceData) === "[object Array]" ? this.sourceData : [];
  }
  /**
   * 记录基础组件类型
   * @returns baseComponentTypes string[]
   */
  setBaseComponentTypes(e) {
    this.baseComponentTypes = e;
  }
  /**
   * 添加基础组件类型
   * @returns baseComponentType string
   */
  addBaseComponentTypes(e) {
    this.baseComponentTypes.push(e);
  }
  /**
   * 移除已记录的基础组件类型
   */
  removeBaseComponents() {
    this.baseComponentTypes.forEach((e) => {
      this.removeComponent(e);
    }), this.setBaseComponentTypes([]), this.computedComponentSchemaGroups();
  }
  /**
   * 获取所有插件管理中的所有组件
   * @returns components
   */
  getComponents() {
    return this.components;
  }
  /**
   * 通过type 查询相应的组件
   * @returns components
   */
  getComponent(e) {
    return this.components[e];
  }
  /**
   * 注册或更新活动栏（Activitybar）模型。
   * 如果模型中的组件是一个函数，则异步加载该组件。
   * @param activitybar 要注册或更新的活动栏模型
   */
  registerActivitybar(e) {
    typeof e.component == "function" && (e.component = d(e.component)), typeof e.visible > "u" && (e.visible = !0);
    const n = this.viewsContainers.activitybars.value.findIndex((s) => s.id === e.id);
    n !== -1 ? this.viewsContainers.activitybars.value[n] = e : this.viewsContainers.activitybars.value.push(e);
  }
  /**
   * 获取所有activitybars
   * @returns activitybars
   */
  getActivitybars() {
    return this.viewsContainers.activitybars.value;
  }
  /**
   * 隐藏活动栏
   * @param value 属性
   * @param attr 查询字段 默认值 title
   */
  hideActivitybar(e, n = "title") {
    const s = this.viewsContainers.activitybars.value.findIndex((t) => t[n] === e);
    s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !1);
  }
  /**
   * 显示活动栏
   * @param value 属性
   * @param attr 查询字段 默认值 title
   */
  showActivitybar(e, n = "title") {
    const s = this.viewsContainers.activitybars.value.findIndex((t) => t[n] === e);
    s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !0);
  }
  /**
   * 注册右侧栏
   */
  registerRightSidebar(e) {
    typeof e.component == "function" && (e.component = d(e.component)), typeof e.visible > "u" && (e.visible = !0);
    const n = this.viewsContainers.rightSidebars.value.findIndex((s) => s.id === e.id);
    n !== -1 ? this.viewsContainers.rightSidebars.value[n] = e : this.viewsContainers.rightSidebars.value.push(e);
  }
  /**
   * 获取所有rightSidebars
   * @returns rightSidebars
   */
  getRightSidebars() {
    return this.viewsContainers.rightSidebars.value;
  }
  /**
   * 隐藏右侧边栏
   * @param value 属性
   * @param attr 查询字段 默认值 title
   */
  hideRightSidebar(e, n = "title") {
    const s = this.viewsContainers.rightSidebars.value.findIndex((t) => t[n] === e);
    s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !1);
  }
  /**
   * 显示右侧边栏
   * @param value 属性
   * @param attr 查询字段 默认值 title
   */
  showRightSidebar(e, n = "title") {
    const s = this.viewsContainers.rightSidebars.value.findIndex((t) => t[n] === e);
    s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !0);
  }
  /**
   * 获取所有插件管理中的所有组件配置
   * @returns componentAttrs
   */
  getComponentConfings() {
    return this.componentConfigs;
  }
  /**
   * 通过type获取ComponentConfing
   * @returns
   */
  getComponentConfingByType(e) {
    return this.componentConfigs[e];
  }
  /**
   * 计算componentSchemaGroups
   */
  computedComponentSchemaGroups() {
    const e = [];
    Object.values(this.componentConfigs).forEach((n) => {
      if (!this.hiddenComponents.includes(n.defaultSchema.type) && n.groupName) {
        const s = this.componentGroupNameMap[n.groupName] ?? n.groupName;
        let t = e.findIndex((r) => r.title === s);
        t === -1 && (e.push({
          title: s,
          list: []
        }), t = e.length - 1);
        let o = e[t].list.findIndex(
          (r) => r.type === n.defaultSchema.type
        );
        o !== -1 ? e[t].list[o] = n.defaultSchema : e[t].list.push(n.defaultSchema);
      }
    }), e.sort((n, s) => {
      const t = this.sortedGroups.indexOf(n.title), o = this.sortedGroups.indexOf(s.title);
      return t === -1 ? 1 : o === -1 ? -1 : t - o;
    }), e.forEach((n) => {
      n.list.sort((s, t) => {
        var a, u;
        const o = ((a = this.componentConfigs[s.type]) == null ? void 0 : a.sort) ?? 1e3, r = ((u = this.componentConfigs[t.type]) == null ? void 0 : u.sort) ?? 1e3;
        return o - r;
      });
    }), this.componentSchemaGroups.value = e;
  }
  /**
   * 按照分组获取componentSchemaGroups 暂时没啥用
   * @returns componentSchemaGroups
   */
  getComponentSchemaGroups() {
    return this.componentSchemaGroups;
  }
  /**
   * 设置组件分组名称到映射名称的关系
   * @param groupName 组件分组名称
   * @param mapName 映射的名称
   */
  setComponentGroupNameMap(e, n) {
    this.componentGroupNameMap[e] = n;
  }
  /**
   * 清空组件分组名称到映射名称的关系
   */
  clearComponentGroupNameMap() {
    this.componentGroupNameMap = {};
  }
  /**
   * 设置组件分组的排序
   * @param sortedGroups 包含组名和排序字段的对象数组
   */
  setSortedGroups(e) {
    this.sortedGroups = e, this.computedComponentSchemaGroups();
  }
  /**
   * 清空组件分组的排序
   */
  clearSortedGroups() {
    this.sortedGroups = [], this.computedComponentSchemaGroups();
  }
  /**
   * 添加需要隐藏的组件类型
   * @param {*} type
   * @returns
   */
  hideComponent(e) {
    this.hiddenComponents.push(e), this.computedComponentSchemaGroups();
  }
  /**
   * 移除需要隐藏的组件类型
   * @param {*} type
   * @returns
   */
  showComponent(e) {
    this.hiddenComponents = this.hiddenComponents.filter((n) => n !== e), this.computedComponentSchemaGroups();
  }
  /**
   * 设置需要隐藏的组件类型数组
   * @param {*} type[]
   * @returns
   */
  setHideComponents(e) {
    this.hiddenComponents = e, this.computedComponentSchemaGroups();
  }
  /**
   * 设置initialized的状态。
   *
   * @param value 要设置的布尔值。
   */
  setInitialized(e) {
    this.initialized.value = e;
  }
  /**
   * 添加公共方法
   * @param publicMethod
   */
  addPublicMethod(e) {
    const n = e.methodName ?? e.name, s = e.method ?? e.handler;
    this.publicMethods[n] = {
      ...e,
      name: n,
      handler: s
    };
  }
  /**
   * 移除公共方法
   * @param methodName
   */
  removePublicMethod(e) {
    delete this.publicMethods[e];
  }
}
const z = new O();
export {
  P as E,
  O as P,
  R as a,
  N as b,
  $ as c,
  m as d,
  b as e,
  U as f,
  y as g,
  J as h,
  p as i,
  D as j,
  L as k,
  d as l,
  V as m,
  q as n,
  k as o,
  z as p,
  M as q,
  c as r,
  W as s
};