@ibiz-template/vue3-components 0.7.41-alpha.3 → 0.7.41-alpha.30

package/es/control/form/edit-form/edit-form.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, watch, reactive, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, ref, watch, reactive } from 'vue';
 import { EditFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { debounce } from 'lodash-es';
@@ -60,6 +60,20 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
     loadDefault: {
       type: Boolean,
       default: true
+    },
+    /**
+     * @description 简单模式下传入的数据索引
+     */
+    simpleDataIndex: {
+      type: Number,
+      required: false
+    },
+    /**
+     * @description 多数据部件表单模式下传入的表单索引
+     */
+    mdCtrlFormIndex: {
+      type: Number,
+      required: false
     }
   },
   setup(props) {
@@ -71,6 +85,9 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
     const anchorList = ref([]);
     const anchorTargetRef = ref();
     if (props.isSimple) {
+      if (props.simpleDataIndex || props.simpleDataIndex === 0) {
+        c.setSimpleDataIndex(props.simpleDataIndex);
+      }
       c.evt.on("onMounted", () => {
         c.setSimpleData(props.data || {});
       });
@@ -86,6 +103,9 @@ const EditFormControl = /* @__PURE__ */ defineComponent({
         deep: true
       });
     }
+    if (props.mdCtrlFormIndex || props.mdCtrlFormIndex === 0) {
+      c.setMdCtrlFormIndex(props.mdCtrlFormIndex);
+    }
     c.evt.on("onCreated", () => {
       const keys = Object.keys(c.details);
       keys.forEach((key) => {

package/es/control/form/edit-form/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { EditFormProvider } from './edit-form.provider.mjs';
 import { EditFormControl } from './edit-form.mjs';

package/es/control/form/form/form.mjs

@@ -1,6 +1,6 @@
-import { isVNode, renderSlot, createVNode, resolveComponent, h, defineComponent } from 'vue';
-import { ScriptFactory, findChildFormDetails, ControlType } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { isVNode, defineComponent, createVNode, resolveComponent, renderSlot, h } from 'vue';
+import { ControlType, ScriptFactory, findChildFormDetails } from '@ibiz-template/runtime';
+import { useNamespace, useControlPopoverzIndex } from '@ibiz-template/vue3-util';
 import './form.css';
 
 "use strict";
@@ -23,6 +23,7 @@ const FormControl = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("control-form");
     const c = props.controller;
+    useControlPopoverzIndex(c);
     const slotProps = {
       form: c
     };

package/es/control/form/form/index.mjs

@@ -11,6 +11,7 @@ import { IBizFormRawItem } from '../form-detail/form-rawitem/index.mjs';
 import { IBizFormTabPanel } from '../form-detail/form-tab-panel/index.mjs';
 import { IBizFormTabPage } from '../form-detail/form-tab-page/index.mjs';
 import { IBizFormButtonList } from '../form-detail/form-button-list/index.mjs';
+import { IBizFormIFrame } from '../form-detail/form-iframe/index.mjs';
 
 "use strict";
 const IBizFormControl = withInstall(FormControl, function(v) {
@@ -25,6 +26,7 @@ const IBizFormControl = withInstall(FormControl, function(v) {
   v.use(IBizFormTabPanel);
   v.use(IBizFormTabPage);
   v.use(IBizFormButtonList);
+  v.use(IBizFormIFrame);
 });
 
 export { IBizFormControl, IBizFormControl as default };

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

@@ -1,4 +1,4 @@
-import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent, computed } from 'vue';
 import { FormButtonController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';

package/es/control/form/form-detail/form-button-list/form-button-list.mjs

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

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

@@ -1,4 +1,4 @@
-import { createVNode, resolveComponent, h, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent, h } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import { FormDRUIPartController } from '@ibiz-template/runtime';
 import './form-druipart.css';

package/es/control/form/form-detail/form-group-panel/form-group-panel.mjs

@@ -1,4 +1,4 @@
-import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, withDirectives, resolveDirective, computed } from 'vue';
 import { FormGroupPanelController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-group-panel.css';
@@ -22,6 +22,7 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("form-group");
     const c = props.controller;
+    const zIndex = props.controller.form.state.zIndex;
     const changeCollapse = () => {
       if (!c.disableClose) {
         c.state.collapse = !c.state.collapse;
@@ -45,6 +46,7 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
+      zIndex,
       captionText,
       changeCollapse,
       onActionClick
@@ -101,6 +103,7 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
       }, null), this.captionText])]), createVNode("div", {
         "class": [this.ns.be("header", "right")]
       }, [this.modelData.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
+        "zIndex": this.zIndex,
         "class": this.ns.e("toolbar"),
         "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
         "actions-state": state.actionGroupState,
@@ -138,13 +141,13 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
         }
       }, [!state.isShowMore ? ibiz.i18n.t("control.form.formGroupPanel.showMore") : ibiz.i18n.t("app.retract")])]);
     }
