@ibiz-template/vue3-components 0.7.41-alpha.6 → 0.7.41-alpha.7

package/lib/editor/autocomplete/ibiz-autocomplete/ibiz-autocomplete.cjs

@@ -294,7 +294,10 @@ const IBizAutoComplete = /* @__PURE__ */ vue.defineComponent({
     }, [this.curValue]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.curValue ? this.curValue : ibiz.config.common.emptyText]);
+    }, [this.curValue ? this.curValue : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);

package/lib/editor/cascader/ibiz-cascader/ibiz-cascader.cjs

@@ -469,7 +469,10 @@ const IBizCascader = /* @__PURE__ */ vue.defineComponent({
     }, [this.valueText]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.valueText ? this.valueText : ibiz.config.common.emptyText]);
+    }, [this.valueText ? this.valueText : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "onKeyup": this.handleKeyUp

package/lib/editor/data-picker/ibiz-mpicker/ibiz-mpicker.cjs

@@ -373,7 +373,10 @@ const IBizMPicker = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("span", {
         "class": this.ns.b("content-item")
       }, [item[this.c.textName]]);
-    }) : ibiz.config.common.emptyText]);
+    }) : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);

package/lib/editor/data-picker/ibiz-picker/ibiz-picker.cjs

@@ -376,7 +376,10 @@ const IBizPicker = /* @__PURE__ */ vue.defineComponent({
     }, [this.valueText]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.curValue ? this.valueText : ibiz.config.common.emptyText]);
+    }, [this.curValue ? this.valueText : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);

package/lib/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.cjs

@@ -358,7 +358,10 @@ const IBizPickerDropDown = /* @__PURE__ */ vue.defineComponent({
     }, [this.valueText]);
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.curValue ? this.valueText : ibiz.config.common.emptyText]);
+    }, [this.curValue ? this.valueText : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     const hiddenInput = vue.createVNode("input", {
       "ref": "hiddenInputRef",
       "type": "text",

package/lib/editor/data-picker/ibiz-picker-link/ibiz-picker-link.cjs

@@ -133,7 +133,10 @@ const IBizPickerLink = /* @__PURE__ */ vue.defineComponent({
         }
         this.openLinkView();
       }
-    }, [isEmpty ? ibiz.config.common.emptyText : this.curValue])]);
+    }, [isEmpty ? vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.controller.emptyShowPlaceholder,
+      "placeHolder": this.controller.placeHolder
+    }, null) : this.curValue])]);
   }
 });
 

package/lib/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.cjs

@@ -507,7 +507,10 @@ const IBizPickerSelectView = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.b("content-item")
     }, [this.valueText]) : this.valueText.split(",").map((item) => vue.createVNode("span", {
       "class": this.ns.b("content-item")
-    }, [item])) : ibiz.config.common.emptyText]);
+    }, [item])) : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, this.readonly ? readonlyContent : editContent]);

package/lib/editor/date-picker/ibiz-date-picker/ibiz-date-picker.cjs

@@ -158,7 +158,10 @@ const IBizDatePicker = /* @__PURE__ */ vue.defineComponent({
     const readonlyContent = this.formatValue;
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.formatValue ? this.formatValue : ibiz.config.common.emptyText]);
+    }, [this.formatValue ? this.formatValue : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.e(this.editorModel.editorType), this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "onKeyup": this.handleKeyUp

package/lib/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.cjs

@@ -194,7 +194,10 @@ const IBizDateRangePicker = /* @__PURE__ */ vue.defineComponent({
       "start-placeholder": this.startPlaceHolder,
       "end-placeholder": this.endPlaceHolder,
       "unlink-panels": this.unlinkPanels
-    }, this.$attrs), null) : ibiz.config.common.emptyText]);
+    }, this.$attrs), null) : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "onKeyup": this.handleKeyUp

package/lib/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.cjs

@@ -478,7 +478,10 @@ const IBizDropdown = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode("span", {
         "class": this.ns.be("content-item", "label")
       }, [text])]);
