@ibiz-template/vue3-components 0.7.41-alpha.4 → 0.7.41-alpha.41

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

package/es/control/form/form-detail/form-tab-panel/form-tab-panel.css

@@ -1 +1 @@
-.ibiz-form-tab-panel{width:100%;height:100%;--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary)}.ibiz-form-tab-panel>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-tab-panel-font-size);color:var(--ibiz-form-tab-panel-text-color);background-color:var(--ibiz-form-tab-panel-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-tab-panel-hover-text-color);background-color:var(--ibiz-form-tab-panel-hover-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-tab-panel-active-text-color);background-color:var(--ibiz-form-tab-panel-active-bg-color)}.ibiz-form-tab-panel .el-tabs__nav-wrap::after{height:1px;background-color:var(--ibiz-form-tab-panel-header-border-color)}.ibiz-form-tab-panel .el-tabs__active-bar{background-color:var(--ibiz-form-tab-panel-active-border-color)}.ibiz-form-tab-panel .el-tabs__item .ibiz-form-tab-panel__badge.is-no-counter{padding-right:var(--ibiz-spacing-none)}.ibiz-form-tab-panel__badge .el-badge__content{padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);background-color:var(--ibiz-color-danger)}
+.ibiz-form-tab-panel{width:100%;height:100%;--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-select-all-height:40px}.ibiz-form-tab-panel>.el-tabs__header.is-top{margin-bottom:var(--ibiz-spacing-tight)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top{font-size:var(--ibiz-form-tab-panel-font-size);color:var(--ibiz-form-tab-panel-text-color);background-color:var(--ibiz-form-tab-panel-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top:hover{color:var(--ibiz-form-tab-panel-hover-text-color);background-color:var(--ibiz-form-tab-panel-hover-bg-color)}.ibiz-form-tab-panel>.el-tabs__header.is-top .el-tabs__item.is-top.is-active{color:var(--ibiz-form-tab-panel-active-text-color);background-color:var(--ibiz-form-tab-panel-active-bg-color)}.ibiz-form-tab-panel .el-tabs__nav-wrap::after{height:1px;background-color:var(--ibiz-form-tab-panel-header-border-color)}.ibiz-form-tab-panel .el-tabs__active-bar{background-color:var(--ibiz-form-tab-panel-active-border-color)}.ibiz-form-tab-panel .el-tabs__item .ibiz-form-tab-panel__badge.is-no-counter{padding-right:var(--ibiz-spacing-none)}.ibiz-form-tab-panel__badge .el-badge__content{padding:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-small);background-color:var(--ibiz-color-danger)}.ibiz-form-tab-panel__badge .el-badge__content.is-fixed{top:var(--ibiz-spacing-super-tight);right:0}.ibiz-form-tab-panel--style2 .el-tabs__nav-next.is-disabled,.ibiz-form-tab-panel--style2 .el-tabs__nav-prev.is-disabled{display:none}.ibiz-form-tab-panel--style2 .el-tabs__nav-wrap.is-top:has(.el-tabs__nav-prev.is-disabled){padding-left:0}.ibiz-form-tab-panel--style2 .el-tabs__nav-wrap.is-top:has(.el-tabs__nav-next.is-disabled){padding-right:0}.ibiz-form-tab-panel-tab-panel-container-style2{position:relative;display:flex;width:100%;--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-select-all-height:40px}.ibiz-form-tab-panel-tab-panel-container-style2 .ibiz-form-tab-panel{width:100%}.ibiz-form-tab-panel-tab-panel-container-style2 .ibiz-form-tab-panel .el-tabs__header{width:calc(100% - 72px)}.ibiz-form-tab-panel-tab-panel-container-style2__popover{--ibiz-form-tab-panel-font-size:var(--ibiz-font-size-header-4);--ibiz-form-tab-panel-header-border-color:var(--ibiz-color-border);--ibiz-form-tab-panel-text-color:var(--ibiz-color-text-2);--ibiz-form-tab-panel-bg-color:transparent;--ibiz-form-tab-panel-hover-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-hover-bg-color:transparent;--ibiz-form-tab-panel-active-text-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-active-bg-color:transparent;--ibiz-form-tab-panel-active-border-color:var(--ibiz-color-primary);--ibiz-form-tab-panel-select-all-height:40px}.ibiz-form-tab-panel-tab-panel-container-style2__popover.el-popover{padding:0}.ibiz-form-tab-panel-tab-panel-container-style2__select{position:absolute;top:0;right:0;display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;justify-content:center;width:72px;height:var(--ibiz-form-tab-panel-select-all-height);font-size:var(--ibiz-form-tab-panel-font-size);color:var(--ibiz-form-tab-panel-text-color);cursor:pointer;border-bottom:1px solid var(--ibiz-form-tab-panel-header-border-color)}.ibiz-form-tab-panel-tab-panel-container-style2__content{padding:var(--ibiz-spacing-base) 0}.ibiz-form-tab-panel-tab-panel-container-style2__tab-item-content{width:100%;padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-form-tab-panel-tab-panel-container-style2__tab-item-content:hover{color:var(--ibiz-form-tab-panel-hover-text-color);background-color:var(--ibiz-form-tab-panel-hover-bg-color)}.ibiz-form-tab-panel-tab-panel-container-style2__tab-item-content.is-active{color:var(--ibiz-form-tab-panel-active-text-color)}

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

@@ -1,4 +1,4 @@
-import { isVNode, reactive, ref, onMounted, onUnmounted, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, withDirectives, resolveDirective, ref } from 'vue';
 import { useNamespace, useController } from '@ibiz-template/vue3-util';
 import './form-tab-panel.css';
 import { FormTabPanelController } from '@ibiz-template/runtime';
@@ -19,54 +19,48 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
       required: true
     }
   },
-  setup(props, {
-    slots
-  }) {
+  setup(props) {
     const ns = useNamespace("form-tab-panel");
     useController(props.controller);
-    let counter = null;
-    const counterData = reactive({});
-    const counterRefId = ref("");
-    const onTabClick = (tabIns, event) => {
-      props.controller.onTabChange(tabIns.props.name);
-      const pageC = props.controller.form.details[tabIns.props.name];
+    const popoverVisible = ref(false);
+    const triggerClick = (key, event) => {
+      const pageC = props.controller.form.details[key];
       if (pageC) {
         pageC.onClick(event);
       }
     };
-    const fn = (data) => {
-      counterData.value = data;
+    const onTabClick = (tabIns, event) => {
+      props.controller.onTabChange(tabIns.props.name);
+      triggerClick(tabIns.props.name, event);
+    };
+    const onPopoverClick = (key, event) => {
+      props.controller.selectTab(key);
+      popoverVisible.value = false;
+      triggerClick(key, event);
+    };
+    const renderAllTabContent = () => {
+      var _a;
+      return createVNode("div", {
+        "class": ns.be("tab-panel-container-style2", "content")
+      }, [(_a = props.modelData.deformTabPages) == null ? void 0 : _a.map((page) => {
+        return createVNode("div", {
+          "class": [ns.be("tab-panel-container-style2", "tab-item-content"), ns.is("active", page.id === props.controller.state.activeTab)],
+          "onClick": (event) => onPopoverClick(page.codeName, event),
+          "title": page.caption
+        }, [page.caption]);
+      })]);
     };
-    onMounted(() => {
-      var _a, _b;
-      const defaultSlots = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
-      for (let i = 0; i < defaultSlots.length; i++) {
-        const slot = defaultSlots[i];
-        const pagePropsC = (_b = slot.props) == null ? void 0 : _b.controller;
-        if (pagePropsC && pagePropsC.model && pagePropsC.model.appCounterRefId) {
-          counterRefId.value = pagePropsC.model.appCounterRefId;
-          break;
-        }
-      }
-      if (counterRefId.value) {
-        counter = props.controller.getCounter(counterRefId.value);
-        if (counter) {
-          counter.onChange(fn);
-        }
-      }
-    });
-    onUnmounted(() => {
-      counter == null ? void 0 : counter.offChange(fn);
-    });
     return {
       ns,
+      popoverVisible,
       onTabClick,
-      counterData
+      renderAllTabContent
     };
   },
   render() {
     var _a, _b;
     let _slot2;
+    const isStyle2 = this.modelData.detailStyle === "STYLE2";
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const renderItemText = (c) => {
       return createVNode("span", {
@@ -75,7 +69,7 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
         "icon": c.model.sysImage
       }, null), c.model.showCaption && c.model.caption]);
     };
-    return createVNode(resolveComponent("el-tabs"), {
+    const tabContent = withDirectives(createVNode(resolveComponent("el-tabs"), {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass],
       "model-value": this.controller.state.activeTab,
       "onTabClick": this.onTabClick
@@ -97,11 +91,13 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
         default: () => slot,
         label: () => {
           let _slot;
-          const value = c.model.counterId ? this.counterData.value[c.model.counterId] : void 0;
+          const value = c.model.counterId ? this.controller.state.counterData[c.model.counterId] : void 0;
           return c.model.counterId ? createVNode(resolveComponent("el-badge"), {
             "class": [this.ns.e("badge"), this.ns.is("no-counter", !value && value !== 0 || c.model.counterMode === 1 && value <= 0)],
+            "data-value": value,
             "value": value,
-            "hidden": !value && value !== 0 || c.model.counterMode === 1 && value <= 0
+            "hidden": !value && value !== 0 || c.model.counterMode === 1 && value <= 0,
+            "max": 99
           }, _isSlot(_slot = renderItemText(c)) ? _slot : {
             default: () => [_slot]
           }) : renderItemText(c);
@@ -109,7 +105,32 @@ const FormTabPanel = /* @__PURE__ */ defineComponent({
       });
     })) ? _slot2 : {
       default: () => [_slot2]
-    });
+    }), [[resolveDirective("loading"), this.controller.state.loading && !isStyle2]]);
+    if (this.modelData.detailStyle === "STYLE2") {
+      return withDirectives(createVNode("div", {
+        "class": this.ns.b("tab-panel-container-style2")
+      }, [tabContent, createVNode(resolveComponent("el-popover"), {
+        "trigger": "click",
+        "placement": "top-end",
+        "visible": this.popoverVisible,
+        "onUpdate:visible": ($event) => this.popoverVisible = $event,
+        "popper-class": this.ns.be("tab-panel-container-style2", "popover")
+      }, {
+        reference: () => {
+          return createVNode("div", {
+            "class": this.ns.be("tab-panel-container-style2", "select")
+          }, [createVNode("div", {
+            "class": this.ns.bem("tab-panel-container-style2", "select", "title")
+          }, [ibiz.i18n.t("control.form.formTabPnel.all")]), createVNode("ion-icon", {
+            "name": "caret-down-outline"
+          }, null)]);
+        },
+        default: () => {
+          return this.renderAllTabContent();
+        }
+      })]), [[resolveDirective("loading"), this.controller.state.loading]]);
+    }
+    return tabContent;
   }
 });
 

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

