epic-designer-gold/dist/form-VbfBmb63.js

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

import { defineComponent as w, inject as i, ref as d, reactive as k, provide as j, onMounted as F, computed as f, openBlock as h, createElementBlock as v, createVNode as M, unref as W, mergeProps as $, withCtx as B, renderSlot as _, Fragment as E, renderList as L, createCommentVNode as N } from "vue";
import { ElForm as O } from "element-plus";
import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const q = {
  key: 0,
  class: "form-main",
  style: { height: "100%" }
}, I = /* @__PURE__ */ w({
  __name: "form",
  props: {
    componentSchema: {
      type: Object,
      require: !0,
      default: () => ({})
    }
  },
  setup(g, { expose: y }) {
    var s, p;
    const n = g, b = i("pageManager", {}), t = d(null), l = i("forms", {}), S = d(!0), r = k({});
    b.addFormData(r, (p = (s = n.componentSchema) == null ? void 0 : s.componentProps) == null ? void 0 : p.name), j("formData", r);
    function c() {
      return r;
    }
    function m(e) {
      Object.assign(r, e);
    }
    function C() {
      var e;
      return (e = t.value) == null ? void 0 : e.validate();
    }
    F(async () => {
      var e, a, o, u;
      if (((e = n.componentSchema) == null ? void 0 : e.type) === "form" && l.value && t.value) {
        const P = ((o = (a = n.componentSchema) == null ? void 0 : a.componentProps) == null ? void 0 : o.name) ?? ((u = n.componentSchema) == null ? void 0 : u.name) ?? "default";
        return l.value[P] = t.value, t.value.getData = c, t.value.setData = m, !1;
      }
    });
    const D = f(() => {
      const e = n.componentSchema.componentProps;
      let a = e.labelCol, o = e.wrapperCol;
      return e.labelLayout === "fixed" && (a = {
        style: `width:${typeof e.labelWidth == "number" ? e.labelWidth + "px" : e.labelWidth}`
      }, o = { style: "width:auto;flex:1" }), {
        ...e,
        labelCol: a,
        wrapperCol: o
      };
    }), x = f(() => n.componentSchema.children ?? []);
    return y({
      form: t,
      getData: c,
      setData: m,
      validate: C
    }), (e, a) => S.value ? (h(), v("div", q, [
      M(W(O), $({
        ref_key: "form",
        ref: t,
        model: r
      }, D.value, { style: { height: "100%" } }), {
        default: B(() => [
          _(e.$slots, "edit-node", {}, () => [
            (h(!0), v(E, null, L(x.value, (o) => _(e.$slots, "node", { componentSchema: o }, void 0, !0)), 256))
          ], !0)
        ]),
        _: 3
      }, 16, ["model"])
    ])) : N("", !0);
  }
}), H = /* @__PURE__ */ V(I, [["__scopeId", "data-v-f82ea56a"]]);
export {
  H as default
};