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

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

@@ -1,7 +1,7 @@
-import { defineComponent, createVNode, resolveComponent, computed, ref } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, createVNode, resolveComponent, ref, computed, onMounted, onUnmounted } from 'vue';
+import { useControlController, useNamespace, useClickOutside } from '@ibiz-template/vue3-util';
 import { debounce } from 'lodash-es';
-import { SearchBarController } from '@ibiz-template/runtime';
+import { SearchBarController, getOriginFilterNodes } from '@ibiz-template/runtime';
 import { showTitle } from '@ibiz-template/core';
 import './search-bar.css';
 
@@ -38,11 +38,52 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
       default: () => ({})
     }
   },
-  setup() {
+  setup(props) {
     const c = useControlController((...args) => new SearchBarController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const searchRef = ref();
+    const dropdownTop = ref(0);
+    const dropdownRef = ref();
+    const showDropdown = ref(false);
+    const historyItems = ref([]);
+    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}`;
+    let funcs;
+    const showAllGroups = ref(false);
+    let resizeObserver = null;
+    const showExpand = ref(false);
+    const enableStoredQuery = computed(() => {
+      if (Object.hasOwnProperty.call(c.controlParams, "enablestoredquery")) {
+        return c.controlParams.enablestoredquery === "true" || c.controlParams.enablestoredquery === true;
+      }
+      return ibiz.config.mob.mobEnableStoredQuery;
+    });
+    const enableQuickGroup = computed(() => {
+      return c.model.searchBarGroups && c.model.searchBarGroups.length > 0;
+    });
+    const enableDropDown = computed(() => {
+      return enableStoredQuery.value;
+    });
+    const counterData = ref({});
+    const fn = (counter) => {
+      counterData.value = counter;
+    };
+    c.evt.on("onCreated", () => {
+      if (c.counter) {
+        c.counter.onChange(fn, true);
+      }
+    });
     const onSearch = () => {
       c.onSearch();
+      if (enableStoredQuery.value && c.state.query) {
+        const index = historyItems.value.indexOf(c.state.query);
+        if (index === -1) {
+          historyItems.value.unshift(c.state.query);
+          localStorage.setItem(queryCacheKey, JSON.stringify(historyItems.value));
+        }
+      }
     };
     const debounceSearch = debounce(() => {
       if (onSearch) {
@@ -79,6 +120,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
           },
           "onConfirm": (mode, customCond) => {
             c.state.filterMode = mode;
+            c.state.selectedGroupItem = null;
             c.state.customCond = customCond;
             c.onSearch();
             if (popover) {
@@ -107,27 +149,280 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
         showFilter();
       }
     };
+    const onFocus = (_event) => {
+      var _a;
+      if (!enableDropDown.value) {
+        return;
+      }
+      if (searchRef.value) {
+        if (enableStoredQuery.value) {
+          const tmepHistory = localStorage.getItem(queryCacheKey);
+          if (tmepHistory) {
+            historyItems.value = JSON.parse(tmepHistory);
+          }
+        }
+        const rect = searchRef.value.$el.getBoundingClientRect();
+        const {
+          height,
+          top
+        } = rect;
+        dropdownTop.value = top + height + 8;
+      }
+      if (((_a = historyItems.value) == null ? void 0 : _a.length) > 0) {
+        showDropdown.value = true;
+      }
+    };
+    const onClear = (_event) => {
+      if (!enableDropDown.value) {
+        return;
+      }
+      _event.preventDefault();
+      _event.stopPropagation();
+      showDropdown.value = true;
+    };
+    const style = computed(() => {
+      return {
+        display: showDropdown.value ? "flex" : "none",
+        top: `${dropdownTop.value}px`,
+        maxHeight: `calc(100vh - ${dropdownTop.value}px - 10px)`
+      };
+    });
+    const contentStyle = computed(() => {
+      return {
+        maxHeight: isCollapse.value ? "150px" : "100%"
+      };
+    });
+    const onSelectItem = (item) => {
+      c.handleInput(item);
+      onSearch();
+      showDropdown.value = false;
+    };
+    const onPointerDown = () => {
+      timer.value = setTimeout(() => {
+        showItemRemove.value = true;
+      }, 1e3);
+    };
+    const onPointerUp = () => {
+      clearTimeout(timer.value);
+    };
+    const onpointerCancel = () => {
+      clearTimeout(timer.value);
+    };
+    const onRemoveItem = (item, event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const index = historyItems.value.indexOf(item);
+      historyItems.value.splice(index, 1);
+      localStorage.setItem(queryCacheKey, JSON.stringify(historyItems.value));
+    };
+    const renderSearchHistory = () => {
+      return historyItems.value.filter((item) => {
+        return item.includes(c.state.query);
+      }).map((item) => {
+        return createVNode("div", {
+          "onClick": () => onSelectItem(item),
+          "onPointerdown": onPointerDown,
+          "onPointerup": onPointerUp,
+          "onPointercancel": onpointerCancel,
+          "tabindex": 0,
+          "class": ns.bem("history", "content", "item")
+        }, [createVNode("div", {
+          "class": ns.bem("history", "content", "item-text")
+        }, [createVNode("span", null, [item]), showItemRemove.value && createVNode("ion-icon", {
+          "onClick": (e) => {
+            onRemoveItem(item, e);
+          },
+          "class": ns.bem("history", "content", "item-remove"),
+          "name": "close-circle-outline"
+        }, null)])]);
+      });
+    };
+    const clearHistory = () => {
+      historyItems.value = [];
+      localStorage.removeItem(queryCacheKey);
+      showDropdown.value = false;
+    };
+    const onGroupClick = (item) => {
+      var _a;
+      c.state.filterNodes = getOriginFilterNodes();
+      c.state.customCond = "";
+      if (((_a = c.state.selectedGroupItem) == null ? void 0 : _a.id) !== (item == null ? void 0 : item.id)) {
+        c.state.selectedGroupItem = item;
+        c.evt.emit("onTabChange", {
+          data: [item]
+        });
+      } else {
+        c.state.selectedGroupItem = null;
+        c.evt.emit("onTabChange", {
+          data: null
+        });
+      }
+      onSearch();
+    };
+    const onCollapse = () => {
+      isCollapse.value = !isCollapse.value;
+    };
+    const onCancelItemRemove = () => {
+      showItemRemove.value = false;
+    };
+    const renderHistory = () => {
+      if (!enableStoredQuery.value)
+        return null;
+      return createVNode("div", {
+        "class": ns.b("history")
+      }, [createVNode("div", {
+        "class": ns.be("history", "header")
+      }, [createVNode("div", {
+        "class": ns.bem("history", "header", "title")
+      }, [ibiz.i18n.t("control.searchBar.history")]), showItemRemove.value ? createVNode("span", {
+        "onClick": onCancelItemRemove
+      }, [ibiz.i18n.t("control.searchBar.cancel")]) : createVNode("div", {
+        "class": ns.bem("history", "header", "clear"),
+        "onClick": clearHistory
+      }, [createVNode("ion-icon", {
+        "name": "trash-outline"
+      }, null), createVNode("span", null, [ibiz.i18n.t("control.searchBar.clear")])])]), createVNode("div", {
+        "class": ns.be("history", "content"),
+        "style": contentStyle.value
+      }, [renderSearchHistory()]), showExpand.value && createVNode("div", {
+        "class": ns.be("history", "footer"),
+        "onClick": onCollapse
+      }, [createVNode(resolveComponent("van-divider"), null, {
+        default: () => [!isCollapse.value ? ibiz.i18n.t("control.searchBar.collapse") : ibiz.i18n.t("control.searchBar.expand"), !isCollapse.value ? createVNode("ion-icon", {
+          "name": "caret-up-outline"
+        }, null) : createVNode("ion-icon", {
+          "name": "caret-down-outline"
+        }, null)]
+      })])]);
+    };
+    const onOpenAllGroups = () => {
+      showAllGroups.value = true;
+    };
+    const renderQuickGroup = () => {
+      var _a, _b, _c, _d, _e;
+      if (!enableQuickGroup.value)
+        return null;
+      const count = c.model.quickGroupCount || ((_a = c.model.searchBarGroups) == null ? void 0 : _a.length);
+      return createVNode("div", {
+        "class": ns.b("quick-group")
+      }, [(_c = (_b = c.model.searchBarGroups) == null ? void 0 : _b.slice(0, count)) == null ? void 0 : _c.map((groupItem) => {
+        var _a2;
+        const visible = c.calcCountVisible(groupItem);
+        if (!visible) {
+          return null;
+        }
+        return createVNode("span", {
+          "class": [ns.be("quick-group", "item"), ns.is("selected", ((_a2 = c.state.selectedGroupItem) == null ? void 0 : _a2.id) === groupItem.id)],
+          "onClick": () => onGroupClick(groupItem)
+        }, [groupItem.caption, groupItem.counterId && createVNode(resolveComponent("iBizBadge"), {
+          "class": ns.e("counter"),
+          "value": counterData.value[groupItem.counterId],
+          "counterMode": groupItem.counterMode
+        }, null)]);
+      }), count && count > 0 && count < ((_e = (_d = c.model.searchBarGroups) == null ? void 0 : _d.length) != null ? _e : 0) ? createVNode("div", {
+        "class": ns.be("quick-group", "item"),
+        "onClick": onOpenAllGroups
+      }, [createVNode("ion-icon", {
+        "name": "grid-outline"
+      }, null), c.model.groupMoreText || ibiz.i18n.t("control.searchBar.more")]) : null]);
+    };
+    const onCloseAllGroups = (item) => {
+      showAllGroups.value = false;
+      onGroupClick(item);
+    };
+    const renderAllGroups = () => {
+      var _a;
+      const groups = (_a = c.model.searchBarGroups) == null ? void 0 : _a.map((group) => {
+        var _a2;
+        return {
+          name: group.caption,
+          className: [ns.em("action-sheet", "item"), ns.is("selected", group.id === ((_a2 = c.state.selectedGroupItem) == null ? void 0 : _a2.id))],
+          ...group
+        };
+      });
+      return createVNode(resolveComponent("van-action-sheet"), {
+        "class": ns.e("action-sheet"),
+        "show": showAllGroups.value,
+        "onUpdate:show": ($event) => showAllGroups.value = $event,
+        "actions": groups,
+        "close-on-click-action": true,
+        "onSelect": (item) => onCloseAllGroups(item)
+      }, null);
+    };
+    onMounted(() => {
+      var _a;
+      if (enableDropDown.value && dropdownRef.value) {
+        if (enableStoredQuery.value) {
+          const tmepHistory = localStorage.getItem(queryCacheKey);
+          if (tmepHistory) {
+            historyItems.value = JSON.parse(tmepHistory);
+          }
+        }
+        funcs = useClickOutside(dropdownRef, async () => {
+          showDropdown.value = false;
+          if (enableStoredQuery.value) {
+            localStorage.setItem(queryCacheKey, JSON.stringify(historyItems.value));
+          }
+        }, {
+          ignore: [(_a = searchRef.value) == null ? void 0 : _a.$el]
+        });
+        resizeObserver = new ResizeObserver((entries) => {
+          const newHeight = entries[0].target.clientHeight;
+          if (newHeight > 200) {
+            showExpand.value = true;
+          } else {
+            showExpand.value = false;
+          }
+        });
+        resizeObserver.observe(dropdownRef.value);
+      }
+    });
+    onUnmounted(() => {
+      if (funcs && funcs.stop) {
+        funcs.stop();
+      }
+      if (resizeObserver && dropdownRef.value) {
+        resizeObserver.unobserve(dropdownRef.value);
+      }
+    });
     return {
       c,
       ns,
       filterButtonRef,
+      searchRef,
       onInput,
       onSearch,
       cssVars,
-      triggerFilter
+      triggerFilter,
+      onFocus,
+      onClear,
+      style,
+      contentStyle,
+      dropdownRef,
+      enableStoredQuery,
+      enableDropDown,
+      renderHistory,
+      renderQuickGroup,
+      renderAllGroups
     };
   },
   render() {
     return createVNode(resolveComponent("iBizControlBase"), {
       "controller": this.c,
-      "class": [this.ns.b()],
-      "style": this.cssVars
+      "style": this.cssVars,
+      "class": this.ns.b("container")
     }, {
-      default: () => [this.c.model.enableQuickSearch && createVNode(resolveComponent("van-search"), {
+      default: () => [createVNode("div", {
+        "class": [this.ns.b(), this.ns.is("enable-filter", this.c.enableFilter)]
+      }, [this.c.model.enableQuickSearch && createVNode(resolveComponent("van-search"), {
+        "ref": "searchRef",
         "modelValue": this.c.state.query,
         "class": this.ns.b("quick-search"),
+        "autocomplete": this.enableDropDown ? "off" : "on",
         "placeholder": this.c.state.quickSearchPlaceHolder,
-        "onUpdate:model-value": this.onInput
+        "onUpdate:model-value": this.onInput,
+        "onFocus": this.onFocus,
+        "onClear": this.onClear
       }, null), this.c.enableFilter && createVNode(resolveComponent("van-button"), {
         "ref": "filterButtonRef",
         "title": showTitle(ibiz.i18n.t("control.searchBar.filter")),
@@ -139,7 +434,11 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
             cssClass: "funnel-outline"
           }
         }, null)]
-      })]
+      })]), this.renderQuickGroup(), createVNode("div", {
+        "class": this.ns.b("dropdown"),
+        "ref": "dropdownRef",
+        "style": this.style
+      }, [this.renderHistory()]), this.renderAllGroups()]
     });
   }
 });

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

@@ -1 +1 @@
-.ibiz-control-tabexppanel-tab-item-header{padding:.5rem 1rem;overflow:hidden;font-size:var(--ibiz-font-size-regular);line-height:var(--van-cell-line-height);color:var(--ibiz-color-text-2);text-overflow:ellipsis;white-space:nowrap;background:var(--ibiz-color-bg-0)}.ibiz-control-tabexppanel-header>.van-tabs__wrap .van-tab--line.van-tab--active .van-tab__text{position:relative;line-height:var(--van-tabs-line-height);color:var(--ibiz-color-primary)}.ibiz-control-tabexppanel-header>.van-tabs__wrap .van-tab--line.van-tab--active .van-tab__text::after{content:"";display:block;width:100%;height:.125rem;background-color:var(--ibiz-color-primary);position:absolute;bottom:0;border-radius:var(--van-tabs-bottom-bar-height)}.ibiz-control-tabexppanel-header>.van-tabs__wrap .van-tabs__line{display:none}
+.ibiz-control-tabexppanel{--ibiz-control-tabexppanel-color-tab-text:var(--ibiz-color-text-0);--ibiz-control-tabexppanel-color-tab-text-active:var(--ibiz-color-primary);--ibiz-control-tabexppanel-font-tab-font-size:var(--ibiz-font-size-regular);width:100%;height:100%}.ibiz-control-tabexppanel.ibiz-tab-layout{--ibiz-tab-layout-color-tab-text:var(--ibiz-control-tabexppanel-color-tab-text);--ibiz-tab-layout-color-tab-text-active:var(--ibiz-control-tabexppanel-color-tab-text-active);--ibiz-tab-layout-font-tab-font-size:var(--ibiz-control-tabexppanel-font-tab-font-size)}

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

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, h, resolveComponent } from 'vue';
+import { isVNode, defineComponent, h, resolveComponent, createVNode, computed } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { TabExpPanelController } from '@ibiz-template/runtime';
 import './tab-exp-panel.css';
@@ -51,57 +51,57 @@ const TabExpPanelControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new TabExpPanelController(...args));
     const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     const model = (_a = c.view) == null ? void 0 : _a.model;
-    const tabPosition = ((_b = model == null ? void 0 : model.tabLayout) == null ? void 0 : _b.toLowerCase()) || "top";
+    const layoutMode = ((_b = model == null ? void 0 : model.tabLayout) == null ? void 0 : _b.toLowerCase()) || "top";
     const onTabChange = (value) => {
       c.state.activeName = value;
       c.handleTabChange();
     };
+    const tabPages = computed(() => {
+      return c.state.tabPages.map((_tab) => ({
+        id: _tab.tabTag,
+        text: _tab.caption,
+        icon: _tab.sysImage,
+        counter: _tab.counterId ? c.state.counterData[_tab.counterId] : null
+      }));
+    });
     return {
       c,
       ns,
-      tabPosition,
+      tabPages,
+      layoutMode,
       onTabChange
     };
   },
   render() {
-    let _slot;
     const {
       isCreated,
-      tabPages
+      activeName
     } = this.c.state;
-    if (this.tabPosition === "flow" || this.tabPosition === "flow_noheader") {
-      if (!isCreated) {
-        return;
-      }
-      return createVNode("div", {
-        "class": this.ns.b()
-      }, [tabPages.map((page) => {
-        var _a;
-        const target = (_a = this.c.model.controls) == null ? void 0 : _a.find((tab) => tab.id === page.tabTag);
-        return createVNode("div", {
-          "class": this.ns.b("tab-item")
-        }, [createVNode("div", {
-          "class": this.ns.b("tab-item-header")
-        }, [page.caption]), createVNode("div", {
-          "class": this.ns.b("tab-item-content")
-        }, [h(resolveComponent("IBizViewShell"), {
-          context: this.context,
-          params: this.params,
-          viewId: target == null ? void 0 : target.embeddedAppDEViewId
-        })])]);
-      })]);
+    if (!isCreated) {
+      return;
+    }
+    let solts = {};
+    if (this.layoutMode === "flow" || this.layoutMode === "flow_noheader") {
+      solts = {
+        groupContent: (tab) => {
+          var _a;
+          const target = (_a = this.c.model.controls) == null ? void 0 : _a.find((ctrl) => ctrl.id === tab.id);
+          return h(resolveComponent("IBizViewShell"), {
+            context: this.context,
+            params: this.params,
+            viewId: target == null ? void 0 : target.embeddedAppDEViewId
+          });
+        }
+      };
     }
-    return isCreated && createVNode(resolveComponent("van-tabs"), {
-      "class": [this.ns.b("header")],
-      "active": this.c.state.activeName,
-      "onChange": this.onTabChange
-    }, _isSlot(_slot = tabPages.map((page) => {
-      return createVNode(resolveComponent("van-tab"), {
-        "title": page.caption,
-        "name": page.tabTag
-      }, null);
-    })) ? _slot : {
-      default: () => [_slot]
+    return createVNode(resolveComponent("iBizTabLayout"), {
+      "class": this.ns.b(),
+      "tabPages": this.tabPages,
+      "layoutMode": this.layoutMode,
+      "activeName": activeName,
+      "onTabChange": this.onTabChange
+    }, _isSlot(solts) ? solts : {
+      default: () => [solts]
     });
   }
 });

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

@@ -0,0 +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}

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

@@ -0,0 +1,89 @@
+import { defineComponent, createVNode, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useToolBarItemRender, useToolbarGroupModalHandler } from '../toolbar-render-util.mjs';
+import './float-toolbar.css';
+
+"use strict";
+const FloatToolbar = /* @__PURE__ */ defineComponent({
+  name: "IBizFloatToolbar",
+  props: {
+    modal: {
+      type: Object
+    },
+    modelData: {
+      type: Object,
+      required: true
+    },
+    buttonsState: {
+      type: Object,
+      required: true
+    },
+    counterData: {
+      type: Object
+    },
+    placement: {
+      type: String,
+      default: "RIGHTEND"
+    },
+    direction: {
+      type: String,
+      default: "HORIZONTAL"
+    }
+  },
+  setup(props) {
+    const ns = useNamespace(`float-toolbar`);
+    const contentRef = ref();
+    const {
+      renderToolbarItemContent
+    } = useToolBarItemRender(ns, {
+      counterData: props.counterData
+    });
+    const {
+      handleItemClick
+    } = useToolbarGroupModalHandler({
+      modal: props.modal,
+      counterData: props.counterData,
+      buttonsState: props.buttonsState
+    });
+    const handleFloatToolbarClose = () => {
+      var _a;
+      (_a = props.modal) == null ? void 0 : _a.dismiss();
+    };
+    return {
+      ns,
+      contentRef,
+      handleItemClick,
+      handleFloatToolbarClose,
+      renderToolbarItemContent
+    };
+  },
+  render() {
+    var _a, _b, _c;
+    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)]
+    }, [createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [(_c = this.modelData.detoolbarItems) == null ? void 0 : _c.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")
+        disabled = false;
+      if (!visible)
+        return;
+      return createVNode("div", {
+        "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", {
+      "class": this.ns.e("modal"),
+      "onClick": this.handleFloatToolbarClose
+    }, null)]);
+  }
+});
+
+export { FloatToolbar };

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

@@ -0,0 +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}

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

@@ -0,0 +1,77 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useToolBarItemRender, useToolbarGroupModalHandler } from '../toolbar-render-util.mjs';
+import './toolbar-group-list.css';
+
+"use strict";
+const ToolbarGroupList = /* @__PURE__ */ defineComponent({
+  name: "IBizToolbarGroupList",
+  props: {
+    modal: {
+      type: Object
+    },
+    groupItems: {
+      type: Array,
+      required: true
+    },
+    buttonsState: {
+      type: Object,
+      required: true
+    },
+    counterData: {
+      type: Object
+    },
+    isGroupExtractMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("toolbar-group-list");
+    const {
+      btnType,
+      renderToolbarItemContent
+    } = useToolBarItemRender(ns, {
+      counterData: props.counterData
+    });
+    const {
+      handleItemClick
+    } = useToolbarGroupModalHandler({
+      modal: props.modal,
+      counterData: props.counterData,
+      buttonsState: props.buttonsState
+    });
+    return {
+      ns,
+      handleItemClick,
+      btnType,
+      renderToolbarItemContent
+    };
+  },
+  render() {
+    var _a;
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [(_a = this.groupItems) == null ? void 0 : _a.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")
+        disabled = false;
+      if (!visible)
+        return;
+      return createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "onClick": (_e) => !disabled && this.handleItemClick(_item, _e, this.isGroupExtractMode)
+      }, [createVNode("div", {
+        "class": this.ns.em("item", "wrapper")
+      }, [this.renderToolbarItemContent(_item)])]);
+    })])]);
+  }
+});
+
+export { ToolbarGroupList };