-    }) : ibiz.config.common.emptyText]);
+    }) : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     const hiddenInput = vue.createVNode("input", {
       "ref": "hiddenInputRef",
       "type": "text",

package/lib/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.cjs

@@ -89,7 +89,10 @@ const IBizEmojiPicker = /* @__PURE__ */ vue.defineComponent({
     const renderFormDefaultContent = () => {
       return vue.createVNode("div", {
         "class": [ns.b("form-default-content"), ns.is("clear", !!emoji.value)]
-      }, [emoji.value ? emoji.value : ibiz.config.common.emptyText]);
+      }, [emoji.value ? emoji.value : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+        "showPlaceholder": c.emptyShowPlaceholder,
+        "placeHolder": c.placeHolder
+      }, null)]);
     };
     const renderReference = () => {
       return vue.createVNode(vue.resolveComponent("el-button"), {

package/lib/editor/map-picker/ibiz-map-picker/ibiz-map-picker.cjs

@@ -356,7 +356,10 @@ const IBizMapPicker = /* @__PURE__ */ vue.defineComponent({
     }
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.value ? this.value : ibiz.config.common.emptyText]);
+    }, [this.value ? this.value : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("show-default", this.showFormDefaultContent)]
     }, [this.showFormDefaultContent && formDefaultContent, content]);

package/lib/editor/number-range/ibiz-number-range-picker/ibiz-number-range-picker.cjs

@@ -193,7 +193,10 @@ const IBizNumberRangePicker = /* @__PURE__ */ vue.defineComponent({
       "class": this.ns.b("default-separator")
     }, [this.rangeSeparator]), vue.createVNode("div", {
       "class": this.ns.b("default-max")
-    }, [this.maxValue])] : ibiz.config.common.emptyText]);
+    }, [this.maxValue])] : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "ref": "componentRef"

package/lib/editor/span/span/span.cjs

@@ -160,7 +160,10 @@ const IBizSpan = /* @__PURE__ */ vue.defineComponent({
       content = this.text;
       this.spanTitle = this.text;
     } else {
-      content = ibiz.config.common.emptyText;
+      content = vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+        "showPlaceholder": this.c.emptyShowPlaceholder,
+        "placeHolder": this.c.placeHolder
+      }, null);
     }
     const isEllipsis = this.c.editorParams.overflowMode === "ellipsis" || this.c.model.wrapMode === "NOWRAP";
     return vue.createVNode("span", {

package/lib/editor/text-box/ibiz-input-number/ibiz-input-number.cjs

@@ -205,7 +205,10 @@ const IBizInputNumber = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode("div", {
         "class": this.ns.b("form-default-content")
-      }, [this.currentVal || this.currentVal === 0 ? this.currentFormatVal + unit : ibiz.config.common.emptyText]);
+      }, [this.currentVal || this.currentVal === 0 ? this.currentFormatVal + unit : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+        "showPlaceholder": this.c.emptyShowPlaceholder,
+        "placeHolder": this.c.placeHolder
+      }, null)]);
     };
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)]

package/lib/editor/text-box/input/input.cjs

