@ibiz-template/mob-vue3-components 0.7.41-alpha.19-lts.1 → 0.7.41-alpha.21

package/es/control/toolbar/toolbar-render-util.mjs

@@ -0,0 +1,233 @@
+import { isVNode, createVNode, resolveComponent, h, onBeforeMount, ref, computed } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import '../../util/index.mjs';
+import { ToolbarGroupList } from './toolbar-group-list/toolbar-group-list.mjs';
+import { FloatToolbar } from './float-toolbar/float-toolbar.mjs';
+import { convertBtnType } from '../../util/button-util/button-util.mjs';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getGroupItemxFirstIndex(details, buttonsState, index) {
+  if (index >= details.length)
+    return -1;
+  const firstItem = details[index];
+  if (firstItem) {
+    if (buttonsState[firstItem.id].visible) {
+      return index;
+    }
+    return getGroupItemxFirstIndex(details, buttonsState, index + 1);
+  }
+  return -1;
+}
+function useToolBarItemRender(ns, state) {
+  const btnType = (item) => {
+    return convertBtnType(item);
+  };
+  const getToolbarItemRenderProps = (item, isGroupExtractMode) => {
+    var _a;
+    return {
+      itemModel: item,
+      key: item.id,
+      cssName: (_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName,
+      title: item.tooltip || item.caption,
+      type: btnType(item),
+      isGroupExtractMode
+    };
+  };
+  const renderToolbarItemContent = (item) => {
+    const toolbarItem = item;
+    const counterNum = state.counterData && toolbarItem.counterId ? state.counterData[toolbarItem.counterId] : null;
+    const icon = toolbarItem.showIcon && toolbarItem.sysImage ? toolbarItem.sysImage : null;
+    const label = (toolbarItem.showCaption || item.buttonType === "extra") && item.caption ? toolbarItem.caption : null;
+    return createVNode(resolveComponent("iBizInfoItem"), {
+      "class": ns.b("item"),
+      "icon": icon,
+      "label": label,
+      "badge": counterNum,
+      "badgeFloat": false
+    }, null);
+  };
+  return {
+    getToolbarItemRenderProps,
+    btnType,
+    renderToolbarItemContent
+  };
+}
+function useToolbarGroupModalHandler(opts) {
+  const ns = useNamespace("toolbar-group-modal");
+  const {
+    buttonsState,
+    modal,
+    counterData,
+    modalCloseCallback
+  } = opts;
+  const getGroupItems = (item, isGroupExtractMode) => {
+    var _a;
+    let items = item.detoolbarItems;
+    if (isGroupExtractMode) {
+      const {
+        groupExtractMode
+      } = item;
+      items = (_a = item == null ? void 0 : item.uiactionGroup) == null ? void 0 : _a.uiactionGroupDetails;
+      if (groupExtractMode === "ITEMX") {
+        if (!(items == null ? void 0 : items.length))
+          return [];
+        const firstIndex = getGroupItemxFirstIndex(items, buttonsState, 0);
+        items = items.slice(firstIndex + 1).filter((_item) => !!buttonsState[_item.id].visible);
+      }
+    }
+    return items || [];
+  };
+  const handleActionItemClick = (item, event, isGroupExtractMode) => {
+    modal == null ? void 0 : modal.dismiss({
+      ok: true,
+      data: [{
+        event,
+        action: item,
+        isGroupExtractMode
+      }]
+    });
+  };
+  let groupModalOverlay;
+  const handleGroupItemClick = async (_item, _event, _isGroupExtractMode = false) => {
+    var _a;
+    const groupItems = getGroupItems(_item, _isGroupExtractMode);
+    if (!groupItems.length)
+      return;
+    groupModalOverlay = ibiz.overlay.createDrawer((_modal) => {
+      return h(ToolbarGroupList, {
+        modal: _modal,
+        groupItems,
+        counterData,
+        buttonsState,
+        isGroupExtractMode: _isGroupExtractMode
+      });
+    }, {}, {
+      height: "auto",
+      attrs: {
+        position: "bottom",
+        overlayClass: `${ns.b()}`,
+        closeable: false,
+        round: true
+      }
+    });
+    groupModalOverlay.present();
+    const res = await groupModalOverlay.onWillDismiss();
+    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if (item) {
+      const {
+        action,
+        event,
+        isGroupExtractMode
+      } = item;
+      handleActionItemClick(action, event, isGroupExtractMode);
+      modalCloseCallback == null ? void 0 : modalCloseCallback(action, event, isGroupExtractMode);
+    }
+  };
+  const handleItemClick = async (item, event, isGroupExtractMode) => {
+    if (item.itemType === "ITEMS") {
+      handleGroupItemClick(item, event);
+      return;
+    }
+    if (item.itemType === "DEUIACTION" || isGroupExtractMode) {
+      handleActionItemClick(item, event, isGroupExtractMode);
+    }
+  };
+  onBeforeMount(() => {
+    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  });
+  return {
+    handleItemClick,
+    handleGroupItemClick
+  };
+}
+function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
+  const floatToolbarOverlay = ref();
+  const modalPlacement = computed(() => {
+    let placement = "";
+    switch (c.placement) {
+      case "LEFTSTART":
+      case "LEFT":
+      case "LEFTEND":
+        placement = "right";
+        break;
+      case "RIGHTSTART":
+      case "RIGHT":
+      case "RIGHTEND":
+      default:
+        placement = "left";
+        break;
+    }
+    if (c.direction === "VERTICAL") {
+      switch (c.placement) {
+        case "LEFTSTART":
+        case "LEFT":
+        case "LEFTEND":
+          placement = "right-start";
+          break;
+        case "RIGHTSTART":
+        case "RIGHT":
+        case "RIGHTEND":
+        default:
+          placement = "left-start";
+          break;
+      }
+    }
+    return placement;
+  });
+  const onFloatBtnClick = async (_event, _currentTarget) => {
+    var _a;
+    floatToolbarOverlay.value = ibiz.overlay.createPopover((modal) => {
+      return h(FloatToolbar, {
+        modal,
+        modelData: props.modelData,
+        buttonsState: c.state.buttonsState,
+        counterData: c.state.counterData,
+        placement: c.placement,
+        direction: c.direction
+      });
+    }, {}, {
+      width: "auto",
+      height: "auto",
+      noArrow: true,
+      placement: modalPlacement.value,
+      modalClass: `${ns.b("float-toolbar-modal")}`
+    });
+    floatToolbarOverlay.value.present(_currentTarget);
+    const res = await floatToolbarOverlay.value.onWillDismiss();
+    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if (item) {
+      const {
+        action,
+        event
+      } = item;
+      modalCloseCallback(action, event);
+    }
+    floatToolbarOverlay.value = void 0;
+  };
+  onBeforeMount(() => {
+    floatToolbarOverlay.value = void 0;
+  });
+  const renderFloatButton = () => {
+    const slot = {};
+    if (floatToolbarOverlay.value)
+      Object.assign(slot, {
+        icon: () => createVNode(resolveComponent("van-icon"), {
+          "name": "cross"
+        }, null)
+      });
+    return createVNode(resolveComponent("iBizFloatButton"), {
+      "align": c.placement,
+      "onClick": onFloatBtnClick
+    }, _isSlot(slot) ? slot : {
+      default: () => [slot]
+    });
+  };
+  return {
+    renderFloatButton
+  };
+}
+
+export { getGroupItemxFirstIndex, useCustomToolBarRender, useToolBarItemRender, useToolbarGroupModalHandler };

