@kp-ui/lowcode 2.13.1 → 2.14.0-alpha

package/src/components/form-designer/form-widget/index.vue.js

@@ -0,0 +1,199 @@
+import p from "./field-widget/index.js";
+import C from "../../../utils/i18n.js";
+import v from "../../../lib/vuedraggable/src/vuedraggable.js";
+import D from "../../form-render/SubmitButtonRender.vue.js";
+import { resolveComponent as s, createBlock as a, openBlock as r, withCtx as d, createElementVNode as g, createVNode as f, normalizeClass as _, createElementBlock as b, createCommentVNode as y, toDisplayString as w, normalizeStyle as x, mergeProps as F, resolveDynamicComponent as m } from "vue";
+/* empty css           */
+import L from "../../../../_virtual/_plugin-vue_export-helper.js";
+const R = {
+  name: "VFormWidget",
+  componentName: "VFormWidget",
+  mixins: [C],
+  components: {
+    Draggable: v,
+    SubmitButtonRender: D,
+    ...p
+  },
+  props: {
+    designer: Object,
+    formConfig: Object,
+    optionData: {
+      //prop传入的选项数据
+      type: Object,
+      default: () => ({})
+    },
+    globalDsv: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  provide() {
+    return {
+      refList: this.widgetRefList,
+      getFormConfig: () => this.formConfig,
+      getGlobalDsv: () => this.globalDsv,
+      // 全局数据源变量
+      globalOptionData: this.optionData,
+      getOptionData: () => this.optionData,
+      getReadMode: () => !1,
+      globalModel: {
+        formModel: this.formModel
+      },
+      getSubFormFieldFlag: () => !1,
+      getSubFormName: () => "",
+      getDSResultCache: () => this.dsResultCache
+    };
+  },
+  inject: ["getDesignerConfig"],
+  data() {
+    return {
+      formModel: {},
+      widgetRefList: {},
+      dsResultCache: {}
+    };
+  },
+  computed: {
+    labelPosition() {
+      return this.designer.formConfig && this.designer.formConfig.labelPosition ? this.designer.formConfig.labelPosition : "horizontal";
+    },
+    size() {
+      return this.designer.formConfig && this.designer.formConfig.size ? this.designer.formConfig.size : "default";
+    },
+    customClass() {
+      return this.designer.formConfig.customClass || "";
+    },
+    layoutType() {
+      return this.designer.getLayoutType();
+    },
+    canvasMinHeight() {
+      return this.getDesignerConfig().logoHeader !== !1 ? "calc(100vh - 56px - 68px)" : "calc(100vh - 56px - 68px + 48px)";
+    }
+  },
+  watch: {
+    "designer.widgetList": {
+      deep: !0,
+      handler(e) {
+      }
+    },
+    "designer.formConfig": {
+      deep: !0,
+      handler(e) {
+      }
+    }
+  },
+  created() {
+    this.designer.initDesigner(!!this.getDesignerConfig().resetFormJson), this.designer.loadPresetCssCode(this.getDesignerConfig().presetCssCode);
+  },
+  mounted() {
+    this.disableFirefoxDefaultDrop(), this.designer.registerFormWidget(this);
+  },
+  methods: {
+    getWidgetName(e) {
+      return e.type + "-widget";
+    },
+    disableFirefoxDefaultDrop() {
+      navigator.userAgent.toLowerCase().indexOf("firefox") !== -1 && (document.body.ondrop = function(n) {
+        n.stopPropagation(), n.preventDefault();
+      });
+    },
+    onDragEnd(e) {
+    },
+    onDragAdd(e) {
+      const n = e.newIndex;
+      this.designer.widgetList[n] && this.designer.setSelected(this.designer.widgetList[n]), this.designer.emitHistoryChange(), this.designer.emitEvent("field-selected", null);
+    },
+    onDragUpdate() {
+      this.designer.emitHistoryChange();
+    },
+    checkMove(e) {
+      return this.designer.checkWidgetMove(e);
+    },
+    getFormData() {
+      return this.formModel;
+    },
+    getWidgetRef(e, n = !1) {
+      const i = this.widgetRefList[e];
+      return !i && n && this.$message.error(this.i18nt("designer.hint.refNotFound") + e), i;
+    },
+    getSelectedWidgetRef() {
+      const e = this.designer.selectedWidgetName;
+      return this.getWidgetRef(e);
+    },
+    clearWidgetRefList() {
+      Object.keys(this.widgetRefList).forEach((e) => {
+        delete this.widgetRefList[e];
+      });
+    }
+  }
+}, z = { class: "form-widget-container" }, W = {
+  key: 0,
+  class: "no-widget-hint"
+}, k = { class: "transition-group-el" };
+function M(e, n, i, N, E, t) {
+  const c = s("draggable"), h = s("a-form"), u = s("a-config-provider");
+  return r(), a(u, {
+    "component-size": t.size,
+    input: { autocomplete: "off" }
+  }, {
+    default: d(() => [
+      g("div", z, [
+        f(h, {
+          class: _(["full-height-width widget-form tpf-form", [t.customClass, t.layoutType + "-layout"]]),
+          layout: ["horizontal", "vertical", "inline"].includes(t.labelPosition) ? t.labelPosition : "horizontal",
+          size: t.size,
+          "validate-on-rule-change": !1
+        }, {
+          default: d(() => [
+            i.designer.widgetList.length === 0 ? (r(), b("div", W, w(e.i18nt("designer.noWidgetHint")), 1)) : y("", !0),
+            g("div", {
+              class: "form-widget-canvas",
+              style: x({ minHeight: t.canvasMinHeight })
+            }, [
+              f(c, F({
+                list: i.designer.widgetList,
+                "item-key": "id"
+              }, { group: "dragGroup", ghostClass: "ghost", animation: 300 }, {
+                tag: "transition-group",
+                "component-data": { name: "fade" },
+                handle: ".drag-handler",
+                onEnd: t.onDragEnd,
+                onAdd: t.onDragAdd,
+                onUpdate: t.onDragUpdate,
+                move: t.checkMove
+              }), {
+                item: d(({ element: o, index: l }) => [
+                  g("div", k, [
+                    o.category === "container" ? (r(), a(m(t.getWidgetName(o)), {
+                      widget: o,
+                      designer: i.designer,
+                      key: o.id,
+                      "parent-list": i.designer.widgetList,
+                      "index-of-parent-list": l,
+                      "parent-widget": null,
+                      "design-state": !0
+                    }, null, 8, ["widget", "designer", "parent-list", "index-of-parent-list"])) : (r(), a(m(t.getWidgetName(o)), {
+                      field: o,
+                      designer: i.designer,
+                      key: o.id,
+                      "parent-list": i.designer.widgetList,
+                      "index-of-parent-list": l,
+                      "parent-widget": null,
+                      "design-state": !0
+                    }, null, 8, ["field", "designer", "parent-list", "index-of-parent-list"]))
+                  ])
+                ]),
+                _: 1
+              }, 16, ["list", "onEnd", "onAdd", "onUpdate", "move"])
+            ], 4)
+          ]),
+          _: 1
+        }, 8, ["layout", "class", "size"])
+      ])
+    ]),
+    _: 1
+  }, 8, ["component-size"]);
+}
+const B = /* @__PURE__ */ L(R, [["render", M], ["__scopeId", "data-v-3d0205b7"]]);
+export {
+  B as default
+};

package/src/components/form-designer/index.vue.js

@@ -0,0 +1,326 @@
+import C from "./widget-panel/index.vue.js";
+import v from "./toolbar-panel/index.vue.js";
+import F from "./setting-panel/index.vue.js";
+import w from "./form-widget/index.vue.js";
+import { createDesigner as b } from "./designer.js";
+import { traverseAllWidgets as y, getAllContainerWidgets as f, getAllFieldWidgets as c, deepClone as m, addWindowResizeHandler as R } from "../../utils/util.js";
+import x from "../../utils/i18n.js";
+import { isEmpty as E } from "lodash-es";
+import { resolveComponent as n, createBlock as H, openBlock as J, withCtx as o, createVNode as r, createSlots as A, renderList as D, renderSlot as S, createElementVNode as V } from "vue";
+/* empty css           */
+import B from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = {
+  name: "VFormDesigner",
+  componentName: "VFormDesigner",
+  mixins: [x],
+  components: {
+    WidgetPanel: C,
+    ToolbarPanel: v,
+    SettingPanel: F,
+    VFormWidget: w
+  },
+  props: {
+    /* 保存jsonApi */
+    saveJsonApi: {
+      type: Function,
+      default: null
+    },
+    /* 后端字段列表API */
+    fieldListApi: {
+      type: Function,
+      default: null
+    },
+    /* 禁止显示的组件名称数组 */
+    bannedWidgets: {
+      type: Array,
+      default: () => []
+    },
+    /* 设计器配置参数 */
+    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器按钮
+        toolbarMaxWidth: 450,
+        //设计器工具按钮栏最大宽度（单位像素）
+        toolbarMinWidth: 300,
+        //设计器工具按钮栏最小宽度（单位像素）
+        presetCssCode: "",
+        //设计器预设CSS样式代码
+        resetFormJson: !1
+        //是否在设计器初始化时将表单内容重置为空
+      })
+    },
+    /* 全局数据源变量 */
+    globalDsv: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      leftWidth: 270,
+      rightWidth: 300,
+      curLangName: "",
+      isLoading: !1,
+      //是否正在加载中
+      caseName: "",
+      scrollerHeight: 0,
+      designer: b(this),
+      fieldList: []
+    };
+  },
+  provide() {
+    return {
+      serverFieldList: () => this.fieldList,
+      getDesignerConfig: () => this.designerConfig,
+      getBannedWidgets: () => this.bannedWidgets
+    };
+  },
+  created() {
+  },
+  mounted() {
+    this.initLocale(), this.scrollerHeight = window.innerHeight - 56 - 36 + "px", R(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 56 - 36 + "px";
+      });
+    }), this.loadFieldListFromServer();
+  },
+  watch: {
+    getLocale: {
+      handler(e, t) {
+        this.initLocale();
+      },
+      immediate: !0
+    }
+  },
+  methods: {
+    setLoading(e) {
+      this.isLoading = e;
+    },
+    changeLeftWidth() {
+      this.leftWidth === 270 ? this.leftWidth = 0 : this.leftWidth = 270;
+    },
+    changeRightWidth() {
+      this.rightWidth === 300 ? this.rightWidth = 0 : this.rightWidth = 300;
+    },
+    /**
+     * json回填
+     * @param {*} importObj
+     */
+    setJsonImport(e = {}) {
+      if (!E(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 + "");
+        }
+    },
+    testEEH(e, t) {
+      console.log("test", e), console.log("test222222", t);
+    },
+    initLocale() {
+      this.setLocale("en-US"), this.curLangName = this.i18nt("application." + this.getLocale), this.changeLocale(this.getLocale);
+    },
+    async loadFieldListFromServer() {
+      this.fieldListApi && (this.fieldList = await this.fieldListApi(), console.log("this.fieldList: ", this.fieldList));
+    },
+    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());
+    },
+    getFormJson() {
+      return {
+        widgetList: m(this.designer.widgetList),
+        formConfig: m(this.designer.formConfig)
+      };
+    },
+    clearDesigner() {
+      this.$refs.toolbarRef.clearFormWidget();
+    },
+    /**
+     * 预览表单
+     */
+    previewForm() {
+      this.$refs.toolbarRef.previewForm();
+    },
+    /**
+     * 导入表单JSON
+     */
+    importJson() {
+      this.$refs.toolbarRef.importJson();
+    },
+    /**
+     * 导出表单JSON
+     */
+    exportJson() {
+      this.$refs.toolbarRef.exportJson();
+    },
+    /**
+     * 导出Vue/HTML代码
+     */
+    exportCode() {
+      this.$refs.toolbarRef.exportCode();
+    },
+    /**
+     * 获取所有字段组件
+     * @returns {*[]}
+     */
+    getFieldWidgets(e = null) {
+      return e ? c(e) : c(this.designer.widgetList);
+    },
+    /**
+     * 获取所有容器组件
+     * @returns {*[]}
+     */
+    getContainerWidgets(e = null) {
+      return e ? f(e) : f(this.designer.widgetList);
+    },
+    /**
+     * 升级表单json，以补充最新的组件属性
+     * @param formJson
+     */
+    upgradeFormJson(e) {
+      if (!e.widgetList || !e.formConfig) {
+        this.$message.error("Invalid form json!");
+        return;
+      }
+      return y(e.widgetList, (t) => {
+        this.designer.upgradeWidgetConfig(t);
+      }), this.designer.upgradeFormConfig(e.formConfig), e;
+    },
+    getWidgetRef(e, t = !1) {
+      return this.$refs.formRef.getWidgetRef(e, t);
+    },
+    getSelectedWidgetRef() {
+      return this.$refs.formRef.getSelectedWidgetRef();
+    },
+    /**
+     * 添加数据源对象
+     * @param dsObj
+     */
+    addDataSource(e) {
+      this.designer.formConfig.dataSources.push(e);
+    },
+    /**
+     * 增加外部组件引用，可通过getEC()方法获取外部组件，以便在VForm内部调用外部组件方法
+     * @param componentName 外部组件名称
+     * @param externalComponent 外部组件实例
+     */
+    addEC(e, t) {
+      this.externalComponents[e] = t;
+    },
+    /**
+     * 判断外部组件是否可获取
+     * @param componentName 外部组件名称
+     * @returns {boolean}
+     */
+    hasEC(e) {
+      return this.externalComponents.hasOwnProperty(e);
+    },
+    /**
+     * 获取外部组件实例
+     * @param componentName
+     * @returns {*}
+     */
+    getEC(e) {
+      return this.externalComponents[e];
+    }
+    //TODO: 增加更多方法！！
+  }
+}, P = { class: "container-scroll-bar" };
+function k(e, t, s, M, i, l) {
+  const u = n("WidgetPanel"), d = n("a-layout-sider"), p = n("toolbar-panel"), W = n("a-layout-header"), _ = n("VFormWidget"), a = n("a-layout-content"), L = n("setting-panel"), g = n("a-layout");
+  return J(), H(g, { class: "main-container full-height" }, {
+    default: o(() => [
+      r(g, null, {
+        default: o(() => [
+          r(d, {
+            width: i.leftWidth,
+            class: "side-panel"
+          }, {
+            default: o(() => [
+              r(u, { designer: i.designer }, null, 8, ["designer"])
+            ]),
+            _: 1
+          }, 8, ["width"]),
+          r(a, { class: "center-layout-container" }, {
+            default: o(() => [
+              r(W, { class: "toolbar-header" }, {
+                default: o(() => [
+                  r(p, {
+                    saveJsonApi: s.saveJsonApi,
+                    designer: i.designer,
+                    "global-dsv": s.globalDsv,
+                    changeLeftWidth: l.changeLeftWidth,
+                    changeRightWidth: l.changeRightWidth,
+                    leftWidth: i.leftWidth,
+                    rightWidth: i.rightWidth,
+                    ref: "toolbarRef"
+                  }, A({ _: 2 }, [
+                    D(e.$slots, (j, h) => ({
+                      name: h,
+                      fn: o(() => [
+                        S(e.$slots, h)
+                      ])
+                    }))
+                  ]), 1032, ["saveJsonApi", "designer", "global-dsv", "changeLeftWidth", "changeRightWidth", "leftWidth", "rightWidth"])
+                ]),
+                _: 3
+              }),
+              r(a, { class: "form-widget-main" }, {
+                default: o(() => [
+                  V("div", P, [
+                    r(_, {
+                      designer: i.designer,
+                      "form-config": i.designer.formConfig,
+                      "global-dsv": s.globalDsv,
+                      ref: "formRef"
+                    }, null, 8, ["designer", "form-config", "global-dsv"])
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 3
+          }),
+          r(d, { width: i.rightWidth }, {
+            default: o(() => [
+              r(L, {
+                designer: i.designer,
+                "selected-widget": i.designer.selectedWidget,
+                "global-dsv": s.globalDsv,
+                "form-config": i.designer.formConfig,
+                onEditEventHandler: l.testEEH
+              }, null, 8, ["designer", "selected-widget", "global-dsv", "form-config", "onEditEventHandler"])
+            ]),
+            _: 1
+          }, 8, ["width"])
+        ]),
+        _: 3
+      })
+    ]),
+    _: 3
+  });
+}
+const Z = /* @__PURE__ */ B(N, [["render", k]]);
+export {
+  Z as default
+};

package/src/components/form-designer/refMixinDesign.js

@@ -0,0 +1,18 @@
+const e = {
+  methods: {
+    initRefList() {
+      this.refList !== null && this.widget.options.name && (this.refList[this.widget.options.name] = this);
+    },
+    getWidgetRef(t, s) {
+      const i = this.refList[t];
+      return !i && s && this.$message.error(this.i18nt("render.hint.refNotFound") + t), i;
+    },
+    /* 该方法用于组件重名检查！！ */
+    registerToRefList(t) {
+      this.refList !== null && this.widget.options.name && (t && delete this.refList[t], this.refList[this.widget.options.name] = this);
+    }
+  }
+};
+export {
+  e as default
+};

package/src/components/form-designer/setting-panel/form-crud-setting.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as s, useModel as d, createElementBlock as m, openBlock as f, createVNode as r, unref as t } from "vue";
+import n from "../../http-editor/index.vue.js";
+import { useI18n as p } from "../../../utils/i18n.js";
+const u = { class: "t-p-[10px]" }, _ = /* @__PURE__ */ s({
+  __name: "form-crud-setting",
+  props: {
+    formConfig: {
+      type: Object,
+      default: () => ({
+        serveList: {
+          vformUpdate: {},
+          vformDetail: {}
+        }
+      })
+    },
+    formConfigModifiers: {}
+  },
+  emits: ["update:formConfig"],
+  setup(l) {
+    const { i18nt: e } = p(), o = d(l, "formConfig");
+    return (v, i) => (f(), m("div", u, [
+      r(n, {
+        label: t(e)("designer.hint.表单编辑api"),
+        buttonName: t(e)("designer.setting.edit"),
+        drawerTitle: t(e)("表单配置"),
+        optionModel: o.value.serveList.vformUpdate,
+        "onUpdate:optionModel": i[0] || (i[0] = (a) => o.value.serveList.vformUpdate = a)
+      }, null, 8, ["label", "buttonName", "drawerTitle", "optionModel"]),
+      r(n, {
+        label: t(e)("designer.hint.表单详情API"),
+        buttonName: t(e)("designer.setting.edit"),
+        drawerTitle: t(e)("表单配置"),
+        optionModel: o.value.serveList.vformDetail
+      }, null, 8, ["label", "buttonName", "drawerTitle", "optionModel"])
+    ]));
+  }
+});
+export {
+  _ as default
+};

package/src/components/form-designer/setting-panel/form-crud-setting.vue2.js

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

package/src/components/form-designer/setting-panel/form-setting.vue.js

@@ -0,0 +1,7 @@
+import o from "./form-setting.vue2.js";
+/* empty css                  */
+import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1a9d217e"]]);
+export {
+  e as default
+};