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

package/lib/control/search-bar/search-bar.cjs

@@ -40,11 +40,52 @@ const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
       default: () => ({})
     }
   },
-  setup() {
+  setup(props) {
     const c = vue3Util.useControlController((...args) => new runtime.SearchBarController(...args));
     const ns = vue3Util.useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const searchRef = vue.ref();
+    const dropdownTop = vue.ref(0);
+    const dropdownRef = vue.ref();
+    const showDropdown = vue.ref(false);
+    const historyItems = vue.ref([]);
+    const isCollapse = vue.ref(true);
+    const showItemRemove = vue.ref(false);
+    const timer = vue.ref();
+    const queryCacheKey = `searchbar-${props.context.srfuserid}-${props.context.srfappid}-${c.view.model.id}-${c.model.id}`;
+    let funcs;
+    const showAllGroups = vue.ref(false);
+    let resizeObserver = null;
+    const showExpand = vue.ref(false);
+    const enableStoredQuery = vue.computed(() => {
+      if (Object.hasOwnProperty.call(c.controlParams, "enablestoredquery")) {
+        return c.controlParams.enablestoredquery === "true" || c.controlParams.enablestoredquery === true;
+      }
+      return ibiz.config.mob.mobEnableStoredQuery;
+    });
+    const enableQuickGroup = vue.computed(() => {
+      return c.model.searchBarGroups && c.model.searchBarGroups.length > 0;
+    });
+    const enableDropDown = vue.computed(() => {
+      return enableStoredQuery.value;
+    });
+    const counterData = vue.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 = lodashEs.debounce(() => {
       if (onSearch) {
@@ -81,6 +122,7 @@ const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
           },
           "onConfirm": (mode, customCond) => {
             c.state.filterMode = mode;
+            c.state.selectedGroupItem = null;
             c.state.customCond = customCond;
             c.onSearch();
             if (popover) {
@@ -109,27 +151,280 @@ const SearchBarControl = /* @__PURE__ */ vue.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 = vue.computed(() => {
+      return {
+        display: showDropdown.value ? "flex" : "none",
+        top: `${dropdownTop.value}px`,
+        maxHeight: `calc(100vh - ${dropdownTop.value}px - 10px)`
+      };
+    });
+    const contentStyle = vue.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 vue.createVNode("div", {
+          "onClick": () => onSelectItem(item),
+          "onPointerdown": onPointerDown,
+          "onPointerup": onPointerUp,
+          "onPointercancel": onpointerCancel,
+          "tabindex": 0,
+          "class": ns.bem("history", "content", "item")
+        }, [vue.createVNode("div", {
+          "class": ns.bem("history", "content", "item-text")
+        }, [vue.createVNode("span", null, [item]), showItemRemove.value && vue.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 = runtime.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 vue.createVNode("div", {
+        "class": ns.b("history")
+      }, [vue.createVNode("div", {
+        "class": ns.be("history", "header")
+      }, [vue.createVNode("div", {
+        "class": ns.bem("history", "header", "title")
+      }, [ibiz.i18n.t("control.searchBar.history")]), showItemRemove.value ? vue.createVNode("span", {
+        "onClick": onCancelItemRemove
+      }, [ibiz.i18n.t("control.searchBar.cancel")]) : vue.createVNode("div", {
+        "class": ns.bem("history", "header", "clear"),
+        "onClick": clearHistory
+      }, [vue.createVNode("ion-icon", {
+        "name": "trash-outline"
+      }, null), vue.createVNode("span", null, [ibiz.i18n.t("control.searchBar.clear")])])]), vue.createVNode("div", {
+        "class": ns.be("history", "content"),
+        "style": contentStyle.value
+      }, [renderSearchHistory()]), showExpand.value && vue.createVNode("div", {
+        "class": ns.be("history", "footer"),
+        "onClick": onCollapse
+      }, [vue.createVNode(vue.resolveComponent("van-divider"), null, {
+        default: () => [!isCollapse.value ? ibiz.i18n.t("control.searchBar.collapse") : ibiz.i18n.t("control.searchBar.expand"), !isCollapse.value ? vue.createVNode("ion-icon", {
+          "name": "caret-up-outline"
+        }, null) : vue.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 vue.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 vue.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 && vue.createVNode(vue.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) ? vue.createVNode("div", {
+        "class": ns.be("quick-group", "item"),
+        "onClick": onOpenAllGroups
+      }, [vue.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 vue.createVNode(vue.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);
+    };
+    vue.onMounted(() => {
+      var _a;
+      if (enableDropDown.value && dropdownRef.value) {
+        if (enableStoredQuery.value) {
+          const tmepHistory = localStorage.getItem(queryCacheKey);
+          if (tmepHistory) {
+            historyItems.value = JSON.parse(tmepHistory);
+          }
+        }
+        funcs = vue3Util.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);
+      }
+    });
+    vue.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 vue.createVNode(vue.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 && vue.createVNode(vue.resolveComponent("van-search"), {
+      default: () => [vue.createVNode("div", {
+        "class": [this.ns.b(), this.ns.is("enable-filter", this.c.enableFilter)]
+      }, [this.c.model.enableQuickSearch && vue.createVNode(vue.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 && vue.createVNode(vue.resolveComponent("van-button"), {
         "ref": "filterButtonRef",
         "title": core.showTitle(ibiz.i18n.t("control.searchBar.filter")),
@@ -141,7 +436,11 @@ const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
             cssClass: "funnel-outline"
           }
         }, null)]
-      })]
+      })]), this.renderQuickGroup(), vue.createVNode("div", {
+        "class": this.ns.b("dropdown"),
+        "ref": "dropdownRef",
+        "style": this.style
+      }, [this.renderHistory()]), this.renderAllGroups()]
     });
   }
 });

package/lib/control/search-bar/search-bar.css

@@ -1 +1 @@
-.ibiz-control-searchbar-quick-search{width:100%}.ibiz-control-searchbar{--ibiz-control-searchbar-margin:var(--ibiz-spacing-tight);--ibiz-control-searchbar-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-height:2.25rem;display:flex;align-items:center}.ibiz-control-searchbar__filter{flex:none;border:none;font-size:var(--ibiz-width-icon-large)}.ibiz-control-searchbar .van-search{--van-search-background:var(--ibiz-color-bg-1);--van-search-padding:var(--ibiz-control-searchbar-padding);--van-search-input-height:var(--ibiz-control-searchbar-height)}.ibiz-control-searchbar .van-search .van-field__left-icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-searchbar .van-search__content{border-radius:var(--ibiz-border-radius-small)}
+.ibiz-control-searchbar-quick-search{--ibiz-control-searchbar-quick-search-height:var(--ibiz-height-control-default);--ibiz-control-searchbar-quick-search-border-radius:var(--ibiz-border-radius-small);--ibiz-control-searchbar-quick-search-left-icon:0 var(--ibiz-spacing-tight) 0 0;width:100%;background-color:transparent;height:var(--ibiz-control-searchbar-quick-search-height);padding:0}.ibiz-control-searchbar-quick-search .van-search__content{border-radius:var(--ibiz-control-searchbar-quick-search-border-radius)}.ibiz-control-searchbar-quick-search .van-field__left-icon{margin:var(--ibiz-control-searchbar-quick-search-left-icon)}.ibiz-control-searchbar{--ibiz-control-searchbar-bg-color:var(--ibiz-color-bg-1);--ibiz-control-searchbar-margin:var(--ibiz-spacing-tight);--ibiz-control-searchbar-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-filter-btn-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-searchbar-filter-btn-font-size:var(--ibiz-font-size-header-4);--ibiz-control-searchbar-filter-btn-height:var(--ibiz-height-control-default);--ibiz-control-searchbar-enable-filter-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-color-group-item-text:var(--ibiz-color-text-1);--ibiz-control-searchbar-color-group-item-bg:var(--ibiz-color-fill-1);--ibiz-control-searchbar-color-group-item-selected-bg:var(--ibiz-color-primary);--ibiz-control-searchbar-color-group-item-selected-text:var(--ibiz-color-white);--ibiz-control-searchbar-spacing-group-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-spacing-group-item-gap:var(--ibiz-spacing-tight);--ibiz-control-searchbar-spacing-group-more-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-searchbar-spacing-group-item-margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) 0 0;--ibiz-control-searchbar-spacing-group-container-padding:var(--ibiz-spacing-base);--ibiz-control-searchbar-radius-group-item:var(--ibiz-border-radius-full);--ibiz-control-searchbar-footer-item-padding:var(--ibiz-spacing-base);--ibiz-control-searchbar-footer-item-gap:var(--ibiz-spacing-base-tight);--ibiz-control-searchbar-footer-group-padding:0 var(--ibiz-spacing-base);--ibiz-control-searchbar-footer-more-color:var(--ibiz-color-link);--ibiz-control-searchbar-footer-item-shadow:var(--ibiz-shadow-elevated);--ibiz-control-searchbar-footer-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-searchbar-footer-reset-color:var(--ibiz-color-text);--ibiz-control-searchbar-footer-reset-bg-color:transparent;--ibiz-control-searchbar-footer-confirm-color:var(--ibiz-color-default);--ibiz-control-searchbar-footer-confirm-bg-color:var(--ibiz-color-primary);display:flex;align-items:center;background-color:var(--ibiz-control-searchbar-bg-color);padding:var(--ibiz-control-searchbar-padding)}.ibiz-control-searchbar__filter{flex:none;border:none;font-size:var(--ibiz-control-searchbar-filter-btn-font-size);height:var(--ibiz-control-searchbar-filter-btn-height);margin:var(--ibiz-control-searchbar-filter-btn-margin)}.ibiz-control-searchbar__filter .van-button__text{display:flex;align-items:center}.ibiz-control-searchbar__action-sheet{--van-action-sheet-cancel-padding-color:var(--ibiz-color-fill-0);--van-action-sheet-cancel-text-color:var(--ibiz-color-text-0);--van-active-color:var(--ibiz-color-fill-0)}.ibiz-control-searchbar__action-sheet--item.is-selected{color:var(--ibiz-color-primary)}.ibiz-control-searchbar.is-enable-filter{padding:var(--ibiz-control-searchbar-enable-filter-padding)}.ibiz-control-searchbar-container{width:100%;height:100%;display:block;padding:0}.ibiz-control-searchbar-dropdown{--ibiz-dropdown-popover-color-popover-bg:var(--ibiz-color-bg-1);--ibiz-dropdown-popover-color-history-item-bg:var(--ibiz-color-fill-1);--ibiz-dropdown-popover-spacing-dropdown-popover-padding:var(--ibiz-spacing-base);--ibiz-dropdown-popover-spacing-history-header-padding:var(--ibiz-spacing-tight);--ibiz-dropdown-popover-spacing-history-header-clear-gap:var(--ibiz-spacing-extra-tight);--ibiz-dropdown-popover-spacing-history-footer-padding:var(--ibiz-spacing-tight);--ibiz-dropdown-popover-spacing-history-item-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base);--ibiz-dropdown-popover-spacing-history-item-margin:var(--ibiz-spacing-extra-tight);--ibiz-dropdown-popover-spacing-history-item-gap:var(--ibiz-spacing-tight);--ibiz-dropdown-popover-font-history-item-line-height:var(--ibiz-spacing-loose);--ibiz-dropdown-popover-radius-history-item:var(--ibiz-border-radius-full);background-color:var(--ibiz-dropdown-popover-color-popover-bg);flex-direction:column;position:fixed;left:0;gap:8px;width:100vw;z-index:999;padding:var(--ibiz-dropdown-popover-spacing-dropdown-popover-padding);border-top:1px solid var(--ibiz-color-border);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-searchbar-history{flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden}.ibiz-control-searchbar-history__header{flex-shrink:0;display:flex;justify-content:space-between;padding:var(--ibiz-dropdown-popover-spacing-history-header-padding) 0}.ibiz-control-searchbar-history__header--title{font-weight:700}.ibiz-control-searchbar-history__header--clear{display:flex;align-items:center;gap:var(--ibiz-dropdown-popover-spacing-history-header-clear-gap)}.ibiz-control-searchbar-history__content{flex:1;display:flex;flex-flow:wrap;overflow:auto;gap:var(--ibiz-dropdown-popover-spacing-history-item-gap)}.ibiz-control-searchbar-history__content--item{flex-shrink:0;display:inline-flex;max-width:100%;position:relative}.ibiz-control-searchbar-history__content--item-text{max-width:100%;background-color:var(--ibiz-dropdown-popover-color-history-item-bg);border-radius:var(--ibiz-dropdown-popover-radius-history-item);padding:var(--ibiz-dropdown-popover-spacing-history-item-padding);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:var(--ibiz-dropdown-popover-spacing-history-item-margin);line-height:var(--ibiz-dropdown-popover-font-history-item-line-height)}.ibiz-control-searchbar-history__content--item-remove{position:absolute;top:0;right:0}.ibiz-control-searchbar-history__footer{--van-divider-margin:0;flex-shrink:0;text-align:center;padding:var(--ibiz-dropdown-popover-spacing-history-footer-padding) var(--ibiz-dropdown-popover-spacing-history-footer-padding) 0 var(--ibiz-dropdown-popover-spacing-history-footer-padding)}.ibiz-control-searchbar-quick-group{padding:var(--ibiz-control-searchbar-padding);display:flex;gap:var(--ibiz-control-searchbar-spacing-group-item-gap);flex-flow:wrap}.ibiz-control-searchbar-quick-group__item{-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;height:-moz-max-content;height:max-content;margin-top:var(--ibiz-control-searchbar-margin);color:var(--ibiz-control-searchbar-color-group-item-text);background-color:var(--ibiz-control-searchbar-color-group-item-bg);padding:var(--ibiz-control-searchbar-spacing-group-item-padding);border-radius:var(--ibiz-control-searchbar-radius-group-item)}.ibiz-control-searchbar-quick-group__item ion-icon{vertical-align:text-top;margin-right:var(--ibiz-control-searchbar-spacing-group-more-gap)}.ibiz-control-searchbar-quick-group__item.is-selected{color:var(--ibiz-control-searchbar-color-group-item-selected-text);background-color:var(--ibiz-control-searchbar-color-group-item-selected-bg)}.ibiz-control-searchbar-quick-group-popup{width:100%;height:100%;max-width:100%;padding:var(--ibiz-control-searchbar-spacing-group-container-padding)}.ibiz-control-searchbar-quick-group-container{--ibiz-control-searchbar-bg-color:var(--ibiz-color-bg-1);--ibiz-control-searchbar-margin:var(--ibiz-spacing-tight);--ibiz-control-searchbar-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-filter-btn-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-searchbar-filter-btn-font-size:var(--ibiz-font-size-header-4);--ibiz-control-searchbar-filter-btn-height:var(--ibiz-height-control-default);--ibiz-control-searchbar-enable-filter-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-color-group-item-text:var(--ibiz-color-text-1);--ibiz-control-searchbar-color-group-item-bg:var(--ibiz-color-fill-1);--ibiz-control-searchbar-color-group-item-selected-bg:var(--ibiz-color-primary);--ibiz-control-searchbar-color-group-item-selected-text:var(--ibiz-color-white);--ibiz-control-searchbar-spacing-group-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-searchbar-spacing-group-item-gap:var(--ibiz-spacing-tight);--ibiz-control-searchbar-spacing-group-more-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-searchbar-spacing-group-item-margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) 0 0;--ibiz-control-searchbar-spacing-group-container-padding:var(--ibiz-spacing-base);--ibiz-control-searchbar-radius-group-item:var(--ibiz-border-radius-full);--ibiz-control-searchbar-footer-item-padding:var(--ibiz-spacing-base);--ibiz-control-searchbar-footer-item-gap:var(--ibiz-spacing-base-tight);--ibiz-control-searchbar-footer-group-padding:0 var(--ibiz-spacing-base);--ibiz-control-searchbar-footer-more-color:var(--ibiz-color-link);--ibiz-control-searchbar-footer-item-shadow:var(--ibiz-shadow-elevated);--ibiz-control-searchbar-footer-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-searchbar-footer-reset-color:var(--ibiz-color-text);--ibiz-control-searchbar-footer-reset-bg-color:transparent;--ibiz-control-searchbar-footer-confirm-color:var(--ibiz-color-default);--ibiz-control-searchbar-footer-confirm-bg-color:var(--ibiz-color-primary);display:flex;flex-direction:column;width:100%;height:100%}.ibiz-control-searchbar-quick-group-container__content{flex:1;overflow:auto}.ibiz-control-searchbar-quick-group-container__content--item{margin:var(--ibiz-control-searchbar-spacing-group-item-margin)}.ibiz-control-searchbar-quick-group-container__footer{display:flex;align-items:center;justify-content:flex-start;display:flex;flex-shrink:0;gap:var(--ibiz-control-searchbar-footer-item-gap);padding:var(--ibiz-control-searchbar-footer-padding)}.ibiz-control-searchbar-quick-group-container__footer--reset{flex:1;padding:var(--ibiz-control-searchbar-footer-item-padding);box-shadow:var(--ibiz-control-searchbar-footer-item-shadow);background-color:var(--ibiz-control-searchbar-footer-reset-bg-color);color:var(--ibiz-control-searchbar-text-color);width:100%;text-align:center;border-radius:var(--ibiz-control-searchbar-footer-item-border-radius)}.ibiz-control-searchbar-quick-group-container__footer--search{flex:1;padding:var(--ibiz-control-searchbar-footer-item-padding);box-shadow:var(--ibiz-control-searchbar-footer-item-shadow);background-color:var(--ibiz-control-searchbar-footer-confirm-bg-color);color:var(--ibiz-control-searchbar-footer-confirm-color);width:100%;text-align:center;opacity:.9;border-radius:var(--ibiz-control-searchbar-footer-item-border-radius)}

package/lib/control/tab-exp-panel/tab-exp-panel.cjs

@@ -53,57 +53,57 @@ const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.TabExpPanelController(...args));
     const ns = vue3Util.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 = vue.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 vue.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 vue.createVNode("div", {
-          "class": this.ns.b("tab-item")
-        }, [vue.createVNode("div", {
-          "class": this.ns.b("tab-item-header")
-        }, [page.caption]), vue.createVNode("div", {
-          "class": this.ns.b("tab-item-content")
-        }, [vue.h(vue.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 vue.h(vue.resolveComponent("IBizViewShell"), {
+            context: this.context,
+            params: this.params,
+            viewId: target == null ? void 0 : target.embeddedAppDEViewId
+          });
+        }
+      };
     }
-    return isCreated && vue.createVNode(vue.resolveComponent("van-tabs"), {
-      "class": [this.ns.b("header")],
-      "active": this.c.state.activeName,
-      "onChange": this.onTabChange
-    }, _isSlot(_slot = tabPages.map((page) => {
-      return vue.createVNode(vue.resolveComponent("van-tab"), {
-        "title": page.caption,
-        "name": page.tabTag
-      }, null);
-    })) ? _slot : {
-      default: () => [_slot]
+    return vue.createVNode(vue.resolveComponent("iBizTabLayout"), {
+      "class": this.ns.b(),
+      "tabPages": this.tabPages,
+      "layoutMode": this.layoutMode,
+      "activeName": activeName,
+      "onTabChange": this.onTabChange
+    }, _isSlot(solts) ? solts : {
+      default: () => [solts]
     });
   }
 });

package/lib/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/lib/control/toolbar/float-toolbar/float-toolbar.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var toolbarRenderUtil = require('../toolbar-render-util.cjs');
+require('./float-toolbar.css');
+
+"use strict";
+const FloatToolbar = /* @__PURE__ */ vue.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 = vue3Util.useNamespace(`float-toolbar`);
+    const contentRef = vue.ref();
+    const {
+      renderToolbarItemContent
+    } = toolbarRenderUtil.useToolBarItemRender(ns, {
+      counterData: props.counterData
+    });
+    const {
+      handleItemClick
+    } = toolbarRenderUtil.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 vue.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)]
+    }, [vue.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 vue.createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "onClick": (_e) => !disabled && this.handleItemClick(_item, _e)
+      }, [vue.createVNode("div", {
+        "class": this.ns.em("item", "wrapper")
+      }, [this.renderToolbarItemContent(_item)])]);
+    })]), vue.createVNode("div", {
+      "class": this.ns.e("modal"),
+      "onClick": this.handleFloatToolbarClose
+    }, null)]);
+  }
+});
+
+exports.FloatToolbar = FloatToolbar;

