ele-admin-plus 1.1.3 → 1.1.4-beta.2

package/es/ele-icon-select/props.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { StyleValue, ElEmptyProps } from '../ele-app/types';
+import type { ElEmptyProps } from '../ele-app/types';
 import type { EleTooltipProps } from '../ele-avatar-group/types';
 import type { IconItem } from './types';
 /**
@@ -55,13 +55,13 @@ export declare const iconSelectProps: {
         default: boolean;
     };
     tooltipProps: PropType<EleTooltipProps>;
-    headerStyle: PropType<StyleValue>;
-    tabsStyle: PropType<StyleValue>;
-    searchStyle: PropType<StyleValue>;
-    menusStyle: PropType<StyleValue>;
-    bodyStyle: PropType<StyleValue>;
-    gridStyle: PropType<StyleValue>;
-    itemStyle: PropType<StyleValue>;
+    headerStyle: PropType<Partial<import("vue").CSSProperties>>;
+    tabsStyle: PropType<Partial<import("vue").CSSProperties>>;
+    searchStyle: PropType<Partial<import("vue").CSSProperties>>;
+    menusStyle: PropType<Partial<import("vue").CSSProperties>>;
+    bodyStyle: PropType<Partial<import("vue").CSSProperties>>;
+    gridStyle: PropType<Partial<import("vue").CSSProperties>>;
+    itemStyle: PropType<Partial<import("vue").CSSProperties>>;
     responsive: {
         type: BooleanConstructor;
         default: null;

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

@@ -1,14 +1,39 @@
+import { ComponentProps } from '../ele-app/types';
+import type { CircleProps } from './types';
 declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     text: StringConstructor;
     background: StringConstructor;
     spinner: StringConstructor;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    svgViewBox: StringConstructor;
+    type: {
+        type: import("vue").PropType<import("./types").LoadingType>;
+        default: string;
+    };
+    blur: BooleanConstructor;
+    size: import("vue").PropType<import("./types").LoadingSize>;
+    spinnerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    textStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+}, {
+    isCircle: import("vue").ComputedRef<boolean>;
+    rootProps: import("vue").ComputedRef<ComponentProps<CircleProps>>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     text: StringConstructor;
     background: StringConstructor;
     spinner: StringConstructor;
+    svgViewBox: StringConstructor;
+    type: {
+        type: import("vue").PropType<import("./types").LoadingType>;
+        default: string;
+    };
+    blur: BooleanConstructor;
+    size: import("vue").PropType<import("./types").LoadingSize>;
+    spinnerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
+    textStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }>>, {
+    type: import("./types").LoadingType;
     loading: boolean;
+    blur: boolean;
 }, {}>;
 export default _default;

package/es/ele-loading/index.js

@@ -1,12 +1,32 @@
-import { defineComponent, resolveDirective, withDirectives, openBlock, createElementBlock, renderSlot } from "vue";
+import { defineComponent, computed, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, normalizeStyle, normalizeClass, toDisplayString, createCommentVNode, vShow, createElementVNode } from "vue";
 import { vLoading } from "element-plus";
+import { useLicense } from "../ele-config-provider/receiver";
 import { loadingProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleLoading",
   directives: {
     loading: vLoading
   },
-  props: loadingProps
+  props: loadingProps,
+  setup(props) {
+    const { authenticated } = useLicense();
+    const isCircle = computed(() => {
+      return !authenticated.value || props.type === "circle";
+    });
+    const rootProps = computed(() => {
+      const obj = {
+        class: ["ele-loading", { "ele-loading-show": props.loading }]
+      };
+      if (isCircle.value) {
+        obj["element-loading-text"] = props.text;
+        obj["element-loading-background"] = props.background;
+        obj["element-loading-spinner"] = props.spinner;
+        obj["element-loading-svg-view-box"] = props.svgViewBox;
+      }
+      return obj;
+    });
+    return { isCircle, rootProps };
+  }
 });
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -15,17 +35,39 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = ["element-loading-text", "element-loading-background", "element-loading-spinner"];
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "ele-loading-dot" }, [
+  /* @__PURE__ */ createElementVNode("i"),
+  /* @__PURE__ */ createElementVNode("i"),
+  /* @__PURE__ */ createElementVNode("i"),
+  /* @__PURE__ */ createElementVNode("i")
+], -1);
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_loading = resolveDirective("loading");
-  return withDirectives((openBlock(), createElementBlock("div", {
-    "element-loading-text": _ctx.text,
-    "element-loading-background": _ctx.background,
-    "element-loading-spinner": _ctx.spinner
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1)), [
-    [_directive_loading, _ctx.loading]
+  return withDirectives((openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(_ctx.rootProps)), [
+    renderSlot(_ctx.$slots, "default"),
+    !_ctx.isCircle ? withDirectives((openBlock(), createElementBlock("div", {
+      key: 0,
+      style: normalizeStyle(_ctx.spinnerStyle),
+      class: normalizeClass([
+        "ele-loading-spinner",
+        { "ele-loading-blur": _ctx.blur },
+        { "ele-loading-small": _ctx.size === "small" },
+        { "ele-loading-large": _ctx.size === "large" }
+      ])
+    }, [
+      renderSlot(_ctx.$slots, "spinner", {}, () => [
+        _hoisted_1
+      ]),
+      _ctx.text ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "ele-loading-text",
+        style: normalizeStyle(_ctx.textStyle)
+      }, toDisplayString(_ctx.text), 5)) : createCommentVNode("", true)
+    ], 6)), [
+      [vShow, _ctx.loading]
+    ]) : createCommentVNode("", true)
+  ], 16)), [
+    [_directive_loading, _ctx.isCircle && _ctx.loading]
   ]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

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