-    return createVNode("div", {
+    return withDirectives(createVNode("div", {
       "id": "".concat(this.controller.form.view.model.codeName, "_").concat(this.controller.form.model.codeName, "_").concat(this.modelData.codeName),
       "class": classArr,
       "onClick": (event) => this.controller.onClick(event)
     }, [header, createVNode("div", {
       "class": [this.ns.b("content")]
-    }, [content]), footer]);
+    }, [content]), footer]), [[resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

package/es/control/form/form-detail/form-iframe/form-iframe.css

@@ -0,0 +1 @@
+.ibiz-form-iframe{width:100%;height:100%}.ibiz-form-iframe__iframe{width:100%;height:100%}

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

@@ -0,0 +1,53 @@
+import { defineComponent, withDirectives, createVNode, resolveDirective, ref, computed } from 'vue';
+import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { FormIFrameController } from '@ibiz-template/runtime';
+import './form-iframe.css';
+
+"use strict";
+const FormIFrame = /* @__PURE__ */ defineComponent({
+  name: "IBizFormIFrame",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: FormIFrameController,
+      required: true
+    }
+  },
+  setup(props) {
+    const c = props.controller;
+    const ns = useNamespace("form-iframe");
+    useController(c);
+    const loading = ref(true);
+    const url = computed(() => {
+      return c.calcIFrameUrl();
+    });
+    const onLoad = () => {
+      loading.value = false;
+    };
+    return {
+      ns,
+      url,
+      loading,
+      onLoad
+    };
+  },
+  render() {
+    if (!this.controller.state.visible || !this.url) {
+      return null;
+    }
+    return withDirectives(createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("iframe", {
+      "class": this.ns.e("iframe"),
+      "src": this.url,
+      "frameborder": "0",
+      "onLoad": () => this.onLoad(),
+      "onError": () => this.onLoad()
+    }, null)]), [[resolveDirective("loading"), this.loading]]);
+  }
+});
+
+export { FormIFrame, FormIFrame as default };

package/es/control/form/form-detail/form-iframe/form-iframe.provider.mjs

