@kp-ui/lowcode 2.14.0-beta.9 → 2.15.0-alpha.10

package/install.js

@@ -1,35 +1,22 @@
 /* empty css                       */
-import { i18n as d } from "./src/utils/i18n.js";
 import "./_virtual/virtual_svg-icons-register.js";
-import { addAdvancedFieldSchema as w, addBasicFieldSchema as F, addContainerWidgetSchema as P, addCustomWidgetSchema as S } from "./src/components/form-designer/widget-panel/widgetsConfig.js";
-import { basicFieldsEnums as R } from "./src/components/form-designer/widget-panel/basicFieldsEnums.js";
-import { default as M } from "./src/components/form-designer/index.vue.js";
-import { default as y } from "./src/components/form-render/index.vue.js";
-import s from "./src/components/form-designer/form-widget/container-widget/index.js";
-import p from "./src/components/form-render/container-item/index.js";
+import { VxeTooltip as i } from "vxe-pc-ui";
+import { basicFieldsEnums as x } from "./src/components/form-designer/widget-panel/basicFieldsEnums.js";
+import { default as P } from "./src/components/form-designer/index.vue.js";
+/* empty css                                        */
 import { openCustomerModal as f } from "./src/components/public/CustomerModal/useCustomerModal.js";
-import { default as B } from "./src/components/form-render/SubmitButtonRender.vue.js";
-import { default as U } from "./src/utils/emitter.js";
-import { useLowcode as D } from "./src/hooks/useLowcode.js";
-const b = (r) => {
-  const { app: o, http: e, factoryRender: t, useMountApp: i, getUserInfo: m } = r;
-  o.config.globalProperties.$http = e, o.config.globalProperties.$getUserInfo = m, o.config.globalProperties.$factoryRender = t, o.config.globalProperties.$i18n = d.$st, o.config.globalProperties.$openCustomerModal = (n) => f(n, i), o.use(s), o.use(p);
-  const a = window.$vform ?? {};
-  window.$vform = {
-    ...a,
-    $http: e
-  };
+import { default as $ } from "./src/components/form-render/SubmitButtonRender.vue.js";
+import { useLowcode as F } from "./src/hooks/useLowcode.js";
+import { default as h } from "./src/components/FormRender/index.vue.js";
+const g = (e) => {
+  const { app: o, http: r, factoryRender: t, getUserInfo: p } = e;
+  o.config.globalProperties.$http = r, o.config.globalProperties.$getUserInfo = p, o.config.globalProperties.$factoryRender = t, o.config.globalProperties.$openCustomerModal = (s) => f(s, o), o.use(i);
 };
 export {
-  B as SubmitButtonRender,
-  M as VFormDesigner,
-  y as VFormRender,
-  w as addAdvancedFieldSchema,
-  F as addBasicFieldSchema,
-  P as addContainerWidgetSchema,
-  S as addCustomWidgetSchema,
-  R as basicFieldsEnums,
-  U as emitter,
-  b as registerLowcodeCore,
-  D as useLowcode
+  $ as SubmitButtonRender,
+  P as VFormDesigner,
+  h as VFormRender,
+  x as basicFieldsEnums,
+  g as registerLowcodeCore,
+  F as useLowcode
 };

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@kp-ui/lowcode",
-  "version": "2.14.0-beta.9",
+  "version": "2.15.0-alpha.10",
   "publishConfig": {
     "access": "public"
   },
   "module": "install.js",
   "dependencies": {
-    "@kp-ui/i18n": "0.0.12",
-    "@kp-ui/tool": "1.0.33",
-    "@surely-vue/table": "5.0.3",
-    "ace-builds": "1.43.4",
     "animate.css": "^4.1.1",
     "ant-design-vue": "4.2.6",
     "axios": "^1.3.5",
@@ -27,8 +23,9 @@
     "sortablejs": "1.14.0",
     "tailwindcss": "3.4.9",
     "vite": "6.3.3",
-    "vue-router": "4.2.4",
-    "vue": "3.5.17"
+    "vite-plugin-lazy-import": "^1.0.7",
+    "vue": "3.5.17",
+    "vue-router": "4.2.4"
   },
   "main": "install.js",
   "types": "types/install.d.ts",

package/src/components/FormRender/Debugger.vue.js

@@ -0,0 +1,7 @@
+import o from "./Debugger.vue2.js";
+/* empty css              */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9289778f"]]);
+export {
+  m as default
+};

package/src/components/FormRender/Debugger.vue2.js

@@ -0,0 +1,50 @@
+import { defineComponent as v, useModel as m, inject as n, ref as _, createElementBlock as d, openBlock as r, normalizeClass as p, createElementVNode as e, toDisplayString as t, unref as l, Fragment as b, renderList as C } from "vue";
+const w = { class: "debug-content" }, h = { class: "debug-section" }, k = { class: "debug-section" }, D = { class: "widget-list" }, M = ["onClick"], y = { class: "widget-key" }, L = { class: "debug-section" }, B = { class: "widget-list" }, x = /* @__PURE__ */ v({
+  __name: "Debugger",
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    visibleModifiers: {}
+  },
+  emits: ["update:visible"],
+  setup(u) {
+    const i = m(u, "visible"), c = n("formData", {}), a = n("refList", _(/* @__PURE__ */ new Map())), g = n("formConfig");
+    return (F, s) => (r(), d("div", {
+      class: p(["debug-panel", { collapsed: !i.value }])
+    }, [
+      e("div", {
+        class: "debug-toggle",
+        onClick: s[0] || (s[0] = (o) => i.value = !i.value)
+      }, t(i.value ? "收起" : "调试"), 1),
+      e("div", w, [
+        e("div", h, [
+          s[1] || (s[1] = e("h3", null, "Form Data Model", -1)),
+          e("pre", null, t(JSON.stringify(l(c), null, 2)), 1)
+        ]),
+        e("div", k, [
+          e("h3", null, "Widget Ref List (" + t(l(a).size) + " widgets)", 1),
+          e("div", D, [
+            (r(!0), d(b, null, C(l(a), ([o, f]) => (r(), d("div", {
+              onClick: (N) => console.log(f),
+              key: o,
+              class: "widget-item"
+            }, [
+              e("div", y, t(o), 1)
+            ], 8, M))), 128))
+          ])
+        ]),
+        e("div", L, [
+          s[2] || (s[2] = e("h3", null, "FormConfig", -1)),
+          e("div", B, [
+            e("pre", null, t(JSON.stringify(l(g), null, 2)), 1)
+          ])
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  x as default
+};

package/src/components/FormRender/FormContainer.js

@@ -0,0 +1,61 @@
+import { defineComponent as w, ref as D, computed as o, onMounted as F, createVNode as m } from "vue";
+import { Form as h } from "ant-design-vue";
+import E from "../form-render/RenderWigetList.vue.js";
+import { useEmitter as O } from "../../utils/useEmitter.js";
+const P = /* @__PURE__ */ w({
+  props: {
+    context: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["form-submit", "form-cancel"],
+  setup(e, {
+    emit: i,
+    expose: c
+  }) {
+    var l;
+    const n = D(), {
+      emit$: d,
+      on$: u,
+      off$: f
+    } = O(), a = o(() => e.context.formDataModel.value), s = o(() => e.context.readModeFlag.value), v = o(() => e.context.formConfig.value), g = o(() => e.context.widgetList.value), x = o(() => e.context.labelPosition.value), y = o(() => e.context.customClass.value), b = (l = e == null ? void 0 : e.context) == null ? void 0 : l.formValidator, C = () => {
+      var t;
+      ((t = v.value) == null ? void 0 : t.isEnterSubmit) === 1 && r();
+    }, r = async () => {
+      try {
+        if (await b.validate()) {
+          const M = e.context.getFormData();
+          i("form-submit", M);
+        }
+      } catch (t) {
+        console.error("表单验证失败:", t);
+      }
+    };
+    return F(() => {
+    }), c({
+      renderForm: n,
+      off$: f,
+      on$: u,
+      emit$: d,
+      handleOnSubmit: r
+    }), () => m(h, {
+      ref: n,
+      layout: x.value,
+      class: ["render-form", "tpf-form", y.value, s.value ? "readonly-mode-form" : ""],
+      validateOnRuleChange: !1,
+      model: a.value,
+      onKeydown: (t) => t.key === "Enter" && C()
+    }, {
+      default: () => [m(E, {
+        "parent-widget": null,
+        "widget-list": g.value,
+        formDataModel: a.value,
+        "onUpdate:formDataModel": (t) => a.value = t
+      }, null)]
+    });
+  }
+});
+export {
+  P as default
+};

package/src/components/FormRender/formValidation.js

@@ -0,0 +1,74 @@
+import { ref as o } from "vue";
+const b = (r, d) => {
+  const i = o({});
+  return {
+    validate: () => new Promise((t) => {
+      if (!r.value) {
+        t(!0);
+        return;
+      }
+      r.value.validate().then(() => {
+        i.value = {}, t(!0);
+      }).catch((a) => {
+        i.value = a || {}, t(!1);
+      });
+    }),
+    validateField: (t) => new Promise((a) => {
+      if (!r.value) {
+        a(!0);
+        return;
+      }
+      r.value.validateField(t).then(() => {
+        i.value[t] && delete i.value[t], a(!0);
+      }).catch((e) => {
+        e && e[t] && (i.value[t] = e[t]), a(!1);
+      });
+    }),
+    resetValidation: () => {
+      r.value && r.value.resetFields(), i.value = {};
+    },
+    clearValidate: () => {
+      r.value && r.value.clearValidate(), i.value = {};
+    },
+    validationErrors: i,
+    getFieldValidationRules: (t) => {
+      if (!t || !t.options) return [];
+      const a = [], e = t.options;
+      if (e.required && a.push({
+        required: !0,
+        message: e.requiredMessage || `${e.label}不能为空`,
+        trigger: e.validateTrigger || ["blur", "change"]
+      }), e.regList && e.regList.length > 0 && e.regList.forEach((l) => {
+        l.pattern && a.push({
+          pattern: new RegExp(l.pattern),
+          message: l.message,
+          trigger: e.validateTrigger || ["blur", "change"]
+        });
+      }), e.customValidator)
+        try {
+          const l = (s, c, u) => {
+            try {
+              return new Function(
+                "rule",
+                "value",
+                "callback",
+                e.customValidator
+              )(s, c, u);
+            } catch (n) {
+              console.error("自定义验证函数执行错误:", n), u(new Error("验证失败"));
+            }
+          };
+          a.push({
+            validator: l,
+            trigger: e.validateTrigger || ["blur", "change"]
+          });
+        } catch (l) {
+          console.error("自定义验证函数解析错误:", l);
+        }
+      return a;
+    }
+  };
+};
+export {
+  b as useFormValidation
+};

package/src/components/FormRender/index.vue.js

@@ -0,0 +1,81 @@
+import { defineComponent as D, computed as L, ref as s, getCurrentInstance as V, onMounted as S, watch as h, createElementBlock as w, openBlock as f, Fragment as J, createElementVNode as E, createBlock as I, createCommentVNode as M, createVNode as u, unref as t, mergeProps as P } from "vue";
+import T from "../form-render/dynamic-dialog.vue.js";
+/* empty css                                 */
+import c from "./FormContainer.js";
+import { useFormContext as z } from "./useFormContext.js";
+import { useI18n as U } from "../../utils/i18n.js";
+import { storeToRefs as $ } from "pinia";
+import { useLocaleStore as j } from "@kp-ui/i18n";
+import { getLocat as q } from "@kp-ui/tool";
+import A from "./Debugger.vue.js";
+import { useComRef as G } from "tmgc2-share";
+const H = { class: "form-render-wrapper" }, ne = /* @__PURE__ */ D({
+  name: "VFormRender",
+  componentName: "VFormRender",
+  __name: "index",
+  props: {
+    vfCtx: { default: () => ({}) },
+    formJson: { default: () => ({ widgetList: [], formConfig: {} }) },
+    formData: { default: () => ({}) },
+    optionData: { default: () => ({}) },
+    disabledMode: { type: Boolean, default: !1 },
+    renderConfig: { default: () => ({ languageName: "zh-CN" }) },
+    globalDsv: { default: () => ({}) },
+    parentForm: { default: null },
+    dynamicCreation: { type: Boolean, default: !1 },
+    debug: { type: Boolean }
+  },
+  emits: ["form-submit", "form-cancel"],
+  setup(d, { expose: p, emit: g }) {
+    const { initLocale: b } = U(), v = j(), { locale: r } = $(v), C = L(() => q().debug === "1"), n = s(!1);
+    V();
+    const m = d, a = s(), o = G(c), _ = g, e = z({
+      props: m,
+      renderForm: a
+    }), F = (l) => {
+      _("form-submit", l);
+    }, x = () => (console.log(o.value), o.value);
+    S(() => {
+      e.registerToRefList("v_form_ref");
+    }), h(
+      r,
+      () => {
+        b(r.value);
+      },
+      {
+        immediate: !0
+      }
+    );
+    const y = () => {
+    }, { dynamicDialgRef: N, dialogProps: R, emitter: k } = e;
+    return p({
+      ...k,
+      ...e,
+      getNativeForm: x,
+      setLoading: y,
+      formJson: m.formJson,
+      renderForm: a
+    }), (l, i) => (f(), w(J, null, [
+      E("div", H, [
+        u(t(c), {
+          ref_key: "formContainer",
+          ref: o,
+          context: t(e),
+          onFormSubmit: F
+        }, null, 8, ["context"]),
+        u(T, P(t(R), {
+          ref_key: "dynamicDialgRef",
+          ref: N
+        }), null, 16)
+      ]),
+      C.value ? (f(), I(A, {
+        key: 0,
+        visible: n.value,
+        "onUpdate:visible": i[0] || (i[0] = (B) => n.value = B)
+      }, null, 8, ["visible"])) : M("", !0)
+    ], 64));
+  }
+});
+export {
+  ne as default
+};

package/src/components/FormRender/index.vue2.js

@@ -0,0 +1,4 @@
+import f from "./index.vue.js";
+export {
+  f as default
+};

package/src/components/FormRender/useFormContext.js

@@ -0,0 +1,169 @@
+import { ref as a, provide as f, computed as u, watchEffect as ie, onMounted as le, nextTick as fe } from "vue";
+import { useFormValidation as E } from "./formValidation.js";
+import { useFormDataProcessor as ce } from "./useFormDataProcessor.js";
+import { insertCustomCssToHead as ue, insertGlobalFunctionsToHtml as me, getContainerWidgetByName as V, cloneFormConfigWithoutEventHandler as de, generateId as ve } from "../../utils/util.js";
+import { set as ge, cloneDeep as Fe } from "lodash-es";
+import { message as W } from "ant-design-vue";
+import { useI18n as pe } from "../../utils/i18n.js";
+import { getUuidKey as Ce } from "@kp-ui/tool";
+import { useComRef as he, useRef as De, useExecFunction as Re } from "tmgc2-share";
+import we from "../form-render/dynamic-dialog.vue.js";
+/* empty css                                 */
+import { useEmitter as be } from "../../utils/useEmitter.js";
+import { useAppRef as xe } from "../form-designer/useAppRef.js";
+const $e = ({ renderForm: p, props: i }) => {
+  const { formJson: C, formData: H } = i, v = he(we), { i18nt: h } = pe(), [D, I] = De(!1), g = be(), c = a(), n = a({}), R = a(!1), F = a(/* @__PURE__ */ new Map()), w = a({}), J = a();
+  f("refList", F), f("getFormConfig", () => t.value), f("formData", n), f("getReadMode", () => D.value), f("designState", !1);
+  const b = a(), { executeFunction: T, context: x, execHttpFunction: j } = Re(), { getFormRef: M, getWidgetRef: $, registerToRefList: B } = xe(F, !0), t = u(() => {
+    var e;
+    return ((e = c.value) == null ? void 0 : e.formConfig) || {};
+  });
+  f("formConfig", t);
+  const m = u(() => {
+    var e;
+    return ((e = c.value) == null ? void 0 : e.widgetList) || [];
+  }), _ = u(() => {
+    var e;
+    return ((e = t.value) == null ? void 0 : e.labelPosition) || "horizontal";
+  }), z = (e) => {
+    J.value = e;
+  }, A = u(() => {
+    var e;
+    return (e = t.value) != null && e.labelWidth ? `${t.value.labelWidth}px` : "80px";
+  }), G = u(() => {
+    var e;
+    return ((e = t.value) == null ? void 0 : e.customClass) || "";
+  }), L = ce();
+  let d = E(p, m.value || []);
+  ie(() => {
+    d = E(p, m.value || []);
+  });
+  const y = async (e) => {
+    var o;
+    c.value = e || { widgetList: [], formConfig: {} }, n.value = {}, K(((o = c.value) == null ? void 0 : o.widgetList) || []), await fe(), ne();
+  }, K = (e) => {
+    if ((e == null ? void 0 : e.length) > 0) {
+      const o = L.buildFormModel(e, H);
+      Object.assign(n.value, o);
+    }
+  }, S = () => n.value || {}, U = (e) => {
+    e && Object.keys(e).forEach((o) => {
+      n.value.hasOwnProperty(o) && (n.value[o] = e[o]);
+    });
+  }, k = (e) => {
+    R.value = e;
+  }, q = () => {
+    d.resetValidation();
+  }, Q = () => {
+    d.clearValidate();
+  }, X = (e) => {
+    b.value = e;
+  }, Y = () => {
+    if (!i.parentForm)
+      return M();
+    let e = i.parentForm;
+    for (; e.parentForm; )
+      e = e.parentForm;
+    return e;
+  }, Z = (e, o = {}, s = {}) => {
+    var O, P;
+    const r = Y(), l = V((r == null ? void 0 : r.widgetList) || [], e) || V(m.value || [], e);
+    if (l === null) {
+      W.error(h("render.hint.refNotFound") + e);
+      return;
+    }
+    if (!e || l.type !== "vf-dialog") {
+      W.error(h("render.hint.refNotFound") + e);
+      return;
+    }
+    const se = {
+      widgetList: Fe((l == null ? void 0 : l.widgetList) || []),
+      formConfig: de(((O = r == null ? void 0 : r.formConfig) == null ? void 0 : O.value) || {})
+    }, ae = Ce();
+    w.value = {
+      options: l.options,
+      formJson: se,
+      formData: { ...o },
+      optionData: r.optionData,
+      globalDsv: r.globalDsv,
+      parentFormRef: x.value,
+      extraData: s,
+      wrapperId: ae,
+      vfCtx: { ...o }
+    }, (P = v.value) == null || P.show();
+  }, N = () => i.parentForm, ee = () => {
+    var e;
+    return (e = v.value) == null ? void 0 : e.getFormRef();
+  }, oe = () => {
+    g.off$("fieldChange"), g.on$("fieldChange", ({ fieldName: e, value: o }) => {
+      ge(n.value, e, o);
+    });
+  }, te = async () => {
+    var o;
+    const e = t.value.serveList;
+    if ((o = e.vformDetail.http) != null && o.url) {
+      const s = await j(
+        {
+          ...e.vformDetail
+        },
+        {
+          ...i.vfCtx
+        }
+      );
+      return console.log("res: ", s), s;
+    }
+  }, ne = () => {
+    var e, o;
+    (e = t.value) != null && e.onFormMounted && T({
+      functionBody: (o = t.value) == null ? void 0 : o.onFormMounted
+    });
+  }, re = () => {
+    const e = "vfRender" + ve(), { cssCode: o, functions: s } = t.value;
+    o && ue(o, e || ""), s && me(s, e || "");
+  };
+  return le(() => {
+    C && y(C), oe(), re();
+  }), {
+    vfCtx: i.vfCtx,
+    getParentFormRef: N,
+    getFormRef: M,
+    getWidgetRef: $,
+    registerToRefList: B,
+    dialogOrDrawerRef: b,
+    setDialogOrDrawerRef: X,
+    showDialog: Z,
+    setFormData: U,
+    setReadMode: I,
+    setFormJson: y,
+    setLoading: k,
+    onFormDetail: te,
+    emitter: g,
+    context: x,
+    getFormData: S,
+    getChildFormRef: ee,
+    // 状态
+    formJsonObj: c,
+    formDataModel: n,
+    isLoading: R,
+    readModeFlag: D,
+    // 引用
+    widgetRefList: F,
+    // 处理器
+    formDataProcessor: L,
+    formValidator: d,
+    // 计算属性
+    formConfig: t,
+    widgetList: m,
+    labelPosition: _,
+    labelWidth: A,
+    customClass: G,
+    dynamicDialgRef: v,
+    dialogProps: w,
+    setChildFormRef: z,
+    resetValidation: q,
+    clearValidate: Q
+  };
+};
+export {
+  $e as useFormContext
+};

package/src/components/FormRender/useFormDataProcessor.js

@@ -0,0 +1,73 @@
+const i = (n) => {
+  const l = (e, c) => {
+    var o;
+    const s = {};
+    if (!e) return s;
+    if (e.category === "container")
+      e.type === "grid" && e.cols ? e.cols.forEach((a) => {
+        Object.assign(s, l(a, c));
+      }) : e.type === "grid-sub-form" && e.widgetList || (e.type === "tab" && e.tabs ? e.tabs.forEach((a) => {
+        a.widgetList && a.widgetList.forEach((r) => {
+          Object.assign(s, l(r, c));
+        });
+      }) : e.widgetList && e.widgetList.forEach((a) => {
+        Object.assign(s, l(a, c));
+      }));
+    else if ((o = e.options) != null && o.name) {
+      const a = e.options.name, r = c == null ? void 0 : c[a];
+      if (r !== void 0)
+        s[a] = r;
+      else if (e.options.defaultValue !== void 0)
+        s[a] = e.options.defaultValue;
+      else
+        switch (e.type) {
+          case "input":
+          case "textarea":
+          case "password":
+          case "text":
+            s[a] = "";
+            break;
+          case "number":
+            s[a] = null;
+            break;
+          case "radio":
+            s[a] = "";
+            break;
+          case "checkbox":
+            s[a] = [];
+            break;
+          case "select":
+            s[a] = e.options.multiple ? [] : "";
+            break;
+          case "date":
+          case "time":
+            s[a] = null;
+            break;
+          case "rate":
+            s[a] = 0;
+            break;
+          case "slider":
+            s[a] = e.options.min || 0;
+            break;
+          case "switch":
+            s[a] = !1;
+            break;
+          default:
+            s[a] = null;
+        }
+    }
+    return s;
+  };
+  return {
+    buildFormModel: (e, c) => {
+      let s = {};
+      return !e || e.length === 0 ? c || {} : (e.forEach((o) => {
+        Object.assign(s, l(o, c));
+      }), c && (s = { ...s, ...c }), s);
+    },
+    buildDataFromWidget: l
+  };
+};
+export {
+  i as useFormDataProcessor
+};

package/src/components/FormRender/useFormRender.js

@@ -1,18 +1,15 @@
-import { ContainerWidgetMap as t } from "../form-render/container-item/index.js";
-import o from "../form-designer/form-widget/field-widget/index.js";
-function m() {
-  function i(e) {
-    var n;
-    if (!e) return "";
-    const r = `./${e.type}-item.vue`;
-    return t[r] || console.warn(`未找到容器组件类型: ${e.type}，请确保已注册该组件。`), (n = t[r]) == null ? void 0 : n.default;
-  }
-  return {
-    getFieldWidget: (e) => e && o[e.type + "-widget"] || "",
-    getContainerWidget: i,
-    ContainerWidgetMap: t
-  };
+import r from "../form-designer/form-widget/field-widget/index.js";
+import { RenderWidgetList as n } from "../form-render/container-items/index.js";
+function o(t) {
+  if (!t)
+    return;
+  const e = t.type + "-widget";
+  return n[e];
 }
+const i = (t) => t && r[t.type + "-widget"] || "", m = (t) => {
+  let e;
+  return t.category === "container" ? e = o(t) : e = i(t), e;
+};
 export {
-  m as useFormRender
+  m as getWidget
 };