ele-admin-plus 1.1.9-beta.3 → 1.1.9-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/es/ele-app/el.d.ts +3 -0
  2. package/es/ele-basic-select/index.d.ts +2 -2
  3. package/es/ele-check-card/index.d.ts +1 -1
  4. package/es/ele-drawer/index.d.ts +1 -1
  5. package/es/ele-drawer/style/index.scss +1 -1
  6. package/es/ele-icon-select/index.d.ts +3 -3
  7. package/es/ele-map-picker/index.d.ts +1 -1
  8. package/es/ele-menus/index.d.ts +6 -2
  9. package/es/ele-menus/index.js +17 -4
  10. package/es/ele-menus/props.d.ts +6 -2
  11. package/es/ele-menus/props.js +6 -2
  12. package/es/ele-menus/style/index.scss +12 -11
  13. package/es/ele-menus/types.d.ts +9 -9
  14. package/es/ele-menus/util.d.ts +21 -15
  15. package/es/ele-menus/util.js +92 -83
  16. package/es/ele-modal/style/index.scss +1 -1
  17. package/es/ele-printer/style/index.scss +1 -1
  18. package/es/ele-pro-layout/components/pro-header.d.ts +23 -11
  19. package/es/ele-pro-layout/components/pro-header.js +68 -15
  20. package/es/ele-pro-layout/components/pro-iframe.js +46 -23
  21. package/es/ele-pro-layout/components/pro-sidebar.d.ts +21 -15
  22. package/es/ele-pro-layout/components/pro-sidebar.js +36 -14
  23. package/es/ele-pro-layout/components/pro-sidebox.d.ts +23 -11
  24. package/es/ele-pro-layout/components/pro-sidebox.js +46 -14
  25. package/es/ele-pro-layout/components/tab-dropdown.js +5 -1
  26. package/es/ele-pro-layout/index.d.ts +40 -27
  27. package/es/ele-pro-layout/index.js +269 -52
  28. package/es/ele-pro-layout/props.d.ts +5 -0
  29. package/es/ele-pro-layout/props.js +5 -0
  30. package/es/ele-pro-layout/style/tabs.scss +1 -1
  31. package/es/ele-pro-layout/types.d.ts +29 -3
  32. package/es/ele-segmented/index.d.ts +1 -1
  33. package/es/ele-table-select/index.d.ts +5 -5
  34. package/es/ele-tree-select/index.d.ts +5 -5
  35. package/es/ele-upload-list/components/list-item.d.ts +5 -1
  36. package/es/ele-upload-list/components/list-item.js +7 -4
  37. package/es/ele-upload-list/index.d.ts +10 -6
  38. package/es/ele-upload-list/index.js +7 -5
  39. package/es/ele-upload-list/props.d.ts +6 -2
  40. package/es/ele-upload-list/props.js +5 -1
  41. package/es/ele-virtual-table/components/body-cell.d.ts +1 -1
  42. package/es/ele-virtual-table/index.d.ts +1 -1
  43. package/lib/ele-app/el.d.ts +3 -0
  44. package/lib/ele-basic-select/index.d.ts +2 -2
  45. package/lib/ele-check-card/index.d.ts +1 -1
  46. package/lib/ele-drawer/index.d.ts +1 -1
  47. package/lib/ele-drawer/style/index.scss +1 -1
  48. package/lib/ele-icon-select/index.d.ts +3 -3
  49. package/lib/ele-map-picker/index.d.ts +1 -1
  50. package/lib/ele-menus/index.cjs +17 -4
  51. package/lib/ele-menus/index.d.ts +6 -2
  52. package/lib/ele-menus/props.cjs +6 -2
  53. package/lib/ele-menus/props.d.ts +6 -2
  54. package/lib/ele-menus/style/index.scss +12 -11
  55. package/lib/ele-menus/types.d.ts +9 -9
  56. package/lib/ele-menus/util.cjs +92 -83
  57. package/lib/ele-menus/util.d.ts +21 -15
  58. package/lib/ele-modal/style/index.scss +1 -1
  59. package/lib/ele-printer/style/index.scss +1 -1
  60. package/lib/ele-pro-layout/components/pro-header.cjs +67 -14
  61. package/lib/ele-pro-layout/components/pro-header.d.ts +23 -11
  62. package/lib/ele-pro-layout/components/pro-iframe.cjs +45 -22
  63. package/lib/ele-pro-layout/components/pro-sidebar.cjs +36 -14
  64. package/lib/ele-pro-layout/components/pro-sidebar.d.ts +21 -15
  65. package/lib/ele-pro-layout/components/pro-sidebox.cjs +46 -14
  66. package/lib/ele-pro-layout/components/pro-sidebox.d.ts +23 -11
  67. package/lib/ele-pro-layout/components/tab-dropdown.cjs +5 -1
  68. package/lib/ele-pro-layout/index.cjs +269 -52
  69. package/lib/ele-pro-layout/index.d.ts +40 -27
  70. package/lib/ele-pro-layout/props.cjs +5 -0
  71. package/lib/ele-pro-layout/props.d.ts +5 -0
  72. package/lib/ele-pro-layout/style/tabs.scss +1 -1
  73. package/lib/ele-pro-layout/types.d.ts +29 -3
  74. package/lib/ele-segmented/index.d.ts +1 -1
  75. package/lib/ele-table-select/index.d.ts +5 -5
  76. package/lib/ele-tree-select/index.d.ts +5 -5
  77. package/lib/ele-upload-list/components/list-item.cjs +6 -3
  78. package/lib/ele-upload-list/components/list-item.d.ts +5 -1
  79. package/lib/ele-upload-list/index.cjs +7 -5
  80. package/lib/ele-upload-list/index.d.ts +10 -6
  81. package/lib/ele-upload-list/props.cjs +5 -1
  82. package/lib/ele-upload-list/props.d.ts +6 -2
  83. package/lib/ele-virtual-table/components/body-cell.d.ts +1 -1
  84. package/lib/ele-virtual-table/index.d.ts +1 -1
  85. package/package.json +1 -1
