refactor: menu
tangjinzhou
parent
ad9d635e35
commit
2ca66f4121
|
|
@ -1,66 +0,0 @@
|
|||
import { defineComponent, inject } from 'vue';
|
||||
import { Item, itemProps } from '../vc-menu';
|
||||
import { getOptionProps, getSlot } from '../_util/props-util';
|
||||
import Tooltip, { TooltipProps } from '../tooltip';
|
||||
import { SiderContextProps } from '../layout/Sider';
|
||||
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuItem',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
...itemProps,
|
||||
onClick: PropTypes.func,
|
||||
},
|
||||
isMenuItem: true,
|
||||
setup() {
|
||||
return {
|
||||
getInlineCollapsed: inject<() => boolean>('getInlineCollapsed', () => false),
|
||||
layoutSiderContext: inject<SiderContextProps>('layoutSiderContext', {}),
|
||||
injectExtraProps: inject(injectExtraPropsKey, () => ({})),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onKeyDown(e: HTMLElement) {
|
||||
(this.$refs.menuItem as any).onKeyDown(e);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const props = getOptionProps(this);
|
||||
const { level, title, rootPrefixCls } = { ...props, ...this.injectExtraProps } as any;
|
||||
const { getInlineCollapsed, $attrs: attrs } = this;
|
||||
const inlineCollapsed = getInlineCollapsed();
|
||||
let tooltipTitle = title;
|
||||
const children = getSlot(this);
|
||||
if (typeof title === 'undefined') {
|
||||
tooltipTitle = level === 1 ? children : '';
|
||||
} else if (title === false) {
|
||||
tooltipTitle = '';
|
||||
}
|
||||
const tooltipProps: TooltipProps = {
|
||||
title: tooltipTitle,
|
||||
};
|
||||
const siderCollapsed = this.layoutSiderContext.sCollapsed;
|
||||
if (!siderCollapsed && !inlineCollapsed) {
|
||||
tooltipProps.title = null;
|
||||
// Reset `visible` to fix control mode tooltip display not correct
|
||||
// ref: https://github.com/ant-design/ant-design/issues/16742
|
||||
tooltipProps.visible = false;
|
||||
}
|
||||
|
||||
const itemProps = {
|
||||
...props,
|
||||
title,
|
||||
...attrs,
|
||||
ref: 'menuItem',
|
||||
};
|
||||
const toolTipProps: TooltipProps = {
|
||||
...tooltipProps,
|
||||
placement: 'right',
|
||||
overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
|
||||
};
|
||||
const item = <Item {...itemProps}>{children}</Item>;
|
||||
return <Tooltip {...toolTipProps}>{item}</Tooltip>;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { defineComponent, inject } from 'vue';
|
||||
import { SubMenu as VcSubMenu } from '../vc-menu';
|
||||
import classNames from '../_util/classNames';
|
||||
import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
|
||||
|
||||
export type MenuTheme = 'light' | 'dark';
|
||||
|
||||
export interface MenuContextProps {
|
||||
inlineCollapsed?: boolean;
|
||||
theme?: MenuTheme;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ASubMenu',
|
||||
isSubMenu: true,
|
||||
inheritAttrs: false,
|
||||
props: { ...VcSubMenu.props },
|
||||
setup() {
|
||||
return {
|
||||
menuPropsContext: inject<MenuContextProps>('menuPropsContext', {}),
|
||||
injectExtraProps: inject(injectExtraPropsKey, () => ({})),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onKeyDown(e: Event) {
|
||||
(this.$refs.subMenu as any).onKeyDown(e);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { $slots, $attrs } = this;
|
||||
const { rootPrefixCls, popupClassName } = { ...this.$props, ...this.injectExtraProps } as any;
|
||||
const { theme: antdMenuTheme } = this.menuPropsContext;
|
||||
const props = {
|
||||
...this.$props,
|
||||
popupClassName: classNames(`${rootPrefixCls}-${antdMenuTheme}`, popupClassName),
|
||||
ref: 'subMenu',
|
||||
...$attrs,
|
||||
} as any;
|
||||
return <VcSubMenu {...props} v-slots={$slots}></VcSubMenu>;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
|
||||
<div>
|
||||
<ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-horizontal">
|
||||
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" class="ant-menu-item ant-menu-item-selected"><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>Navigation One
|
||||
<!---->
|
||||
</li>
|
||||
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" aria-disabled="true" class="ant-menu-item ant-menu-item-disabled"><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>Navigation Two
|
||||
<!---->
|
||||
</li>
|
||||
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<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">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<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">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" class="ant-menu-item"><a href="https://antdv.com" target="_blank" rel="noopener noreferrer"> Navigation Four - Link </a>
|
||||
<!---->
|
||||
</li>
|
||||
<li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;" role="menuitem">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/inline.md correctly 1`] = `
|
||||
<div>
|
||||
<ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="width: 256px;" id="dddddd">
|
||||
<li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" 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" id="sub1$Menu">
|
||||
<li class="ant-menu-item-group">
|
||||
<div class="ant-menu-item-group-title"><span role="img" aria-label="qq" class="anticon anticon-qq"><svg class="" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"></path></svg></span><span>Item 1</span></div>
|
||||
<ul class="ant-menu-item-group-list">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item ant-menu-item-selected">Option 1
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 2
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ant-menu-item-group">
|
||||
<div class="ant-menu-item-group-title" title="Item 2">Item 2</div>
|
||||
<ul class="ant-menu-item-group-list">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item"> Option 3
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item"> Option 4
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!---->
|
||||
</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>
|
||||
<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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button">
|
||||
<!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
|
||||
</button>
|
||||
<ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item ant-menu-item-selected"><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 1</span>
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item"><span role="img" aria-label="desktop" class="anticon anticon-desktop"><svg class="" data-icon="desktop" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"></path></svg></span><span>Option 2</span>
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024" focusable="false"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span><span>Option 3</span>
|
||||
<!---->
|
||||
</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" id="sub1$Menu">
|
||||
<!---->
|
||||
<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 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>
|
||||
</ul>
|
||||
<!---->
|
||||
</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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
|
||||
<div>
|
||||
<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" id="sub1$Menu">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 1
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 2
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 4
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
<!---->
|
||||
</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>
|
||||
<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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
|
||||
<div><button class="ant-switch" type="button" role="switch" aria-checked="false">
|
||||
<!----><span class="ant-switch-inner"><!----></span>
|
||||
</button> Change Mode <span class="ant-divider" style="margin: 0px 1em;"></span><button class="ant-switch" type="button" role="switch" aria-checked="false">
|
||||
<!----><span class="ant-switch-inner"><!----></span>
|
||||
</button> Change Theme <br><br>
|
||||
<ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="width: 256px;">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item ant-menu-item-selected"><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> Navigation One
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span> Navigation Two
|
||||
<!---->
|
||||
</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" id="sub1$Menu">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 4
|
||||
<!---->
|
||||
</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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
<!---->
|
||||
</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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/template.md correctly 1`] = `
|
||||
<div style="width: 256px;"><button style="margin-bottom: 16px;" class="ant-btn ant-btn-primary" type="button">
|
||||
<!----><span role="img" aria-label="menu-fold" class="anticon anticon-menu-fold"><svg class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span>
|
||||
</button>
|
||||
<ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item ant-menu-item-selected"><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 1</span>
|
||||
<!---->
|
||||
</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" 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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
|
||||
<div><button class="ant-switch ant-switch-checked" type="button" role="switch" aria-checked="true">
|
||||
<!----><span class="ant-switch-inner">dark</span>
|
||||
</button><br><br>
|
||||
<ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-inline" style="width: 256px;">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item ant-menu-item-selected"><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> Navigation One
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 24px;" class="ant-menu-item"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span> Navigation Two
|
||||
<!---->
|
||||
</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" id="sub1$Menu">
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 4
|
||||
<!---->
|
||||
</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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
<!---->
|
||||
</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>
|
||||
<div></div>
|
||||
<!---->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/menu/demo/vertical.md correctly 1`] = `
|
||||
<div>
|
||||
<ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-vertical" style="width: 256px;">
|
||||
<!---->
|
||||
<li role="menuitem" class="ant-menu-item"><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> Navigation One
|
||||
<!---->
|
||||
</li>
|
||||
<!---->
|
||||
<li role="menuitem" class="ant-menu-item"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span> Navigation Two
|
||||
<!---->
|
||||
</li>
|
||||
<li class="ant-menu-submenu ant-menu-submenu-vertical" role="menuitem">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<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">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<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>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('menu');
|
||||
|
|
@ -1,542 +0,0 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
import Menu from '..';
|
||||
import { InboxOutlined, PieChartOutlined } from '@ant-design/icons-vue';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
function $$(className) {
|
||||
return document.body.querySelectorAll(className);
|
||||
}
|
||||
describe('Menu', () => {
|
||||
mountTest({
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Menu>
|
||||
<Menu.Item />
|
||||
<Menu.ItemGroup />
|
||||
<Menu.SubMenu />
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
// jest.useFakeTimers()
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// jest.useRealTimers()
|
||||
});
|
||||
it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', async () => {
|
||||
mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu defaultSelectedKeys={['1-3-2']} mode="vertical">
|
||||
<SubMenu key="1" title="submenu1">
|
||||
<Menu.Item key="1-1">Option 1</Menu.Item>
|
||||
<Menu.Item key="1-2">Option 2</Menu.Item>
|
||||
<SubMenu key="1-3" title="submenu1-3">
|
||||
<Menu.Item key="1-3-1">Option 3</Menu.Item>
|
||||
<Menu.Item key="1-3-2">Option 4</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ attachTo: 'body', sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-submenu-selected').length).toBe(1);
|
||||
});
|
||||
});
|
||||
it('should accept defaultOpenKeys in mode horizontal', async () => {
|
||||
mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu defaultOpenKeys={['1']} 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')[0].parentElement.style.display).not.toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
it('should accept defaultOpenKeys in mode inline', async () => {
|
||||
mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu defaultOpenKeys={['1']} mode="inline">
|
||||
<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');
|
||||
});
|
||||
});
|
||||
|
||||
it('should accept defaultOpenKeys in mode vertical', async () => {
|
||||
mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu defaultOpenKeys={['1']} mode="vertical">
|
||||
<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');
|
||||
});
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
it('inline', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: {
|
||||
openKeys: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['1'];
|
||||
},
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Menu openKeys={this.openKeys} mode="inline" openAnimation="">
|
||||
<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].style.display).not.toBe('none');
|
||||
});
|
||||
wrapper.setProps({ openKeys: [] });
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
|
||||
}, 0);
|
||||
wrapper.setProps({ openKeys: ['1'] });
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('vertical', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: {
|
||||
openKeys: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ['1'];
|
||||
},
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Menu openKeys={this.openKeys} mode="vertical" 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);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pulls/4677
|
||||
// https://github.com/ant-design/ant-design/issues/4692
|
||||
// TypeError: Cannot read property 'indexOf' of undefined
|
||||
it('pr #4677 and issue #4692', () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu mode="horizontal">
|
||||
<SubMenu title="submenu">
|
||||
<Menu.Item key="1">menu1</Menu.Item>
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ attachTo: 'body', sync: false },
|
||||
);
|
||||
wrapper.vm.$forceUpdate();
|
||||
// just expect no error emit
|
||||
});
|
||||
|
||||
it('should always follow openKeys when mode is switched', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'inline',
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Menu openKeys={['1']} mode={this.mode}>
|
||||
<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($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
});
|
||||
wrapper.setProps({ mode: 'vertical' });
|
||||
await asyncExpect(() => {
|
||||
expect($$('ul.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
|
||||
}, 0);
|
||||
wrapper.setProps({ mode: 'inline' });
|
||||
await asyncExpect(() => {
|
||||
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should always follow openKeys when inlineCollapsed is switched', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: {
|
||||
inlineCollapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Menu
|
||||
ref="menu"
|
||||
defaultOpenKeys={['1']}
|
||||
mode="inline"
|
||||
inlineCollapsed={this.inlineCollapsed}
|
||||
>
|
||||
<Menu.Item key="menu1">
|
||||
<InboxOutlined />
|
||||
<span>Option</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
<Menu.Item key="submenu1">Option</Menu.Item>
|
||||
<Menu.Item key="submenu2">Option</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ attachTo: 'body', sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
|
||||
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
}, 0);
|
||||
wrapper.setProps({ inlineCollapsed: true });
|
||||
await asyncExpect(() => {
|
||||
// 动画完成后的回调
|
||||
wrapper.vm.$refs.menu.switchModeFromInline = false;
|
||||
wrapper.vm.$forceUpdate();
|
||||
});
|
||||
// await asyncExpect(() => {
|
||||
// wrapper.trigger('transitionend', { propertyName: 'width' });
|
||||
// });
|
||||
// await asyncExpect(() => {
|
||||
// expect(wrapper.findAll('ul.ant-menu-root')[0].classes()).toContain('ant-menu-vertical');
|
||||
// expect(wrapper.findAll('ul.ant-menu-sub').length).toBe(0);
|
||||
// }, 500);
|
||||
wrapper.setProps({ inlineCollapsed: false });
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('ul.ant-menu-sub')[0].classes()).toContain('ant-menu-inline');
|
||||
expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('inlineCollapsed should works well when specify a not existed default openKeys', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
props: {
|
||||
inlineCollapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Menu
|
||||
ref="menu"
|
||||
defaultOpenKeys={['not-existed']}
|
||||
mode="inline"
|
||||
inlineCollapsed={this.inlineCollapsed}
|
||||
>
|
||||
<Menu.Item key="menu1">
|
||||
<InboxOutlined />
|
||||
<span>Option</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
<Menu.Item key="submenu1">Option</Menu.Item>
|
||||
<Menu.Item key="submenu2">Option</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ attachTo: 'body', sync: false },
|
||||
);
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
|
||||
});
|
||||
wrapper.setProps({ inlineCollapsed: true });
|
||||
await asyncExpect(() => {
|
||||
// 动画完成后的回调
|
||||
wrapper.vm.$refs.menu.switchModeFromInline = false;
|
||||
wrapper.vm.$forceUpdate();
|
||||
});
|
||||
// await asyncExpect(() => {
|
||||
// wrapper.trigger('transitionend', { propertyName: 'width' });
|
||||
// });
|
||||
// await asyncExpect(() => {
|
||||
// $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
|
||||
// });
|
||||
// await asyncExpect(() => {
|
||||
// expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
|
||||
// 'ant-menu-submenu-vertical',
|
||||
// );
|
||||
// expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open');
|
||||
// expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
|
||||
// expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
// }, 500);
|
||||
});
|
||||
|
||||
describe('open submenu when click submenu title', () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
const toggleMenu = (wrapper, index, event) => {
|
||||
wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
|
||||
};
|
||||
|
||||
it('inline', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu mode="inline">
|
||||
<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, 0, 'click');
|
||||
}, 0);
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub').length).toBe(1);
|
||||
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
|
||||
toggleMenu(wrapper, 0, 'click');
|
||||
}, 500);
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub')[0].style.display).toBe('none');
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('vertical', async () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu mode="vertical">
|
||||
<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, 0, 'mouseenter');
|
||||
}, 0);
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub').length).toBe(1);
|
||||
expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
|
||||
toggleMenu(wrapper, 0, 'mouseleave');
|
||||
}, 500);
|
||||
await asyncExpect(() => {
|
||||
expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
|
||||
}, 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, 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 () => {
|
||||
const wrapper = mount(
|
||||
{
|
||||
render() {
|
||||
return (
|
||||
<Menu mode="inline" inlineCollapsed>
|
||||
<Menu.Item key="1" title="bamboo lucky">
|
||||
<PieChartOutlined />
|
||||
<span>
|
||||
Option 1
|
||||
<img
|
||||
style={{ width: 20 }}
|
||||
alt="test"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
/>
|
||||
</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ sync: false, attachTo: 'body' },
|
||||
);
|
||||
|
||||
wrapper.find('.ant-menu-item').trigger('mouseenter');
|
||||
await asyncExpect(() => {
|
||||
const text = $$('.ant-tooltip-inner')[0].textContent;
|
||||
expect(text).toBe('bamboo lucky');
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,323 +0,0 @@
|
|||
import { defineComponent, inject, provide, toRef, App, ExtractPropTypes, Plugin } from 'vue';
|
||||
import omit from 'omit.js';
|
||||
import VcMenu, { Divider, ItemGroup } from '../vc-menu';
|
||||
import SubMenu from './SubMenu';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import animation from '../_util/openAnimation';
|
||||
import warning from '../_util/warning';
|
||||
import Item from './MenuItem';
|
||||
import { hasProp, getOptionProps } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import commonPropsType from '../vc-menu/commonPropsType';
|
||||
import { defaultConfigProvider } from '../config-provider';
|
||||
import { SiderContextProps } from '../layout/Sider';
|
||||
import { tuple } from '../_util/type';
|
||||
// import raf from '../_util/raf';
|
||||
|
||||
export const MenuMode = PropTypes.oneOf([
|
||||
'vertical',
|
||||
'vertical-left',
|
||||
'vertical-right',
|
||||
'horizontal',
|
||||
'inline',
|
||||
]);
|
||||
|
||||
export const menuProps = {
|
||||
...commonPropsType,
|
||||
theme: PropTypes.oneOf(tuple('light', 'dark')).def('light'),
|
||||
mode: MenuMode.def('vertical'),
|
||||
selectable: PropTypes.looseBool,
|
||||
selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||
openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||
defaultOpenKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
||||
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
openTransitionName: PropTypes.string,
|
||||
prefixCls: PropTypes.string,
|
||||
multiple: PropTypes.looseBool,
|
||||
inlineIndent: PropTypes.number.def(24),
|
||||
inlineCollapsed: PropTypes.looseBool,
|
||||
isRootMenu: PropTypes.looseBool.def(true),
|
||||
focusable: PropTypes.looseBool.def(false),
|
||||
onOpenChange: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
onDeselect: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onMouseenter: PropTypes.func,
|
||||
onSelectChange: PropTypes.func,
|
||||
};
|
||||
|
||||
export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
|
||||
|
||||
const Menu = defineComponent({
|
||||
name: 'AMenu',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: menuProps,
|
||||
Divider: { ...Divider, name: 'AMenuDivider' },
|
||||
Item: { ...Item, name: 'AMenuItem' },
|
||||
SubMenu: { ...SubMenu, name: 'ASubMenu' },
|
||||
ItemGroup: { ...ItemGroup, name: 'AMenuItemGroup' },
|
||||
emits: [
|
||||
'update:selectedKeys',
|
||||
'update:openKeys',
|
||||
'mouseenter',
|
||||
'openChange',
|
||||
'click',
|
||||
'selectChange',
|
||||
'select',
|
||||
'deselect',
|
||||
],
|
||||
setup() {
|
||||
const layoutSiderContext = inject<SiderContextProps>('layoutSiderContext', {});
|
||||
const layoutSiderCollapsed = toRef(layoutSiderContext, 'sCollapsed');
|
||||
return {
|
||||
configProvider: inject('configProvider', defaultConfigProvider),
|
||||
layoutSiderContext,
|
||||
layoutSiderCollapsed,
|
||||
propsUpdating: false,
|
||||
switchingModeFromInline: false,
|
||||
leaveAnimationExecutedWhenInlineCollapsed: false,
|
||||
inlineOpenKeys: [],
|
||||
};
|
||||
},
|
||||
data() {
|
||||
const props: MenuProps = getOptionProps(this);
|
||||
warning(
|
||||
!('inlineCollapsed' in props && props.mode !== 'inline'),
|
||||
'Menu',
|
||||
"`inlineCollapsed` should only be used when Menu's `mode` is inline.",
|
||||
);
|
||||
let sOpenKeys: (number | string)[];
|
||||
|
||||
if ('openKeys' in props) {
|
||||
sOpenKeys = props.openKeys;
|
||||
} else if ('defaultOpenKeys' in props) {
|
||||
sOpenKeys = props.defaultOpenKeys;
|
||||
}
|
||||
return {
|
||||
sOpenKeys,
|
||||
};
|
||||
},
|
||||
// beforeUnmount() {
|
||||
// raf.cancel(this.mountRafId);
|
||||
// },
|
||||
watch: {
|
||||
mode(val, oldVal) {
|
||||
if (oldVal === 'inline' && val !== 'inline') {
|
||||
this.switchingModeFromInline = true;
|
||||
}
|
||||
},
|
||||
openKeys(val) {
|
||||
this.setState({ sOpenKeys: val });
|
||||
},
|
||||
inlineCollapsed(val) {
|
||||
this.collapsedChange(val);
|
||||
},
|
||||
layoutSiderCollapsed(val) {
|
||||
this.collapsedChange(val);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
provide('getInlineCollapsed', this.getInlineCollapsed);
|
||||
provide('menuPropsContext', this.$props);
|
||||
},
|
||||
updated() {
|
||||
this.propsUpdating = false;
|
||||
},
|
||||
methods: {
|
||||
collapsedChange(val: unknown) {
|
||||
if (this.propsUpdating) {
|
||||
return;
|
||||
}
|
||||
this.propsUpdating = true;
|
||||
if (!hasProp(this, 'openKeys')) {
|
||||
if (val) {
|
||||
this.switchingModeFromInline = true;
|
||||
this.inlineOpenKeys = this.sOpenKeys;
|
||||
this.setState({ sOpenKeys: [] });
|
||||
} else {
|
||||
this.setState({ sOpenKeys: this.inlineOpenKeys });
|
||||
this.inlineOpenKeys = [];
|
||||
}
|
||||
} else if (val) {
|
||||
// 缩起时，openKeys置为空的动画会闪动，react可以通过是否传递openKeys避免闪动，vue不是很方便动态传递openKeys
|
||||
this.switchingModeFromInline = true;
|
||||
}
|
||||
},
|
||||
restoreModeVerticalFromInline() {
|
||||
if (this.switchingModeFromInline) {
|
||||
this.switchingModeFromInline = false;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
// Restore vertical mode when menu is collapsed responsively when mounted
|
||||
// https://github.com/ant-design/ant-design/issues/13104
|
||||
// TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation
|
||||
handleMouseEnter(e: Event) {
|
||||
this.restoreModeVerticalFromInline();
|
||||
this.$emit('mouseenter', e);
|
||||
},
|
||||
handleTransitionEnd(e: TransitionEvent) {
|
||||
// when inlineCollapsed menu width animation finished
|
||||
// https://github.com/ant-design/ant-design/issues/12864
|
||||
const widthCollapsed = e.propertyName === 'width' && e.target === e.currentTarget;
|
||||
|
||||
// Fix SVGElement e.target.className.indexOf is not a function
|
||||
// https://github.com/ant-design/ant-design/issues/15699
|
||||
const { className } = e.target as SVGAnimationElement | HTMLElement;
|
||||
// SVGAnimatedString.animVal should be identical to SVGAnimatedString.baseVal, unless during an animation.
|
||||
const classNameValue =
|
||||
Object.prototype.toString.call(className) === '[object SVGAnimatedString]'
|
||||
? className.animVal
|
||||
: className;
|
||||
|
||||
// Fix for <Menu style={{ width: '100%' }} />, the width transition won't trigger when menu is collapsed
|
||||
// https://github.com/ant-design/ant-design-pro/issues/2783
|
||||
const iconScaled = e.propertyName === 'font-size' && classNameValue.indexOf('anticon') >= 0;
|
||||
|
||||
if (widthCollapsed || iconScaled) {
|
||||
this.restoreModeVerticalFromInline();
|
||||
}
|
||||
},
|
||||
handleClick(e: Event) {
|
||||
this.handleOpenChange([]);
|
||||
this.$emit('click', e);
|
||||
},
|
||||
handleSelect(info) {
|
||||
this.$emit('update:selectedKeys', info.selectedKeys);
|
||||
this.$emit('select', info);
|
||||
this.$emit('selectChange', info.selectedKeys);
|
||||
},
|
||||
handleDeselect(info) {
|
||||
this.$emit('update:selectedKeys', info.selectedKeys);
|
||||
this.$emit('deselect', info);
|
||||
this.$emit('selectChange', info.selectedKeys);
|
||||
},
|
||||
handleOpenChange(openKeys: (number | string)[]) {
|
||||
this.setOpenKeys(openKeys);
|
||||
this.$emit('update:openKeys', openKeys);
|
||||
this.$emit('openChange', openKeys);
|
||||
},
|
||||
setOpenKeys(openKeys: (number | string)[]) {
|
||||
if (!hasProp(this, 'openKeys')) {
|
||||
this.setState({ sOpenKeys: openKeys });
|
||||
}
|
||||
},
|
||||
getRealMenuMode() {
|
||||
const inlineCollapsed = this.getInlineCollapsed();
|
||||
if (this.switchingModeFromInline && inlineCollapsed) {
|
||||
return 'inline';
|
||||
}
|
||||
const { mode } = this.$props;
|
||||
return inlineCollapsed ? 'vertical' : mode;
|
||||
},
|
||||
getInlineCollapsed() {
|
||||
const { inlineCollapsed } = this.$props;
|
||||
if (this.layoutSiderContext.sCollapsed !== undefined) {
|
||||
return this.layoutSiderContext.sCollapsed;
|
||||
}
|
||||
return inlineCollapsed;
|
||||
},
|
||||
getMenuOpenAnimation(menuMode: string) {
|
||||
const { openAnimation, openTransitionName } = this.$props;
|
||||
let menuOpenAnimation = openAnimation || openTransitionName;
|
||||
if (openAnimation === undefined && openTransitionName === undefined) {
|
||||
if (menuMode === 'horizontal') {
|
||||
menuOpenAnimation = 'slide-up';
|
||||
} else if (menuMode === 'inline') {
|
||||
menuOpenAnimation = animation;
|
||||
} else {
|
||||
// When mode switch from inline
|
||||
// submenu should hide without animation
|
||||
if (this.switchingModeFromInline) {
|
||||
menuOpenAnimation = '';
|
||||
this.switchingModeFromInline = false;
|
||||
} else {
|
||||
menuOpenAnimation = 'zoom-big';
|
||||
}
|
||||
}
|
||||
}
|
||||
return menuOpenAnimation;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const { layoutSiderContext } = this;
|
||||
const { collapsedWidth } = layoutSiderContext;
|
||||
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
|
||||
const props = getOptionProps(this);
|
||||
const { prefixCls: customizePrefixCls, theme, getPopupContainer } = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('menu', customizePrefixCls);
|
||||
const menuMode = this.getRealMenuMode();
|
||||
const menuOpenAnimation = this.getMenuOpenAnimation(menuMode);
|
||||
const { class: className, ...otherAttrs } = this.$attrs;
|
||||
const menuClassName = {
|
||||
[className as string]: className,
|
||||
[`${prefixCls}-${theme}`]: true,
|
||||
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
|
||||
};
|
||||
|
||||
const menuProps = {
|
||||
...omit(props, [
|
||||
'inlineCollapsed',
|
||||
'onUpdate:selectedKeys',
|
||||
'onUpdate:openKeys',
|
||||
'onSelectChange',
|
||||
]),
|
||||
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
||||
openKeys: this.sOpenKeys,
|
||||
mode: menuMode,
|
||||
prefixCls,
|
||||
...otherAttrs,
|
||||
onSelect: this.handleSelect,
|
||||
onDeselect: this.handleDeselect,
|
||||
onOpenChange: this.handleOpenChange,
|
||||
onMouseenter: this.handleMouseEnter,
|
||||
onTransitionend: this.handleTransitionEnd,
|
||||
// children: getSlot(this),
|
||||
};
|
||||
if (!hasProp(this, 'selectedKeys')) {
|
||||
delete menuProps.selectedKeys;
|
||||
}
|
||||
|
||||
if (menuMode !== 'inline') {
|
||||
// closing vertical popup submenu after click it
|
||||
menuProps.onClick = this.handleClick;
|
||||
menuProps.openTransitionName = menuOpenAnimation;
|
||||
} else {
|
||||
menuProps.onClick = (e: Event) => {
|
||||
this.$emit('click', e);
|
||||
};
|
||||
menuProps.openAnimation = menuOpenAnimation;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/8587
|
||||
const hideMenu =
|
||||
this.getInlineCollapsed() &&
|
||||
(collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px');
|
||||
if (hideMenu) {
|
||||
menuProps.openKeys = [];
|
||||
}
|
||||
|
||||
return <VcMenu {...menuProps} class={menuClassName} v-slots={this.$slots} />;
|
||||
},
|
||||
});
|
||||
|
||||
/* istanbul ignore next */
|
||||
Menu.install = function(app: App) {
|
||||
app.component(Menu.name, Menu);
|
||||
app.component(Menu.Item.name, Menu.Item);
|
||||
app.component(Menu.SubMenu.name, Menu.SubMenu);
|
||||
app.component(Menu.Divider.name, Menu.Divider);
|
||||
app.component(Menu.ItemGroup.name, Menu.ItemGroup);
|
||||
return app;
|
||||
};
|
||||
|
||||
export default Menu as typeof Menu &
|
||||
Plugin & {
|
||||
readonly Item: typeof Item;
|
||||
readonly SubMenu: typeof SubMenu;
|
||||
readonly Divider: typeof Divider;
|
||||
readonly ItemGroup: typeof ItemGroup;
|
||||
};
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
.@{menu-prefix-cls} {
|
||||
// dark theme
|
||||
&-dark,
|
||||
&-dark &-sub {
|
||||
color: @menu-dark-color;
|
||||
background: @menu-dark-bg;
|
||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 0.45;
|
||||
transition: all 0.3s;
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dark&-submenu-popup {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&-dark &-inline&-sub {
|
||||
background: @menu-dark-submenu-bg;
|
||||
box-shadow: 0 2px 8px fade(@black, 45%) inset;
|
||||
}
|
||||
|
||||
&-dark&-horizontal {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-dark&-horizontal > &-item,
|
||||
&-dark&-horizontal > &-submenu {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
border-color: @menu-dark-bg;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-dark&-horizontal > &-item > a::before {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&-dark &-item,
|
||||
&-dark &-item-group-title,
|
||||
&-dark &-item > a {
|
||||
color: @menu-dark-color;
|
||||
}
|
||||
|
||||
&-dark&-inline,
|
||||
&-dark&-vertical,
|
||||
&-dark&-vertical-left,
|
||||
&-dark&-vertical-right {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&-dark&-inline &-item,
|
||||
&-dark&-vertical &-item,
|
||||
&-dark&-vertical-left &-item,
|
||||
&-dark&-vertical-right &-item {
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-dark&-inline &-item,
|
||||
&-dark&-inline &-submenu-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-dark &-item:hover,
|
||||
&-dark &-item-active,
|
||||
&-dark &-submenu-active,
|
||||
&-dark &-submenu-open,
|
||||
&-dark &-submenu-selected,
|
||||
&-dark &-submenu-title:hover {
|
||||
color: @menu-dark-highlight-color;
|
||||
background-color: transparent;
|
||||
> a {
|
||||
color: @menu-dark-highlight-color;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title,
|
||||
> .@{menu-prefix-cls}-submenu-title:hover {
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 1;
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-dark &-item:hover {
|
||||
background-color: @menu-dark-item-hover-bg;
|
||||
}
|
||||
|
||||
&-dark &-item-selected {
|
||||
color: @menu-dark-highlight-color;
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
> a,
|
||||
> a:hover {
|
||||
color: @menu-dark-highlight-color;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @menu-dark-selected-item-icon-color;
|
||||
}
|
||||
.@{iconfont-css-prefix} + span {
|
||||
color: @menu-dark-selected-item-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&&-dark &-item-selected,
|
||||
&-submenu-popup&-dark &-item-selected {
|
||||
background-color: @menu-dark-item-active-bg;
|
||||
}
|
||||
|
||||
// Disabled state sets text to dark gray and nukes hover/tab effects
|
||||
&-dark &-item-disabled,
|
||||
&-dark &-submenu-disabled {
|
||||
&,
|
||||
> a {
|
||||
color: @disabled-color-dark !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color-dark !important;
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::before,
|
||||
&::after {
|
||||
background: @disabled-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,515 +0,0 @@
|
|||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||
|
||||
// default theme
|
||||
.@{menu-prefix-cls} {
|
||||
.reset-component();
|
||||
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
color: @menu-item-color;
|
||||
line-height: 0; // Fix display inline-block gap
|
||||
list-style: none;
|
||||
background: @menu-bg;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||
.clearfix();
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
padding: 8px 16px;
|
||||
color: @menu-item-group-title-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-submenu,
|
||||
&-submenu-inline {
|
||||
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
|
||||
padding 0.15s @ease-in-out;
|
||||
}
|
||||
|
||||
&-submenu-selected {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
&-item:active,
|
||||
&-submenu-title:active {
|
||||
background: @menu-item-active-bg;
|
||||
}
|
||||
|
||||
&-submenu &-sub {
|
||||
cursor: initial;
|
||||
transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
&-item > a {
|
||||
display: block;
|
||||
color: @menu-item-color;
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/19809
|
||||
&-item > .@{ant-prefix}-badge > a {
|
||||
color: @menu-item-color;
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-divider {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
|
||||
&-item:hover,
|
||||
&-item-active,
|
||||
&:not(&-inline) &-submenu-open,
|
||||
&-submenu-active,
|
||||
&-submenu-title:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
&-horizontal &-item,
|
||||
&-horizontal &-submenu {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&-horizontal > &-item:hover,
|
||||
&-horizontal > &-item-active,
|
||||
&-horizontal > &-submenu &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
color: @menu-highlight-color;
|
||||
> a,
|
||||
> a:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-horizontal) &-item-selected {
|
||||
background-color: @menu-item-active-bg;
|
||||
}
|
||||
|
||||
&-inline,
|
||||
&-vertical,
|
||||
&-vertical-left {
|
||||
border-right: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
&-vertical-right {
|
||||
border-left: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
|
||||
&-vertical&-sub,
|
||||
&-vertical-left&-sub,
|
||||
&-vertical-right&-sub {
|
||||
min-width: 160px;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
transform-origin: 0 0;
|
||||
|
||||
.@{menu-prefix-cls}-item {
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-sub {
|
||||
min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-submenu-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
||||
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
+ span {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > &-item-divider {
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
|
||||
&-submenu {
|
||||
&-popup {
|
||||
position: absolute;
|
||||
z-index: @zindex-dropdown;
|
||||
// background: @menu-popup-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.submenu-title-wrapper {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.0001;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls} {
|
||||
background-color: @menu-bg;
|
||||
border-radius: @border-radius-base;
|
||||
&-submenu-title::after {
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
// background + background-image to makes before & after cross have same color.
|
||||
// Since `linear-gradient` not work on IE9, we should hack it.
|
||||
// ref: https://github.com/ant-design/ant-design/issues/15910
|
||||
background: @menu-bg;
|
||||
background: ~'@{menu-item-color} \9';
|
||||
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
|
||||
background-image: ~'none \9';
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
|
||||
top 0.3s @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
&::before {
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(2px);
|
||||
}
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::after,
|
||||
&::before {
|
||||
background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2px);
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(45deg) translateX(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
&-open {
|
||||
&.@{menu-prefix-cls}-submenu-inline
|
||||
> .@{menu-prefix-cls}-submenu-title
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
transform: translateY(-2px);
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2px);
|
||||
}
|
||||
&::before {
|
||||
transform: rotate(45deg) translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical &-submenu-selected,
|
||||
&-vertical-left &-submenu-selected,
|
||||
&-vertical-right &-submenu-selected {
|
||||
color: @menu-highlight-color;
|
||||
> a {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
line-height: 46px;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
box-shadow: none;
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&:hover,
|
||||
&-active,
|
||||
&-open,
|
||||
&-selected {
|
||||
color: @menu-highlight-color;
|
||||
border-bottom: 2px solid @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls}-item {
|
||||
> a {
|
||||
display: block;
|
||||
color: @menu-item-color;
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
&::before {
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
&-selected > a {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
content: '\20';
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical,
|
||||
&-vertical-left,
|
||||
&-vertical-right,
|
||||
&-inline {
|
||||
.@{menu-prefix-cls}-item {
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-right: @menu-item-active-border-width solid @menu-highlight-color;
|
||||
transform: scaleY(0.0001);
|
||||
opacity: 0;
|
||||
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
height: @menu-item-height;
|
||||
margin-top: @menu-item-vertical-margin;
|
||||
margin-bottom: @menu-item-vertical-margin;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
font-size: @menu-item-font-size;
|
||||
line-height: @menu-item-height;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// disable margin collapsed
|
||||
.@{menu-prefix-cls}-submenu {
|
||||
padding-bottom: 0.02px;
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item:not(:last-child) {
|
||||
margin-bottom: @menu-item-boundary-margin;
|
||||
}
|
||||
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
height: @menu-inline-toplevel-item-height;
|
||||
line-height: @menu-inline-toplevel-item-height;
|
||||
}
|
||||
}
|
||||
|
||||
&-inline {
|
||||
width: 100%;
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
&::after {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
width: ~'calc(100% + 1px)';
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&-inline-collapsed {
|
||||
width: @menu-collapsed-width;
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group
|
||||
> .@{menu-prefix-cls}-item-group-list
|
||||
> .@{menu-prefix-cls}-item,
|
||||
> .@{menu-prefix-cls}-item-group
|
||||
> .@{menu-prefix-cls}-item-group-list
|
||||
> .@{menu-prefix-cls}-submenu
|
||||
> .@{menu-prefix-cls}-submenu-title,
|
||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
left: 0;
|
||||
padding: 0 ((@menu-collapsed-width - @menu-icon-size-lg) / 2) !important;
|
||||
text-overflow: clip;
|
||||
.@{menu-prefix-cls}-submenu-arrow {
|
||||
display: none;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
margin: 0;
|
||||
font-size: @menu-icon-size-lg;
|
||||
line-height: @menu-item-height;
|
||||
+ span {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-tooltip {
|
||||
pointer-events: none;
|
||||
.@{iconfont-css-prefix} {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: @text-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.@{menu-prefix-cls}-item-group-title {
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.@{menu-prefix-cls}-item,
|
||||
.@{menu-prefix-cls}-submenu-title {
|
||||
padding: 0 16px 0 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&-root&-vertical,
|
||||
&-root&-vertical-left,
|
||||
&-root&-vertical-right,
|
||||
&-root&-inline {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-sub&-inline {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
& > .@{menu-prefix-cls}-item,
|
||||
& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||
height: @menu-item-height;
|
||||
line-height: @menu-item-height;
|
||||
list-style-position: inside;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
& .@{menu-prefix-cls}-item-group-title {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state sets text to gray and nukes hover/tab effects
|
||||
&-item-disabled,
|
||||
&-submenu-disabled {
|
||||
color: @disabled-color !important;
|
||||
background: none;
|
||||
border-color: transparent !important;
|
||||
cursor: not-allowed;
|
||||
> a {
|
||||
color: @disabled-color !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
color: @disabled-color !important;
|
||||
cursor: not-allowed;
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
&::before,
|
||||
&::after {
|
||||
background: @disabled-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './dark';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: layout
|
||||
import '../../tooltip/style';
|
||||
Loading…
Reference in New Issue