Perf menu2.0 (#3243)

close #3231 #3188
pull/3258/head
tangjinzhou 2020-11-23 00:21:18 -06:00 committed by GitHub
parent 2d6b50242c
commit da6d243e9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 497 additions and 615 deletions

View File

@ -10,7 +10,6 @@
---
## 2.0.0-rc.1
`2020-11-14`

@ -1 +1 @@
Subproject commit 7cccccbb5571e61b35aca0d454eb83bc5924995e
Subproject commit ef827839524b6f1ed427aefa082adb09ac2cc95f

View File

@ -1,8 +1,6 @@
import { defineComponent, inject } from 'vue';
import { SubMenu as VcSubMenu } from '../vc-menu';
import classNames from '../_util/classNames';
import Omit from 'omit.js';
import { getSlot } from '../_util/props-util';
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
export type MenuTheme = 'light' | 'dark';
@ -38,8 +36,7 @@ export default defineComponent({
popupClassName: classNames(`${rootPrefixCls}-${antdMenuTheme}`, popupClassName),
ref: 'subMenu',
...$attrs,
...Omit($slots, ['default']),
};
return <VcSubMenu {...props}>{getSlot(this)}</VcSubMenu>;
} as any;
return <VcSubMenu {...props} v-slots={$slots}></VcSubMenu>;
},
});

View File