package/es/control/toolbar/toolbar.css

@@ -1 +1 @@
-.ibiz-control-toolbar{--ibiz-control-toolbar-item-margin:0 0.25rem;--ibiz-control-toolbar-icon-margin:0 0.3125rem 0 0;--ibiz-control-toolbar-icon-max-width:1rem;--ibiz-control-toolbar-icon-max-height:1rem;--ibiz-control-toolbar-icon-font-size:1.25rem;--ibiz-control-toolbar-toolbar-bottom-padding:var(--ibiz-spacing-base-tight);display:flex;height:100%}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin)}.ibiz-control-toolbar__item-left{margin-left:0}.ibiz-control-toolbar__item-left .van-button{border:none}.ibiz-control-toolbar__item-left .van-button ion-icon{font-size:var(--ibiz-control-toolbar-icon-font-size)}.ibiz-control-toolbar__item-left .van-button .van-button__text{display:flex;align-items:center}.ibiz-control-toolbar__item-right{margin-right:0}.ibiz-control-toolbar__item-right .van-button{border:none}.ibiz-control-toolbar__item-right .van-button ion-icon{font-size:var(--ibiz-control-toolbar-icon-font-size)}.ibiz-control-toolbar__item-right .van-button .van-button__text{display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-control-toolbar__popover{--ibiz-color-bg-0:var(--van-popover-light-text-color)}.ibiz-control-toolbar__popover .van-popover__action--disabled,.ibiz-control-toolbar__popover .van-popover__action--disabled:active{color:var(--ibiz-color-disabled-text)!important;background-color:var(--ibiz-color-disabled-bg)}.ibiz-control-toolbar__popover-item{--ibiz-control-toolbar-popover-icon-font-size:0.875rem;display:flex;align-items:center;gap:var(--ibiz-spacing-extra-tight)}.ibiz-control-toolbar__popover-item .ibiz-icon{width:var(--ibiz-control-toolbar-popover-icon-font-size);height:var(--ibiz-control-toolbar-popover-icon-font-size);display:flex;align-items:center}.ibiz-control-toolbar__popover-item .ibiz-icon *{width:var(--ibiz-control-toolbar-popover-icon-font-size);height:var(--ibiz-control-toolbar-popover-icon-font-size)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar-mobnavrightmenu__item{margin-right:0}.ibiz-control-toolbar-right{justify-content:flex-end}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-toolbar-bottom-padding)}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item{flex:1;--van-button-default-height:2.5rem}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item button{width:100%}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item .van-button__text{display:flex;gap:8px;align-items:center}
+.ibiz-control-toolbar{--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-height:100%;--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-toolbar-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-item-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-toolbar-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-toolbar-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-toolbar-item-font-size:var(--ibiz-font-size-header-6);display:flex;flex-wrap:wrap;gap:var(--ibiz-control-toolbar-spacing-gap);height:var(--ibiz-control-toolbar-height)}.ibiz-control-toolbar__item{display:flex;align-items:center}.ibiz-control-toolbar__group{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx .van-button:nth-child(1){border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.ibiz-control-toolbar__group-itemx .van-button:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0}.ibiz-control-toolbar .van-button__text{display:flex;align-items:center}.ibiz-control-toolbar .ibiz-control-toolbar-item{--ibiz-info-item-spacing-badge-margin:var(--ibiz-control-toolbar-spacing-item-badge-margin);font-size:var(--ibiz-control-toolbar-font-item-font-size);white-space:nowrap}.ibiz-control-toolbar .ibiz-control-toolbar-item:not(:has(svg,img)) .ibiz-icon{width:auto;min-width:var(--ibiz-control-toolbar-width-icon-min-width)}.ibiz-control-toolbar-left .van-button{border:none}.ibiz-control-toolbar-left .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-left-toolbar-item-font-size)}.ibiz-control-toolbar-right{justify-content:flex-end}.ibiz-control-toolbar-right .van-button{border:none}.ibiz-control-toolbar-right .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-right-toolbar-item-font-size)}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-spacing-bottom-toolbar-padding)}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item{flex:1}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item:nth-child(1){margin-left:0}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item .van-button{width:100%;height:var(--ibiz-control-toolbar-height-bottom-toolbar-item)}.ibiz-toolbar-group-list{--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-height:100%;--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-toolbar-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-item-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-toolbar-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-toolbar-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-toolbar-item-font-size:var(--ibiz-font-size-header-6)}.ibiz-control-toolbar-float-toolbar-modal.ibiz-popover{background-color:unset;border:none;box-shadow:unset}

