@ibiz-template/vue3-components 0.7.38-alpha.43 → 0.7.39

package/es/common/action-toolbar/action-toolbar.d.ts

@@ -38,13 +38,16 @@ export declare const IBizActionToolbar: import("vue").DefineComponent<{
         required: true;
     };
     popperClass: StringConstructor;
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     dropdownRef: Ref<any>;
     popoverIndex: number;
     expandDetails: Ref<IAppDEUIActionGroupDetail[]>;
     groupDetails: Ref<IAppDEUIActionGroupDetail[]>;
-    groupButtonRef: Ref<any>;
+    groupButtonRef: Ref<HTMLElement | null | undefined>;
     popoverVisible: Ref<boolean>;
     handleClick: (detail: IAppDEUIActionGroupDetail, e: MouseEvent) => Promise<void>;
     calcActionItemClass: (item: IAppDEUIActionGroupDetail) => string[];
@@ -84,6 +87,9 @@ export declare const IBizActionToolbar: import("vue").DefineComponent<{
         required: true;
     };
     popperClass: StringConstructor;
+    actionCallBack: {
+        type: FunctionConstructor;
+    };
 }>>, {
     mode: "dropdown" | "buttons";
     groupLevelKeys: number[];

package/es/common/action-toolbar/action-toolbar.mjs

@@ -1,7 +1,7 @@
-import { isVNode, defineComponent, ref, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
-import './action-toolbar.css';
+import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace, usePopoverVisible } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
+import './action-toolbar.css';
 
 "use strict";
 function _isSlot(s) {
@@ -33,7 +33,12 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
       type: Number,
       required: true
     },
-    popperClass: String
+    popperClass: String,
+    // 行为回调，和action-click事件互斥，二者只有一个生效，actionCallBack优先级大于行为回调
+    // 二者区别在于：行为回调为同步执行（主要解决pop打开视图位置异常），action-click为异步执行（不关心执行是否完成）
+    actionCallBack: {
+      type: Function
+    }
   },
   setup(props, {
     emit
@@ -41,7 +46,13 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
     var _a;
     const ns = useNamespace("action-toolbar");
     const dropdownRef = ref();
-    const popoverVisible = ref(false);
+    const groupButtonRef = ref();
+    const {
+      popoverVisible,
+      setPopoverVisible
+    } = usePopoverVisible(groupButtonRef, (ele) => {
+      return ele.ref;
+    });
     (_a = props.actionDetails) == null ? void 0 : _a.forEach((detail) => {
       if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
         detail.caption = ibiz.i18n.t(detail.capLanguageRes.lanResTag, detail.caption);
@@ -52,12 +63,17 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
     });
     const handleClick = async (detail, e) => {
       e.stopPropagation();
+      if (props.actionCallBack) {
+        await props.actionCallBack(detail, e);
+      }
       if (props.mode === "buttons") {
-        popoverVisible.value = false;
+        setPopoverVisible(false);
       } else if (dropdownRef.value) {
         dropdownRef.value.handleClose();
       }
-      emit("action-click", detail, e);
+      if (!props.actionCallBack) {
+        emit("action-click", detail, e);
+      }
     };
     const expandDetails = ref([]);
     const groupDetails = ref([]);
@@ -70,7 +86,6 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
         }
       });
     }
-    const groupButtonRef = ref();
     const calcActionItemClass = (item) => {
       const {
         actionLevel
@@ -143,7 +158,10 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
         "text": true,
         "disabled": pdisabled,
         "ref": "groupButtonRef",
-        "class": [this.ns.e("item"), this.ns.is("expand", this.popoverVisible)]
+        "class": [this.ns.e("item"), this.ns.is("group", true), this.ns.is("expand", this.popoverVisible)],
+        "onClick": () => {
+          this.popoverVisible = !this.popoverVisible;
+        }
       }, {
         icon: () => createVNode("ion-icon", {
           "class": this.ns.e("icon"),
@@ -153,9 +171,7 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
       }), createVNode(resolveComponent("el-popover"), {
         "placement": "bottom-start",
         "virtual-ref": this.groupButtonRef,
-        "trigger": "click",
         "visible": this.popoverVisible,
-        "onUpdate:visible": ($event) => this.popoverVisible = $event,
         "popper-class": this.ns.e("popover"),
         "virtual-triggering": true,
         "popper-style": "z-index:".concat(this.popoverIndex)

package/es/common/anchor-container/anchor-bar-list/anchor-bar-list.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, createVNode, watch } from 'vue';
+import { ref, createVNode, watch, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './anchor-bar-list.css';
 

package/es/common/anchor-container/anchor-container.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onUnmounted, createVNode } from 'vue';
+import { ref, watch, onUnmounted, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { IBizAnchorBarList } from './anchor-bar-list/anchor-bar-list.mjs';
 import './anchor-container.css';

package/es/common/button-list/button-list.css

@@ -1 +1 @@
-.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);font-size:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__item>span{pointer-events:none}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{width:100%;display:flex;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{padding-left:0;padding-right:0;width:32px}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;width:100%;display:block;text-align:left;border-radius:0;padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size)}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}
+.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__content{display:flex}.ibiz-button-list__content .ibiz-button-list__dropdown{width:auto}.ibiz-button-list__content .el-button+.el-dropdown{margin-left:var(--ibiz-button-list-gap)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__item>span{pointer-events:none}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{display:flex;width:100%;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{width:32px;padding-right:0;padding-left:0}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size);text-align:left;border-radius:0}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}

