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

package/lib/common/pql-editor/utils/index.cjs

@@ -26,6 +26,7 @@ const ExcludeOPs = [
   runtime.ValueOP.EXISTS,
   runtime.ValueOP.NOT_EXISTS
 ];
+const InOPs = [runtime.ValueOP.IN, runtime.ValueOP.NOT_IN];
 const filterModeMap = /* @__PURE__ */ new Map();
 FilterModes.forEach((mode) => {
   filterModeMap.set(mode.valueOP, mode);
@@ -100,6 +101,79 @@ const generateItems = (children) => {
   }
   return items;
 };
+const generateNodeItems = (currentNode, getPreviousNode) => {
+  var _a, _b;
+  if (!currentNode || !getPreviousNode) {
+    return [];
+  }
+  const nodes = [];
+  while (currentNode) {
+    nodes.push(currentNode);
+    currentNode = getPreviousNode(currentNode);
+  }
+  const result = [];
+  nodes.reverse();
+  let current = { type: "condition" };
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.type === "pql-field") {
+      if (current.key || current.operator || current.value) {
+        result.push(current);
+        current = { type: "condition", key: node };
+      } else {
+        current.key = node;
+      }
+    }
+    if (node.type === "pql-field-operator") {
+      if (current.operator || current.value) {
+        result.push(current);
+        current = { type: "condition", operator: node };
+      } else {
+        current.operator = node;
+      }
+      if (node.value && InOPs.includes(node.value) && i < nodes.length - 1 && nodes[i + 1].type !== "pql-field-connection") {
+        if (nodes[i + 1].type === "pql-field" || nodes[i + 1].type === "pql-field-operator") {
+          continue;
+        }
+        current.value = [];
+        i++;
+        while (i < nodes.length && nodes[i].type !== "pql-field-connection" && nodes[i].type !== "pql-field" && nodes[i].type !== "pql-field-operator") {
+          current.value.push(nodes[i]);
+          i++;
+        }
+        if (i < nodes.length && (nodes[i].type === "pql-field-connection" || nodes[i].type === "pql-field" || nodes[i].type === "pql-field-operator")) {
+          i--;
+        }
+      }
+    }
+    if (node.type === "pql-field-value") {
+      if (current.value || ((_a = current.operator) == null ? void 0 : _a.value) && ExcludeOPs.includes(current.operator.value)) {
+        current = { type: "condition", value: [node] };
+      } else {
+        current.value = [node];
+      }
+    }
+    if (node.type === "pql-field-connection") {
+      if (current.key || current.operator || current.value) {
+        result.push(current);
+      }
+      result.push({ type: "connection", value: [node] });
+      current = { type: "condition" };
+    }
+    if (!node.type && node.text) {
+      if (current.value || ((_b = current.operator) == null ? void 0 : _b.value) && ExcludeOPs.includes(current.operator.value)) {
+        result.push(current);
+        current = { type: "condition", value: [node] };
+      } else {
+        current.value = [node];
+      }
+    }
+  }
+  if (current.key || current.operator || current.value) {
+    result.push(current);
+  }
+  return result;
+};
 const generateCustomCond = (items, fields) => {
   const map = /* @__PURE__ */ new Map();
   fields.forEach((item) => {
@@ -107,24 +181,38 @@ const generateCustomCond = (items, fields) => {
   });
   let cond = "";
   items.forEach((item) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (item.type === "condition") {
       const { key, operator, value } = item;
       const symbol = (_a = filterModeMap.get(operator == null ? void 0 : operator.value)) == null ? void 0 : _a.sqlOP;
-      const valueText = ((value == null ? void 0 : value.value) || "").replace(/\s+/g, " ");
-      const valueObj = "$".concat(JSON.stringify({
-        value: (value == null ? void 0 : value.value) || "",
-        caption: (value == null ? void 0 : value.label) || "",
-        field: "".concat(((_b = map.get((key == null ? void 0 : key.value) || "")) == null ? void 0 : _b.appDataEntityFullTag) || "", ".").concat((key == null ? void 0 : key.value) || "")
-      }));
-      const valueStr = value ? "  ".concat((value == null ? void 0 : value.type) ? valueObj : valueText) : "";
+      const valueText = value == null ? void 0 : value.filter((_v) => _v.type || _v.text).map((_v) => {
+        var _a2, _b2, _c, _d, _e, _f;
+        if (_v.type) {
+          return "$".concat(JSON.stringify({
+            value: (_v == null ? void 0 : _v.value) || "",
+            caption: (_v == null ? void 0 : _v.label) || "",
+            field: "".concat(((_a2 = map.get((key == null ? void 0 : key.value) || "")) == null ? void 0 : _a2.appDataEntityFullTag) || "", ".").concat((key == null ? void 0 : key.value) || "")
+          }));
+        }
+        if ((operator == null ? void 0 : operator.value) === runtime.ValueOP.LIKE) {
+          return "'%".concat(((_b2 = _v.text) == null ? void 0 : _b2.trim()) || "", "%'");
+        }
+        if ((operator == null ? void 0 : operator.value) && InOPs.includes(operator.value)) {
+          if (((_c = _v.text) == null ? void 0 : _c.startsWith("[")) && _v.text.endsWith("]")) {
+            return "(".concat((_d = _v.text) == null ? void 0 : _d.trim().slice(1, -1).split(",").map((e) => "'".concat(e.trim(), "'")).join(","), ")");
+          }
+          return ((_e = _v.text) == null ? void 0 : _e.trim().replace(/^\[/, "(").replace(/\]$/, ")")) || "";
+        }
+        return "'".concat((_f = _v.text) == null ? void 0 : _f.trim(), "'") || "";
+      }).join("").replace(/\s+/g, " ");
+      const valueStr = value ? "  ".concat(valueText) : "";
       cond += "$".concat(JSON.stringify({
         name: (key == null ? void 0 : key.value) || "",
         caption: (key == null ? void 0 : key.label) || ""
       }), "  ").concat(symbol).concat(valueStr);
     }
     if (item.type === "connection") {
-      cond += "  ".concat((_c = item.value) == null ? void 0 : _c.value, "  ");
+      cond += "  ".concat((_b = item.value) == null ? void 0 : _b.filter((_v) => _v.value).map((_v) => _v.value).join(), "  ");
     }
   });
   return cond;
@@ -200,27 +288,10 @@ const parseCustomCond = (cond) => {
     ibiz.log.error(err == null ? void 0 : err.message);
   }
 };
