@ibiz-template/mob-vue3-components 0.7.41-alpha.22 → 0.7.41-alpha.24

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

@@ -40,7 +40,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const c = useControlController((...args) => new SearchBarController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const searchRef = ref();
     const dropdownTop = ref(0);
     const dropdownRef = ref();
@@ -49,7 +49,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
     const isCollapse = ref(true);
     const showItemRemove = ref(false);
     const timer = ref();
-    const queryCacheKey = `searchbar-${props.context.srfuserid}-${props.context.srfappid}-${c.view.model.id}-${c.model.id}`;
+    const queryCacheKey = "searchbar-".concat(props.context.srfuserid, "-").concat(props.context.srfappid, "-").concat(c.view.model.id, "-").concat(c.model.id);
     let funcs;
     const showAllGroups = ref(false);
     let resizeObserver = null;
@@ -97,7 +97,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
     const cssVars = computed(() => {
       if (c.model.quickSearchWidth) {
         return ns.cssVarBlock({
-          "quick-search-width": `${c.model.quickSearchWidth}px`
+          "quick-search-width": "".concat(c.model.quickSearchWidth, "px")
         });
       }
       return {};
@@ -136,7 +136,11 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
           }
         }, null);
       }, void 0, {
-        placement: "bottom"
+        placement: "bottom",
+        height: 80,
+        attrs: {
+          closeable: true
+        }
       });
       popover.present(filterButtonRef.value.$el);
       await popover.onWillDismiss();