package/es/control/toolbar/toolbar.mjs

@@ -1,41 +1,13 @@
-import { isVNode, createVNode, resolveComponent, defineComponent, computed } from 'vue';
-import { useNamespace, useControlController } from '@ibiz-template/vue3-util';
+import { isVNode, defineComponent, createVNode, resolveComponent, computed } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { ToolbarController } from '@ibiz-template/runtime';
-import { IBizPopperToolbar } from './popper-toolbar/popper-toolbar.mjs';
-import '../../util/index.mjs';
+import { useToolBarItemRender, useToolbarGroupModalHandler, useCustomToolBarRender, getGroupItemxFirstIndex } from './toolbar-render-util.mjs';
 import './toolbar.css';
-import { convertBtnType } from '../../util/button-util/button-util.mjs';
 
 "use strict";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const btnContent = (item, state) => {
-  const tempItem = item;
-  const counterNum = state && tempItem.counterId ? state.counterData[tempItem.counterId] : void 0;
-  const image = item.sysImage;
-  const result = [];
-  const ns = useNamespace("toolbar-item");
-  if (item.showIcon && image) {
-    result.push(createVNode(resolveComponent("iBizIcon"), {
-      "class": ns.b("icon"),
-      "icon": image
-    }, null));
-  }
-  if ((item.showCaption || item.buttonType === "extra") && item.caption) {
-    result.push(createVNode("span", {
-      "class": ns.b("text")
-    }, [item.caption]));
-  }
-  if (counterNum) {
-    result.push(createVNode(resolveComponent("iBizBadge"), {
-      "class": ns.b("counter"),
-      "value": counterNum,
-      "counterMode": tempItem.counterMode
-    }, null));
-  }
-  return result;
-};
 const ToolbarControl = /* @__PURE__ */ defineComponent({
   name: "IBizToolbarControl",
   props: {
@@ -71,9 +43,6 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
   setup(props) {
     const c = useControlController((...args) => new ToolbarController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
-    const handleClick = async (item, event) => {
-      await c.onItemClick(item, event);
-    };
     let position = "";
     switch (props.modelData.toolbarStyle) {
       case "MOBNAVRIGHTMENU":
@@ -94,145 +63,169 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     const btnSize = computed(() => {
       return position === "bottom" ? "normal" : "small";
     });
-    const btnType = (item) => {
-      if (item.actionLevel && item.actionLevel > 100)
-        return "primary";
-      return convertBtnType(item.buttonStyle);
-    };
-    const getChildrenActions = (item) => {
-      var _a;
-      let result = [];
-      const visibleItems = (_a = item.detoolbarItems) == null ? void 0 : _a.filter((_item) => {
-        var _a2;
-        return (_a2 = c.state.buttonsState[_item.id]) == null ? void 0 : _a2.visible;
-      });
-      if (visibleItems && visibleItems.length > 0) {
-        result = visibleItems.map((_item) => {
-          var _a2, _b;
-          return {
-            ..._item,
-            disabled: (_a2 = c.state.buttonsState[_item.id]) == null ? void 0 : _a2.disabled,
-            className: (_b = _item.sysCss) == null ? void 0 : _b.cssName
-          };
+    const handleClick = async (item, event, isGroupExtractMode) => {
+      const tempItem = {
+        ...item
+      };
+      if (isGroupExtractMode) {
+        Object.assign(tempItem, {
+          ...item,
+          itemType: item.detailType
         });
       }
-      return result;
+      await c.onItemClick(tempItem, event);
+    };
+    const {
+      btnType,
+      getToolbarItemRenderProps,
+      renderToolbarItemContent
+    } = useToolBarItemRender(ns, c.state);
+    const {
+      handleGroupItemClick
+    } = useToolbarGroupModalHandler({
+      buttonsState: c.state.buttonsState,
+      counterData: c.state.counterData,
+      modalCloseCallback: handleClick.bind(this)
+    });
+    const {
+      renderFloatButton
+    } = useCustomToolBarRender(ns, props, c, handleClick.bind(this));
+    const renderActionItem = (_opts) => {
+      let _slot;
+      const {
+        itemModel,
+        key,
+        cssName,
+        title,
+        type,
+        isGroupExtractMode
+      } = _opts;
+      return createVNode("div", {
+        "key": key,
+        "class": [ns.e("item"), cssName]
+      }, [createVNode(resolveComponent("van-button"), {
+        "title": title,
+        "size": btnSize.value,
+        "type": type,
+        "loading": c.state.buttonsState[key].loading,
+        "disabled": c.state.buttonsState[key].disabled,
+        "onClick": (e) => handleClick(itemModel, e, isGroupExtractMode)
+      }, _isSlot(_slot = renderToolbarItemContent(itemModel)) ? _slot : {
+        default: () => [_slot]
+      })]);
+    };
+    const renderGroupItem = (_opts) => {
+      let _slot2;
+      const {
+        itemModel,
+        key,
+        type,
+        isGroupExtractMode
+      } = _opts;
+      return createVNode("div", {
+        "key": key,
+        "class": [ns.e("group")]
+      }, [createVNode(resolveComponent("van-button"), {
+        "size": btnSize.value,
+        "type": type,
+        "onClick": (e) => handleGroupItemClick(itemModel, e, isGroupExtractMode)
+      }, _isSlot(_slot2 = renderToolbarItemContent(itemModel)) ? _slot2 : {
+        default: () => [_slot2]
+      })]);
+    };
+    const renderActionGroupItems = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        return renderGroupItem(getToolbarItemRenderProps(item, true));
+      }
+      return null;
+    };
+    const renderActionGroupItemx = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        const firstIndex = getGroupItemxFirstIndex(uiactionGroupDetails, c.state.buttonsState, 0);
+        if (firstIndex !== -1) {
+          const firstItem = uiactionGroupDetails[firstIndex];
+          return createVNode("div", {
+            "key": item.id,
+            "class": [ns.e("group-itemx")]
+          }, [renderActionItem(getToolbarItemRenderProps(firstItem, true)), createVNode(resolveComponent("van-button"), {
+            "size": btnSize.value,
+            "type": btnType(item),
+            "icon": "arrow-down",
+            "onClick": (e) => handleGroupItemClick(item, e, true)
+          }, null)]);
+        }
+      }
+      return null;
+    };
+    const renderActionGroupItem = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        return uiactionGroupDetails.map((detail) => renderActionItem(getToolbarItemRenderProps(detail, true)));
+      }
+      return null;
+    };
+    const renderActionGroup = (item) => {
+      const {
+        groupExtractMode
+      } = item;
+      switch (groupExtractMode) {
+        case "ITEMS":
+          return renderActionGroupItems(item);
+        case "ITEMX":
+          return renderActionGroupItemx(item);
+        case "ITEM":
+        default:
+          return renderActionGroupItem(item);
+      }
     };
     const renderExtraButtons = (extraButtons) => {
       return extraButtons.map((button) => {
-        let _slot;
+        let _slot3;
         return createVNode("div", {
           "key": button.id,
-          "class": [ns.e("item"), ns.e("item-extra"), ns.e(`item-${position}`)]
+          "class": [ns.e("item"), ns.e("item-extra")]
         }, [createVNode(resolveComponent("van-button"), {
           "title": button.tooltip,
           "size": btnSize.value,
           "onClick": (e) => handleClick(button, e)
-        }, _isSlot(_slot = btnContent(button, c.state)) ? _slot : {
-          default: () => [_slot]
+        }, _isSlot(_slot3 = renderToolbarItemContent(button)) ? _slot3 : {
+          default: () => [_slot3]
         })]);
       });
     };
     const renderToolbarItem = (item) => {
-      var _a, _b, _c, _d;
+      var _a;
       const itemId = item.id;
+      const visible = (_a = c.state.buttonsState[itemId]) == null ? void 0 : _a.visible;
       if (["SEPERATOR", "RAWITEM"].includes(item.itemType)) {
         ibiz.log.error(ibiz.i18n.t("control.toolbar.noSupportType", {
           itemType: item.itemType
         }));
         return null;
       }
-      if (item.itemType === "ITEMS" && ((_a = c.state.buttonsState[itemId]) == null ? void 0 : _a.visible)) {
-        const placement = position === "right" ? "bottom-end" : "bottom";
-        return createVNode("div", {
-          "key": itemId,
-          "class": [ns.e("item"), ns.e("item-items"), ns.e(`item-${position}`)]
-        }, [createVNode(resolveComponent("van-popover"), {
-          "class": [ns.e("popover"), (_b = item.sysCss) == null ? void 0 : _b.cssName],
-          "actions": getChildrenActions(item),
-          "placement": placement,
-          "onSelect": (data, e) => {
-            handleClick(data, e);
-          }
-        }, {
-          action: ({
-            action
-          }) => {
-            const image = action.sysImage;
-            const counterNum = c.state && item.counterId ? c.state.counterData[item.counterId] : void 0;
-            let icon = null;
-            let text = null;
-            let counter = null;
-            if (action.showIcon) {
-              icon = createVNode(resolveComponent("iBizIcon"), {
-                "class": ns.e("icon"),
-                "icon": image
-              }, null);
-            }
-            if (action.showCaption) {
-              text = createVNode("span", {
-                "class": ns.e("text")
-              }, [action.caption]);
-            }
-            if (counterNum) {
-              counter = createVNode(resolveComponent("iBizBadge"), {
-                "class": ns.b("counter"),
-                "value": counterNum,
-                "counterMode": item.counterMode
-              }, null);
-            }
-            return createVNode("span", {
-              "class": ns.e("popover-item")
-            }, [icon, text, counter]);
-          },
-          reference: () => {
-            const image = item.sysImage;
-            const counterNum = c.state && item.counterId ? c.state.counterData[item.counterId] : void 0;
-            let icon = null;
-            let text = null;
-            let counter = null;
-            if (item.showIcon) {
-              icon = createVNode(resolveComponent("iBizIcon"), {
-                "class": ns.e("icon"),
-                "icon": image
-              }, null);
-            }
-            if (item.showCaption) {
-              text = createVNode("span", {
-                "class": ns.e("text")
-              }, [item.caption]);
-            }
-            if (counterNum) {
-              counter = createVNode(resolveComponent("iBizBadge"), {
-                "class": ns.b("counter"),
-                "value": counterNum,
-                "counterMode": item.counterMode
-              }, null);
-            }
-            return createVNode(resolveComponent("van-button"), {
-              "size": btnSize.value,
-              "type": btnType(item)
-            }, {
-              default: () => [icon, text, counter]
-            });
-          }
-        })]);
+      if (item.itemType === "ITEMS" && visible) {
+        const groupItem = item;
+        if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
+          return renderActionGroup(item);
+        }
+        return renderGroupItem(getToolbarItemRenderProps(item));
       }
-      if (item.itemType === "DEUIACTION" && ((_c = c.state.buttonsState[itemId]) == null ? void 0 : _c.visible)) {
-        let _slot2;
-        return createVNode("div", {
-          "key": itemId,
-          "class": [ns.e("item"), ns.e("item-deuiaction"), ns.e(`item-${position}`), (_d = item.sysCss) == null ? void 0 : _d.cssName]
-        }, [createVNode(resolveComponent("van-button"), {
-          "title": item.tooltip,
-          "size": btnSize.value,
-          "type": btnType(item),
-          "loading": c.state.buttonsState[itemId].loading,
-          "disabled": c.state.buttonsState[itemId].disabled,
-          "onClick": (e) => handleClick(item, e)
-        }, _isSlot(_slot2 = btnContent(item, c.state)) ? _slot2 : {
-          default: () => [_slot2]
-        })]);
+      if (item.itemType === "DEUIACTION" && visible) {
+        return renderActionItem(getToolbarItemRenderProps(item));
       }
       return null;
     };
@@ -242,6 +235,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       btnSize,
       position,
       handleClick,
+      renderFloatButton,
+      renderToolbarItemContent,
       renderExtraButtons,
       renderToolbarItem
     };
@@ -251,16 +246,13 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       state
     } = this.c;
     if (this.position === "popper") {
-      return createVNode(IBizPopperToolbar, {
-        "context": this.context,
-        "params": this.params,
+      let _slot4;
+      return createVNode(resolveComponent("iBizControlBase"), {
+        "ref": "contentRef",
         "controller": this.c,
-        "modelData": this.modelData,
-        "class": [this.ns.m(state.viewMode.toLowerCase()), this.ns.b(this.position)]
-      }, {
-        btnContent: (item) => {
-          return btnContent(item, state);
-        }
+        "class": [this.ns.b(), this.ns.b(this.position)]
+      }, _isSlot(_slot4 = this.renderFloatButton()) ? _slot4 : {
+        default: () => [_slot4]
       });
     }
     return createVNode(resolveComponent("iBizControlBase"), {

package/es/control/tree/tree.css

@@ -1 +1 @@
-.ibiz-control-treeview{--ibiz-control-treeview-text-color:var(--ibiz-color-text);--ibiz-control-treeview-hover-bg-color:var(--ibiz-color-primary);--ibiz-control-treeview-active-bg-color:var(--ibiz-color-primary);--ibiz-control-treeview-padding:0.625rem;--ibiz-control-treeview-bg-color:var(--ibiz-color-bg-2);--ibiz-control-treeview-node-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-width:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-margin-right:var(--ibiz-spacing-tight);height:100%;padding:0 var(--ibiz-control-treeview-padding);background:var(--ibiz-control-treeview-bg-color)}.ibiz-control-treeview-content{--ibiz-control-treeview-text-color:var(--ibiz-color-text);--ibiz-control-treeview-hover-bg-color:var(--ibiz-color-primary);--ibiz-control-treeview-active-bg-color:var(--ibiz-color-primary);--ibiz-control-treeview-padding:0.625rem;--ibiz-control-treeview-bg-color:var(--ibiz-color-bg-2);height:100%}.ibiz-control-treeview-content .vs-tree-node{position:relative;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview-content .vs-tree-node .vs-tree-inner{display:flex;align-items:center}.ibiz-control-treeview-content .vs-tree-node .vs-icon-leaf,.ibiz-control-treeview-content .vs-tree-node .vs-icon-parent{width:auto;margin-right:0}.ibiz-control-treeview-content .vs-tree-node .ibiz-icon{display:inline-flex;align-items:center;width:var(--ibiz-control-treeview-node-icon-width);height:var(--ibiz-control-treeview-node-icon-height);margin-right:var(--ibiz-control-treeview-node-icon-margin-right)}.ibiz-control-treeview-content .vs-tree-node .ibiz-icon>svg{width:100%;height:100%}.ibiz-control-treeview-content .tree-button{color:var(--ibiz-color-primary)}.ibiz-control-treeview-header{--ibiz-control-treeview-node-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-width:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-margin-right:var(--ibiz-spacing-tight);--ibiz-control-treeview-crumb-icon-top:0.1875rem}.ibiz-control-treeview-header__crumb{display:inline-flex;align-items:center;height:var(--ibiz-height-control-small)}.ibiz-control-treeview-header__crumb .ibiz-icon{display:inline-flex;align-items:center;width:var(--ibiz-control-treeview-node-icon-width);height:var(--ibiz-control-treeview-node-icon-height);margin-right:var(--ibiz-control-treeview-node-icon-margin-right)}.ibiz-control-treeview-header__crumb .ibiz-icon>svg{width:100%;height:100%}.ibiz-control-treeview-header__crumb .ibiz-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-treeview-header__crumb>span:has(img),.ibiz-control-treeview-header__crumb>span:has(svg){position:relative}.ibiz-control-treeview-header__crumb>span:has(img) .ibiz-icon,.ibiz-control-treeview-header__crumb>span:has(svg) .ibiz-icon{position:absolute;top:var(--ibiz-control-treeview-crumb-icon-top)}.ibiz-control-treeview-header__crumb>span:has(img)::after,.ibiz-control-treeview-header__crumb>span:has(svg)::after{display:inline-block;width:var(--ibiz-control-treeview-node-icon-width);margin-right:var(--ibiz-spacing-extra-tight);content:"\e710";opacity:0}.ibiz-control-treeview-header__container{height:auto}.ibiz-control-treeview-header__container .van-sticky,.ibiz-control-treeview-header__container>div{height:auto!important}.ibiz-control-treeview-header.is-no-root>span:has(.ibiz-control-treeview-header__crumb.is-root){display:none}.ibiz-control-treeview-container{width:100%;height:100%;display:flex;flex-direction:column}
+.ibiz-control-treeview{--ibiz-control-treeview-color-text:var(--ibiz-color-text-0);--ibiz-control-treeview-color-bg:var(--ibiz-color-bg-0);--ibiz-control-treeview-color-border:var(--ibiz-color-border);--ibiz-control-treeview-color-node-checkbox-active:var(--ibiz-color-primary);--ibiz-control-treeview-color-node-checkbox-active-text:var(--ibiz-color-white);--ibiz-control-treeview-color-node-primary-btn:var(--ibiz-color-primary);--ibiz-control-treeview-color-node-active:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-color-crumb-history-nav-text:var(--ibiz-color-primary);--ibiz-control-treeview-color-crumb-container-bg:var(--ibiz-color-bg-1);--ibiz-control-treeview-height-node:var(--ibiz-height-control-large);--ibiz-control-treeview-height-crumb:var(--ibiz-height-control-large);--ibiz-control-treeview-width-crumb-back-btn:1.5rem;--ibiz-control-treeview-spacing-padding:0 0 var(--ibiz-spacing-base) 0;--ibiz-control-treeview-spacing-node-padding:0 var(--ibiz-spacing-base);--ibiz-control-treeview-spacing-node-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-treeview-spacing-crumb-padding:0 var(--ibiz-spacing-base);--ibiz-control-treeview-spacing-crumb-item-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-treeview-spacing-crumb-container-padding:0 0 var(--ibiz-spacing-tight) 0;--ibiz-control-treeview-spacing-crumb-container-bottom-ph:var(--ibiz-spacing-tight);--ibiz-control-treeview-position-node-counter-right:var(--ibiz-spacing-base-loose);--ibiz-control-treeview-position-crumb-icon-top:0.1875rem;--ibiz-control-treeview-icon-node-icon-size:1em;--ibiz-control-treeview-icon-crumb-item-icon-ph-size:1em;height:100%;background:var(--ibiz-control-treeview-color-bg)}.ibiz-control-treeview-content{height:100%}.ibiz-control-treeview-content .vs-tree-node{position:relative;padding:var(--ibiz-control-treeview-spacing-node-padding);height:var(--ibiz-control-treeview-height-node);line-height:var(--ibiz-control-treeview-height-node);color:var(--ibiz-control-treeview-color-text)}.ibiz-control-treeview-content .vs-tree-node:hover{background-color:unset}.ibiz-control-treeview-content .vs-tree-node.selected,.ibiz-control-treeview-content .vs-tree-node.selected:hover{background-color:var(--ibiz-control-treeview-color-node-active)}.ibiz-control-treeview-content .vs-tree-node .vs-tree-inner{display:flex;align-items:center;flex:1;overflow:hidden}.ibiz-control-treeview-content .vs-tree-node .vs-tree-text{text-overflow:ellipsis;overflow:hidden}.ibiz-control-treeview-content .vs-tree-node .vs-icon-leaf,.ibiz-control-treeview-content .vs-tree-node .vs-icon-parent{width:auto;margin-right:0}.ibiz-control-treeview-content .vs-tree-node .vs-icon-leaf>span,.ibiz-control-treeview-content .vs-tree-node .vs-icon-parent>span{display:flex;align-items:center}.ibiz-control-treeview-content .vs-tree-node .vs-checkbox{display:inline-flex;align-items:center}.ibiz-control-treeview-content .vs-tree-node .vs-checkbox__inner,.ibiz-control-treeview-content .vs-tree-node .vs-radio__inner{background-color:transparent;border-color:var(--ibiz-control-treeview-color-border)}.ibiz-control-treeview-content .vs-tree-node .vs-checkbox__original:checked~.vs-checkbox__inner{background-color:var(--ibiz-control-treeview-color-node-checkbox-active);border-color:var(--ibiz-control-treeview-color-node-checkbox-active)}.ibiz-control-treeview-content .vs-tree-node .vs-checkbox__original:checked~.vs-checkbox__inner::after{border-color:var(--ibiz-control-treeview-color-node-checkbox-active-text)}.ibiz-control-treeview-content .vs-tree-node .ibiz-icon{display:inline-flex;align-items:center;width:var(--ibiz-control-treeview-icon-node-icon-size);height:var(--ibiz-control-treeview-icon-node-icon-size);margin:var(--ibiz-control-treeview-spacing-node-icon-margin)}.ibiz-control-treeview-content .vs-tree-node .ibiz-icon>svg{width:100%;height:100%}.ibiz-control-treeview-content .ibiz-control-treeview-node-expanded-btn{position:relative;display:flex;align-items:center}.ibiz-control-treeview-content .ibiz-control-treeview-node-expanded-btn .van-icon{color:var(--ibiz-control-treeview-color-node-primary-btn)}.ibiz-control-treeview-content .ibiz-control-treeview-node-expanded-btn .ibiz-badge{position:absolute;right:var(--ibiz-control-treeview-position-node-counter-right)}.ibiz-control-treeview-header__crumb .ibiz-icon{display:inline-flex;align-items:center;width:var(--ibiz-control-treeview-icon-node-icon-size);height:var(--ibiz-control-treeview-icon-node-icon-size);margin:var(--ibiz-control-treeview-spacing-node-icon-margin)}.ibiz-control-treeview-header__crumb .ibiz-icon>svg{width:100%;height:100%}.ibiz-control-treeview-header__crumb .ibiz-icon{margin:var(--ibiz-control-treeview-spacing-crumb-item-icon-margin)}.ibiz-control-treeview-header__crumb>span:has(img),.ibiz-control-treeview-header__crumb>span:has(svg){position:relative}.ibiz-control-treeview-header__crumb>span:has(img) .ibiz-icon,.ibiz-control-treeview-header__crumb>span:has(svg) .ibiz-icon{position:absolute;top:var(--ibiz-control-treeview-position-crumb-icon-top)}.ibiz-control-treeview-header__crumb>span:has(img)::after,.ibiz-control-treeview-header__crumb>span:has(svg)::after{display:inline-flex;align-items:center;width:var(--ibiz-control-treeview-icon-node-icon-size);height:var(--ibiz-control-treeview-icon-node-icon-size);margin:var(--ibiz-control-treeview-spacing-node-icon-margin)}.ibiz-control-treeview-header__crumb>span:has(img)::after>svg,.ibiz-control-treeview-header__crumb>span:has(svg)::after>svg{width:100%;height:100%}.ibiz-control-treeview-header__crumb>span:has(img)::after,.ibiz-control-treeview-header__crumb>span:has(svg)::after{display:inline-block;margin:var(--ibiz-control-treeview-spacing-crumb-item-icon-margin);content:"\e710";opacity:0}.ibiz-control-treeview-header__container{height:auto;padding:var(--ibiz-control-treeview-spacing-crumb-container-padding)}.ibiz-control-treeview-header__container .van-sticky,.ibiz-control-treeview-header__container>div{height:auto!important}.ibiz-control-treeview-header__container.is-hidden{display:none}.ibiz-control-treeview-header__container::after{content:"";position:absolute;width:100%;height:var(--ibiz-control-treeview-spacing-crumb-container-bottom-ph);left:0;background-color:var(--ibiz-control-treeview-color-crumb-container-bg)}.ibiz-control-treeview-header.vs-breadcrumb{height:var(--ibiz-control-treeview-height-crumb);overflow:auto;white-space:nowrap;line-height:var(--ibiz-control-treeview-height-crumb);padding:var(--ibiz-control-treeview-spacing-crumb-padding)}.ibiz-control-treeview-header.vs-breadcrumb .vs-breadcrumb-separator,.ibiz-control-treeview-header.vs-breadcrumb>span,.ibiz-control-treeview-header.vs-breadcrumb>span:last-child{color:var(--ibiz-control-treeview-color-crumb-history-nav-text)}.ibiz-control-treeview-header.vs-breadcrumb>span:not(:last-child),.ibiz-control-treeview-header.vs-breadcrumb>span:not(:last-child):hover{color:var(--ibiz-control-treeview-color-text)}.ibiz-control-treeview-header.is-header-style>span:not(:last-child){display:none}.ibiz-control-treeview-header.is-header-style>span:last-child{display:flex;width:100%}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb--back-btn{display:inline-block;width:var(--ibiz-control-treeview-width-crumb-back-btn);color:var(--ibiz-control-treeview-color-crumb-history-nav-text)}.ibiz-control-treeview-header.is-header-style>span:last-child .vs-breadcrumb-link{flex:1;overflow:hidden}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb{display:flex;align-items:center}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb>span:first-child{display:flex;align-items:center}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb>span:first-child::after{display:none}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb>span:first-child .ibiz-icon{position:unset}.ibiz-control-treeview-header.is-header-style>span:last-child .ibiz-control-treeview-header__crumb>span:last-child{text-overflow:ellipsis;overflow:hidden;flex:1}.ibiz-control-treeview-container{width:100%;height:100%;display:flex;flex-direction:column;padding:var(--ibiz-control-treeview-spacing-padding)}