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

package/es/common/fullscreen-header/fullscreen-header.css

@@ -1 +1 @@
-.ibiz-fullscreen-header{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);height:var(--ibiz-fullscreen-header-height-fullscreen-header);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;font-size:var(--ibiz-fullscreen-header-font-fullscreen-header-fontSize);font-weight:var(--ibiz-fullscreen-header-font-fullscreen-header-fontWeight)}.ibiz-fullscreen-header__close{position:absolute;right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-header-1);height:100%;display:flex;align-items:center}.ibiz-full-screen{position:fixed;top:0;left:0;height:var(--ibiz-fullscreen-header-height-full-screen);width:var(--ibiz-fullscreen-header-width-full-screen);padding:var(--ibiz-fullscreen-header-spacing-full-screen-spacing)}
+.ibiz-fullscreen-header{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);height:var(--ibiz-fullscreen-header-height-fullscreen-header);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;font-size:var(--ibiz-fullscreen-header-font-fullscreen-header-fontSize);font-weight:var(--ibiz-fullscreen-header-font-fullscreen-header-fontWeight)}.ibiz-fullscreen-header__close{position:absolute;right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-header-1);height:100%;display:flex;align-items:center}.ibiz-full-screen{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);position:fixed;top:0;left:0;z-index:10;height:var(--ibiz-fullscreen-header-height-full-screen)!important;width:var(--ibiz-fullscreen-header-width-full-screen)!important;padding:var(--ibiz-fullscreen-header-spacing-full-screen-spacing)}

package/es/control/app-menu/app-menu.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, resolveComponent, ref, onMounted, watch } from 'vue';
+import { defineComponent, createVNode, resolveComponent, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { AppMenuController } from '@ibiz-template/runtime';
@@ -65,7 +65,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       activeName.value = active;
       await c.onClickMenuItem(active, event, true, opts);
     };
-    onMounted(async () => {
+    c.evt.on("onCreated", async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
         return item.openDefault && c.isMobMenuItemValid(item);

package/es/control/app-menu/custom-menu-design/custom-menu-design.css

@@ -1 +1 @@
-.ibiz-menu-design{--ibiz-menu-design-color-item-bg:var(--ibiz-color-bg-0);--ibiz-menu-design-color-primary-btn-text:var(--ibiz-color-primary);--ibiz-menu-design-height-item:var(--ibiz-height-control-large);--ibiz-menu-design-spacing-padding:var(--ibiz-spacing-base);--ibiz-menu-design-spacing-header-padding:0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-spacing-item-padding:0 var(--ibiz-spacing-base);--ibiz-menu-design-spacing-item-margin:var(--ibiz-spacing-tight) 0;--ibiz-menu-design-spacing-item-caption-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-spacing-item-checkbox-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-menu-design-spacing-node-item-margin-left:1.25rem;--ibiz-menu-design-radius-item-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-font-header-font-size:var(--ibiz-font-size-header-5);--ibiz-menu-design-font-header-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-menu-design-font-close-icon-font-size:var(--ibiz-font-size-header-3);--ibiz-menu-design-font-item-font-size:var(--ibiz-font-size-header-6);--ibiz-menu-design-icon-item-size:var(--ibiz-font-size-header-6);display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-menu-design-spacing-padding)}.ibiz-menu-design__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-spacing-header-padding);font-size:var(--ibiz-menu-design-font-header-font-size)}.ibiz-menu-design__header--close-icon{font-size:var(--ibiz-menu-design-font-close-icon-font-size)}.ibiz-menu-design__header--caption{font-weight:var(--ibiz-menu-design-font-header-caption-font-weight)}.ibiz-menu-design__header--save{color:var(--ibiz-menu-design-color-primary-btn-text)}.ibiz-menu-design__content{flex:1;overflow-y:auto}.ibiz-menu-design__item{display:flex;align-items:center;height:var(--ibiz-menu-design-height-item);padding:var(--ibiz-menu-design-spacing-item-padding);margin:var(--ibiz-menu-design-spacing-item-margin);font-size:var(--ibiz-menu-design-font-item-font-size);background-color:var(--ibiz-menu-design-color-item-bg);border-radius:var(--ibiz-menu-design-radius-item-circle);line-height:var(--ibiz-menu-design-height-item)}.ibiz-menu-design__item--icon{display:flex;align-items:center;width:var(--ibiz-menu-design-icon-item-size)}.ibiz-menu-design__item--icon+.ibiz-menu-design__item--caption{margin:var(--ibiz-menu-design-spacing-item-caption-margin)}.ibiz-menu-design__item--caption{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-menu-design__item--checkbox{padding:var(--ibiz-menu-design-spacing-item-checkbox-margin);margin-left:auto}.ibiz-menu-design .ibiz-menu-design__item{position:relative}.ibiz-menu-design .ibiz-menu-design__item::after{position:absolute;display:block;width:100%;height:100%;left:0;top:0;content:""}
+.ibiz-menu-design{--ibiz-menu-design-color-list-bg:var(--ibiz-color-bg-0);--ibiz-menu-design-color-primary-btn-text:var(--ibiz-color-primary);--ibiz-menu-design-spacing-padding:var(--ibiz-spacing-base);--ibiz-menu-design-spacing-header-padding:0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-radius-item-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-font-header-font-size:var(--ibiz-font-size-header-5);--ibiz-menu-design-font-header-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-menu-design-font-close-icon-font-size:var(--ibiz-font-size-header-3);--ibiz-menu-design-font-item-font-size:var(--ibiz-font-size-header-6);display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-menu-design-spacing-padding)}.ibiz-menu-design__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-spacing-header-padding);font-size:var(--ibiz-menu-design-font-header-font-size)}.ibiz-menu-design__header--close-icon{font-size:var(--ibiz-menu-design-font-close-icon-font-size)}.ibiz-menu-design__header--caption{font-weight:var(--ibiz-menu-design-font-header-caption-font-weight)}.ibiz-menu-design__header--save{color:var(--ibiz-menu-design-color-primary-btn-text)}.ibiz-menu-design__content{flex:1;overflow-y:auto}.ibiz-menu-design.is-list{background-color:var(--ibiz-menu-design-color-list-bg)}