@@ -30,6 +30,7 @@ import type {
30
30
  TabPaneProps,
31
31
  TableProps,
32
32
  TableV2Props,
33
+ ImageProps,
33
34
  ElCascader,
34
35
  ElPopper,
35
36
  ElPopover,
@@ -130,6 +131,8 @@ export type ElColumnProps = Partial<ExtractPropTypes<typeof columnProps>>;
130
131
 
131
132
  export type ElTreeV2Props = ComponentProps<TreeProps>;
132
133
 
134
+ export type ElImageProps = ComponentProps<ImageProps>;
135
+
133
136
  /**
134
137
  * 组件实例
135
138
  */
@@ -95,9 +95,9 @@ declare const _default: import("vue").DefineComponent<{
95
95
  onFocus?: ((_e: FocusEvent) => any) | undefined;
96
96
  onBlur?: ((_e: FocusEvent) => any) | undefined;
97
97
  "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
98
+ onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
98
99
  onClear?: (() => any) | undefined;
99
100
  onFilterChange?: ((_value: string) => any) | undefined;
100
- onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
101
101
  }, {
102
102
  disabled: boolean;
103
103
  teleported: boolean;
@@ -106,8 +106,8 @@ declare const _default: import("vue").DefineComponent<{
106
106
  visible: boolean;
107
107
  transition: string;
108
108
  value: import("./types").SelectValue;
109
+ filterable: boolean;
109
110
  multiple: boolean;
110
111
  automaticDropdown: boolean;
111
- filterable: boolean;
112
112
  }, {}>;
113
113
  export default _default;
@@ -46,8 +46,8 @@ declare const _default: import("vue").DefineComponent<{
46
46
  itemStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
47
47
  row: import("vue").PropType<boolean | import("../ele-app/el").ElRowProps>;
48
48
  }>> & {
49
- "onUpdate:modelValue"?: ((_value: CheckedValue) => any) | undefined;
50
49
  onChange?: ((_value: CheckedValue) => any) | undefined;
50
+ "onUpdate:modelValue"?: ((_value: CheckedValue) => any) | undefined;
51
51
  }, {
52
52
  disabled: boolean;
53
53
  modelValue: CheckedValue;
@@ -141,11 +141,11 @@ declare const _default: import("vue").DefineComponent<{
141
141
  title: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
142
142
  ariaLevel: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
143
143
  }>> & {
144
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
144
145
  onOpen?: (() => any) | undefined;
145
146
  onClose?: (() => any) | undefined;
146
147
  onOpenAutoFocus?: (() => any) | undefined;
147
148
  onCloseAutoFocus?: (() => any) | undefined;
148
- "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
149
149
  onOpened?: (() => any) | undefined;
150
150
  onClosed?: (() => any) | undefined;
151
151
  }, {
@@ -96,7 +96,7 @@
96
96
  height: auto;
97
97
  }
98
98
 
99
- &:not(.el-drawer-fade-leave-active, .el-drawer-fade-enter-active) {
99
+ &:not(.el-drawer-fade-leave-active):not(.el-drawer-fade-enter-active) {
100
100
  transition: (width $ele-transition, left $ele-transition);
101
101
  }
102
102
 
@@ -146,10 +146,10 @@ declare const _default: import("vue").DefineComponent<{
146
146
  }>> & {
147
147
  onFocus?: ((_e: FocusEvent) => any) | undefined;
148
148
  onBlur?: ((_e: FocusEvent) => any) | undefined;
149
- "onUpdate:modelValue"?: ((_value?: string | null | undefined) => any) | undefined;
150
149
  onChange?: ((_value?: string | null | undefined) => any) | undefined;
151
- onClear?: (() => any) | undefined;
150
+ "onUpdate:modelValue"?: ((_value?: string | null | undefined) => any) | undefined;
152
151
  onVisibleChange?: ((_visible: boolean) => any) | undefined;
152
+ onClear?: (() => any) | undefined;
153
153
  }, {
154
154
  placement: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined;
155
155
  disabled: boolean;
@@ -158,9 +158,9 @@ declare const _default: import("vue").DefineComponent<{
158
158
  persistent: boolean;
159
159
  transition: string;
160
160
  tooltip: boolean;
161
+ filterable: boolean;
161
162
  responsive: boolean;
162
163
  automaticDropdown: boolean;
163
- filterable: boolean;
164
164
  popperWidth: string | number;
165
165
  popperHeight: string | number;
166
166
  hideOnSingleTab: boolean;
@@ -145,8 +145,8 @@ declare const _default: import("vue").DefineComponent<{
145
145
  emptyProps: import("vue").PropType<import("../ele-app/el").ElEmptyProps>;
146
146
  headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
147
147
  }>> & {
148
- onOpen?: (() => any) | undefined;
149
148
  "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
149
+ onOpen?: (() => any) | undefined;
150
150
  onClosed?: (() => any) | undefined;
151
151
  onDone?: ((_result: CenterPoint) => any) | undefined;
152
152
  onMapDone?: ((_ins: any) => any) | undefined;
@@ -43,7 +43,9 @@ declare const _default: import("vue").DefineComponent<{
43
43
  open: (index: string) => void;
44
44
  close: (index: string) => void;
45
45
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
46
- itemClick: (_item: import("./types").MenuItem) => boolean;
46
+ itemClick: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
47
+ itemMouseenter: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean; /** 监听菜单尺寸变化并溢出省略 */
48
+ itemMouseleave: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
47
49
  close: (index: string, indexPath: string[]) => boolean;
48
50
  open: (index: string, indexPath: string[]) => boolean;
49
51
  select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => boolean;
@@ -88,7 +90,9 @@ declare const _default: import("vue").DefineComponent<{
88
90
  onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
89
91
  onClose?: ((index: string, indexPath: string[]) => any) | undefined;
90
92
  onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
91
- onItemClick?: ((_item: import("./types").MenuItem) => any) | undefined;
93
+ onItemClick?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
94
+ onItemMouseenter?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
95
+ onItemMouseleave?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
92
96
  }, {
93
97
  showTimeout: number;
94
98
  hideTimeout: number;
@@ -11,6 +11,7 @@ const index = defineComponent({
11
11
  emits: menusEmits,
12
12
  setup(props, { slots, emit, expose }) {
13
13
  const { authenticated } = useLicense();
14
+ const isWebkit = navigator.userAgent.includes("WebKit");
14
15
  const menuRef = ref(null);
15
16
  const ellipsisRef = ref(null);
16
17
  const sliceIndex = ref(-1);
@@ -57,8 +58,14 @@ const index = defineComponent({
57
58
  }
58
59
  }
59
60
  );
60
- const onItemClick = (item) => {
61
- emit("itemClick", item);
61
+ const onItemClick = (item, e) => {
62
+ emit("itemClick", item, e);
63
+ };
64
+ const onItemMouseenter = (item, e) => {
65
+ emit("itemMouseenter", item, e);
66
+ };
67
+ const onItemMouseleave = (item, e) => {
68
+ emit("itemMouseleave", item, e);
62
69
  };
63
70
  const exposeValue = {
64
71
  menuRef,
@@ -115,7 +122,10 @@ const index = defineComponent({
115
122
  props.popupColorful,
116
123
  props.firstPopperClass,
117
124
  true,
118
- onItemClick
125
+ onItemClick,
126
+ onItemMouseenter,
127
+ onItemMouseleave,
128
+ isWebkit
119
129
  );
120
130
  if (moreItems) {
121
131
  const ellipsisProps = props.ellipsisProps || {};
@@ -153,7 +163,10 @@ const index = defineComponent({
153
163
  props.popupColorful,
154
164
  props.firstPopperClass,
155
165
  false,
156
- onItemClick
166
+ onItemClick,
167
+ onItemMouseenter,
168
+ onItemMouseleave,
169
+ isWebkit
157
170
  );
158
171
  },
159
172
  title: () => {
@@ -60,8 +60,12 @@ export declare const menuPropKeys: MenuPropKeys;
60
60
  * 事件
61
61
  */
62
62
  export declare const menusEmits: {
63
- /** 菜单项点击事件 */
64
- itemClick: (_item: MenuItem) => boolean;
63
+ /** 子菜单项点击事件 */
64
+ itemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
65
+ /** 子菜单项鼠标进入事件 */
66
+ itemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
67
+ /** 子菜单项鼠标离开事件 */
68
+ itemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
65
69
  close: (index: string, indexPath: string[]) => boolean;
66
70
  open: (index: string, indexPath: string[]) => boolean;
67
71
  select: (index: string, indexPath: string[], item: import("element-plus").MenuItemClicked, routerResult?: Promise<void | import("vue-router").NavigationFailure> | undefined) => boolean;
@@ -30,8 +30,12 @@ const menusProps = {
30
30
  const menuPropKeys = Object.keys(menuProps);
31
31
  const menusEmits = {
32
32
  ...menuEmits,
33
- /** 菜单项点击事件 */
34
- itemClick: (_item) => true
33
+ /** 子菜单项点击事件 */
34
+ itemClick: (_item, _e) => true,
35
+ /** 子菜单项鼠标进入事件 */
36
+ itemMouseenter: (_item, _e) => true,
37
+ /** 子菜单项鼠标离开事件 */
38
+ itemMouseleave: (_item, _e) => true
35
39
  };
36
40
  export {
37
41
  menuPropKeys,
@@ -695,20 +695,21 @@
695
695
  }
696
696
 
697
697
  /* 超链接 */
698
+ .ele-menu-trigger {
699
+ position: absolute;
700
+ top: 0;
701
+ left: 0;
702
+ right: 0;
703
+ bottom: 0;
704
+ z-index: 2;
705
+ }
706
+
698
707
  .el-menu-item .ele-menu-link {
708
+ width: 100%;
709
+ height: 100%;
710
+ display: block;
699
711
  color: inherit;
700
- position: static;
701
712
  text-decoration: none;
702
-
703
- &::before {
704
- content: '';
705
- position: absolute;
706
- top: 0;
707
- left: 0;
708
- right: 0;
709
- bottom: 0;
710
- z-index: 2;
711
- }
712
713
  }
713
714
 
714
715
  /* Tooltip */
@@ -35,7 +35,7 @@ export interface MenuItem
35
35
  children?: MenuItem[];
36
36
  /** 附加数据 */
37
37
  meta?: Record<keyof any, any>;
38
- /** 是否是溢出的菜单 */
38
+ /** 是否是溢出的菜单(内部属性) */
39
39
  overflow?: boolean;
40
40
  }
41
41
 
@@ -54,6 +54,11 @@ export type PopupMenuTheme = 'auto' | MenuTheme;
54
54
  */
55
55
  export type PopupColorful = 'auto' | boolean;
56
56
 
57
+ /**
58
+ * 子菜单项点击事件
59
+ */
60
+ export type MenuItemEvent = (item: MenuItem, e: MouseEvent) => void;
61
+
57
62
  /**
58
63
  * 省略菜单的属性
59
64
  */
@@ -78,19 +83,14 @@ export interface MenuResult {
78
83
  moreItems?: MenuItem[];
79
84
  }
80
85
 
81
- /**
82
- * 菜单项点击事件
83
- */
84
- export type ItemClick = (item: MenuItem) => void;
85
-
86
86
  /**
87
87
  * 菜单省略计算参数
88
88
  */
89
89
  export interface MenuEllipsisOption {
90
- /** 获取菜单节点 */
90
+ /** 获取菜单节点的方法 */
91
91
  getMenuEl: () => HTMLElement | null;
92
- /** 获取菜单省略项节点 */
92
+ /** 获取菜单省略项节点的方法 */
93
93
  getMoreEl: () => HTMLElement | null;
94
- /** 返回计算结果 */
94
+ /** 计算结果回调 */
95
95
  onEllipsis: (index: number) => void;
96
96
  }
@@ -1,9 +1,11 @@
1
1
  import type { VNode, Slot } from 'vue';
2
- import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption, ItemClick } from './types';
3
- /** 菜单链接类名 */
2
+ import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption, MenuItemEvent } from './types';
3
+ /** 子菜单项链接类名 */
4
4
  export declare const linkClass = "ele-menu-link";
5
5
  /** 菜单标题类名 */
6
6
  export declare const titleClass = "ele-menu-title";
7
+ /** 子菜单项事件触发元素类名 */
8
+ export declare const triggerClass = "ele-menu-trigger";
7
9
  /** 菜单溢出隐藏项类名 */
8
10
  export declare const overflowClass = "ele-menu-overflow";
9
11
  /** 菜单省略项的类名 */
@@ -12,20 +14,20 @@ export declare const ellipsisClass = "ele-sub-menu-ellipsis";
12
14
  * 生成菜单链接节点
13
15
  * @param path 链接地址
14
16
  */
15
- export declare function getLinkNode(item: MenuItem, onItemClick?: ItemClick): VNode | undefined;
17
+ export declare function getLinkNode(path?: string): VNode | undefined;
16
18
  /**
17
19
  * 生成菜单内容节点
18
20
  * @param icons 图标节点
19
21
  * @param titles 标题节点
20
22
  * @param badge 徽章节点
21
- * @param link 链接节点
23
+ * @param trigger 子菜单项事件触发元素节点
22
24
  */
23
- export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNode | null, link?: VNode | null): VNode[];
25
+ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNode | null, trigger?: VNode | null): VNode[];
24
26
  /**
25
27
  * 递归生成菜单节点
26
28
  * @param items 菜单数据
27
29
  * @param sIcon 图标插槽
28
- * @param sTitle 白哦提插槽
30
+ * @param sTitle 标题插槽
29
31
  * @param tipDisabled 是否禁用折叠的tooltip
30
32
  * @param theme 主题
31
33
  * @param popTheme 气泡菜单主题
@@ -33,15 +35,12 @@ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNod
33
35
  * @param popupColorful 气泡菜单是否彩色图标
34
36
  * @param firstPopClass 第一级气泡菜单类名
35
37
  * @param first 是否是第一级菜单
38
+ * @param onItemClick 子菜单项点击事件
39
+ * @param onItemMouseenter 子菜单项鼠标进入事件
40
+ * @param onItemMouseenter 子菜单项鼠标离开事件
41
+ * @param webkit 是否时webkit内核
36
42
  */
37
- 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[];
38
- /**
39
- * 生成菜单数据
40
- * @param items 菜单数据
41
- * @param index 省略位置
42
- * @param horizontal 是否是水平菜单
43
- */
44
- export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
43
+ 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?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean): VNode[];
45
44
  /**
46
45
  * 生成气泡菜单的类名
47
46
  * @param customerClass 自定义的类名
@@ -52,7 +51,14 @@ export declare function getMenuItems(menus?: MenuItem[], index?: number, horizon
52
51
  * @param firstPopClass 第一级气泡菜单类名
53
52
  * @param first 是否是第一级菜单
54
53
  */
55
- export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean): string;
54
+ export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, webkit?: boolean): string;
55
+ /**
56
+ * 生成菜单数据
57
+ * @param items 菜单数据
58
+ * @param index 省略位置
59
+ * @param horizontal 是否是水平菜单
60
+ */
61
+ export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
56
62
  /**
57
63
  * 获取菜单节点宽度
58
64
  * @param el 菜单节点
@@ -5,26 +5,22 @@ import { isExternalLink, getCurrentStyle, debounce } from "../utils/core";
5
5
  import { ArrowDown, ArrowRight } from "../icons";
6
6
  const linkClass = "ele-menu-link";
7
7
  const titleClass = "ele-menu-title";
8
+ const triggerClass = "ele-menu-trigger";
8
9
  const overflowClass = "ele-menu-overflow";
9
10
  const ellipsisClass = "ele-sub-menu-ellipsis";
10
- function getLinkNode(item, onItemClick) {
11
- if (!(item == null ? void 0 : item.path)) {
12
- return;
13
- }
14
- if (isExternalLink(item.path)) {
11
+ function getLinkNode(path) {
12
+ if (isExternalLink(path)) {
15
13
  return h("a", {
16
- href: item.path,
14
+ href: path,
17
15
  target: "_blank",
18
- class: linkClass,
19
- onClick: (e) => {
20
- e.stopPropagation();
21
- onItemClick && onItemClick(item);
22
- }
16
+ class: linkClass
23
17
  });
24
18
  }
25
- return h(RouterLink, { to: item.path, class: linkClass });
19
+ if (path) {
20
+ return h(RouterLink, { to: path, class: linkClass });
21
+ }
26
22
  }
27
- function getNodes(icons, titles, badge, link) {
23
+ function getNodes(icons, titles, badge, trigger) {
28
24
  const nodes = [];
29
25
  if (icons) {
30
26
  icons.forEach((t) => {
@@ -39,18 +35,19 @@ function getNodes(icons, titles, badge, link) {
39
35
  if (badge) {
40
36
  nodes.push(badge);
41
37
  }
42
- if (link) {
43
- nodes.push(link);
38
+ if (trigger) {
39
+ nodes.push(trigger);
44
40
  }
45
41
  return nodes;
46
42
  }
47
- function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick) {
43
+ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit) {
48
44
  const nodes = [];
49
45
  if (!items) {
50
46
  return nodes;
51
47
  }
52
48
  items.forEach((item) => {
53
49
  var _a;
50
+ const key = item.key || item.index || item.path;
54
51
  const iNodes = sIcon ? sIcon({ item, icon: item.icon }) ?? [] : [];
55
52
  if (!iNodes.length && item.icon) {
56
53
  iNodes.push(
@@ -65,27 +62,40 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
65
62
  }
66
63
  const bNode = item.badge != null ? h(ElBadge, item.badge) : null;
67
64
  if (!((_a = item.children) == null ? void 0 : _a.length)) {
68
- const linkNode = getLinkNode(item, onItemClick);
69
- const key = item.key || item.index || item.path;
65
+ const triggerNode = h(
66
+ "div",
67
+ {
68
+ class: triggerClass,
69
+ onClick: (e) => {
70
+ onItemClick && onItemClick(item, e);
71
+ },
72
+ onMouseenter: (e) => {
73
+ onItemMouseenter && onItemMouseenter(item, e);
74
+ },
75
+ onMouseleave: (e) => {
76
+ onItemMouseleave && onItemMouseleave(item, e);
77
+ }
78
+ },
79
+ getLinkNode(item.path)
80
+ );
70
81
  nodes.push(
71
82
  h(
72
83
  ElMenuItem,
73
84
  {
74
85
  key: key + "-" + tipDisabled,
75
- index: item.index,
86
+ index: item.index || item.path,
76
87
  route: item.route,
77
88
  disabled: item.disabled,
78
89
  class: item.overflow ? overflowClass : void 0,
79
90
  onClick: () => {
80
- onItemClick && onItemClick(item);
81
91
  }
82
92
  },
83
93
  {
84
94
  default: () => {
85
- if (!first || tipDisabled) {
86
- return getNodes(iNodes, tNodes, bNode, linkNode);
95
+ if (first && !tipDisabled) {
96
+ return getNodes(iNodes, void 0, bNode, triggerNode);
87
97
  }
88
- return getNodes(iNodes, void 0, bNode, linkNode);
98
+ return getNodes(iNodes, tNodes, bNode, triggerNode);
89
99
  },
90
100
  title: first && !tipDisabled ? () => tNodes : void 0
91
101
  }
@@ -95,47 +105,45 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
95
105
  }
96
106
  if (item.group === true) {
97
107
  nodes.push(
98
- h(
99
- ElMenuItemGroup,
100
- { key: item.key || item.index },
101
- {
102
- default: () => {
103
- return renderItems(
104
- item.children,
105
- sIcon,
106
- sTitle,
107
- tipDisabled,
108
- theme,
109
- popTheme,
110
- colorful,
111
- popupColorful,
112
- firstPopClass,
113
- first,
114
- onItemClick
115
- );
116
- },
117
- title: () => getNodes(iNodes, tNodes, bNode)
118
- }
119
- )
108
+ h(ElMenuItemGroup, { key }, {
109
+ default: () => {
110
+ return renderItems(
111
+ item.children,
112
+ sIcon,
113
+ sTitle,
114
+ tipDisabled,
115
+ theme,
116
+ popTheme,
117
+ colorful,
118
+ popupColorful,
119
+ firstPopClass,
120
+ first,
121
+ onItemClick,
122
+ onItemMouseenter,
123
+ onItemMouseleave
124
+ );
125
+ },
126
+ title: () => getNodes(iNodes, tNodes, bNode)
127
+ })
120
128
  );
121
129
  return;
122
130
  }
123
- const popperClass = getPopperClass(
124
- item.popperClass,
125
- theme,
126
- popTheme,
127
- colorful,
128
- popupColorful,
129
- firstPopClass,
130
- first
131
- );
132
131
  nodes.push(
133
132
  h(
134
133
  ElSubMenu,
135
134
  {
136
- key: item.key || item.index,
137
- index: item.index,
138
- popperClass,
135
+ key,
136
+ index: item.index || item.path,
137
+ popperClass: getPopperClass(
138
+ item.popperClass,
139
+ theme,
140
+ popTheme,
141
+ colorful,
142
+ popupColorful,
143
+ firstPopClass,
144
+ first,
145
+ webkit
146
+ ),
139
147
  showTimeout: item.showTimeout,
140
148
  hideTimeout: item.hideTimeout,
141
149
  disabled: item.disabled,
@@ -164,7 +172,9 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
164
172
  popupColorful,
165
173
  firstPopClass,
166
174
  false,
167
- onItemClick
175
+ onItemClick,
176
+ onItemMouseenter,
177
+ onItemMouseleave
168
178
  );
169
179
  },
170
180
  title: () => getNodes(iNodes, tNodes, bNode)
@@ -174,6 +184,25 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
174
184
  });
175
185
  return nodes;
176
186
  }
187
+ function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first, webkit) {
188
+ const popperClass = ["ele-menu"];
189
+ if (webkit) {
190
+ popperClass.push("is-webkit");
191
+ }
192
+ if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
193
+ popperClass.push("is-night ele-menu-dark");
194
+ }
195
+ if (popupColorful === true || popupColorful === "auto" && colorful) {
196
+ popperClass.push("is-colorful ele-menu-colorful");
197
+ }
198
+ if (first && firstPopClass) {
199
+ popperClass.push(firstPopClass);
200
+ }
201
+ if (customerClass) {
202
+ popperClass.push(customerClass);
203
+ }
204
+ return popperClass.join(" ");
205
+ }
177
206
  function getMenuItems(menus, index, horizontal) {
178
207
  if (!horizontal || !menus || !menus.length) {
179
208
  return { items: menus };
@@ -188,36 +217,16 @@ function getMenuItems(menus, index, horizontal) {
188
217
  const moreItems = index === 0 ? data : data.slice(index);
189
218
  moreItems.forEach((d) => {
190
219
  var _a;
191
- const children = ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0;
192
220
  items.push({
193
221
  ...d,
222
+ key: `overflow-${d.key || d.index || d.path}`,
223
+ index: `overflow-${d.index || d.path}`,
194
224
  overflow: true,
195
- key: `overflow-${d.key || d.index}`,
196
- index: `overflow-${d.index}`,
197
- children
225
+ children: ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0
198
226
  });
199
227
  });
200
228
  return { items, moreItems };
201
229
  }
202
- function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first) {
203
- const popperClass = ["ele-menu"];
204
- if (navigator.userAgent.includes("WebKit")) {
205
- popperClass.push("is-webkit");
206
- }
207
- if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
208
- popperClass.push("is-night ele-menu-dark");
209
- }
210
- if (popupColorful === true || popupColorful === "auto" && colorful) {
211
- popperClass.push("is-colorful ele-menu-colorful");
212
- }
213
- if (first && firstPopClass) {
214
- popperClass.push(firstPopClass);
215
- }
216
- if (customerClass) {
217
- popperClass.push(customerClass);
218
- }
219
- return popperClass.join(" ");
220
- }
221
230
  function getMenuWidth(el) {
222
231
  if (!el) {
223
232
  return;
@@ -237,8 +246,7 @@ function getItemWidth(el) {
237
246
  return el.offsetWidth + ml + mr;
238
247
  }
239
248
  function getMenuChilds(el) {
240
- const childs = Array.from(el.childNodes ?? []);
241
- return childs.filter((t) => {
249
+ return Array.from(el.childNodes ?? []).filter((t) => {
242
250
  return t.nodeName === "LI" && !t.classList.contains(ellipsisClass);
243
251
  });
244
252
  }
@@ -310,5 +318,6 @@ export {
310
318
  overflowClass,
311
319
  renderItems,
312
320
  titleClass,
321
+ triggerClass,
313
322
  useMenuEllipsis
314
323
  };
@@ -258,7 +258,7 @@
258
258
  left: eleVar('sidebar', 'width', 0);
259
259
  }
260
260
 
261
- &:not(.dialog-fade-leave-active, .dialog-fade-enter-active) {
261
+ &:not(.dialog-fade-leave-active):not(.dialog-fade-enter-active) {
262
262
  transition: (width $ele-transition, left $ele-transition);
263
263
  }
264
264
 
@@ -18,7 +18,7 @@
18
18
  border: none;
19
19
  }
20
20
 
21
- &:not(.is-open, .is-static) {
21
+ &:not(.is-open):not(.is-static) {
22
22
  display: none;
23
23
  }
24
24