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

package/lib/control/toolbar/toolbar.cjs

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

package/lib/control/toolbar/toolbar.css

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