@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/es/control/form/form-detail/form-iframe/form-iframe.provider.d.ts

@@ -0,0 +1,13 @@
+import { FormController, FormIFrameController, IFormDetailContainerController, IFormDetailProvider } from '@ibiz-template/runtime';
+import { IDEFormIFrame } from '@ibiz/model-core';
+/**
+ * 表单直接嵌入视图
+ *
+ * @export
+ * @class FormIFrameProvider
+ * @implements {IFormDetailProvider}
+ */
+export declare class FormIFrameProvider implements IFormDetailProvider {
+    component: string;
+    createController(detailModel: IDEFormIFrame, form: FormController, parent: IFormDetailContainerController | undefined): Promise<FormIFrameController>;
+}

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.d.ts

@@ -0,0 +1,25 @@
+export declare const IBizFormIFrame: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormIFrameController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    url: import("vue").ComputedRef<string>;
+    loading: import("vue").Ref<boolean>;
+    onLoad: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IDEFormIFrame>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("@ibiz-template/runtime").FormIFrameController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizFormIFrame;

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/form-item-container/form-item-container.css

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}
+.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container__popper.is-md.el-popper.el-popper{padding:0}.ibiz-form-item-container__popper.is-md.el-popper.el-popper .ibiz-form-item-container__popper--content{padding:0}.ibiz-form-item-container__popper.is-md .ibiz-markdown{max-height:100vh;padding:0 calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight));overflow:auto}.ibiz-form-item-container__popper.is-md .ibiz-form-item-container__popper--tooltip{padding:calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight)) 0}.ibiz-form-item-container__popper.is-md .ibiz-markdown-cherry{width:auto!important}.ibiz-form-item-container__popper.is-md .cherry-previewer p:only-child{margin:0}.ibiz-form-item-container__popper.is-md .cherry-previewer>p:first-child{margin-top:0}.ibiz-form-item-container__popper.is-md .cherry-sidebar,.ibiz-form-item-container__popper.is-md .cherry-toolbar,.ibiz-form-item-container__popper.is-md .cherry-toolbar-button{display:none}.ibiz-form-item-container__popper.is-md .cherry{font-size:inherit;line-height:inherit}.ibiz-form-item-container__popper.is-md .cherry,.ibiz-form-item-container__popper.is-md .cherry .cherry-previewer{padding:0;background-color:transparent;border:none!important;box-shadow:none}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}

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

@@ -26,12 +26,34 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
         c.loadInputTip();
     });
     onUnmounted(() => c.clearTipsCache());
