@kp-ui/lowcode 1.0.30 → 1.0.31

package/_virtual/virtual_svg-icons-register.js

@@ -1,13 +1,13 @@
 if (typeof window !== "undefined") {
   let loadSvg = function() {
     var body = document.body;
-    var svgDom = document.getElementById("__svg__icons__dom__1745718985715__");
+    var svgDom = document.getElementById("__svg__icons__dom__1745894965292__");
     if (!svgDom) {
       svgDom = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       svgDom.style.position = "absolute";
       svgDom.style.width = "0";
       svgDom.style.height = "0";
-      svgDom.id = "__svg__icons__dom__1745718985715__";
+      svgDom.id = "__svg__icons__dom__1745894965292__";
       svgDom.setAttribute("xmlns", "http://www.w3.org/2000/svg");
       svgDom.setAttribute("xmlns:link", "http://www.w3.org/1999/xlink");
     }

package/index.js

@@ -1,6 +1,5 @@
 import { default as default2 } from "./designer.js";
 import { default as default3 } from "./render.js";
-import draggableComponent from "./src/lib/vuedraggable/src/vuedraggable.js";
 import { registerIcon } from "./src/utils/el-icons.js";
 import "./_virtual/virtual_svg-icons-register.js";
 import { addAdvancedFieldSchema, addBasicFieldSchema, addContainerWidgetSchema, addCustomWidgetSchema } from "./src/components/form-designer/widget-panel/widgetsConfig.js";
@@ -24,7 +23,6 @@ import { default as default14 } from "./src/components/form-designer/form-widget
 import { default as default15 } from "./src/utils/emitter.js";
 const registerLowcodeCore = (app, http) => {
   app.config.globalProperties.$http = http;
-  app.component("draggable", draggableComponent);
   app.use(ContainerWidgets);
   app.use(ContainerItems);
   registerIcon(app);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kp-ui/lowcode",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "publishConfig": {
     "access": "public"
   },

package/render.js

@@ -1,21 +1,14 @@
-import { createVNode, render, resolveComponent, createBlock, openBlock, withCtx, withModifiers, normalizeClass, createElementBlock, Fragment, renderList, resolveDynamicComponent, createSlots, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { createVNode, render, h, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, withModifiers, normalizeClass, createElementBlock, Fragment, renderList, resolveDynamicComponent, createSlots, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import emitter from "./src/utils/emitter.js";
-import _export_sfc from "./_virtual/_plugin-vue_export-helper.js";
-/* empty css                                                              */
-import "./src/components/form-render/container-item/grid-col-item.vue.js";
-import i18n, { changeLocale } from "./src/utils/i18n.js";
-import { buildDefaultFormJson, getContainerWidgetByName, cloneFormConfigWithoutEventHandler, deepClone, getDSByName, overwriteObj, runDataSourceRequest, getAllContainerWidgets, getAllFieldWidgets, getDefaultFormConfig, traverseFieldWidgets, getFieldWidgetByName, traverseFieldWidgetsOfContainer, insertCustomCssToHead, insertGlobalFunctionsToHtml, generateId } from "./src/utils/util.js";
-import "./src/components/form-render/container-item/grid-sub-form-item.vue.js";
-import "./src/components/form-render/container-item/sub-form-item.vue.js";
-import "./src/components/form-render/container-item/tab-item.vue.js";
-import "./src/components/form-render/container-item/table-cell-item.vue.js";
-/* empty css                                                         */
-import "./src/components/form-render/container-item/vf-collapse-item.vue.js";
 import comps from "./src/components/form-designer/form-widget/field-widget/index.js";
-import DynamicDialog from "./src/components/form-render/dynamic-dialog.vue.js";
+import { buildDefaultFormJson, getContainerWidgetByName, cloneFormConfigWithoutEventHandler, deepClone, getDSByName, overwriteObj, runDataSourceRequest, getAllContainerWidgets, getAllFieldWidgets, getDefaultFormConfig, traverseFieldWidgets, getFieldWidgetByName, traverseFieldWidgetsOfContainer, insertCustomCssToHead, insertGlobalFunctionsToHtml, generateId } from "./src/utils/util.js";
+import i18n, { changeLocale } from "./src/utils/i18n.js";
+import _sfc_main$1 from "./src/components/form-render/dynamic-dialog.vue.js";
+/* empty css                                               */
 import DynamicDrawer from "./src/components/form-render/dynamic-drawer.vue.js";
 import { fmtHttpParams } from "./src/utils/request/fmtHttpParams.js";
 /* empty css                                     */
+import _export_sfc from "./_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "VFormRender",
   componentName: "VFormRender",
@@ -104,6 +97,8 @@ const _sfc_main = {
       formDataModel: {
         //
       },
+      isLoading: false,
+      //是否正在加载中
       widgetRefList: {},
       subFormRefList: {},
       formId: null,
@@ -153,6 +148,7 @@ const _sfc_main = {
     //
   },
   created() {
+    this.isLoading = false;
     this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList);
     this.initFormObject();
   },
@@ -161,11 +157,16 @@ const _sfc_main = {
     this.initDataSetRequest();
   },
   methods: {
+    setLoading(flag) {
+      this.isLoading = flag;
+    },
     async onFormDetail() {
       var _a;
       const serveList = this.formConfig.serveList;
       if ((_a = serveList.vformDetail.http) == null ? void 0 : _a.url) {
-        const res = await fmtHttpParams.call(this, serveList.vformDetail, { vfCtx: this.vfCtx });
+        const res = await fmtHttpParams.call(this, serveList.vformDetail, {
+          vfCtx: this.vfCtx
+        });
         console.log("res: ", res);
         return res;
       }
@@ -844,7 +845,7 @@ const _sfc_main = {
         formConfig: cloneFormConfigWithoutEventHandler(topFormRef.formConfig)
       };
       const wrapperDivId = generateId() + "";
-      const dialogInstance = createVNode(DynamicDialog, {
+      const dialogInstance2 = h(_sfc_main$1, {
         options: dialogCon.options,
         formJson: dFormJson,
         formData: { ...formData },
@@ -855,13 +856,13 @@ const _sfc_main = {
         wrapperId: wrapperDivId,
         vfCtx: { ...formData }
       });
-      dialogInstance.appContext = this.$root.$.appContext;
+      dialogInstance2.appContext = this.$root.$.appContext;
       const wrapperDiv = document.createElement("div");
       wrapperDiv.id = "vf-dynamic-dialog-wrapper" + wrapperDivId;
       document.body.appendChild(wrapperDiv);
-      render(dialogInstance, wrapperDiv);
-      document.body.appendChild(dialogInstance.el);
-      dialogInstance.component.ctx.show();
+      render(dialogInstance2, wrapperDiv);
+      document.body.appendChild(dialogInstance2.el);
+      dialogInstance2.component.exposed.show();
     },
     showDrawer(drawerName, formData = {}, extraData = {}) {
       const topFormRef = this.getTopFormRef();
@@ -891,7 +892,7 @@ const _sfc_main = {
       document.body.appendChild(wrapperDiv);
       render(drawerInstance, wrapperDiv);
       document.body.appendChild(drawerInstance.el);
-      drawerInstance.component.ctx.show();
+      dialogInstance.component.exposed.show();
     },
     /**
      * 判断表单是否处于设计器预览状态
@@ -903,70 +904,79 @@ const _sfc_main = {
     //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
   }
 };
+const _hoisted_1 = { style: { "min-height": "200px" } };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_form = resolveComponent("a-form");
+  const _component_a_spin = resolveComponent("a-spin");
   const _component_a_config_provider = resolveComponent("a-config-provider");
   return openBlock(), createBlock(_component_a_config_provider, {
     "component-size": $options.size,
     input: { autocomplete: "off" }
   }, {
     default: withCtx(() => [
-      createVNode(_component_a_form, {
-        layout: $options.labelPosition,
-        class: normalizeClass([[$options.customClass, $data.readModeFlag ? "readonly-mode-form" : ""], "render-form tpf-form"]),
-        "label-width": $options.labelWidth,
-        "validate-on-rule-change": false,
-        model: $data.formDataModel,
-        ref: "renderForm",
-        onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
-        }, ["prevent"]))
-      }, {
+      createVNode(_component_a_spin, { spinning: $data.isLoading }, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetList, (widget, index) => {
-            return openBlock(), createElementBlock(Fragment, null, [
-              "container" === widget.category ? (openBlock(), createBlock(resolveDynamicComponent($options.getContainerWidgetName(widget)), {
-                widget,
-                key: widget.id,
-                "parent-list": $options.widgetList,
-                "index-of-parent-list": index,
-                "parent-widget": null
-              }, createSlots({ _: 2 }, [
-                renderList(Object.keys(_ctx.$slots), (slot) => {
-                  return {
-                    name: slot,
-                    fn: withCtx((scope) => [
-                      renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope)), void 0, true)
-                    ])
-                  };
-                })
-              ]), 1032, ["widget", "parent-list", "index-of-parent-list"])) : (openBlock(), createBlock(resolveDynamicComponent($options.getWidgetName(widget)), {
-                field: widget,
-                "form-model": $data.formDataModel,
-                designer: null,
-                key: widget.id,
-                "parent-list": $options.widgetList,
-                "index-of-parent-list": index,
-                "parent-widget": null
-              }, createSlots({ _: 2 }, [
-                renderList(Object.keys(_ctx.$slots), (slot) => {
-                  return {
-                    name: slot,
-                    fn: withCtx((scope) => [
-                      renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope)), void 0, true)
-                    ])
-                  };
-                })
-              ]), 1032, ["field", "form-model", "parent-list", "index-of-parent-list"]))
-            ], 64);
-          }), 256))
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_a_form, {
+              layout: $options.labelPosition,
+              class: normalizeClass([[$options.customClass, $data.readModeFlag ? "readonly-mode-form" : ""], "render-form tpf-form"]),
+              "label-width": $options.labelWidth,
+              "validate-on-rule-change": false,
+              model: $data.formDataModel,
+              ref: "renderForm",
+              onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["prevent"]))
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetList, (widget, index) => {
+                  return openBlock(), createElementBlock(Fragment, null, [
+                    "container" === widget.category ? (openBlock(), createBlock(resolveDynamicComponent($options.getContainerWidgetName(widget)), {
+                      widget,
+                      key: widget.id,
+                      "parent-list": $options.widgetList,
+                      "index-of-parent-list": index,
+                      "parent-widget": null
+                    }, createSlots({ _: 2 }, [
+                      renderList(Object.keys(_ctx.$slots), (slot) => {
+                        return {
+                          name: slot,
+                          fn: withCtx((scope) => [
+                            renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope)), void 0, true)
+                          ])
+                        };
+                      })
+                    ]), 1032, ["widget", "parent-list", "index-of-parent-list"])) : (openBlock(), createBlock(resolveDynamicComponent($options.getWidgetName(widget)), {
+                      field: widget,
+                      "form-model": $data.formDataModel,
+                      designer: null,
+                      key: widget.id,
+                      "parent-list": $options.widgetList,
+                      "index-of-parent-list": index,
+                      "parent-widget": null
+                    }, createSlots({ _: 2 }, [
+                      renderList(Object.keys(_ctx.$slots), (slot) => {
+                        return {
+                          name: slot,
+                          fn: withCtx((scope) => [
+                            renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope)), void 0, true)
+                          ])
+                        };
+                      })
+                    ]), 1032, ["field", "form-model", "parent-list", "index-of-parent-list"]))
+                  ], 64);
+                }), 256))
+              ]),
+              _: 3
+            }, 8, ["layout", "class", "label-width", "model"])
+          ])
         ]),
         _: 3
-      }, 8, ["layout", "class", "label-width", "model"])
+      }, 8, ["spinning"])
     ]),
     _: 3
   }, 8, ["component-size"]);
 }
-const VFormRender = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ab2b030a"]]);
+const VFormRender = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f3d61a23"]]);
 export {
   VFormRender as default
 };

package/src/components/CustomRender/components/index.js

@@ -0,0 +1,10 @@
+import { defineAsyncComponent } from "vue";
+function getCompontents(module) {
+  const modules = {
+    AttachmentRender: defineAsyncComponent(() => import("./AttachmentRender.vue.js"))
+  };
+  return modules[module];
+}
+export {
+  getCompontents
+};

package/src/components/CustomRender/useCustomRender.js

@@ -0,0 +1,68 @@
+import { h, getCurrentInstance } from "vue";
+import { getCompontents } from "./components/index.js";
+function useCustomRender() {
+  const componentCache = /* @__PURE__ */ new Map();
+  const loadComponent = (componentName = "") => {
+    if (componentName.trim().length === 0) {
+      return void 0;
+    }
+    let component = componentCache.get(componentName);
+    if (!component) {
+      component = getCompontents(componentName);
+      return component;
+    }
+    if (!component) {
+      const instance = getCurrentInstance();
+      if (instance && instance.appContext) {
+        const getComponentByName = instance.appContext.config.globalProperties.getComponentByName;
+        component = getComponentByName(componentName);
+        if (component) {
+          componentCache.set(componentName, component);
+        }
+      }
+      return component;
+    }
+    if (!component) {
+      const instance = getCurrentInstance();
+      if (instance && instance.appContext) {
+        const globalSysComponents = instance.appContext.components || {};
+        const components = globalSysComponents;
+        component = components[componentName];
+        if (component) {
+          componentCache.set(componentName, component);
+        }
+      }
+      return component;
+    }
+  };
+  const renderComponent = (componentName, props = {}) => {
+    try {
+      const component = loadComponent(componentName);
+      if (!component) {
+        return h("span", { class: "component-not-found" }, `组件 "${componentName}" 未找到`);
+      }
+      const vnode = h(component, props);
+      return vnode;
+    } catch (error) {
+      console.error(`Failed to render component ${componentName}:`, error);
+      return h("span", { class: "component-render-error" }, `渲染组件出错: ${componentName}`);
+    }
+  };
+  const customRender = (code, params, ctx) => {
+    try {
+      const { text, record, index, column } = params;
+      const cusFunc = new Function("text", "record", "index", "column", "compontent", code);
+      return cusFunc.call(ctx, text, record, index, column, renderComponent);
+    } catch (error) {
+      console.error("Custom render execution failed:", error);
+      return h("span", { class: "custom-render-error", style: { color: "red" } }, "自定义渲染失败");
+    }
+  };
+  return {
+    renderComponent,
+    customRender
+  };
+}
+export {
+  useCustomRender
+};

package/src/components/code-editor/index.vue.js

@@ -1,171 +1,7 @@
-import ace from "ace-builds";
-import "ace-builds/src-min-noconflict/theme-sqlserver";
-import "ace-builds/src-min-noconflict/mode-javascript";
-import "ace-builds/src-min-noconflict/mode-json";
-import "ace-builds/src-min-noconflict/mode-css";
-import "ace-builds/src-min-noconflict/ext-language_tools";
-import { ACE_BASE_PATH } from "../../utils/config.js";
-import { createElementBlock, openBlock, createElementVNode } from "vue";
+import _sfc_main from "./index.vue2.js";
+/* empty css           */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
-const _sfc_main = {
-  name: "CodeEditor",
-  props: {
-    modelValue: {
-      type: String
-      //required: true
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      default: "javascript"
-    },
-    userWorker: {
-      //是否开启语法检查，默认开启
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["update:modelValue", "change", "blur"],
-  mounted() {
-    this.init();
-  },
-  data() {
-    return {
-      aceEditor: null,
-      themePath: "ace/theme/sqlserver",
-      // 不导入 webpack-resolver，该模块路径会报错
-      modePath: "ace/mode/javascript",
-      // 同上
-      codeValue: this.modelValue
-    };
-  },
-  watch: {
-    //
-    mode(val) {
-      if (val) {
-        this.init();
-      }
-    },
-    readonly(val) {
-      this.init();
-    }
-  },
-  methods: {
-    init(value) {
-      if (this.aceEditor) {
-        this.aceEditor.destroy();
-      }
-      value = value || this.codeValue;
-      this.$emit("update:modelValue", value);
-      ace.config.set("basePath", ACE_BASE_PATH);
-      this.addAutoCompletion(ace);
-      this.aceEditor = ace.edit(this.$refs.ace, {
-        maxLines: 20,
-        // 最大行数，超过会自动出现滚动条
-        minLines: 5,
-        // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-        fontSize: 12,
-        // 编辑器内字体大小
-        theme: this.themePath,
-        // 默认设置的主题
-        mode: this.modePath,
-        // 默认设置的语言模式
-        tabSize: 2,
-        // 制表符设置为2个空格大小
-        readOnly: this.readonly,
-        highlightActiveLine: true,
-        value
-      });
-      this.aceEditor.setOptions({
-        enableBasicAutocompletion: true,
-        enableSnippets: true,
-        // 设置代码片段提示
-        enableLiveAutocompletion: true
-        // 设置自动提示
-      });
-      if (this.mode === "json") {
-        this.setJsonMode();
-      } else if (this.mode === "css") {
-        this.setCssMode();
-      } else if (this.mode === "groovy") {
-        this.setGroovyMode();
-      }
-      if (!this.userWorker) {
-        this.aceEditor.getSession().setUseWorker(false);
-      }
-      this.aceEditor.getSession().on("change", (ev) => {
-        this.$emit("update:modelValue", this.aceEditor.getValue());
-        this.$emit("change", this.aceEditor.getValue());
-      });
-      this.aceEditor.getSession().on("blur", (ev) => {
-        this.$emit("blur", this.aceEditor.getValue());
-      });
-    },
-    addAutoCompletion(ace2) {
-      const acData = [
-        { meta: "VForm API", caption: "getWidgetRef", value: "getWidgetRef()", score: 1 },
-        { meta: "VForm API", caption: "getFormRef", value: "getFormRef()", score: 1 },
-        { meta: "VForm API", caption: "getParentFormRef", value: "getParentFormRef()", score: 1 }
-        //TODO: 待补充！！
-      ];
-      const langTools = ace2.require("ace/ext/language_tools");
-      langTools.addCompleter({
-        getCompletions: function(editor, session, pos, prefix, callback) {
-          if (prefix.length === 0) {
-            return callback(null, []);
-          } else {
-            return callback(null, acData);
-          }
-        }
-      });
-    },
-    setJsonMode() {
-      this.aceEditor.getSession().setMode("ace/mode/json");
-    },
-    setCssMode() {
-      this.aceEditor.getSession().setMode("ace/mode/css");
-    },
-    setGroovyMode() {
-      this.aceEditor.getSession().setMode("ace/mode/groovy");
-    },
-    getEditorAnnotations() {
-      return this.aceEditor.getSession().getAnnotations();
-    },
-    setValue(newValue) {
-      this.init(newValue);
-    },
-    validateCode() {
-      const codeHints = this.getEditorAnnotations();
-      let syntaxErrorFlag = false;
-      if (!!codeHints && codeHints.length > 0) {
-        codeHints.forEach((chItem) => {
-          if (chItem.type === "error") {
-            syntaxErrorFlag = true;
-          }
-        });
-        if (syntaxErrorFlag) {
-          this.$message.error("语法存在错误,请检查");
-          return false;
-        }
-      }
-      return true;
-    }
-  }
-};
-const _hoisted_1 = { class: "ace-container" };
-const _hoisted_2 = {
-  class: "ace-editor",
-  ref: "ace"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, null, 512)
-  ]);
-}
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d6ceeb37"]]);
 export {
   CodeEditor as default
 };