package/es/common/button-list/button-list.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IDEFormButtonList, IPanelButtonList } from '@ibiz/model-core';
+import { IPanelButtonList, IDEFormButtonList, IAppDEUIActionGroupDetail } from '@ibiz/model-core';
 import { IButtonContainerState } from '@ibiz-template/runtime';
 import './button-list.scss';
 /**
@@ -20,11 +20,12 @@ export declare const IBizButtonList: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
-    buttonStyle: import("vue").ComputedRef<any>;
-    renderDropdown: () => JSX.Element;
+    buttonListStyle: import("vue").ComputedRef<any>;
+    details: import("vue").ComputedRef<IAppDEUIActionGroupDetail[] | import("@ibiz/model-core").IPanelButton[] | import("@ibiz/model-core").IDEFormButton[]>;
+    renderDropdown: (items: IAppDEUIActionGroupDetail[], iconName?: string) => JSX.Element;
     renderActions: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (_e: MouseEvent, _actionId: string) => true;
+    click: (_id: string, _e: MouseEvent) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     model: {
         type: PropType<IPanelButtonList | IDEFormButtonList>;
@@ -39,7 +40,7 @@ export declare const IBizButtonList: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onClick?: ((_e: MouseEvent, _actionId: string) => any) | undefined;
+    onClick?: ((_id: string, _e: MouseEvent) => any) | undefined;
 }, {
     disabled: boolean;
 }, {}>;

package/es/common/button-list/button-list.mjs

@@ -1,6 +1,9 @@
-import { isVNode, defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
+import { isVNode, ref, computed, nextTick, onActivated, onDeactivated, onMounted, resolveComponent, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { debounce } from 'lodash-es';
+import '../../util/index.mjs';
 import './button-list.css';
+import { convertBtnType } from '../../util/button-util/button-util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -23,23 +26,35 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
     }
   },
   emits: {
-    click: (_e, _actionId) => true
+    click: (_id, _e) => true
   },
   setup(props, {
     emit
   }) {
     const ns = useNamespace("button-list");
     const dropdown = ref();
+    const componentRef = ref();
     const {
-      uiactionGroup,
-      actionGroupExtractMode
+      actionGroupExtractMode,
+      buttonListType,
+      uiactionGroup
     } = props.model;
+    const sliceIndex = ref(-1);
+    const isActivated = ref(true);
+    const visible = ref(false);
+    const details = computed(() => {
+      if (buttonListType === "UIACTIONGROUP")
+        return (uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) || [];
+      return props.model.panelButtons || props.model.deformButtons || [];
+    });
     const firstIndex = computed(() => {
-      var _a;
-      const index = (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.findIndex((item) => props.buttonsState[item.id].visible);
+      const index = details.value.findIndex((item) => {
+        var _a;
+        return ((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) !== false;
+      });
       return index === void 0 ? -1 : index;
     });
-    const buttonStyle = computed(() => {
+    const buttonListStyle = computed(() => {
       const {
         itemStyle,
         detailStyle
@@ -47,47 +62,103 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
       return itemStyle || detailStyle || "DEFAULT";
     });
     const trigger = computed(() => {
-      return actionGroupExtractMode === "ITEMX" && buttonStyle.value === "STYLE2" ? "hover" : "click";
+      return actionGroupExtractMode === "ITEMX" && buttonListStyle.value === "STYLE2" ? "hover" : "click";
+    });
+    const calcItemWidth = (item) => {
+      const computedStyle = getComputedStyle(item);
+      const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+      const marginRight = Number.parseInt(computedStyle.marginRight, 10);
+      return item.offsetWidth + marginLeft + marginRight || 0;
+    };
+    const calcSliceIndex = () => {
+      var _a;
+      if (!componentRef.value)
+        return -1;
+      const items = Array.from((_a = componentRef.value.children) != null ? _a : []);
+      const moreItemWidth = 44;
+      const computedStyle = getComputedStyle(componentRef.value);
+      const paddingLeft = Number.parseInt(computedStyle.paddingLeft, 10);
+      const paddingRight = Number.parseInt(computedStyle.paddingRight, 10);
+      const totalWidth = componentRef.value.clientWidth - paddingLeft - paddingRight;
+      let calcWidth = 0;
+      let index = 0;
+      items.forEach((item, _index) => {
+        calcWidth += calcItemWidth(item);
+        const width = _index === items.length - 1 ? totalWidth : totalWidth - moreItemWidth;
+        if (calcWidth <= width) {
+          index = _index + 1;
+        }
+      });
+      return index === items.length ? -1 : index;
+    };
+    let handleResize = () => {
+      if (!isActivated.value) {
+        return;
+      }
+      if (sliceIndex.value === calcSliceIndex())
+        return;
+      sliceIndex.value = -1;
+      nextTick(() => {
+        sliceIndex.value = calcSliceIndex();
+      });
+    };
+    onActivated(() => {
+      isActivated.value = true;
+    });
+    onDeactivated(() => {
+      isActivated.value = false;
+    });
+    let resizeObserver;
+    onMounted(() => {
+      if (actionGroupExtractMode === "ITEM" || buttonListType === "BUTTONS") {
+        handleResize = debounce(handleResize, 33.34);
+        if (componentRef.value && ResizeObserver) {
+          resizeObserver = new ResizeObserver(() => {
+            handleResize();
+          });
+          resizeObserver.observe(componentRef.value);
+        }
+      }
     });
     const handleClick = (e, item) => {
       var _a, _b;
       e.stopPropagation();
       (_b = (_a = dropdown.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
-      emit("click", e, item.uiactionId);
+      emit("click", item.id, e);
     };
     const handleMoreClick = (e, item) => {
+      var _a, _b, _c, _d;
+      e.stopPropagation();
       if (trigger.value === "hover") {
-        emit("click", e, item.uiactionId);
-      }
-    };
-    const renderButton = (item, disabled = false) => {
-      var _a, _b;
-      if (props.buttonsState[item.id].visible) {
-        return createVNode(resolveComponent("el-button"), {
-          "class": [ns.e("item"), ns.em("item", "".concat((_a = item.id) == null ? void 0 : _a.toLowerCase())), "".concat(((_b = item.sysCss) == null ? void 0 : _b.cssName) || "")],
-          "title": item.tooltip || item.caption,
-          "disabled": props.buttonsState[item.id].disabled || disabled,
-          "onClick": (event) => handleClick(event, item)
-        }, {
-          default: () => [createVNode("div", {
-            "class": ns.e("button-content")
-          }, [item.showIcon && createVNode(resolveComponent("iBizIcon"), {
-            "icon": item.sysImage,
-            "class": ns.em("button-content", "icon")
-          }, null), item.showCaption && createVNode("span", {
-            "class": ns.em("button-content", "caption")
-          }, [item.caption])])]
-        });
+        emit("click", item.id, e);
+      } else if (visible.value) {
+        (_b = (_a = dropdown.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
+      } else {
+        (_d = (_c = dropdown.value) == null ? void 0 : _c.handleOpen) == null ? void 0 : _d.call(_c);
       }
-      return null;
     };
-    const renderActions = () => {
-      var _a;
-      return createVNode("div", {
-        "class": ns.e("content")
-      }, [(_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item) => renderButton(item))]);
+    const renderButton = (item, type) => {
+      var _a, _b, _c, _d;
+      if (((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false)
+        return null;
+      return createVNode(resolveComponent("el-button"), {
+        "class": [ns.e("item"), ns.em("item", "".concat((_b = item.id) == null ? void 0 : _b.toLowerCase())), "".concat(((_c = item.sysCss) == null ? void 0 : _c.cssName) || "")],
+        "type": type || convertBtnType(item.buttonStyle),
+        "title": item.tooltip || item.caption,
+        "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
+        "onClick": (event) => handleClick(event, item)
+      }, {
+        default: () => [createVNode("div", {
+          "class": ns.e("button-content")
+        }, [item.showIcon && createVNode(resolveComponent("iBizIcon"), {
+          "icon": item.sysImage,
+          "class": ns.em("button-content", "icon")
+        }, null), item.showCaption && createVNode("span", {
+          "class": ns.em("button-content", "caption")
+        }, [item.caption])])]
+      });
     };
-    const renderDropdown = () => {
+    const renderDropdown = (items, iconName = "chevron-down-outline") => {
       const {
         id,
         caption,
@@ -96,8 +167,9 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
       return createVNode(resolveComponent("el-dropdown"), {
         "ref": dropdown,
         "trigger": trigger.value,
-        "class": [ns.e("dropdown"), ns.em("dropdown", "".concat(buttonStyle.value.toLowerCase()))],
-        "popper-class": [ns.e("dropdown-popper"), ns.em("dropdown-popper", "".concat(buttonStyle.value.toLowerCase())), ns.em("dropdown-popper", "".concat(id == null ? void 0 : id.toLowerCase()))],
+        "disabled": props.disabled,
+        "class": [ns.e("dropdown"), ns.em("dropdown", "".concat(buttonListStyle.value.toLowerCase()))],
+        "popper-class": [ns.e("dropdown-popper"), ns.em("dropdown-popper", "".concat(buttonListStyle.value.toLowerCase())), ns.em("dropdown-popper", "".concat(id == null ? void 0 : id.toLowerCase()))],
         "popper-options": {
           modifiers: [{
             name: "offset",
@@ -105,15 +177,19 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
               offset: [0, 4]
             }
           }]
+        },
+        "onVisibleChange": (show) => {
+          visible.value = show;
         }
       }, {
         default: () => {
-          const item = uiactionGroup.uiactionGroupDetails[firstIndex.value];
+          const item = items[firstIndex.value];
           return createVNode(resolveComponent("el-button-group"), null, {
-            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, props.disabled), (actionGroupExtractMode !== "ITEMX" || item) && createVNode(resolveComponent("el-button"), {
+            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, convertBtnType(buttonListStyle.value)), (actionGroupExtractMode !== "ITEMX" || item) && createVNode(resolveComponent("el-button"), {
               "disabled": props.disabled,
               "class": ns.e("more-button"),
               "title": actionGroupExtractMode !== "ITEMX" ? caption || ibiz.i18n.t("app.more") : ibiz.i18n.t("app.more"),
+              "type": convertBtnType(buttonListStyle.value),
               "onClick": (event) => handleMoreClick(event, item)
             }, {
               default: () => [createVNode("div", {
@@ -124,31 +200,42 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
               }, null), caption ? createVNode("span", {
                 "class": ns.em("button-content", "caption")
               }, [caption]) : null] : createVNode("ion-icon", {
-                "name": "chevron-down-outline",
+                "name": iconName,
                 "class": ns.em("button-content", "more")
               }, null)])]
             })]
           });
         },
-        dropdown: () => createVNode(resolveComponent("el-dropdown-menu"), null, {
-          default: () => {
+        dropdown: () => {
+          let _slot2;
+          return createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot2 = items.map((item, index) => {
             var _a;
-            return [(_a = uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item, index) => {
-              if (props.buttonsState[item.id].visible && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
-                let _slot;
-                return createVNode(resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
-                  default: () => [_slot]
-                });
-              }
-              return null;
-            })];
-          }
-        })
+            if (!(((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false) && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
+              let _slot;
+              return createVNode(resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
+                default: () => [_slot]
+              });
+            }
+            return null;
+          })) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        }
       });
     };
+    const renderActions = () => {
+      const groupDetails = details.value || [];
+      const items = sliceIndex.value === -1 ? groupDetails : groupDetails.slice(0, sliceIndex.value);
+      const moreItems = sliceIndex.value === -1 ? [] : groupDetails.slice(sliceIndex.value);
+      return createVNode("div", {
+        "class": ns.e("content"),
+        "ref": componentRef
+      }, [items.map((item) => renderButton(item)), moreItems.length ? renderDropdown(moreItems, "ellipsis-horizontal") : null]);
+    };
     return {
       ns,
-      buttonStyle,
+      buttonListStyle,
+      details,
       renderDropdown,
       renderActions
     };
@@ -156,9 +243,9 @@ const IBizButtonList = /* @__PURE__ */ defineComponent({
   render() {
     var _a;
     return createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonStyle.toLowerCase()), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
+      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonListStyle.toLowerCase()), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
       "style": this.model.cssStyle
-    }, [this.model.actionGroupExtractMode === "ITEM" ? this.renderActions() : this.renderDropdown()]);
+    }, [this.model.actionGroupExtractMode === "ITEM" || this.model.buttonListType === "BUTTONS" ? this.renderActions() : this.renderDropdown(this.details)]);
   }
 });
 