@@ -1,4 +1,5 @@
-import type { ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { LoadingType, LoadingSize } from './types';
 /**
  * 属性
  */
@@ -7,5 +8,14 @@ export declare const loadingProps: {
     text: StringConstructor;
     background: StringConstructor;
     spinner: StringConstructor;
+    svgViewBox: StringConstructor;
+    type: {
+        type: PropType<LoadingType>;
+        default: string;
+    };
+    blur: BooleanConstructor;
+    size: PropType<LoadingSize>;
+    spinnerStyle: PropType<Partial<import("vue").CSSProperties>>;
+    textStyle: PropType<Partial<import("vue").CSSProperties>>;
 };
 export type LoadingProps = ExtractPropTypes<typeof loadingProps>;

package/es/ele-loading/props.js

@@ -6,7 +6,22 @@ const loadingProps = {
   // 背景遮罩的颜色
   background: String,
   // 自定义加载图标
-  spinner: String
+  spinner: String,
+  // 自定义加载图标svg的view-box
+  svgViewBox: String,
+  // 加载器类型
+  type: {
+    type: String,
+    default: "dot"
+  },
+  // 背景模糊效果
+  blur: Boolean,
+  // 加载器尺寸
+  size: String,
+  // 自定义加载器样式
+  spinnerStyle: Object,
+  // 自定义文本样式
+  textStyle: Object
 };
 export {
   loadingProps

package/es/ele-loading/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/util.scss' as *;
+
+@mixin set-loading-var($var) {
+  .ele-loading {
+    @include set-ele-var('loading', $var);
+  }
+}

package/es/ele-loading/style/index.js

@@ -1 +1,2 @@
 import 'element-plus/es/components/loading/style/index';
+import './index.scss';

package/es/ele-loading/style/index.scss

@@ -0,0 +1,90 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-loading-var($ele);
+
+.ele-loading {
+  box-sizing: border-box;
+}
+
+.ele-loading-show {
+  position: relative;
+}
+
+.ele-loading-spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: eleVar('loading', 'bg');
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: eleVar('loading', 'index');
+}
+
+/* 模糊背景 */
+.ele-loading-blur {
+  backdrop-filter: blur(2px);
+}
+
+/* 文本 */
+.ele-loading-text {
+  color: elVar('color-primary');
+  font-size: elVar('font-size', 'base');
+  margin-top: 10px;
+  text-align: center;
+}
+
+/* 圆点风格 */
+.ele-loading-dot {
+  width: eleVar('loading', 'size');
+  height: eleVar('loading', 'size');
+  display: grid;
+  grid-gap: eleVar('loading', 'space');
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  transform: rotate(45deg);
+  animation: eleloadingRotate 1.2s infinite linear;
+
+  & > i {
+    background: elVar('color-primary');
+    border-radius: 50%;
+
+    &:nth-child(2) {
+      background: elVar('color-primary', 'light-3');
+    }
+
+    &:nth-child(3) {
+      background: elVar('color-primary', 'light-7');
+    }
+
+    &:nth-child(4) {
+      background: elVar('color-primary', 'light-8');
+    }
+  }
+}
+
+@keyframes eleloadingRotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+/* 小型尺寸 */
+.ele-loading-small .ele-loading-dot {
+  width: eleVar('loading', 'sm-size');
+  height: eleVar('loading', 'sm-size');
+  grid-gap: eleVar('loading', 'sm-space');
+}
+
+/* 大型尺寸 */
+.ele-loading-large .ele-loading-dot {
+  width: eleVar('loading', 'lg-size');
+  height: eleVar('loading', 'lg-size');
+  grid-gap: eleVar('loading', 'lg-space');
+}

package/es/ele-loading/types/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 加载器类型
+ */
+export type LoadingType = 'circle' | 'dot';
+/**
+ * 加载器尺寸
+ */
+export type LoadingSize = 'small' | 'default' | 'large';
+/**
+ * 圆形加载器属性
+ */
+export interface CircleProps {
+    ['element-loading-text']?: string;
+    ['element-loading-background']?: string;
+    ['element-loading-spinner']?: string;
+    ['element-loading-svg-view-box']?: string;
+}

package/es/ele-map-picker/components/map-view.d.ts

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
-    headerStyle: import("vue").PropType<import("../../ele-app/types").StyleValue>;
+    headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }, {
     mapRef: import("vue").Ref<HTMLDivElement | null>;
     loading: import("vue").Ref<boolean>;
@@ -168,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
-    headerStyle: import("vue").PropType<import("../../ele-app/types").StyleValue>;
+    headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }>> & {
     onDone?: ((_result: CenterPoint) => any) | undefined;
     onMapDone?: ((_ins: any) => any) | undefined;

package/es/ele-map-picker/index.d.ts

@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<{
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: import("vue").PropType<import("../ele-app/types").ElEmptyProps>;
-    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }, {
     mapRef: Ref<MapViewInstance>;
     lang: import("vue").ComputedRef<MapLocale>;
@@ -143,7 +143,7 @@ declare const _default: import("vue").DefineComponent<{
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: import("vue").PropType<import("../ele-app/types").ElEmptyProps>;
-    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }>> & {
     "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;

package/es/ele-map-picker/props.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { StyleValue, ElEmptyProps } from '../ele-app/types';
+import type { ElEmptyProps } from '../ele-app/types';
 import type { ModalProps } from '../ele-modal/props';
 import type { MapLocale, CenterPoint } from './types';
 /**
@@ -60,7 +60,7 @@ export declare const mapProps: {
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: PropType<ElEmptyProps>;
-    headerStyle: PropType<StyleValue>;
+    headerStyle: PropType<Partial<import("vue").CSSProperties>>;
 };
 export declare const mapPickerProps: {
     modelValue: BooleanConstructor;
@@ -124,7 +124,7 @@ export declare const mapPickerProps: {
     darkMode: BooleanConstructor;
     okText: StringConstructor;
     emptyProps: PropType<ElEmptyProps>;
-    headerStyle: PropType<StyleValue>;
+    headerStyle: PropType<Partial<import("vue").CSSProperties>>;
 };
 export type MapPickerProps = ExtractPropTypes<typeof mapPickerProps>;
 export type MapProps = ExtractPropTypes<typeof mapProps>;

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

@@ -37,6 +37,7 @@ declare const _default: import("vue").DefineComponent<{
     open: (index: string) => void;
     close: (index: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    itemClick: (_item: import("./types").MenuItem) => boolean;
     close: (index: string, indexPath: string[]) => boolean;
     open: (index: string, indexPath: string[]) => boolean;
     select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => boolean;
@@ -75,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
     onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
     onClose?: ((index: string, indexPath: string[]) => any) | undefined;
+    onItemClick?: ((_item: import("./types").MenuItem) => any) | undefined;
 }, {
     mode: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
     defaultActive: string;

package/es/ele-menus/index.js

@@ -1,14 +1,14 @@
 import { defineComponent, ref, computed, onMounted, watch, h } from "vue";
-import { menuEmits, ElMenu, ElSubMenu, ElIcon } from "element-plus";
+import { ElMenu, ElSubMenu, ElIcon } from "element-plus";
 import { useLicense } from "../ele-config-provider/receiver";
 import { pick } from "../utils/core";
 import { EllipsisOutlined } from "../icons";
 import { useMenuEllipsis, getMenuItems, renderItems, getPopperClass, ellipsisClass } from "./util";
-import { menusProps, menuPropKeys } from "./props";
+import { menusProps, menusEmits, menuPropKeys } from "./props";
 const index = defineComponent({
   name: "EleMenus",
   props: menusProps,
-  emits: menuEmits,
+  emits: menusEmits,
   setup(props, { slots, emit, expose }) {
     const { authenticated } = useLicense();
     const menuRef = ref(null);
@@ -56,6 +56,9 @@ const index = defineComponent({
         }
       }
     );
+    const onItemClick = (item) => {
+      emit("itemClick", item);
+    };
     const exposeValue = {
       menuRef,
       open: (index2) => {
@@ -108,7 +111,8 @@ const index = defineComponent({
             props.colorful,
             props.popupColorful,
             props.firstPopperClass,
-            true
+            true,
+            onItemClick
           );
           if (moreItems) {
             const ellipsisProps = props.ellipsisProps || {};
@@ -144,7 +148,9 @@ const index = defineComponent({
                       props.popupTheme,
                       props.colorful,
                       props.popupColorful,
-                      props.firstPopperClass
+                      props.firstPopperClass,
+                      false,
+                      onItemClick
                     );
                   },
                   title: () => {

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

@@ -42,3 +42,13 @@ export type MenuPropKeys = Array<keyof typeof menuProps>;
  * 菜单组件属性名
  */
 export declare const menuPropKeys: MenuPropKeys;
+/**
+ * 事件
+ */
+export declare const menusEmits: {
+    /** 菜单项点击事件 */
+    itemClick: (_item: MenuItem) => boolean;
+    close: (index: string, indexPath: string[]) => boolean;
+    open: (index: string, indexPath: string[]) => boolean;
+    select: (index: string, indexPath: string[], item: import("element-plus").MenuItemClicked, routerResult?: Promise<void | import("vue-router").NavigationFailure> | undefined) => boolean;
+};

package/es/ele-menus/props.js

@@ -1,4 +1,4 @@
-import { menuProps } from "element-plus";
+import { menuProps, menuEmits } from "element-plus";
 const menusProps = {
   ...menuProps,
   // 菜单数据
@@ -28,7 +28,13 @@ const menusProps = {
   ellipsisProps: Object
 };
 const menuPropKeys = Object.keys(menuProps);
+const menusEmits = {
+  ...menuEmits,
+  /** 菜单项点击事件 */
+  itemClick: (_item) => true
+};
 export {
   menuPropKeys,
+  menusEmits,
   menusProps
 };

package/es/ele-menus/style/index.scss

@@ -704,23 +704,23 @@
   }
 }
 
-// 兼容横向菜单溢出的菜单
-/* .el-popper > .el-menu--popup-container {
-  display: block;
-  border: none;
-}
+// Tooltip
+.el-popper.is-dark > .ele-menu-title {
+  position: static;
 
-.el-menu--popup-container > .el-menu--popup {
-  background: none;
-  box-shadow: none;
-  border-radius: 0;
-  max-height: calc(100vh - 10px);
-  overflow-y: auto;
-  overflow-y: overlay;
-}
+  &::before {
+    content: '';
+    background: eleVar('tooltip', 'bg');
+    border-radius: eleVar('tooltip', 'radius');
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
 
-.el-menu--popup > .el-menu-item > .el-badge,
-.el-menu--popup > .el-sub-menu > .el-sub-menu__title > .el-badge {
-  order: 3;
-  line-height: 1;
-} */
+  & + .el-popper__arrow {
+    z-index: -2;
+  }
+}

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

@@ -61,6 +61,10 @@ export interface MenuResult {
     /** 省略的菜单数据 */
     moreItems?: MenuItem[];
 }
+/**
+ * 菜单项点击事件
+ */
+export type ItemClick = (item: MenuItem) => void;
 /**
  * 菜单省略计算参数
  */

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

@@ -1,13 +1,14 @@
 import type { VNode, Slot } from 'vue';
-import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption } from './types';
+import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption, ItemClick } from './types';
 export declare const linkClass = "ele-menu-link";
