@kp-ui/lowcode 2.15.0-alpha.2 → 2.15.0-alpha.4

package/src/components/form-designer/form-widget/widgetAction.vue2.js

@@ -1,39 +1,94 @@
-import { defineComponent as f } from "vue";
-import { useI18n as c } from "../../../utils/i18n.js";
-import { SvgIcon as g } from "tmgc2-share";
-import { useContainerWidget as y } from "./container-widget/useContainerWidget.js";
-const I = /* @__PURE__ */ f({
+import { defineComponent as C, createElementBlock as r, openBlock as d, Fragment as W, createCommentVNode as a, unref as e, createElementVNode as g, withModifiers as c, createVNode as n, toDisplayString as b } from "vue";
+import { useI18n as L } from "../../../utils/i18n.js";
+import { SvgIcon as o } from "tmgc2-share";
+import { useContainerWidget as $ } from "./container-widget/useContainerWidget.js";
+const D = {
+  key: 0,
+  class: "container-action"
+}, I = ["title"], F = ["title"], N = ["title"], _ = ["title"], B = ["title"], P = {
+  key: 1,
+  class: "drag-handler"
+}, V = ["title"], A = { key: 0 }, H = /* @__PURE__ */ C({
   name: "container-action",
   inheritAttrs: !1,
   __name: "widgetAction",
   props: {
-    widget: { type: Object, required: !0 },
-    field: { type: Object, required: !0 },
-    parentWidget: { type: [Object, null], required: !1 },
-    parentList: { type: [Array, null], required: !1 },
-    indexOfParentList: { type: Number, required: !1 },
-    subFormRowIndex: { type: Number, required: !1 },
-    subFormRowId: { type: String, required: !1 },
-    designer: { type: null, required: !1 },
-    subFormColIndex: { type: Number, required: !1 },
-    isDrag: { type: Boolean, required: !1, default: !0 }
+    widget: {},
+    field: {},
+    parentWidget: {},
+    parentList: {},
+    indexOfParentList: {},
+    subFormRowIndex: {},
+    subFormRowId: {},
+    designer: {},
+    subFormColIndex: {},
+    isDrag: { type: Boolean, default: !0 }
   },
-  setup(r, { expose: n }) {
-    n();
-    const { i18nt: i, i18n2t: o } = c(), e = r, {
-      selected: s,
-      moveUpWidget: u,
-      selectParentWidget: a,
-      cloneContainer: d,
+  setup(u) {
+    const { i18nt: s, i18n2t: w } = L(), v = u, {
+      selected: m,
+      moveUpWidget: f,
+      selectParentWidget: h,
+      cloneContainer: k,
       removeWidget: p,
-      moveDownWidget: l,
-      customClass: m
-    } = y(e), t = { i18nt: i, i18n2t: o, props: e, selected: s, moveUpWidget: u, selectParentWidget: a, cloneContainer: d, removeWidget: p, moveDownWidget: l, customClass: m, get SvgIcon() {
-      return g;
-    } };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+      moveDownWidget: y
+    } = $(v);
+    return (t, i) => (d(), r(W, null, [
+      e(m) ? (d(), r("div", D, [
+        g("i", {
+          title: e(s)("designer.hint.selectParentWidget"),
+          onClick: i[0] || (i[0] = c((l) => e(h)(), ["stop"]))
+        }, [
+          n(e(o), { "icon-class": "icon-el-back" })
+        ], 8, I),
+        g("i", {
+          title: e(s)("designer.hint.moveUpWidget"),
+          onClick: i[1] || (i[1] = c((l) => e(f)(), ["stop"]))
+        }, [
+          n(e(o), { "icon-class": "icon-el-move-up" })
+        ], 8, F),
+        t.parentList && t.parentList.length > 1 ? (d(), r("i", {
+          key: 0,
+          title: e(s)("designer.hint.moveDownWidget"),
+          onClick: i[2] || (i[2] = c((l) => e(y)(), ["stop"]))
+        }, [
+          n(e(o), { "icon-class": "icon-el-move-down" })
+        ], 8, N)) : a("", !0),
+        t.widget.type === "grid" ? (d(), r("i", {
+          key: 1,
+          title: e(s)("designer.hint.cloneWidget"),
+          onClick: i[3] || (i[3] = c((l) => e(k)(t.widget), ["stop"]))
+        }, [
+          n(e(o), { "icon-class": "icon-el-clone" })
+        ], 8, _)) : a("", !0),
+        g("i", {
+          title: e(s)("designer.hint.remove"),
+          onClick: i[4] || (i[4] = c(
+            //@ts-ignore
+            (...l) => e(p) && e(p)(...l),
+            ["stop"]
+          ))
+        }, [
+          n(e(o), { "icon-class": "icon-el-delete" })
+        ], 8, B)
+      ])) : a("", !0),
+      e(m) && !t.widget.internal && t.isDrag ? (d(), r("div", P, [
+        g("i", {
+          title: e(s)("designer.hint.dragHandler")
+        }, [
+          n(e(o), { "icon-class": "icon-el-drag-move" })
+        ], 8, V),
+        g("i", null, b(t.widget.showName || e(w)(
+          `designer.widgetLabel.${t.widget.type}`,
+          `extension.widgetLabel.${t.widget.type}`
+        )), 1),
+        t.widget.options.hidden === !0 ? (d(), r("i", A, [
+          n(e(o), { "icon-class": "icon-el-hide" })
+        ])) : a("", !0)
+      ])) : a("", !0)
+    ], 64));
   }
 });
 export {
-  I as default
+  H as default
 };

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

@@ -1,90 +1,157 @@
-import m from "./index.vue2.js";
-import { resolveComponent as i, createBlock as _, openBlock as h, withCtx as o, createVNode as t, createSlots as v, renderList as W, renderSlot as b, createElementVNode as u } from "vue";
-/* empty css           */
-import w from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = { class: "container-scroll-bar" };
-function x(a, l, d, e, p, C) {
-  const r = i("a-layout-sider"), c = i("a-layout-header"), s = i("a-layout-content"), f = i("a-layout");
-  return h(), _(f, { class: "main-container full-height" }, {
-    default: o(() => [
-      t(f, null, {
-        default: o(() => [
-          t(r, {
-            width: e.leftWidth,
-            class: "side-panel"
-          }, {
-            default: o(() => [
-              t(e.WidgetPanel)
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["width"]),
-          t(s, { class: "center-layout-container" }, {
-            default: o(() => [
-              t(c, { class: "toolbar-header" }, {
-                default: o(() => [
-                  t(e.ToolbarPanel, {
-                    saveJsonApi: d.saveJsonApi,
-                    "global-dsv": d.globalDsv,
-                    leftWidth: e.leftWidth,
-                    "onUpdate:leftWidth": l[0] || (l[0] = (n) => e.leftWidth = n),
-                    rightWidth: e.rightWidth,
-                    "onUpdate:rightWidth": l[1] || (l[1] = (n) => e.rightWidth = n),
-                    ref: "toolbarRef"
-                  }, v({
-                    _: 2
-                    /* DYNAMIC */
-                  }, [
-                    W(a.$slots, (n, g) => ({
-                      name: g,
-                      fn: o(() => [
-                        b(a.$slots, g)
+import { defineComponent as T, ref as l, provide as a, getCurrentInstance as $, computed as x, watch as M, onMounted as q, resolveComponent as s, createBlock as z, openBlock as G, withCtx as n, createVNode as r, createSlots as K, renderList as Q, renderSlot as X, createElementVNode as Y } from "vue";
+import Z from "./widget-panel/index.vue.js";
+import j from "./toolbar-panel/index.vue.js";
+import O from "./setting-panel/index.vue.js";
+import ee from "./form-widget/index.vue.js";
+import { createDesigner as te } from "./designer.js";
+import { useLocaleStore as oe } from "@kp-ui/i18n";
+import { deepClone as _, getAllFieldWidgets as W, getAllContainerWidgets as y } from "../../utils/util.js";
+import { isEmpty as w } from "lodash-es";
+import { useI18n as F } from "../../utils/i18n.js";
+import { message as b } from "ant-design-vue";
+import { storeToRefs as re } from "pinia";
+const ne = { class: "container-scroll-bar" }, he = /* @__PURE__ */ T({
+  name: "VFormDesigner",
+  componentName: "VFormDesigner",
+  __name: "index",
+  props: {
+    saveJsonApi: {},
+    fieldListApi: {},
+    designerConfig: { default: () => ({
+      eventCollapse: !0,
+      //是否显示组件事件属性折叠面板
+      widgetNameReadonly: !1,
+      //禁止修改组件名称
+      clearDesignerButton: !0,
+      //是否显示清空设计器按钮
+      previewFormButton: !0,
+      //是否显示预览表单按钮
+      importJsonButton: !0,
+      //是否显示导入JSON按钮
+      exportJsonButton: !0
+      //是否显示导出JSON器按钮
+    }) },
+    globalDsv: { default: () => ({}) }
+  },
+  setup(L, { expose: D }) {
+    const g = l(), { i18nt: J } = F(), A = oe(), { locale: m } = re(A), d = L;
+    a("serverFieldList", () => c.value), a("designState", !0);
+    const f = l(270), u = l(300), c = l([]), { initLocale: S } = F(), R = $(), t = l(te(R)), B = x(() => t.value.formConfig);
+    a("formConfig", B), a("designer", t), a("getDesignerConfig", () => d.designerConfig);
+    const V = (e) => {
+      if (!w(e))
+        try {
+          if (!e || !e.formConfig)
+            throw new Error(J("designer.hint.invalidJsonFormat"));
+          t.value.loadFormJson(e), t.value.emitHistoryChange(), t.value.emitEvent("form-json-imported", []);
+        } catch (o) {
+          b.error(o + "");
+        }
+    }, E = async () => {
+      d.fieldListApi && (c.value = await d.fieldListApi());
+    }, N = (e) => {
+      if (!w(e))
+        try {
+          let o = !1;
+          typeof e == "string" ? o = t.value.loadFormJson(JSON.parse(e)) : e.constructor === Object && (o = t.value.loadFormJson(e)), o && t.value.emitHistoryChange();
+        } catch (o) {
+          b.error(o + "");
+        }
+    }, k = () => ({
+      widgetList: _(t.value.widgetList),
+      formConfig: _(t.value.formConfig)
+    }), I = (e = []) => e.length ? W(e) : W(t.value.widgetList), P = (e = []) => e.length ? y(e) : y(t.value.widgetList), U = (e, o = !1) => g.value.getWidgetRef(e, o);
+    return M(
+      m,
+      () => {
+        S(m.value);
+      },
+      {
+        immediate: !0
+      }
+    ), q(() => {
+      t.value.initDesigner(), E();
+    }), D({
+      getWidgetRef: U,
+      getContainerWidgets: P,
+      getFieldWidgets: I,
+      getFormJson: k,
+      setFormJson: N,
+      setJsonImport: V
+    }), (e, o) => {
+      const v = s("a-layout-sider"), H = s("a-layout-header"), p = s("a-layout-content"), h = s("a-layout");
+      return G(), z(h, { class: "main-container full-height" }, {
+        default: n(() => [
+          r(h, null, {
+            default: n(() => [
+              r(v, {
+                width: f.value,
+                class: "side-panel"
+              }, {
+                default: n(() => [
+                  r(Z)
+                ]),
+                _: 1
+              }, 8, ["width"]),
+              r(p, { class: "center-layout-container" }, {
+                default: n(() => [
+                  r(H, { class: "toolbar-header" }, {
+                    default: n(() => [
+                      r(j, {
+                        saveJsonApi: e.saveJsonApi,
+                        "global-dsv": e.globalDsv,
+                        leftWidth: f.value,
+                        "onUpdate:leftWidth": o[0] || (o[0] = (i) => f.value = i),
+                        rightWidth: u.value,
+                        "onUpdate:rightWidth": o[1] || (o[1] = (i) => u.value = i),
+                        ref: "toolbarRef"
+                      }, K({ _: 2 }, [
+                        Q(e.$slots, (i, C) => ({
+                          name: C,
+                          fn: n(() => [
+                            X(e.$slots, C)
+                          ])
+                        }))
+                      ]), 1032, ["saveJsonApi", "global-dsv", "leftWidth", "rightWidth"])
+                    ]),
+                    _: 3
+                  }),
+                  r(p, { class: "form-widget-main" }, {
+                    default: n(() => [
+                      Y("div", ne, [
+                        r(ee, {
+                          "global-dsv": e.globalDsv,
+                          "form-config": t.value.formConfig,
+                          ref_key: "formRef",
+                          ref: g
+                        }, null, 8, ["global-dsv", "form-config"])
                       ])
-                    }))
-                  ]), 1032, ["saveJsonApi", "global-dsv", "leftWidth", "rightWidth"])
+                    ]),
+                    _: 1
+                  })
                 ]),
                 _: 3
-                /* FORWARDED */
               }),
-              t(s, { class: "form-widget-main" }, {
-                default: o(() => [
-                  u("div", y, [
-                    t(e.VFormWidget, {
-                      "global-dsv": d.globalDsv,
-                      "form-config": e.designer.formConfig,
-                      ref: "formRef"
-                    }, null, 8, ["global-dsv", "form-config"])
-                  ])
+              r(v, { width: u.value }, {
+                default: n(() => [
+                  r(O, {
+                    "selected-widget": t.value.selectedWidget,
+                    "onUpdate:selectedWidget": o[2] || (o[2] = (i) => t.value.selectedWidget = i),
+                    "global-dsv": e.globalDsv,
+                    "form-config": t.value.formConfig
+                  }, null, 8, ["selected-widget", "global-dsv", "form-config"])
                 ]),
                 _: 1
-                /* STABLE */
-              })
+              }, 8, ["width"])
             ]),
             _: 3
-            /* FORWARDED */
-          }),
-          t(r, { width: e.rightWidth }, {
-            default: o(() => [
-              t(e.SettingPanel, {
-                "selected-widget": e.designer.selectedWidget,
-                "onUpdate:selectedWidget": l[2] || (l[2] = (n) => e.designer.selectedWidget = n),
-                "global-dsv": d.globalDsv,
-                "form-config": e.designer.formConfig
-              }, null, 8, ["selected-widget", "global-dsv", "form-config"])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["width"])
+          })
         ]),
         _: 3
-        /* FORWARDED */
-      })
-    ]),
-    _: 3
-    /* FORWARDED */
-  });
-}
-const J = /* @__PURE__ */ w(m, [["render", x], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/index.vue"]]);
+      });
+    };
+  }
+});
 export {
-  J as default
+  he as default
 };

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

@@ -0,0 +1,5 @@
+import o from "./index.vue.js";
+/* empty css           */
+export {
+  o as default
+};

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

@@ -1,58 +1,80 @@
-import o from "./form-crud-setting.vue2.js";
-import { createElementBlock as r, openBlock as d, Fragment as l, createElementVNode as a, createVNode as i, createCommentVNode as m } from "vue";
-import s from "../../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "t-p-[10px]" };
-function p(g, e, v, t, b, c) {
-  return d(), r(
-    l,
-    null,
-    [
-      a("div", f, [
-        i(t.HttpEditor, {
-          label: t.i18nt("designer.hint.表单编辑api"),
-          buttonName: t.i18nt("designer.setting.edit"),
-          drawerTitle: t.i18nt("表单配置"),
-          optionModel: t.formConfig.serveList.vformUpdate,
-          "onUpdate:optionModel": e[0] || (e[0] = (n) => t.formConfig.serveList.vformUpdate = n)
+import { defineComponent as f, useModel as v, ref as m, reactive as g, watch as b, createElementBlock as C, openBlock as c, Fragment as h, createElementVNode as w, createVNode as d, unref as i } from "vue";
+import p from "../../http-editor/index.vue.js";
+import { HttpEditor as H } from "tmgc2-share";
+import { useI18n as L } from "../../../utils/i18n.js";
+import "lodash-es";
+const M = { class: "t-p-[10px]" }, _ = /* @__PURE__ */ f({
+  inheritAttrs: !1,
+  __name: "form-crud-setting",
+  props: {
+    formConfig: {
+      type: Object,
+      default: () => ({
+        serveList: {
+          vformUpdate: {
+            http: { url: "", method: "get", params: {}, data: {} },
+            dataReqHandlerCode: "",
+            dataHandlerCode: ""
+          },
+          vformDetail: {
+            http: { url: "", method: "get", params: {}, data: {} },
+            dataReqHandlerCode: "",
+            dataHandlerCode: ""
+          },
+          list: []
+        }
+      })
+    },
+    formConfigModifiers: {}
+  },
+  emits: ["update:formConfig"],
+  setup(u) {
+    const { i18nt: a } = L(), o = v(u, "formConfig"), l = m(!1), n = g({
+      index: -1,
+      isNew: !1
+    }), r = m({
+      http: {
+        url: "",
+        method: "get",
+        params: {},
+        data: {}
+      },
+      dataReqHandlerCode: "",
+      dataHandlerCode: ""
+    });
+    return b(l, (s, e) => {
+      var t;
+      if (s === !1 && e === !0) {
+        if (!((t = r.value.http) != null && t.url))
+          return;
+        n.isNew ? (o.value.serveList.list || (o.value.serveList.list = []), o.value.serveList.list.push(r.value)) : n.index > -1 && (o.value.serveList.list[n.index] = r.value);
+      }
+    }), (s, e) => (c(), C(h, null, [
+      w("div", M, [
+        d(p, {
+          label: i(a)("designer.hint.表单编辑api"),
+          buttonName: i(a)("designer.setting.edit"),
+          drawerTitle: i(a)("表单配置"),
+          optionModel: o.value.serveList.vformUpdate,
+          "onUpdate:optionModel": e[0] || (e[0] = (t) => o.value.serveList.vformUpdate = t)
         }, null, 8, ["label", "buttonName", "drawerTitle", "optionModel"]),
-        i(t.HttpEditor, {
-          label: t.i18nt("designer.hint.表单详情API"),
-          buttonName: t.i18nt("designer.setting.edit"),
-          drawerTitle: t.i18nt("表单配置"),
-          optionModel: t.formConfig.serveList.vformDetail
-        }, null, 8, ["label", "buttonName", "drawerTitle", "optionModel"]),
-        m(` <a-form-item label="接口列表">
-            <a-button @click="onAdd" type="primary" class="t-mb-[10px]">新增</a-button>
-            <div v-if="formConfig.serveList.list?.length > 0">
-                <div
-                    v-for="(item, index) in formConfig.serveList.list"
-                    :key="index"
-                    class="t-mb-[10px] t-flex t-items-center"
-                >
-                    <div color="processing" class="t-flex-1">
-                        {{ item.http.url }}
-                    </div>
-                    <a-space>
-                        <a-button type="link" @click="onEdit(item, index)">编辑</a-button>
-                        <a-button type="link" danger>删除</a-button>
-                    </a-space>
-                </div>
-            </div>
-        </a-form-item> `)
+        d(p, {
+          label: i(a)("designer.hint.表单详情API"),
+          buttonName: i(a)("designer.setting.edit"),
+          drawerTitle: i(a)("表单配置"),
+          optionModel: o.value.serveList.vformDetail
+        }, null, 8, ["label", "buttonName", "drawerTitle", "optionModel"])
       ]),
-      i(t.ShareHttpEditor, {
-        "option-model": t.tempEditingData,
-        "onUpdate:optionModel": e[1] || (e[1] = (n) => t.tempEditingData = n),
-        visible: t.showHttpEditor,
-        "onUpdate:visible": e[2] || (e[2] = (n) => t.showHttpEditor = n),
+      d(i(H), {
+        "option-model": r.value,
+        "onUpdate:optionModel": e[1] || (e[1] = (t) => r.value = t),
+        visible: l.value,
+        "onUpdate:visible": e[2] || (e[2] = (t) => l.value = t),
         "drawer-title": "接口配置"
       }, null, 8, ["option-model", "visible"])
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-const w = /* @__PURE__ */ s(o, [["render", p], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/setting-panel/form-crud-setting.vue"]]);
+    ], 64));
+  }
+});
 export {
-  w as default
+  _ as default
 };

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

@@ -1,77 +1,4 @@
-import { defineComponent as c, useModel as h, ref as n, reactive as C, watch as g } from "vue";
-import H from "../../http-editor/index.vue.js";
-import { HttpEditor as _ } from "tmgc2-share";
-import { useI18n as E } from "../../../utils/i18n.js";
-import { cloneDeep as w } from "lodash-es";
-const R = /* @__PURE__ */ c({
-  inheritAttrs: !1,
-  __name: "form-crud-setting",
-  props: {
-    formConfig: {
-      type: Object,
-      default: () => ({
-        serveList: {
-          vformUpdate: {
-            http: { url: "", method: "get", params: {}, data: {} },
-            dataReqHandlerCode: "",
-            dataHandlerCode: ""
-          },
-          vformDetail: {
-            http: { url: "", method: "get", params: {}, data: {} },
-            dataReqHandlerCode: "",
-            dataHandlerCode: ""
-          },
-          list: []
-        }
-      })
-    },
-    formConfigModifiers: {}
-  },
-  emits: ["update:formConfig"],
-  setup(l, { expose: u }) {
-    u();
-    const { i18nt: f } = E(), t = h(l, "formConfig"), o = n(!1), e = C({
-      index: -1,
-      isNew: !1
-    }), a = n({
-      http: {
-        url: "",
-        method: "get",
-        params: {},
-        data: {}
-      },
-      dataReqHandlerCode: "",
-      dataHandlerCode: ""
-    }), p = () => {
-      e.isNew = !0, a.value = {
-        http: {
-          url: "",
-          method: "get",
-          params: {},
-          data: {}
-        },
-        dataReqHandlerCode: "",
-        dataHandlerCode: ""
-      }, o.value = !0;
-    }, m = (r, i) => {
-      e.index = i, e.isNew = !1, a.value = w(r), o.value = !0;
-    }, v = (r) => {
-      t.value.serveList.list.splice(r, 1);
-    };
-    g(o, (r, i) => {
-      var d;
-      if (r === !1 && i === !0) {
-        if (!((d = a.value.http) != null && d.url))
-          return;
-        e.isNew ? (t.value.serveList.list || (t.value.serveList.list = []), t.value.serveList.list.push(a.value)) : e.index > -1 && (t.value.serveList.list[e.index] = a.value);
-      }
-    });
-    const s = { i18nt: f, formConfig: t, showHttpEditor: o, editingState: e, tempEditingData: a, onAdd: p, onEdit: m, onDelete: v, HttpEditor: H, get ShareHttpEditor() {
-      return _;
-    } };
-    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
-  }
-});
+import f from "./form-crud-setting.vue.js";
 export {
-  R as default
+  f as default
 };