+    const renderTipContent = () => {
+      const {
+        inputTip
+      } = c.state;
+      switch (ibiz.config.tooltiprendermode) {
+        case "none":
+          return createVNode("span", {
+            "class": ns.m("text")
+          }, [inputTip]);
+        case "html":
+          return createVNode("div", {
+            "class": ns.m("html"),
+            "innerHTML": inputTip
+          }, null);
+        case "md":
+        default:
+          return createVNode(resolveComponent("iBizMarkDown"), {
+            "value": inputTip,
+            "disabled": true
+          }, null);
+      }
+    };
     const renderInputTip = () => {
       return createVNode(resolveComponent("el-tooltip"), {
         "effect": "light",
         "visible": visible.value,
         "onUpdate:visible": ($event) => visible.value = $event,
-        "popper-class": ns.e("popper"),
+        "popper-class": [ns.e("popper"), ns.is(ibiz.config.tooltiprendermode.toLowerCase(), true)],
         "disabled": !enableInputTip,
         "placement": labelPos === "RIGHT" ? "right" : "left"
       }, {
@@ -52,9 +74,8 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
           return createVNode("div", {
             "class": ns.em("popper", "content")
           }, [createVNode("div", {
-            "class": ns.em("popper", "tooltip"),
-            "innerHTML": c.state.inputTip
-          }, null), c.state.inputTipUrl && createVNode("a", {
+            "class": ns.em("popper", "tooltip")
+          }, [renderTipContent()]), c.state.inputTipUrl && createVNode("a", {
             "target": "_blank",
             "href": c.state.inputTipUrl,
             "title": ibiz.i18n.t("component.formItemContainer.more")

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, ref, createVNode, createTextVNode, resolveComponent, h, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { CompositeFormItem } from './composite-form-item/composite-form-item.mjs';
 import './form-item.css';
@@ -64,13 +64,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;

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

@@ -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-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 { isVNode, ref, reactive, watch, onUnmounted, resolveComponent, createVNode, toRaw, h, defineComponent } from 'vue';
+import Sortable from '../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.mjs';
 import { FormMDCtrlRepeaterController, EditFormController, ControlVO } 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

@@ -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.d.ts

@@ -10,6 +10,9 @@ export declare const RepeaterSingleForm: import("vue").DefineComponent<{
         type: typeof FormMDCtrlRepeaterController;
         required: true;
     };
+    simpleDataIndex: {
+        type: NumberConstructor;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     onFormDataChange: (event: EventBase) => void;
@@ -26,6 +29,9 @@ export declare const RepeaterSingleForm: import("vue").DefineComponent<{
         type: typeof FormMDCtrlRepeaterController;
         required: true;
     };
+    simpleDataIndex: {
+        type: NumberConstructor;
+    };
 }>> & {
     onChange?: ((_value: import("@ibiz-template/core").IApiData) => any) | undefined;
     onCreated?: ((_value: EventBase) => any) | undefined;

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

@@ -15,6 +15,9 @@ const RepeaterSingleForm = /* @__PURE__ */ defineComponent({
     controller: {
       type: FormMDCtrlRepeaterController,
       required: true
+    },
+    simpleDataIndex: {
+      type: Number
     }
   },
   emits: {
@@ -51,6 +54,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.d.ts

@@ -14,8 +14,9 @@ export declare const FormMDCtrl: import("vue").DefineComponent<{
 }, {
     c: FormMDCtrlController;
     ns: import("@ibiz-template/core").Namespace;
-    hasCaption: boolean | undefined;
+    zIndex: number | undefined;
     hasHeader: true | import("@ibiz/model-core").IUIActionGroup | undefined;
+    hasCaption: boolean | undefined;
     isDesignPreview: boolean;
     onActionClick: (detail: IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -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/index.d.ts

@@ -10,8 +10,9 @@ export declare const IBizFormMDCtrl: import("@ibiz-template/vue3-util").TypeWith
 }, {
     c: import("@ibiz-template/runtime").FormMDCtrlController;
     ns: import("@ibiz-template/core").Namespace;
-    hasCaption: boolean | undefined;
+    zIndex: number | undefined;
     hasHeader: true | import("@ibiz/model-core").IUIActionGroup | undefined;
+    hasCaption: boolean | undefined;
     isDesignPreview: boolean;
     onActionClick: (detail: import("@ibiz/model-core").IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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.d.ts

@@ -16,16 +16,26 @@ export declare const MDCtrlContainer: import("vue").DefineComponent<{
     userStyle: {
         type: StringConstructor;
     };
+    enableSort: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     showActions: import("vue").ComputedRef<boolean>;
+    dragClssName: string;
+    dragItems: import("vue").ComputedRef<import("@ibiz-template/core").IApiData[]>;
+    renderDragBtn: () => JSX.Element;
     renderAddBtn: () => JSX.Element;
+    renderDefaultItem: (item: IData, index: number) => JSX.Element;
     renderRemoveBtn: (item: IData, index: number) => JSX.Element | null;
     renderStyle2AddBtn: () => JSX.Element;
     renderStyle2RemoveBtn: (item: IData, index: number) => JSX.Element | null;
+    handleDragChange: (_params: IParams) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     addClick: () => true;
     removeClick: (_data: IData, _index: number) => true;
+    dragChange: (_draggedIndex: number, _targetIndex: number) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     enableCreate: {
         type: BooleanConstructor;
@@ -42,7 +52,14 @@ export declare const MDCtrlContainer: import("vue").DefineComponent<{
     userStyle: {
         type: StringConstructor;
     };
+    enableSort: {
+        type: BooleanConstructor;
+        required: false;
+    };
 }>> & {
+    onDragChange?: ((_draggedIndex: number, _targetIndex: number) => any) | undefined;
     onAddClick?: (() => any) | undefined;
     onRemoveClick?: ((_data: import("@ibiz-template/core").IApiData, _index: number) => any) | undefined;
-}, {}, {}>;
+}, {
+    enableSort: boolean;
+}, {}>;