11import type { Key } from '../../_util/type' ;
2- import type { ExtractPropTypes , PropType , UnwrapRef } from 'vue' ;
2+ import type { ExtractPropTypes , PropType } from 'vue' ;
33import { computed , defineComponent , ref , inject , watchEffect , watch , onMounted , unref } from 'vue' ;
44import shallowEqual from '../../_util/shallowequal' ;
55import type { StoreMenuInfo } from './hooks/useMenuContext' ;
@@ -24,13 +24,15 @@ import MenuItem from './MenuItem';
2424import SubMenu from './SubMenu' ;
2525import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined' ;
2626import { cloneElement } from '../../_util/vnode' ;
27+ import { OVERFLOW_KEY , PathContext } from './hooks/useKeyPath' ;
2728
2829export const menuProps = {
2930 id : String ,
3031 prefixCls : String ,
3132 disabled : Boolean ,
3233 inlineCollapsed : Boolean ,
3334 disabledOverflow : Boolean ,
35+ forceSubMenuRender : Boolean ,
3436 openKeys : Array ,
3537 selectedKeys : Array ,
3638 activeKey : String , // 内部组件使用
@@ -60,6 +62,7 @@ export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
6062const EMPTY_LIST : string [ ] = [ ] ;
6163export default defineComponent ( {
6264 name : 'AMenu' ,
65+ inheritAttrs : false ,
6366 props : menuProps ,
6467 emits : [
6568 'update:openKeys' ,
@@ -71,7 +74,7 @@ export default defineComponent({
7174 'update:activeKey' ,
7275 ] ,
7376 slots : [ 'expandIcon' , 'overflowedIndicator' ] ,
74- setup ( props , { slots, emit } ) {
77+ setup ( props , { slots, emit, attrs } ) {
7578 const { prefixCls, direction } = useConfigInject ( 'menu' , props ) ;
7679 const store = ref < Record < string , StoreMenuInfo > > ( { } ) ;
7780 const siderCollapsed = inject ( SiderCollapsedKey , ref ( undefined ) ) ;
@@ -102,7 +105,7 @@ export default defineComponent({
102105
103106 const activeKeys = ref ( [ ] ) ;
104107 const mergedSelectedKeys = ref ( [ ] ) ;
105- const keyMapStore = ref ( { } ) ;
108+ const keyMapStore = ref < Record < Key , StoreMenuInfo > > ( { } ) ;
106109 watch (
107110 store ,
108111 ( ) => {
@@ -117,11 +120,9 @@ export default defineComponent({
117120 watchEffect ( ( ) => {
118121 if ( props . activeKey !== undefined ) {
119122 let keys = [ ] ;
120- const menuInfo = props . activeKey
121- ? ( keyMapStore . value [ props . activeKey ] as UnwrapRef < StoreMenuInfo > )
122- : undefined ;
123+ const menuInfo = props . activeKey ? keyMapStore . value [ props . activeKey ] : undefined ;
123124 if ( menuInfo && props . activeKey !== undefined ) {
124- keys = [ ... menuInfo . parentKeys , props . activeKey ] ;
125+ keys = uniq ( [ ] . concat ( unref ( menuInfo . parentKeys ) , props . activeKey ) ) ;
125126 } else {
126127 keys = [ ] ;
127128 }
@@ -139,22 +140,21 @@ export default defineComponent({
139140 { immediate : true } ,
140141 ) ;
141142
142- const selectedSubMenuEventKeys = ref ( [ ] ) ;
143-
143+ const selectedSubMenuKeys = ref ( [ ] ) ;
144144 watch (
145145 [ keyMapStore , mergedSelectedKeys ] ,
146146 ( ) => {
147- let subMenuParentEventKeys = [ ] ;
147+ let subMenuParentKeys = [ ] ;
148148 mergedSelectedKeys . value . forEach ( key => {
149149 const menuInfo = keyMapStore . value [ key ] ;
150150 if ( menuInfo ) {
151- subMenuParentEventKeys . push ( ... unref ( menuInfo . parentEventKeys ) ) ;
151+ subMenuParentKeys = subMenuParentKeys . concat ( unref ( menuInfo . parentKeys ) ) ;
152152 }
153153 } ) ;
154154
155- subMenuParentEventKeys = uniq ( subMenuParentEventKeys ) ;
156- if ( ! shallowEqual ( selectedSubMenuEventKeys . value , subMenuParentEventKeys ) ) {
157- selectedSubMenuEventKeys . value = subMenuParentEventKeys ;
155+ subMenuParentKeys = uniq ( subMenuParentKeys ) ;
156+ if ( ! shallowEqual ( selectedSubMenuKeys . value , subMenuParentKeys ) ) {
157+ selectedSubMenuKeys . value = subMenuParentKeys ;
158158 }
159159 } ,
160160 { immediate : true } ,
@@ -321,16 +321,16 @@ export default defineComponent({
321321 triggerSelection ( info ) ;
322322 } ;
323323
324- const onInternalOpenChange = ( eventKey : Key , open : boolean ) => {
325- const { key , childrenEventKeys } = store . value [ eventKey ] ;
324+ const onInternalOpenChange = ( key : Key , open : boolean ) => {
325+ const childrenEventKeys = keyMapStore . value [ key ] . childrenEventKeys ;
326326 let newOpenKeys = mergedOpenKeys . value . filter ( k => k !== key ) ;
327327
328328 if ( open ) {
329329 newOpenKeys . push ( key ) ;
330330 } else if ( mergedMode . value !== 'inline' ) {
331331 // We need find all related popup to close
332332 const subPathKeys = getChildrenKeys ( childrenEventKeys ) ;
333- newOpenKeys = newOpenKeys . filter ( k => ! subPathKeys . includes ( k ) ) ;
333+ newOpenKeys = uniq ( newOpenKeys . filter ( k => ! subPathKeys . includes ( k ) ) ) ;
334334 }
335335
336336 if ( ! shallowEqual ( mergedOpenKeys , newOpenKeys ) ) {
@@ -388,9 +388,10 @@ export default defineComponent({
388388 onItemClick : onInternalClick ,
389389 registerMenuInfo,
390390 unRegisterMenuInfo,
391- selectedSubMenuEventKeys ,
391+ selectedSubMenuKeys ,
392392 isRootMenu : ref ( true ) ,
393393 expandIcon,
394+ forceSubMenuRender : computed ( ( ) => props . forceSubMenuRender ) ,
394395 } ) ;
395396 return ( ) => {
396397 const childList = flattenChildren ( slots . default ?.( ) ) ;
@@ -415,43 +416,63 @@ export default defineComponent({
415416 const overflowedIndicator = slots . overflowedIndicator ?.( ) || < EllipsisOutlined /> ;
416417
417418 return (
418- < Overflow
419- prefixCls = { `${ prefixCls . value } }
420- component = "ul"
421- itemComponent = { MenuItem }
422- class = { className . value }
423- role = "menu"
424- id = { props . id }
425- data = { wrappedChildList }
426- renderRawItem = { node => node }
427- renderRawRest = { omitItems => {
428- // We use origin list since wrapped list use context to prevent open
429- const len = omitItems . length ;
430-
431- const originOmitItems = len ? childList . slice ( - len ) : null ;
432-
433- return (
434- < SubMenu
435- eventKey = { Overflow . OVERFLOW_KEY }
436- title = { overflowedIndicator }
437- disabled = { allVisible }
438- internalPopupClose = { len === 0 }
439- >
440- { originOmitItems }
441- </ SubMenu >
442- ) ;
443- } }
444- maxCount = {
445- mergedMode . value !== 'horizontal' || props . disabledOverflow
446- ? Overflow . INVALIDATE
447- : Overflow . RESPONSIVE
448- }
449- ssr = "full"
450- data-menu-list
451- onVisibleChange = { newLastIndex => {
452- lastVisibleIndex . value = newLastIndex ;
453- } }
454- />
419+ < >
420+ < Overflow
421+ { ...attrs }
422+ prefixCls = { `${ prefixCls . value } }
423+ component = "ul"
424+ itemComponent = { MenuItem }
425+ class = { className . value }
426+ role = "menu"
427+ id = { props . id }
428+ data = { wrappedChildList }
429+ renderRawItem = { node => node }
430+ renderRawRest = { omitItems => {
431+ // We use origin list since wrapped list use context to prevent open
432+ const len = omitItems . length ;
433+
434+ const originOmitItems = len ? childList . slice ( - len ) : null ;
435+
436+ return (
437+ < >
438+ < SubMenu
439+ eventKey = { OVERFLOW_KEY }
440+ key = { OVERFLOW_KEY }
441+ title = { overflowedIndicator }
442+ disabled = { allVisible }
443+ internalPopupClose = { len === 0 }
444+ >
445+ { originOmitItems }
446+ </ SubMenu >
447+ < PathContext >
448+ < SubMenu
449+ eventKey = { OVERFLOW_KEY }
450+ key = { OVERFLOW_KEY }
451+ title = { overflowedIndicator }
452+ disabled = { allVisible }
453+ internalPopupClose = { len === 0 }
454+ >
455+ { originOmitItems }
456+ </ SubMenu >
457+ </ PathContext >
458+ </ >
459+ ) ;
460+ } }
461+ maxCount = {
462+ mergedMode . value !== 'horizontal' || props . disabledOverflow
463+ ? Overflow . INVALIDATE
464+ : Overflow . RESPONSIVE
465+ }
466+ ssr = "full"
467+ data-menu-list
468+ onVisibleChange = { newLastIndex => {
469+ lastVisibleIndex . value = newLastIndex ;
470+ } }
471+ />
472+ < div style = { { display : 'none' } } aria-hidden >
473+ < PathContext > { wrappedChildList } </ PathContext >
474+ </ div >
475+ </ >
455476 ) ;
456477 } ;
457478 } ,
0 commit comments