@kp-ui/lowcode 1.0.25 → 1.0.26

package/designer.js

@@ -1,24 +1,24 @@
-import C from "./src/components/form-designer/widget-panel/index.vue.js";
-import W from "./src/components/form-designer/toolbar-panel/index.vue.js";
-import L from "./src/components/form-designer/setting-panel/index.vue.js";
-import F from "./src/components/form-designer/form-widget/index.vue.js";
-import { createDesigner as b } from "./src/components/form-designer/designer.js";
-import { traverseAllWidgets as y, getAllContainerWidgets as c, getAllFieldWidgets as f, deepClone as m, addWindowResizeHandler as R } from "./src/utils/util.js";
-import { VARIANT_FORM_VERSION as x } from "./src/utils/config.js";
-import E, { changeLocale as S } from "./src/utils/i18n.js";
-import { isEmpty as J } from "lodash-es";
-import { resolveComponent as r, createBlock as D, openBlock as A, withCtx as n, createCommentVNode as H, createVNode as o, createSlots as N, renderList as V, renderSlot as B, createElementVNode as U } from "vue";
+import WidgetPanel from "./src/components/form-designer/widget-panel/index.vue.js";
+import ToolbarPanel from "./src/components/form-designer/toolbar-panel/index.vue.js";
+import SettingPanel from "./src/components/form-designer/setting-panel/index.vue.js";
+import VFormWidget from "./src/components/form-designer/form-widget/index.vue.js";
+import { createDesigner } from "./src/components/form-designer/designer.js";
+import { traverseAllWidgets, getAllContainerWidgets, getAllFieldWidgets, deepClone, addWindowResizeHandler } from "./src/utils/util.js";
+import { VARIANT_FORM_VERSION } from "./src/utils/config.js";
+import i18n, { changeLocale } from "./src/utils/i18n.js";
+import { isEmpty } from "lodash-es";
+import { resolveComponent, createBlock, openBlock, withCtx, createCommentVNode, createVNode, createSlots, renderList, renderSlot, createElementVNode } from "vue";
 /* empty css                                       */
