@ibiz-template/vue3-components 0.7.17-alpha.0 → 0.7.18

package/es/panel-component/panel-app-title/panel-app-title.mjs

@@ -64,7 +64,6 @@ const PanelAppTitle = /* @__PURE__ */ defineComponent({
   render() {
     const {
       icon,
-      icon2,
       isSvg,
       caption,
       caption2,
@@ -75,28 +74,34 @@ const PanelAppTitle = /* @__PURE__ */ defineComponent({
     const captionNode = createVNode("span", {
       "class": this.ns.e("title")
     }, [caption]);
-    if (icon || icon2) {
-      if (isSvg) {
-        iconVNode = createVNode("ion-icon", {
-          "class": this.ns.e("logo"),
-          "icon": this.isCollapse ? icon2 : icon
-        }, null);
-      } else {
-        iconVNode = createVNode("span", {
-          "class": this.ns.e("logo")
-        }, [createVNode("img", {
-          "src": this.isCollapse ? icon2 : icon
-        }, null)]);
-      }
-    } else if (this.menuAlign === "LEFT") {
+    if (this.menuAlign === "LEFT") {
       if (this.isCollapse) {
-        iconVNode = createVNode("div", {
-          "class": this.ns.e("collapse-title")
-        }, [createVNode("div", {
-          "class": this.ns.e("caption2")
-        }, [caption2]), createVNode("div", {
-          "class": this.ns.e("subCaption2")
-        }, [subCaption2])]);
+        if (icon) {
+          let tempIcon = null;
+          if (isSvg) {
+            tempIcon = createVNode("ion-icon", {
+              "class": this.ns.e("logo"),
+              "icon": icon
+            }, null);
+          } else {
+            tempIcon = createVNode("span", {
+              "class": this.ns.e("logo")
+            }, [createVNode("img", {
+              "src": icon
+            }, null)]);
+          }
+          iconVNode = createVNode("div", {
+            "class": this.ns.e("collpase-icon")
+          }, [tempIcon]);
+        } else {
+          iconVNode = createVNode("div", {
+            "class": this.ns.e("collapse-title")
+          }, [createVNode("div", {
+            "class": this.ns.e("caption2")
+          }, [caption2]), createVNode("div", {
+            "class": this.ns.e("subCaption2")
+          }, [subCaption2])]);
+        }
       } else {
         iconVNode = createVNode("span", {
           "class": this.ns.e("logo")
@@ -128,6 +133,21 @@ const PanelAppTitle = /* @__PURE__ */ defineComponent({
           "y": "73"
         }, [subCaption])])])])]);
       }
+    } else if (this.menuAlign === "TOP") {
+      if (icon) {
+        if (isSvg) {
+          iconVNode = createVNode("ion-icon", {
+            "class": this.ns.e("logo"),
+            "icon": icon
+          }, null);
+        } else {
+          iconVNode = createVNode("span", {
+            "class": this.ns.e("logo")
+          }, [createVNode("img", {
+            "src": icon
+          }, null)]);
+        }
+      }
     }
     let content = null;
     if (this.menuAlign === "LEFT") {

package/lib/common/action-toolbar/action-toolbar.cjs

@@ -122,14 +122,24 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         return null;
       });
     };