@@ -503,7 +503,10 @@ const IBizInput = /* @__PURE__ */ vue.defineComponent({
     }
     const formDefaultContent = vue.createVNode("div", {
       "class": this.ns.b("form-default-content")
-    }, [this.currentVal ? this.type === "password" ? this.currentVal.split("").map((_item) => "\u2022") : this.currentFormatVal : ibiz.config.common.emptyText]);
+    }, [this.currentVal ? this.type === "password" ? this.currentVal.split("").map((_item) => "\u2022") : this.currentFormatVal : vue.createVNode(vue.resolveComponent("iBizEditorEmptyText"), {
+      "showPlaceholder": this.c.emptyShowPlaceholder,
+      "placeHolder": this.c.placeHolder
+    }, null)]);
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.is("textarea", Object.is(this.type, "textarea")), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : "", this.ns.is("editable", this.isEditable), this.ns.is("show-default", this.showFormDefaultContent)],
       "style": {

package/lib/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.css

@@ -1 +1 @@
-.ibiz-bottom-side-menu{width:100%;height:100%}
+.ibiz-bottom-side-menu{width:100%;height:100%}.ibiz-col--self-align>.ibiz-bottom-side-menu{width:100%;height:100%}

package/lib/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.cjs

@@ -3,10 +3,14 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./common-extend-menu.css');
+var extendButtonMenu = require('../extend-button-menu/extend-button-menu.cjs');
 
 "use strict";
 const CommonExtendMenu = /* @__PURE__ */ vue.defineComponent({
   name: "IBizCommonExtendMenu",
+  components: {
+    ExtendButtonMenu: extendButtonMenu.ExtendButtonMenu
+  },
   props: {
     /**
      * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
@@ -63,16 +67,33 @@ const CommonExtendMenu = /* @__PURE__ */ vue.defineComponent({
      */
     menuItemClick: (item, event) => true
   },
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     const ns = vue3Util.useNamespace("common-extend-menu");
+    const handleMenuItemClick = (menuItem, event) => {
+      if (!menuItem || (menuItem == null ? void 0 : menuItem.itemType) === "RAWITEM") {
+        return;
+      }
+      emit("menuItemClick", menuItem, event);
+    };
     return {
-      ns
+      ns,
+      handleMenuItemClick
     };
   },
   render() {
     return vue.createVNode("div", {
       "class": this.ns.b()
-    }, [this.position, vue.createTextVNode("\u901A\u7528\u83DC\u5355")]);
+    }, [vue.createVNode(extendButtonMenu.ExtendButtonMenu, {
+      "items": this.items,
+      "menuItemsState": this.menuItemsState,
+      "providers": this.providers,
+      "position": this.position,
+      "layoutMode": this.layoutMode,
+      "layout": this.layout,
+      "onMenuItemClick": this.handleMenuItemClick
+    }, null)]);
   }
 });
 

package/lib/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.cjs