@@ -183,8 +187,8 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
     const style = computed(() => {
       return {
         display: showDropdown.value ? "flex" : "none",
-        top: `${dropdownTop.value}px`,
-        maxHeight: `calc(100vh - ${dropdownTop.value}px - 10px)`
+        top: "".concat(dropdownTop.value, "px"),
+        maxHeight: "calc(100vh - ".concat(dropdownTop.value, "px - 10px)")
       };
     });
     const contentStyle = computed(() => {

package/es/control/tab-exp-panel/tab-exp-panel.mjs

@@ -49,7 +49,7 @@ const TabExpPanelControl = /* @__PURE__ */ defineComponent({
   setup() {
     var _a, _b;
     const c = useControlController((...args) => new TabExpPanelController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const model = (_a = c.view) == null ? void 0 : _a.model;
     const layoutMode = ((_b = model == null ? void 0 : model.tabLayout) == null ? void 0 : _b.toLowerCase()) || "top";
     const onTabChange = (value) => {

package/es/control/toolbar/float-toolbar/float-toolbar.css

@@ -1 +1 @@
-.ibiz-float-toolbar{--ibiz-float-toolbar-color-item-bg:var(--ibiz-color-bg-1);--ibiz-float-toolbar-color-box-shadow:var(--ibiz-shadow-elevated);--ibiz-float-toolbar-color-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-float-toolbar-color-disabled-bg:var(--ibiz-control-toolbar-color-disabled-bg);--ibiz-float-toolbar-width-wrapper-max-width:calc(100vw - (var(--ibiz-height-control-large) + var(--ibiz-spacing-tight)));--ibiz-float-toolbar-width-item-min-width:var(--ibiz-height-control-large);--ibiz-float-toolbar-height-item:var(--ibiz-height-control-large);--ibiz-float-toolbar-spacing-wrapper-gap:var(--ibiz-spacing-tight);--ibiz-float-toolbar-spacing-item-padding:var(--ibiz-spacing-tight);--ibiz-float-toolbar-radius-item-circle:var(--ibiz-float-toolbar-height-item);--ibiz-float-toolbar-font-item-font-size:var(--ibiz-font-size-header-6);width:auto;height:auto}.ibiz-float-toolbar__wrapper{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--ibiz-float-toolbar-spacing-wrapper-gap);align-items:center;max-width:var(--ibiz-float-toolbar-width-wrapper-max-width)}.ibiz-float-toolbar__modal{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh}.ibiz-float-toolbar__item{display:flex;align-items:center;justify-content:center;min-width:var(--ibiz-float-toolbar-width-item-min-width);height:var(--ibiz-float-toolbar-height-item);padding:var(--ibiz-float-toolbar-spacing-item-padding);font-size:var(--ibiz-float-toolbar-font-item-font-size);white-space:nowrap;background-color:var(--ibiz-float-toolbar-color-item-bg);border-radius:var(--ibiz-float-toolbar-radius-item-circle);box-shadow:var(--ibiz-float-toolbar-color-box-shadow)}.ibiz-float-toolbar__item.is-disabled{color:var(--ibiz-float-toolbar-color-disabled-text);background-color:var(--ibiz-float-toolbar-color-disabled-bg)}.ibiz-float-toolbar.is-vertical .ibiz-float-toolbar__wrapper{flex-direction:column}
+.ibiz-float-toolbar{--ibiz-float-toolbar-color-item:var(--ibiz-color-text-0);--ibiz-float-toolbar-color-item-bg:var(--ibiz-color-bg-1);--ibiz-float-toolbar-color-box-shadow:var(--ibiz-shadow-elevated);--ibiz-float-toolbar-color-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-float-toolbar-color-disabled-bg:var(--ibiz-control-toolbar-color-disabled-bg);--ibiz-float-toolbar-color-immediate-float-item:var(--ibiz-color-white);--ibiz-float-toolbar-color-immediate-float-item-bg:var(--ibiz-color-primary);--ibiz-float-toolbar-width-wrapper-max-width:calc(100vw - (var(--ibiz-height-control-large) + var(--ibiz-spacing-tight)));--ibiz-float-toolbar-width-item-min-width:var(--ibiz-height-control-large);--ibiz-float-toolbar-height-item:var(--ibiz-height-control-large);--ibiz-float-toolbar-width-immediate-float-item-min-width:2.75rem;--ibiz-float-toolbar-height-immediate-float-item:2.75rem;--ibiz-float-toolbar-spacing-wrapper-gap:var(--ibiz-spacing-tight);--ibiz-float-toolbar-spacing-item-padding:var(--ibiz-spacing-tight);--ibiz-float-toolbar-spacing-immediate-float-padding:var(--ibiz-spacing-base);--ibiz-float-toolbar-radius-item-circle:var(--ibiz-float-toolbar-height-item);--ibiz-float-toolbar-font-item-font-size:var(--ibiz-font-size-header-6);width:auto;height:auto}.ibiz-float-toolbar__wrapper{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--ibiz-float-toolbar-spacing-wrapper-gap);align-items:center;max-width:var(--ibiz-float-toolbar-width-wrapper-max-width)}.ibiz-float-toolbar__modal{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh}.ibiz-float-toolbar__item{display:flex;align-items:center;justify-content:center;min-width:var(--ibiz-float-toolbar-width-item-min-width);height:var(--ibiz-float-toolbar-height-item);padding:var(--ibiz-float-toolbar-spacing-item-padding);font-size:var(--ibiz-float-toolbar-font-item-font-size);color:var(--ibiz-float-toolbar-color-item);white-space:nowrap;background-color:var(--ibiz-float-toolbar-color-item-bg);border-radius:var(--ibiz-float-toolbar-radius-item-circle);box-shadow:var(--ibiz-float-toolbar-color-box-shadow)}.ibiz-float-toolbar__item.is-disabled{color:var(--ibiz-float-toolbar-color-disabled-text);background-color:var(--ibiz-float-toolbar-color-disabled-bg)}.ibiz-float-toolbar.is-vertical .ibiz-float-toolbar__wrapper{flex-direction:column}.ibiz-float-toolbar.is-immediate-float{--ibiz-float-toolbar-color-item:var(--ibiz-float-toolbar-color-immediate-float-item);--ibiz-float-toolbar-color-item-bg:var(--ibiz-float-toolbar-color-immediate-float-item-bg);--ibiz-float-toolbar-width-item-min-width:var(--ibiz-float-toolbar-width-immediate-float-item-min-width);--ibiz-float-toolbar-height-item:var(--ibiz-float-toolbar-height-immediate-float-item);padding:var(--ibiz-float-toolbar-spacing-immediate-float-padding)}.ibiz-float-toolbar .ibiz-float-toolbar-item{justify-content:center}.ibiz-float-toolbar .ibiz-float-toolbar-item .ibiz-icon{justify-content:center}

package/es/control/toolbar/float-toolbar/float-toolbar.mjs

@@ -18,6 +18,10 @@ const FloatToolbar = /* @__PURE__ */ defineComponent({
       type: Object,
       required: true
     },
+    groupShowMode: {
+      type: String,
+      required: true
+    },
     counterData: {
       type: Object
     },
@@ -28,10 +32,14 @@ const FloatToolbar = /* @__PURE__ */ defineComponent({
     direction: {
       type: String,
       default: "HORIZONTAL"
+    },
+    immediateFloat: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
-    const ns = useNamespace(`float-toolbar`);
+    const ns = useNamespace("float-toolbar");
     const contentRef = ref();
     const {
       renderToolbarItemContent
@@ -43,7 +51,8 @@ const FloatToolbar = /* @__PURE__ */ defineComponent({
     } = useToolbarGroupModalHandler({
       modal: props.modal,
       counterData: props.counterData,
-      buttonsState: props.buttonsState
+      buttonsState: props.buttonsState,
+      groupShowMode: props.groupShowMode
     });
     const handleFloatToolbarClose = () => {
       var _a;
@@ -59,30 +68,32 @@ const FloatToolbar = /* @__PURE__ */ defineComponent({
   },
   render() {
     var _a, _b, _c;
+    if (!this.buttonsState.visible)
+      return null;
     return createVNode("div", {
-      "class": [this.ns.b(), this.ns.is((_a = this.placement) == null ? void 0 : _a.toLocaleLowerCase(), !!this.placement), this.ns.is((_b = this.direction) == null ? void 0 : _b.toLocaleLowerCase(), !!this.direction)]
+      "class": [this.ns.b(), this.ns.is((_a = this.placement) == null ? void 0 : _a.toLocaleLowerCase(), !!this.placement), this.ns.is((_b = this.direction) == null ? void 0 : _b.toLocaleLowerCase(), !!this.direction), this.ns.is("immediate-float", !!this.immediateFloat)]
     }, [createVNode("div", {
       "class": this.ns.e("wrapper")
     }, [(_c = this.modelData.detoolbarItems) == null ? void 0 : _c.map((_item) => {
-      var _a2;
+      var _a2, _b2;
       const itemId = _item.id;
       const visible = (_a2 = this.buttonsState[itemId]) == null ? void 0 : _a2.visible;
-      let disabled = this.buttonsState[itemId].disabled;
+      let disabled = (_b2 = this.buttonsState[itemId]) == null ? void 0 : _b2.disabled;
       const toolbarItem = _item;
       if (toolbarItem.itemType === "ITEMS")
         disabled = false;
       if (!visible)
         return;
       return createVNode("div", {
-        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "class": [this.ns.e("item"), this.ns.is("disabled", !!disabled)],
         "onClick": (_e) => !disabled && this.handleItemClick(_item, _e)
       }, [createVNode("div", {
         "class": this.ns.em("item", "wrapper")
       }, [this.renderToolbarItemContent(_item)])]);
-    })]), createVNode("div", {
+    })]), !this.immediateFloat ? createVNode("div", {
       "class": this.ns.e("modal"),
       "onClick": this.handleFloatToolbarClose
-    }, null)]);
+    }, null) : null]);
   }
 });
 

package/es/control/toolbar/toolbar-group-list/toolbar-group-list.css

@@ -1 +1 @@
-.ibiz-toolbar-group-list{--ibiz-toolbar-group-list-color-item-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-toolbar-group-list-height-max-height:calc(100vh - var(--ibiz-height-control-large));--ibiz-toolbar-group-list-height-item-wrapper-min-height:var(--ibiz-height-control-default);--ibiz-toolbar-group-list-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-toolbar-group-list-spacing-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-toolbar-group-list-spacing-item-label-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-toolbar-group-list-font-item-font-size:var(--ibiz-spacing-base);display:flex;flex-direction:column;max-height:var(--ibiz-toolbar-group-list-height-max-height);padding:var(--ibiz-toolbar-group-list-spacing-padding)}.ibiz-toolbar-group-list__wrapper{height:100%;overflow-y:auto}.ibiz-toolbar-group-list__item{padding:var(--ibiz-toolbar-group-list-spacing-item-padding);font-size:var(--ibiz-toolbar-group-list-font-item-font-size)}.ibiz-toolbar-group-list__item--wrapper{display:flex;align-items:center;min-height:var(--ibiz-toolbar-group-list-height-item-wrapper-min-height)}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item{--ibiz-info-item-spacing-label-margin:var(--ibiz-toolbar-group-list-spacing-item-label-margin)}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item:not(:has(.ibiz-icon))::before{display:inline-block;width:var(--ibiz-info-item-icon-size);height:var(--ibiz-info-item-icon-size);margin:var(--ibiz-info-item-spacing-label-margin);content:""}.ibiz-toolbar-group-list__item.is-disabled{color:var(--ibiz-toolbar-group-list-color-item-disabled-text);pointer-events:none}
+.ibiz-toolbar-group-list{--ibiz-toolbar-group-list-color-item-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-toolbar-group-list-height-max-height:calc(100vh - var(--ibiz-height-control-large));--ibiz-toolbar-group-list-height-item:3rem;--ibiz-toolbar-group-list-height-modal:100vh;--ibiz-toolbar-group-list-width-modal:100vw;--ibiz-toolbar-group-list-width-item-arrow:calc(var(--ibiz-spacing-base) + var(--ibiz-toolbar-group-list-font-item-arrow-font-size));--ibiz-toolbar-group-list-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-toolbar-group-list-spacing-default-padding:0;--ibiz-toolbar-group-list-spacing-group-item-wrapper-padding:0 1.2em 0 0;--ibiz-toolbar-group-list-spacing-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-toolbar-group-list-spacing-item-label-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-toolbar-group-list-spacing-default-item-label-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-toolbar-group-list-font-item-font-size:var(--ibiz-spacing-base);--ibiz-toolbar-group-list-font-item-arrow-font-size:1.1em;display:flex;flex-direction:column;max-height:var(--ibiz-toolbar-group-list-height-max-height);padding:var(--ibiz-toolbar-group-list-spacing-padding)}.ibiz-toolbar-group-list__wrapper{height:100%;width:100%;overflow:hidden auto}.ibiz-toolbar-group-list__item{display:flex;align-items:center;justify-content:start;position:relative;height:var(--ibiz-toolbar-group-list-height-item);padding:var(--ibiz-toolbar-group-list-spacing-item-padding);font-size:var(--ibiz-toolbar-group-list-font-item-font-size);width:100%}.ibiz-toolbar-group-list__item--wrapper{display:flex;align-items:center;width:100%}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item{width:100%;--ibiz-info-item-spacing-label-margin:var(--ibiz-toolbar-group-list-spacing-item-label-margin)}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item:not(:has(.ibiz-icon))::before{display:inline-block;width:var(--ibiz-info-item-icon-size);height:var(--ibiz-info-item-icon-size);margin:var(--ibiz-info-item-spacing-label-margin);content:"";flex-shrink:0}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item .ibiz-info-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-toolbar-group-list__item.is-disabled{color:var(--ibiz-toolbar-group-list-color-item-disabled-text);pointer-events:none}.ibiz-toolbar-group-list__item.is-group-item--wrapper{padding:var(--ibiz-toolbar-group-list-spacing-group-item-wrapper-padding)}.ibiz-toolbar-group-list__item-arrow{display:flex;align-items:center;justify-content:start;position:absolute;right:0;top:0;font-size:var(--ibiz-toolbar-group-list-font-item-arrow-font-size);height:100%;width:var(--ibiz-toolbar-group-list-width-item-arrow)}.ibiz-toolbar-group-list__modal{position:fixed;top:0;left:0;z-index:1;width:var(--ibiz-toolbar-group-list-width-modal);height:var(--ibiz-toolbar-group-list-height-modal)}.ibiz-toolbar-group-list.is-default{--ibiz-toolbar-group-list-spacing-padding:var(--ibiz-toolbar-group-list-spacing-default-padding);--ibiz-toolbar-group-list-spacing-item-label-margin:var(--ibiz-toolbar-group-list-spacing-default-item-label-margin)}.ibiz-toolbar-group-list.is-default .ibiz-toolbar-group-list__wrapper{position:relative;z-index:2}

package/es/control/toolbar/toolbar-group-list/toolbar-group-list.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { useToolBarItemRender, useToolbarGroupModalHandler } from '../toolbar-render-util.mjs';
 import './toolbar-group-list.css';
@@ -18,6 +18,10 @@ const ToolbarGroupList = /* @__PURE__ */ defineComponent({
       type: Object,
       required: true
     },
+    groupShowMode: {
+      type: String,
+      required: true
+    },
     counterData: {
       type: Object
     },
@@ -29,47 +33,57 @@ const ToolbarGroupList = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("toolbar-group-list");
     const {
-      btnType,
       renderToolbarItemContent
     } = useToolBarItemRender(ns, {
       counterData: props.counterData
     });
     const {
-      handleItemClick
+      handleItemClick,
+      handleModalClose
     } = useToolbarGroupModalHandler({
       modal: props.modal,
       counterData: props.counterData,
-      buttonsState: props.buttonsState
+      buttonsState: props.buttonsState,
+      groupShowMode: props.groupShowMode,
+      direction: "horizontal"
     });
     return {
       ns,
       handleItemClick,
-      btnType,
+      handleModalClose,
       renderToolbarItemContent
     };
   },
   render() {
-    var _a;
+    var _a, _b;
     return createVNode("div", {
-      "class": [this.ns.b()]
-    }, [createVNode("div", {
+      "class": [this.ns.b(), this.ns.is((_a = this.groupShowMode) == null ? void 0 : _a.toLocaleLowerCase(), true)]
+    }, [this.groupShowMode === "DEFAULT" ? createVNode("div", {
+      "class": this.ns.e("modal"),
+      "onClick": this.handleModalClose
+    }, null) : null, createVNode("div", {
       "class": this.ns.e("wrapper")
-    }, [(_a = this.groupItems) == null ? void 0 : _a.map((_item) => {
+    }, [(_b = this.groupItems) == null ? void 0 : _b.map((_item) => {
       var _a2;
       const itemId = _item.id;
       const visible = (_a2 = this.buttonsState[itemId]) == null ? void 0 : _a2.visible;
       let disabled = this.buttonsState[itemId].disabled;
       const toolbarItem = _item;
-      if (toolbarItem.itemType === "ITEMS")
+      const isGroup = toolbarItem.itemType === "ITEMS";
+      if (isGroup)
         disabled = false;
       if (!visible)
         return;
       return createVNode("div", {
-        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "class": [this.ns.e("item"), this.ns.is("disabled", disabled), this.ns.is("group-item", isGroup)],
         "onClick": (_e) => !disabled && this.handleItemClick(_item, _e, this.isGroupExtractMode)
       }, [createVNode("div", {
         "class": this.ns.em("item", "wrapper")
-      }, [this.renderToolbarItemContent(_item)])]);
+      }, [this.renderToolbarItemContent(_item), isGroup ? createVNode("div", {
+        "class": this.ns.e("item-arrow")
+      }, [createVNode(resolveComponent("van-icon"), {
+        "name": "arrow"
+      }, null)]) : null])]);
     })])]);
   }
 });

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

@@ -1,9 +1,9 @@
-import { isVNode, createVNode, resolveComponent, h, onBeforeMount, ref, computed } from 'vue';
+import { isVNode, createVNode, resolveComponent, h, onBeforeUnmount, 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';
+import { convertBtnType, calcPopoverPlacement } from '../../util/button-util/button-util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -61,8 +61,23 @@ function useToolbarGroupModalHandler(opts) {
     buttonsState,
     modal,
     counterData,
+    groupShowMode,
+    direction = "vertical",
     modalCloseCallback
   } = opts;
+  let groupModalOverlay;
+  const handleCurOverlayClose = () => {
+    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  };
+  const handleModalClose = () => {
+    handleCurOverlayClose();
+    modal == null ? void 0 : modal.dismiss({
+      ok: false,
+      params: {
+        isModalAllClose: true
+      }
+    });
+  };
   const getGroupItems = (item, isGroupExtractMode) => {
     var _a;
     let items = item.detoolbarItems;
@@ -81,6 +96,7 @@ function useToolbarGroupModalHandler(opts) {
     return items || [];
   };
   const handleActionItemClick = (item, event, isGroupExtractMode) => {
+    handleCurOverlayClose();
     modal == null ? void 0 : modal.dismiss({
       ok: true,
       data: [{
@@ -90,32 +106,66 @@ function useToolbarGroupModalHandler(opts) {
       }]
     });
   };
-  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) => {
+  const openPopover = (_event, _groupItems, _isGroupExtractMode) => {
+    const placement = calcPopoverPlacement(ns, _event.currentTarget, _groupItems.length, direction, {
+      width: "150px",
+      // 3rem为弹框内分组每项的高度
+      height: "3rem"
+    });
+    const overlay = ibiz.overlay.createPopover((_modal) => {
+      return h(ToolbarGroupList, {
+        modal: _modal,
+        groupItems: _groupItems,
+        counterData,
+        buttonsState,
+        groupShowMode,
+        isGroupExtractMode: _isGroupExtractMode
+      });
+    }, {}, {
+      width: 150,
+      height: "auto",
+      modalClass: "".concat(ns.b("popover")),
+      placement
+    });
+    overlay.present(_event.currentTarget);
+    return overlay;
+  };
+  const openDrawer = (_groupItems, _isGroupExtractMode) => {
+    const overlay = ibiz.overlay.createDrawer((_modal) => {
       return h(ToolbarGroupList, {
         modal: _modal,
-        groupItems,
+        groupItems: _groupItems,
         counterData,
         buttonsState,
+        groupShowMode,
         isGroupExtractMode: _isGroupExtractMode
       });
     }, {}, {
+      width: 100,
       height: "auto",
       attrs: {
         position: "bottom",
-        overlayClass: `${ns.b()}`,
+        overlayClass: "".concat(ns.b("drawer")),
         closeable: false,
         round: true
       }
     });
-    groupModalOverlay.present();
+    overlay.present();
+    return overlay;
+  };
+  const handleGroupItemClick = async (_item, _event, _isGroupExtractMode = false) => {
+    var _a, _b;
+    handleCurOverlayClose();
+    const groupItems = getGroupItems(_item, _isGroupExtractMode);
+    if (!groupItems.length)
+      return;
+    groupModalOverlay = groupShowMode === "ACTIONSHEET" ? openDrawer(groupItems, _isGroupExtractMode) : openPopover(_event, groupItems, _isGroupExtractMode);
     const res = await groupModalOverlay.onWillDismiss();
-    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if ((_a = res == null ? void 0 : res.params) == null ? void 0 : _a.isModalAllClose) {
+      handleModalClose();
+      return;
+    }
+    const item = (_b = res == null ? void 0 : res.data) == null ? void 0 : _b[0];
     if (item) {
       const {
         action,
@@ -135,12 +185,13 @@ function useToolbarGroupModalHandler(opts) {
       handleActionItemClick(item, event, isGroupExtractMode);
     }
   };
-  onBeforeMount(() => {
-    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  onBeforeUnmount(() => {
+    handleCurOverlayClose();
   });
   return {
     handleItemClick,
-    handleGroupItemClick
+    handleGroupItemClick,
+    handleModalClose
   };
 }
 function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
@@ -164,12 +215,16 @@ function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
       switch (c.placement) {
         case "LEFTSTART":
         case "LEFT":
-        case "LEFTEND":
           placement = "right-start";
           break;
+        case "LEFTEND":
+          placement = "right-end";
+          break;
+        case "RIGHTEND":
+          placement = "left-end";
+          break;
         case "RIGHTSTART":
         case "RIGHT":
-        case "RIGHTEND":
         default:
           placement = "left-start";
           break;
@@ -177,56 +232,75 @@ function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
     }
     return placement;
   });
-  const onFloatBtnClick = async (_event, _currentTarget) => {
+  const renderFloatToolbar = (modal, immediateFloat = true) => {
+    return h(FloatToolbar, {
+      modal,
+      modelData: props.modelData,
+      state: c.state,
+      buttonsState: c.state.buttonsState,
+      counterData: c.state.counterData,
+      placement: c.placement,
+      direction: c.direction,
+      groupShowMode: c.groupShowMode,
+      immediateFloat
+    });
+  };
+  const handleDismiss = async (_res) => {
     var _a;
+    const item = (_a = _res == null ? void 0 : _res.data) == null ? void 0 : _a[0];
+    if (item) {
+      const {
+        action,
+        event
+      } = item;
+      modalCloseCallback(action, event);
+    }
+    return false;
+  };
+  const onFloatBtnClick = async (_event, _currentTarget) => {
     if (floatToolbarOverlay.value) {
       await floatToolbarOverlay.value.dismiss();
       return;
     }
-    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
-      });
-    }, {}, {
+    floatToolbarOverlay.value = ibiz.overlay.createPopover((modal) => renderFloatToolbar(modal, false), {}, {
       width: "auto",
       height: "auto",
       noArrow: true,
       placement: modalPlacement.value,
-      modalClass: `${ns.b("float-toolbar-modal")}`
+      modalClass: "".concat(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);
-    }
+    handleDismiss(res);
     floatToolbarOverlay.value = void 0;
   };
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     floatToolbarOverlay.value = void 0;
   });
   const renderFloatButton = () => {
-    const slot = {};
-    if (floatToolbarOverlay.value)
-      Object.assign(slot, {
-        icon: () => createVNode(resolveComponent("van-icon"), {
-          "name": "cross"
-        }, null)
+    let _slot;
+    if (c.showMode === "COLLAPSIBLE") {
+      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 createVNode(resolveComponent("iBizFloatButton"), {
       "align": c.placement,
-      "onClick": onFloatBtnClick
-    }, _isSlot(slot) ? slot : {
-      default: () => [slot]
+      "renderMode": "DIV"
+    }, _isSlot(_slot = renderFloatToolbar({
+      dismiss: handleDismiss
+    })) ? _slot : {
+      default: () => [_slot]
     });
   };
   return {

package/es/control/toolbar/toolbar.css

@@ -1 +1 @@
-.ibiz-control-toolbar{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--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-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6);display:flex;flex-wrap:wrap;gap:var(--ibiz-control-toolbar-spacing-gap);height:100%}.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-badge-margin);font-size:var(--ibiz-control-toolbar-font-fontSize);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-fontSize)}.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-fontSize)}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-spacing-bottom-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-item)}.ibiz-toolbar-group-list{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--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-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6)}.ibiz-control-toolbar-float-toolbar-modal.ibiz-popover{background-color:unset;border:none;box-shadow:unset}
+.ibiz-control-toolbar{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--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-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6);display:flex;flex-wrap:wrap;gap:var(--ibiz-control-toolbar-spacing-gap);height:100%}.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-badge-margin);font-size:var(--ibiz-control-toolbar-font-fontSize);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-fontSize)}.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-fontSize)}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-spacing-bottom-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-item)}.ibiz-toolbar-group-list{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--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-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6)}.ibiz-control-toolbar-float-toolbar-modal.ibiz-popover{background-color:unset;border:none;box-shadow:unset}.ibiz-toolbar-group-modal-popover.ibiz-popover{overflow:hidden;border:none;border-radius:var(--ibiz-border-radius-medium)}