@@ -8,6 +8,7 @@ export { IBizFormRawItem } from './form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-tab-page/index.mjs';
 export { IBizFormButtonList } from './form-button-list/index.mjs';
+export { IBizFormIFrame } from './form-iframe/index.mjs';
 export { IBizFormItemContainer } from './form-item/form-item-container/form-item-container.mjs';
 export { IBizFormPageItem } from './form-page/form-page-item/form-page.item.mjs';
 

package/es/control/form/index.mjs

@@ -14,5 +14,6 @@ export { IBizFormRawItem } from './form-detail/form-rawitem/index.mjs';
 export { IBizFormTabPanel } from './form-detail/form-tab-panel/index.mjs';
 export { IBizFormTabPage } from './form-detail/form-tab-page/index.mjs';
 export { IBizFormButtonList } from './form-detail/form-button-list/index.mjs';
+export { IBizFormIFrame } from './form-detail/form-iframe/index.mjs';
 
 "use strict";

package/es/control/form/search-form/advance-search/advance-search.mjs

@@ -1,4 +1,4 @@
-import { isVNode, createVNode, resolveComponent, h, defineComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, resolveComponent, h } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { ScriptFactory, findChildFormDetails } from '@ibiz-template/runtime';
 import './advance-search.css';

package/es/control/form/search-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 { SearchFormControl } from './search-form.mjs';
 import { SearchFormProvider } from './search-form.provider.mjs';

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

