@ibiz-template/vue3-components 0.7.16 → 0.7.17

package/es/common/action-toolbar/action-toolbar.mjs

@@ -120,14 +120,24 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
         return null;
       });
     };
-    if (this.mode === "buttons") {
+    const renderGroup = () => {
       let _slot;
-      return createVNode("div", {
-        "class": [this.ns.b(), this.ns.m("buttons")],
-        "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), this.groupDetails.length > 0 && [createVNode(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 [createVNode(resolveComponent("el-button"), {
         "size": "small",
         "text": true,
+        "disabled": pdisabled,
         "ref": "groupButtonRef",
         "class": [this.ns.e("item"), this.ns.is("expand", this.popoverVisible)]
       }, {
@@ -147,7 +157,16 @@ const IBizActionToolbar = /* @__PURE__ */ 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 createVNode("div", {
+        "class": [this.ns.b(), this.ns.m("buttons")],
+        "onClick": (e) => e.stopPropagation()
+      }, [renderActions(this.expandDetails), renderGroup()]);
     }
     return createVNode(resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",

package/es/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/es/control/app-menu/app-menu.d.ts

@@ -31,7 +31,11 @@ export declare const AppMenuControl: import("vue").DefineComponent<{
     defaultOpens: Ref<string[]>;
     menuMode: import("vue").ComputedRef<"vertical" | "horizontal">;
     counterData: Ref<IData>;
+    saveConfigs: Ref<IData[]>;
+    configSaves: (saveConfig: IData[]) => void;
+    configReset: () => void;
     isShowCollapse: import("vue").ComputedRef<boolean>;
+    enableCustomized: import("vue").ComputedRef<boolean | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IAppMenu>;

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

@@ -5,6 +5,7 @@ import { createUUID } from 'qx-util';
 import { AppMenuController, ViewCallTag } from '@ibiz-template/runtime';
 import { useRoute } from 'vue-router';
 import './app-menu.css';
+import { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -43,10 +44,47 @@ 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 getMenuCustomDisabled(_key, items) {
+  const target = findCustomMenu(_key, items);
+  if (target) {
+    return target.disabled;
+  }
+  return false;
+}
+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];
@@ -69,7 +107,7 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData) {
     return !(isFirst && collapse) ? createVNode(resolveComponent("el-menu-item"), {
       "class": ns.e("item"),
       "index": menu.key,
-      "disabled": menu.disabled,
+      "disabled": menu.disabled || getMenuCustomDisabled(menu.key, saveConfigs),
       "title": menu.tooltip
     }, _isSlot(content) ? content : {
       default: () => [content]
@@ -82,7 +120,7 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData) {
       default: () => [createVNode(resolveComponent("el-menu-item"), {
         "class": ns.e("item"),
         "index": menu.key,
-        "disabled": menu.disabled
+        "disabled": menu.disabled || getMenuCustomDisabled(menu.key, saveConfigs)
       }, _isSlot(content) ? content : {
         default: () => [content]
       })]
@@ -97,20 +135,24 @@ 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 createVNode(resolveComponent("el-sub-menu"), {
     "class": ns.b("submenu"),
     "index": subMenu.key,
+    "disabled": getMenuCustomDisabled(subMenu.key, saveConfigs),
     "popper-class": ns.b("popup-container")
   }, {
     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];
@@ -163,6 +205,7 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new AppMenuController(...args));
     const ns = useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const menus = ref(getMenus(c.model.appMenuItems));
+    const saveConfigs = ref([]);
     const defaultActive = ref("");
     const defaultOpens = ref([]);
     const route = useRoute();
@@ -197,6 +240,9 @@ const AppMenuControl = /* @__PURE__ */ 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) => {
@@ -249,6 +295,15 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       }
       return false;
     });
+    const enableCustomized = computed(() => {
+      return c.model.enableCustomized;
+    });
+    const configSaves = (saveConfig) => {
+      saveConfigs.value = saveConfig;
+    };
+    const configReset = () => {
+      saveConfigs.value = [];
+    };
     return {
       menus,
       c,
@@ -259,13 +314,16 @@ const AppMenuControl = /* @__PURE__ */ defineComponent({
       defaultOpens,
       menuMode,
       counterData,
-      isShowCollapse
+      saveConfigs,
+      configSaves,
+      configReset,
+      isShowCollapse,
+      enableCustomized
     };
   },
   render() {
-    let _slot;
     return createVNode(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 && createVNode(resolveComponent("el-menu"), {
@@ -279,15 +337,23 @@ const AppMenuControl = /* @__PURE__ */ 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 && createVNode("div", {
+      }), this.enableCustomized && createVNode(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 && createVNode("div", {
         "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
         "onClick": () => {
           this.c.view.call(ViewCallTag.TOGGLE_COLLAPSE);

package/es/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/es/control/app-menu/custom-menu-design/custom-menu-design.d.ts

@@ -0,0 +1,43 @@
+import { AppMenuController } from '@ibiz-template/runtime';
+import { PropType } from 'vue';
+import './custom-menu-design.scss';
+/**
+ * 处理菜单自定义配置
+ *
+ * @param {AppMenuController} c
+ * @param {IData[]} items
+ * @return {*}
+ */
+export declare const MenuDesign: import("vue").DefineComponent<{
+    controller: {
+        type: PropType<AppMenuController>;
+        required: true;
+    };
+    menus: {
+        type: PropType<IData[]>;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: AppMenuController;
+    configs: import("vue").Ref<IData[]>;
+    visible: import("vue").Ref<boolean>;
+    loading: import("vue").Ref<boolean>;
+    onReset: () => Promise<void>;
+    renderContent: () => JSX.Element;
+    renderHeader: () => JSX.Element;
+    onSave: () => Promise<void>;
+    openDesign: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "saved")[], "reset" | "saved", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: PropType<AppMenuController>;
+        required: true;
+    };
+    menus: {
+        type: PropType<IData[]>;
+        required: true;
+    };
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSaved?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,280 @@
+import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './custom-menu-design.css';
+import { RuntimeError } from '@ibiz-template/core';
+import { cloneDeep } from 'lodash-es';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function renderByProvider(itemId, c) {
+  const itemModel = c.allAppMenuItems.find((item) => item.id === itemId);
+  if (!itemModel) {
+    throw new RuntimeError("\u6CA1\u627E\u5230\u83DC\u5355\u9879\u6A21\u578B".concat(itemId));
+  }
+  const provider = c.itemProviders[itemId];
+  if (!provider.renderText) {
+    throw new RuntimeError("".concat(itemId, "\u7684\u9002\u914D\u5668\u6CA1\u6709renderText\u65B9\u6CD5"));
+  }
+  return provider.renderText(itemModel, c);
+}
+const MenuDesign = /* @__PURE__ */ defineComponent({
+  name: "IBizMenuDesign",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["saved", "reset"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("menu-design");
+    const c = props.controller;
+    const loading = ref(false);
+    const visible = ref(false);
+    const configs = 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,
+          disabled: item.config.disabled
+        };
+        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,
+            disabled: false
+          }
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          data.children = mergeMenusConfig(item.children);
+        }
+        if (target) {
+          Object.assign(data, {
+            config: {
+              visible: target.visible,
+              disabled: target.disabled
+            }
+          });
+        }
+        return data;
+      });
+    };
+    const onReset = async () => {
+      c.saveConfigs = [];
+      await c.customController.resetCustomModelData();
+      configs.value = mergeMenusConfig(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 ? createVNode(resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.image
+          }, null) : null, createVNode("span", null, [menu.label])];
+        }
+        return content;
+      }
+      if (menu.itemType === "SEPERATOR") {
+        const direction = c.view.model.mainMenuAlign === "TOP" ? "vertical" : "horizontal";
+        return createVNode("div", {
+          "class": ns.be("content", "menu-seperator")
+        }, [createVNode(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 createVNode("i", {
+            "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-caret-right"],
+            "aria-hidden": "true"
+          }, null);
+        }
+        return 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 createVNode("div", {
+          "class": ns.be("content", "menu-item")
+        }, [createVNode("div", {
+          "class": [ns.be("content", "menu-item-content"), ns.is("is-menuitem", item.itemType === "MENUITEM")]
+        }, [createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label"),
+          "onClick": () => collapseGroup(item)
+        }, [renderGroupIcon(item), createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label-content")
+        }, [content])]), item.itemType !== "SEPERATOR" ? createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "checks")
+        }, [createVNode(resolveComponent("el-checkbox"), {
+          "modelValue": item.config.visible,
+          "onUpdate:modelValue": ($event) => item.config.visible = $event,
+          "onClick": stopExpand,
+          "label": "\u663E\u793A",
+          "size": "large"
+        }, null), createVNode(resolveComponent("el-checkbox"), {
+          "modelValue": item.config.disabled,
+          "onUpdate:modelValue": ($event) => item.config.disabled = $event,
+          "onClick": stopExpand,
+          "label": "\u7981\u7528",
+          "size": "large"
+        }, null)]) : null]), item.children && item.children.length > 0 ? createVNode("div", {
+          "class": [ns.bem("content", "menu-item", "children"), ns.is("collapse", item.isCollapse)]
+        }, [renderMenuList(item.children)]) : null]);
+      });
+    };
+    const renderHeader = () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": ns.b("header")
+      }, [createVNode("div", {
+        "class": ns.be("header", "caption")
+      }, [ibiz.i18n.t("control.menuDesign.customMenu")]), createVNode("div", {
+        "class": ns.be("header", "actions")
+      }, [createVNode(resolveComponent("el-button"), {
+        "onClick": onReset,
+        "loading": loading.value
+      }, _isSlot(_slot = ibiz.i18n.t("control.menuDesign.reset")) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(resolveComponent("el-button"), {
+        "onClick": onSave,
+        "loading": loading.value
+      }, _isSlot(_slot2 = ibiz.i18n.t("control.menuDesign.save")) ? _slot2 : {
+        default: () => [_slot2]
+      })])]);
+    };
+    const renderContent = () => {
+      return createVNode("div", {
+        "class": ns.b("content")
+      }, [renderMenuList(configs.value)]);
+    };
+    const openDesign = () => {
+      configs.value = mergeMenusConfig(cloneDeep(props.menus));
+      visible.value = true;
+    };
+    return {
+      ns,
+      c,
+      configs,
+      visible,
+      loading,
+      onReset,
+      renderContent,
+      renderHeader,
+      onSave,
+      openDesign
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "title": ibiz.i18n.t("control.menu.menuSetting"),
+      "onClick": this.openDesign
+    }, [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"
+    }, [createVNode("g", {
+      "id": "augaction/settings",
+      "stroke-width": "1",
+      "fill-rule": "evenodd"
+    }, [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)])])]), createVNode(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();
+      }
+    })]);
+  }
+});
+
+export { MenuDesign };

package/es/control/app-menu/index.d.ts

@@ -26,7 +26,11 @@ export declare const IBizAppMenuControl: import("@ibiz-template/vue3-util").Type
     defaultOpens: import("vue").Ref<string[]>;
     menuMode: import("vue").ComputedRef<"vertical" | "horizontal">;
     counterData: import("vue").Ref<IData>;
+    saveConfigs: import("vue").Ref<IData[]>;
+    configSaves: (saveConfig: IData[]) => void;
+    configReset: () => void;
     isShowCollapse: import("vue").ComputedRef<boolean>;
+    enableCustomized: import("vue").ComputedRef<boolean | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IAppMenu>;

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

@@ -2,11 +2,13 @@ import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { AppMenuControl } from './app-menu.mjs';
 import { AppMenuProvider } from './app-menu.provider.mjs';
+import { MenuDesign } from './custom-menu-design/custom-menu-design.mjs';
 
 "use strict";
 const IBizAppMenuControl = withInstall(
   AppMenuControl,
   function(v) {
+    v.component(MenuDesign.name, MenuDesign);
     v.component(AppMenuControl.name, AppMenuControl);
     registerControlProvider(ControlType.APP_MENU, () => new AppMenuProvider());
   }