-import I from "./_virtual/_plugin-vue_export-helper.js";
-const M = {
+import _export_sfc from "./_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
   name: "VFormDesigner",
   componentName: "VFormDesigner",
-  mixins: [E],
+  mixins: [i18n],
   components: {
-    WidgetPanel: C,
-    ToolbarPanel: W,
-    SettingPanel: L,
-    VFormWidget: F
+    WidgetPanel,
+    ToolbarPanel,
+    SettingPanel,
+    VFormWidget
   },
   props: {
     /* 保存jsonApi */
@@ -39,35 +39,37 @@ const M = {
     /* 设计器配置参数 */
     designerConfig: {
       type: Object,
-      default: () => ({
-        languageMenu: !0,
-        //是否显示语言切换菜单
-        // externalLink: true, //是否显示GitHub、文档等外部链接
-        // formTemplates: true, //是否显示表单模板
-        eventCollapse: !0,
-        //是否显示组件事件属性折叠面板
-        widgetNameReadonly: !1,
-        //禁止修改组件名称
-        clearDesignerButton: !0,
-        //是否显示清空设计器按钮
-        previewFormButton: !0,
-        //是否显示预览表单按钮
-        importJsonButton: !0,
-        //是否显示导入JSON按钮
-        exportJsonButton: !0,
-        //是否显示导出JSON器按钮
-        exportCodeButton: !0,
-        //是否显示导出代码按钮
-        // generateSFCButton: true, //是否显示生成SFC按钮
-        toolbarMaxWidth: 450,
-        //设计器工具按钮栏最大宽度（单位像素）
-        toolbarMinWidth: 300,
-        //设计器工具按钮栏最小宽度（单位像素）
-        presetCssCode: "",
-        //设计器预设CSS样式代码
-        resetFormJson: !1
-        //是否在设计器初始化时将表单内容重置为空
-      })
+      default: () => {
+        return {
+          languageMenu: true,
+          //是否显示语言切换菜单
+          // externalLink: true, //是否显示GitHub、文档等外部链接
+          // formTemplates: true, //是否显示表单模板
+          eventCollapse: true,
+          //是否显示组件事件属性折叠面板
+          widgetNameReadonly: false,
+          //禁止修改组件名称
+          clearDesignerButton: true,
+          //是否显示清空设计器按钮
+          previewFormButton: true,
+          //是否显示预览表单按钮
+          importJsonButton: true,
+          //是否显示导入JSON按钮
+          exportJsonButton: true,
+          //是否显示导出JSON器按钮
+          exportCodeButton: true,
+          //是否显示导出代码按钮
+          // generateSFCButton: true, //是否显示生成SFC按钮
+          toolbarMaxWidth: 450,
+          //设计器工具按钮栏最大宽度（单位像素）
+          toolbarMinWidth: 300,
+          //设计器工具按钮栏最小宽度（单位像素）
+          presetCssCode: "",
+          //设计器预设CSS样式代码
+          resetFormJson: false
+          //是否在设计器初始化时将表单内容重置为空
+        };
+      }
     },
     /* 全局数据源变量 */
     globalDsv: {
@@ -79,17 +81,17 @@ const M = {
     return {
       leftWidth: 270,
       rightWidth: 300,
-      vFormVersion: x,
+      vFormVersion: VARIANT_FORM_VERSION,
       curLangName: "",
       curLocale: "",
-      vsCodeFlag: !1,
+      vsCodeFlag: false,
       caseName: "",
       docUrl: "https://www.vform666.com/document3.html",
       gitUrl: "https://github.com/vform666/variant-form3-vite",
       chatUrl: "https://www.vform666.com/pages/chat-group/",
       subScribeUrl: "https://www.vform666.com/pages/pro/",
       scrollerHeight: 0,
-      designer: b(this),
+      designer: createDesigner(this),
       fieldList: []
     };
   },
@@ -103,88 +105,130 @@ const M = {
   created() {
   },
   mounted() {
-    this.initLocale(), this.scrollerHeight = window.innerHeight - 56 - 36 + "px", R(() => {
+    this.initLocale();
+    this.scrollerHeight = window.innerHeight - 56 - 36 + "px";
+    addWindowResizeHandler(() => {
       this.$nextTick(() => {
         this.scrollerHeight = window.innerHeight - 56 - 36 + "px";
       });
-    }), this.loadCase(), this.loadFieldListFromServer();
+    });
+    this.loadCase();
+    this.loadFieldListFromServer();
   },
   methods: {
     changeLeftWidth() {
-      this.leftWidth === 270 ? this.leftWidth = 0 : this.leftWidth = 270;
+      if (this.leftWidth === 270) {
+        this.leftWidth = 0;
+      } else {
+        this.leftWidth = 270;
+      }
     },
     changeRightWidth() {
-      this.rightWidth === 300 ? this.rightWidth = 0 : this.rightWidth = 300;
+      if (this.rightWidth === 300) {
+        this.rightWidth = 0;
+      } else {
+        this.rightWidth = 300;
+      }
     },
     /**
      * json回填
      * @param {*} importObj
      */
-    setJsonImport(e = {}) {
-      if (!J(e))
-        try {
-          if (!e || !e.formConfig)
-            throw new Error(this.i18nt("designer.hint.invalidJsonFormat"));
-          this.designer.loadFormJson(e), this.designer.emitHistoryChange(), this.designer.emitEvent("form-json-imported", []);
-        } catch (t) {
-          this.$message.error(t + "");
+    setJsonImport(importObj = {}) {
+      if (isEmpty(importObj)) return;
+      try {
+        if (!importObj || !importObj.formConfig) {
+          throw new Error(this.i18nt("designer.hint.invalidJsonFormat"));
         }
+        this.designer.loadFormJson(importObj);
+        this.designer.emitHistoryChange();
+        this.designer.emitEvent("form-json-imported", []);
+      } catch (ex) {
+        this.$message.error(ex + "");
+      }
     },
-    testEEH(e, t) {
-      console.log("test", e), console.log("test222222", t);
+    testEEH(eventName, eventParams) {
+      console.log("test", eventName);
+      console.log("test222222", eventParams);
     },
-    showLink(e) {
-      return this.designerConfig[e] === void 0 ? !0 : !!this.designerConfig[e];
+    showLink(configName) {
+      if (this.designerConfig[configName] === void 0) {
+        return true;
+      }
+      return !!this.designerConfig[configName];
     },
     openHome() {
-      if (this.vsCodeFlag) {
-        const e = {
+      if (!!this.vsCodeFlag) {
+        const msgObj = {
           cmd: "openUrl",
           data: {
             url: "https://www.vform666.com/"
           }
         };
-        window.parent.postMessage(e, "*");
+        window.parent.postMessage(msgObj, "*");
       }
     },
-    openUrl(e, t) {
-      if (this.vsCodeFlag) {
-        const s = {
+    openUrl(event, url) {
+      if (!!this.vsCodeFlag) {
+        const msgObj = {
           cmd: "openUrl",
           data: {
-            url: t
+            url
           }
         };
-        window.parent.postMessage(s, "*");
+        window.parent.postMessage(msgObj, "*");
       } else {
-        const s = e.currentTarget;
-        s.href = t;
+        const aDom = event.currentTarget;
+        aDom.href = url;
       }
     },
     loadCase() {
-      this.caseName;
+      if (!this.caseName) {
+        return;
+      }
     },
     initLocale() {
-      this.curLocale = localStorage.getItem("v_form_locale"), this.vsCodeFlag ? this.curLocale = this.curLocale || "en-US" : this.curLocale = this.curLocale || "zh-CN", this.curLangName = this.i18nt("application." + this.curLocale), this.changeLanguage(this.curLocale);
+      this.curLocale = localStorage.getItem("v_form_locale");
+      if (!!this.vsCodeFlag) {
+        this.curLocale = this.curLocale || "en-US";
+      } else {
+        this.curLocale = this.curLocale || "zh-CN";
+      }
+      this.curLangName = this.i18nt("application." + this.curLocale);
+      this.changeLanguage(this.curLocale);
     },
     async loadFieldListFromServer() {
-      this.fieldListApi && (this.fieldList = await this.fieldListApi(), console.log("this.fieldList: ", this.fieldList));
-    },
-    handleLanguageChanged(e) {
-      this.changeLanguage(e), this.curLangName = this.i18nt("application." + e);
-    },
-    changeLanguage(e) {
-      S(e);
-    },
-    setFormJson(e) {
-      console.log("formJson: ", e);
-      let t = !1;
-      e && (typeof e == "string" ? t = this.designer.loadFormJson(JSON.parse(e)) : e.constructor === Object && (t = this.designer.loadFormJson(e)), t && this.designer.emitHistoryChange());
+      if (!this.fieldListApi) {
+        return;
+      }
+      this.fieldList = await this.fieldListApi();
+      console.log("this.fieldList: ", this.fieldList);
+    },
+    handleLanguageChanged(command) {
+      this.changeLanguage(command);
+      this.curLangName = this.i18nt("application." + command);
+    },
+    changeLanguage(langName) {
+      changeLocale(langName);
+    },
+    setFormJson(formJson) {
+      console.log("formJson: ", formJson);
+      let modifiedFlag = false;
+      if (!!formJson) {
+        if (typeof formJson === "string") {
+          modifiedFlag = this.designer.loadFormJson(JSON.parse(formJson));
+        } else if (formJson.constructor === Object) {
+          modifiedFlag = this.designer.loadFormJson(formJson);
+        }
+        if (modifiedFlag) {
+          this.designer.emitHistoryChange();
+        }
+      }
     },
     getFormJson() {
       return {
-        widgetList: m(this.designer.widgetList),
-        formConfig: m(this.designer.formConfig)
+        widgetList: deepClone(this.designer.widgetList),
+        formConfig: deepClone(this.designer.formConfig)
       };
     },
     clearDesigner() {
@@ -194,8 +238,9 @@ const M = {
      * 刷新表单设计器
      */
     refreshDesigner() {
-      const e = this.getFormJson();
-      this.designer.clearDesigner(!0), this.designer.loadFormJson(e);
+      const fJson = this.getFormJson();
+      this.designer.clearDesigner(true);
+      this.designer.loadFormJson(fJson);
     },
     /**
      * 预览表单
@@ -231,117 +276,130 @@ const M = {
      * 获取所有字段组件
      * @returns {*[]}
      */
-    getFieldWidgets(e = null) {
-      return e ? f(e) : f(this.designer.widgetList);
+    getFieldWidgets(widgetList = null) {
+      return !!widgetList ? getAllFieldWidgets(widgetList) : getAllFieldWidgets(this.designer.widgetList);
     },
     /**
      * 获取所有容器组件
      * @returns {*[]}
      */
-    getContainerWidgets(e = null) {
-      return e ? c(e) : c(this.designer.widgetList);
+    getContainerWidgets(widgetList = null) {
+      return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList);
     },
     /**
      * 升级表单json，以补充最新的组件属性
      * @param formJson
      */
-    upgradeFormJson(e) {
-      if (!e.widgetList || !e.formConfig) {
+    upgradeFormJson(formJson) {
+      if (!formJson.widgetList || !formJson.formConfig) {
         this.$message.error("Invalid form json!");
         return;
       }
-      return y(e.widgetList, (t) => {
-        this.designer.upgradeWidgetConfig(t);
-      }), this.designer.upgradeFormConfig(e.formConfig), e;
+      traverseAllWidgets(formJson.widgetList, (w) => {
+        this.designer.upgradeWidgetConfig(w);
+      });
+      this.designer.upgradeFormConfig(formJson.formConfig);
+      return formJson;
     },
-    getWidgetRef(e, t = !1) {
-      return this.$refs.formRef.getWidgetRef(e, t);
+    getWidgetRef(widgetName, showError = false) {
+      return this.$refs["formRef"].getWidgetRef(widgetName, showError);
     },
     getSelectedWidgetRef() {
-      return this.$refs.formRef.getSelectedWidgetRef();
+      return this.$refs["formRef"].getSelectedWidgetRef();
     },
     /**
      * 添加数据源对象
      * @param dsObj
      */
-    addDataSource(e) {
-      this.designer.formConfig.dataSources.push(e);
+    addDataSource(dsObj) {
+      this.designer.formConfig.dataSources.push(dsObj);
     },
     /**
      * 增加外部组件引用，可通过getEC()方法获取外部组件，以便在VForm内部调用外部组件方法
      * @param componentName 外部组件名称
      * @param externalComponent 外部组件实例
      */
-    addEC(e, t) {
-      this.externalComponents[e] = t;
+    addEC(componentName, externalComponent) {
+      this.externalComponents[componentName] = externalComponent;
     },
     /**
      * 判断外部组件是否可获取
      * @param componentName 外部组件名称
      * @returns {boolean}
      */
-    hasEC(e) {
-      return this.externalComponents.hasOwnProperty(e);
+    hasEC(componentName) {
+      return this.externalComponents.hasOwnProperty(componentName);
     },
     /**
      * 获取外部组件实例
      * @param componentName
      * @returns {*}
      */
-    getEC(e) {
-      return this.externalComponents[e];
+    getEC(componentName) {
+      return this.externalComponents[componentName];
     }
     //TODO: 增加更多方法！！
   }
-}, O = { class: "container-scroll-bar" };
-function j(e, t, s, k, i, a) {
-  r("a-select-option"), r("a-select");
-  const u = r("a-layout-header"), p = r("widget-panel"), l = r("a-layout-sider"), _ = r("toolbar-panel"), v = r("v-form-widget"), d = r("a-layout-content"), w = r("setting-panel"), g = r("a-layout");
-  return A(), D(g, { class: "main-container full-height" }, {
-    default: n(() => [
-      H("", !0),
-      o(g, null, {
-        default: n(() => [
-          o(l, {
-            width: i.leftWidth,
+};
+const _hoisted_4 = { class: "container-scroll-bar" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  resolveComponent("a-select-option");
+  resolveComponent("a-select");
+  const _component_a_layout_header = resolveComponent("a-layout-header");
+  const _component_widget_panel = resolveComponent("widget-panel");
+  const _component_a_layout_sider = resolveComponent("a-layout-sider");
+  const _component_toolbar_panel = resolveComponent("toolbar-panel");
+  const _component_v_form_widget = resolveComponent("v-form-widget");
+  const _component_a_layout_content = resolveComponent("a-layout-content");
+  const _component_setting_panel = resolveComponent("setting-panel");
+  const _component_a_layout = resolveComponent("a-layout");
+  return openBlock(), createBlock(_component_a_layout, { class: "main-container full-height" }, {
+    default: withCtx(() => [
+      createCommentVNode("", true),
+      createVNode(_component_a_layout, null, {
+        default: withCtx(() => [
+          createVNode(_component_a_layout_sider, {
+            width: $data.leftWidth,
             class: "side-panel"
           }, {
-            default: n(() => [
-              o(p, { designer: i.designer }, null, 8, ["designer"])
+            default: withCtx(() => [
+              createVNode(_component_widget_panel, { designer: $data.designer }, null, 8, ["designer"])
             ]),
             _: 1
           }, 8, ["width"]),
-          o(d, { class: "center-layout-container" }, {
-            default: n(() => [
-              o(u, { class: "toolbar-header" }, {
-                default: n(() => [
-                  o(_, {
-                    saveJsonApi: s.saveJsonApi,
-                    designer: i.designer,
-                    "global-dsv": s.globalDsv,
-                    changeLeftWidth: a.changeLeftWidth,
-                    changeRightWidth: a.changeRightWidth,
-                    leftWidth: i.leftWidth,
-                    rightWidth: i.rightWidth,
+          createVNode(_component_a_layout_content, { class: "center-layout-container" }, {
+            default: withCtx(() => [
+              createVNode(_component_a_layout_header, { class: "toolbar-header" }, {
+                default: withCtx(() => [
+                  createVNode(_component_toolbar_panel, {
+                    saveJsonApi: $props.saveJsonApi,
+                    designer: $data.designer,
+                    "global-dsv": $props.globalDsv,
+                    changeLeftWidth: $options.changeLeftWidth,
+                    changeRightWidth: $options.changeRightWidth,
+                    leftWidth: $data.leftWidth,
+                    rightWidth: $data.rightWidth,
                     ref: "toolbarRef"
-                  }, N({ _: 2 }, [
-                    V(e.$slots, (P, h) => ({
-                      name: h,
-                      fn: n(() => [
-                        B(e.$slots, h, {}, void 0, !0)
-                      ])
-                    }))
+                  }, createSlots({ _: 2 }, [
+                    renderList(_ctx.$slots, (idx, slotName) => {
+                      return {
+                        name: slotName,
+                        fn: withCtx(() => [
+                          renderSlot(_ctx.$slots, slotName, {}, void 0, true)
+                        ])
+                      };
+                    })
                   ]), 1032, ["saveJsonApi", "designer", "global-dsv", "changeLeftWidth", "changeRightWidth", "leftWidth", "rightWidth"])
                 ]),
                 _: 3
               }),
-              o(d, { class: "form-widget-main" }, {
-                default: n(() => [
-                  U("div", O, [
-                    o(v, {
-                      designer: i.designer,
-                      "form-config": i.designer.formConfig,
-                      "global-dsv": s.globalDsv,
+              createVNode(_component_a_layout_content, { class: "form-widget-main" }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_4, [
+                    createVNode(_component_v_form_widget, {
+                      designer: $data.designer,
+                      "form-config": $data.designer.formConfig,
+                      "global-dsv": $props.globalDsv,
                       ref: "formRef"
                     }, null, 8, ["designer", "form-config", "global-dsv"])
                   ])
@@ -351,14 +409,14 @@ function j(e, t, s, k, i, a) {
             ]),
             _: 3
           }),
-          o(l, { width: i.rightWidth }, {
-            default: n(() => [
-              o(w, {
-                designer: i.designer,
-                "selected-widget": i.designer.selectedWidget,
-                "global-dsv": s.globalDsv,
-                "form-config": i.designer.formConfig,
-                onEditEventHandler: a.testEEH
+          createVNode(_component_a_layout_sider, { width: $data.rightWidth }, {
+            default: withCtx(() => [
+              createVNode(_component_setting_panel, {
+                designer: $data.designer,
+                "selected-widget": $data.designer.selectedWidget,
+                "global-dsv": $props.globalDsv,
+                "form-config": $data.designer.formConfig,
+                onEditEventHandler: $options.testEEH
               }, null, 8, ["designer", "selected-widget", "global-dsv", "form-config", "onEditEventHandler"])
             ]),
             _: 1
@@ -370,7 +428,7 @@ function j(e, t, s, k, i, a) {
     _: 3
   });
 }
-const ie = /* @__PURE__ */ I(M, [["render", j], ["__scopeId", "data-v-8a4df010"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8a4df010"]]);
 export {
-  ie as default
+  index as default
 };