-    if (this.mode === "buttons") {
+    const renderGroup = () => {
       let _slot;
-      return vue.createVNode("div", {
-        "class": [this.ns.b(), this.ns.m("buttons")],
-        "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), this.groupDetails.length > 0 && [vue.createVNode(vue.resolveComponent("el-button"), {
+      if (this.groupDetails.length === 0) {
+        return null;
+      }
+      const pvisible = this.groupDetails.findIndex((item) => {
+        return this.actionsState[item.id].visible === true;
+      }) !== -1;
+      if (!pvisible) {
+        return null;
+      }
+      const pdisabled = this.groupDetails.findIndex((item) => {
+        return this.actionsState[item.id].disabled === false;
+      }) === -1;
+      return [vue.createVNode(vue.resolveComponent("el-button"), {
         "size": "small",
         "text": true,
+        "disabled": pdisabled,
         "ref": "groupButtonRef",
         "class": [this.ns.e("item"), this.ns.is("expand", this.popoverVisible)]
       }, {
@@ -149,7 +159,16 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         "popper-style": "z-index:".concat(this.popoverIndex)
       }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
-      })]]);
+      })];
+    };
+    if (!this.actionsState.visible) {
+      return;
+    }
+    if (this.mode === "buttons") {
+      return vue.createVNode("div", {
+        "class": [this.ns.b(), this.ns.m("buttons")],
+        "onClick": (e) => e.stopPropagation()
+      }, [renderActions(this.expandDetails), renderGroup()]);
     }
     return vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",

package/lib/control/app-menu/app-menu.cjs

@@ -7,6 +7,7 @@ var qxUtil = require('qx-util');
 var runtime = require('@ibiz-template/runtime');
 var vueRouter = require('vue-router');
 require('./app-menu.css');
+var customMenuDesign = require('./custom-menu-design/custom-menu-design.cjs');
 
 "use strict";
 function _isSlot(s) {
@@ -45,10 +46,40 @@ function renderByProvider(itemId, c) {
   }
   return provider.renderText(itemModel, c);
 }
-function renderMenuItem(isFirst, menu, collapse, ns, c, counterData) {
+function findCustomMenu(_key, items) {
+  let temp;
+  if (items) {
+    items.some((item) => {
+      if (item.key === _key) {
+        temp = item;
+        return true;
+      }
+      if (item.children && item.children.length > 0) {
+        temp = findCustomMenu(_key, item.children);
+        if (!temp) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    });
+  }
+  return temp;
+}
+function getMenuCustomVisible(_key, items) {
+  const target = findCustomMenu(_key, items);
+  if (target) {
+    return target.visible;
+  }
+  return true;
+}
+function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs) {
   if (!c.state.menuItemsState[menu.key].visible) {
     return;
   }
+  if (!getMenuCustomVisible(menu.key, saveConfigs)) {
+    return;
+  }
   if (menu.itemType === "MENUITEM") {
     let content;
     const provider = c.itemProviders[menu.key];
@@ -99,10 +130,13 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData) {
     }, null);
   }
 }
-function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData) {
+function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfigs) {
   if (!c.state.menuItemsState[subMenu.key].visible) {
     return;
   }
+  if (!getMenuCustomVisible(subMenu.key, saveConfigs)) {
+    return;
+  }
   return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
     "class": ns.b("submenu"),
     "index": subMenu.key,
@@ -110,9 +144,9 @@ function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData) {
   }, {
     default: () => subMenu.children.map((item) => {
       if (item.children) {
-        return renderSubmenu(false, item, collapse, ns, c, counterData);
+        return renderSubmenu(false, item, collapse, ns, c, counterData, saveConfigs);
       }
-      return renderMenuItem(false, item, collapse, ns, c, counterData);
+      return renderMenuItem(false, item, collapse, ns, c, counterData, saveConfigs);
     }),
     title: () => {
       const provider = c.itemProviders[subMenu.key];
@@ -165,6 +199,7 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const menus = vue.ref(getMenus(c.model.appMenuItems));
+    const saveConfigs = vue.ref([]);
     const defaultActive = vue.ref("");
     const defaultOpens = vue.ref([]);
     const route = vueRouter.useRoute();
@@ -199,6 +234,9 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
     const fn = (data) => {
       counterData.value = data;
     };
+    c.evt.on("onCreated", async () => {
+      saveConfigs.value = c.saveConfigs;
+    });
     c.evt.on("onMounted", async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
@@ -251,6 +289,15 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       }
       return false;
     });
