parent
2d6b50242c
commit
da6d243e9e
|
@ -10,7 +10,6 @@
|
|||
|
||||
---
|
||||
|
||||
|
||||
## 2.0.0-rc.1
|
||||
|
||||
`2020-11-14`
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit 7cccccbb5571e61b35aca0d454eb83bc5924995e
|
||||
Subproject commit ef827839524b6f1ed427aefa082adb09ac2cc95f
|
|
@ -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>;
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -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} />;
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 =
|
||||
// ================================================================
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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>;
|
||||
},
|
||||
|
||||
|
|
|
@ -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} />;
|
||||
},
|
||||
|
|
|
@ -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?.();
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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} />;
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue