ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/ele-menus/components/menu-items.js

@@ -34,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     webkit: Boolean
   },
   emits: {
-    itemClick: (_item, _e) => true,
+    itemClick: (_item, _e, _type) => true,
     itemMouseenter: (_item, _e) => true,
     itemMouseleave: (_item, _e) => true,
     parentMouseenter: (_item, _e) => true,
@@ -44,8 +44,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const handleMenuItemClick = () => {
     };
-    const handleItemClick = (item, e) => {
-      emit("itemClick", item, e);
+    const handleItemClick = (item, e, type) => {
+      emit("itemClick", item, e, type);
+    };
+    const handleParentClick = (item, e) => {
+      handleItemClick(item, e, "parent");
+    };
+    const handleGroupClick = (item, e) => {
+      handleItemClick(item, e, "group");
     };
     const handleItemMouseenter = (item, e) => {
       emit("itemMouseenter", item, e);
@@ -67,7 +73,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             ref_for: true
           }, unref(pick)(item, ["route", "disabled", "class", "style"]), {
-            key: (item.key || item.index || item.path) + "-" + __props.tipDisabled,
+            key: `${item.key || item.index || item.path}-${__props.tipDisabled}`,
             index: item.index || item.path,
             class: [{ "ele-menu-overflow": item.overflow }],
             onClick: handleMenuItemClick
@@ -113,6 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             title: withCtx(() => [
               createVNode(ItemTitle, {
                 item,
+                onItemClick: handleGroupClick,
                 onItemMouseenter: handleParentMouseenter,
                 onItemMouseleave: handleParentMouseleave
               }, createSlots({ _: 2 }, [
@@ -192,6 +199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             title: withCtx(() => [
               createVNode(ItemTitle, {
                 item,
+                onItemClick: handleParentClick,
                 onItemMouseenter: handleParentMouseenter,
                 onItemMouseleave: handleParentMouseleave
               }, createSlots({ _: 2 }, [

package/es/ele-menus/index.d.ts

@@ -131,7 +131,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => void;
     close: (index: string, indexPath: string[]) => void;
     open: (index: string, indexPath: string[]) => void;
-    itemClick: (_item: MenuItem, _e: MouseEvent) => void;
+    itemClick: (_item: MenuItem, _e: MouseEvent, _type?: import('./types').MenuItemClickType) => void;
     itemMouseenter: (_item: MenuItem, _e: MouseEvent) => void;
     itemMouseleave: (_item: MenuItem, _e: MouseEvent) => void;
     parentMouseenter: (_item: MenuItem, _e: MouseEvent) => void;
@@ -256,7 +256,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
     onClose?: ((index: string, indexPath: string[]) => any) | undefined;
     onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
-    onItemClick?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
+    onItemClick?: ((_item: MenuItem, _e: MouseEvent, _type?: import('./types').MenuItemClickType) => any) | undefined;
     onItemMouseenter?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
     onItemMouseleave?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;
     onParentMouseenter?: ((_item: MenuItem, _e: MouseEvent) => any) | undefined;

package/es/ele-menus/index.js

@@ -12,10 +12,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: menusProps,
   emits: menusEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
-    var _a, _b;
     const props = __props;
     const emit = __emit;
-    const isWebkit = (_b = (_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, "WebKit");
+    const isWebkit = navigator?.userAgent?.includes?.("WebKit");
     const menuRef = ref(null);
     const ellipsisRef = ref(null);
     const sliceIndex = ref(-1);
@@ -51,12 +50,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tooltipVisible.value = false;
     };
     const triggerTooltip = (e) => {
-      var _a2;
       if (props.textEllipsisTooltip) {
-        const itemEl = (_a2 = e.currentTarget) == null ? void 0 : _a2.parentNode;
+        const itemEl = e.currentTarget?.parentNode;
         if (itemEl) {
           const titleEl = itemEl.querySelector(".ele-menu-title");
-          const text = titleEl == null ? void 0 : titleEl.innerText;
+          const text = titleEl?.innerText;
           if (text && contentIsEllipsis(titleEl, "horizontal")) {
             tooltipVirtualRef.value = itemEl;
             tooltipContent.value = text;
@@ -76,8 +74,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleSelect = (index, indexPath, item, routerResult) => {
       emit("select", index, indexPath, item, routerResult);
     };
-    const handleItemClick = (item, e) => {
-      emit("itemClick", item, e);
+    const handleItemClick = (item, e, type) => {
+      emit("itemClick", item, e, type);
     };
     const handleItemMouseenter = (item, e) => {
       triggerTooltip(e);
@@ -96,8 +94,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("parentMouseleave", item, e);
     };
     const scrollToActive = () => {
-      var _a2;
-      const menuEl = (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+      const menuEl = menuRef.value?.$el;
       if (menuEl) {
         const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
         if (el) {
@@ -110,14 +107,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const { observe, unobserve, computedEllipsis } = useMenuEllipsis({
-      getMenuEl: () => {
-        var _a2;
-        return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
-      },
-      getMoreEl: () => {
-        var _a2;
-        return (_a2 = ellipsisRef.value) == null ? void 0 : _a2.$el;
-      },
+      getMenuEl: () => menuRef.value?.$el,
+      getMoreEl: () => ellipsisRef.value?.$el,
       onEllipsis: (index) => {
         if (sliceIndex.value !== index) {
           sliceIndex.value = index;
@@ -125,8 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     onMounted(() => {
-      var _a2;
-      if (props.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+      if (props.ellipsis && isHorizontal.value && menuRef.value?.$el) {
         computedEllipsis();
         observe();
       }
@@ -135,15 +125,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       [
         () => props.ellipsis,
         isHorizontal,
-        () => {
-          var _a2;
-          return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
-        },
+        () => menuRef.value?.$el,
         () => props.items
       ],
       () => {
-        var _a2;
-        if (props.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+        if (props.ellipsis && isHorizontal.value && menuRef.value?.$el) {
           observe();
           return;
         }
@@ -182,138 +168,128 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ellipsis: false,
         mode: isCompact.value ? "vertical" : _ctx.mode,
         collapse: isCompact.value ? true : _ctx.collapse,
-        class: [
-          "ele-menu",
+        class: ["ele-menu", [
           { "ele-menu-dark": _ctx.theme === "dark" },
           { "is-night": _ctx.theme === "dark" },
           { "ele-menu-colorful": _ctx.colorful },
           { "is-colorful": _ctx.colorful },
           { "is-compact": isCompact.value },
           { "is-compact-collapse": isCompact.value && _ctx.collapse }
-        ],
+        ]],
         onOpen: handleOpen,
         onClose: handleClose,
         onSelect: handleSelect
       }), {
-        default: withCtx(() => {
-          var _a2;
-          return [
-            menuItems.value && menuItems.value.length ? (openBlock(), createBlock(MenuItems, {
-              key: 0,
-              items: menuItems.value,
-              first: true,
-              tipDisabled: collapseTooltipDisabled.value,
-              parentIsGroup: false,
-              theme: _ctx.theme,
-              popTheme: _ctx.popupTheme,
-              colorful: _ctx.colorful,
-              popupColorful: _ctx.popupColorful,
-              firstPopClass: _ctx.firstPopperClass,
-              webkit: unref(isWebkit),
-              onItemClick: handleItemClick,
-              onItemMouseenter: handleItemMouseenter,
-              onItemMouseleave: handleItemMouseleave,
-              onParentMouseenter: handleParentMouseenter,
-              onParentMouseleave: handleParentMouseleave
-            }, createSlots({ _: 2 }, [
-              renderList(Object.keys(_ctx.$slots), (name) => {
-                return {
-                  name,
-                  fn: withCtx((slotProps) => [
-                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-                  ])
-                };
-              })
-            ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit"])) : createCommentVNode("", true),
-            moreMenuItems.value && moreMenuItems.value.length ? (openBlock(), createBlock(unref(ElSubMenu), mergeProps({
-              key: "sub-menu-more",
-              teleported: true
-            }, _ctx.ellipsisProps || {}, {
-              ref_key: "ellipsisRef",
-              ref: ellipsisRef,
-              index: "sub-menu-more",
-              popperClass: unref(getPopperClass)(
-                (_a2 = _ctx.ellipsisProps) == null ? void 0 : _a2.popperClass,
-                _ctx.theme,
-                _ctx.popupTheme,
-                _ctx.colorful,
-                _ctx.popupColorful,
-                _ctx.firstPopperClass,
-                true,
-                unref(isWebkit)
-              ),
-              class: "ele-sub-menu-ellipsis"
-            }), {
-              title: withCtx(() => {
-                var _a3;
-                return [
-                  createVNode(unref(ElIcon), normalizeProps(guardReactiveProps(((_a3 = _ctx.ellipsisProps) == null ? void 0 : _a3.iconProps) || {})), {
-                    default: withCtx(() => {
-                      var _a4, _b2;
-                      return [
-                        (openBlock(), createBlock(resolveDynamicComponent(((_a4 = _ctx.ellipsisProps) == null ? void 0 : _a4.icon) ?? unref(EllipsisOutlined)), {
-                          style: normalizeStyle((_b2 = _ctx.ellipsisProps) == null ? void 0 : _b2.iconStyle)
-                        }, null, 8, ["style"]))
-                      ];
-                    }),
-                    _: 1
-                  }, 16)
-                ];
-              }),
-              default: withCtx(() => [
-                createVNode(MenuItems, {
-                  items: moreMenuItems.value,
-                  first: false,
-                  tipDisabled: collapseTooltipDisabled.value,
-                  parentIsGroup: false,
-                  theme: _ctx.theme,
-                  popTheme: _ctx.popupTheme,
-                  colorful: _ctx.colorful,
-                  popupColorful: _ctx.popupColorful,
-                  firstPopClass: _ctx.firstPopperClass,
-                  webkit: unref(isWebkit),
-                  onItemClick: handleItemClick,
-                  onItemMouseenter: handleItemMouseenter,
-                  onItemMouseleave: handleItemMouseleave,
-                  onParentMouseenter: handleParentMouseenter,
-                  onParentMouseleave: handleParentMouseleave
-                }, createSlots({ _: 2 }, [
-                  renderList(Object.keys(_ctx.$slots), (name) => {
-                    return {
-                      name,
-                      fn: withCtx((slotProps) => [
-                        renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-                      ])
-                    };
-                  })
-                ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit"])
-              ]),
-              _: 3
-            }, 16, ["popperClass"])) : createCommentVNode("", true),
-            _ctx.textEllipsisTooltip ? (openBlock(), createBlock(EleTooltip, mergeProps({
-              key: 2,
-              trigger: "click",
-              placement: "right",
-              fallbackPlacements: [
-                "top-end",
-                "top",
-                "top-start",
-                "bottom-end",
-                "bottom",
-                "bottom-start",
-                "left"
-              ],
-              persistent: false,
-              enterable: false,
-              triggerKeys: []
-            }, _ctx.textEllipsisTooltip === true ? {} : _ctx.textEllipsisTooltip, {
-              virtualTriggering: true,
-              virtualRef: tooltipVirtualRef.value,
-              content: tooltipContent.value,
-              visible: tooltipVisible.value
-            }), null, 16, ["virtualRef", "content", "visible"])) : createCommentVNode("", true)
-          ];
-        }),
+        default: withCtx(() => [
+          menuItems.value && menuItems.value.length ? (openBlock(), createBlock(MenuItems, {
+            key: 0,
+            items: menuItems.value,
+            first: true,
+            tipDisabled: collapseTooltipDisabled.value,
+            parentIsGroup: false,
+            theme: _ctx.theme,
+            popTheme: _ctx.popupTheme,
+            colorful: _ctx.colorful,
+            popupColorful: _ctx.popupColorful,
+            firstPopClass: _ctx.firstPopperClass,
+            webkit: unref(isWebkit),
+            onItemClick: handleItemClick,
+            onItemMouseenter: handleItemMouseenter,
+            onItemMouseleave: handleItemMouseleave,
+            onParentMouseenter: handleParentMouseenter,
+            onParentMouseleave: handleParentMouseleave
+          }, createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit"])) : createCommentVNode("", true),
+          moreMenuItems.value && moreMenuItems.value.length ? (openBlock(), createBlock(unref(ElSubMenu), mergeProps({
+            key: "sub-menu-more",
+            teleported: true
+          }, _ctx.ellipsisProps || {}, {
+            ref_key: "ellipsisRef",
+            ref: ellipsisRef,
+            index: "sub-menu-more",
+            popperClass: unref(getPopperClass)(
+              _ctx.ellipsisProps?.popperClass,
+              _ctx.theme,
+              _ctx.popupTheme,
+              _ctx.colorful,
+              _ctx.popupColorful,
+              _ctx.firstPopperClass,
+              true,
+              unref(isWebkit)
+            ),
+            class: "ele-sub-menu-ellipsis"
+          }), {
+            title: withCtx(() => [
+              createVNode(unref(ElIcon), normalizeProps(guardReactiveProps(_ctx.ellipsisProps?.iconProps || {})), {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.ellipsisProps?.icon ?? unref(EllipsisOutlined)), {
+                    style: normalizeStyle(_ctx.ellipsisProps?.iconStyle)
+                  }, null, 8, ["style"]))
+                ]),
+                _: 1
+              }, 16)
+            ]),
+            default: withCtx(() => [
+              createVNode(MenuItems, {
+                items: moreMenuItems.value,
+                first: false,
+                tipDisabled: collapseTooltipDisabled.value,
+                parentIsGroup: false,
+                theme: _ctx.theme,
+                popTheme: _ctx.popupTheme,
+                colorful: _ctx.colorful,
+                popupColorful: _ctx.popupColorful,
+                firstPopClass: _ctx.firstPopperClass,
+                webkit: unref(isWebkit),
+                onItemClick: handleItemClick,
+                onItemMouseenter: handleItemMouseenter,
+                onItemMouseleave: handleItemMouseleave,
+                onParentMouseenter: handleParentMouseenter,
+                onParentMouseleave: handleParentMouseleave
+              }, createSlots({ _: 2 }, [
+                renderList(Object.keys(_ctx.$slots), (name) => {
+                  return {
+                    name,
+                    fn: withCtx((slotProps) => [
+                      renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                    ])
+                  };
+                })
+              ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit"])
+            ]),
+            _: 3
+          }, 16, ["popperClass"])) : createCommentVNode("", true),
+          _ctx.textEllipsisTooltip ? (openBlock(), createBlock(EleTooltip, mergeProps({
+            key: 2,
+            trigger: "click",
+            placement: "right",
+            fallbackPlacements: [
+              "top-end",
+              "top",
+              "top-start",
+              "bottom-end",
+              "bottom",
+              "bottom-start",
+              "left"
+            ],
+            persistent: false,
+            enterable: false,
+            triggerKeys: []
+          }, _ctx.textEllipsisTooltip === true ? {} : _ctx.textEllipsisTooltip, {
+            virtualTriggering: true,
+            virtualRef: tooltipVirtualRef.value,
+            content: tooltipContent.value,
+            visible: tooltipVisible.value
+          }), null, 16, ["virtualRef", "content", "visible"])) : createCommentVNode("", true)
+        ]),
         _: 3
       }, 16, ["mode", "collapse", "class"]);
     };

package/es/ele-menus/props.d.ts

@@ -1,6 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import { menuProps } from 'element-plus';
-import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip } from './types';
+import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip, MenuItemClickType } from './types';
 
 /**
  * 属性
@@ -142,7 +142,7 @@ export declare const menuPropKeys: MenuPropKeys;
  */
 export declare const menusEmits: {
     /** 子菜单项点击事件 */
-    itemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    itemClick: (_item: MenuItem, _e: MouseEvent, _type?: MenuItemClickType) => boolean;
     /** 子菜单项鼠标进入事件 */
     itemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
     /** 子菜单项鼠标离开事件 */

package/es/ele-menus/props.js

@@ -34,7 +34,7 @@ const menuPropKeys = Object.keys(menuProps);
 const menusEmits = {
   ...menuEmits,
   /** 子菜单项点击事件 */
-  itemClick: (_item, _e) => true,
+  itemClick: (_item, _e, _type) => true,
   /** 子菜单项鼠标进入事件 */
   itemMouseenter: (_item, _e) => true,
   /** 子菜单项鼠标离开事件 */

package/es/ele-menus/types.d.ts

@@ -61,10 +61,19 @@ export type PopupMenuTheme = 'auto' | MenuTheme;
  */
 export type PopupColorful = 'auto' | boolean;
 
+/**
+ * 菜单项点击事件的菜单项类型
+ */
+export type MenuItemClickType = 'parent' | 'group' | undefined;
+
 /**
  * 子菜单项点击事件
  */
-export type MenuItemEvent = (item: MenuItem, e: MouseEvent) => void;
+export type MenuItemEvent = (
+  item: MenuItem,
+  e: MouseEvent,
+  type?: MenuItemClickType
+) => void;
 
 /**
  * 省略菜单的属性

package/es/ele-menus/util.js

@@ -27,18 +27,17 @@ function getMenuItems(menus, index, horizontal) {
     return { ...d, group: false };
   });
   if (index == null || index < 0 || index >= data.length) {
-    return { items: data, activeIndex: `/item${index}` };
+    return { items: data, activeIndex: `/${index}item` };
   }
   const items = index === 0 ? [] : data.slice(0, index);
   const moreItems = index === 0 ? data : data.slice(index);
   moreItems.forEach((d) => {
-    var _a;
     items.push({
       ...d,
       key: `overflow-${d.key || d.index || d.path}`,
       index: `overflow-${d.index || d.path}`,
       overflow: true,
-      children: ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0
+      children: d.children?.length ? [null] : void 0
     });
   });
   return { items, moreItems };