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

package/es/common/keep-alive/scheduler.mjs

@@ -158,7 +158,7 @@ function checkRecursiveUpdates(seen, fn) {
       const instance = fn.ownerInstance;
       const componentName = instance && getComponentName(instance.type);
       console.warn(
-        `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`
+        "Maximum recursive updates exceeded".concat(componentName ? " in component <".concat(componentName, ">") : "", ". ") + "This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."
       );
       return true;
     }

package/es/common/preview-image/preview-image.mjs

@@ -42,7 +42,7 @@ const IBizPreviewImage = /* @__PURE__ */ defineComponent({
     const getOffsetCorrection = (start, end) => {
       const x = (start.pageX + end.pageX) / 2;
       const y = (start.pageY + end.pageY) / 2;
-      origin = `${x}px ${y}px`;
+      origin = "".concat(x, "px ").concat(y, "px");
       const offsetLeft = (scale - 1) * (x - scaleOrigin.x) + offset.left;
       const offsetTop = (scale - 1) * (y - scaleOrigin.y) + offset.top;
       scaleOrigin = {
@@ -57,7 +57,7 @@ const IBizPreviewImage = /* @__PURE__ */ defineComponent({
     const changeStyle = (el, arr) => {
       const original = el.style.cssText.split(";");
       original.pop();
-      el.style.cssText = `${original.concat(arr).join(";")};`;
+      el.style.cssText = "".concat(original.concat(arr).join(";"), ";");
     };
     onMounted(() => {
       if (imageRef.value) {
@@ -85,13 +85,13 @@ const IBizPreviewImage = /* @__PURE__ */ defineComponent({
             const ratio = getDistance(touches[0], touches[1]) / lastDistance;
             scale = ratio * lastScale;
             offset = getOffsetCorrection(touches[0], touches[1]);
-            changeStyle(el, ["transition: all 0s", `transform: translate(${`${offset.left}px`}, ${`${offset.top}px`}) scale(${scale})`, `transform-origin: ${origin}`]);
+            changeStyle(el, ["transition: all 0s", "transform: translate(".concat("".concat(offset.left, "px"), ", ").concat("".concat(offset.top, "px"), ") scale(").concat(scale, ")"), "transform-origin: ".concat(origin)]);
           } else if (touches.length === 1) {
             offset = {
               left: offset.left + (touches[0].clientX - startPoint.x),
               top: offset.top + (touches[0].clientY - startPoint.y)
             };
-            changeStyle(el, ["transition: all 0s", `transform: translate(${`${offset.left}px`}, ${`${offset.top}px`}) scale(${scale})`, `transform-origin: ${origin}`]);
+            changeStyle(el, ["transition: all 0s", "transform: translate(".concat("".concat(offset.left, "px"), ", ").concat("".concat(offset.top, "px"), ") scale(").concat(scale, ")"), "transform-origin: ".concat(origin)]);
             startPoint = {
               x: touches[0].clientX,
               y: touches[0].clientY

package/es/common/rawitem/rawitem.mjs

@@ -81,7 +81,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
       let value;
       const params = rawItem == null ? void 0 : rawItem.rawItemParams;
       if (!params) {
-        ibiz.log.error(`\u672A\u914D\u7F6E\u89C6\u9891\u64AD\u653E\u53C2\u6570:${key}}`);
+        ibiz.log.error("\u672A\u914D\u7F6E\u89C6\u9891\u64AD\u653E\u53C2\u6570:".concat(key, "}"));
         return void 0;
       }
       params.forEach((item) => {
@@ -127,7 +127,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
                 alertParams.value.title = rawItemContent.value;
                 alertParams.value["left-icon"] = messageTypeIcon[rawItemType.value];
               }
-              const func = new Function(`return (${rawItemContent.value});`);
+              const func = new Function("return (".concat(rawItemContent.value, ");"));
               rawConfig = func();
               switch (rawItemType.value) {
                 case "VIDEO":

package/es/common/row/row.mjs

@@ -28,7 +28,7 @@ const IBizRow = /* @__PURE__ */ defineComponent({
       const _dir = dir || "column";
       return createVNode("div", {
         "class": [this.ns.b(), this.ns.m("flex")],
-        "style": `display:flex;flex-direction: ${_dir};justify-content: ${align};align-items: ${valign};`
+        "style": "display:flex;flex-direction: ".concat(_dir, ";justify-content: ").concat(align, ";align-items: ").concat(valign, ";")
       }, [defaultSlot]);
     }
     return createVNode(resolveComponent("van-row"), {

package/es/common/split/split.mjs

@@ -56,13 +56,13 @@ const IBizSplit = /* @__PURE__ */ defineComponent({
     };
     const getMax = (value1, value2) => {
       if (valueIsPx.value)
-        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+        return "".concat(Math.max(parseFloat(value1), parseFloat(value2)), "px");
       return Math.max(value1, value2);
     };
     const getAnotherOffset = (value) => {
       let res = 0;
       if (valueIsPx.value)
-        res = `${outerWrapper.value[offsetSize.value] - parseFloat(value)}px`;
+        res = "".concat(outerWrapper.value[offsetSize.value] - parseFloat(value), "px");
       else
         res = 1 - value;
       return res;
@@ -73,7 +73,7 @@ const IBizSplit = /* @__PURE__ */ defineComponent({
       const pageOffset = isHorizontal.value ? e.pageX : e.pageY;
       const moveOffset = pageOffset - initOffset.value;
       const outerWidth = outerWrapper.value[offsetSize.value];
-      let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + moveOffset}px` : px2percent(outerWidth * oldOffset.value + moveOffset, outerWidth);
+      let value = valueIsPx.value ? "".concat(parseFloat(oldOffset.value) + moveOffset, "px") : px2percent(outerWidth * oldOffset.value + moveOffset, outerWidth);
       const anotherValue = getAnotherOffset(value);
       if (parseFloat(value) <= parseFloat(computedMin.value)) {
         value = getMax(value, computedMin.value);
@@ -142,12 +142,12 @@ const IBizSplit = /* @__PURE__ */ defineComponent({
       "class": this.ns.m("horizontal")
     }, [createVNode("div", {
       "style": {
-        width: `${this.offset}%`
+        width: "".concat(this.offset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "left")]
     }, [(_b = (_a = this.$slots).left) == null ? void 0 : _b.call(_a)]), createVNode("div", {
       "style": {
-        left: `${this.offset}%`
+        left: "".concat(this.offset, "%")
       },
       "class": this.ns.b("trigger-con"),
       "tabindex": 0,
@@ -156,19 +156,19 @@ const IBizSplit = /* @__PURE__ */ defineComponent({
       "mode": "vertical"
     }, null)]), createVNode("div", {
       "style": {
-        width: `${this.anotherOffset}%`
+        width: "".concat(this.anotherOffset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "right")]
     }, [(_f = (_e = this.$slots).right) == null ? void 0 : _f.call(_e)])]) : createVNode("div", {
       "class": this.ns.m("vertical")
     }, [createVNode("div", {
       "style": {
-        bottom: `${this.anotherOffset}%`
+        bottom: "".concat(this.anotherOffset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "top")]
     }, [(_h = (_g = this.$slots).top) == null ? void 0 : _h.call(_g)]), createVNode("div", {
       "style": {
-        top: `${this.offset}%`
+        top: "".concat(this.offset, "%")
       },
       "class": this.ns.b("trigger-con"),
       "tabindex": 0,
@@ -177,7 +177,7 @@ const IBizSplit = /* @__PURE__ */ defineComponent({
       "mode": "horizontal"
     }, null)]), createVNode("div", {
       "style": {
-        top: `${this.offset}%`
+        top: "".concat(this.offset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "bottom")]
     }, [(_l = (_k = this.$slots).bottom) == null ? void 0 : _l.call(_k)])])]);

package/es/common/split-trigger/split-trigger.mjs

@@ -28,7 +28,7 @@ const IBizSplitTrigger = /* @__PURE__ */ defineComponent({
       "class": this.barConClasses
     }, [this.items.map((_item, i) => createVNode("i", {
       "class": this.ns.b("bar"),
-      "key": `trigger-${i}`
+      "key": "trigger-".concat(i)
     }, null))])]);
   }
 });

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

@@ -41,7 +41,7 @@ const TabDropdown = /* @__PURE__ */ defineComponent({
         noArrow: true,
         autoClose: true,
         placement: "bottom-end",
-        modalClass: `${ns.e("list-modal")}`,
+        modalClass: "".concat(ns.e("list-modal")),
         appendTo: (_a = tabDropdownRef.value) == null ? void 0 : _a.$el
       });
       floatOverlay.present(_currentTarget);

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';
@@ -41,7 +41,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
   },
   setup() {
     const c = useControlController((...args) => new AppMenuController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const activeName = ref();
     const {
       onCustomizedClick
@@ -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(${_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 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,13 +8,18 @@ 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,
+      height: 80,
       attrs: {
         position: "bottom",
         closeable: false,

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

@@ -32,7 +32,7 @@ const AppMenuIconViewControl = /* @__PURE__ */ defineComponent({
   setup() {
     var _a;
     const c = useControlController((...args) => new AppMenuController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}-${(_a = c.model.controlStyle) == null ? void 0 : _a.toLowerCase()}`);
+    const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-").concat((_a = c.model.controlStyle) == null ? void 0 : _a.toLowerCase()));
     const {
       onCustomizedClick
     } = useMenuRender(c);

package/es/control/app-menu-icon-view/index.mjs

@@ -9,7 +9,7 @@ const IBizAppMenuIconViewControl = withInstall(
   function(v) {
     v.component(AppMenuIconViewControl.name, AppMenuIconViewControl);
     registerControlProvider(
-      `${ControlType.APP_MENU}_ICONVIEW`,
+      "".concat(ControlType.APP_MENU, "_ICONVIEW"),
       () => new AppMenuIconViewProvider()
     );
   }