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

package/es/common/tab-layout/tab-sidebar-layout/tab-sidebar-layout.mjs

@@ -0,0 +1,59 @@
+import { isVNode, defineComponent, createVNode, resolveComponent, ref } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useLayoutRender, layoutEmits, layoutProps } from '../tab-layout-util.mjs';
+import './tab-sidebar-layout.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const TabSidebarLayout = /* @__PURE__ */ defineComponent({
+  name: "IBizTabSidebarLayout",
+  props: layoutProps,
+  emits: layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("tab-sidebar-layout");
+    const activeIndex = ref(0);
+    const {
+      onTabChange
+    } = useLayoutRender(emit);
+    const onSidebarChange = (index) => {
+      var _a;
+      activeIndex.value = index;
+      const tabTag = (_a = props.tabPages[index]) == null ? void 0 : _a.id;
+      onTabChange(tabTag);
+    };
+    return {
+      ns,
+      activeIndex,
+      onTabChange,
+      onSidebarChange
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode(resolveComponent("van-sidebar"), {
+      "class": [this.ns.b(), this.ns.is(this.layoutMode, !!this.layoutMode)],
+      "modelValue": this.activeIndex,
+      "onUpdate:modelValue": ($event) => this.activeIndex = $event,
+      "onChange": this.onSidebarChange
+    }, _isSlot(_slot = this.tabPages.map((tab) => {
+      const isLongLabel = tab.text && tab.text.length > 3;
+      return createVNode(resolveComponent("van-sidebar-item"), null, {
+        title: () => createVNode("div", {
+          "class": [this.ns.e("tab-item"), this.ns.is("long-label", !!isLongLabel)]
+        }, [createVNode(resolveComponent("iBizInfoItem"), {
+          "label": tab.text,
+          "icon": tab.icon,
+          "badge": tab.counter
+        }, null)])
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { TabSidebarLayout };

package/es/common/view-message/view-message.css

@@ -0,0 +1 @@
+.ibiz-view-message{padding:var(--ibiz-view-message-padding)}

package/es/common/view-message/view-message.mjs

@@ -0,0 +1,131 @@
+import { defineComponent, createVNode, resolveComponent, ref, watch } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import './view-message.css';
+
+"use strict";
+const ViewMessage = /* @__PURE__ */ defineComponent({
+  name: "ViewMessage",
+  props: {
+    messages: {
+      type: Array
+    },
+    scroll: {
+      type: Boolean,
+      default: false
+    },
+    context: {
+      type: Object,
+      required: false
+    },
+    params: {
+      type: Object,
+      required: false
+    },
+    controller: {
+      type: Object
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("view-message");
+    const getTypeIcon = (messageType) => {
+      switch (messageType) {
+        case "WARN":
+          return "warning-o";
+        case "ERROR":
+          return "close";
+        default:
+          return "info-o";
+      }
+    };
+    const items = ref([]);
+    const initialIndex = ref(0);
+    const uuid = ref("");
+    const isHiddenContainer = ref(false);
+    watch(() => props.messages, () => {
+      initialIndex.value = 0;
+      uuid.value = createUUID();
+      if (Array.isArray(props.messages)) {
+        items.value = props.messages.filter((item) => item.title || item.message || item.layoutPanel && item.data).map((item) => {
+          return {
+            ...item
+          };
+        });
+        isHiddenContainer.value = false;
+      } else {
+        items.value = [];
+        isHiddenContainer.value = true;
+      }
+    }, {
+      immediate: true
+    });
+    const container = ref(null);
+    const carouselHeight = ref("");
+    const handleAlertClose = (index) => {
+      var _a;
+      items.value[index].hidden = true;
+      const isHiddenCarouse = items.value.every((item2) => item2.hidden);
+      if (isHiddenCarouse) {
+        isHiddenContainer.value = true;
+      }
+      uuid.value = createUUID();
+      const item = items.value[index];
+      (_a = props.controller) == null ? void 0 : _a.setMsgRemoveModeStorage(item);
+    };
+    const handleChange = (index) => {
+      initialIndex.value = index;
+    };
+    return {
+      ns,
+      getTypeIcon,
+      items,
+      container,
+      carouselHeight,
+      initialIndex,
+      uuid,
+      isHiddenContainer,
+      handleAlertClose,
+      handleChange
+    };
+  },
+  render() {
+    const renderLayoutPanel = (item) => {
+      return createVNode(resolveComponent("iBizControlShell"), {
+        "data": item.data,
+        "modelData": item.layoutPanel,
+        "context": this.context,
+        "params": this.params
+      }, null);
+    };
+    const renderMessages = () => {
+      return createVNode("div", {
+        "class": [this.ns.b(), this.isHiddenContainer && this.ns.m("hidden")]
+      }, [this.items.map((item, index) => {
+        var _a, _b;
+        return createVNode(resolveComponent("van-notice-bar"), {
+          "class": [this.ns.b("item"), (_a = item.sysCss) == null ? void 0 : _a.cssName],
+          "type": (_b = item.messageType) == null ? void 0 : _b.toLowerCase(),
+          "wrapable": true,
+          "scrollable": this.scroll,
+          "mode": item.removeMode !== 0 ? "closeable" : "",
+          "left-icon": this.getTypeIcon(item.messageType),
+          "onClose": () => {
+            this.handleAlertClose(index);
+          },
+          "onChange": this.handleChange
+        }, {
+          default: () => [item.layoutPanel && item.data ? renderLayoutPanel(item) : createVNode("div", {
+            "class": this.ns.be("alert", "message"),
+            "innerHTML": item.message || ""
+          }, null)]
+        });
+      })]);
+    };
+    if (!this.items.length) {
+      return;
+    }
+    return renderMessages();
+  }
+});
+
+export { ViewMessage };

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

@@ -1 +1 @@
-.ibiz-control-appmenu{width:100%;height:100%}.ibiz-control-appmenu--default{height:var(--van-tabbar-height)}.ibiz-control-appmenu .van-tabbar-item__icon{width:var(--van-tabbar-item-icon-size);font-size:var(--ibiz-width-icon-medium)}.ibiz-control-appmenu-nav{height:calc(100% - var(--van-tabbar-height))}
+.ibiz-control-appmenu{--ibiz-control-appmenu-height-menu:3.125rem;--ibiz-control-appmenu-font-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-position-item-counter-left:calc(100% - var(--ibiz-spacing-extra-tight));width:100%;height:100%}.ibiz-control-appmenu__item-icon-container{position:relative;display:flex;align-items:center;width:auto;font-size:var(--ibiz-control-appmenu-font-item-font-size);text-align:center}.ibiz-control-appmenu__item-icon-container--counter{position:absolute;top:0;left:var(--ibiz-control-appmenu-position-item-counter-left);transform:translateY(-50%)}.ibiz-control-appmenu__item-caption{white-space:nowrap}.ibiz-control-appmenu--default{height:var(--ibiz-control-appmenu-height-menu)}.ibiz-control-appmenu-customized{display:flex;align-items:center}

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

@@ -1,8 +1,9 @@
 import { defineComponent, createVNode, resolveComponent, ref, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useControlController, prepareControl } from '@ibiz-template/vue3-util';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { AppMenuController } from '@ibiz-template/runtime';
-import { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
+import { isNil } from 'ramda';
+import { useMenuRender } from './menu-render-util.mjs';
 import './app-menu.css';
 
 "use strict";
@@ -40,12 +41,11 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
   },
   setup() {
     const c = useControlController((...args) => new AppMenuController(...args));
-    const {
-      controlClass,
-      ns
-    } = prepareControl(c);
+    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
     const activeName = ref();
-    const showPopup = ref(false);
+    const {
+      onCustomizedClick
+    } = useMenuRender(c);
     const route = useRoute();
     const calcCurMenu = () => {
       const allItems = c.getAllItems();
@@ -59,19 +59,16 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
         return false;
       });
     };
-    const setPopupState = (state) => {
-      showPopup.value = state;
-    };
     const onTabChange = async (active, event, opts = {}) => {
       if (active === "customized")
-        return setPopupState(true);
+        return onCustomizedClick();
       activeName.value = active;
       await c.onClickMenuItem(active, event, true, opts);
     };
     onMounted(async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
-        return item.openDefault && !item.hidden;
+        return item.openDefault && c.isMobMenuItemValid(item);
       });
       if (defaultActiveMenuItem && !route.params.view2 && !route.fullPath.includes("404")) {
         onTabChange(defaultActiveMenuItem.id, void 0, {
@@ -91,11 +88,8 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     return {
       c,
       ns,
-      showPopup,
       activeName,
-      controlClass,
-      onTabChange,
-      setPopupState
+      onTabChange
     };
   },
   render() {
@@ -109,39 +103,39 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.m(model.controlStyle || "default")]
     }, [createVNode(resolveComponent("van-tabbar"), {
       "modelValue": this.activeName,
+      "fixed": false,
       "onChange": this.onTabChange
     }, {
-      default: () => [state.mobMenuItems.map((item) => createVNode(resolveComponent("van-tabbar-item"), {
-        "name": item.id
-      }, {
-        icon: () => createVNode(resolveComponent("iBizIcon"), {
-          "slot": "icon",
-          "icon": item.sysImage,
-          "class": this.ns.e("icon")
-        }, null),
-        default: () => createVNode("span", null, [item.caption])
-      })), model.enableCustomized && createVNode(resolveComponent("van-tabbar-item"), {
+      default: () => [state.mobMenuItems.map((item) => {
+        const counterNum = item.counterId ? this.c.state.counterData[item.counterId] : null;
+        return createVNode(resolveComponent("van-tabbar-item"), {
+          "name": item.id
+        }, {
+          icon: () => createVNode("div", {
+            "class": this.ns.e("item-icon-container")
+          }, [createVNode(resolveComponent("iBizIcon"), {
+            "slot": "icon",
+            "icon": item.sysImage || {
+              cssClass: "fa fa-th-large"
+            }
+          }, null), !isNil(counterNum) && createVNode(resolveComponent("iBizBadge"), {
+            "class": this.ns.em("item-icon-container", "counter"),
+            "value": counterNum
+          }, null)]),
+          default: () => createVNode("span", {
+            "class": this.ns.e("item-caption")
+          }, [item.caption])
+        });
+      }), model.enableCustomized && createVNode(resolveComponent("van-tabbar-item"), {
         "name": "customized"
       }, {
-        icon: () => createVNode("ion-icon", {
+        icon: () => createVNode("div", {
+          "class": this.ns.e("item-icon-container")
+        }, [createVNode("ion-icon", {
           "name": "ellipsis-horizontal"
-        }, null),
+        }, null)]),
         default: () => createVNode("span", null, [ibiz.i18n.t("control.appmenu.more")])
       })]
-    }), createVNode(resolveComponent("van-popup"), {
-      "round": true,
-      "position": "bottom",
-      "show": this.showPopup,
-      "onUpdate:show": ($event) => this.showPopup = $event,
-      "style": {
-        height: "80%"
-      }
-    }, {
-      default: () => [createVNode(MenuDesign, {
-        "controller": this.c,
-        "show": this.showPopup,
-        "onClose": () => this.setPopupState(false)
-      }, null)]
     })]);
   }
 });

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

@@ -1 +1 @@
-.ibiz-menu-design{width:100%;height:100%;padding:var(--ibiz-spacing-base);background-color:var(--ibiz-color-fill-2)}.ibiz-menu-design__header{display:flex;align-items:center;justify-content:space-between;font-size:var(--ibiz-font-size-header-5)}.ibiz-menu-design__header--close-icon{font-size:var(--ibiz-font-size-header-3)}.ibiz-menu-design__header--caption{font-weight:var(--ibiz-font-weight-bold)}.ibiz-menu-design__header--save{color:var(--ibiz-color-primary)}.ibiz-menu-design__group--caption{color:var(--ibiz-color-text-2);padding:var(--ibiz-spacing-base) 0}.ibiz-menu-design__draggable{padding:var(--ibiz-spacing-base-tight);border-radius:var(--ibiz-border-radius-medium);background-color:var(--ibiz-color-bg-1)}.ibiz-menu-design__draggable--icon{font-size:var(--ibiz-font-size-header-3)}.ibiz-menu-design__draggable--icon.ibiz-menu-design__draggable--prefix-icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-menu-design__draggable--icon.ibiz-menu-design__draggable--remove-icon{color:var(--ibiz-color-danger)}.ibiz-menu-design__draggable--icon.ibiz-menu-design__draggable--add-icon{color:var(--ibiz-color-primary)}.ibiz-menu-design__draggable--item{width:100%;display:flex;align-items:center;font-size:var(--ibiz-width-icon-medium)}.ibiz-menu-design__draggable--item-content{flex-grow:1;display:flex;align-items:center;justify-content:space-between;padding:var(--ibiz-spacing-base-tight) 0;border-bottom:1px solid var(--ibiz-color-border)}.ibiz-menu-design__draggable--item-caption{display:flex;align-items:center}.ibiz-menu-design__draggable--item-icon{display:flex;align-items:center;width:var(--van-tabbar-item-icon-size);margin-right:var(--ibiz-spacing-tight)}
+.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:""}

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

@@ -1,14 +1,12 @@
-import { defineComponent, createVNode, ref, watch, resolveComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent, ref } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import draggable from 'vuedraggable';
+import { recursiveIterate } from '@ibiz-template/core';
+import { getDefaultIconVal } from '../menu-render-util.mjs';
 import './custom-menu-design.css';
 
 "use strict";
 const MenuDesign = /* @__PURE__ */ defineComponent({
   name: "IBizMenuDesign",
-  components: {
-    draggable
-  },
   props: {
     controller: {
       type: Object,
@@ -17,96 +15,112 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
     show: {
       type: Boolean,
       default: false
+    },
+    modal: {
+      type: Object
     }
   },
-  emits: ["close"],
+  emits: {
+    close: () => true
+  },
   setup(props, {
     emit
   }) {
     const ns = useNamespace("menu-design");
     const c = props.controller;
-    const mobMenuItems = ref([]);
-    const moreMenuItems = ref([]);
-    const calcMenuItems = () => {
-      var _a;
-      const menuItems = ((_a = c.model.appMenuItems) == null ? void 0 : _a.filter((item) => item.hidden !== true && item.itemType === "MENUITEM" && c.state.menuItemsState[item.id].visible)) || [];
-      mobMenuItems.value = [...c.state.mobMenuItems];
-      moreMenuItems.value = menuItems.filter((menu) => !c.state.mobMenuItems.find((_item) => menu.id === _item.id));
+    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();
+      }
     };
-    watch(() => props.show, () => {
-      if (props.show)
-        calcMenuItems();
-    }, {
-      immediate: true
-    });
     const onClose = () => {
+      var _a;
       emit("close");
+      (_a = props.modal) == null ? void 0 : _a.dismiss();
+      menuMap.value.clear();
     };
     const onSave = async () => {
-      await c.customController.saveCustomModelData(mobMenuItems.value.map((menu) => {
-        return {
-          id: menu.id
-        };
-      }));
-      c.state.mobMenuItems = mobMenuItems.value;
+      const curMenuItems = Array.from(menuMap.value.values()).map((item) => {
+        return allMenuMap.get(item.id);
+      }).filter((item) => !!item);
+      c.saveCustomMenusModel(curMenuItems);
       onClose();
     };
-    const handleRemoveOrAdd = (type, index) => {
-      if (type === "nav") {
-        const item = mobMenuItems.value[index];
-        mobMenuItems.value.splice(index, 1);
-        moreMenuItems.value.push(item);
+    const handleItemClick = (item, checked) => {
+      if (!item.id)
+        return;
+      if (checked) {
+        menuMap.value.delete(item.id);
       } else {
-        const item = moreMenuItems.value[index];
-        moreMenuItems.value.splice(index, 1);
-        mobMenuItems.value.push(item);
+        menuMap.value.set(item.id, item);
       }
     };
-    const renderDraggable = (type, menuItems) => {
-      return createVNode(draggable, {
-        "itemKey": "id",
-        "group": "menu-design",
-        "handle": ".draggable-icon",
-        "list": menuItems,
-        "class": ns.e("draggable")
-      }, {
-        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 renderNodeItem = (_item, _level, isGroup) => {
+      const marginLeft = `calc(${_level} * var(${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);
     };
-    const renderMenuList = (type) => {
+    const renderTree = (items) => {
       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" ? mobMenuItems.value : moreMenuItems.value)]);
+        "class": ns.e("tree")
+      }, [items.map((item) => renderNode(item, 0))]);
     };
     return {
       c,
       ns,
       onSave,
       onClose,
-      renderMenuList
+      renderTree
     };
   },
   render() {
@@ -125,7 +139,7 @@ const MenuDesign = /* @__PURE__ */ defineComponent({
       "onClick": this.onSave
     }, [ibiz.i18n.t("control.appmenu.save")])]), createVNode("div", {
       "class": this.ns.e("content")
-    }, [this.renderMenuList("nav"), this.renderMenuList("more")])]);
+    }, [this.c.state.mobAuthedMenuItems.length ? this.renderTree(this.c.state.mobAuthedMenuItems) : createVNode(resolveComponent("iBizNoData"), null, null)])]);
   }
 });
 

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

@@ -0,0 +1,30 @@
+import { h } from 'vue';
+import { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
+
+"use strict";
+function getDefaultIconVal() {
+  return {
+    cssClass: "fa fa-th-large"
+  };
+}
+function useMenuRender(c) {
+  const onCustomizedClick = async () => {
+    await ibiz.overlay.drawer((modal) => {
+      return h(MenuDesign, {
+        modal,
+        controller: c
+      });
+    }, {}, {
+      attrs: {
+        position: "bottom",
+        closeable: false,
+        round: true
+      }
+    });
+  };
+  return {
+    onCustomizedClick
+  };
+}
+
+export { getDefaultIconVal, useMenuRender };

package/es/control/app-menu-icon-view/app-menu-icon-view.css

@@ -1 +1 @@
-.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-icon-width:100%;--ibiz-control-appmenu-icon-view-icon-size:2.1875rem;--ibiz-control-appmenu-icon-view-icon-margin:0.3125rem;--ibiz-control-appmenu-icon-color:var(--ibiz-color-text-0)}.ibiz-control-appmenu-iconview .van-grid-item__text{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview .van-badge__wrapper{display:flex;justify-content:center;width:100%}.ibiz-control-appmenu-iconview .van-grid-item__content--clickable:active{background-color:inherit}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-view-icon-size);height:var(--ibiz-control-appmenu-icon-view-icon-size);margin-bottom:var(--ibiz-control-appmenu-icon-view-icon-margin);font-size:var(--ibiz-control-appmenu-icon-view-icon-size);color:var(--ibiz-control-appmenu-icon-color)}.ibiz-control-appmenu-iconview .ibiz-control-appmenu-icon .ibiz-icon{width:100%;height:100%;color:var(--ibiz-control-appmenu-icon-color)}
+.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-iconview-color-bg:var(--ibiz-color-bg-2);--ibiz-control-appmenu-iconview-color-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-iconview-color-nodata-ph-item-text:var(--ibiz-color-text-0);--ibiz-control-appmenu-iconview-color-group-item-bg:var(--ibiz-color-bg-0);--ibiz-control-appmenu-iconview-color-group-item-text:var(--ibiz-color-text-1);--ibiz-control-appmenu-iconview-spacing-item-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-control-appmenu-iconview-spacing-item-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-nodata-ph-item-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-group-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-iconview-spacing-group-item-icon-margin:0 var(--ibiz-spacing-extra-tight) 0 0;--ibiz-control-appmenu-iconview-spacing-group-item-counter-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-control-appmenu-iconview-font-item-text-font-size:var(--ibiz-font-size-small);--ibiz-control-appmenu-iconview-font-item-icon-font-size:var(--ibiz-height-control-default);--ibiz-control-appmenu-iconview-font-nodata-ph-item-font-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-iconview-font-group-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-iconview-position-item-counter-left:calc(100% - var(--ibiz-spacing-tight));--ibiz-control-appmenu-iconview-icon-group-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-iconview-line-clamp-item-caption:2;--ibiz-control-appmenu-iconview-icon-item-icon-size:var(--ibiz-height-control-default);background-color:var(--ibiz-control-appmenu-iconview-color-bg)}.ibiz-control-appmenu-iconview__item--content{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:var(--ibiz-control-appmenu-iconview-spacing-item-padding);color:var(--ibiz-control-appmenu-iconview-color-item-text)}.ibiz-control-appmenu-iconview__item--icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-iconview-icon-item-icon-size);margin-bottom:var(--ibiz-control-appmenu-iconview-spacing-item-icon-margin);font-size:var(--ibiz-control-appmenu-iconview-font-item-icon-font-size)}.ibiz-control-appmenu-iconview__item--icon .ibiz-icon{width:100%;height:100%}.ibiz-control-appmenu-iconview__item--icon ion-icon.ibiz-icon{width:1em;max-width:100%;height:1em;max-height:100%}.ibiz-control-appmenu-iconview__item--icon .fa.ibiz-icon{width:auto;max-width:100%;height:auto;max-height:100%}.ibiz-control-appmenu-iconview__item--counter{position:absolute;top:0;left:var(--ibiz-control-appmenu-iconview-position-item-counter-left);transform:translateY(-50%)}.ibiz-control-appmenu-iconview__item--caption{display:-webkit-box;flex:1;height:-moz-fit-content;height:fit-content;overflow:hidden;font-size:var(--ibiz-control-appmenu-iconview-font-item-text-font-size);text-overflow:ellipsis;-webkit-line-clamp:var(--ibiz-control-appmenu-iconview-line-clamp-item-caption);line-clamp:var(--ibiz-control-appmenu-iconview-line-clamp-item-caption);-webkit-box-orient:vertical}.ibiz-control-appmenu-iconview__group-item{flex-basis:100%!important}.ibiz-control-appmenu-iconview__group-item--container{width:100%}.ibiz-control-appmenu-iconview__group-item--header{display:flex;align-items:center;padding:var(--ibiz-control-appmenu-iconview-spacing-group-item-padding);font-size:var(--ibiz-control-appmenu-iconview-font-group-item-font-size);color:var(--ibiz-control-appmenu-iconview-color-group-item-text);background-color:var(--ibiz-control-appmenu-iconview-color-group-item-bg)}.ibiz-control-appmenu-iconview__group-item--header .ibiz-icon{min-width:var(--ibiz-control-appmenu-iconview-icon-group-item-icon-size);margin:var(--ibiz-control-appmenu-iconview-spacing-group-item-icon-margin)}.ibiz-control-appmenu-iconview__group-item--content{display:flex;width:100%}.ibiz-control-appmenu-iconview__group-item--counter{margin:var(--ibiz-control-appmenu-iconview-spacing-group-item-counter-margin)}.ibiz-control-appmenu-iconview .van-grid-item__content{padding:0}.ibiz-control-appmenu-iconview-no-data{width:100%;padding:var(--ibiz-control-appmenu-iconview-spacing-nodata-ph-item-padding);font-size:var(--ibiz-control-appmenu-iconview-font-nodata-ph-item-font-size);color:var(--ibiz-control-appmenu-iconview-color-nodata-ph-item-text);text-align:center}