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

package/src/components/form-designer/form-widget/container-widget/vf-box-widget.vue.js

@@ -1,165 +1,38 @@
-import { defineAsyncComponent as p, resolveComponent as s, createBlock as o, openBlock as r, withCtx as g, createElementBlock as h, withModifiers as w, normalizeStyle as x, normalizeClass as u, createCommentVNode as b, createVNode as L, mergeProps as C, createElementVNode as y, resolveDynamicComponent as l } from "vue";
-import v from "../../../../utils/i18n.js";
-import R from "../../refMixinDesign.js";
-import D from "../field-widget/index.js";
-import k from "./container-wrapper.vue.js";
-import S from "../../../../lib/vuedraggable/src/vuedraggable.js";
+import o from "./vf-box-widget.vue2.js";
+import { createBlock as i, openBlock as r, normalizeProps as n, guardReactiveProps as a, withCtx as d, createElementBlock as c, normalizeStyle as s, createVNode as f } from "vue";
 /* empty css                   */
-import O from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const _ = {
-  name: "vf-box-widget",
-  componentName: "VfBoxWidget",
-  mixins: [v, R],
-  inject: ["refList"],
-  components: {
-    Draggable: S,
-    ContainerWrapper: k,
-    ...D,
-    VFormRender: p(() => import("../../../form-render/index.vue.js"))
-  },
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-    parentFormRef: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      //
-    };
-  },
-  computed: {
-    selected() {
-      return this.widget.id === this.designer.selectedId;
-    },
-    customClass() {
-      return this.widget.options.customClass || "";
-    },
-    boxStyle() {
-      const e = this.widget.options.boxModel || {}, i = {};
-      return (e.paddingTop !== void 0 || e.paddingRight !== void 0 || e.paddingBottom !== void 0 || e.paddingLeft !== void 0) && (i.padding = `${e.paddingTop || 0}px ${e.paddingRight || 0}px ${e.paddingBottom || 0}px ${e.paddingLeft || 0}px`), (e.marginTop !== void 0 || e.marginRight !== void 0 || e.marginBottom !== void 0 || e.marginLeft !== void 0) && (i.margin = `${e.marginTop || 0}px ${e.marginRight || 0}px ${e.marginBottom || 0}px ${e.marginLeft || 0}px`), e.borderShow ? (i.border = `${e.borderWidth || 1}px ${e.borderStyle || "solid"} ${e.borderColor || "#cccccc"}`, e.borderRadius !== void 0 && (i.borderRadius = `${e.borderRadius}px`)) : i.border = "2px dashed #ccc", e.backgroundColor && (i.backgroundColor = e.backgroundColor), e.borderRadius !== void 0 && !e.borderShow && (i.borderRadius = `${e.borderRadius}px`), e.shadowShow && (i.boxShadow = `${e.shadowOffsetX || 0}px ${e.shadowOffsetY || 2}px ${e.shadowBlur || 4}px ${e.shadowSpread || 0}px ${e.shadowColor || "rgba(0,0,0,0.2)"}`), i;
-    }
-  },
-  created() {
-    this.initRefList(), this.loadFormCode(this.widget.options.formCode);
-  },
-  watch: {
-    "widget.options.formCode"(e) {
-      this.loadFormCode(e);
-    }
-  },
-  methods: {
-    async loadFormCode(e) {
-      if (e && e.length) {
-        const i = await this.$http.get("/api/tmgc2-query/dataQuery/detail/FormDefinitionManagement", {
-          params: { code: e }
-        }).then((t) => t.data.object.frontendDefinition || "{}");
-        this.$refs.dFormRef.setFormJson(JSON.parse(i));
-      }
-    },
-    onDialogDragEnd(e, i) {
-    },
-    onDialogDragAdd(e, i) {
-      const t = e.newIndex;
-      i[t] && this.designer.setSelected(i[t]), this.designer.emitHistoryChange(), this.designer.emitEvent("field-selected", this.widget);
-    },
-    onDialogDragUpdate() {
-      this.designer.emitHistoryChange();
-    },
-    selectWidget(e) {
-      console.log("id: " + e.id), this.designer.setSelected(e);
-    },
-    checkContainerMove(e) {
-      return this.designer.checkWidgetMove(e);
-    },
-    selectParentWidget() {
-      this.parentWidget ? this.designer.setSelected(this.parentWidget) : this.designer.clearSelected();
-    },
-    moveUpWidget() {
-      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
-    },
-    moveDownWidget() {
-      this.designer.moveDownWidget(this.parentList, this.indexOfParentList);
-    },
-    removeWidget() {
-      if (this.parentList) {
-        let e = null;
-        this.parentList.length === 1 ? this.parentWidget && (e = this.parentWidget) : this.parentList.length === 1 + this.indexOfParentList ? e = this.parentList[this.indexOfParentList - 1] : e = this.parentList[this.indexOfParentList + 1], this.$nextTick(() => {
-          this.parentList.splice(this.indexOfParentList, 1), this.designer.setSelected(e), this.designer.emitHistoryChange();
-        });
-      }
-    },
-    getFormRef() {
-      return this.$refs.dFormRef;
-    }
-  }
-}, F = { class: "vf-box-drop-zone" };
-function W(e, i, t, B, P, d) {
-  const m = s("VFormRender"), f = s("draggable"), c = s("container-wrapper");
-  return r(), o(c, {
-    designer: t.designer,
-    widget: t.widget,
-    "parent-widget": t.parentWidget,
-    "parent-list": t.parentList,
-    "index-of-parent-list": t.indexOfParentList
-  }, {
-    default: g(() => [
-      (r(), h("div", {
-        class: u(["box-container", [d.selected ? "selected" : "", d.customClass]]),
-        key: t.widget.id,
-        style: x(d.boxStyle),
-        onClick: i[2] || (i[2] = w((n) => d.selectWidget(t.widget), ["stop"]))
-      }, [
-        t.widget.options.formCode ? (r(), o(m, {
-          key: 0,
-          ref: "dFormRef",
-          "parent-form": t.parentFormRef,
-          "disabled-mode": t.widget.options.disabledMode,
-          "dynamic-creation": !0
-        }, null, 8, ["parent-form", "disabled-mode"])) : b("", !0),
-        L(f, C({
-          list: t.widget.widgetList,
-          "item-key": "id"
-        }, { group: "dragGroup", ghostClass: "ghost", animation: 200 }, {
-          handle: ".drag-handler",
-          onEnd: i[0] || (i[0] = (n) => d.onDialogDragEnd(n, t.widget.widgetList)),
-          onAdd: i[1] || (i[1] = (n) => d.onDialogDragAdd(n, t.widget.widgetList)),
-          onUpdate: d.onDialogDragUpdate,
-          move: d.checkContainerMove
-        }), {
-          item: g(({ element: n, index: a }) => [
-            y("div", F, [
-              n.category === "container" ? (r(), o(l(n.type + "-widget"), {
-                widget: n,
-                designer: t.designer,
-                key: n.id,
-                "parent-list": t.widget.widgetList,
-                "index-of-parent-list": a,
-                "parent-widget": t.widget
-              }, null, 8, ["widget", "designer", "parent-list", "index-of-parent-list", "parent-widget"])) : (r(), o(l(n.type + "-widget"), {
-                field: n,
-                designer: t.designer,
-                key: n.id,
-                "parent-list": t.widget.widgetList,
-                "index-of-parent-list": a,
-                "parent-widget": t.widget,
-                "design-state": !0
-              }, null, 8, ["field", "designer", "parent-list", "index-of-parent-list", "parent-widget"]))
-            ])
-          ]),
-          _: 1
-        }, 16, ["list", "onUpdate", "move"])
-      ], 6))
-    ]),
-    _: 1
-  }, 8, ["designer", "widget", "parent-widget", "parent-list", "index-of-parent-list"]);
+import g from "../../../../../_virtual/_plugin-vue_export-helper.js";
+function l(m, p, t, e, _, w) {
+  return r(), i(
+    e.ContainerWrapper,
+    n(a(e.props)),
+    {
+      default: d(() => [
+        (r(), c(
+          "div",
+          {
+            class: "box-container",
+            key: t.widget.id,
+            style: s(e.boxStyle)
+          },
+          [
+            f(e.RenderDesignerWigetList, {
+              list: t.widget.widgetList || [],
+              parentWidget: t.widget
+            }, null, 8, ["list", "parentWidget"])
+          ],
+          4
+          /* STYLE */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
 }
-const z = /* @__PURE__ */ O(_, [["render", W], ["__scopeId", "data-v-6623c165"]]);
+const W = /* @__PURE__ */ g(o, [["render", l], ["__scopeId", "data-v-739f978f"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/form-widget/container-widget/vf-box-widget.vue"]]);
 export {
-  z as default
+  W as default
 };

package/src/components/form-designer/form-widget/container-widget/vf-box-widget.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent as f, computed as g, watchEffect as s } from "vue";
+import u from "../RenderDesignerWigetList.vue.js";
+import b from "./container-wrapper.vue.js";
+import { useAppRef as x } from "../../useAppRef.js";
+import { useLowcode as c } from "../../../../hooks/useLowcode.js";
+import { ComponentNameEnum as l, ContainerTypeEnum as y } from "../../../../constants/WidgetTypeEnum.js";
+const L = /* @__PURE__ */ f({
+  name: y.VfBoxWidget,
+  componentName: l.VfBoxWidget,
+  __name: "vf-box-widget",
+  props: {
+    widget: { type: Object, required: !0 },
+    field: { type: Object, required: !0 },
+    parentWidget: { type: [Object, null], required: !0 },
+    parentList: { type: Array, required: !0 },
+    indexOfParentList: { type: Number, required: !1 },
+    subFormRowIndex: { type: Number, required: !1 },
+    subFormRowId: { type: String, required: !1 }
+  },
+  setup(p, { expose: m }) {
+    const o = p, { initRefList: r } = x(), a = g(() => {
+      const e = o.widget.options.boxModel || {}, t = {};
+      return e.borderShow && (t.borderRadius = `${e.borderRadius}px`, t.border = `${e.borderStyle} ${e.borderWidth}px ${e.borderColor}`), (e.paddingTop !== void 0 || e.paddingRight !== void 0 || e.paddingBottom !== void 0 || e.paddingLeft !== void 0) && (t.padding = `${e.paddingTop || 0}px ${e.paddingRight || 0}px ${e.paddingBottom || 0}px ${e.paddingLeft || 0}px`), (e.marginTop !== void 0 || e.marginRight !== void 0 || e.marginBottom !== void 0 || e.marginLeft !== void 0) && (t.margin = `${e.marginTop || 0}px ${e.marginRight || 0}px ${e.marginBottom || 0}px ${e.marginLeft || 0}px`), t;
+    });
+    r();
+    const { vfdRef: i, getComponentJson: d } = c({
+      formCode: o.widget.options.formCode
+    });
+    s(() => {
+      o.widget.options.formCode && d([], o.widget.options.formCode);
+    }), m({
+      getFormRef() {
+        return i.value;
+      }
+    });
+    const n = { props: o, initRefList: r, boxStyle: a, vfdRef: i, getComponentJson: d, RenderDesignerWigetList: u, ContainerWrapper: b };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  L as default
+};

package/src/components/form-designer/form-widget/container-widget/vf-collapse-widget.vue.js

@@ -1,117 +1,65 @@
-import y from "./vf-collapse-widget.vue2.js";
-import { resolveComponent as s, createBlock as o, openBlock as d, withCtx as l, createElementBlock as C, withModifiers as _, normalizeClass as c, createVNode as w, withDirectives as k, createElementVNode as r, normalizeStyle as S, mergeProps as p, resolveDynamicComponent as g, vShow as u } from "vue";
+import r from "./vf-collapse-widget.vue2.js";
+import { createBlock as n, openBlock as l, normalizeProps as s, guardReactiveProps as g, withCtx as o, createElementVNode as a, createVNode as d, withDirectives as c, normalizeStyle as p, vShow as f } from "vue";
 /* empty css                        */
 /* empty css                        */
-import L from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const x = { class: "collapse-right" }, D = { class: "form-widget-list" }, U = { class: "form-widget-list" };
-function A(i, n, e, R, B, f) {
-  const m = s("draggable"), h = s("TpfCollapse"), v = s("container-wrapper");
-  return d(), o(v, {
-    designer: e.designer,
-    widget: e.widget,
-    "parent-widget": e.parentWidget,
-    "parent-list": e.parentList,
-    "index-of-parent-list": e.indexOfParentList
-  }, {
-    default: l(() => [
-      (d(), C("div", {
-        key: e.widget.id,
-        class: c(["collapse-container data-table-container", { selected: f.selected }]),
-        onClick: n[2] || (n[2] = _((t) => f.selectWidget(e.widget), ["stop"]))
-      }, [
-        w(h, {
-          title: e.widget.options.title
-        }, {
-          right: l(() => [
-            r("div", x, [
-              w(m, p({
-                list: e.widget.headerRightSlotList,
-                "item-key": "id"
-              }, { group: "dragGroup", ghostClass: "ghost", animation: 200 }, {
-                handle: ".drag-handler",
-                tag: "transition-group",
-                "component-data": { name: "fade" },
-                onAdd: n[0] || (n[0] = (t) => i.onContainerDragAdd(t, e.widget.headerRightSlotList)),
-                onUpdate: i.onContainerDragUpdate,
-                move: i.checkContainerMove
-              }), {
-                item: l(({ element: t, index: a }) => [
-                  r("div", D, [
-                    t.category === "container" ? (d(), o(g(t.type + "-widget"), {
-                      widget: t,
-                      designer: e.designer,
-                      key: t.id,
-                      "parent-list": e.widget.headerRightSlotList,
-                      "index-of-parent-list": a,
-                      "parent-widget": e.widget
-                    }, null, 8, ["widget", "designer", "parent-list", "index-of-parent-list", "parent-widget"])) : (d(), o(g(t.type + "-widget"), {
-                      field: t,
-                      designer: e.designer,
-                      key: t.id,
-                      "parent-list": e.widget.headerRightSlotList,
-                      "index-of-parent-list": a,
-                      "parent-widget": e.widget,
-                      "design-state": !0
-                    }, null, 8, ["field", "designer", "parent-list", "index-of-parent-list", "parent-widget"]))
-                  ])
-                ]),
-                _: 1
-              }, 16, ["list", "onUpdate", "move"])
-            ])
-          ]),
-          default: l(() => [
-            k(r("div", {
-              class: c(["tpf-collapse-content"]),
-              style: S({
-                height: e.widget.options.height || "unset",
-                ...JSON.parse(e.widget.options.bodyStyle || "{}")
-              })
-            }, [
-              w(m, p({
-                list: e.widget.defaultSlotsList,
-                "item-key": "id"
-              }, { group: "dragGroup", ghostClass: "ghost", animation: 200 }, {
-                handle: ".drag-handler",
-                tag: "transition-group",
-                "component-data": { name: "fade" },
-                onAdd: n[1] || (n[1] = (t) => i.onContainerDragAdd(t, e.widget.defaultSlotsList)),
-                onUpdate: i.onContainerDragUpdate,
-                move: i.checkContainerMove
-              }), {
-                item: l(({ element: t, index: a }) => [
-                  r("div", U, [
-                    t.category === "container" ? (d(), o(g(t.type + "-widget"), {
-                      widget: t,
-                      designer: e.designer,
-                      key: t.id,
-                      "parent-list": e.widget.defaultSlotsList,
-                      "index-of-parent-list": a,
-                      "parent-widget": e.widget
-                    }, null, 8, ["widget", "designer", "parent-list", "index-of-parent-list", "parent-widget"])) : (d(), o(g(t.type + "-widget"), {
-                      field: t,
-                      designer: e.designer,
-                      key: t.id,
-                      "parent-list": e.widget.defaultSlotsList,
-                      "index-of-parent-list": a,
-                      "parent-widget": e.widget,
-                      "design-state": !0
-                    }, null, 8, ["field", "designer", "parent-list", "index-of-parent-list", "parent-widget"]))
-                  ])
-                ]),
-                _: 1
-              }, 16, ["list", "onUpdate", "move"])
-            ], 4), [
-              [u, !e.widget.options.isCollapse]
-            ])
-          ]),
-          _: 1
-        }, 8, ["title"])
-      ], 2))
-    ]),
-    _: 1
-  }, 8, ["designer", "widget", "parent-widget", "parent-list", "index-of-parent-list"]);
+import _ from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = { class: "collapse-container" }, m = { class: "collapse-right" };
+function w(v, C, t, e, W, D) {
+  return l(), n(
+    e.ContainerWrapper,
+    s(g(e.props)),
+    {
+      default: o(() => [
+        a("div", h, [
+          d(e.TpfCollapse, {
+            title: t.widget.options.title
+          }, {
+            right: o(() => [
+              a("div", m, [
+                d(e.RenderDesignerWigetList, {
+                  list: e.headerRightSlotList,
+                  parentWidget: t.widget,
+                  add: (i) => e.onContainerDragAdd(i, e.headerRightSlotList),
+                  update: e.onContainerDragUpdate
+                }, null, 8, ["list", "parentWidget", "add", "update"])
+              ])
+            ]),
+            default: o(() => [
+              c(a(
+                "div",
+                {
+                  class: "tpf-collapse-content-wrapper",
+                  style: p({
+                    height: t.widget.options.height || "unset"
+                  })
+                },
+                [
+                  d(e.RenderDesignerWigetList, {
+                    list: e.defaultSlotsList,
+                    parentWidget: t.widget,
+                    add: (i) => e.onContainerDragAdd(i, e.defaultSlotsList),
+                    update: e.onContainerDragUpdate
+                  }, null, 8, ["list", "parentWidget", "add", "update"])
+                ],
+                4
+                /* STYLE */
+              ), [
+                [f, !t.widget.options.isCollapse]
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["title"])
+        ])
+      ]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
 }
-const O = /* @__PURE__ */ L(y, [["render", A], ["__scopeId", "data-v-46b90115"]]);
+const k = /* @__PURE__ */ _(r, [["render", w], ["__scopeId", "data-v-a347222d"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/form-widget/container-widget/vf-collapse-widget.vue"]]);
 export {
-  O as default
+  k as default
 };

package/src/components/form-designer/form-widget/container-widget/vf-collapse-widget.vue2.js

@@ -1,128 +1,33 @@
-import { defineAsyncComponent as r } from "vue";
-import i from "./container-wrapper.vue.js";
-import n from "../../../../utils/emitter.js";
-import s from "../../../../utils/i18n.js";
-import a from "../field-widget/index.js";
-import d from "./containerMixin.js";
-import m from "../../refMixinDesign.js";
-import p from "../../../svg-icon/index.vue.js";
-import { TpfCollapse as f } from "tmgc2-share";
-import l from "./grid-widget.vue.js";
-import g from "../../../../lib/vuedraggable/src/vuedraggable.js";
-const D = {
-  name: "VfCollapseWidget",
-  mixins: [s, d, m, n],
-  inject: ["refList"],
-  components: {
-    Draggable: g,
-    ContainerWrapper: i,
-    TpfCollapse: f,
-    SvgIcon: p,
-    gridWidget: l,
-    VFormRender: r(() => import("../../../form-render/index.vue.js")),
-    ...a
-  },
-  data() {
-    return {};
-  },
+import { defineComponent as u, computed as o } from "vue";
+import m from "./container-wrapper.vue.js";
+import { useAppRef as f } from "../../useAppRef.js";
+import { TpfCollapse as l } from "tmgc2-share";
+import c from "../RenderDesignerWigetList.vue.js";
+import { useContainerWidget as g } from "./useContainerWidget.js";
+import { ComponentNameEnum as C, ContainerTypeEnum as y } from "../../../../constants/WidgetTypeEnum.js";
+const W = /* @__PURE__ */ u({
+  name: y.VfCollapseWidget,
+  componentName: C.ContainerWidget,
+  __name: "vf-collapse-widget",
   props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-    subFormRowIndex: {
-      /* 子表单组件行索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormColIndex: {
-      /* 子表单组件列索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormRowId: {
-      /* 子表单组件行Id，唯一id且不可变 */
-      type: String,
-      default: ""
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    formJson: {
-      type: Object
-    },
-    formData: {
-      type: Object,
-      default: () => ({})
-    },
-    optionData: {
-      //prop传入的选项数据
-      type: Object,
-      default: () => ({})
-    },
-    globalDsv: {
-      // 全局数据源变量
-      type: Object,
-      default: () => ({})
-    },
-    parentFormRef: {
-      type: Object,
-      default: null
-    },
-    extraData: {
-      type: Object,
-      default: () => ({})
-    },
-    wrapperId: {
-      type: String,
-      default: null
-    }
-  },
-  created() {
-    this.initRefList();
-  },
-  mounted() {
-    this.loadFormCode(this.widget.options.formCode);
-  },
-  beforeUnmount() {
-  },
-  computed: {
-    rightSlotCss() {
-      return this.widget.options.rightSlotCss || "";
-    },
-    selected() {
-      return this.widget.id === this.designer.selectedId;
-    }
-  },
-  watch: {
-    "widget.options.formCode"(t) {
-      this.loadFormCode(t);
-    }
-  },
-  methods: {
-    selectWidget(t) {
-      this.designer.setSelected(t);
-    },
-    toggleCollapse() {
-      this.widget.options.isCollapse = !this.widget.options.isCollapse;
-    },
-    async loadFormCode(t) {
-      if (t) {
-        const e = await this.$http.get("/api/tmgc2-query/dataQuery/detail/FormDefinitionManagement", {
-          params: {
-            code: t
-          }
-        }).then((o) => o.data.object.frontendDefinition || "{}");
-        this.$refs.dFormRef.setFormJson(JSON.parse(e));
-      }
-    },
-    getFormRef() {
-      return this.$refs.dFormRef;
-    }
+    widget: { type: Object, required: !0 },
+    field: { type: Object, required: !0 },
+    parentWidget: { type: [Object, null], required: !0 },
+    parentList: { type: Array, required: !0 },
+    indexOfParentList: { type: Number, required: !1 },
+    subFormRowIndex: { type: Number, required: !1 },
+    subFormRowId: { type: String, required: !1 }
+  },
+  setup(i, { expose: n }) {
+    n();
+    const e = i, p = o(() => e.widget.defaultSlotsList || []), s = o(() => e.widget.headerRightSlotList || []), { initRefList: t } = f(e), { onContainerDragAdd: a, onContainerDragUpdate: d } = g(e);
+    t();
+    const r = { props: e, defaultSlotsList: p, headerRightSlotList: s, initRefList: t, onContainerDragAdd: a, onContainerDragUpdate: d, ContainerWrapper: m, get TpfCollapse() {
+      return l;
+    }, RenderDesignerWigetList: c };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
-};
+});
 export {
-  D as default
+  W as default
 };