package/es/common/carousel/carousel.mjs

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

package/es/common/carousel-card/carousel-card.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, nextTick, createVNode } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './carousel-card.css';
 

package/es/common/col/col.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, computed, createVNode, h, resolveComponent } from 'vue';
+import { computed, createVNode, resolveComponent, h, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { calcContentAlignStyle } from '@ibiz-template/runtime';
 import './col.css';

package/es/common/control-navigation/control-navigation.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, h, resolveComponent, createVNode } from 'vue';
+import { ref, watch, onMounted, resolveComponent, h, createVNode, defineComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { getNavigationProvider } from './provider/index.mjs';
 import './control-navigation.css';
@@ -67,6 +67,8 @@ const IBizControlNavigation = /* @__PURE__ */ defineComponent({
     });
     const renderNavView = () => {
       if (navViewMsg.value) {
+        if (!navViewMsg.value.viewId)
+          return;
         return h(resolveComponent("IBizViewShell"), {
           ...navViewMsg.value,
           class: ns.e("nav-view")

package/es/common/control-navigation/provider/navigation-base.provider.mjs

@@ -114,9 +114,12 @@ class NavgationBaseProvider {
    * @memberof NavgationBaseProvider
    */
   onNavDataChange(event) {
+    var _a;
     const { navData, context, params } = event;
-    this.navStack.unshift(navData[this.keyName]);
-    this.navViewMsg.value = this.getNavViewMsg(navData, context, params);
+    if (((_a = this.navViewMsg.value) == null ? void 0 : _a.key) !== navData[this.keyName]) {
+      this.navStack.unshift(navData[this.keyName]);
+      this.navViewMsg.value = this.getNavViewMsg(navData, context, params);
+    }
   }
   /**
    * 获取导航视图信息

package/es/common/coop-alert/coop-alert.mjs

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

package/es/common/cropping/cropping.css

@@ -0,0 +1 @@
+.ibiz-cropping{display:flex;flex-direction:column;gap:var(--ibiz-spacing-tight);height:500px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-cropping__content{flex:1;flex-direction:column;gap:var(--ibiz-spacing-tight);width:100%;height:100%;overflow:hidden}.ibiz-cropping__content--crop{position:relative;height:400px;overflow:hidden}.ibiz-cropping__content--croparea{position:absolute;top:50%;left:50%;z-index:10;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,.5);cursor:move;content:"";background:0 0;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 0 9999em;transform:translate(-50%,-50%)}.ibiz-cropping__content--img{position:absolute;inset:0;top:50%;left:50%;max-width:100%;max-height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translate(-50%,-50%)}.ibiz-cropping__content--scale-slider{display:flex;gap:var(--ibiz-spacing-base);align-items:center;align-self:center;justify-content:center;width:50%;margin:var(--ibiz-spacing-base-tight) auto;font-size:var(--ibiz-font-size-regular)}.ibiz-cropping__content--scale-icon{cursor:pointer}.ibiz-cropping__content--scale-icon:hover{color:var(--ibiz-color-primary-hover)}.ibiz-cropping__footer{display:flex;flex-shrink:0;gap:var(--ibiz-spacing-base);align-items:end;justify-content:end;height:50px;overflow:hidden;border-top:1px solid var(--ibiz-color-border)}.ibiz-cropping__footer--cancel{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);cursor:pointer;border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-cropping__footer--cancel:hover{color:var(--ibiz-color-primary);border-color:var(--ibiz-color-primary);outline:0}.ibiz-cropping__footer--confirm{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);color:var(--ibiz-color-primary-text);cursor:pointer;background-color:var(--ibiz-color-primary);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small)}.ibiz-cropping__footer--confirm:hover{background-color:var(--ibiz-color-primary-hover)}

package/es/common/cropping/cropping.d.ts

@@ -0,0 +1,54 @@
+import { PropType, Ref } from 'vue';
+import './cropping.scss';
+export declare const IBizCropping: import("vue").DefineComponent<{
+    img: {
+        type: PropType<IData>;
+    };
+    url: {
+        type: StringConstructor;
+    };
+    cropareaWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    cropareaHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    cropImgUrl: import("vue").ComputedRef<string>;
+    scaleNumber: Ref<number>;
+    style: import("vue").ComputedRef<IData>;
+    uuid: string;
+    imgRef: Ref<any>;
+    onReduce: () => void;
+    onAdd: () => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+    onCancel: () => void;
+    onConfirm: () => Promise<void>;
+    onWheel: (e: WheelEvent) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    img: {
+        type: PropType<IData>;
+    };
+    url: {
+        type: StringConstructor;
+    };
+    cropareaWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    cropareaHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    cropareaWidth: number;
+    cropareaHeight: number;
+}, {}>;