@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.12

package/lib/common/split/split.cjs

@@ -144,7 +144,7 @@ const IBizSplit = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.m("horizontal")
     }, [vue.createVNode("div", {
       "style": {
-        right: "".concat(this.anotherOffset, "%")
+        width: "".concat(this.offset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "left")]
     }, [(_b = (_a = this.$slots).left) == null ? void 0 : _b.call(_a)]), vue.createVNode("div", {
@@ -157,7 +157,7 @@ const IBizSplit = /* @__PURE__ */ vue.defineComponent({
       "mode": "vertical"
     }, null)]), vue.createVNode("div", {
       "style": {
-        left: "".concat(this.offset, "%")
+        width: "".concat(this.anotherOffset, "%")
       },
       "class": [this.paneClasses, this.ns.bm("pane", "right")]
     }, [(_f = (_e = this.$slots).right) == null ? void 0 : _f.call(_e)])]) : vue.createVNode("div", {

package/lib/common/split/split.css

@@ -1 +1 @@
-.ibiz-split-wrapper{position:relative;width:100%;height:100%}.ibiz-split-wrapper.is-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split--horizontal .ibiz-split-trigger-con{top:50%;width:0;height:100%}.ibiz-split--horizontal .ibiz-split-pane--right{padding-left:6px}.ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:6px}.ibiz-split-pane{position:absolute}.ibiz-split-pane--left{top:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--right{top:0;right:0;bottom:0;overflow:hidden}.ibiz-split-pane--top{top:0;right:0;left:0;overflow:hidden}.ibiz-split-pane--bottom{right:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split-trigger-con{position:absolute;z-index:10;transform:translate(-50%,-50%)}
+.ibiz-split-wrapper{position:relative;width:100%;height:100%}.ibiz-split-wrapper.is-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split--horizontal{display:flex;height:100%}.ibiz-split--horizontal .ibiz-split-trigger-con{top:50%;width:0;height:100%}.ibiz-split--horizontal .ibiz-split-pane{position:unset}.ibiz-split--horizontal .ibiz-split-pane--right{padding-left:6px}.ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:6px}.ibiz-split-pane{position:absolute}.ibiz-split-pane--left{top:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--right{top:0;right:0;bottom:0;overflow:hidden}.ibiz-split-pane--top{top:0;right:0;left:0;overflow:hidden}.ibiz-split-pane--bottom{right:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split-trigger-con{position:absolute;z-index:10;transform:translate(-50%,-50%)}

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

@@ -6,8 +6,8 @@ var vue3Util = require('@ibiz-template/vue3-util');
 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');
+require('./app-menu.css');
 
 "use strict";
 function _isSlot(s) {
@@ -23,7 +23,8 @@ function getMenus(items) {
       counterId: item.counterId,
       disabled: !item.appFuncId,
       tooltip: item.tooltip,
-      itemType: item.itemType
+      itemType: item.itemType,
+      sysCss: item.sysCss
     };
     if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
       data.children = getMenus(item.appMenuItems);
@@ -74,6 +75,7 @@ function getMenuCustomVisible(_key, items) {
   return true;
 }
 function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs) {
+  var _a, _b;
   if (!c.state.menuItemsState[menu.key].visible) {
     return;
   }
@@ -100,7 +102,7 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       }, null) : menu.label.slice(0, 1)];
     }
     return !(isFirst && collapse) ? vue.createVNode(vue.resolveComponent("el-menu-item"), {
-      "class": ns.e("item"),
+      "class": [ns.e("item"), "".concat(((_a = menu.sysCss) == null ? void 0 : _a.cssName) || "")],
       "index": menu.key,
       "disabled": menu.disabled,
       "title": core.showTitle(menu.tooltip)
@@ -112,13 +114,16 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       "placement": "left",
       "theme": "light"
     }, {
-      default: () => [vue.createVNode(vue.resolveComponent("el-menu-item"), {
-        "class": ns.e("item"),
-        "index": menu.key,
-        "disabled": menu.disabled
-      }, _isSlot(content) ? content : {
-        default: () => [content]
-      })]
+      default: () => {
+        var _a2;
+        return [vue.createVNode(vue.resolveComponent("el-menu-item"), {
+          "class": [ns.e("item"), "".concat(((_a2 = menu.sysCss) == null ? void 0 : _a2.cssName) || "")],
+          "index": menu.key,
+          "disabled": menu.disabled
+        }, _isSlot(content) ? content : {
+          default: () => [content]
+        })];
+      }
     });
   }
   if (menu.itemType === "SEPERATOR") {
@@ -129,8 +134,24 @@ function renderMenuItem(isFirst, menu, collapse, ns, c, counterData, saveConfigs
       "id": menu.key
     }, null);
   }