package/lib/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/lib/control/toolbar/toolbar-group-list/toolbar-group-list.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var toolbarRenderUtil = require('../toolbar-render-util.cjs');
+require('./toolbar-group-list.css');
+
+"use strict";
+const ToolbarGroupList = /* @__PURE__ */ vue.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 = vue3Util.useNamespace("toolbar-group-list");
+    const {
+      btnType,
+      renderToolbarItemContent
+    } = toolbarRenderUtil.useToolBarItemRender(ns, {
+      counterData: props.counterData
+    });
+    const {
+      handleItemClick
+    } = toolbarRenderUtil.useToolbarGroupModalHandler({
+      modal: props.modal,
+      counterData: props.counterData,
+      buttonsState: props.buttonsState
+    });
+    return {
+      ns,
+      handleItemClick,
+      btnType,
+      renderToolbarItemContent
+    };
+  },
+  render() {
+    var _a;
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.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 vue.createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "onClick": (_e) => !disabled && this.handleItemClick(_item, _e, this.isGroupExtractMode)
+      }, [vue.createVNode("div", {
+        "class": this.ns.em("item", "wrapper")
+      }, [this.renderToolbarItemContent(_item)])]);
+    })])]);
+  }
+});
+
+exports.ToolbarGroupList = ToolbarGroupList;

package/lib/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}