package/es/control/app-menu/custom-menu-design/custom-menu-design.mjs

@@ -1,7 +1,7 @@
-import { defineComponent, createVNode, resolveComponent, ref } from 'vue';
+import { defineComponent, createVNode, ref } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import { recursiveIterate } from '@ibiz-template/core';
-import { getDefaultIconVal } from '../menu-render-util.mjs';
+import { MenuDesignList } from './menu-design-list/menu-design-list.mjs';
+import { MenuDesignTree } from './menu-design-tree/menu-design-tree.mjs';
 import './custom-menu-design.css';
 
 "use strict";
@@ -12,12 +12,12 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       type: Object,
       required: true
     },
-    show: {
-      type: Boolean,
-      default: false
-    },
     modal: {
       type: Object
+    },
+    showMode: {
+      type: String,
+      default: "DEFALUT"
     }
   },
   emits: {
@@ -28,104 +28,48 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
   }) {
     const ns = useNamespace("menu-design");
     const c = props.controller;
-    const menuMap = ref(/* @__PURE__ */ new Map());
-    const allMenuMap = /* @__PURE__ */ new Map();
-    const initData = () => {
-      [...c.state.mobMenuItems, ...c.saveConfigs].forEach((item) => {
-        if (item.id) {
-          menuMap.value.set(item.id, item);
-        }
-      });
-      recursiveIterate({
-        appMenuItems: c.state.mobAuthedMenuItems
-      }, (item) => {
-        if (item.id) {
-          allMenuMap.set(item.id, item);
-        }
-      }, {
-        childrenFields: ["appMenuItems"]
-      });
-    };
-    initData();
-    const getItemIcon = (item, isGroup) => {
-      if (item.sysImage)
-        return item.sysImage;
-      switch (c.model.appMenuStyle) {
-        case "ICONVIEW":
-          return !isGroup ? getDefaultIconVal() : void 0;
-        case "LISTVIEW":
-          return;
-        default:
-          return getDefaultIconVal();
-      }
-    };
+    const curVisibleMenuItems = ref([...c.state.mobMenuItems]);
     const onClose = () => {
       var _a;
       emit("close");
       (_a = props.modal) == null ? void 0 : _a.dismiss();
-      menuMap.value.clear();
     };
     const onSave = async () => {
-      const curMenuItems = Array.from(menuMap.value.values()).map((item) => {
-        return allMenuMap.get(item.id);
-      }).filter((item) => !!item);
-      c.saveCustomMenusModel(curMenuItems);
+      c.saveCustomMenusModel(curVisibleMenuItems.value);
       onClose();
     };
-    const handleItemClick = (item, checked) => {
-      if (!item.id)
-        return;
-      if (checked) {
-        menuMap.value.delete(item.id);
-      } else {
-        menuMap.value.set(item.id, item);
-      }
-    };
-    const renderNodeItem = (_item, _level, isGroup) => {
-      const marginLeft = "calc(".concat(_level, " * var(").concat(ns.cssVarBlockName("spacing-node-item-margin-left"), "))");
-      let checked = menuMap.value.has(_item.id || "");
-      return createVNode("div", {
-        "class": [ns.e("item"), ns.is("group-item", !!isGroup)],
-        "style": {
-          marginLeft
-        },
-        "onClick": () => handleItemClick(_item, checked)
-      }, [createVNode(resolveComponent("iBizIcon"), {
-        "class": ns.em("item", "icon"),
-        "icon": getItemIcon(_item, isGroup)
-      }, null), createVNode("div", {
-        "class": ns.em("item", "caption")
-      }, [_item.caption]), createVNode(resolveComponent("van-checkbox"), {
-        "modelValue": checked,
-        "onUpdate:modelValue": ($event) => checked = $event,
-        "class": ns.em("item", "checkbox")
-      }, null)]);
+    const onCurVisibleMenuChange = (menuItems) => {
+      curVisibleMenuItems.value = menuItems;
     };
-    const renderNode = (_item, _level) => {
-      var _a;
-      if (_item.appMenuItems && _item.appMenuItems.length > 0) {
-        return [renderNodeItem(_item, _level, true), ...(_a = _item.appMenuItems) == null ? void 0 : _a.map((item) => {
-          return renderNode(item, _level + 1);
-        })];
+    const renderContent = () => {
+      switch (props.showMode) {
+        case "LIST":
+          return createVNode(MenuDesignList, {
+            "curVisibleMenuItems": curVisibleMenuItems.value,
+            "allVisibleMenuItems": c.state.mobAuthedMenuItems,
+            "onCurVisibleMenuChange": onCurVisibleMenuChange
+          }, null);
+        case "TREE":
+        default:
+          return createVNode(MenuDesignTree, {
+            "curVisibleMenuItems": curVisibleMenuItems.value,
+            "allVisibleMenuItems": c.state.mobAuthedMenuItems,
+            "appMenuStyle": c.model.appMenuStyle,
+            "onCurVisibleMenuChange": onCurVisibleMenuChange
+          }, null);
       }
-      return renderNodeItem(_item, _level);
-    };
-    const renderTree = (items) => {
-      return createVNode("div", {
-        "class": ns.e("tree")
-      }, [items.map((item) => renderNode(item, 0))]);
     };
     return {
       c,
       ns,
       onSave,
       onClose,
-      renderTree
+      renderContent
     };
   },
   render() {
     return createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.ns.is(this.showMode.toLocaleLowerCase(), true)]
     }, [createVNode("div", {
       "class": this.ns.e("header")
     }, [createVNode("ion-icon", {
@@ -139,7 +83,7 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       "onClick": this.onSave
     }, [ibiz.i18n.t("control.appmenu.save")])]), createVNode("div", {
       "class": this.ns.e("content")
-    }, [this.c.state.mobAuthedMenuItems.length ? this.renderTree(this.c.state.mobAuthedMenuItems) : createVNode(resolveComponent("iBizNoData"), null, null)])]);
+    }, [this.renderContent()])]);
   }
 });
 