-const pqlItemsToPqlNodes = async (items, fields, getCodeListItems) => {
+const pqlItemsToPqlNodes = async (items) => {
   const nodes = [];
-  const codeListMap = /* @__PURE__ */ new Map();
-  const fieldList = fields.filter(
-    (child) => items.some((item) => {
-      var _a;
-      return ((_a = item.key) == null ? void 0 : _a.value) === child.appDEFieldId;
-    })
-  );
-  await Promise.all(
-    fieldList.map(async (item) => {
-      if (item.appCodeListId) {
-        const codeItems = await getCodeListItems(item.appCodeListId);
-        if (codeItems) {
-          codeListMap.set(item.appDEFieldId, codeItems);
-        }
-      }
-    })
-  );
   items.forEach((item) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (item.type === "condition") {
       const { key, operator, value } = item;
       nodes.push({
@@ -233,48 +304,74 @@ const pqlItemsToPqlNodes = async (items, fields, getCodeListItems) => {
         label: operator == null ? void 0 : operator.label,
         value: operator == null ? void 0 : operator.value
       });
-      const field = fields.find((child) => child.appDEFieldId === (key == null ? void 0 : key.value));
       if (!(value == null ? void 0 : value.type)) {
-        nodes.push({
-          text: value == null ? void 0 : value.value
-        });
-      } else if (field && field.appCodeListId) {
-        const codeItems = codeListMap.get(field.appDEFieldId);
-        const codeItem = codeItems == null ? void 0 : codeItems.find((child) => child.value === (value == null ? void 0 : value.value));
-        if (codeItem) {
-          nodes.push({
-            type: "pql-field-value",
-            label: value == null ? void 0 : value.label,
-            value: value == null ? void 0 : value.value
-          });
-        } else {
-          nodes.push({
-            text: value == null ? void 0 : value.value
-          });
+        if ((operator == null ? void 0 : operator.value) && InOPs.includes(operator.value)) {
+          if ((value == null ? void 0 : value.value) && /^\(.*?\)$/.test(value.value)) {
+            const valueText = value.value.slice(1, -1).trim();
+            if (valueText.startsWith("${") && valueText.endsWith("}")) {
+              let splitArr = valueText.split(/\},\s*/g);
+              splitArr = splitArr.map(
+                (text, i) => i === splitArr.length - 1 ? text : "".concat(text, "}")
+              );
+              if (splitArr.length && splitArr.every((text) => /^\$/.test(text))) {
+                nodes.push({
+                  text: "["
+                });
+                splitArr.forEach((text, i) => {
+                  let valueObj;
+                  try {
+                    valueObj = JSON.parse(text.slice(1));
+                  } catch (err) {
+                    valueObj = { caption: text, value: text };
+                  }
+                  nodes.push({
+                    type: "pql-field-value",
+                    label: valueObj == null ? void 0 : valueObj.caption,
+                    value: valueObj == null ? void 0 : valueObj.value
+                  });
+                  if (i !== splitArr.length - 1) {
+                    nodes.push({
+                      text: ","
+                    });
+                  }
+                });
+                nodes.push({
+                  text: "]"
+                });
+                return;
+              }
+            } else {
+              nodes.push({
+                text: "[".concat(valueText.replace(/'/g, ""), "]")
+              });
+              return;
+            }
+          }
         }
-      } else if (field && field.appDataEntityId) {
-        if ((value == null ? void 0 : value.label) !== (value == null ? void 0 : value.value)) {
-          nodes.push({
-            type: "pql-field-value",
-            label: value == null ? void 0 : value.label,
-            value: value == null ? void 0 : value.value
-          });
-        } else {
-          nodes.push({
-            text: value == null ? void 0 : value.value
-          });
+        if ((operator == null ? void 0 : operator.value) === runtime.ValueOP.LIKE) {
+          if ((value == null ? void 0 : value.value) && value.value.startsWith("'%") && value.value.endsWith("%'")) {
+            nodes.push({
+              text: value.value.slice(2, -2)
+            });
+            return;
+          }
         }
+        nodes.push({
+          text: (_a = value == null ? void 0 : value.value) == null ? void 0 : _a.slice(1, -1)
+        });
       } else {
         nodes.push({
-          text: value == null ? void 0 : value.value
+          type: "pql-field-value",
+          label: value == null ? void 0 : value.label,
+          value: value == null ? void 0 : value.value
         });
       }
     }
     if (item.type === "connection") {
       nodes.push({
         type: "pql-field-connection",
-        label: (_a = item.value) == null ? void 0 : _a.label,
-        value: (_b = item.value) == null ? void 0 : _b.value
+        label: (_b = item.value) == null ? void 0 : _b.label,
+        value: (_c = item.value) == null ? void 0 : _c.value
       });
     }
   });
@@ -308,9 +405,11 @@ function isMove(el) {
 
 exports.ExcludeOPs = ExcludeOPs;
 exports.FilterModes = FilterModes;
+exports.InOPs = InOPs;
 exports.InputOPs = InputOPs;
 exports.generateCustomCond = generateCustomCond;
 exports.generateItems = generateItems;
+exports.generateNodeItems = generateNodeItems;
 exports.isMove = isMove;
 exports.parseCustomCond = parseCustomCond;
 exports.pqlItemsToPqlNodes = pqlItemsToPqlNodes;

package/lib/common/rawitem/rawitem.cjs

@@ -5,6 +5,8 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var qxUtil = require('qx-util');
 require('./rawitem.css');
 var core = require('@ibiz-template/core');
+require('../../util/index.cjs');
+var wangEditorUtil = require('../../util/wang-editor-util/wang-editor-util.cjs');
 
 "use strict";
 const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
@@ -51,6 +53,14 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
       const reg = /^https?:|^http?:|(\.png|\.svg|\.jpg|\.png|\.gif|\.psd|\.tif|\.bmp|\.jpeg)/;
       return reg.test(imgUrl);
     };
+    const isHtmlStr = (str) => {
+      try {
+        const fragment = new DOMParser().parseFromString(str, "text/html");
+        return fragment.body.children.length > 0;
+      } catch (error) {
+        return false;
+      }
+    };
     const playerParams = vue.ref({
       id: qxUtil.createUUID(),
       path: "",
@@ -93,6 +103,12 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
           rawItemText.value = val.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;nbsp;/g, " ").replace(/&nbsp;/g, " ");
         }
       }
+      if (rawItemType.value === "HTML" && !isHtmlStr(rawItemText.value)) {
+        rawItemText.value = rawItemText.value.replace(/\n/g, "<br>");
+      }
+      if (rawItemType.value === "HTML") {
+        rawItemText.value = wangEditorUtil.parseHtml(rawItemText.value);
+      }
       if (["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(rawItemType.value)) {
         if (rawItemContent.value) {
           let rawConfig = {};

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,25 +114,44 @@ 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") {
-    const direction = c.view.model.mainMenuAlign === "TOP" ? "vertical" : "horizontal";
+    const direction = c.view.model.mainMenuAlign === "TOP" && isFirst ? "vertical" : "horizontal";
     return vue.createVNode(vue.resolveComponent("el-divider"), {
       "direction": direction,
-      "class": ns.e("separator"),
+      "class": ns.em("separator", direction),
       "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) {
@@ -223,6 +245,11 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       if ((activeMenu == null ? void 0 : activeMenu.id) === id) {
         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) => {
@@ -322,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-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-text-1);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-0);--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--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: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-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);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-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-text-1);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-0);--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: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))}
+@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;
     };