form-designer-xinyi/dist/index.js

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

import { u as ee, c as te, o as F, a as L, _ as ae } from "./index-DWpaTBDO.js";
import { ref as h, onMounted as ne, watch as C, onUnmounted as se, defineComponent as K, useSlots as oe, reactive as O, provide as M, computed as Y, getCurrentInstance as re, unref as D, openBlock as I, createElementBlock as U, createBlock as P, Suspense as j, withCtx as _, createElementVNode as T, Fragment as le, renderList as ie, createVNode as $, nextTick as z, inject as ce, renderSlot as N, createCommentVNode as ue, normalizeClass as de, toRaw as Q } from "vue";
import { p as V, f as fe, l as B, d as Z, a as J, g as me, b as pe, c as he, r as X } from "./revoke-iScTU0eW.js";
import { P as Ze, t as Ke, o as ze, k as qe, n as Qe, e as Xe, h as Ye, i as je, j as Je, m as Ge, q as We, s as et, u as tt } from "./revoke-iScTU0eW.js";
function Pe() {
  const { isDark: e } = R(), o = ee(e);
  return {
    isDark: e,
    toggleDark: o
  };
}
function ve() {
  const e = h(!1);
  return ne(() => {
    ge(e), ye(e);
  }), C(
    () => e.value,
    () => {
      e.value ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark");
    }
  ), {
    isDark: e
  };
}
function ge(e) {
  var o = document.documentElement;
  o && (o.classList.contains("dark") ? e.value = !0 : e.value = !1);
}
function ye(e) {
  var o = document.querySelector("html"), t = new MutationObserver(function(r) {
    for (var l of r)
      if (l.type === "attributes" && l.attributeName === "class") {
        const f = l.target;
        new Array(...f.classList).includes("dark") ? e.value = !0 : e.value = !1;
      }
  });
  t.observe(o, {
    attributes: !0,
    attributeFilter: ["class"]
  }), se(() => {
    t.disconnect();
  });
}
function Se() {
  const e = h(1), o = h(!1), { isDark: t } = ve(), { pressSpace: r, pressShift: l, pressCtrl: f } = be();
  return {
    canvasScale: e,
    pressSpace: r,
    pressShift: l,
    pressCtrl: f,
    disabledZoom: o,
    isDark: t
  };
}
const R = te(Se);
function be() {
  const e = h(!1), o = h(!1), t = h(!1);
  return F(" ", (r) => {
    var l = r.target;
    ["INPUT", "TEXTAREA"].includes(l.tagName) || r.preventDefault(), e.value = !0;
  }), L(" ", () => {
    e.value = !1;
  }), F("Shift", (r) => {
    r.preventDefault(), o.value = !0;
  }), L("Shift", () => {
    o.value = !1;
  }), F("Control", (r) => {
    r.preventDefault(), t.value = !0;
  }), L("Control", () => {
    t.value = !1;
  }), { pressSpace: e, pressShift: o, pressCtrl: t };
}
function Re(e) {
  const { pressSpace: o } = R();
  let t = 0, r = 0;
  function l(c) {
    var u;
    t = c.x, r = c.y, (u = c.dataTransfer) == null || u.setDragImage(document.createElement("div"), 0, 0);
  }
  function f(c) {
    if (c.preventDefault(), !c.x || !c.y || !o.value)
      return;
    const u = c.x - t, m = c.y - r;
    t = c.x, r = c.y, e.value && (e.value.scrollTop -= m, e.value.scrollLeft -= u);
  }
  function v() {
    o.value = !1;
  }
  return { handleElementDragStart: l, handleElementDrag: f, handleElementDragEnd: v };
}
function Ae(e) {
  const { pressCtrl: o, canvasScale: t, disabledZoom: r } = R();
  function l(f) {
    if (!o.value || r.value)
      return;
    f.preventDefault();
    let v = 0;
    f.deltaY < 0 ? v = t.value + 0.05 : v = t.value - 0.05, !(v > 150 || v < 0.5) && (t.value = v);
  }
  return C(
    () => t.value,
    (f) => {
      e.value && !r.value && (e.value.style.transform = `scale(${f})`);
    }
  ), { handleZoom: l, canvasScale: t };
}
function He(e, o = 16.66) {
  let t;
  function r() {
    l(), t = window.setInterval(e, o);
  }
  function l() {
    window.clearInterval(t);
  }
  return {
    startTimedQuery: r,
    stopTimedQuery: l
  };
}
function Fe(e, o) {
  let t = null;
  return (...r) => {
    t && clearTimeout(t), t = setTimeout(() => {
      e.apply(this, r);
    }, o);
  };
}
function G() {
  const e = h({}), o = h({}), t = h(!1), r = h([]);
  function l(a) {
    return e.value[a];
  }
  function f(a, n) {
    e.value[a] = n;
  }
  function v(a) {
    delete e.value[a];
  }
  function c(a, n = !1) {
    const d = Object.entries(
      V.publicMethods
    ).reduce((p, [g, s]) => (p[g] = s.handler, p), {});
    try {
      new Function(`const epic = this;${a}`).bind({
        ...d,
        getComponent: l,
        find: l,
        defineExpose: u,
        publicMethods: d,
        pluginManager: V
      })();
    } catch (p) {
      n && console.error("[epic-desinger：自定义函数]异常：", p);
    }
  }
  function u(a) {
    a != null && (o.value = a);
  }
  function m(a, ...n) {
    a == null || a.forEach((d) => {
      var p, g, s;
      if (d.type === "public" && ((p = V.publicMethods[d.methodName]) == null || p.handler(...n)), d.type === "custom" && ((s = (g = o.value)[d.methodName]) == null || s.call(g, ...n)), d.type === "component") {
        (d.componentId != null && l(d.componentId))[d.methodName](
          ...d.args ? JSON.parse(d.args) : n
        );
        return;
      }
    });
  }
  function b(a = !0) {
    t.value = a;
  }
  function x(a) {
    const n = fe(a, () => !0);
    r.value = n.map((d) => d.id);
  }
  return {
    componentInstances: e,
    funcs: o,
    isDesignMode: t,
    defaultComponentIds: r,
    getComponentInstance: l,
    // 简化查询函数, 推荐使用
    find: l,
    addComponentInstance: f,
    removeComponentInstance: v,
    setMethods: c,
    doActions: m,
    setDesignMode: b,
    setDefaultComponentIds: x
  };
}
const De = {
  key: 0,
  class: "epic-loading-box"
}, we = { class: "epic-builder-main" }, ke = { class: "epic-loading-box" }, _e = /* @__PURE__ */ K({
  __name: "builder",
  props: {
    pageSchema: {},
    disabled: { type: Boolean }
  },
  emits: ["ready"],
  setup(e, { expose: o, emit: t }) {
    const r = B(() => import("./index-B4P9zbh-.js")), l = G(), f = t, v = oe(), c = h({}), u = h(!1), m = e, b = O({
      schemas: []
    });
    C(() => m.pageSchema, (s) => {
      Z(b, s);
    }, {
      immediate: !0,
      deep: !0
    }), C(() => b.script, (s) => {
      s && s !== "" && l.setMethods(s, !0);
    }, {
      immediate: !0
    }), M("slots", v), M("pageManager", l), M("forms", c), M("pageSchema", b), M("disabled", Y(() => m.disabled));
    function x(s = "default") {
      return new Promise(async (y, w) => {
        var k;
        if (!u.value) {
          const A = C(u, async () => {
            A(), y(await x(s));
          });
          return;
        }
        const S = (k = c.value) == null ? void 0 : k[s];
        if (!S)
          return w(`表单 [name=${s}] 不存在`), !1;
        const E = J(await S.getData());
        y(E);
      });
    }
    function a(s = "default") {
      return new Promise(async (y, w) => {
        var E;
        if (!u.value) {
          const k = C(u, async () => {
            k(), y(await a(s));
          });
          return;
        }
        const S = (E = c.value) == null ? void 0 : E[s];
        if (!S)
          return w(`表单 [name=${s}] 不存在`), !1;
        try {
          await S.validate();
          const k = await S.getData();
          y(k);
        } catch (k) {
          w(k);
        }
      });
    }
    function n(s, y = "default") {
      var S;
      if (!u.value) {
        const E = C(u, () => {
          E(), n(s, y);
        });
        return;
      }
      const w = (S = c.value) == null ? void 0 : S[y];
      if (!w)
        return console.error(`表单 [name=${y}] 不存在`), !1;
      w.setData(s);
    }
    function d(s = "default") {
      return new Promise(async (y, w) => {
        var E;
        if (!u.value) {
          const k = C(u, async () => {
            k(), y(await d(s));
          });
          return;
        }
        const S = (E = c.value) == null ? void 0 : E[s];
        if (!S)
          return w(`表单 [name=${s}] 不存在`), !1;
        y(S);
      });
    }
    const { proxy: p } = re();
    function g() {
      z(() => {
        u.value = !0, f("ready", l), p && l.addComponentInstance("builder", p);
      });
    }
    return o({
      ready: u,
      getData: x,
      setData: n,
      validate: a,
      getFormInstance: d
    }), (s, y) => D(V).initialized.value ? (I(), P(j, {
      key: 1,
      onResolve: g
    }, {
      default: _(() => [
        T("div", we, [
          (I(!0), U(le, null, ie(b.schemas, (w, S) => (I(), P(D(ae), {
            key: S,
            componentSchema: w
          }, null, 8, ["componentSchema"]))), 128))
        ])
      ]),
      fallback: _(() => [
        T("div", ke, [
          $(D(r))
        ])
      ]),
      _: 1
    })) : (I(), U("div", De));
  }
}), Ee = { class: "min-w-750px rounded" }, xe = { class: "h-full rounded" }, Ce = /* @__PURE__ */ K({
  __name: "index",
  setup(e, { expose: o }) {
    const t = V.getComponent("monacoEditor"), r = V.getComponent("modal"), l = h(null), f = h(!1), v = h(!1), c = h({}), u = ce("pageSchema"), m = h(null), b = h("");
    function x() {
      v.value = !1;
    }
    function a() {
      f.value = !1;
    }
    function n() {
      f.value = !0, b.value = me();
    }
    async function d() {
      try {
        const p = await m.value.validate();
        console.log("表单结果为：", p), c.value = JSON.stringify(p, null, 2), z(() => {
          var g;
          (g = l.value) == null || g.setValue(c.value);
        }), v.value = !0;
      } catch (p) {
        typeof p == "string" && alert(p + `\r
请添加表单组件后再尝试！`), console.error(p);
      }
    }
    return o({
      handleOpen: n
    }), (p, g) => (I(), P(D(r), {
      modelValue: f.value,
      "onUpdate:modelValue": g[1] || (g[1] = (s) => f.value = s),
      title: "预览",
      class: "w-900px",
      width: "900px",
      onClose: a,
      onOk: d,
      okText: "输出结果"
    }, {
      default: _(() => [
        T("div", Ee, [
          (I(), P(D(_e), {
            key: b.value,
            ref_key: "kb",
            ref: m,
            "page-schema": D(u)
          }, null, 8, ["page-schema"])),
          $(D(r), {
            modelValue: v.value,
            "onUpdate:modelValue": g[0] || (g[0] = (s) => v.value = s),
            title: "表单数据",
            class: "w-860px",
            width: "860px",
            onClose: x,
            onOk: x
          }, {
            default: _(() => [
              T("div", xe, [
                $(D(t), {
                  ref_key: "monacoEditorRef",
                  ref: l,
                  autoToggleTheme: "",
                  class: "h-full editor",
                  "model-value": c.value
                }, null, 8, ["model-value"])
              ])
            ]),
            _: 1
          }, 8, ["modelValue"])
        ])
      ]),
      _: 1
    }, 8, ["modelValue"]));
  }
}), Me = {
  key: 0,
  class: "epic-loading-box"
}, Ie = { class: "epic-designer-main" }, $e = { class: "epic-header-container" }, Te = { class: "epic-loading-box" }, Le = /* @__PURE__ */ K({
  __name: "designer",
  props: {
    disabledZoom: { type: Boolean, default: !1 },
    hiddenHeader: { type: Boolean, default: !1 },
    lockDefaultSchemaEdit: { type: Boolean, default: !1 },
    title: { default: "EpicDesigner默认项目" },
    defaultSchema: { default: () => ({
      schemas: [{
        type: "page",
        id: "root",
        label: "页面",
        children: [],
        componentProps: {
          style: {
            padding: "16px"
          }
        }
      }],
      script: `const { defineExpose, find } = epic;

function test (){
    console.log('test')
}

// 通过defineExpose暴露的函数或者属性
defineExpose({
 test
})`
    }) }
  },
  emits: ["ready", "save", "reset", "toggleDeviceMode"],
  setup(e, { expose: o, emit: t }) {
    const r = B(() => import("./index-DHI4gLFF.js")), l = B(() => import("./index-H4zzFoVP.js")), f = B(() => import("./index-DhC2w8dK.js")), v = B(() => import("./index-DWCjsALD.js")), c = B(() => import("./index-B4P9zbh-.js")), u = G(), m = e;
    u.setDesignMode(), u.setDefaultComponentIds(m.defaultSchema.schemas);
    const b = t, x = h(null), a = O({
      checkedNode: null,
      hoverNode: null,
      disableHover: !1,
      matched: []
    }), n = O({
      schemas: [],
      script: m.defaultSchema.script
    }), { disabledZoom: d } = R();
    C(() => m.disabledZoom, (i) => {
      d.value = i;
    }, {
      immediate: !0
    }), C(() => n.script, (i) => {
      i && i !== "" && u.setMethods(i);
    }, {
      immediate: !0
    }), M("pageSchema", n), M("pageManager", u), M("designerProps", Y(() => m)), M("designer", {
      setCheckedNode: g,
      setHoverNode: s,
      setDisableHover: w,
      handleToggleDeviceMode: W,
      reset: k,
      state: a
    });
    function p() {
      n.schemas = J(m.defaultSchema.schemas), g(n.schemas[0]), X.push(n.schemas, "初始化撤销功能");
    }
    async function g(i = n.schemas[0]) {
      a.checkedNode = i, a.matched = pe(n.schemas, i.id);
    }
    async function s(i = null) {
      var H;
      if (!i || a.disableHover)
        return a.hoverNode = null, !1;
      if ((i == null ? void 0 : i.id) === ((H = a.hoverNode) == null ? void 0 : H.id))
        return !1;
      a.hoverNode = i;
    }
    function y() {
      z(() => {
        b("ready", { pageManager: u });
      });
    }
    async function w(i = !1) {
      a.disableHover = i;
    }
    function S(i) {
      Z(n, i);
    }
    function E() {
      return Q(n);
    }
    function k() {
      he(n.schemas, m.defaultSchema.schemas) && n.script === m.defaultSchema.script || (Z(n.schemas, m.defaultSchema.schemas), n.script = m.defaultSchema.script, g(n.schemas[0]), X.push(n.schemas, "重置操作"), b("reset", n));
    }
    function A() {
      b("save", Q(n));
    }
    function W(i) {
      b("toggleDeviceMode", i);
    }
    function q() {
      x.value.handleOpen();
    }
    return p(), o({
      setData: S,
      getData: E,
      reset: k,
      preview: q
    }), (i, H) => D(V).initialized.value ? (I(), P(j, {
      key: 1,
      onResolve: y
    }, {
      default: _(() => [
        T("div", Ie, [
          T("div", $e, [
            N(i.$slots, "header", {}, () => [
              m.hiddenHeader ? ue("", !0) : (I(), P(D(r), {
                key: 0,
                onPreview: q,
                onSave: A
              }, {
                header: _(() => [
                  N(i.$slots, "header-prefix")
                ]),
                prefix: _(() => [
                  N(i.$slots, "header-prefix")
                ]),
                title: _(() => [
                  N(i.$slots, "header-title")
                ]),
                "right-prefix": _(() => [
                  N(i.$slots, "header-right-prefix")
                ]),
                "right-action": _(() => [
                  N(i.$slots, "header-right-action")
                ]),
                "right-suffix": _(() => [
                  N(i.$slots, "header-right-suffix")
                ]),
                _: 3
              }))
            ])
          ]),
          T("div", {
            class: de(["epic-split-view-container", { "hidden-header": i.hiddenHeader }])
          }, [
            $(D(l)),
            $(D(f)),
            $(D(v))
          ], 2),
          $(Ce, {
            ref_key: "previewRef",
            ref: x
          }, null, 512)
        ])
      ]),
      fallback: _(() => [
        T("div", Te, [
          $(D(c))
        ])
      ]),
      _: 3
    })) : (I(), U("div", Me));
  }
});
export {
  _e as EBuilder,
  Le as EDesigner,
  ae as ENode,
  Ze as PluginManager,
  Ke as capitalizeFirstLetter,
  ze as convertKFormData,
  Fe as debounce,
  J as deepClone,
  Z as deepCompareAndModify,
  he as deepEqual,
  qe as findSchemaById,
  Qe as findSchemaInfoById,
  fe as findSchemas,
  Xe as generateNewSchema,
  Ye as getAttributeValue,
  ge as getDarkState,
  je as getFormFields,
  Je as getFormSchemas,
  pe as getMatchedById,
  me as getUUID,
  B as loadAsyncComponent,
  Ge as mapSchemas,
  V as pluginManager,
  We as recursionConvertedNode,
  X as revoke,
  et as setAttributeValue,
  ve as useDark,
  Re as useElementDrag,
  Ae as useElementZoom,
  be as useKeyPress,
  G as usePageManager,
  tt as useRevoke,
  R as useShareStore,
  Se as useStore,
  Pe as useTheme,
  He as useTimedQuery
};