refactor: menu

components/menu/src/InlineSubMenuList.tsx

@@ -1,7 +1,6 @@
 import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
 import Transition from 'ant-design-vue/es/_util/transition';
 import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
-import { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
 
 export default defineComponent({
@@ -13,9 +12,9 @@ export default defineComponent({
     keyPath: Array,
   },
   setup(props, { slots }) {
-    const fixedMode: MenuMode = 'inline';
+    const fixedMode = computed(() => 'inline');
     const { motion, mode, defaultMotions } = useInjectMenu();
-    const sameModeRef = computed(() => mode.value === fixedMode);
+    const sameModeRef = computed(() => mode.value === fixedMode.value);
     const destroy = ref(!sameModeRef.value);
 
     const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
@@ -34,7 +33,8 @@ export default defineComponent({
     const style = ref({});
     const className = ref('');
     const mergedMotion = computed(() => {
-      const m = motion.value || defaultMotions.value?.[fixedMode];
+      const m =
+        motion.value || defaultMotions.value?.[fixedMode.value] || defaultMotions.value?.other;
       const res = typeof m === 'function' ? m(style, className) : m;
       return { ...res, appear: props.keyPath.length <= 1 };
     });

components/menu/src/Menu.tsx

@@ -251,8 +251,8 @@ export default defineComponent({
     const getChildrenKeys = (eventKeys: string[] = []): Key[] => {
       const keys = [];
       eventKeys.forEach(eventKey => {
-        const { key, childrenEventKeys } = store[eventKey] as any;
-        keys.push(key, ...getChildrenKeys(childrenEventKeys.value));
+        const { key, childrenEventKeys } = store[eventKey];
+        keys.push(key, ...getChildrenKeys(childrenEventKeys));
       });
       return keys;
     };
@@ -267,14 +267,15 @@ export default defineComponent({
     };
 
     const onInternalOpenChange = (eventKey: Key, open: boolean) => {
-      const { key, childrenEventKeys } = store[eventKey] as any;
+      const { key, childrenEventKeys } = store[eventKey];
       let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
 
       if (open) {
         newOpenKeys.push(key);
       } else if (mergedMode.value !== 'inline') {
         // We need find all related popup to close
-        const subPathKeys = getChildrenKeys(childrenEventKeys.value);
+        const subPathKeys = getChildrenKeys(childrenEventKeys);
+        console.log('subPathKeys', eventKey, childrenEventKeys, subPathKeys);
         newOpenKeys = newOpenKeys.filter(k => !subPathKeys.includes(k));
       }
 

components/menu/src/MenuItem.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
     role: String,
     disabled: Boolean,
     danger: Boolean,
-    title: { type: [String, Boolean] },
+    title: { type: [String, Boolean], default: undefined },
     icon: PropTypes.VNodeChild,
   },
   emits: ['mouseenter', 'mouseleave', 'click'],
@@ -46,6 +46,7 @@ export default defineComponent({
       return [...parentEventKeys.value.map(eK => store[eK].key), key];
     });
 
+    const keysPath = computed(() => [...parentEventKeys.value, eventKey]);
     const menuInfo = {
       eventKey,
       key,
@@ -102,7 +103,8 @@ export default defineComponent({
 
     const onMouseEnter = (event: MouseEvent) => {
       if (!mergedDisabled.value) {
-        changeActiveKeys([...parentEventKeys.value, key]);
+        changeActiveKeys(keysPath.value);
+        console.log('item mouseenter', keysPath.value);
         emit('mouseenter', event);
       }
     };

components/menu/src/SubMenu.tsx

@@ -50,7 +50,6 @@ export default defineComponent({
       parentEventKeys,
       childrenEventKeys,
     };
-
     parentInfo.childrenEventKeys?.value.push(eventKey);
     onBeforeUnmount(() => {
       if (parentInfo.childrenEventKeys) {
@@ -195,13 +194,20 @@ export default defineComponent({
 
     const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));
 
+    const style = ref({});
+    const className = ref('');
+    const mergedMotion = computed(() => {
+      const m = motion.value || defaultMotions.value?.[mode.value] || defaultMotions.value?.other;
+      const res = typeof m === 'function' ? m(style, className) : m;
+      return res ? getTransitionProps(res.name) : undefined;
+    });
+
     return () => {
       const icon = getPropsSlot(slots, props, 'icon');
       const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
       const subMenuPrefixClsValue = subMenuPrefixCls.value;
       let titleNode = (
         <div
-          role="menuitem"
           style={directionStyle.value}
           class={`${subMenuPrefixClsValue}-title`}
           tabindex={mergedDisabled.value ? null : -1}
@@ -214,8 +220,6 @@ export default defineComponent({
           aria-disabled={mergedDisabled.value}
           onClick={onInternalTitleClick}
           onFocus={onInternalFocus}
-          onMouseenter={onMouseEnter}
-          onMouseleave={onMouseLeave}
         >
           {title}
 
@@ -230,13 +234,6 @@ export default defineComponent({
 
       if (!overflowDisabled.value) {
         const triggerMode = triggerModeRef.value;
-        const style = ref({});
-        const className = ref('');
-        const mergedMotion = computed(() => {
-          const m = motion.value || defaultMotions.value?.[mode.value];
-          const res = typeof m === 'function' ? m(style, className) : m;
-          return res ? getTransitionProps(res.name) : undefined;
-        });
         titleNode = (
           <PopupTrigger
             mode={triggerMode}
@@ -278,11 +275,13 @@ export default defineComponent({
                 [`${subMenuPrefixClsValue}-disabled`]: mergedDisabled.value,
               },
             )}
+            onMouseenter={onMouseEnter}
+            onMouseleave={onMouseLeave}
           >
             {titleNode}
 
             {/* Inline mode */}
-            {!overflowDisabled.value && (
+            {!overflowDisabled.value && mode.value !== 'vertical' && (
               <InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
                 {slots.default?.()}
               </InlineSubMenuList>

components/menu/src/hooks/useMenuContext.ts

@@ -21,8 +21,8 @@ import { CSSMotionProps } from '../../../_util/transition';
 export interface StoreMenuInfo {
   eventKey: string;
   key: Key;
-  parentEventKeys: ComputedRef<Key[]>;
-  childrenEventKeys?: Ref<Key[]>;
+  parentEventKeys: ComputedRef<string[]>;
+  childrenEventKeys?: Ref<string[]>;
   isLeaf?: boolean;
 }
 export interface MenuContextProps {

components/menu/style/index.less

@@ -530,7 +530,7 @@
       text-overflow: clip;
 
       .@{menu-prefix-cls}-submenu-arrow {
-        opacity: 0;
+        display: none;
       }
 
       .@{menu-prefix-cls}-item-icon,

examples/App.vue

@@ -11,16 +11,22 @@
       theme="dark"
       :inline-collapsed="collapsed"
     >
-      <a-menu-item key="1">
-        <PieChartOutlined />
+      <!-- <a-menu-item key="1">
+        <template #icon>
+          <PieChartOutlined />
+        </template>
         <span>Option 1</span>
       </a-menu-item>
       <a-menu-item key="2">
-        <DesktopOutlined />
+        <template #icon>
+          <DesktopOutlined />
+        </template>
         <span>Option 2</span>
       </a-menu-item>
       <a-menu-item key="3">
-        <InboxOutlined />
+        <template #icon>
+          <InboxOutlined />
+        </template>
         <span>Option 3</span>
       </a-menu-item>
       <a-sub-menu key="sub1">
@@ -34,7 +40,7 @@
         <a-menu-item key="6">Option 6</a-menu-item>
         <a-menu-item key="7">Option 7</a-menu-item>
         <a-menu-item key="8">Option 8</a-menu-item>
-      </a-sub-menu>
+      </a-sub-menu> -->
       <a-sub-menu key="sub2">
         <template #title>
           <span>

v2-doc

@@ -1 +1 @@
-Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557
+Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2