package/es/control/app-menu/custom-menu-design/menu-design-list/menu-design-list.css

@@ -0,0 +1 @@
+.ibiz-menu-design-list{--ibiz-menu-design-list-color-group-caption:var(--ibiz-color-text-2);--ibiz-menu-design-list-color-draggable-bg:var(--ibiz-color-bg-1);--ibiz-menu-design-list-color-draggable-prefix-icon:var(--ibiz-color-danger);--ibiz-menu-design-list-color-draggable-add-icon:var(--ibiz-color-primary);--ibiz-menu-design-list-color-draggable-item-content-border:var(--ibiz-color-border);--ibiz-menu-design-list-width-draggable-item-icon:var(--van-tabbar-item-icon-size);--ibiz-menu-design-list-spacing-caption-padding:var(--ibiz-spacing-base) 0;--ibiz-menu-design-list-spacing-draggable-padding:var(--ibiz-spacing-base-tight);--ibiz-menu-design-list-spacing-draggable-item-content-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-menu-design-list-spacing-draggable-prefix-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-menu-design-list-spacing-draggable-item-icon:0 var(--ibiz-spacing-tight) 0 0;--ibiz-menu-design-list-radius-draggable-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-list-font-draggable-icon:var(--ibiz-font-size-header-3);--ibiz-menu-design-list-font-draggable-item:var(--ibiz-width-icon-medium);--ibiz-menu-design-list-line-height-draggable-item-caption:1}.ibiz-menu-design-list__group--caption{padding:var(--ibiz-menu-design-list-spacing-caption-padding);color:var(--ibiz-menu-design-list-color-group-caption)}.ibiz-menu-design-list__draggable{padding:var(--ibiz-menu-design-list-spacing-draggable-padding);background-color:var(--ibiz-menu-design-list-color-draggable-bg);border-radius:var(--ibiz-menu-design-list-radius-draggable-circle)}.ibiz-menu-design-list__draggable--icon{font-size:var(--ibiz-menu-design-list-font-draggable-icon)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--prefix-icon{margin:var(--ibiz-menu-design-list-spacing-draggable-prefix-icon-margin)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--remove-icon{color:var(--ibiz-menu-design-list-color-draggable-prefix-icon)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--add-icon{color:var(--ibiz-menu-design-list-color-draggable-add-icon)}.ibiz-menu-design-list__draggable--item{display:flex;align-items:center;width:100%;font-size:var(--ibiz-menu-design-list-font-draggable-item)}.ibiz-menu-design-list__draggable--item-content{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-list-spacing-draggable-item-content-padding);border-bottom:1px solid var(--ibiz-menu-design-list-color-draggable-item-content-border)}.ibiz-menu-design-list__draggable--item-caption{display:flex;align-items:center;line-height:var(--ibiz-menu-design-list-line-height-draggable-item-caption)}.ibiz-menu-design-list__draggable--item-icon{display:flex;align-items:center;width:var(--ibiz-menu-design-list-width-draggable-item-icon);margin:var(--ibiz-menu-design-list-spacing-draggable-item-icon)}

package/es/control/app-menu/custom-menu-design/menu-design-list/menu-design-list.mjs

@@ -0,0 +1,105 @@
+import { defineComponent, createVNode, ref, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import draggable from 'vuedraggable';
+import './menu-design-list.css';
+
+"use strict";
+const MenuDesignList = /* @__PURE__ */ defineComponent({
+  name: "IBizMenuDesignList",
+  components: {
+    draggable
+  },
+  props: {
+    curVisibleMenuItems: {
+      type: Array,
+      required: true
+    },
+    allVisibleMenuItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    curVisibleMenuChange: (_menuItems) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("menu-design-list");
+    const curMenuItems = ref([]);
+    const moreMenuItems = ref([]);
+    const initData = () => {
+      curMenuItems.value = [...props.curVisibleMenuItems];
+      moreMenuItems.value = props.allVisibleMenuItems.filter((menu) => !props.curVisibleMenuItems.find((_item) => menu.id === _item.id));
+    };
+    initData();
+    const emitChange = () => {
+      emit("curVisibleMenuChange", [...curMenuItems.value]);
+    };
+    const handleRemoveOrAdd = (type, index) => {
+      if (type === "nav") {
+        const item = curMenuItems.value[index];
+        curMenuItems.value.splice(index, 1);
+        moreMenuItems.value.push(item);
+      } else {
+        const item = moreMenuItems.value[index];
+        moreMenuItems.value.splice(index, 1);
+        curMenuItems.value.push(item);
+      }
+      emitChange();
+    };
+    const renderDraggable = (type, menuItems) => {
+      return createVNode(draggable, {
+        "itemKey": "id",
+        "group": "menu-design",
+        "handle": ".draggable-icon",
+        "list": menuItems,
+        "class": ns.e("draggable"),
+        "onEnd": emitChange
+      }, {
+        item: ({
+          element,
+          index
+        }) => {
+          return createVNode("div", {
+            "class": ns.em("draggable", "item")
+          }, [createVNode("ion-icon", {
+            "name": type === "nav" ? "remove-circle" : "add-circle",
+            "class": [ns.em("draggable", "icon"), ns.em("draggable", type === "nav" ? "remove-icon" : "add-icon"), ns.em("draggable", "prefix-icon")],
+            "onClick": () => handleRemoveOrAdd(type, index)
+          }, null), createVNode("div", {
+            "class": ns.em("draggable", "item-content")
+          }, [createVNode("div", {
+            "class": ns.em("draggable", "item-caption")
+          }, [createVNode(resolveComponent("iBizIcon"), {
+            "icon": element.sysImage,
+            "class": ns.em("draggable", "item-icon")
+          }, null), createVNode("div", null, [element.caption])]), createVNode("ion-icon", {
+            "name": "menu-outline",
+            "class": ["draggable-icon", ns.em("draggable", "icon"), ns.em("draggable", "suffix-icon")]
+          }, null)])]);
+        }
+      });
+    };
+    const renderMenuList = (type) => {
+      return createVNode("div", {
+        "class": ns.e("group")
+      }, [createVNode("div", {
+        "class": ns.em("group", "caption")
+      }, [type === "nav" ? ibiz.i18n.t("control.appmenu.bottomNav") : ibiz.i18n.t("control.appmenu.more")]), renderDraggable(type, type === "nav" ? curMenuItems.value : moreMenuItems.value)]);
+    };
+    return {
+      ns,
+      renderMenuList
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [[this.renderMenuList("nav"), this.renderMenuList("more")]])]);
+  }
+});
+
+export { MenuDesignList };

package/es/control/app-menu/custom-menu-design/menu-design-tree/menu-design-tree.css

@@ -0,0 +1 @@
+.ibiz-menu-design-tree{--ibiz-menu-design-tree-color-item-bg:var(--ibiz-color-bg-0);--ibiz-menu-design-tree-height-item:var(--ibiz-height-control-large);--ibiz-menu-design-tree-spacing-item-padding:0 var(--ibiz-spacing-base);--ibiz-menu-design-tree-spacing-item-margin:var(--ibiz-spacing-tight) 0;--ibiz-menu-design-tree-spacing-item-caption-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-tree-spacing-item-checkbox-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-menu-design-tree-spacing-node-item-margin-left:1.25rem;--ibiz-menu-design-tree-radius-item-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-tree-font-item-font-size:var(--ibiz-font-size-header-6);--ibiz-menu-design-tree-icon-item-size:var(--ibiz-font-size-header-6)}.ibiz-menu-design-tree__item{display:flex;align-items:center;height:var(--ibiz-menu-design-tree-height-item);padding:var(--ibiz-menu-design-tree-spacing-item-padding);margin:var(--ibiz-menu-design-tree-spacing-item-margin);font-size:var(--ibiz-menu-design-tree-font-item-font-size);line-height:var(--ibiz-menu-design-tree-height-item);background-color:var(--ibiz-menu-design-tree-color-item-bg);border-radius:var(--ibiz-menu-design-tree-radius-item-circle)}.ibiz-menu-design-tree__item--icon{display:flex;align-items:center;width:var(--ibiz-menu-design-tree-icon-item-size)}.ibiz-menu-design-tree__item--icon+.ibiz-menu-design-tree__item--caption{margin:var(--ibiz-menu-design-tree-spacing-item-caption-margin)}.ibiz-menu-design-tree__item--caption{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-menu-design-tree__item--checkbox{padding:var(--ibiz-menu-design-tree-spacing-item-checkbox-margin);margin-left:auto}.ibiz-menu-design-tree .ibiz-menu-design-tree__item{position:relative}.ibiz-menu-design-tree .ibiz-menu-design-tree__item::after{position:absolute;top:0;left:0;display:block;width:100%;height:100%;content:""}

package/es/control/app-menu/custom-menu-design/menu-design-tree/menu-design-tree.mjs

@@ -0,0 +1,124 @@
+import { defineComponent, createVNode, ref, onUnmounted, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { recursiveIterate } from '@ibiz-template/core';
+import { getDefaultIconVal } from '../../menu-render-util.mjs';
+import './menu-design-tree.css';
+
+"use strict";
+const MenuDesignTree = /* @__PURE__ */ defineComponent({
+  name: "IBizMenuDesignTree",
+  props: {
+    curVisibleMenuItems: {
+      type: Array,
+      required: true
+    },
+    allVisibleMenuItems: {
+      type: Array,
+      required: true
+    },
+    appMenuStyle: {
+      type: String
+    }
+  },
+  emits: {
+    curVisibleMenuChange: (_menuItems) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("menu-design-tree");
+    const menuMap = ref(/* @__PURE__ */ new Map());
+    const allMenuMap = /* @__PURE__ */ new Map();
+    const initData = () => {
+      recursiveIterate({
+        appMenuItems: props.curVisibleMenuItems
+      }, (item) => {
+        if (item.id) {
+          menuMap.value.set(item.id, item);
+        }
+      }, {
+        childrenFields: ["appMenuItems"]
+      });
+      recursiveIterate({
+        appMenuItems: props.allVisibleMenuItems
+      }, (item) => {
+        if (item.id) {
+          allMenuMap.set(item.id, item);
+        }
+      }, {
+        childrenFields: ["appMenuItems"]
+      });
+    };
+    initData();
+    onUnmounted(() => {
+      menuMap.value.clear();
+      allMenuMap.clear();
+    });
+    const getItemIcon = (item, isGroup) => {
+      if (item.sysImage)
+        return item.sysImage;
+      switch (props.appMenuStyle) {
+        case "ICONVIEW":
+          return !isGroup ? getDefaultIconVal() : void 0;
+        case "LISTVIEW":
+          return;
+        default:
+          return getDefaultIconVal();
+      }
+    };
+    const handleItemClick = (item, checked) => {
+      if (!item.id)
+        return;
+      if (checked) {
+        menuMap.value.delete(item.id);
+      } else {
+        menuMap.value.set(item.id, item);
+      }
+      emit("curVisibleMenuChange", Array.from(menuMap.value.values()).map((_menu) => {
+        return allMenuMap.get(_menu.id);
+      }).filter((_menu) => !!_menu));
+    };
+    const renderNodeItem = (_item, _level, isGroup) => {
+      const marginLeft = "calc(".concat(_level, " * var(").concat(ns.cssVarBlockName("spacing-node-item-margin-left"), "))");
+      let checked = menuMap.value.has(_item.id || "");
+      return createVNode("div", {
+        "class": [ns.e("item"), ns.is("group-item", !!isGroup)],
+        "style": {
+          marginLeft
+        },
+        "onClick": () => handleItemClick(_item, checked)
+      }, [createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.em("item", "icon"),
+        "icon": getItemIcon(_item, isGroup)
+      }, null), createVNode("div", {
+        "class": ns.em("item", "caption")
+      }, [_item.caption]), createVNode(resolveComponent("van-checkbox"), {
+        "modelValue": checked,
+        "onUpdate:modelValue": ($event) => checked = $event,
+        "class": ns.em("item", "checkbox")
+      }, null)]);
+    };
+    const renderNode = (_item, _level) => {
+      var _a;
+      if (_item.appMenuItems && _item.appMenuItems.length > 0) {
+        return [renderNodeItem(_item, _level, true), ...(_a = _item.appMenuItems) == null ? void 0 : _a.map((item) => {
+          return renderNode(item, _level + 1);
+        })];
+      }
+      return renderNodeItem(_item, _level);
+    };
+    return {
+      ns,
+      renderNode
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [this.allVisibleMenuItems.map((item) => this.renderNode(item, 0))])]);
+  }
+});
+
+export { MenuDesignTree };

