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

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

@@ -1,13 +1,21 @@
-import { defineAsyncComponent as r } from "vue";
-import { getFileName as m } from "../../../../utils/getFileName.js";
-const i = /* @__PURE__ */ Object.assign({ "./container-wrapper.vue": () => import("./container-wrapper.vue.js"), "./data-table-widget.vue": () => import("./data-table-widget.vue.js"), "./grid-col-widget.vue": () => import("./grid-col-widget.vue.js"), "./grid-sub-form-widget.vue": () => import("./grid-sub-form-widget.vue.js"), "./grid-widget.vue": () => import("./grid-widget.vue.js"), "./sub-form-widget.vue": () => import("./sub-form-widget.vue.js"), "./tab-widget.vue": () => import("./tab-widget.vue.js"), "./table-cell-widget.vue": () => import("./table-cell-widget.vue.js"), "./table-widget.vue": () => import("./table-widget.vue.js"), "./vf-box-item.vue": () => import("./vf-box-item.vue.js"), "./vf-box-widget.vue": () => import("./vf-box-widget.vue.js"), "./vf-collapse-widget.vue": () => import("./vf-collapse-widget.vue.js"), "./vf-dialog-widget.vue": () => import("./vf-dialog-widget.vue.js"), "./vf-drawer-widget.vue": () => import("./vf-drawer-widget.vue.js") }), g = {
-  install(o) {
-    for (const e in i) {
-      const t = m(e);
-      console.log(t), o.component(t, r(i[e]));
-    }
-  }
+import { ContainerTypeEnum as i } from "../../../../constants/WidgetTypeEnum.js";
+import { defineAsyncComponent as o } from "vue";
+const e = {
+  [i.GridColWidget]: o(() => import("./grid-col-widget.vue.js")),
+  [i.grid]: o(() => import("./grid-widget.vue.js")),
+  [i.DataTable]: o(() => import("./data-table-widget.vue.js")),
+  [i.GridSubFormWidget]: o(
+    () => import("./grid-sub-form-widget.vue.js")
+  ),
+  [i.Tab]: o(() => import("./tab-widget.vue.js")),
+  [i.VfCollapseWidget]: o(
+    () => import("./vf-collapse-widget.vue.js")
+  ),
+  [i.VfDialogWidget]: o(
+    () => import("./vf-dialog-widget.vue.js")
+  ),
+  [i.VfBoxWidget]: o(() => import("./vf-box-widget.vue.js"))
 };
 export {
-  g as default
+  e as RenderDesginWidgetList
 };

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

@@ -1,153 +1,66 @@
-import _ from "../../../../utils/i18n.js";
-import y from "./containerMixin.js";
-import v from "./container-wrapper.vue.js";
-import x from "../field-widget/index.js";
-import T from "../../refMixinDesign.js";
-import L from "../../../../lib/vuedraggable/src/vuedraggable.js";
-import { resolveComponent as s, createBlock as l, openBlock as r, withCtx as c, createElementBlock as p, withModifiers as w, normalizeClass as F, createVNode as f, Fragment as O, renderList as M, mergeProps as B, createElementVNode as P, resolveDynamicComponent as u } from "vue";
+import m from "./tab-widget.vue2.js";
+import { resolveComponent as r, createBlock as s, openBlock as n, normalizeProps as p, guardReactiveProps as _, withCtx as o, createElementBlock as c, createVNode as g, Fragment as w, renderList as f, withModifiers as v, createElementVNode as u } from "vue";
 /* empty css                */
-import D from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const N = {
-  name: "tab-widget",
-  componentName: "ContainerWidget",
-  mixins: [_, y, T],
-  inject: ["refList"],
-  components: {
-    Draggable: L,
-    ContainerWrapper: v,
-    ...x
-  },
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-    designState: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  data() {
-    return {
-      //
-    };
-  },
-  computed: {
-    selected() {
-      return this.widget.id === this.designer.selectedId;
-    },
-    customClass() {
-      return this.widget.options.customClass || "";
-    }
-  },
-  watch: {
-    //
-  },
-  created() {
-    this.initRefList(), this.handleOnCreated();
-  },
-  mounted() {
-    this.handleOnMounted();
-  },
-  methods: {
-    handleOnCreated() {
-      this.widget.options.onCreated && new Function(this.widget.options.onCreated).call(this);
-    },
-    handleOnMounted() {
-      this.designState || this.widget.options.onMounted && new Function(this.widget.options.onMounted).call(this);
-    },
-    changeCurrentTab(e) {
-      var t, a;
-      const n = ((a = (t = this.widget.tabs[e]) == null ? void 0 : t.options) == null ? void 0 : a.label) || "";
-      this.onTabClick(n), this.widget.options.activeTab = n;
-    },
-    onTabClick(e) {
-      const n = this.widget.tabs.findIndex((d) => d.options.label === e), t = e;
-      if (this.widget.tabs.forEach((d) => {
-        d.options.active = d.options.name === t;
-      }), this.designState)
-        return;
-      const a = this.widget.options.onTabClick;
-      a && new Function("tab", "index", a).call(this, t, n);
-    }
-  }
-}, j = { class: "form-widget-list" };
-function A(e, n, t, a, d, g) {
-  const b = s("draggable"), h = s("a-tab-pane"), C = s("a-tabs"), k = s("container-wrapper");
-  return r(), l(k, {
-    designer: t.designer,
-    widget: t.widget,
-    "parent-widget": t.parentWidget,
-    "parent-list": t.parentList,
-    "index-of-parent-list": t.indexOfParentList
-  }, {
-    default: c(() => [
-      (r(), p("div", {
-        key: t.widget.id,
-        class: F(["tab-container", { selected: g.selected }]),
-        onClick: n[2] || (n[2] = w((o) => e.selectWidget(t.widget), ["stop"]))
-      }, [
-        f(C, {
-          type: t.widget.options.type,
-          tabBarGutter: t.widget.options.tabBarGutter,
-          tabPosition: t.widget.options.tabPosition,
-          activeKey: t.widget.options.activeTab,
-          "onUpdate:activeKey": n[1] || (n[1] = (o) => t.widget.options.activeTab = o),
-          onTabClick: g.onTabClick
-        }, {
-          default: c(() => [
-            (r(!0), p(O, null, M(t.widget.tabs, (o) => (r(), l(h, {
-              tab: o.options.label,
-              key: o.options.label,
-              onClick: n[0] || (n[0] = w((i) => e.selectWidget(t.widget), ["stop"]))
-            }, {
-              default: c(() => [
-                f(b, B({
-                  list: o.widgetList,
-                  "item-key": "id"
-                }, { ref_for: !0 }, { group: "dragGroup", ghostClass: "ghost", animation: 200 }, {
-                  handle: ".drag-handler",
-                  tag: "transition-group",
-                  "component-data": { name: "fade" },
-                  onAdd: (i) => e.onContainerDragAdd(i, o.widgetList),
-                  onUpdate: e.onContainerDragUpdate,
-                  move: e.checkContainerMove
-                }), {
-                  item: c(({ element: i, index: m }) => [
-                    P("div", j, [
-                      i.category === "container" ? (r(), l(u(i.type + "-widget"), {
-                        widget: i,
-                        designer: t.designer,
-                        key: i.id,
-                        "parent-list": o.widgetList,
-                        "index-of-parent-list": m,
-                        "parent-widget": t.widget
-                      }, null, 8, ["widget", "designer", "parent-list", "index-of-parent-list", "parent-widget"])) : (r(), l(u(i.type + "-widget"), {
-                        field: i,
-                        designer: t.designer,
-                        key: i.id,
-                        "parent-list": o.widgetList,
-                        "index-of-parent-list": m,
-                        "parent-widget": t.widget,
-                        "design-state": !0
-                      }, null, 8, ["field", "designer", "parent-list", "index-of-parent-list", "parent-widget"]))
+import k from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const y = { class: "tab-content-wrapper" };
+function C(B, a, t, e, W, P) {
+  const l = r("a-tab-pane"), b = r("a-tabs");
+  return n(), s(
+    e.ContainerWrapper,
+    p(_(e.props)),
+    {
+      default: o(() => [
+        (n(), c("div", {
+          key: t.widget.id,
+          class: "tab-container container-design-widget"
+        }, [
+          g(b, {
+            type: t.widget.options.type,
+            tabBarGutter: t.widget.options.tabBarGutter,
+            tabPosition: t.widget.options.tabPosition,
+            activeKey: t.widget.options.activeTab,
+            "onUpdate:activeKey": a[1] || (a[1] = (i) => t.widget.options.activeTab = i),
+            onTabClick: e.onTabClick
+          }, {
+            default: o(() => [
+              (n(!0), c(
+                w,
+                null,
+                f(t.widget.tabs, (i) => (n(), s(l, {
+                  tab: i.options.label,
+                  key: i.options.label,
+                  onClick: a[0] || (a[0] = v((d) => e.selectWidget(t.widget), ["stop"]))
+                }, {
+                  default: o(() => [
+                    u("div", y, [
+                      g(e.RenderDesignerWigetList, {
+                        list: i.widgetList || [],
+                        parentWidget: t.widget,
+                        add: (d) => e.onContainerDragAdd(d, i.widgetList),
+                        update: e.onContainerDragUpdate
+                      }, null, 8, ["list", "parentWidget", "add", "update"])
                     ])
                   ]),
                   _: 2
-                }, 1040, ["list", "onAdd", "onUpdate", "move"])
-              ]),
-              _: 2
-            }, 1032, ["tab"]))), 128))
-          ]),
-          _: 1
-        }, 8, ["type", "tabBarGutter", "tabPosition", "activeKey", "onTabClick"])
-      ], 2))
-    ]),
-    _: 1
-  }, 8, ["designer", "widget", "parent-widget", "parent-list", "index-of-parent-list"]);
+                  /* DYNAMIC */
+                }, 1032, ["tab"]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["type", "tabBarGutter", "tabPosition", "activeKey"])
+        ]))
+      ]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
 }
-const W = /* @__PURE__ */ D(N, [["render", A], ["__scopeId", "data-v-2e96c388"]]);
+const G = /* @__PURE__ */ k(m, [["render", C], ["__scopeId", "data-v-1ba2dfe0"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/form-widget/container-widget/tab-widget.vue"]]);
 export {
-  W as default
+  G as default
 };

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

@@ -0,0 +1,32 @@
+import { defineComponent as m } from "vue";
+import d from "./container-wrapper.vue.js";
+import f from "../RenderDesignerWigetList.vue.js";
+import { useContainerWidget as c } from "./useContainerWidget.js";
+import { useAppRef as b } from "../../useAppRef.js";
+import { ComponentNameEnum as g, ContainerTypeEnum as l } from "../../../../constants/WidgetTypeEnum.js";
+const O = /* @__PURE__ */ m({
+  name: l.Tab,
+  componentName: g.ContainerWidget,
+  __name: "tab-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(n, { expose: i }) {
+    i();
+    const e = n, { initRefList: t } = b(e), { selectWidget: o, onContainerDragAdd: p, onContainerDragUpdate: a } = c(e), s = (u) => {
+      e.widget.options.activeTab = u;
+    };
+    t();
+    const r = { props: e, initRefList: t, selectWidget: o, onContainerDragAdd: p, onContainerDragUpdate: a, onTabClick: s, ContainerWrapper: d, RenderDesignerWigetList: f };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+  }
+});
+export {
+  O as default
+};

package/src/components/form-designer/form-widget/container-widget/useContainerWidget.js

@@ -0,0 +1,58 @@
+import { inject as a, ref as p, computed as r } from "vue";
+function O(d) {
+  const { widget: s, parentWidget: t, indexOfParentList: u } = d, c = a("designState", !0), n = a("designer", p({})), v = r(() => {
+    var e;
+    return c && ((e = n.value) == null ? void 0 : e.selectedId) === (s == null ? void 0 : s.id);
+  }), f = (e, i) => {
+    const o = e.newIndex;
+    i[o] && n.value.setSelected(i[o]), n.value.emitHistoryChange(), n.value.emitEvent("field-selected", s);
+  }, g = () => {
+    n.value.emitHistoryChange();
+  }, m = (e) => n.value.checkWidgetMove(e), C = (e) => {
+    c && n.value.setSelected(e);
+  }, h = () => {
+    t ? n.value.setSelected(t) : n.value.clearSelected();
+  }, w = () => {
+    t != null && t.widgetList && (n.value.moveUpWidget(t.widgetList || [], u), n.value.emitHistoryChange());
+  }, y = () => {
+    t != null && t.widgetList && (n.value.moveDownWidget(t.widgetList || [], u), n.value.emitHistoryChange());
+  }, S = (e) => {
+    if (!(t != null && t.widgetList))
+      return;
+    const i = n.value.cloneContainer(e);
+    i && (t.widgetList.splice(t.widgetList.indexOf(e) + 1, 0, i), n.value.setSelected(i), n.value.emitHistoryChange());
+  }, L = () => {
+    let e = t == null ? void 0 : t.widgetList;
+    const i = t == null ? void 0 : t.type;
+    if (i === "grid" && (e = t.cols || []), i === "vf-collapse" && (e = t.defaultSlotsList || []), !Array.isArray(e) || e.length === 0)
+      return;
+    const o = e.indexOf(s);
+    if (o === -1)
+      return;
+    let l = null;
+    e.length === 1 ? l = t || null : o === e.length - 1 ? l = e[o - 1] || null : l = e[o + 1] || null, e.splice(o, 1), l ? n.value.setSelected(l) : n.value.clearSelected(), n.value.emitHistoryChange();
+  }, x = (e, i) => {
+    s.options.hasOwnProperty(e) && (s.options[e] = i);
+  };
+  return {
+    designState: c,
+    selected: v,
+    formConfig: r(() => n.value.formConfig),
+    customClass: r(
+      () => s.options.customClass ? s.options.customClass.join(" ") : ""
+    ),
+    onContainerDragAdd: f,
+    onContainerDragUpdate: g,
+    checkContainerMove: m,
+    selectWidget: C,
+    selectParentWidget: h,
+    moveUpWidget: w,
+    moveDownWidget: y,
+    cloneContainer: S,
+    removeWidget: L,
+    setWidgetOption: x
+  };
+}
+export {
+  O as useContainerWidget
+};

package/src/components/form-designer/form-widget/container-widget/useTableWidget.js

@@ -0,0 +1,180 @@
+import { inject as A, ref as C, computed as c, h as H } from "vue";
+import { omit as N, cloneDeep as g } from "lodash-es";
+import V from "../../../public/ActionButtonListRender.vue.js";
+import { useI18n as q } from "../../../../utils/i18n.js";
+import { useExecFunction as L, tranformAntTableColumnToVxetableColumn as K, tranformAntSizzVxetableSize as j } from "tmgc2-share";
+import { useDataHttp as _ } from "../../../../hooks/useDataHttp.js";
+function nt({ props: l, fieldModel: i }) {
+  const w = A("designState", !1), d = C(), h = C(!1), { widget: n } = l, { i18nt: S } = q(), { executeFunction: u, context: D } = L(), { loadataSource: T, setPagination: f, getPagination: p, pagintion: v } = _({
+    props: l
+  }), y = c(() => {
+    const t = [], e = (n == null ? void 0 : n.options) || {}, { rowSelection: o, showIndex: a, tableColumns: s = [] } = (n == null ? void 0 : n.options) ?? {};
+    o != null && o.hasRowSelection && t.push({
+      title: o.columnTitle,
+      width: o.columnWidth,
+      align: "left",
+      fixed: "left",
+      dataIndex: "checkbox",
+      type: "checkbox"
+    }), a && t.push({
+      title: S("designer.setting.seq"),
+      align: "left",
+      width: 90,
+      fixed: "left",
+      maxWidth: 100,
+      dataIndex: "seq",
+      resizable: !0,
+      type: "seq"
+    });
+    const m = s.filter((r) => r.show).map((r) => ({
+      ...r,
+      ...R(r)
+    })), x = [];
+    if (e.showButtonsColumn) {
+      const r = e.operationButtons ?? [];
+      x.push({
+        fixed: "right",
+        align: "center",
+        title: e.buttonsColumnTitle,
+        width: e.buttonsColumnWidth,
+        slots: {
+          default: (E) => H(V, {
+            buttonList: r,
+            flex: "center",
+            scope: E,
+            ctx: D.value
+          })
+        }
+      });
+    }
+    let I = [...t, ...m, ...x];
+    return K(I);
+  }), R = (t) => {
+    const e = N(t, ["customRender"]), o = t.customRender;
+    return t.minWidth = 50, t.maxWidth = 1200, t.isAutoWidth ? (t.width = null, delete t.width) : t.width = isNaN(Number(t.width)) ? t.width : Number(t.width), o ? {
+      ...e,
+      slots: {
+        default(a) {
+          return u({
+            source: l.field.options.name,
+            functionBody: o,
+            params: {
+              index: a.rowIndex,
+              record: a.row,
+              ...a
+            },
+            errorCallback: (s) => {
+              console.error("Custom render error:", s);
+            }
+          });
+        }
+      }
+    } : t;
+  }, k = c(() => n.options.tableWidth), z = c(() => n.options.tableSize), W = () => {
+    b();
+  }, B = c(() => {
+    const {
+      tableSize: t,
+      rowKey: e,
+      tableHeight: o = 300,
+      border: a = !1,
+      lineHeight: s = 50,
+      colorRow: m = !1
+    } = n.options;
+    return {
+      id: n.id,
+      showPagination: n.options.showPagination,
+      size: j(t),
+      height: o,
+      border: a ?? !1,
+      data: i.value || [],
+      columns: y.value,
+      sortConfig: {
+        trigger: "cell",
+        remote: !0,
+        orders: ["ascend", "descend", null]
+      },
+      rowConfig: {
+        keyField: e,
+        isCurrent: m,
+        isHover: !0
+      },
+      cellConfig: {
+        height: s
+      }
+    };
+  }), P = (t) => {
+    d.value = t;
+  }, b = async () => {
+    var t;
+    if (l.field.options.dsEnabled) {
+      h.value = !0;
+      try {
+        const e = await T(), o = e.list || [];
+        w ? await ((t = d.value) == null ? void 0 : t.loadData(o)) : i.value = g(o || []), f(e);
+      } catch (e) {
+        console.error(e);
+      }
+    } else
+      i.value = n.options.dataSource || [];
+    h.value = !1;
+  }, F = ({ row: t, $event: e }, o) => {
+    u({
+      functionBody: n.options.customRow[o],
+      params: [t, e],
+      keys: ["record", "event"]
+    });
+  };
+  return {
+    onCheckboxChange: (t) => {
+      u({
+        functionBody: n.options.rowSelection.onChange,
+        keys: ["selectedRowKeys", "selectedRows"],
+        params: t
+      });
+    },
+    tableDefinExpoed: {
+      insertTableValue: (t) => {
+        i.value.push(g(t));
+      },
+      setPagination: f,
+      getDataSource: () => i.value,
+      getPagination: p
+    },
+    onSortChange: W,
+    pagintion: v,
+    setPagination: f,
+    getPagination: p,
+    handleTableChange: (t, e, o, a) => {
+      const s = n.options.onTableChange;
+      s && u({
+        functionBody: s,
+        params: {
+          pagination: t,
+          filters: e,
+          sorter: o,
+          currentDataSource: a
+        },
+        keys: ["pagination", "filters", "sorter", "currentDataSource"]
+      });
+    },
+    setTableData: (t) => {
+      i.value = g(t);
+    },
+    loadDataTableDataSource: () => {
+      b();
+    },
+    showPagination: c(() => !!l.field.options.showPagination),
+    onRunEvent: F,
+    isLoading: h,
+    initTableSoureData: b,
+    setTableRef: P,
+    tableSize: z,
+    tableWidth: k,
+    tableProps: B,
+    tableRef: d
+  };
+}
+export {
+  nt as useTableWidget
+};