@@ -1,4 +1,4 @@
-import { watch, reactive, h, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent, watch, reactive, h } from 'vue';
 import { SearchFormController } from '@ibiz-template/runtime';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { AdvanceSearch } from './advance-search/advance-search.mjs';

package/es/control/gantt/gantt.css

@@ -1 +1 @@
-.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-color-primary:var(--ibiz-color-primary);--gantt-warning:var(--ibiz-color-warning)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}
+.ibiz-control-gantt{width:100%;height:100%}.ibiz-control-gantt .xg-root{--gantt-bg:var(--ibiz-color-bg-1);--gantt-bg-hover:var(--ibiz-color-disabled-border);--gantt-bg-active:var(--ibiz-color-disabled-border);--gantt-bg-checkmark:transparent;--gantt-bg-toolbar-item-hover:var(--ibiz-color-primary-light-default);--gantt-shadow:var(--ibiz-color-shadow);--gantt-shadow-toolbar-item:var(--ibiz-color-shadow);--gantt-border:var(--ibiz-color-tertiary-light-active);--gantt-border-hover:var(--ibiz-color-tertiary-light-active);--gantt-border-dashed:var(--ibiz-color-disabled-border);--gantt-border-toolbar-item:var(--ibiz-color-border);--gantt-border-separate-line:var(--ibiz-color-border);--gantt-text-0:var(--ibiz-color-text-0);--gantt-text-3:var(--ibiz-color-text-3);--gantt-white:var(--ibiz-color-white);--gantt-black:var(--ibiz-color-black);--gantt-color-primary:var(--ibiz-color-primary);--gantt-warning:var(--ibiz-color-warning);--gantt-color-linking:var(--ibiz-color-primary);--gantt-link-path-hover:var(--ibiz-color-primary)}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row{cursor:pointer}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .xg-table-cell:not(:first-child)>div{padding:var(--ibiz-spacing-none)}.ibiz-control-gantt .xg-root .xg-table-cell>div{width:100%}.ibiz-control-gantt .xg-root .xg-table-cell>div .cell{height:100%}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.xg-slider-drag.xg-slider-level0{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider .xg-slider-block{overflow:visible}.ibiz-control-gantt .xg-root .xg-row.xg-gantt-row .xg-slider.is-no-width{display:none}.ibiz-control-gantt .xg-root .ibiz-control-gantt__slider--caption{position:sticky;left:8px}.ibiz-control-gantt .xg-root .is-exceeds-range .ibiz-control-gantt__slider::after{position:absolute;right:0;z-index:99;display:block;width:16px;height:100%;content:"";background-color:var(--ibiz-color-primary)}.ibiz-control-gantt--empty .xg-table-body{height:calc(100% - 86px)!important}.ibiz-control-gantt__slider{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-small)}.ibiz-control-gantt__slider--container-title .icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-gantt__slider--container-title .number{display:flex;align-items:center}.ibiz-control-gantt__slider--container-title .caption{margin:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-6);font-weight:var(--ibiz-font-weight-regular)}.ibiz-control-gantt__slider--container-content{display:flex;justify-content:space-between}.ibiz-control-gantt__slider--container-content .caption{margin:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-disabled-text)}.ibiz-control-gantt__slider--container-content .detail{display:flex;flex-direction:column;flex-grow:1;align-items:center}.ibiz-control-gantt__slider--caption{overflow:hidden;color:var(--ibiz-color-primary-text);text-overflow:ellipsis;white-space:nowrap}.ibiz-control-gantt__setting{display:flex;align-items:center}.ibiz-control-gantt__setting--icon{cursor:pointer;fill:var(--ibiz-color-primary)}.ibiz-control-gantt__slider-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt__link-path-popover{z-index:300!important;width:auto;min-width:300px;padding:12px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column--ellipsis .ibiz-tree-grid-ex-field-column-text-container{min-width:0}.ibiz-control-gantt .ibiz-tree-grid-ex-field-column-toolbar-container{flex-shrink:0}.ibiz-control-gantt .ibiz-tree-grid-ex-edit-column__editor{min-height:32px}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row .ibiz-action-toolbar__item.is-expand{display:inline-flex;opacity:1}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row:hover .ibiz-action-toolbar__item{display:inline-flex;opacity:1}.ibiz-control-gantt .xg-root .xg-table-body .xg-table-row:hover .ibiz-action-toolbar__separator{display:inline-flex;opacity:1}.xg-view-toolbar-switch-action{--gantt-text-switch-item:var(--ibiz-color-text-3);--gantt-bg-hover-switch-item:var(--ibiz-color-bg-0)}