+    const enableCustomized = vue.computed(() => {
+      return c.model.enableCustomized;
+    });
+    const configSaves = (saveConfig) => {
+      saveConfigs.value = saveConfig;
+    };
+    const configReset = () => {
+      saveConfigs.value = [];
+    };
     return {
       menus,
       c,
@@ -261,13 +308,16 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       defaultOpens,
       menuMode,
       counterData,
-      isShowCollapse
+      saveConfigs,
+      configSaves,
+      configReset,
+      isShowCollapse,
+      enableCustomized
     };
   },
   render() {
-    let _slot;
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b(), this.ns.m(this.menuMode), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse)],
+      "class": [this.ns.b(), this.ns.m(this.menuMode), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse), this.ns.is("show-menu-design", this.enableCustomized)],
       "controller": this.c
     }, {
       default: () => [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), {
@@ -281,15 +331,23 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         "theme": "light",
         "mode": this.menuMode,
         "ellipsis": this.menuMode === "horizontal"
-      }, _isSlot(_slot = this.menus.map((item) => {
-        var _a;
-        if (((_a = item.children) == null ? void 0 : _a.length) > 0) {
-          return renderSubmenu(true, item, this.collapse, this.ns, this.c, this.counterData);
+      }, {
+        default: () => {
+          return this.menus.map((item) => {
+            var _a;
+            if (((_a = item.children) == null ? void 0 : _a.length) > 0) {
+              return renderSubmenu(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs);
+            }
+            return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData, this.saveConfigs);
+          });
         }
-        return renderMenuItem(true, item, this.collapse, this.ns, this.c, this.counterData);
-      })) ? _slot : {
-        default: () => [_slot]
-      }), this.isShowCollapse && vue.createVNode("div", {
+      }), this.enableCustomized && vue.createVNode(customMenuDesign.MenuDesign, {
+        "class": [this.ns.b("menu-set"), this.ns.is("collapse", this.collapse), this.ns.is("horizontal", this.c.view.model.mainMenuAlign === "TOP")],
+        "controller": this.c,
+        "menus": this.menus,
+        "onSaved": this.configSaves,
+        "onReset": this.configReset
+      }, null), this.isShowCollapse && vue.createVNode("div", {
         "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
         "onClick": () => {
           this.c.view.call(runtime.ViewCallTag.TOGGLE_COLLAPSE);

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

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu{height:100%;padding:0 var(--ibiz-spacing-tight);overflow-y:auto;border-right:0}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:14px;width:12px}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__title>.ibiz-control-appmenu__counter{right:30px}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-divider--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-color-border)}.ibiz-control-appmenu .el-menu--horizontal{align-items:center;height:100%;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal>*+*{margin-left:16px}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border:none;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-color)!important;background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{position:absolute;top:50%;right:16px}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{padding-right:var(--ibiz-control-appmenu-item-horizontal-padding-right)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-color-white)}.ibiz-control-appmenu .el-menu--horizontal .el-divider--vertical{border-color:var(--ibiz-color-border)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin:var(--ibiz-control-appmenu-icon-margin)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:0}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:0}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;transform:translateY(-50%)}.ibiz-control-appmenu-popup-container.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:0 6px;line-height:initial;color:#fff;background-color:#f56c6c;border-radius:10px;transform:translateY(-50%)}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}
+@charset "UTF-8";.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu{height:100%;padding:0 var(--ibiz-spacing-tight);overflow-y:auto;border-right:0}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:14px;width:12px}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__title>.ibiz-control-appmenu__counter{right:30px}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-divider--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-color-border)}.ibiz-control-appmenu .el-menu--horizontal{align-items:center;height:100%;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal>*+*{padding-right:16px}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border:none;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-color)!important;background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{position:absolute;top:50%;right:16px}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-color-white)}.ibiz-control-appmenu .el-menu--horizontal .el-divider--vertical{border-color:var(--ibiz-color-border)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin:var(--ibiz-control-appmenu-icon-margin)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:0}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:0}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;transform:translateY(-50%)}.ibiz-control-appmenu-popup-container.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:0 6px;line-height:initial;color:#fff;background-color:#f56c6c;border-radius:10px;transform:translateY(-50%)}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set{position:absolute;bottom:var(--ibiz-spacing-tight);left:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set.is-horizontal{right:0;bottom:0;left:unset;display:flex;align-items:center;height:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-menu-set{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:calc(var(--ibiz-spacing-tight) + 32px);font-size:var(--ibiz-font-size-header-5);text-align:center;cursor:pointer}.ibiz-control-appmenu.is-collapse.is-show-menu-design>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height) - var(--ibiz-control-appmenu-collapse-height))}