package/es/control/app-menu/menu-render-util.mjs

@@ -8,11 +8,14 @@ function getDefaultIconVal() {
   };
 }
 function useMenuRender(c) {
+  const isDefaultMenu = !c.model.appMenuStyle;
+  const showMode = isDefaultMenu ? "LIST" : "TREE";
   const onCustomizedClick = async () => {
     await ibiz.overlay.drawer((modal) => {
       return h(MenuDesign, {
         modal,
-        controller: c
+        controller: c,
+        showMode
       });
     }, {}, {
       width: 100,

package/es/control/form/form-detail/form-button/form-button.mjs

@@ -55,12 +55,12 @@ const FormButton = /* @__PURE__ */ defineComponent({
     }, {
       default: () => [createVNode("div", {
         "class": this.ns.b("content")
-      }, [createVNode(resolveComponent("iBizIcon"), {
+      }, [this.modelData.sysImage ? createVNode(resolveComponent("iBizIcon"), {
         "class": this.ns.bm("content", "icon"),
         "icon": this.modelData.sysImage
-      }, null), createVNode("span", {
+      }, null) : null, this.modelData.showCaption ? createVNode("span", {
         "class": this.ns.bm("content", "caption")
-      }, [this.modelData.showCaption ? this.captionText : null])])]
+      }, [this.captionText]) : null])]
     })]);
   }
 });

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
     },
@@ -47,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;

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])]);
     })])]);
   }
 });