@@ -0,0 +1,21 @@
+import { FormIFrameController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FormIFrameProvider {
+  constructor() {
+    __publicField(this, "component", "IBizFormIFrame");
+  }
+  async createController(detailModel, form, parent) {
+    const c = new FormIFrameController(detailModel, form, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { FormIFrameProvider };

package/es/control/form/form-detail/form-iframe/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall } from '@ibiz-template/vue3-util';
+import { registerFormDetailProvider } from '@ibiz-template/runtime';
+import { FormIFrame } from './form-iframe.mjs';
+import { FormIFrameProvider } from './form-iframe.provider.mjs';
+
+"use strict";
+const IBizFormIFrame = withInstall(FormIFrame, function(v) {
+  v.component(FormIFrame.name, FormIFrame);
+  registerFormDetailProvider("IFRAME", () => new FormIFrameProvider());
+});
+
+export { IBizFormIFrame, IBizFormIFrame as default };

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

@@ -1,4 +1,4 @@
-import { ref, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { defineComponent, resolveComponent, h, createVNode, ref } from 'vue';
 import { FormItemController } from '@ibiz-template/runtime';
 
 "use strict";

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

@@ -1,4 +1,4 @@
-import { ref, watch, onUnmounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, ref, watch, onUnmounted, computed, resolveComponent } from 'vue';
 import { useNamespace, IBizIcon } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import './form-item-container.css';
@@ -26,6 +26,12 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
         c.loadInputTip();
     });
     onUnmounted(() => c.clearTipsCache());
+    const showError = computed(() => {
+      const {
+        validateMode
+      } = c.form;
+      return validateMode === "default";
+    });
     const renderTipContent = () => {
       const {
         inputTip
@@ -91,6 +97,7 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
     };
     return {
       ns,
+      showError,
       renderLabel
     };
   },
@@ -104,7 +111,7 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
       "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(labelPos == null ? void 0 : labelPos.toLowerCase()))]
     }, [createVNode("div", {
       "class": [this.ns.e("editor")]
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.controller.state.error ? createVNode("div", {
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.showError && this.controller.state.error ? createVNode("div", {
       "title": showTitle(this.controller.state.error),
       "class": [this.ns.e("error")]
     }, [this.controller.state.error]) : null]);

package/es/control/form/form-detail/form-item/form-item.css

@@ -1 +1 @@
-.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}
+.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}

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

@@ -1,4 +1,4 @@
-import { isVNode, ref, createVNode, resolveComponent, h, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, createTextVNode, resolveComponent, h } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { CompositeFormItem } from './composite-form-item/composite-form-item.mjs';
 import './form-item.css';
@@ -24,37 +24,19 @@ const FormItem = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
-    var _a, _b, _c, _d;
     const ns = useNamespace("form-item");
     const c = props.controller;
     const onValueChange = (val, name, ignore = false) => {
       props.controller.setDataValue(val, name, ignore);
     };
-    const extraParams = ref({});
-    let emptyHiddenUnit = ibiz.config.form.emptyHiddenUnit;
-    const emptyhiddenunit = (_b = (_a = props.controller.form) == null ? void 0 : _a.controlParams) == null ? void 0 : _b.emptyhiddenunit;
-    if (emptyhiddenunit) {
-      emptyHiddenUnit = Object.is(emptyhiddenunit, "true");
-    }
-    const editorParams = ((_d = (_c = props.controller.editor) == null ? void 0 : _c.model) == null ? void 0 : _d.editorParams) || {};
-    const {
-      EMPTYHIDDENUNIT
-    } = editorParams;
-    if (EMPTYHIDDENUNIT) {
-      emptyHiddenUnit = Object.is(EMPTYHIDDENUNIT, "true");
-    }
-    Object.assign(extraParams.value, {
-      emptyHiddenUnit
-    });
     return {
       ns,
       c,
-      extraParams,
       onValueChange
     };
   },
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (!this.c.state.visible || ((_a = this.c.model.editor) == null ? void 0 : _a.editorType) === "HIDDEN") {
       return null;
     }
@@ -64,13 +46,19 @@ const FormItem = /* @__PURE__ */ defineComponent({
       const {
         editorItems = []
       } = this.c.model.editor || {};
-      editor = editorItems.map((item) => {
+      editor = editorItems.map((item, index) => {
         const controller = this.c.form.details[item.id];
-        return createVNode(CompositeFormItem, {
-          "modelData": controller.model,
-          "controller": controller,
-          "attrs": this.attrs
-        }, null);
+        return [
+          createVNode(CompositeFormItem, {
+            "modelData": controller.model,
+            "controller": controller,
+            "attrs": this.attrs
+          }, null),
+          // feat：复合表单项样式2会在编辑器之间加`-`分隔符
+          editorItems.length - 1 > index && this.c.model.detailStyle === "STYLE2" && createVNode("span", {
+            "class": this.ns.e("composite-separator")
+          }, [createTextVNode("-")])
+        ];
       });
     } else {
       const editMode = (_d = (_c = (_b = this.c.editor) == null ? void 0 : _b.model) == null ? void 0 : _c.editorParams) == null ? void 0 : _d.editMode;
@@ -82,7 +70,7 @@ const FormItem = /* @__PURE__ */ defineComponent({
         disabled: this.c.state.disabled,
         readonly: this.c.state.readonly,
         onChange: this.onValueChange,
-        extraParams: this.extraParams,
+        extraParams: ((_f = this.c.editor) == null ? void 0 : _f.extraParams) || {},
         controlParams: editMode ? {
           ...this.c.form.controlParams,
           editmode: editMode

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

@@ -1,4 +1,4 @@
-import { isVNode, computed, resolveComponent, createVNode, h, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, h, computed } from 'vue';
 import { FormMDCtrlFormController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-mdctrl-form.css';
@@ -79,7 +79,8 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
       "onRemoveClick": (item) => this.controller.remove(item.id)
     }, {
       item: ({
-        data
+        data,
+        index
       }) => {
         if (!formProvider) {
           return createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
@@ -88,6 +89,7 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
           class: this.ns.be("item", "form"),
           key: data.id,
           modelData: model.contentControl,
+          mdCtrlFormIndex: index,
           context: data.context,
           params: data.params,
           onCreated: (event) => {

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

@@ -1,7 +1,8 @@
-import { isVNode, computed, ref, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, h, resolveComponent, createVNode, computed, ref } from 'vue';
 import { FormMDCtrlMDController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './form-mdctrl-md.css';
+import { showTitle } from '@ibiz-template/core';
 
 "use strict";
 function _isSlot(s) {
@@ -27,16 +28,52 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
     const onSelectionChange = (event) => {
       isSelected.value = event.data.length > 0;
     };
+    const handleRemove = () => {
+      isSelected.value = false;
+      props.controller.remove();
+    };
+    const renderRemoveBtn = () => {
+      let _slot2;
+      if (!props.controller.enableDelete)
+        return null;
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return createVNode(resolveComponent("el-popconfirm"), {
+          "title": showTitle(ibiz.i18n.t("control.form.mdCtrlContainer.promptInformation")),
+          "confirm-button-text": ibiz.i18n.t("app.confirm"),
+          "cancel-button-text": ibiz.i18n.t("app.cancel"),
+          "onConfirm": () => handleRemove()
+        }, {
+          reference: () => {
+            let _slot;
+            return createVNode(resolveComponent("el-button"), {
+              "type": "danger",
+              "disabled": !isSelected.value,
+              "class": [ns.be("actions", "remove"), ns.be("actions", "btn")]
+            }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
+              default: () => [_slot]
+            });
+          }
+        });
+      }
+      return createVNode(resolveComponent("el-button"), {
+        "type": "danger",
+        "disabled": !isSelected.value,
+        "class": [ns.be("actions", "remove"), ns.be("actions", "btn")],
+        "onClick": () => handleRemove()
+      }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    };
     return {
       ns,
       showActions,
-      isSelected,
       onCreated,
-      onSelectionChange
+      onSelectionChange,
+      renderRemoveBtn
     };
   },
   render() {
-    let _slot, _slot2;
+    let _slot3;
     const {
       mdProvider,
       model
@@ -62,16 +99,9 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
     }, [this.controller.enableCreate && createVNode(resolveComponent("el-button"), {
       "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn")],
       "onClick": () => this.controller.create()
-    }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
-      default: () => [_slot]
-    }), this.controller.enableDelete && createVNode(resolveComponent("el-button"), {
-      "type": "danger",
-      "disabled": !this.isSelected,
-      "class": [this.ns.be("actions", "remove"), this.ns.be("actions", "btn")],
-      "onClick": () => this.controller.remove()
-    }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
-      default: () => [_slot2]
-    })])]);
+    }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
+      default: () => [_slot3]
+    }), this.renderRemoveBtn()])]);
   }
 });
 

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