package/lib/control/app-menu/custom-menu-design/custom-menu-design.cjs

@@ -0,0 +1,277 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./custom-menu-design.css');
+var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+function renderByProvider(itemId, c) {
+  const itemModel = c.allAppMenuItems.find((item) => item.id === itemId);
+  if (!itemModel) {
+    throw new core.RuntimeError("".concat(ibiz.i18n.t("control.menuDesign.noMenuItemModel", {
+      menu: itemId
+    })));
+  }
+  const provider = c.itemProviders[itemId];
+  if (!provider.renderText) {
+    throw new core.RuntimeError("".concat(ibiz.i18n.t("control.menuDesign.noProviderRenderText", {
+      menu: itemId
+    })));
+  }
+  return provider.renderText(itemModel, c);
+}
+const MenuDesign = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMenuDesign",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["saved", "reset"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("menu-design");
+    const c = props.controller;
+    const loading = vue.ref(false);
+    const visible = vue.ref(false);
+    const configs = vue.ref([]);
+    const stopExpand = (event) => {
+      event.stopPropagation();
+    };
+    const handleMenusSaveData = (items) => {
+      const tempItems = [];
+      items.forEach((item) => {
+        var _a;
+        const config = {
+          key: item.key,
+          name: item.label,
+          type: item.itemType,
+          visible: item.config.visible
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          config.children = handleMenusSaveData(item.children);
+        }
+        tempItems.push(config);
+      });
+      return tempItems;
+    };
+    const collapseGroup = (menu) => {
+      menu.isCollapse = !menu.isCollapse;
+    };
+    const flattenConfigs = (items) => {
+      const result = [];
+      items.forEach((item) => {
+        result.push(item);
+        if (item.children && item.children.length > 0) {
+          const tempResult = flattenConfigs(item.children);
+          result.push(...tempResult);
+        }
+      });
+      return result;
+    };
+    const mergeMenusConfig = (items) => {
+      let customConfig = [];
+      if (c.saveConfigs && c.saveConfigs.length > 0) {
+        customConfig = flattenConfigs(c.saveConfigs);
+      }
+      return items.map((item) => {
+        var _a;
+        const target = customConfig.find((_item) => {
+          return _item.key === item.key;
+        });
+        const data = {
+          ...item,
+          isCollapse: true,
+          config: {
+            visible: true
+          }
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          data.children = mergeMenusConfig(item.children);
+        }
+        if (target) {
+          Object.assign(data, {
+            config: {
+              visible: target.visible
+            }
+          });
+        }
+        return data;
+      });
+    };
+    const onReset = async () => {
+      c.saveConfigs = [];
+      await c.customController.resetCustomModelData();
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      emit("reset");
+    };
+    const onSave = async () => {
+      loading.value = true;
+      const saveConfig = handleMenusSaveData(configs.value);
+      await c.customController.saveCustomModelData(saveConfig);
+      c.saveConfigs = saveConfig;
+      loading.value = false;
+      emit("saved", saveConfig);
+    };
+    const renderMenuItem = (menu) => {
+      var _a;
+      if (!((_a = c.state.menuItemsState[menu.key]) == null ? void 0 : _a.visible)) {
+        return;
+      }
+      if (menu.itemType === "MENUITEM") {
+        let content;
+        const provider = c.itemProviders[menu.key];
+        if (provider && provider.renderText) {
+          content = renderByProvider(menu.key, c);
+        } else {
+          content = [menu.image ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.image
+          }, null) : null, vue.createVNode("span", null, [menu.label])];
+        }
+        return content;
+      }
+      if (menu.itemType === "SEPERATOR") {
+        const direction = c.view.model.mainMenuAlign === "TOP" ? "vertical" : "horizontal";
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-seperator")
+        }, [vue.createVNode(vue.resolveComponent("el-divider"), {
+          "direction": direction,
+          "class": ns.e("separator"),
+          "id": menu.key
+        }, null)]);
+      }
+    };
+    const renderGroupIcon = (item) => {
+      if (item.children && item.children.length > 0) {
+        if (item.isCollapse) {
+          return vue.createVNode("i", {
+            "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-caret-right"],
+            "aria-hidden": "true"
+          }, null);
+        }
+        return vue.createVNode("i", {
+          "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-sort-down"],
+          "aria-hidden": "true"
+        }, null);
+      }
+      return null;
+    };
+    const renderMenuList = (items) => {
+      return items.map((item) => {
+        const content = renderMenuItem(item);
+        if (!content)
+          return null;
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-item")
+        }, [vue.createVNode("div", {
+          "class": [ns.be("content", "menu-item-content"), ns.is("is-menuitem", item.itemType === "MENUITEM")]
+        }, [vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label"),
+          "onClick": () => collapseGroup(item)
+        }, [renderGroupIcon(item), vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label-content")
+        }, [content])]), item.itemType !== "SEPERATOR" ? vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "checks")
+        }, [vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "modelValue": item.config.visible,
+          "onUpdate:modelValue": ($event) => item.config.visible = $event,
+          "onClick": stopExpand,
+          "label": ibiz.i18n.t("control.menuDesign.visible"),
+          "size": "large"
+        }, null)]) : null]), item.children && item.children.length > 0 ? vue.createVNode("div", {
+          "class": [ns.bem("content", "menu-item", "children"), ns.is("collapse", item.isCollapse)]
+        }, [renderMenuList(item.children)]) : null]);
+      });
+    };
+    const renderHeader = () => {
+      let _slot, _slot2;
+      return vue.createVNode("div", {
+        "class": ns.b("header")
+      }, [vue.createVNode("div", {
+        "class": ns.be("header", "caption")
+      }, [ibiz.i18n.t("control.menuDesign.customMenu")]), vue.createVNode("div", {
+        "class": ns.be("header", "actions")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onReset,
+        "loading": loading.value
+      }, _isSlot(_slot = ibiz.i18n.t("control.menuDesign.reset")) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onSave,
+        "loading": loading.value
+      }, _isSlot(_slot2 = ibiz.i18n.t("control.menuDesign.save")) ? _slot2 : {
+        default: () => [_slot2]
+      })])]);
+    };
+    const renderContent = () => {
+      return vue.createVNode("div", {
+        "class": ns.b("content")
+      }, [renderMenuList(configs.value)]);
+    };
+    const openDesign = () => {
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      visible.value = true;
+    };
+    return {
+      ns,
+      c,
+      configs,
+      visible,
+      loading,
+      onReset,
+      renderContent,
+      renderHeader,
+      onSave,
+      openDesign
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "title": ibiz.i18n.t("control.menu.menuSetting"),
+      "onClick": this.openDesign
+    }, [vue.createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "height": "1em",
+      "width": "1em",
+      "preserveAspectRatio": "xMidYMid meet",
+      "focusable": "false",
+      "fill": "currentColor"
+    }, [vue.createVNode("g", {
+      "id": "augaction/settings",
+      "stroke-width": "1",
+      "fill-rule": "evenodd"
+    }, [vue.createVNode("path", {
+      "d": "M11.405 13.975l3.398-5.889L11.405 2.2H4.607L1.208 8.087l3.399 5.889h6.798zm1.023-12.4l3.43 5.938c.205.356.205.793 0 1.149l-3.43 5.938a1.147 1.147 0 0 1-.993.574H4.577c-.41 0-.789-.218-.994-.573L.153 8.66a1.153 1.153 0 0 1 0-1.147l3.43-5.94c.205-.356.584-.575.994-.575h6.858c.409 0 .788.22.993.576zM8.006 9.879c.988 0 1.792-.804 1.792-1.792s-.804-1.792-1.792-1.792-1.792.804-1.792 1.792.804 1.792 1.792 1.792zm0-4.784a2.993 2.993 0 1 1-.002 5.985 2.993 2.993 0 0 1 .002-5.985z",
+      "id": "aug\u5F62\u72B6\u7ED3\u5408"
+    }, null)])])]), vue.createVNode(vue.resolveComponent("el-drawer"), {
+      "modelValue": this.visible,
+      "onUpdate:modelValue": ($event) => this.visible = $event,
+      "append-to-body": true,
+      "custom-class": this.ns.b("menu-set-drawer")
+    }, {
+      default: () => {
+        return this.renderContent();
+      },
+      header: () => {
+        return this.renderHeader();
+      }
+    })]);
+  }
+});
+
+exports.MenuDesign = MenuDesign;

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