@@ -0,0 +1,225 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+var extendMenuBase_util = require('../extend-menu-base.util.cjs');
+require('./extend-button-menu.css');
+
+"use strict";
+const rightArrow = () => vue.createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024",
+  "width": "1em",
+  "height": "1em",
+  "fill": "currentColor"
+}, [vue.createVNode("path", {
+  "fill": "currentColor",
+  "d": "M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+}, null)]);
+function renderMenuItem(params) {
+  var _a, _b, _c;
+  const {
+    ns,
+    menu,
+    menuAlign,
+    menuItemsState
+  } = params;
+  if (!menu.id || !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible))
+    return;
+  if (menu.itemType === "MENUITEM") {
+    return vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": [ns.e("menuitem"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")],
+      "index": menu.id
+    }, {
+      default: () => [menu.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null), menu.caption && vue.createVNode("span", {
+        "class": ns.e("caption"),
+        "title": core.showTitle(menu.tooltip)
+      }, [menu.caption])]
+    });
+  }
+  if (menu.itemType === "SEPERATOR") {
+    const direction = menuAlign === "horizontal" ? "vertical" : "horizontal";
+    return vue.createVNode(vue.resolveComponent("el-divider"), {
+      "direction": direction,
+      "class": [ns.em("separator"), ns.em("separator", direction)],
+      "id": menu.id
+    }, null);
+  }
+  if (menu.itemType === "RAWITEM") {
+    return vue.createVNode(vue.resolveComponent("el-button"), {
+      "index": menu.id,
+      "title": core.showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_c = menu.sysCss) == null ? void 0 : _c.cssName) || "")]
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
+        "rawItem": menu
+      }, null)]
+    });
+  }
+}
+function renderMenuContent(_params) {
+  const {
+    ns,
+    isLayout,
+    position,
+    menuAlign,
+    menus,
+    menuItemsState,
+    showCascaderArrow,
+    handleMenuItemClick,
+    handleMenuItemMouseEnter,
+    handleMenuItemMouseLeave
+  } = _params;
+  return vue.createVNode(vue.resolveComponent("el-row"), {
+    "class": [ns.e("content"), ns.is(menuAlign, !!menuAlign), ns.is(position == null ? void 0 : position.toLowerCase(), !!position)]
+  }, {
+    default: () => menus.map((menu) => {
+      var _a, _b;
+      const menuItem = renderMenuItem({
+        menu,
+        ns,
+        menuAlign,
+        menuItemsState
+      });
+      if (!menuItem)
+        return;
+      const style = {};
+      if (isLayout && ((_a = menu.layoutPos) == null ? void 0 : _a.layout) === "FLEX") {
+        const pos = menu.layoutPos;
+        Object.assign(style, {
+          flexGrow: pos.grow,
+          flexShrink: pos.shrink === 1 ? void 0 : pos.shrink,
+          flexBasis: pos.basis
+        });
+      }
+      const isShowArrow = !!(showCascaderArrow && menu.children);
+      return vue.createVNode("div", {
+        "class": [ns.em("content", "item"), ns.em("content", (_b = menu.itemType) == null ? void 0 : _b.toLowerCase()), ns.is("show-arrow", isShowArrow)],
+        "style": style
+      }, [vue.createVNode("div", {
+        "class": ns.em("content", "item-container"),
+        "onMouseenter": (_e) => handleMenuItemMouseEnter(menu, _e),
+        "onMouseleave": (_e) => handleMenuItemMouseLeave(menu, _e),
+        "onClick": (_e) => handleMenuItemClick(menu, _e)
+      }, [menuItem]), vue.createVNode("span", {
+        "class": ns.em("content", "item-arrow")
+      }, [isShowArrow && rightArrow()])]);
+    })
+  });
+}
+const ExtendButtonMenu = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizExtendButtonMenu",
+  props: {
+    items: {
+      type: Object,
+      required: true
+    },
+    menuItemsState: {
+      type: Object,
+      required: true
+    },
+    providers: {
+      type: Object,
+      required: true
+    },
+    position: {
+      type: String,
+      required: true
+    },
+    layoutMode: {
+      type: String,
+      required: true
+    },
+    layout: {
+      type: Object
+    }
+  },
+  emits: {
+    menuItemClick: (item, event) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("extend-menu-button");
+    const buttonMenuRef = vue.ref();
+    const menuAlign = vue.computed(() => ["TOP", "BOTTOM"].includes(props.position) ? "horizontal" : "vertical");
+    const isLayout = vue.computed(() => props.layoutMode !== "BORDER" && ["TOP", "BOTTOM"].includes(props.position));
+    const menus = vue.ref(extendMenuBase_util.getMenus(props.items));
+    const renderCascaderContent = (_menu) => {
+      return renderMenuContent({
+        ns,
+        menuAlign: "vertical",
+        position: props.position,
+        menus: _menu.children,
+        menuItemsState: props.menuItemsState,
+        handleMenuItemClick,
+        handleMenuItemMouseEnter,
+        handleMenuItemMouseLeave,
+        showCascaderArrow: true,
+        isLayout: false
+      });
+    };
+    const renderBorderContent = () => {
+      return renderMenuContent({
+        ns,
+        menuAlign: menuAlign.value,
+        position: props.position,
+        menus: menus.value,
+        menuItemsState: props.menuItemsState,
+        handleMenuItemClick,
+        handleMenuItemMouseEnter,
+        handleMenuItemMouseLeave,
+        isLayout: isLayout.value,
+        showCascaderArrow: true
+      });
+    };
+    const {
+      getOverlayNum,
+      clearAllCascader,
+      handleMenuItemMouseEnter,
+      handleMenuItemMouseLeave
+    } = extendMenuBase_util.useCascaderPopover(props, ns, menuAlign, renderCascaderContent);
+    let closeBorderPopover;
+    if (props.layoutMode === "BORDER") {
+      const borderLayout = extendMenuBase_util.useBorderLayout(buttonMenuRef, ns, props.position, menuAlign, getOverlayNum, renderBorderContent);
+      closeBorderPopover = borderLayout.closeBorderPopover;
+    }
+    const handleMenuItemClick = async (_menu, _event) => {
+      if (_menu.children)
+        return;
+      clearAllCascader();
+      if (closeBorderPopover)
+        closeBorderPopover();
+      if (!_menu.appFuncId) {
+        ibiz.log.warn(ibiz.i18n.t("runtime.controller.control.menu.noConfigured"));
+        return;
+      }
+      const menuItem = extendMenuBase_util.findMenuItem(_menu.id, props.items);
+      emit("menuItemClick", menuItem, _event);
+    };
+    return {
+      ns,
+      menus,
+      menuAlign,
+      isLayout,
+      buttonMenuRef,
+      handleMenuItemClick,
+      handleMenuItemMouseEnter,
+      handleMenuItemMouseLeave
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "ref": "buttonMenuRef",
+      "class": [this.ns.b(), this.ns.is(this.layoutMode.toLowerCase(), !!this.layoutMode), this.ns.is(this.position.toLowerCase(), !!this.position), this.ns.is(this.menuAlign, !!this.menuAlign)]
+    }, [this.layoutMode !== "BORDER" && renderMenuContent({
+      ...this
+    })]);
+  }
+});
+
+exports.ExtendButtonMenu = ExtendButtonMenu;