@ -6,8 +6,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<!---->
@ -17,8 +16,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<!---->
@ -28,22 +26,19 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li class="ant-menu-submenu ant-menu-submenu-horizontal" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span class="submenu-title-wrapper"><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span> Navigation Three - Submenu </span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<!---->
@ -53,8 +48,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul>
@ -98,52 +92,12 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 6
<!---->
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 7
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 8
<!---->
</li>
</ul>
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 11
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 12
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -169,7 +123,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
<!---->
@ -191,30 +145,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
<!---->
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 11
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 12
<!---->
</li>
</ul>
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -226,7 +157,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
<ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="width: 256px;">
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 1
<!---->
@ -248,52 +179,12 @@ exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 6
<!---->
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 7
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 8
<!---->
</li>
</ul>
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 11
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 12
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -317,7 +208,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
<!---->
@ -328,16 +219,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 5
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 6
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -345,24 +227,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 7
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 8
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -380,15 +245,10 @@ exports[`renders ./antdv-demo/docs/menu/demo/template.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
<div aria-expanded="true" aria-owns="2$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="2$Menu">
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 48px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation 3</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart"><svg class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span>Option 2.1.1</span>
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -413,7 +273,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
<!---->
@ -424,16 +284,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 5
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 6
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -441,24 +292,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
</li>
<li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
<div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
<ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 7
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 8
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
<!---->
</li>
<!---->
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
<!---->
</li>
</ul>
<div></div>
<!---->
</li>
</ul>
@ -479,15 +313,13 @@ exports[`renders ./antdv-demo/docs/menu/demo/vertical.md correctly 1`] = `
<li class="ant-menu-submenu ant-menu-submenu-vertical" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
</li>
<li class="ant-menu-submenu ant-menu-submenu-vertical" role="menuitem">
<!---->
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
</li>
</ul>

View File

@ -52,7 +52,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-submenu-selected').length).toBe(2);
expect($$('.ant-menu-submenu-selected').length).toBe(1);
});
});
it('should accept defaultOpenKeys in mode horizontal', async () => {
@ -73,7 +73,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
});
});
@ -121,44 +121,44 @@ describe('Menu', () => {
});
});
// it('horizontal', async () => {
// const wrapper = mount(
// {
// props: {
// openKeys: {
// type: Array,
// default() {
// return ['1'];
// },
// },
// },
// render() {
// return (
// <Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
// <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item>
// </Menu>
// );
// },
// },
// { attachTo: 'body', sync: false },
// );
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
// }, 100);
// wrapper.setProps({ openKeys: [] });
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
// }, 500);
it('horizontal', async () => {
const wrapper = mount(
{
props: {
openKeys: {
type: Array,
default() {
return ['1'];
},
},
},
render() {
return (
<Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
});
wrapper.setProps({ openKeys: [] });
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500);
// wrapper.setProps({ openKeys: ['1'] });
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
// }, 0);
// });
wrapper.setProps({ openKeys: ['1'] });
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
}, 0);
});
it('inline', async () => {
const wrapper = mount(
@ -382,7 +382,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-menu-sub').length).not.toBe(0);
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
});
wrapper.setProps({ inlineCollapsed: true });
await asyncExpect(() => {
@ -433,7 +433,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'click');
}, 0);
await asyncExpect(() => {
@ -464,7 +464,7 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 0, 'mouseenter');
}, 0);
await asyncExpect(() => {
@ -477,36 +477,36 @@ describe('Menu', () => {
}, 500);
});
// it('horizontal', async () => {
// const wrapper = mount(
// {
// render() {
// return (
// <Menu mode="horizontal">
// <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item>
// </Menu>
// );
// },
// },
// { attachTo: 'body', sync: false },
// );
// await asyncExpect(() => {
// // expect($$('.ant-menu-sub').length).toBe(0);
// toggleMenu(wrapper, 3, 'mouseenter');
// }, 0);
// await asyncExpect(() => {
// // expect($$('.ant-menu-sub').length).toBe(1);
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
// toggleMenu(wrapper, 1, 'mouseleave');
// }, 500);
// await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).toBe('none');
// }, 500);
// });
fit('horizontal', async () => {
const wrapper = mount(
{
render() {
return (
<Menu mode="horizontal">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
},
},
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(0);
toggleMenu(wrapper, 1, 'mouseenter');
}, 100);
await asyncExpect(() => {
expect($$('.ant-menu-sub').length).toBe(1);
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
toggleMenu(wrapper, 1, 'mouseleave');
}, 500);
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
}, 500);
});
});
it('inline title', async () => {

View File

@ -6,7 +6,7 @@ import PropTypes from '../_util/vue-types';
import animation from '../_util/openAnimation';
import warning from '../_util/warning';
import Item from './MenuItem';
import { hasProp, getOptionProps, getSlot } from '../_util/props-util';
import { hasProp, getOptionProps } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import commonPropsType from '../vc-menu/commonPropsType';
import { defaultConfigProvider } from '../config-provider';
@ -275,7 +275,7 @@ const Menu = defineComponent({
onOpenChange: this.handleOpenChange,
onMouseenter: this.handleMouseEnter,
onTransitionend: this.handleTransitionEnd,
children: getSlot(this),
// children: getSlot(this),
};
if (!hasProp(this, 'selectedKeys')) {
delete menuProps.selectedKeys;
@ -300,7 +300,7 @@ const Menu = defineComponent({
menuProps.openKeys = [];
}
return <VcMenu {...menuProps} class={menuClassName} vSlots={omit(this.$slots, ['defalut'])} />;
return <VcMenu {...menuProps} class={menuClassName} v-slots={this.$slots} />;
},
});

View File

@ -190,7 +190,7 @@
&-popup {
position: absolute;
z-index: @zindex-dropdown;
background: @menu-popup-bg;
// background: @menu-popup-bg;
border-radius: @border-radius-base;
.submenu-title-wrapper {

View File

@ -228,7 +228,6 @@ export default defineComponent({
const { column } = this;
const { sSelectedKeys: selectedKeys } = this;
const multiple = 'filterMultiple' in column ? column.filterMultiple : true;
const input = multiple ? (
<Checkbox checked={selectedKeys && selectedKeys.indexOf(item.value) >= 0} />
) : (
@ -281,8 +280,9 @@ export default defineComponent({
onDeselect={this.setSelectedKeys}
selectedKeys={originSelectedKeys}
getPopupContainer={getPopupContainer}
children={this.renderMenus(column.filters)}
></Menu>
>
{this.renderMenus(column.filters)}
</Menu>
<div class={`${prefixCls}-dropdown-btns`}>
<a class={`${prefixCls}-dropdown-link confirm`} onClick={this.handleConfirm}>
{locale.filterConfirm}

View File

@ -181,10 +181,10 @@ export interface TableState {
}
export interface TransformCellTextProps {
text: any,
column: ColumnProps,
record: any,
index: number
text: any;
column: ColumnProps;
record: any;
index: number;
}
// export type SelectionItemSelectFn = (key: string[]) => any;

View File

@ -32,13 +32,11 @@
}
tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical -
1px;
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical - 1px;
}
}
}
// ================================================================
// = Middle =
// ================================================================

View File

@ -27,3 +27,17 @@ exports[`renders ./antdv-demo/docs/tag/demo/controlled.md correctly 1`] = `
`;
exports[`renders ./antdv-demo/docs/tag/demo/hot-tags.md correctly 1`] = `<div><span>Categories:</span><span class="ant-tag ant-tag-checkable">Movies</span><span class="ant-tag ant-tag-checkable">Books</span><span class="ant-tag ant-tag-checkable">Music</span><span class="ant-tag ant-tag-checkable">Sports</span></div>`;
exports[`renders ./antdv-demo/docs/tag/demo/status.md correctly 1`] = `
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Without icon</span></div>
<div><span class="ant-tag ant-tag-success">success<!----></span><span class="ant-tag ant-tag-processing">processing<!----></span><span class="ant-tag ant-tag-error">error<!----></span><span class="ant-tag ant-tag-warning">warning<!----></span><span class="ant-tag ant-tag-default">default<!----></span></div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">With icon</span></div>
<div><span class="ant-tag ant-tag-success"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> success </span>
<!----></span><span class="ant-tag ant-tag-processing"><span role="img" aria-label="sync" class="anticon anticon-sync"><svg class="anticon-spin" data-icon="sync" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"></path></svg></span><span> processing </span>
<!----></span><span class="ant-tag ant-tag-error"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> error </span>
<!----></span><span class="ant-tag ant-tag-warning"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span><span> warning </span>
<!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span><span> waiting </span>
<!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="minus-circle" class="anticon anticon-minus-circle"><svg class="" data-icon="minus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> stop </span>
<!----></span>
</div>
`;

View File

@ -37,7 +37,8 @@ export default {
}}
onBlur={onBlur}
onFocus={onFocus}
children={[
>
{[
...options.map((option, index) => {
const { value, disabled, children } = option;
return (
@ -58,7 +59,7 @@ export default {
</MenuItem>
),
].filter(Boolean)}
/>
</Menu>
);
},
};

View File

@ -100,7 +100,8 @@ const DOMWrap = {
// put all the overflowed item inside a submenu
// with a title of overflow indicator ('...')
const copy = getSlot(this)[0];
const { title, ...rest } = getAllProps(copy); // eslint-disable-line no-unused-vars
const allProps = getAllProps(copy) || {};
const { title, extraProps, ...rest } = { ...allProps, ...allProps.extraProps }; // eslint-disable-line no-unused-vars
let style = {};
let key = `${keyPrefix}-overflowed-indicator`;
let eventKey = `${keyPrefix}-overflowed-indicator`;
@ -136,7 +137,6 @@ const DOMWrap = {
key,
style,
};
return <SubMenu {...subMenuProps}>{overflowedItems}</SubMenu>;
},

View File

@ -16,7 +16,7 @@ export default {
};
},
render() {
const { rootPrefixCls } = {...this.$props, ...this.injectExtraProps};
const { rootPrefixCls } = { ...this.$props, ...this.injectExtraProps };
const { class: className = '', style } = this.$attrs;
return <li class={[className, `${rootPrefixCls}-item-divider`]} style={style} />;
},

View File

@ -1,10 +1,17 @@
// import PropTypes from '../_util/vue-types';
import { provide, reactive } from 'vue';
import { computed, provide } from 'vue';
import { propTypes } from '../vc-progress/src/types';
export const injectExtraPropsKey = Symbol();
const FunctionProvider = {
inheritAttrs: false,
setup(props, { slots, attrs }) {
provide(injectExtraPropsKey, reactive(attrs));
props: {
extraProps: propTypes.object,
},
setup(props, { slots }) {
provide(
injectExtraPropsKey,
computed(() => props.extraProps),
);
return () => slots.default?.();
},
};

View File

@ -0,0 +1,42 @@
import { createVNode, defineComponent, inject, provide } from 'vue';
import { injectExtraPropsKey } from './FunctionProvider';
export default function wrapWithConnect(WrappedComponent) {
const tempProps = WrappedComponent.props || {};
const props = {};
Object.keys(tempProps).forEach(k => {
props[k] = { ...tempProps[k], required: false };
});
const Connect = {
name: `Connect_${WrappedComponent.name}`,
inheritAttrs: false,
props,
setup(props) {
provide(injectExtraPropsKey, undefined); // 断掉 injectExtraPropsKey 的依赖
return {
props,
injectExtraProps: injectExtraPropsKey ? inject(injectExtraPropsKey, () => ({})) : {},
};
},
methods: {
getWrappedInstance() {
return this.$refs.wrappedInstance;
},
},
render() {
const { $slots = {}, $attrs } = this;
const props = { ...this.props, ...this.injectExtraProps };
const wrapProps = {
...$attrs,
...props,
ref: 'wrappedInstance',
};
// const slots = {};
// for (let [key, value] of Object.entries($slots)) {
// slots[key] = () => value();
// }
return createVNode(WrappedComponent, wrapProps, $slots);
},
};
return defineComponent(Connect);
}

View File

@ -1,10 +1,18 @@
import PropTypes from '../_util/vue-types';
import { Provider, create } from '../_util/store';
import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu';
import { default as SubPopupMenu } from './SubPopupMenu';
import BaseMixin from '../_util/BaseMixin';
import hasProp, { getOptionProps, getComponent, filterEmpty } from '../_util/props-util';
import hasProp, { getOptionProps, getComponent } from '../_util/props-util';
import commonPropsType from './commonPropsType';
import { defineComponent, provide } from 'vue';
import {
computed,
defineComponent,
getCurrentInstance,
provide,
reactive,
ref,
toRaw,
watch,
} from 'vue';
const Menu = {
name: 'Menu',
@ -15,43 +23,81 @@ const Menu = {
selectable: PropTypes.looseBool.def(true),
},
mixins: [BaseMixin],
data() {
const props = getOptionProps(this);
let selectedKeys = props.defaultSelectedKeys;
let openKeys = props.defaultOpenKeys;
if ('selectedKeys' in props) {
selectedKeys = props.selectedKeys || [];
}
if ('openKeys' in props) {
openKeys = props.openKeys || [];
}
this.store = create({
setup(props) {
const menuChildrenInfo = reactive({});
const selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || []);
const openKeys = ref(props.openKeys || props.defaultOpenKeys || []);
// computed(() => {
// return props.openKeys || props.defaultOpenKeys || [];
// });
watch(
() => props.selectedKeys,
() => {
selectedKeys.value = props.selectedKeys;
},
);
watch(
() => props.openKeys,
() => {
openKeys.value = props.openKeys;
},
);
const activeKey = reactive({
'0-menu-': props.activeKey,
});
const defaultActiveFirst = reactive({});
const addChildrenInfo = (key, info) => {
menuChildrenInfo[key] = info;
};
const removeChildrenInfo = key => {
delete menuChildrenInfo[key];
};
const getActiveKey = key => {
return key;
}; // TODO
const selectedParentUniKeys = ref([]);
watch(menuChildrenInfo, () => {
const keys = Object.values(menuChildrenInfo)
.filter(info => info.isSelected)
.reduce((allKeys, { parentUniKeys = [] }) => {
return [...allKeys, ...toRaw(parentUniKeys)];
}, []);
selectedParentUniKeys.value = keys || [];
});
const store = reactive({
selectedKeys,
openKeys,
activeKey: {
'0-menu-': getActiveKey({ ...props, children: props.children || [] }, props.activeKey),
},
activeKey,
defaultActiveFirst,
menuChildrenInfo,
selectedParentUniKeys,
addChildrenInfo,
removeChildrenInfo,
getActiveKey,
});
// this.isRootMenu = true // props
return {};
},
created() {
provide('parentMenu', this);
},
mounted() {
this.updateMiniStore();
},
updated() {
this.updateMiniStore();
const ins = getCurrentInstance();
const getEl = () => {
return ins.vnode.el;
};
provide('menuStore', store);
provide(
'parentMenu',
reactive({
isRootMenu: computed(() => props.isRootMenu),
getPopupContainer: computed(() => props.getPopupContainer),
getEl,
}),
);
return {
store,
};
},
methods: {
handleSelect(selectInfo) {
const props = this.$props;
if (props.selectable) {
// root menu
let selectedKeys = this.store.getState().selectedKeys;
let selectedKeys = this.store.selectedKeys;
const selectedKey = selectInfo.key;
if (props.multiple) {
selectedKeys = selectedKeys.concat([selectedKey]);
@ -59,9 +105,7 @@ const Menu = {
selectedKeys = [selectedKey];
}
if (!hasProp(this, 'selectedKeys')) {
this.store.setState({
selectedKeys,
});
this.store.selectedKeys = selectedKeys;
}
this.__emit('select', {
...selectInfo,
@ -80,7 +124,7 @@ const Menu = {
this.innerMenu.getWrappedInstance().onKeyDown(e, callback);
},
onOpenChange(event) {
const openKeys = this.store.getState().openKeys.concat();
const openKeys = this.store.openKeys.concat();
let changed = false;
const processSingle = e => {
let oneChanged = false;
@ -106,7 +150,7 @@ const Menu = {
}
if (changed) {
if (!hasProp(this, 'openKeys')) {
this.store.setState({ openKeys });
this.store.openKeys = openKeys;
}
this.__emit('openChange', openKeys);
}
@ -115,16 +159,14 @@ const Menu = {
handleDeselect(selectInfo) {
const props = this.$props;
if (props.selectable) {
const selectedKeys = this.store.getState().selectedKeys.concat();
const selectedKeys = this.store.selectedKeys.concat();
const selectedKey = selectInfo.key;
const index = selectedKeys.indexOf(selectedKey);
if (index !== -1) {
selectedKeys.splice(index, 1);
}
if (!hasProp(this, 'selectedKeys')) {
this.store.setState({
selectedKeys,
});
this.store.selectedKeys = selectedKeys;
}
this.__emit('deselect', {
...selectInfo,
@ -142,19 +184,6 @@ const Menu = {
}
return transitionName;
},
updateMiniStore() {
const props = getOptionProps(this);
if ('selectedKeys' in props) {
this.store.setState({
selectedKeys: props.selectedKeys || [],
});
}
if ('openKeys' in props) {
this.store.setState({
openKeys: props.openKeys || [],
});
}
},
saveInnerMenu(ref) {
this.innerMenu = ref;
},
@ -171,16 +200,14 @@ const Menu = {
expandIcon: getComponent(this, 'expandIcon', props),
overflowedIndicator: getComponent(this, 'overflowedIndicator', props) || <span>···</span>,
openTransitionName: this.getOpenTransitionName(),
children: filterEmpty(props.children),
onClick: this.handleClick,
onOpenChange: this.onOpenChange,
onDeselect: this.handleDeselect,
onSelect: this.handleSelect,
ref: this.saveInnerMenu,
store: this.store,
};
const subPopupMenu = <SubPopupMenu {...subPopupMenuProps} />;
return <Provider store={this.store}>{subPopupMenu}</Provider>;
return <SubPopupMenu {...subPopupMenuProps} v-slots={this.$slots} />;
},
};

View File

@ -2,11 +2,10 @@ import PropTypes from '../_util/vue-types';
import KeyCode from '../_util/KeyCode';
import BaseMixin from '../_util/BaseMixin';
import scrollIntoView from 'dom-scroll-into-view';
import { connect } from '../_util/store';
import { noop, menuAllProps } from './util';
import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
import { inject } from 'vue';
import { injectExtraPropsKey } from './FunctionProvider';
import { computed, defineComponent, inject, onBeforeUnmount, onMounted } from 'vue';
import InjectExtraProps from './InjectExtraProps';
const props = {
attribute: PropTypes.object,
rootPrefixCls: PropTypes.string,
@ -21,36 +20,56 @@ const props = {
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
multiple: PropTypes.looseBool,
value: PropTypes.any,
isSelected: PropTypes.looseBool,
manualRef: PropTypes.func.def(noop),
role: PropTypes.any,
subMenuKey: PropTypes.string,
itemIcon: PropTypes.any,
parentUniKeys: PropTypes.array.def(() => []),
parentUniKey: PropTypes.string,
// clearSubMenuTimers: PropTypes.func.def(noop),
};
const MenuItem = {
let indexGuid = 0;
const MenuItem = defineComponent({
name: 'AMenuItem',
mixins: [BaseMixin],
inheritAttrs: false,
props,
mixins: [BaseMixin],
isMenuItem: true,
setup() {
return { parentMenu: inject('parentMenu', undefined) };
setup(props) {
const uniKey = `menu_item_${++indexGuid}`;
const store = inject('menuStore', () => ({}));
const isSelected = computed(() => store.selectedKeys.indexOf(props.eventKey) !== -1);
onMounted(() => {
store.addChildrenInfo(
uniKey,
computed(() => ({
parentUniKeys: props.parentUniKeys,
parentUniKey: props.parentUniKey,
eventKey: props.eventKey,
isSelected: isSelected.value,
disabled: props.disabled,
})),
);
});
onBeforeUnmount(() => {
store.removeChildrenInfo(uniKey);
});
return {
parentMenu: inject('parentMenu', undefined),
isSelected,
};
},
created() {
this.prevActive = this.active;
// invoke customized ref to expose component to mixin
this.callRef();
},
mounted() {
this.updateParentMenuSelectedStatus();
},
updated() {
this.updateParentMenuSelectedStatus();
this.$nextTick(() => {
const { active, parentMenu, eventKey } = this;
if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
scrollIntoView(findDOMNode(this.node), findDOMNode(parentMenu), {
scrollIntoView(findDOMNode(this.node), parentMenu.getEl(), {
onlyScrollIfNeeded: true,
});
parentMenu[`scrolled-${eventKey}`] = true;
@ -61,17 +80,7 @@ const MenuItem = {
});
this.callRef();
},
beforeUnmount() {
this.updateParentMenuSelectedStatus(false);
const props = this.$props;
this.__emit('destroy', props.eventKey);
},
methods: {
updateParentMenuSelectedStatus(status = this.isSelected) {
if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
}
},
onKeyDown(e) {
const keyCode = e.keyCode;
if (keyCode === KeyCode.ENTER) {
@ -105,11 +114,12 @@ const MenuItem = {
},
onClick(e) {
const { eventKey, multiple, isSelected } = this.$props;
const { eventKey, multiple } = this.$props;
const { isSelected } = this;
const info = {
key: eventKey,
keyPath: [eventKey],
item: { ...this.$props },
item: this,
domEvent: e,
};
@ -156,8 +166,8 @@ const MenuItem = {
const className = {
[cls]: !!cls,
[this.getPrefixCls()]: true,
[this.getActiveClassName()]: !props.disabled && props.active,
[this.getSelectedClassName()]: props.isSelected,
[this.getActiveClassName()]: !props.disabled && this.active,
[this.getSelectedClassName()]: this.isSelected,
[this.getDisabledClassName()]: props.disabled,
};
let attrs = {
@ -171,7 +181,7 @@ const MenuItem = {
attrs = {
...attrs,
role: 'option',
'aria-selected': props.isSelected,
'aria-selected': this.isSelected,
};
} else if (props.role === null || props.role === 'none') {
// sometimes we want to specify role inside <li/> element
@ -199,7 +209,6 @@ const MenuItem = {
...mouseEvent,
ref: this.saveNode,
};
delete liProps.children;
return (
<li {...liProps} style={styles} class={className}>
{getSlot(this)}
@ -207,15 +216,7 @@ const MenuItem = {
</li>
);
},
};
});
const connected = connect(
({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
active: activeKey[subMenuKey] === eventKey,
isSelected: selectedKeys.indexOf(eventKey) !== -1,
}),
injectExtraPropsKey,
)(MenuItem);
export default connected;
export default InjectExtraProps(MenuItem);
export { props as menuItemProps };

View File

@ -1,17 +1,25 @@
import { inject, provide } from 'vue';
import {
computed,
defineComponent,
getCurrentInstance,
inject,
onBeforeUnmount,
onMounted,
provide,
reactive,
} from 'vue';
import omit from 'omit.js';
import PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger';
import KeyCode from '../_util/KeyCode';
import { connect } from '../_util/store';
import SubPopupMenu from './SubPopupMenu';
import placements from './placements';
import BaseMixin from '../_util/BaseMixin';
import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
import { getComponent, splitAttrs, findDOMNode, getSlot } from '../_util/props-util';
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
import { noop, getMenuIdFromSubMenuEventKey } from './util';
import { noop, getMenuIdFromSubMenuEventKey, loopMenuItemRecursively } from './util';
import { getTransitionProps, Transition } from '../_util/transition';
import { injectExtraPropsKey } from './FunctionProvider';
import InjectExtraProps from './InjectExtraProps';
let guid = 0;
const popupPlacementMap = {
@ -23,33 +31,27 @@ const popupPlacementMap = {
const updateDefaultActiveFirst = (store, eventKey, defaultActiveFirst) => {
const menuId = getMenuIdFromSubMenuEventKey(eventKey);
const state = store.getState();
store.setState({
defaultActiveFirst: {
...state.defaultActiveFirst,
[menuId]: defaultActiveFirst,
},
});
store.defaultActiveFirst[menuId] = defaultActiveFirst;
};
const SubMenu = {
let indexGuid = 0;
const SubMenu = defineComponent({
name: 'SubMenu',
mixins: [BaseMixin],
inheritAttrs: false,
isSubMenu: true,
props: {
title: PropTypes.any,
selectedKeys: PropTypes.array.def([]),
openKeys: PropTypes.array.def([]),
openChange: PropTypes.func.def(noop),
rootPrefixCls: PropTypes.string,
eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
multiple: PropTypes.looseBool,
active: PropTypes.looseBool, // TODO: remove
isRootMenu: PropTypes.looseBool.def(false),
index: PropTypes.number,
triggerSubMenuAction: PropTypes.string,
popupClassName: PropTypes.string,
getPopupContainer: PropTypes.func,
forceSubMenuRender: PropTypes.looseBool.def(true),
forceSubMenuRender: PropTypes.looseBool.def(false),
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
disabled: PropTypes.looseBool,
subMenuOpenDelay: PropTypes.number.def(0.1),
@ -58,8 +60,6 @@ const SubMenu = {
inlineIndent: PropTypes.number.def(24),
openTransitionName: PropTypes.string,
popupOffset: PropTypes.array,
isOpen: PropTypes.looseBool,
store: PropTypes.object,
mode: PropTypes.oneOf([
'horizontal',
'vertical',
@ -73,20 +73,58 @@ const SubMenu = {
expandIcon: PropTypes.any,
subMenuKey: PropTypes.string,
theme: PropTypes.string,
parentUniKeys: PropTypes.array.def(() => []),
parentUniKey: PropTypes.string,
},
mixins: [BaseMixin],
isSubMenu: true,
setup() {
return { parentMenu: inject('parentMenu', undefined) };
},
created() {
provide('parentMenu', this);
setup(props) {
const uniKey = `sub_menu_${++indexGuid}`;
const store = inject('menuStore', () => ({}));
onMounted(() => {
store.addChildrenInfo(
uniKey,
computed(() => ({
parentUniKeys: props.parentUniKeys,
parentUniKey: props.parentUniKey,
eventKey: props.eventKey,
disabled: props.disabled,
})),
);
});
onBeforeUnmount(() => {
store.removeChildrenInfo(uniKey);
});
const isChildrenSelected = computed(() => {
return store.selectedParentUniKeys.indexOf(uniKey) !== -1;
});
const ins = getCurrentInstance();
const getEl = () => {
return ins.vnode.el;
};
provide(
'parentMenu',
reactive({
isRootMenu: computed(() => props.isRootMenu),
getPopupContainer: props.getPopupContainer,
getEl,
}),
);
return {
parentMenu: inject('parentMenu', undefined),
store,
isChildrenSelected,
childrenUniKeys: [...props.parentUniKeys, uniKey],
uniKey,
isOpen: computed(() => store.openKeys.indexOf(props.eventKey) > -1),
active: computed(() => store.activeKey[props.subMenuKey] === props.eventKey),
};
},
data() {
const props = this.$props;
const store = props.store;
const store = this.store;
const eventKey = props.eventKey;
const defaultActiveFirst = store.getState().defaultActiveFirst;
const defaultActiveFirst = store.defaultActiveFirst;
let value = false;
if (defaultActiveFirst) {
@ -98,32 +136,21 @@ const SubMenu = {
this.haveRendered = undefined;
this.haveOpened = undefined;
this.subMenuTitle = undefined;
return {
// defaultActiveFirst: false,
childrenSelectedStatus: {},
};
},
computed: {
isChildrenSelected() {
return Object.values(this.childrenSelectedStatus).find(status => status);
},
return {};
},
mounted() {
this.$nextTick(() => {
this.handleUpdated();
});
this.updateParentMenuSelectedStatus();
},
updated() {
this.$nextTick(() => {
this.handleUpdated();
});
this.updateParentMenuSelectedStatus();
},
beforeUnmount() {
this.updateParentMenuSelectedStatus(false);
const { eventKey } = this;
this.__emit('destroy', eventKey);
@ -140,51 +167,40 @@ const SubMenu = {
}
},
methods: {
updateParentMenuSelectedStatus(status = this.isChildrenSelected) {
if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
}
},
setChildrenSelectedStatus(key, status) {
if (!status) {
delete this.childrenSelectedStatus[key];
} else {
this.childrenSelectedStatus[key] = status;
}
isChildrenSelected2() {
if (this.haveOpened) return this.isChildrenSelected;
const ret = { find: false };
loopMenuItemRecursively(getSlot(this), this.store.selectedKeys, ret);
return ret.find;
},
handleUpdated() {
const { mode, parentMenu, manualRef } = this;
const { mode, manualRef } = this.$props;
// invoke customized ref to expose component to mixin
if (manualRef) {
manualRef(this);
}
if (mode !== 'horizontal' || !parentMenu.isRootMenu || !this.isOpen) {
if (mode !== 'horizontal' || !this.parentMenu.isRootMenu || !this.isOpen) {
return;
}
this.minWidthTimeout = requestAnimationTimeout(() => this.adjustWidth(), 0);
},
onKeyDown(e) {
const keyCode = e.keyCode;
const menu = this.menuInstance;
const { store, isOpen } = this.$props;
const { isOpen } = this;
if (keyCode === KeyCode.ENTER) {
this.onTitleClick(e);
updateDefaultActiveFirst(store, this.eventKey, true);
updateDefaultActiveFirst(this.store, this.$props.eventKey, true);
return true;
}
if (keyCode === KeyCode.RIGHT) {
if (isOpen) {
menu.onKeyDown(e);
} else {
this.triggerOpenChange(true);
// need to update current menu's defaultActiveFirst value
updateDefaultActiveFirst(store, this.eventKey, true);
updateDefaultActiveFirst(this.store, this.$props.eventKey, true);
}
return true;
}
@ -213,8 +229,8 @@ const SubMenu = {
},
onMouseEnter(e) {
const { eventKey: key, store } = this.$props;
updateDefaultActiveFirst(store, key, false);
const { eventKey: key } = this.$props;
updateDefaultActiveFirst(this.store, key, false);
this.__emit('mouseenter', {
key,
domEvent: e,
@ -222,7 +238,7 @@ const SubMenu = {
},
onMouseLeave(e) {
const { eventKey } = this;
const { eventKey } = this.$props;
this.__emit('mouseleave', {
key: eventKey,
domEvent: e,
@ -242,7 +258,7 @@ const SubMenu = {
},
onTitleMouseLeave(e) {
const { eventKey } = this;
const { eventKey } = this.$props;
this.__emit('itemHover', {
key: eventKey,
hover: false,
@ -254,7 +270,7 @@ const SubMenu = {
},
onTitleClick(e) {
const { triggerSubMenuAction, eventKey, isOpen, store } = this.$props;
const { triggerSubMenuAction, eventKey } = this.$props;
this.__emit('titleClick', {
key: eventKey,
domEvent: e,
@ -262,8 +278,8 @@ const SubMenu = {
if (triggerSubMenuAction === 'hover') {
return;
}
this.triggerOpenChange(!isOpen, 'click');
updateDefaultActiveFirst(store, eventKey, false);
this.triggerOpenChange(!this.isOpen, 'click');
updateDefaultActiveFirst(this.store, eventKey, false);
},
onSubMenuClick(info) {
@ -301,22 +317,12 @@ const SubMenu = {
keyPath: (info.keyPath || []).concat(this.$props.eventKey),
};
},
// triggerOpenChange (open, type) {
// const key = this.$props.eventKey
// this.__emit('openChange', {
// key,
// item: this,
// trigger: type,
// open,
// })
// },
triggerOpenChange(open, type) {
const key = this.$props.eventKey;
const openChange = () => {
this.__emit('openChange', {
key,
item: this,
item: this.$props,
trigger: type,
open,
});
@ -330,16 +336,6 @@ const SubMenu = {
openChange();
}
},
// isChildrenSelected(children) {
// const ret = { find: false };
// loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
// return ret.find;
// },
// isOpen () {
// return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1
// },
adjustWidth() {
/* istanbul ignore if */
if (!this.subMenuTitle || !this.menuInstance) {
@ -356,16 +352,15 @@ const SubMenu = {
saveSubMenuTitle(subMenuTitle) {
this.subMenuTitle = subMenuTitle;
},
renderChildren(children) {
renderChildren() {
const props = { ...this.$props, ...this.$attrs };
const subPopupMenuProps = {
mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
visible: props.isOpen,
visible: this.isOpen,
level: props.level + 1,
inlineIndent: props.inlineIndent,
focusable: false,
selectedKeys: props.selectedKeys,
eventKey: `${props.eventKey}-menu-`,
openKeys: props.openKeys,
openTransitionName: props.openTransitionName,
@ -375,20 +370,18 @@ const SubMenu = {
forceSubMenuRender: props.forceSubMenuRender,
triggerSubMenuAction: props.triggerSubMenuAction,
builtinPlacements: props.builtinPlacements,
defaultActiveFirst: props.store.getState().defaultActiveFirst[
getMenuIdFromSubMenuEventKey(props.eventKey)
],
multiple: props.multiple,
prefixCls: props.rootPrefixCls,
manualRef: this.saveMenuInstance,
itemIcon: getComponent(this, 'itemIcon'),
expandIcon: getComponent(this, 'expandIcon'),
children,
onClick: this.onSubMenuClick,
onSelect: props.onSelect || noop,
onDeselect: props.onDeselect || noop,
onOpenChange: props.onOpenChange || noop,
id: this.internalMenuId,
parentUniKeys: this.childrenUniKeys,
parentUniKey: this.uniKey,
};
const haveRendered = this.haveRendered;
this.haveRendered = true;
@ -424,7 +417,7 @@ const SubMenu = {
}
return (
<Transition {...transitionProps}>
<SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps} />
<SubPopupMenu v-show={this.isOpen} {...subPopupMenuProps} v-slots={this.$slots} />
</Transition>
);
},
@ -433,19 +426,18 @@ const SubMenu = {
render() {
const props = { ...this.$props, ...this.$attrs };
const { onEvents } = splitAttrs(props);
const isOpen = props.isOpen;
const isOpen = this.isOpen;
const prefixCls = this.getPrefixCls();
const isInlineMode = props.mode === 'inline';
const childrenTemp = filterEmpty(getSlot(this));
const children = this.renderChildren(childrenTemp);
const children = this.renderChildren();
const className = {
[prefixCls]: true,
[`${prefixCls}-${props.mode}`]: true,
[props.class]: !!props.class,
[this.getOpenClassName()]: isOpen,
[this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
[this.getActiveClassName()]: this.active || (isOpen && !isInlineMode),
[this.getDisabledClassName()]: props.disabled,
[this.getSelectedClassName()]: this.isChildrenSelected,
[this.getSelectedClassName()]: this.isChildrenSelected || this.isChildrenSelected2(),
};
if (!this.internalMenuId) {
@ -511,7 +503,6 @@ const SubMenu = {
{icon || <i class={`${prefixCls}-arrow`} />}
</div>
);
const getPopupContainer = this.parentMenu.isRootMenu
? this.parentMenu.getPopupContainer
: triggerNode => triggerNode.parentNode;
@ -555,16 +546,6 @@ const SubMenu = {
</li>
);
},
};
});
const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => {
return {
isOpen: openKeys.indexOf(eventKey) > -1,
active: activeKey[subMenuKey] === eventKey,
selectedKeys,
};
}, injectExtraPropsKey)(SubMenu);
connected.isSubMenu = true;
export default connected;
export default InjectExtraProps(SubMenu);

View File

@ -1,19 +1,19 @@
import { Comment, inject } from 'vue';
import PropTypes from '../_util/vue-types';
import { connect } from '../_util/store';
import BaseMixin from '../_util/BaseMixin';
import KeyCode from '../_util/KeyCode';
import classNames from '../_util/classNames';
import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice, menuAllProps } from './util';
import { getKeyFromChildrenIndex, noop, isMobileDevice, menuAllProps } from './util';
import DOMWrap from './DOMWrap';
import {
initDefaultProps,
getOptionProps,
getComponent,
splitAttrs,
getPropsData,
getSlot,
} from '../_util/props-util';
import FunctionProvider from './FunctionProvider';
// import { getActiveKey } from '../vc-tabs/src/utils';
function allDisabled(arr) {
if (!arr.length) {
return true;
@ -24,13 +24,7 @@ function allDisabled(arr) {
}
function updateActiveKey(store, menuId, activeKey) {
const state = store.getState();
store.setState({
activeKey: {
...state.activeKey,
[menuId]: activeKey,
},
});
store.activeKey[menuId] = activeKey;
}
function getEventKey(props) {
@ -44,34 +38,34 @@ export function saveRef(key, c) {
this.instanceArray[index] = c;
}
}
export function getActiveKey(props, originalActiveKey) {
let activeKey = originalActiveKey;
const { eventKey, defaultActiveFirst, children } = props;
if (activeKey !== undefined && activeKey !== null) {
let found;
loopMenuItem(children, (c, i) => {
const propsData = getPropsData(c);
if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
found = true;
}
});
if (found) {
return activeKey;
}
}
activeKey = null;
if (defaultActiveFirst) {
loopMenuItem(children, (c, i) => {
const propsData = getPropsData(c);
const noActiveKey = activeKey === null || activeKey === undefined;
if (noActiveKey && c && !propsData.disabled) {
activeKey = getKeyFromChildrenIndex(c, eventKey, i);
}
});
return activeKey;
}
return activeKey;
}
// export function getActiveKey(props, originalActiveKey) {
// let activeKey = originalActiveKey;
// const { eventKey, defaultActiveFirst, children } = props;
// if (activeKey !== undefined && activeKey !== null) {
// let found;
// loopMenuItem(children, (c, i) => {
// const propsData = getPropsData(c);
// if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
// found = true;
// }
// });
// if (found) {
// return activeKey;
// }
// }
// activeKey = null;
// if (defaultActiveFirst) {
// loopMenuItem(children, (c, i) => {
// const propsData = getPropsData(c);
// const noActiveKey = activeKey === null || activeKey === undefined;
// if (noActiveKey && c && !propsData.disabled) {
// activeKey = getKeyFromChildrenIndex(c, eventKey, i);
// }
// });
// return activeKey;
// }
// return activeKey;
// }
const SubPopupMenu = {
name: 'SubPopupMenu',
@ -89,14 +83,12 @@ const SubPopupMenu = {
openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
visible: PropTypes.looseBool,
eventKey: PropTypes.string,
store: PropTypes.object,
// adding in refactor
focusable: PropTypes.looseBool,
multiple: PropTypes.looseBool,
defaultActiveFirst: PropTypes.looseBool,
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
defaultSelectedKeys: PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
),
@ -116,7 +108,9 @@ const SubPopupMenu = {
expandIcon: PropTypes.any,
overflowedIndicator: PropTypes.any,
children: PropTypes.any.def([]),
forceSubMenuRender: PropTypes.looseBool.def(true),
forceSubMenuRender: PropTypes.looseBool.def(false),
parentUniKeys: PropTypes.array.def(() => []),
parentUniKey: PropTypes.string,
},
{
prefixCls: 'rc-menu',
@ -131,17 +125,13 @@ const SubPopupMenu = {
mixins: [BaseMixin],
setup() {
return { parentMenu: inject('parentMenu', undefined) };
const store = inject('menuStore', () => ({}));
return { store };
},
created() {
const props = getOptionProps(this);
this.prevProps = { ...props };
props.store.setState({
activeKey: {
...props.store.getState().activeKey,
[props.eventKey]: getActiveKey(props, props.activeKey),
},
});
this.store.activeKey[props.eventKey] = this.store.getActiveKey(props.activeKey);
this.instanceArray = [];
},
mounted() {
@ -154,16 +144,16 @@ const SubPopupMenu = {
const props = getOptionProps(this);
const prevProps = this.prevProps;
const originalActiveKey =
'activeKey' in props ? props.activeKey : props.store.getState().activeKey[getEventKey(props)];
const activeKey = getActiveKey(props, originalActiveKey);
'activeKey' in props ? props.activeKey : this.store.activeKey[getEventKey(props)];
const activeKey = this.store.getActiveKey(originalActiveKey);
if (activeKey !== originalActiveKey) {
updateActiveKey(props.store, getEventKey(props), activeKey);
updateActiveKey(this.store, getEventKey(props), activeKey);
} else if ('activeKey' in prevProps) {
// If prev activeKey is not same as current activeKey,
// we should set it.
const prevActiveKey = getActiveKey(prevProps, prevProps.activeKey);
const prevActiveKey = this.store.getActiveKey(prevProps.activeKey);
if (activeKey !== prevActiveKey) {
updateActiveKey(props.store, getEventKey(props), activeKey);
updateActiveKey(this.store, getEventKey(props), activeKey);
}
}
this.prevProps = { ...props };
@ -187,7 +177,7 @@ const SubPopupMenu = {
}
if (activeItem) {
e.preventDefault();
updateActiveKey(this.$props.store, getEventKey(this.$props), activeItem.eventKey);
updateActiveKey(this.store, getEventKey(this.$props), activeItem.eventKey);
if (typeof callback === 'function') {
callback(activeItem);
@ -200,7 +190,7 @@ const SubPopupMenu = {
onItemHover(e) {
const { key, hover } = e;
updateActiveKey(this.$props.store, getEventKey(this.$props), hover ? key : null);
updateActiveKey(this.store, getEventKey(this.$props), hover ? key : null);
},
onDeselect(selectInfo) {
@ -233,7 +223,7 @@ const SubPopupMenu = {
step(direction) {
let children = this.getFlatInstanceArray();
const activeKey = this.$props.store.getState().activeKey[getEventKey(this.$props)];
const activeKey = this.store.activeKey[getEventKey(this.$props)];
const len = children.length;
if (!len) {
return null;
@ -278,7 +268,7 @@ const SubPopupMenu = {
if (child.type === Comment) {
return child;
}
const state = this.$props.store.getState();
const state = this.store;
const props = this.$props;
const key = getKeyFromChildrenIndex(child, props.eventKey, i);
const childProps = child.props || {}; // child.props
@ -317,6 +307,8 @@ const SubPopupMenu = {
onDeselect: this.onDeselect,
// destroy: this.onDestroy,
onSelect: this.onSelect,
parentUniKeys: this.parentUniKeys,
parentUniKey: this.parentUniKey,
};
if (props.forceSubMenuRender !== undefined) {
newChildProps.forceSubMenuRender = props.forceSubMenuRender;
@ -325,14 +317,14 @@ const SubPopupMenu = {
if (props.mode === 'inline' || isMobileDevice()) {
newChildProps.triggerSubMenuAction = 'click';
}
return <FunctionProvider {...newChildProps}>{child}</FunctionProvider>;
return <FunctionProvider extraProps={newChildProps}>{child}</FunctionProvider>;
},
renderMenuItem(c, i, subMenuKey) {
if (!c) {
return null;
}
const state = this.$props.store.getState();
const state = this.store;
const extraProps = {
openKeys: state.openKeys,
selectedKeys: state.selectedKeys,
@ -384,11 +376,11 @@ const SubPopupMenu = {
// ESLint is not smart enough to know that the type of `children` was checked.
/* eslint-disable */
<DOMWrap {...domWrapProps}>
{props.children.map((c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'))}
{getSlot(this).map((c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'))}
</DOMWrap>
/*eslint -enable */
);
},
};
export default connect(undefined)(SubPopupMenu);
export default SubPopupMenu;

View File

@ -3,7 +3,6 @@ export default {
prefixCls: PropTypes.string.def('rc-menu'),
focusable: PropTypes.looseBool.def(true),
multiple: PropTypes.looseBool,
defaultActiveFirst: PropTypes.looseBool,
visible: PropTypes.looseBool.def(true),
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
@ -30,7 +29,7 @@ export default {
theme: PropTypes.oneOf(['light', 'dark']).def('light'),
getPopupContainer: PropTypes.func,
openTransitionName: PropTypes.string,
forceSubMenuRender: PropTypes.looseBool.def(true),
forceSubMenuRender: PropTypes.looseBool.def(false),
selectable: PropTypes.looseBool,
isRootMenu: PropTypes.looseBool.def(true),
builtinPlacements: PropTypes.object.def(() => ({})),
@ -40,5 +39,4 @@ export default {
onClick: PropTypes.func,
onSelect: PropTypes.func,
onDeselect: PropTypes.func,
children: PropTypes.VNodeChild,
};

View File

@ -12,21 +12,21 @@ export function getMenuIdFromSubMenuEventKey(eventKey) {
return `${eventKey}-menu-`;
}
export function loopMenuItem(children, cb) {
let index = -1;
children.forEach(c => {
index++;
if (c && c.type && c.type.isMenuItemGroup) {
c.children.default &&
c.children.default().forEach(c2 => {
index++;
cb(c2, index);
});
} else {
cb(c, index);
}
});
}
// export function loopMenuItem(children, cb) {
// let index = -1;
// children.forEach(c => {
// index++;
// if (c && c.type && c.type.isMenuItemGroup) {
// c.children.default &&
// c.children.default().forEach(c2 => {
// index++;
// cb(c2, index);
// });
// } else {
// cb(c, index);
// }
// });
// }
export function loopMenuItemRecursively(children, keys, ret) {
if (!children || ret.find) {
@ -113,6 +113,8 @@ export const menuAllProps = [
'slots',
'ref',
'isRootMenu',
'parentUniKeys',
'parentUniKey',
];
// ref: https://github.com/ant-design/ant-design/issues/14007

View File

@ -1,39 +1,30 @@
<template>
<div>
<demo />
</div>
<a-dropdown>
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
Cascading menu <DownOutlined />
</a>
<template #overlay>
<a-menu>
<a-menu-item>1st menu item</a-menu-item>
<a-menu-item>2nd menu item</a-menu-item>
<a-sub-menu key="test" title="sub menu">
<a-menu-item>3rd menu item</a-menu-item>
<a-menu-item>4th menu item</a-menu-item>
</a-sub-menu>
<a-sub-menu title="disabled sub menu" disabled>
<a-menu-item>5d menu item</a-menu-item>
<a-menu-item>6th menu item</a-menu-item>
</a-sub-menu>
</a-menu>
</template>
</a-dropdown>
</template>
<script>
import { defineComponent } from 'vue';
import demo from '../antdv-demo/docs/tree-select/demo';
// import Affix from '../components/affix';
export default defineComponent({
import { DownOutlined } from '@ant-design/icons-vue';
export default {
components: {
demo,
// Affix,
DownOutlined,
},
data() {
return {
visible: false,
pStyle: {
fontSize: '16px',
color: 'rgba(0,0,0,0.85)',
lineHeight: '24px',
display: 'block',
marginBottom: '16px',
},
pStyle2: {
marginBottom: '24px',
},
};
},
methods: {
showDrawer() {
this.visible = true;
},
onClose() {
this.visible = false;
},
},
});
};
</script>