@@ -1,4 +1,4 @@
-import { createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode } 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';

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.css

@@ -1 +1 @@
-.ibiz-repeater-grid{position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-color-danger)}.ibiz-repeater-grid-index .cell{padding:var(--ibiz-spacing-extra-tight)}.ibiz-repeater-grid-index__remove{display:none}
+.ibiz-repeater-grid{position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid__drag-icon{cursor:move}.ibiz-repeater-grid__sortable-ghost{opacity:.5}.ibiz-repeater-grid .el-table__row{height:57px}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-color-danger)}.ibiz-repeater-grid-index .cell{padding:var(--ibiz-spacing-extra-tight)}.ibiz-repeater-grid-index__remove{display:none}

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

@@ -1,5 +1,7 @@
-import { isVNode, reactive, watch, resolveComponent, createVNode, toRaw, h, defineComponent } from 'vue';
-import { FormMDCtrlRepeaterController, EditFormController, ControlVO } from '@ibiz-template/runtime';
+import { isVNode, defineComponent, createVNode, resolveComponent, 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, showTitle } from '@ibiz-template/core';
 import './repeater-grid.css';
@@ -24,9 +26,14 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("repeater-grid");
     const formItems = [];
+    const tableRef = ref();
+    const tableKey = ref(createUUID());
     recursiveIterate(props.controller.repeatedForm, (item) => {
+      var _a;
       if (item.detailType === "FORMITEM") {
-        formItems.push(item);
+        if (((_a = item.editor) == null ? void 0 : _a.editorType) !== "HIDDEN") {
+          formItems.push(item);
+        }
       }
     }, {
       childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
@@ -82,6 +89,31 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       immediate: true,
       deep: true
     });
+    let sortable;
+    const rowDrop = () => {
+      var _a, _b;
+      const wrapper = (_b = (_a = tableRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.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) => {
       let _slot2;
       if (!props.controller.enableDelete) {
@@ -117,6 +149,8 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
     };
     return {
       ns,
+      tableRef,
+      tableKey,
       formItems,
       formControllers,
       renderRemoveBtn
@@ -134,16 +168,40 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
     }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
       default: () => [_slot3]
     }), createVNode(resolveComponent("el-table"), {
-      "class": this.ns.e("table"),
+      "ref": "tableRef",
+      "key": this.tableKey,
       "show-header": true,
+      "class": this.ns.e("table"),
       "data": this.controller.value,
       "cell-class-name": ({
         columnIndex
       }) => {
-        return columnIndex === 0 ? this.ns.b("index") : "";
+        const shouldShowIndex = this.controller.enableSort ? columnIndex === 1 : columnIndex === 0;
+        return shouldShowIndex ? this.ns.b("index") : "";
       }
     }, {
-      default: () => [createVNode(resolveComponent("el-table-column"), {
+      default: () => [this.controller.enableSort && createVNode(resolveComponent("el-table-column"), {
+        "width": 26,
+        "type": "default"
+      }, {
+        default: () => 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"

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);