+  if (menu.itemType === "RAWITEM") {
+    const menuRawItem = core.findRecursiveChild(c.model, menu.key, {
+      compareField: "id",
+      childrenFields: ["appMenuItems"]
+    });
+    return vue.createVNode(vue.resolveComponent("el-menu-item"), {
+      "index": menu.key,
+      "title": core.showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")]
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
+        "rawItem": menuRawItem
+      }, null)]
+    });
+  }
 }
 function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfigs) {
+  var _a, _b, _c, _d, _e;
   if (!c.state.menuItemsState[subMenu.key].visible) {
     return;
   }
@@ -138,9 +159,10 @@ function renderSubmenu(isFirst, subMenu, collapse, ns, c, counterData, saveConfi
     return;
   }
   return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
-    "class": ns.b("submenu"),
+    "class": [ns.b("submenu"), "".concat(((_a = subMenu.sysCss) == null ? void 0 : _a.cssName) || "")],
     "index": subMenu.key,
-    "popper-class": ns.b("popup-container")
+    "teleported": true,
+    "popper-class": [ns.b("popup-container"), ns.b("".concat(c.model.codeName.toLowerCase(), "--popper")), "".concat(((_b = c.model.sysCss) == null ? void 0 : _b.cssName) ? "".concat((_c = c.model.sysCss) == null ? void 0 : _c.cssName, "--popper") : ""), "".concat(((_d = subMenu.sysCss) == null ? void 0 : _d.cssName) ? "".concat((_e = subMenu.sysCss) == null ? void 0 : _e.cssName, "--popper") : "")]
   }, {
     default: () => subMenu.children.map((item) => {
       if (item.children) {
@@ -224,6 +246,10 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       defaultActive.value = id;
+      const menu = c.getAllItems().find((m) => m.id === id);
+      if ((menu == null ? void 0 : menu.itemType) === "RAWITEM" || c.context.srfrunmode === "DESIGN") {
+        return;
+      }
       await c.onClickMenuItem(id, event);
     };
     vue.watch(() => route.params.view2, (newVal, oldVal) => {
@@ -323,46 +349,51 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     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), this.ns.is("show-menu-design", this.enableCustomized)],
+      "class": [this.ns.b(), this.ns.b("".concat(this.c.model.codeName.toLowerCase())), 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), "".concat(((_a = this.c.model.sysCss) == null ? void 0 : _a.cssName) || "")],
       "controller": this.c
     }, {
-      default: () => [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), {
-        "key": this.key,
-        "ref": "menu",
-        "default-active": this.defaultActive,
-        "default-openeds": this.defaultOpens,
-        "collapse": this.collapse,
-        "collapse-transition": false,
-        "onSelect": this.onClick,
-        "theme": "light",
-        "mode": this.menuMode,
-        "ellipsis-icon": () => this.ellipsisSvg(),
-        "ellipsis": this.menuMode === "horizontal"
-      }, {
-        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);
-          });
-        }
-      }), 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);
-        }
-      }, [vue.createVNode("ion-icon", {
-        "name": "menu-collapse"
-      }, null)])]
+      default: () => {
+        var _a2, _b;
+        return [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), {
+          "key": this.key,
+          "ref": "menu",
+          "popper-class": [this.ns.b("popper"), this.ns.b("".concat(this.c.model.codeName.toLowerCase(), "--popper")), "".concat(((_a2 = this.c.model.sysCss) == null ? void 0 : _a2.cssName) ? "".concat((_b = this.c.model.sysCss) == null ? void 0 : _b.cssName, "--popper") : "")],
+          "default-active": this.defaultActive,
+          "default-openeds": this.defaultOpens,
+          "collapse": this.collapse,
+          "collapse-transition": false,
+          "onSelect": this.onClick,
+          "theme": "light",
+          "mode": this.menuMode,
+          "ellipsis-icon": () => this.ellipsisSvg(),
+          "ellipsis": this.menuMode === "horizontal"
+        }, {
+          default: () => {
+            return this.menus.map((item) => {
+              var _a3;
+              if (((_a3 = item.children) == null ? void 0 : _a3.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);
+            });
+          }
+        }), 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);
+          }
+        }, [vue.createVNode("ion-icon", {
+          "name": "menu-collapse"
+        }, null)])];
+      }
     });
   }
 });

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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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:var(--ibiz-spacing-none) 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--horizontal{align-items:center;height:100%;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal>*+*{padding-right:var(--ibiz-spacing-base)}.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-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.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:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-bottom:2px solid var(--ibiz-control-appmenu-item-selected-border-color)}.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);font-size:var(--ibiz-control-appmenu-icon-size)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);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:var(--ibiz-spacing-none);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:var(--ibiz-spacing-none)}.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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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{max-height:100vh;padding:var(--ibiz-spacing-extra-tight);overflow:auto;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:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.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-hover-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:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);line-height:initial;color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-medium);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))}.ibiz-control-appmenu__separator--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-color-border)}.ibiz-control-appmenu-popup-container .el-menu--horizontal.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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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--horizontal.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--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container .el-menu--horizontal.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--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .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-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color)}
+@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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-hover);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-separator-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);overflow-y:auto;border-right:0;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-separator-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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 .ibiz-control-appmenu__rawitem{height:auto!important;min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem .ibiz-rawitem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.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--horizontal{align-items:center;height:100%;overflow-x:hidden;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal>*+*{padding-right:var(--ibiz-spacing-base)}.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-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.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:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-bottom:2px solid var(--ibiz-control-appmenu-item-selected-border-color)}.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);font-size:var(--ibiz-control-appmenu-icon-size)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);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:var(--ibiz-spacing-none);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:var(--ibiz-spacing-none)}.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{--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-separator-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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-popup-container .ibiz-control-appmenu__rawitem{height:auto!important;min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem .ibiz-rawitem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-hover);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-separator-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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{max-height:100vh;padding:var(--ibiz-spacing-extra-tight);overflow:auto;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:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.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-hover-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:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);line-height:initial;color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-medium);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))}.ibiz-control-appmenu__separator--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-control-appmenu-item-separator-color)}.ibiz-control-appmenu-popup-container .el-menu--horizontal.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 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--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-hover);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-text);--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-separator-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-primary-text);--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--horizontal.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--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container .el-menu--horizontal.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--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .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-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .el-menu--horizontal.el-menu--popup-container .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color)}

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

