ai-form-designer/dist/index-CnqUFHQH.js

vue3+adv的设计器,可视化开发页面表单

import { defineComponent as U, inject as L, createElementBlock as g, openBlock as p, Fragment as A, renderList as T, createElementVNode as i, toDisplayString as O, createVNode as C, unref as _, withCtx as R, createCommentVNode as G, createTextVNode as J, ref as E, computed as S, withDirectives as F, normalizeClass as j, vShow as P, reactive as H, createBlock as K, nextTick as Q, toRaw as z, watch as W } from "vue";
import { l as q, p as w, _ as X, k as Y, m as Z } from "./index-DwcJO-0a.js";
import { _ as D } from "./icon.vue_vue_type_script_setup_true_lang-DW206h_7.js";
import { d as ee } from "./vuedraggable.umd-R2PMz9bE.js";
import { _ as te } from "./tree.vue_vue_type_script_setup_true_lang-CNBbA1zW.js";
const ne = { class: "epic-event-info" }, oe = ["title"], le = { class: "epic-event-btn text-lg flex items-center text-$epic-text-secondary" }, ae = { class: "epic-action-editor-main" }, se = { class: "epic-editor-item rounded" }, ie = { class: "w-36px flex items-center text-lg" }, ce = { class: "flex-1" }, de = { key: 0 }, ue = { key: 1 }, re = { key: 2 }, pe = { class: "epic-action-box text-lg text-$epic-text-medium" }, me = ["onClick"], ve = ["onClick"], fe = /* @__PURE__ */ U({
  __name: "EActionEditorItem",
  props: {
    itemEvents: {
      type: Array,
      default: () => []
    },
    allEvents: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: Object,
      default: () => []
    },
    events: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ["add", "edit", "update:modelValue"],
  setup(b, { emit: k }) {
    const m = b, x = k, f = L("pageSchema");
    function V(v) {
      x("add", v);
    }
    function h(v) {
      return q(f.schemas, v).label;
    }
    function r(v, c) {
      var e;
      const l = n(c);
      l[c] = m.events[c].filter(($, N) => v !== N), (e = l[c]) != null && e.length || delete l[c], x("update:modelValue", l);
    }
    function u(v, c, l) {
      x("edit", v, c, l);
    }
    function n(v) {
      const c = {};
      return m.allEvents.forEach((l) => {
        if (!m.events[l.type].length || l.type === v)
          return !1;
        c[l.type] = m.events[l.type];
      }), c;
    }
    return (v, c) => (p(!0), g(A, null, T(b.itemEvents, (l) => (p(), g("div", {
      key: l.type,
      class: "epic-event-item"
    }, [
      i("div", ne, [
        i("div", {
          class: "epic-event-label",
          title: l.describe
        }, O(l.describe), 9, oe),
        i("div", le, [
          C(_(D), {
            name: "icon--epic--add-rounded",
            onClick: (e) => V(l.type)
          }, null, 8, ["onClick"])
        ])
      ]),
      i("div", ae, [
        C(_(ee), {
          modelValue: m.events[l.type],
          "onUpdate:modelValue": (e) => m.events[l.type] = e,
          "item-key": "id",
          "component-data": {
            type: "transition-group"
          },
          group: "option-list",
          handle: ".handle",
          animation: 200
        }, {
          item: R(({ element: e, index: $ }) => [
            i("div", se, [
              i("div", ie, [
                C(_(D), {
                  class: "mr-2 text-lg cursor-move handle text-$epic-text-medium",
                  name: "icon--epic--drag"
                })
              ]),
              i("div", ce, [
                e.type === "component" ? (p(), g("div", de, O(h(e.componentId)), 1)) : e.type === "custom" ? (p(), g("div", ue, " 自定义函数 ")) : e.type === "public" ? (p(), g("div", re, " 公共函数 ")) : G("", !0),
                J(" " + O(e.methodName), 1)
              ]),
              i("div", pe, [
                i("div", {
                  class: "epic-edit-btn",
                  onClick: (N) => u($, l.type, e)
                }, [
                  C(_(D), { name: "icon--epic--page-info-outline-rounded" })
                ], 8, me),
                i("div", {
                  class: "epic-del-btn",
                  onClick: (N) => r($, l.type)
                }, [
                  C(_(D), { name: "icon--epic--delete-outline-rounded" })
                ], 8, ve)
              ])
            ])
          ]),
          _: 2
        }, 1032, ["modelValue", "onUpdate:modelValue"])
      ])
    ]))), 128));
  }
}), he = { class: "h-full flex flex-col" }, ge = /* @__PURE__ */ U({
  __name: "EScriptEdit",
  setup(b) {
    const k = w.getComponent("monacoEditor"), m = {
      theme: "vs-light",
      selectOnLineNumbers: !0,
      minimap: {
        enabled: !1
      }
    }, x = E(null), f = L("pageSchema");
    return (V, h) => (p(), g("div", he, [
      h[1] || (h[1] = i("div", { class: "pb-2" }, " 自定义函数编辑 ", -1)),
      C(_(k), {
        ref_key: "monacoEditorRef",
        ref: x,
        autoToggleTheme: "",
        modelValue: _(f).script,
        "onUpdate:modelValue": h[0] || (h[0] = (r) => _(f).script = r),
        class: "epic-editor flex-1",
        config: m,
        language: "javascript"
      }, null, 8, ["modelValue"])
    ]));
  }
}), _e = { class: "epic-attribute-view" }, ye = ["title"], xe = { class: "epic-attr-input" }, Ie = /* @__PURE__ */ U({
  __name: "EArgsEditor",
  props: {
    modelValue: {},
    actionArgsConfigs: {}
  },
  emits: ["update:modelValue"],
  setup(b, { emit: k }) {
    const m = b, x = k, f = S(() => m.modelValue ? JSON.parse(m.modelValue) : []);
    function V(r) {
      var u;
      return typeof r.show == "boolean" ? r.show : typeof r.show == "function" ? (u = r.show) == null ? void 0 : u.call(r, { values: f.value }) : !0;
    }
    function h(r, u) {
      const n = [
        ...JSON.parse(m.modelValue ?? "[]")
      ];
      n[u] = r, x("update:modelValue", JSON.stringify(n));
    }
    return (r, u) => (p(), g("div", _e, [
      (p(!0), g(A, null, T(m.actionArgsConfigs, (n) => (p(), g("div", {
        key: n.field + n.type
      }, [
        F(i("div", {
          class: j(["epic-attr-item", n.layout])
        }, [
          i("div", {
            class: "epic-attr-label",
            title: n.label
          }, O(n.label), 9, ye),
          i("div", xe, [
            C(_(X), {
              componentSchema: { ...n, componentProps: { ...n.componentProps, input: !1, field: void 0, hidden: !1 }, show: !0, noFormItem: !0 },
              "model-value": f.value[n.field],
              "onUpdate:modelValue": (v) => h(v, n.field)
            }, null, 8, ["componentSchema", "model-value", "onUpdate:modelValue"])
          ])
        ], 2), [
          [P, V(n)]
        ])
      ]))), 128))
    ]));
  }
}), Ce = { class: "rounded epic-modal-action-main" }, Ve = { class: "epic-modal-left-panel h-full flex flex-col" }, ke = { class: "flex flex-1 h-0 flex-col" }, be = { class: "flex-1 h-0" }, Ee = { class: "epic-action-select h-30/100 flex flex-col" }, $e = { class: "flex-1 overflow-auto pr-8px" }, Ne = ["onClick"], Se = { class: "text-center pt-42px text-gray-400" }, we = { class: "epic-modal-right-panel" }, Oe = {
  key: 1,
  class: "text-center pt-42px text-gray-400"
}, Ae = /* @__PURE__ */ U({
  __name: "EActionModal",
  emits: ["add", "edit"],
  setup(b, { expose: k, emit: m }) {
    const x = w.getComponent("modal"), f = E(!0), V = L("pageSchema"), h = L("pageManager", {}), r = E(!1), u = E([]), n = E(null), v = m, c = S(() => {
      var o;
      return e.actionItem.type === "component" ? n.value ? (o = w.getComponentConfings()[n.value.type].config.action) == null ? void 0 : o.map((t) => ({
        label: t.describe,
        value: t.type
      })) : [] : e.actionItem.type === "custom" ? Object.entries(h.funcs.value).filter(([t, I]) => typeof I == "function").map(([t]) => ({ label: t, value: t })) : e.actionItem.type === "public" ? Object.entries(w.publicMethods).map(([t]) => ({
        label: t,
        value: t
      })) : [];
    }), l = S(() => {
      if (e.actionItem.type === "component" && n.value) {
        const o = w.getComponentConfings()[n.value.type].config.action, t = o == null ? void 0 : o.find(
          (I) => I.type === e.actionItem.methodName
        );
        if (t != null && t.argsConfigs) {
          const I = t.argsConfigs.findIndex(
            (y) => y.label === "设置数据"
          );
          I !== -1 && (t.argsConfigs[I] = {
            ...n.value,
            label: "设置数据",
            field: "0",
            id: Y()
          });
        }
        return (t == null ? void 0 : t.argsConfigs) ?? [];
      }
      return [];
    }), e = H({
      actionItem: {
        type: "custom",
        methodName: "test",
        componentId: null
      },
      cacheData: {}
    });
    function $() {
      var o;
      r.value = !0, f.value = !0, e.actionItem.type = "custom", e.actionItem.componentId = null, (o = c.value) != null && o.length && d(c.value[0].value);
    }
    function N(o) {
      if (r.value = !0, f.value = !1, n.value = null, o.componentId) {
        const t = q(V.schemas, o.componentId);
        n.value = t, u.value = [o.componentId];
      }
      Q(() => {
        e.actionItem.componentId = o.componentId, e.actionItem.methodName = o.methodName, e.actionItem.type = o.type, e.actionItem.args = o.args;
      });
    }
    function B() {
      if (!e.actionItem.methodName) {
        alert("请先选择动作方法");
        return;
      }
      v(f.value ? "add" : "edit", Z(z(e.actionItem))), M();
    }
    function M() {
      r.value = !1, u.value = [], e.cacheData = {};
    }
    function s(o) {
      var t;
      e.actionItem.componentId = null, e.actionItem.type = o, n.value = null, e.actionItem.methodName = null, u.value = [], (t = c.value) != null && t.length && d(c.value[0].value);
    }
    function a(o) {
      var t;
      e.actionItem.args && (e.cacheData[e.actionItem.componentId + e.actionItem.methodName] = e.actionItem.args), e.actionItem.componentId = o.id, e.actionItem.type = "component", e.actionItem.methodName = null, n.value = o.componentSchema, (t = c.value) != null && t.length && d(c.value[0].value);
    }
    function d(o) {
      e.actionItem.methodName = o, e.actionItem.args = e.cacheData[e.actionItem.componentId + e.actionItem.methodName];
    }
    return k({
      handleOpen: $,
      handleOpenEdit: N
    }), (o, t) => (p(), K(_(x), {
      modelValue: r.value,
      "onUpdate:modelValue": t[4] || (t[4] = (I) => r.value = I),
      class: "w-1200px",
      width: "1200px",
      onClose: M,
      onOk: B,
      title: "动作配置"
    }, {
      default: R(() => {
        var I;
        return [
          i("div", Ce, [
            i("div", Ve, [
              i("div", ke, [
                i("div", {
                  class: j(["fun-btn", { checked: e.actionItem.type === "custom" }]),
                  onClick: t[0] || (t[0] = (y) => s("custom"))
                }, " 自定义函数 ", 2),
                i("div", {
                  class: j(["fun-btn", { checked: e.actionItem.type === "public" }]),
                  onClick: t[1] || (t[1] = (y) => s("public"))
                }, " 公共函数 ", 2),
                t[5] || (t[5] = J(" 组件 ")),
                i("div", be, [
                  C(_(te), {
                    selectedKeys: u.value,
                    "onUpdate:selectedKeys": t[2] || (t[2] = (y) => u.value = y),
                    options: _(V).schemas,
                    onNodeClick: a
                  }, null, 8, ["selectedKeys", "options"])
                ])
              ]),
              i("div", Ee, [
                t[6] || (t[6] = i("div", { class: "mb-2" }, "动作选择", -1)),
                i("div", $e, [
                  (p(!0), g(A, null, T(c.value, (y) => (p(), g("div", {
                    class: j([{ checked: y.value === e.actionItem.methodName }, "epic-action-item"]),
                    onClick: (Ue) => d(y.value),
                    key: y.value
                  }, [
                    i("span", null, O(y.label), 1)
                  ], 10, Ne))), 128)),
                  F(i("div", Se, " 当前组件暂无动作 ", 512), [
                    [P, !((I = c.value) != null && I.length)]
                  ])
                ])
              ])
            ]),
            i("div", we, [
              e.actionItem.type === "custom" ? (p(), K(ge, { key: 0 })) : l.value.length === 0 ? (p(), g("div", Oe, " 暂无配置 ")) : (p(), K(Ie, {
                key: 2,
                modelValue: e.actionItem.args,
                "onUpdate:modelValue": t[3] || (t[3] = (y) => e.actionItem.args = y),
                actionArgsConfigs: l.value
              }, null, 8, ["modelValue", "actionArgsConfigs"]))
            ])
          ])
        ];
      }),
      _: 1
    }, 8, ["modelValue"]));
  }
}), Re = /* @__PURE__ */ U({
  __name: "index",
  props: {
    eventList: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: Object
    }
  },
  emits: ["update:modelValue"],
  setup(b, { emit: k }) {
    const m = w.getComponent("Collapse"), x = w.getComponent("CollapseItem"), f = E(null);
    let V = 0;
    const h = b, r = k, u = S({
      get() {
        return h.modelValue;
      },
      set(s) {
        r("update:modelValue", s);
      }
    }), n = E([]), v = S(() => h.eventList.filter((s) => s.events.length)), c = S(() => h.eventList.map((s) => s.events).flat()), l = E({});
    c.value.forEach((s) => {
      l.value[s.type] = S({
        get() {
          var a;
          return ((a = u.value) == null ? void 0 : a[s.type]) ?? [];
        },
        set(a) {
          a && a.length ? u.value[s.type] = a.map((d) => z(d)) : delete u.value[s.type];
        }
      });
    }), W(() => v.value, (s) => {
      s.length && (n.value = s.filter((a) => {
        for (let d = 0; d < a.events.length; d++) {
          const o = a.events[d].type;
          if (l.value[o].length)
            return !0;
        }
        return !1;
      }).map((a) => a.title));
    }, {
      // 配置选项
      immediate: !0
      // 立即执行一次回调函数
    });
    let e = "";
    function $(s) {
      var a;
      (a = f.value) == null || a.handleOpen(), e = s;
    }
    function N(s, a, d) {
      var o;
      (o = f.value) == null || o.handleOpenEdit(d), V = s, e = a;
    }
    function B(s) {
      l.value[e][V] = s, u.value[e] = [...l.value[e] ?? []];
    }
    function M(s) {
      if (!u.value) {
        u.value = { [e]: [...l.value[e] ?? [], s] };
        return;
      }
      u.value[e] = [...l.value[e] ?? [], s];
    }
    return (s, a) => (p(), g(A, null, [
      C(_(m), {
        modelValue: n.value,
        "onUpdate:modelValue": a[1] || (a[1] = (d) => n.value = d),
        activeKey: n.value,
        "onUpdate:activeKey": a[2] || (a[2] = (d) => n.value = d),
        "expanded-names": n.value,
        "onUpdate:expandedNames": a[3] || (a[3] = (d) => n.value = d)
      }, {
        default: R(() => [
          (p(!0), g(A, null, T(v.value, (d) => (p(), K(_(x), {
            key: d.title,
            title: d.title,
            header: d.title,
            name: d.title
          }, {
            default: R(() => [
              C(fe, {
                modelValue: u.value,
                "onUpdate:modelValue": a[0] || (a[0] = (o) => u.value = o),
                "item-events": d.events,
                "all-events": c.value,
                events: l.value,
                onAdd: $,
                onEdit: N
              }, null, 8, ["modelValue", "item-events", "all-events", "events"])
            ]),
            _: 2
          }, 1032, ["title", "header", "name"]))), 128))
        ]),
        _: 1
      }, 8, ["modelValue", "activeKey", "expanded-names"]),
      C(Ae, {
        ref_key: "EActionModalRef",
        ref: f,
        onAdd: M,
        onEdit: B
      }, null, 512)
    ], 64));
  }
});
export {
  Re as default
};