form-designer-xinyi/dist/index-CixHJfR9.js

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

import { effectScope as ce, isRef as le, ref as O, watch as P, nextTick as K, getCurrentScope as ue, onScopeDispose as de, onMounted as ie, unref as B, getCurrentInstance as q, computed as A, defineComponent as Y, reactive as Z, inject as N, useAttrs as fe, provide as pe, shallowRef as me, onUnmounted as ve, resolveComponent as ye, openBlock as W, createBlock as L, mergeProps as T, withCtx as k, resolveDynamicComponent as ee, createVNode as te, normalizeProps as ne, guardReactiveProps as oe, renderSlot as J, createCommentVNode as he } from "vue";
import { a as j, c as be, d as we, p as $, t as ge } from "./revoke-iScTU0eW.js";
function G(e) {
  return ue() ? (de(e), !0) : !1;
}
function qe(e) {
  let n = 0, o, r;
  const t = () => {
    n -= 1, r && n <= 0 && (r.stop(), o = void 0, r = void 0);
  };
  return (...s) => (n += 1, o || (r = ce(!0), o = r.run(() => e(...s))), G(t), o);
}
function F(e) {
  return typeof e == "function" ? e() : B(e);
}
const Se = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const Ce = (e) => typeof e < "u", _e = Object.prototype.toString, Ee = (e) => _e.call(e) === "[object Object]", Pe = () => {
};
function Ve(e) {
  return q();
}
function Ae(e, n = !0, o) {
  Ve() ? ie(e, o) : n ? e() : K(e);
}
function Me(e = !1, n = {}) {
  const {
    truthyValue: o = !0,
    falsyValue: r = !1
  } = n, t = le(e), s = O(e);
  function u(c) {
    if (arguments.length)
      return s.value = c, s.value;
    {
      const v = F(o);
      return s.value = s.value === v ? F(r) : v, s.value;
    }
  }
  return t ? u : [s, u];
}
function ze(e, n, o) {
  const r = P(e, (...t) => (K(() => r()), n(...t)), o);
  return r;
}
function x(e) {
  var n;
  const o = F(e);
  return (n = o == null ? void 0 : o.$el) != null ? n : o;
}
const M = Se ? window : void 0;
function Ie(...e) {
  let n, o, r, t;
  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([o, r, t] = e, n = M) : [n, o, r, t] = e, !n)
    return Pe;
  Array.isArray(o) || (o = [o]), Array.isArray(r) || (r = [r]);
  const s = [], u = () => {
    s.forEach((d) => d()), s.length = 0;
  }, c = (d, a, f, l) => (d.addEventListener(a, f, l), () => d.removeEventListener(a, f, l)), v = P(
    () => [x(n), F(t)],
    ([d, a]) => {
      if (u(), !d)
        return;
      const f = Ee(a) ? { ...a } : a;
      s.push(
        ...o.flatMap((l) => r.map((h) => c(d, l, h, f)))
      );
    },
    { immediate: !0, flush: "post" }
  ), g = () => {
    v(), u();
  };
  return G(g), g;
}
function xe(e) {
  return typeof e == "function" ? e : typeof e == "string" ? (n) => n.key === e : Array.isArray(e) ? (n) => e.includes(n.key) : () => !0;
}
function re(...e) {
  let n, o, r = {};
  e.length === 3 ? (n = e[0], o = e[1], r = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (n = !0, o = e[0], r = e[1]) : (n = e[0], o = e[1]) : (n = !0, o = e[0]);
  const {
    target: t = M,
    eventName: s = "keydown",
    passive: u = !1,
    dedupe: c = !1
  } = r, v = xe(n);
  return Ie(t, s, (d) => {
    d.repeat && F(c) || v(d) && o(d);
  }, u);
}
function Ue(e, n, o = {}) {
  return re(e, n, { ...o, eventName: "keydown" });
}
function We(e, n, o = {}) {
  return re(e, n, { ...o, eventName: "keyup" });
}
function Oe() {
  const e = O(!1), n = q();
  return n && ie(() => {
    e.value = !0;
  }, n), e;
}
function Re(e) {
  const n = Oe();
  return A(() => (n.value, !!e()));
}
function Ne(e) {
  return JSON.parse(JSON.stringify(e));
}
function De(e, n, o = {}) {
  const { window: r = M, ...t } = o;
  let s;
  const u = Re(() => r && "ResizeObserver" in r), c = () => {
    s && (s.disconnect(), s = void 0);
  }, v = A(() => Array.isArray(e) ? e.map((a) => x(a)) : [x(e)]), g = P(
    v,
    (a) => {
      if (c(), u.value && r) {
        s = new ResizeObserver(n);
        for (const f of a)
          f && s.observe(f, t);
      }
    },
    { immediate: !0, flush: "post" }
  ), d = () => {
    c(), g();
  };
  return G(d), {
    isSupported: u,
    stop: d
  };
}
function Le(e, n = { width: 0, height: 0 }, o = {}) {
  const { window: r = M, box: t = "content-box" } = o, s = A(() => {
    var a, f;
    return (f = (a = x(e)) == null ? void 0 : a.namespaceURI) == null ? void 0 : f.includes("svg");
  }), u = O(n.width), c = O(n.height), { stop: v } = De(
    e,
    ([a]) => {
      const f = t === "border-box" ? a.borderBoxSize : t === "content-box" ? a.contentBoxSize : a.devicePixelContentBoxSize;
      if (r && s.value) {
        const l = x(e);
        if (l) {
          const h = l.getBoundingClientRect();
          u.value = h.width, c.value = h.height;
        }
      } else if (f) {
        const l = Array.isArray(f) ? f : [f];
        u.value = l.reduce((h, { inlineSize: C }) => h + C, 0), c.value = l.reduce((h, { blockSize: C }) => h + C, 0);
      } else
        u.value = a.contentRect.width, c.value = a.contentRect.height;
    },
    o
  );
  Ae(() => {
    const a = x(e);
    a && (u.value = "offsetWidth" in a ? a.offsetWidth : n.width, c.value = "offsetHeight" in a ? a.offsetHeight : n.height);
  });
  const g = P(
    () => x(e),
    (a) => {
      u.value = a ? n.width : 0, c.value = a ? n.height : 0;
    }
  );
  function d() {
    v(), g();
  }
  return {
    width: u,
    height: c,
    stop: d
  };
}
function Te(e, n, o, r = {}) {
  var t, s, u;
  const {
    clone: c = !1,
    passive: v = !1,
    eventName: g,
    deep: d = !1,
    defaultValue: a,
    shouldEmit: f
  } = r, l = q(), h = o || (l == null ? void 0 : l.emit) || ((t = l == null ? void 0 : l.$emit) == null ? void 0 : t.bind(l)) || ((u = (s = l == null ? void 0 : l.proxy) == null ? void 0 : s.$emit) == null ? void 0 : u.bind(l == null ? void 0 : l.proxy));
  let C = g;
  C = C || `update:${n.toString()}`;
  const _ = (b) => c ? typeof c == "function" ? c(b) : Ne(b) : b, D = () => Ce(e[n]) ? _(e[n]) : a, R = (b) => {
    f ? f(b) && h(C, b) : h(C, b);
  };
  if (v) {
    const b = D(), V = O(b);
    let E = !1;
    return P(
      () => e[n],
      (I) => {
        E || (E = !0, V.value = _(I), K(() => E = !1));
      }
    ), P(
      V,
      (I) => {
        !E && (I !== e[n] || d) && R(I);
      },
      { deep: d }
    ), V;
  } else
    return A({
      get() {
        return D();
      },
      set(b) {
        R(b);
      }
    });
}
const Je = /* @__PURE__ */ Y({
  name: "ENode",
  __name: "node",
  props: {
    componentSchema: {},
    modelValue: {},
    ruleField: {},
    resetFormData: {},
    name: {}
  },
  emits: ["update:modelValue", "change"],
  setup(e, { emit: n }) {
    const { proxy: o } = q(), r = e;
    let t = Z(j(r.componentSchema));
    P(() => r.componentSchema, (i) => {
      be(t, i, ["children"]) || we(t, j(i));
    }, {
      deep: !0
    });
    let s = N("formData", {});
    const u = N("slots", {}), c = N("pageManager", {}), v = N("disabled", { value: !1 }), g = N("ruleFieldPrefix", null), d = N("resetFormData", !1);
    (r.resetFormData || d) && (s = {});
    const a = n, f = $.getComponent("form-item"), l = O(), h = O(), C = fe();
    Object.keys(C).length && pe("nodeAttrs", C);
    const _ = me(null), D = Z({}), R = A(() => {
      var i, p;
      return (i = t.componentProps) != null && i.hidden ? !1 : typeof t.show == "boolean" ? t.show : ((p = t.show) == null ? void 0 : p.call(t, { values: s })) ?? !0;
    }), b = A(() => {
      var w, m;
      let i = R.value && ((w = t.rules) == null ? void 0 : w.map(
        (S) => {
          var Q, X;
          return typeof S.required < "u" && typeof ((Q = t.componentProps) == null ? void 0 : Q.required) < "u" && (S.required = (X = t.componentProps) == null ? void 0 : X.required), {
            ...S,
            validator: S.validator && c.funcs.value[S.validator]
            // 自定义校验函数
          };
        }
      ));
      if ((m = t.componentProps) != null && m.required && (!i || i.filter((S) => typeof S.required < "u").length === 0)) {
        const S = {
          required: !0,
          message: "必填项",
          type: "string",
          trigger: [
            "change",
            "blur"
          ],
          validator: void 0
        };
        i ? i.push(S) : i = [S];
      }
      let p = t.field;
      r.ruleField ? p = r.ruleField : g && t.field && (p = j(g), p.push(t.field));
      const y = {
        ...t,
        rules: i,
        rule: i,
        field: p
      };
      return y.children && delete y.children, y;
    }), V = A(() => {
      var y, w;
      const i = ((y = E.value) == null ? void 0 : y.bindModel) ?? "modelValue", p = {};
      return t.on && Object.keys(t.on).forEach((m) => {
        p[`on${ge(m)}`] = (...S) => c.doActions(t.on[m], ...S);
      }), {
        ...r,
        ...t.componentProps,
        disabled: (v == null ? void 0 : v.value) || ((w = t.componentProps) == null ? void 0 : w.disabled),
        bindModel: i,
        [`onUpdate:${i}`]: U,
        ...p
      };
    }), E = A(() => $.getComponentConfingByType(t.type) ?? null), I = () => s[t.field ?? ""] ?? r.modelValue;
    P(() => l.value, () => {
      z();
    }, { immediate: !0 });
    function z() {
      var p;
      const i = l.value || o;
      t.id && i && (t.input && (i.setValue = U, i.getValue = () => s[t.field] || r.modelValue), i.setAttr = (y, w) => t.componentProps[y] = w, i.getAttr = (y) => t.componentProps[y], c.addComponentInstance(t.id, i), (p = E.value) != null && p.defaultSchema.input && t.noFormItem !== !0 && h.value && c.addComponentInstance(t.id + "formItem", h.value));
    }
    function se() {
      var i;
      t.id && (c.removeComponentInstance(t.id), (i = E.value) != null && i.defaultSchema.input && t.noFormItem !== !0 && c.removeComponentInstance(t.id + "formItem"));
    }
    async function ae() {
      var p, y, w;
      if (typeof ((p = t.componentProps) == null ? void 0 : p.defaultValue) < "u") {
        const m = c.isDesignMode.value ? (y = t.componentProps) == null ? void 0 : y.defaultValue : s[t.field] ?? ((w = t.componentProps) == null ? void 0 : w.defaultValue);
        U(j(m));
      }
      if (t.type === "slot") {
        const m = t.slotName;
        if (!m) return;
        _.value = Y({
          setup() {
            return () => J(u, m, {
              componentSchema: t,
              model: s
            });
          }
        });
        return;
      }
      const i = $.getComponent(t.type);
      if (!i) {
        console.error(`组件${t.type}未注册`);
        return;
      }
      if (typeof i == "function") {
        const m = await i();
        _.value = m.default ?? m;
      } else
        _.value = i;
    }
    function U(i) {
      a("update:modelValue", i), a("change", i), t.field && (s[t.field] = i);
    }
    let H = null;
    return P(() => t, (i) => {
      const p = JSON.stringify({ ...i, children: void 0 });
      if (p === H)
        return !1;
      H = p, ae();
    }, {
      immediate: !0,
      deep: !0
    }), ve(se), (i, p) => {
      var w;
      const y = ye("ENode");
      return B(t).noFormItem !== !0 && ((w = E.value) != null && w.defaultSchema.input) && _.value && R.value ? (W(), L(B(f), T({
        key: 0,
        ref_key: "formItemRef",
        ref: h
      }, b.value), {
        default: k(() => [
          (W(), L(ee(_.value), T({
            ref_key: "componentInstance",
            ref: l,
            onVnodeMounted: z
          }, { ...V.value, ...D, [V.value.bindModel]: I() }), {
            node: k((m) => [
              te(y, ne(oe(m)), null, 16)
            ]),
            "edit-node": k(() => [
              J(i.$slots, "edit-node")
            ]),
            _: 3
          }, 16))
        ]),
        _: 3
      }, 16)) : _.value && R.value ? (W(), L(ee(_.value), T({
        key: 1,
        onVnodeMounted: z,
        ref_key: "componentInstance",
        ref: l,
        model: B(s)
      }, { ...V.value, ...D, [V.value.bindModel]: I() }), {
        node: k((m) => [
          te(y, ne(oe(m)), null, 16)
        ]),
        "edit-node": k(() => [
          J(i.$slots, "edit-node")
        ]),
        _: 3
      }, 16, ["model"])) : he("", !0);
    };
  }
}), ke = {
  component: async () => await import("./index-DUtZIqdB.js"),
  defaultSchema: {
    label: "代码编辑器",
    type: "monacoEditor",
    field: "monacoEditor",
    icon: "epic-icon-write",
    input: !0
  },
  config: {
    attribute: [
      {
        label: "字段名",
        type: "input",
        field: "field"
      },
      {
        label: "标题",
        type: "input",
        field: "label"
      },
      {
        label: "默认值",
        type: "monacoEditor",
        field: "componentProps.defaultValue"
      }
    ]
  },
  bindModel: "model-value"
}, Fe = {
  component: async () => await import("./index-DiDIFoTk.js"),
  defaultSchema: {
    label: "页面",
    type: "page",
    componentProps: {},
    children: []
  },
  config: {
    attribute: [
      {
        label: "页面名称",
        type: "input",
        componentProps: {
          placeholder: "请输入"
        },
        field: "componentProps.name"
      }
    ]
  }
};
function je(e) {
  e.component("EInputSize", async () => await import("./index-7FGPYW9G.js")), e.component("EColEditor", async () => await import("./index-dQlLsl9c.js")), e.component("EActionEditor", async () => await import("./index-CEaoGFXD.js")), e.component("ERuleEditor", async () => await import("./index-Cqabbae8.js")), e.component("EOptionsEditor", async () => await import("./index-BznBmM3H.js")), e.component("ENode", async () => await import("./index-CWIcDeZS.js")), e.registerActivitybar({
    id: "component_view",
    title: "组件",
    icon: "epic-icon-mokuai_1",
    component: async () => await import("./index-Be6c9tIz.js")
  }), e.registerActivitybar({
    id: "sound_code_view",
    title: "源码",
    icon: "epic-icon-daima1",
    component: async () => await import("./index-D0AEMI-f.js")
  }), e.registerActivitybar({
    id: "outline_view",
    title: "大纲",
    icon: "epic-icon-juxingkaobei",
    component: async () => await import("./outline-C2cRAHx5.js")
  }), e.registerRightSidebar({
    id: "attribute_view",
    title: "属性",
    component: async () => await import("./attributeView-CRyC2Kaa.js")
  }), e.registerRightSidebar({
    id: "style_view",
    title: "样式",
    component: async () => await import("./styleView-lyCzwsGF.js")
  }), e.registerRightSidebar({
    id: "event_view",
    title: "事件",
    component: async () => await import("./eventView-DSHjTQRt.js")
  }), [ke, Fe].forEach((o) => {
    e.registerComponent(o);
  });
}
je($);
export {
  Je as _,
  We as a,
  De as b,
  qe as c,
  Le as d,
  Te as e,
  Ue as o,
  Me as u,
  ze as w
};