package/es/control/toolbar/toolbar.mjs

@@ -42,7 +42,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const c = useControlController((...args) => new ToolbarController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     let position = "";
     switch (props.modelData.toolbarStyle) {
       case "MOBNAVRIGHTMENU":
@@ -85,6 +85,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     } = useToolbarGroupModalHandler({
       buttonsState: c.state.buttonsState,
       counterData: c.state.counterData,
+      groupShowMode: c.groupShowMode,
       modalCloseCallback: handleClick.bind(this)
     });
     const {
@@ -245,6 +246,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     const {
       state
     } = this.c;
+    if (!state.isCreated)
+      return null;
     if (this.position === "popper") {
       let _slot4;
       return createVNode(resolveComponent("iBizControlBase"), {

package/es/control/tree/tree.mjs

@@ -73,7 +73,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
   setup() {
     var _a, _b;
     const c = useControlController((...args) => new TreeController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const checkedKeys = computed(() => {
       return c.state.selectedData.map((item) => item._id);
     });
@@ -283,7 +283,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       } = opts;
       const nodeModel = findNodeModel(originData._id);
       if (loadingEl && ((_a2 = nodeModel == null ? void 0 : nodeModel.sysCss) == null ? void 0 : _a2.cssName))
-        loadingEl.parentNode.parentNode.classList.add(`${nodeModel.sysCss.cssName}`);
+        loadingEl.parentNode.parentNode.classList.add("".concat(nodeModel.sysCss.cssName));
       if (c.state.singleSelect)
         handleSingleSelect(opts);
       const children = [];
@@ -291,8 +291,8 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         const count = c.state.counterData[nodeModel.counterId];
         if (!(isNil(count) || nodeModel.counterMode === 1 && count === 0)) {
           const child = document.createElement("div");
-          child.className = `ibiz-badge tree-counter ${ns.is("mob", true)}`;
-          child.innerText = count > 99 ? `${99}+` : count;
+          child.className = "ibiz-badge tree-counter ".concat(ns.is("mob", true));
+          child.innerText = count > 99 ? "".concat(99, "+") : count;
           children.push(child);
         }
       }
@@ -302,7 +302,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         children.push(child);
       }
       return _h("div", {
-        className: `tree-button ${ns.b("node-expanded-btn")}`,
+        className: "tree-button ".concat(ns.b("node-expanded-btn")),
         click: (e, _opts) => {
           if (originData._leaf)
             return;
@@ -338,7 +338,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     if (breadcrumb.value) {
       Object.assign(options, {
         breadcrumb: {
-          el: `#breadcrumb${uuid}`,
+          el: "#breadcrumb".concat(uuid),
           link: (node, data) => {
             var _a2, _b2;
             const list = ((_b2 = (_a2 = node.store) == null ? void 0 : _a2.breadcrumb) == null ? void 0 : _b2.list) || [];
@@ -354,7 +354,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
               content.appendChild(data.icon.cloneNode(true));
             }
             content.appendChild(textDom);
-            content.className = `${ns.be("header", "crumb")} ${ns.is("root", data._vsroot)}`;
+            content.className = "".concat(ns.be("header", "crumb"), " ").concat(ns.is("root", data._vsroot));
             content.onclick = () => handleExpandedLastKey.bind(this)(data);
             return content;
           },
@@ -368,7 +368,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
             const content = document.createElement("span");
             const iconDom = document.createElement("i");
             iconDom.className = "van-icon van-icon-arrow-left";
-            content.className = `${ns.bem("header", "crumb", "back-btn")}`;
+            content.className = "".concat(ns.bem("header", "crumb", "back-btn"));
             content.appendChild(iconDom);
             content.onclick = (_e) => handleCrumbBack.bind(this)(_e, crumbItem);
             return content;
@@ -451,7 +451,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         "class": [this.ns.be("header", "container"), this.ns.is("hidden", this.hiddenBreadcrumb)]
       }, [createVNode(resolveComponent("van-sticky"), null, {
         default: () => [createVNode("div", {
-          "id": `breadcrumb${this.uuid}`,
+          "id": "breadcrumb".concat(this.uuid),
           "class": [this.ns.b("header"), this.ns.is("no-root", !this.treeData.length), this.ns.is("header-style", this.isHeaderStyle)]
         }, null)]
       })]), this.c.state.isCreated && this.c.state.isLoaded && createVNode(resolveComponent("vs-tree"), {

package/es/control/tree-exp-bar/tree-exp-bar.mjs

@@ -63,7 +63,7 @@ const TreeExpBarControl = /* @__PURE__ */ defineComponent({
   },
   setup() {
     const c = useControlController((...args) => new TreeExpBarController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const {
       renderTitle,
       renderSearchBar