@ibiz-template/vue3-components 0.7.41-alpha.6 → 0.7.41-alpha.60

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.mjs

@@ -0,0 +1,309 @@
+import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, withDirectives, resolveDirective, toRaw, h, ref, reactive, watch, onUnmounted } from 'vue';
+import Sortable from '../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.mjs';
+import { EditFormController, ControlVO, FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
+import { createUUID } from 'qx-util';
+import { useNamespace, useCtx } from '@ibiz-template/vue3-util';
+import { recursiveIterate } from '@ibiz-template/core';
+import { useLoadMore } from '../form-mdctrl-repeater.util.mjs';
+import './repeater-grid2.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
+  name: "IBizRepeaterGrid2",
+  props: {
+    controller: {
+      type: FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    var _a, _b;
+    const ns = useNamespace("repeater-grid2");
+    const formItems = [];
+    const tableRef = ref();
+    const tableKey = ref(createUUID());
+    const chunkSize = ((_a = props.controller.model.ctrlParams) == null ? void 0 : _a.chunkSize) ? Number((_b = props.controller.model.ctrlParams) == null ? void 0 : _b.chunkSize) : 100;
+    const {
+      renderItems,
+      loadMore,
+      updateTotalItems
+    } = useLoadMore(props.controller.value, chunkSize);
+    recursiveIterate(props.controller.repeatedForm, (item) => {
+      var _a2;
+      if (item.detailType === "FORMITEM") {
+        if (((_a2 = item.editor) == null ? void 0 : _a2.editorType) !== "HIDDEN") {
+          formItems.push(item);
+        }
+      }
+    }, {
+      childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
+    });
+    const onSingleValueChange = (value, index) => {
+      const arrData = [...props.controller.value || []];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    const ctx = useCtx();
+    const formControllers = reactive([]);
+    const addFormController = async (data = {}) => {
+      const formC = new EditFormController(props.controller.repeatedForm, props.controller.context, props.controller.params, ctx);
+      formC.state.isSimple = true;
+      await formC.created();
+      formC.setSimpleData(data);
+      formControllers.push(formC);
+      props.controller.setRepeaterController("".concat(formControllers.length - 1), formC);
+      formC.evt.on("onFormDataChange", (event) => {
+        const item = event.data[0];
+        const formData = item instanceof ControlVO ? item.clone() : {
+          ...item
+        };
+        const index = formControllers.indexOf(formC);
+        onSingleValueChange(formData, index);
+      });
+    };
+    watch(() => props.controller.value, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        newVal.forEach((item, index) => {
+          const formC = formControllers[index];
+          if (formC) {
+            const changeVal = item || {};
+            const find = Object.keys(formC.data).find((key) => {
+              return changeVal[key] !== formC.data[key];
+            });
+            if (find) {
+              formC.setSimpleData(changeVal);
+            }
+          } else {
+            addFormController(item);
+          }
+        });
+      }
+      updateTotalItems(newVal || []);
+    }, {
+      immediate: true,
+      deep: true
+    });
+    let sortable;
+    const rowDrop = () => {
+      var _a2, _b2;
+      const wrapper = (_b2 = (_a2 = tableRef.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b2.querySelector(".el-table__body-wrapper tbody");
+      if (!wrapper || !props.controller.enableSort)
+        return;
+      sortable = Sortable.create(wrapper, {
+        animation: 150,
+        handle: ".".concat(ns.e("drag-icon")),
+        ghostClass: "".concat(ns.e("sortable-ghost")),
+        onEnd({
+          newIndex,
+          oldIndex
+        }) {
+          props.controller.dragChange(oldIndex, newIndex);
+          tableKey.value = createUUID();
+        }
+      });
+    };
+    watch(() => tableRef.value, () => {
+      if (!props.controller.enableSort)
+        return;
+      tableRef.value ? rowDrop() : sortable == null ? void 0 : sortable.destroy();
+    });
+    onUnmounted(() => sortable == null ? void 0 : sortable.destroy());
+    const renderRemoveBtn = (index) => {
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return createVNode(resolveComponent("el-popconfirm"), {
+          "title": ibiz.i18n.t("control.form.repeaterGrid.promptInformation"),
+          "confirm-button-text": ibiz.i18n.t("app.confirm"),
+          "cancel-button-text": ibiz.i18n.t("app.cancel"),
+          "onConfirm": () => {
+            props.controller.remove(index);
+            formControllers.splice(index, 1);
+          }
+        }, {
+          reference: () => {
+            return createVNode("ion-icon", {
+              "name": "remove-outline",
+              "title": ibiz.i18n.t("app.delete"),
+              "class": ns.b("remove-btn")
+            }, null);
+          }
+        });
+      }
+      return createVNode("ion-icon", {
+        "name": "remove-outline",
+        "title": ibiz.i18n.t("app.delete"),
+        "class": ns.b("remove-btn"),
+        "onClick": () => {
+          props.controller.remove(index);
+          formControllers.splice(index, 1);
+        }
+      }, null);
+    };
+    return {
+      ns,
+      tableRef,
+      tableKey,
+      formItems,
+      renderItems,
+      formControllers,
+      renderRemoveBtn,
+      loadMore
+    };
+  },
+  render() {
+    var _a;
+    const tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    const heightObject = tableHeight ? {
+      height: tableHeight
+    } : {};
+    const isEmpty = this.renderItems.length === 0;
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-table"), mergeProps({
+      "ref": "tableRef",
+      "key": this.tableKey,
+      "show-header": true,
+      "class": this.ns.e("table"),
+      "data": isEmpty && this.controller.enableCreate ? [{}] : this.renderItems,
+      "cell-class-name": ({
+        columnIndex
+      }) => {
+        const shouldShowIndex = this.controller.enableSort ? columnIndex === 1 : columnIndex === 0;
+        return shouldShowIndex ? this.ns.b("index") : "";
+      }
+    }, heightObject), {
+      default: () => {
+        return [this.controller.enableSort && createVNode(resolveComponent("el-table-column"), {
+          "width": 26,
+          "type": "default"
+        }, {
+          default: () => {
+            if (isEmpty) {
+              return "";
+            }
+            return createVNode("svg", {
+              "viewBox": "0 0 16 16",
+              "xmlns": "http://www.w3.org/2000/svg",
+              "height": "1em",
+              "width": "1em",
+              "class": this.ns.e("drag-icon"),
+              "preserveAspectRatio": "xMidYMid meet",
+              "focusable": "false"
+            }, [createVNode("g", {
+              "stroke-width": "1",
+              "fill-rule": "evenodd"
+            }, [createVNode("g", {
+              "transform": "translate(5 1)",
+              "fill-rule": "nonzero"
+            }, [createVNode("path", {
+              "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+            }, null)])])]);
+          }
+        }), createVNode(resolveComponent("el-table-column"), {
+          "type": "index",
+          "width": 66,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            if (isEmpty) {
+              return "";
+            }
+            const {
+              $index
+            } = opts;
+            return createVNode("span", null, [$index + 1]);
+          }
+        }), this.formItems.length > 0 && this.formItems.map((item) => {
+          const width = item.labelWidth;
+          let widthName = "width";
+          let columnWidth = "";
+          if (typeof width === "number") {
+            if (width === 1) {
+              widthName = "min-width";
+            }
+            columnWidth = "".concat(width, "px");
+          }
+          return createVNode(resolveComponent("el-table-column"), mergeProps({
+            "label": item.caption,
+            "prop": item.id
+          }, {
+            [widthName]: columnWidth
+          }, {
+            "align": "center"
+          }), {
+            default: (opts) => {
+              if (isEmpty) {
+                return "";
+              }
+              const {
+                $index
+              } = opts;
+              const formC = toRaw(this.formControllers[$index]);
+              if (!formC || !formC.state.isLoaded) {
+                return createVNode("div", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+              }
+              const formItemC = formC.formItems.find((x) => x.name === item.id);
+              let editor = null;
+              if (!formItemC.editorProvider) {
+                editor = createVNode(resolveComponent("not-supported-editor"), {
+                  "modelData": item.editor
+                }, null);
+              } else {
+                const component = resolveComponent(formItemC.editorProvider.formEditor);
+                editor = h(component, {
+                  value: formItemC.value,
+                  data: formItemC.data,
+                  controller: formItemC.editor,
+                  disabled: formItemC.state.disabled,
+                  readonly: formItemC.state.readonly,
+                  onChange: (val, name) => {
+                    formItemC.setDataValue(val, name);
+                  }
+                });
+              }
+              return createVNode(resolveComponent("iBizGridEditItem"), {
+                "error": formItemC.state.error,
+                "required": formItemC.state.required
+              }, _isSlot(editor) ? editor : {
+                default: () => [editor]
+              });
+            }
+          });
+        }), (this.controller.enableCreate || this.controller.enableDelete) && createVNode(resolveComponent("el-table-column"), {
+          "width": 80,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            const {
+              $index
+            } = opts;
+            return createVNode("div", {
+              "class": this.ns.b("action-group")
+            }, [this.controller.enableCreate && createVNode("ion-icon", {
+              "name": "add-outline",
+              "title": ibiz.i18n.t("app.add"),
+              "class": this.ns.b("add-btn"),
+              "onClick": () => {
+                this.controller.create(isEmpty ? 0 : $index + 1);
+              }
+            }, null), this.controller.enableDelete && !isEmpty && this.renderRemoveBtn($index)]);
+          }
+        })];
+      },
+      append: () => {
+        return [tableHeight && withDirectives(createVNode("div", {
+          "infinite-scroll-distance": 20
+        }, null), [[resolveDirective("infinite-scroll"), () => this.loadMore()]])];
+      }
+    })]);
+  }
+});
+
+export { RepeaterGrid2 };

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { RepeaterSingleForm } from '../repeater-single-form/repeater-single-form.mjs';
@@ -45,8 +45,12 @@ const RepeaterMultiForm = /* @__PURE__ */ defineComponent({
       "items": items,
       "enableCreate": this.controller.enableCreate,
       "enableDelete": this.controller.enableDelete,
+      "enableSort": this.controller.enableSort,
       "onAddClick": () => this.controller.create(),
-      "onRemoveClick": (_item, index) => this.controller.remove(index)
+      "onRemoveClick": (_item, index) => this.controller.remove(index),
+      "onDragChange": (draggedIndex, targetIndex) => {
+        this.controller.dragChange(draggedIndex, targetIndex);
+      }
     }, {
       item: ({
         data,
@@ -55,6 +59,7 @@ const RepeaterMultiForm = /* @__PURE__ */ defineComponent({
         return createVNode(RepeaterSingleForm, {
           "key": index,
           "data": data,
+          "simpleDataIndex": index,
           "controller": this.controller,
           "onChange": (value) => {
             this.onValueChange(value, index);

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.mjs

@@ -1,5 +1,5 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
-import { FormMDCtrlRepeaterController, ControlVO } from '@ibiz-template/runtime';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { ControlVO, FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
 import { RuntimeError } from '@ibiz-template/core';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './repeater-single-form.css';
@@ -15,6 +15,9 @@ const RepeaterSingleForm = /* @__PURE__ */ defineComponent({
     controller: {
       type: FormMDCtrlRepeaterController,
       required: true
+    },
+    simpleDataIndex: {
+      type: Number
     }
   },
   emits: {
@@ -27,10 +30,16 @@ const RepeaterSingleForm = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("repeater-single-form");
     const onFormDataChange = (event) => {
       const item = event.data[0];
-      const formData = item instanceof ControlVO ? item.clone() : {
+      const formData = item instanceof ControlVO ? item.getOrigin() : {
         ...item
       };
-      emit("change", formData);
+      const cloneData = {};
+      if (formData && Object.keys(formData).length > 0) {
+        Object.keys(formData).forEach((key) => {
+          cloneData[key] = formData[key];
+        });
+      }
+      emit("change", cloneData);
     };
     const onCreated = (event) => {
       emit("created", event);
@@ -51,6 +60,7 @@ const RepeaterSingleForm = /* @__PURE__ */ defineComponent({
       "params": this.controller.params,
       "modelData": this.controller.repeatedForm,
       "isSimple": true,
+      "simpleDataIndex": this.simpleDataIndex,
       "data": this.data,
       "onFormDataChange": this.onFormDataChange,
       "onCreated": this.onCreated

package/es/control/form/form-detail/form-mdctrl/form-mdctrl.mjs

@@ -1,4 +1,4 @@
-import { createVNode, resolveComponent, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import { FormMDCtrlController } from '@ibiz-template/runtime';
 import './form-mdctrl.css';
@@ -21,6 +21,7 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("form-mdctrl");
     useController(props.controller);
     const c = props.controller;
+    const zIndex = props.controller.form.state.zIndex;
     const hasCaption = c.model.showCaption && !!c.model.caption;
     const hasHeader = hasCaption || c.model.uiactionGroup;
     const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
@@ -30,8 +31,9 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
-      hasCaption,
+      zIndex,
       hasHeader,
+      hasCaption,
       isDesignPreview,
       onActionClick
     };
@@ -77,6 +79,7 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
     }, [createVNode("div", {
       "class": this.ns.e("title")
     }, [this.hasCaption ? this.c.model.caption : ""]), model.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
+      "zIndex": this.zIndex,
       "class": this.ns.e("toolbar"),
       "action-details": model.uiactionGroup.uiactionGroupDetails,
       "actions-state": this.controller.state.actionGroupState,

package/es/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.css

@@ -1 +1 @@
-.ibiz-mdctrl-container-item{display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}
+.ibiz-mdctrl-container-item{--ibiz-mdctrl-container-item-drag-chosen-color:rgba(var(--ibiz-grey-1), 1);display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item__left{flex-shrink:0}.ibiz-mdctrl-container-item__right{flex-shrink:0;width:60px;margin-left:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-item__icon-drag{display:flex;align-items:center;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-tight);cursor:move}.ibiz-mdctrl-container-item__icon-drag>svg{display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base);height:var(--ibiz-spacing-base);fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container-item.is-drag-chosen{background-color:var(--ibiz-mdctrl-container-item-drag-chosen-color)}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}

package/es/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.mjs

@@ -1,4 +1,5 @@
-import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, computed, resolveComponent } from 'vue';
+import draggable from 'vuedraggable';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './mdctrl-container.css';
 import { showTitle } from '@ibiz-template/core';
@@ -9,6 +10,9 @@ function _isSlot(s) {
 }
 const MDCtrlContainer = /* @__PURE__ */ defineComponent({
   name: "IBizMDCtrlContainer",
+  components: {
+    draggable
+  },
   props: {
     enableCreate: {
       type: Boolean,
@@ -24,19 +28,55 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     },
     userStyle: {
       type: String
+    },
+    enableSort: {
+      type: Boolean,
+      required: false
     }
   },
   emits: {
     addClick: () => true,
-    removeClick: (_data, _index) => true
+    removeClick: (_data, _index) => true,
+    dragChange: (_draggedIndex, _targetIndex) => true
   },
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const ns = useNamespace("mdctrl-container");
+    const dragClssName = ns.be("item", "icon-drag");
     const showActions = computed(() => {
       return props.enableCreate || props.enableDelete;
     });
+    const dragItems = computed(() => [...props.items]);
+    const handleDragChange = (_params) => {
+      const {
+        moved
+      } = _params;
+      const draggedIndex = moved.oldIndex;
+      const targetIndex = moved.newIndex;
+      emit("dragChange", draggedIndex, targetIndex);
+    };
+    const renderDragBtn = () => {
+      return createVNode("div", {
+        "class": [dragClssName]
+      }, [createVNode("svg", {
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "preserveAspectRatio": "xMidYMid meet",
+        "focusable": "false"
+      }, [createVNode("g", {
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [createVNode("g", {
+        "transform": "translate(5 1)",
+        "fill-rule": "nonzero"
+      }, [createVNode("path", {
+        "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+      }, null)])])])]);
+    };
     const renderAddBtn = () => {
       let _slot;
       return createVNode(resolveComponent("el-button"), {
@@ -48,9 +88,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     };
     const renderRemoveBtn = (item, index) => {
       let _slot3;
-      if (!props.enableDelete) {
+      if (!props.enableDelete)
         return null;
-      }
       if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
         return createVNode(resolveComponent("el-popconfirm"), {
           "title": showTitle(ibiz.i18n.t("control.form.mdCtrlContainer.promptInformation")),
@@ -90,9 +129,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     };
     const renderStyle2RemoveBtn = (item, index) => {
       let _slot4;
-      if (!props.enableDelete) {
+      if (!props.enableDelete)
         return null;
-      }
       if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
         return createVNode(resolveComponent("el-popconfirm"), {
           "title": showTitle(ibiz.i18n.t("control.form.mdCtrlContainer.promptInformation")),
@@ -121,13 +159,31 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
         default: () => [_slot4]
       });
     };
+    const renderDefaultItem = (item, index) => {
+      const formComponent = slots.item ? slots.item({
+        data: item,
+        index
+      }) : createVNode("div", null, [ibiz.i18n.t("control.form.mdCtrlContainer.noSlot")]);
+      return createVNode("div", {
+        "class": ns.b("item")
+      }, [createVNode("div", {
+        "class": ns.be("item", "left")
+      }, [props.enableSort && renderDragBtn()]), formComponent, renderRemoveBtn(item, index), props.enableCreate && createVNode("div", {
+        "class": ns.be("item", "right")
+      }, [index === 0 && renderAddBtn()])]);
+    };
     return {
       ns,
       showActions,
+      dragClssName,
+      dragItems,
+      renderDragBtn,
       renderAddBtn,
+      renderDefaultItem,
       renderRemoveBtn,
       renderStyle2AddBtn,
-      renderStyle2RemoveBtn
+      renderStyle2RemoveBtn,
+      handleDragChange
     };
   },
   render() {
@@ -153,19 +209,26 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
         "class": this.ns.b("style2-item-actions")
       }, [this.renderStyle2AddBtn()])])]);
     }
+    let defaultContent;
+    if ((_b = this.items) == null ? void 0 : _b.length) {
+      defaultContent = this.enableSort ? createVNode(draggable, {
+        "itemKey": "id",
+        "ref": "container",
+        "list": this.dragItems,
+        "class": [this.ns.e("drag")],
+        "handle": ".".concat(this.dragClssName),
+        "onChange": this.handleDragChange,
+        "chosenClass": this.ns.is("drag-chosen", true)
+      }, {
+        item: ({
+          element,
+          index
+        }) => this.renderDefaultItem(element, index)
+      }) : this.items.map((item, index) => this.renderDefaultItem(item, index));
+    }
     return createVNode("div", {
       "class": this.ns.b()
-    }, [((_b = this.items) == null ? void 0 : _b.length) ? this.items.map((item, index) => {
-      const formComponent = this.$slots.item ? this.$slots.item({
-        data: item,
-        index
-      }) : createVNode("div", null, [ibiz.i18n.t("control.form.mdCtrlContainer.noSlot")]);
-      return createVNode("div", {
-        "class": this.ns.b("item")
-      }, [formComponent, this.showActions && createVNode("div", {
-        "class": this.ns.b("item-actions")
-      }, [index === 0 && this.enableCreate && this.renderAddBtn(), this.renderRemoveBtn(item, index)])]);
-    }) : createVNode("div", {
+    }, [defaultContent || createVNode("div", {
       "class": this.ns.b("no-data")
     }, [this.enableCreate && createVNode("div", {
       "class": this.ns.b("item-actions")

package/es/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.mjs

@@ -1,10 +1,10 @@
-import { ref, watch, onMounted, onUnmounted, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, ref, watch, onMounted, onUnmounted } from 'vue';
 import { FormMDCtrlFormController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import draggable from 'vuedraggable';
 import './mdctrl-container2.css';
 import { showTitle } from '@ibiz-template/core';
-import { dragIcon, removeIcon, addIcon, leftArrowIcon, rightArrowIcon } from './icon/index.mjs';
+import { addIcon, leftArrowIcon, rightArrowIcon, dragIcon, removeIcon } from './icon/index.mjs';
 
 "use strict";
 const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({

package/es/control/form/form-detail/form-page/form-page-item/form-page.item.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, withDirectives, createVNode, resolveComponent, resolveDirective } from 'vue';
 import { FormPageController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 
@@ -37,7 +37,7 @@ const IBizFormPageItem = /* @__PURE__ */ defineComponent({
         };
       }
     });
-    return createVNode(resolveComponent("iBizRow"), {
+    return withDirectives(createVNode(resolveComponent("iBizRow"), {
       "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass],
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
@@ -53,7 +53,7 @@ const IBizFormPageItem = /* @__PURE__ */ defineComponent({
       });
     })) ? _slot : {
       default: () => [_slot]
-    });
+    }), [[resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

package/es/control/form/form-detail/form-page/form-page.mjs

@@ -1,4 +1,4 @@
-import { isVNode, createVNode, resolveComponent, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-page.css';
 

package/es/control/form/form-detail/form-rawitem/form-rawitem.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, computed, createVNode, resolveComponent, watch, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { FormRawItemController } from '@ibiz-template/runtime';
 import './form-rawitem.css';

package/es/control/form/form-detail/form-tab-page/form-tab-page.mjs

@@ -1,4 +1,4 @@
-import { isVNode, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, withDirectives, createVNode, resolveComponent, resolveDirective } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import './form-tab-page.css';
 import { FormTabPageController } from '@ibiz-template/runtime';
@@ -30,7 +30,7 @@ const FormTabPage = /* @__PURE__ */ defineComponent({
     var _a, _b;
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
-    return createVNode(resolveComponent("iBizRow"), {
+    return withDirectives(createVNode(resolveComponent("iBizRow"), {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
       "layout": this.modelData.layout,
       "onClick": (event) => this.controller.onClick(event)
@@ -48,7 +48,7 @@ const FormTabPage = /* @__PURE__ */ defineComponent({
       });
     })) ? _slot : {
       default: () => [_slot]
-    });
+    }), [[resolveDirective("loading"), this.controller.state.loading]]);
   }
 });