package/lib/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.css

@@ -0,0 +1 @@
+.ibiz-extend-menu-button{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:20px;--ibiz-extend-menu-button-icon-height:20px;--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;width:100%;height:100%;padding:var(--ibiz-extend-menu-button-padding)}.ibiz-extend-menu-button__menuitem{width:100%;height:100%;font-size:var(--ibiz-extend-menu-button-font-size)}.ibiz-extend-menu-button__rawitem{width:100%;height:100%}.ibiz-extend-menu-button__rawitem .ibiz-rawitem{min-width:var(--ibiz-extend-menu-button-rawitem-min-width);font-size:initial;color:var(--ibiz-color-primary-text)}.ibiz-extend-menu-button__separator--horizontal{margin:0}.ibiz-extend-menu-button__separator--vertical{margin:0}.ibiz-extend-menu-button__icon{display:flex;align-items:center;width:var(--ibiz-extend-menu-button-icon-width);height:var(--ibiz-extend-menu-button-icon-height)}.ibiz-extend-menu-button__icon+.ibiz-extend-menu-button__caption{margin:var(--ibiz-extend-menu-button-text-margin)}.ibiz-extend-menu-button__content{display:flex;flex-wrap:nowrap;height:100%;padding:var(--ibiz-extend-menu-button-content-padding);overflow:auto}.ibiz-extend-menu-button__content--item{display:flex;align-items:center}.ibiz-extend-menu-button__content--item.is-show-arrow{position:relative}.ibiz-extend-menu-button__content--item.is-show-arrow .ibiz-extend-menu-button__menuitem::after{display:block;width:1em;height:1em;margin-left:auto;content:""}.ibiz-extend-menu-button__content--item.is-rotate-arrow svg{transform:rotate(180deg)}.ibiz-extend-menu-button__content--item-container{display:flex;align-items:center;height:100%}.ibiz-extend-menu-button__content--menuitem{height:var(--ibiz-extend-menu-button-item-height)}.ibiz-extend-menu-button__content--rawitem{height:var(--ibiz-extend-menu-button-item-height)}.ibiz-extend-menu-button__content--item-arrow{position:absolute;top:50%;right:15px;display:flex;align-items:center;justify-content:center;color:var(--ibiz-color-primary-text);transform:translateY(-50%)}.ibiz-extend-menu-button__content--item-arrow svg{transition:transform .3s ease}.ibiz-extend-menu-button__content.is-horizontal{align-items:center}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item{margin:var(--ibiz-extend-menu-button-item-horizontal-margin)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item:first-child{margin-left:0}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item-container:not(:has(.el-divider)){min-width:var(--ibiz-extend-menu-button-item-horizontal-min-width)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--seperator{width:auto;margin:var(--ibiz-extend-menu-button-item-horizontal-separator-margin)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--seperator+.ibiz-extend-menu-button__content--item{margin-left:0}.ibiz-extend-menu-button__content.is-vertical{flex-direction:column}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--item{margin:var(--ibiz-extend-menu-button-item-vertical-margin)}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--item:first-child{margin-top:0}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--seperator{margin:var(--ibiz-extend-menu-button-item-vertical-separator-margin)}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--seperator+.ibiz-extend-menu-button__content--item{margin-top:0}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__menuitem{justify-content:flex-start}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__rawitem{justify-content:flex-start}.ibiz-extend-menu-button__content .el-button{--ibiz-color-primary-hover:var(--ibiz-extend-menu-button-active-bg-color);--ibiz-color-primary-hover-text:var(--ibiz-extend-menu-button-active-color);--ibiz-color-primary-active:var(--ibiz-extend-menu-button-hover-bg-color);--ibiz-color-primary-active-text:var(--ibiz-extend-menu-button-hover-color)}.ibiz-extend-menu-button__content .el-button:focus{background-color:var(--ibiz-color-primary-active)}.ibiz-extend-menu-button__content .el-button:hover{background-color:var(--ibiz-color-primary-hover)}.ibiz-extend-menu-button.is-vertical{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-tight) 0}.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content,.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button-cascader-popover{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:20px;--ibiz-extend-menu-button-icon-height:20px;--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;--ibiz-extend-menu-button-popover-padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-popover-min-width:200px;--ibiz-extend-menu-button-popover-z-index:3;--ibiz-extend-menu-button-popover-background:var(--ibiz-color-primary);--ibiz-extend-menu-button-content-padding:0;--ibiz-extend-menu-button-item-vertical-margin:0;z-index:var(--ibiz-extend-menu-button-popover-z-index);width:auto;padding:var(--ibiz-extend-menu-button-popover-padding);background-color:var(--ibiz-extend-menu-button-popover-background);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content{min-width:var(--ibiz-extend-menu-button-popover-min-width)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__separator--horizontal{border-color:var(--ibiz-color-scroll-menu)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content,.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button-border-popover{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:20px;--ibiz-extend-menu-button-icon-height:20px;--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;--ibiz-extend-menu-button-popover-padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-popover-min-width:200px;--ibiz-extend-menu-button-popover-z-index:3;--ibiz-extend-menu-button-popover-background:var(--ibiz-color-primary);--ibiz-extend-menu-button-content-padding:0;--ibiz-extend-menu-button-item-vertical-margin:0;z-index:var(--ibiz-extend-menu-button-popover-z-index);width:auto;padding:var(--ibiz-extend-menu-button-popover-padding);background-color:var(--ibiz-extend-menu-button-popover-background);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content{min-width:var(--ibiz-extend-menu-button-popover-min-width)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__separator--horizontal{border-color:var(--ibiz-color-scroll-menu)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content,.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item-arrow{transform:translateY(-50%) rotate(90deg)}.ibiz-extend-menu-button-placehold{--ibiz-extend-menu-button-placehold-z-index:3;position:fixed;z-index:var(--ibiz-extend-menu-button-placehold-z-index);display:flex;align-items:center;justify-content:center;cursor:pointer}.ibiz-extend-menu-button-placehold__line{position:absolute}.ibiz-extend-menu-button-placehold__arrow{color:var(--ibiz-color-text-2)}.ibiz-extend-menu-button-placehold.is-left .ibiz-extend-menu-button-placehold__line{top:0;left:0;width:1px;height:100%}.ibiz-extend-menu-button-placehold.is-right .ibiz-extend-menu-button-placehold__line{top:0;right:0;width:1px;height:100%}.ibiz-extend-menu-button-placehold.is-right svg{transform:rotate(180deg)}.ibiz-extend-menu-button-placehold.is-top .ibiz-extend-menu-button-placehold__line{top:0;left:0;width:100%;height:1px}.ibiz-extend-menu-button-placehold.is-top svg{transform:rotate(90deg)}.ibiz-extend-menu-button-placehold.is-bottom .ibiz-extend-menu-button-placehold__line{bottom:0;left:0;width:100%;height:1px}.ibiz-extend-menu-button-placehold.is-bottom svg{transform:rotate(-90deg)}