+export declare const titleClass = "ele-menu-title";
 export declare const overflowClass = "ele-menu-overflow";
 export declare const ellipsisClass = "ele-sub-menu-ellipsis";
 /**
  * 生成菜单链接节点
  * @param path 链接地址
  */
-export declare function getLinkNode(path?: string): VNode | undefined;
+export declare function getLinkNode(item: MenuItem, onItemClick?: ItemClick): VNode | undefined;
 /**
  * 生成菜单内容节点
  * @param icons 图标节点
@@ -29,7 +30,7 @@ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNod
  * @param firstPopClass 第一级气泡菜单类名
  * @param first 是否是第一级菜单
  */
-export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean): VNode[];
+export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: ItemClick): VNode[];
 /**
  * 生成菜单数据
  * @param items 菜单数据

package/es/ele-menus/util.js

@@ -4,21 +4,25 @@ import { ElIcon, ElBadge, ElMenuItem, ElMenuItemGroup, ElSubMenu } from "element
 import { isExternalLink, getCurrentStyle, debounce } from "../utils/core";
 import { ArrowDown, ArrowRight } from "../icons";
 const linkClass = "ele-menu-link";
+const titleClass = "ele-menu-title";
 const overflowClass = "ele-menu-overflow";
 const ellipsisClass = "ele-sub-menu-ellipsis";
-function getLinkNode(path) {
-  if (!path) {
+function getLinkNode(item, onItemClick) {
+  if (!(item == null ? void 0 : item.path)) {
     return;
   }
-  if (isExternalLink(path)) {
+  if (isExternalLink(item.path)) {
     return h("a", {
-      href: path,
+      href: item.path,
       target: "_blank",
       class: linkClass,
-      onClick: (e) => e.stopPropagation()
+      onClick: (e) => {
+        e.stopPropagation();
+        onItemClick && onItemClick(item);
+      }
     });
   }
-  return h(RouterLink, { to: path, class: linkClass });
+  return h(RouterLink, { to: item.path, class: linkClass });
 }
 function getNodes(icons, titles, badge, link) {
   const nodes = [];
@@ -40,7 +44,7 @@ function getNodes(icons, titles, badge, link) {
   }
   return nodes;
 }
-function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first) {
+function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick) {
   const nodes = [];
   if (!items) {
     return nodes;
@@ -57,11 +61,11 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
     }
     const tNodes = sTitle ? sTitle({ item, title: item.title }) ?? [] : [];
     if (!tNodes.length && item.title) {
-      tNodes.push(h("span", item.title));
+      tNodes.push(h("span", { class: titleClass }, item.title));
     }
     const bNode = item.badge != null ? h(ElBadge, item.badge) : null;
     if (!((_a = item.children) == null ? void 0 : _a.length)) {
-      const linkNode = getLinkNode(item.path);
+      const linkNode = getLinkNode(item, onItemClick);
       const key = item.key || item.index || item.path;
       nodes.push(
         h(
@@ -71,7 +75,10 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
             index: item.index,
             route: item.route,
             disabled: item.disabled,
-            class: item.overflow ? overflowClass : void 0
+            class: item.overflow ? overflowClass : void 0,
+            onClick: () => {
+              onItemClick && onItemClick(item);
+            }
           },
           {
             default: () => {
@@ -103,7 +110,8 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
                 colorful,
                 popupColorful,
                 firstPopClass,
-                first
+                first,
+                onItemClick
               );
             },
             title: () => getNodes(iNodes, tNodes, bNode)
@@ -154,7 +162,9 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
               popTheme,
               colorful,
               popupColorful,
-              firstPopClass
+              firstPopClass,
+              false,
+              onItemClick
             );
           },
           title: () => getNodes(iNodes, tNodes, bNode)
@@ -299,5 +309,6 @@ export {
   linkClass,
   overflowClass,
   renderItems,
+  titleClass,
   useMenuEllipsis
 };