@@ -0,0 +1 @@
+.ibiz-menu-design-menu-set-drawer{background-color:#fff}.ibiz-menu-design-menu-set-drawer .el-drawer__header{padding:20px 0 0;margin-bottom:0}.ibiz-menu-design-menu-set-drawer__group-icon{cursor:pointer}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content{height:100%;padding:var(--ibiz-spacing-base);overflow:auto}.ibiz-menu-design-content__menu-item--children{padding-left:32px}.ibiz-menu-design-content__menu-item--children.is-collapse{height:0;overflow:hidden}.ibiz-menu-design-content__menu-item-content{display:flex;align-items:center;width:100%;height:40px;padding:0 var(--ibiz-spacing-base-tight)}.ibiz-menu-design-content__menu-item-content.is-is-menuitem:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-menu-design-content__menu-item-content--label{display:flex;flex:1;align-items:center;color:var(--ibiz-color-black)}.ibiz-menu-design-content__menu-item-content--label i{width:16px;text-align:center}.ibiz-menu-design-content__menu-item-content--label-content{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:left;margin-left:5px;font-size:var(--ibiz-font-size-header-6)}.ibiz-menu-design-content__menu-item-content--checks{display:flex;flex:0;flex-direction:row}.ibiz-menu-design-content__menu-seperator{display:flex;flex-direction:row;align-items:center;width:100%}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-large);height:var(--ibiz-width-icon-large);margin-right:var(--ibiz-spacing-tight)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__drag-icon{position:absolute;left:var(--ibiz-spacing-tight);display:none;fill:var(--ibiz-color-primary-hover)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-header{height:64px;padding:20px;border-bottom:1px solid var(--ibiz-color-border);display:flex;align-items:center;justify-content:space-between}.ibiz-menu-design-header__caption{padding:0 var(--ibiz-spacing-base)}.ibiz-menu-design-header__text{position:relative;height:100%;padding-left:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-color-text-0);display:flex;align-items:center;justify-content:flex-start}.ibiz-menu-design-header__text::before{position:absolute;top:50%;left:0;width:4px;height:20px;content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-menu-design-header__menu-design-action{margin-right:64px}

package/lib/control/app-menu/index.cjs

@@ -6,11 +6,13 @@ var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 var appMenu = require('./app-menu.cjs');
 var appMenu_provider = require('./app-menu.provider.cjs');
+var customMenuDesign = require('./custom-menu-design/custom-menu-design.cjs');
 
 "use strict";
 const IBizAppMenuControl = vue3Util.withInstall(
   appMenu.AppMenuControl,
   function(v) {
+    v.component(customMenuDesign.MenuDesign.name, customMenuDesign.MenuDesign);
     v.component(appMenu.AppMenuControl.name, appMenu.AppMenuControl);
     runtime.registerControlProvider(runtime.ControlType.APP_MENU, () => new appMenu_provider.AppMenuProvider());
   }