@@ -221,6 +221,9 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
       }, [renderMenuList(configs.value)]);
     };
     const openDesign = () => {
+      if (c.context.srfrunmode === "DESIGN") {
+        return;
+      }
       configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
       visible.value = true;
     };

package/lib/control/chart/chart.cjs

@@ -65,7 +65,7 @@ const ChartControl = /* @__PURE__ */ vue.defineComponent({
       if (!props.data) {
         return;
       }
-      c.state.items = props.data;
+      c.state.items = props.data.map((item) => new runtime.ControlVO(item));
       c.afterLoad({}, c.state.items);
     };
     c.evt.on("onCreated", async () => {

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

@@ -83,10 +83,11 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const calcActionItemClass = (item) => {
+      var _a;
       const {
         actionLevel
       } = item;
-      return [ns.e("item"), ns.is("disabled", false), ns.em("item", "level-".concat(actionLevel))];
+      return [ns.e("item"), "".concat((_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName), ns.em("item", "level-".concat(actionLevel)), ns.is("disabled", c.state.buttonsState[item.id].disabled)];
     };
     vue.watch(() => props.nodeData, async (newVal, oldVal) => {
       if (newVal !== oldVal) {
@@ -96,7 +97,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
     c.evt.on("onCreated", async () => {
       await c.calcButtonState(props.nodeData._deData || (props.nodeData.srfkey ? props.nodeData : void 0), props.nodeModel.appDataEntityId);
     });
-    const handleClick = async (detail, e) => {
+    const handleClick = (detail, e) => {
       if (props.mode === "buttons") {
         popoverVisible.value = false;
       } else if (dropdownRef.value) {
@@ -104,96 +105,140 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       }
       e.stopPropagation();
       popoverVisible.value = false;
-      emit("action-click", detail, e);
-    };
-    return {
-      c,
-      ns,
-      expandDetails,
-      groupDetails,
-      groupButtonRef,
-      dropdownRef,
-      popoverVisible,
-      handleClick,
-      calcActionItemClass,
-      actionDetails
+      if (detail.uiactionId) {
+        emit("action-click", detail, e);
+      }
     };
-  },
-  render() {
-    const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
       return vue.createVNode(vue.resolveComponent("el-divider"), {
-        "class": this.ns.e("separator"),
+        "class": ns.e("separator"),
         "border-style": "double",
         "direction": isExpand ? "vertical" : "horizontal"
       }, null);
     };
+    const renderActionButton = (detail, isExpand = true) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
+          "text": true,
+          "size": "small",
+          "title": core.showTitle(detail.tooltip),
+          "class": calcActionItemClass(detail),
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleClick(detail, e)
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": ns.e("action-content")
+          }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+            "class": ns.e("action-content-icon")
+          }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": detail.sysImage
+          }, null)]), detail.showCaption ? vue.createVNode("div", {
+            "class": ns.e("action-content-caption")
+          }, [detail.caption]) : ""])]
+        })];
+      }
+      return null;
+    };
+    const renderGroupItem = (item, isExpand = true) => {
+      var _a, _b, _c;
+      const {
+        groupExtractMode,
+        uiactionGroup
+      } = item;
+      let detail = item;
+      if (uiactionGroup && groupExtractMode === "ITEM") {
+        return (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((_item) => renderActionButton(_item, isExpand));
+      }
+      const details = (_c = (_b = item.uiactionGroup) == null ? void 0 : _b.uiactionGroupDetails) == null ? void 0 : _c.filter((_item) => c.state.buttonsState[_item.id].visible);
+      if (uiactionGroup && groupExtractMode === "ITEMX" && details) {
+        detail = details[0];
+      }
+      if (detail) {
+        return vue.createVNode(vue.resolveComponent("el-popover"), {
+          "placement": "right-start",
+          "popper-class": ns.e("popover"),
+          "teleported": false,
+          "popper-options": {
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 4]
+              }
+            }]
+          }
+        }, {
+          reference: () => {
+            return vue.createVNode(vue.resolveComponent("el-button"), {
+              "text": true,
+              "size": "small",
+              "onClick": (e) => handleClick(detail, e),
+              "title": core.showTitle(detail.tooltip),
+              "class": calcActionItemClass(detail),
+              "disabled": c.state.buttonsState[detail.id].disabled
+            }, {
+              default: () => [vue.createVNode("div", {
+                "class": ns.e("action-content")
+              }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
+                "class": ns.e("action-content-icon")
+              }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+                "icon": detail.sysImage
+              }, null)]), detail.showCaption ? vue.createVNode("div", {
+                "class": [ns.e("action-content-caption"), ns.e("action-content-group-caption")]
+              }, [detail.caption]) : "", vue.createVNode("ion-icon", {
+                "class": ns.e("action-content-group-icon"),
+                "name": "chevron-forward-outline"
+              }, null)])]
+            });
+          },
+          default: () => {
+            if (uiactionGroup) {
+              return details == null ? void 0 : details.map((_item, index) => {
+                if (groupExtractMode === "ITEMX" && index === 0) {
+                  return null;
+                }
+                return renderActionButton(_item, isExpand);
+              });
+            }
+            return renderActions(item.detoolbarItems || [], isExpand);
+          }
+        });
+      }
+    };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        var _a, _b;
-        if (!((_a = this.c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
+        var _a;
+        if (!((_a = c.state.buttonsState[detail.id]) == null ? void 0 : _a.visible)) {
           return null;
         }
         if (detail.itemType === "SEPERATOR") {
           return renderDivider(isExpand);
         }
-        if (detail.itemType === "DEUIACTION" || detail.itemType === "ITEMS" && !((_b = detail.detoolbarItems) == null ? void 0 : _b.length)) {
-          return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-            "text": true,
-            "size": "small",
-            "onClick": (e) => this.handleClick(detail, e),
-            "title": core.showTitle(detail.tooltip),
-            "disabled": this.c.state.buttonsState[detail.id].disabled,
-            "class": this.calcActionItemClass(detail)
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": this.ns.e("action-content")
-            }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-              "class": this.ns.e("action-content-icon")
-            }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "icon": detail.sysImage
-            }, null)]), detail.showCaption ? vue.createVNode("div", {
-              "class": this.ns.e("action-content-caption")
-            }, [detail.caption]) : ""])]
-          })];
+        if (detail.itemType === "DEUIACTION") {
+          return renderActionButton(detail, isExpand);
         }
         if (detail.itemType === "ITEMS") {
-          return vue.createVNode(vue.resolveComponent("el-popover"), {
-            "placement": "right-start",
-            "popper-class": this.ns.e("popover"),
-            "teleported": false
-          }, {
-            reference: () => {
-              return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
-                "text": true,
-                "size": "small",
-                "onClick": (e) => this.handleClick(detail, e),
-                "title": core.showTitle(detail.tooltip),
-                "disabled": this.c.state.buttonsState[detail.id].disabled,
-                "class": this.calcActionItemClass(detail)
-              }, {
-                default: () => [vue.createVNode("div", {
-                  "class": this.ns.e("action-content")
-                }, [detail.showIcon && detail.sysImage && vue.createVNode("div", {
-                  "class": this.ns.e("action-content-icon")
-                }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                  "icon": detail.sysImage
-                }, null)]), detail.showCaption ? vue.createVNode("div", {
-                  "class": [this.ns.e("action-content-caption"), this.ns.e("action-content-group-caption")]
-                }, [detail.caption]) : "", vue.createVNode("ion-icon", {
-                  "class": this.ns.e("action-content-group-icon"),
-                  "name": "chevron-forward-outline"
-                }, null)])]
-              })];
-            },
-            default: () => {
-              return renderActions(detail.detoolbarItems || [], isExpand);
-            }
-          });
+          return renderGroupItem(detail, isExpand);
         }
         return null;
       });
     };
+    return {
+      c,
+      ns,
+      expandDetails,
+      groupDetails,
+      groupButtonRef,
+      dropdownRef,
+      popoverVisible,
+      handleClick,
+      renderActions,
+      renderActionButton,
+      calcActionItemClass,
+      actionDetails
+    };
+  },
+  render() {
+    const details = this.actionDetails || [];
     const renderGroup = () => {
       let _slot;
       if (this.groupDetails.length === 0) {
@@ -228,7 +273,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
         "popper-class": this.ns.e("popover"),
         "virtual-triggering": true,
         "transition": "none"
-      }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
+      }, _isSlot(_slot = this.renderActions(this.groupDetails, false)) ? _slot : {
         default: () => [_slot]
       })];
     };
@@ -239,7 +284,7 @@ const ContextMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")],
         "onClick": (e) => e.stopPropagation()
-      }, [renderActions(this.expandDetails), renderGroup()]);
+      }, [this.renderActions(this.expandDetails), renderGroup()]);
     }
     return vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "ref": "dropdownRef",