refactor: menu (#4110)
tangjinzhou
GitHub
parent
ea8ff66989
commit
67952ab5a6
|
|
@ -1,4 +1,12 @@
|
||||||
import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
|
import {
|
||||||
|
BaseTransitionProps,
|
||||||
|
CSSProperties,
|
||||||
|
defineComponent,
|
||||||
|
nextTick,
|
||||||
|
Ref,
|
||||||
|
Transition as T,
|
||||||
|
TransitionGroup as TG,
|
||||||
|
} from 'vue';
|
||||||
import { findDOMNode } from './props-util';
|
import { findDOMNode } from './props-util';
|
||||||
|
|
||||||
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
|
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
|
||||||
|
|
@ -80,6 +88,63 @@ if (process.env.NODE_ENV === 'test') {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Transition, TransitionGroup };
|
export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
|
||||||
|
deadline?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export declare type MotionEventHandler = (element: Element, done?: () => void) => CSSProperties;
|
||||||
|
|
||||||
|
export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
|
||||||
|
|
||||||
|
// ================== Collapse Motion ==================
|
||||||
|
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
|
||||||
|
const getRealHeight: MotionEventHandler = node => ({
|
||||||
|
height: `${node.scrollHeight}px`,
|
||||||
|
opacity: 1,
|
||||||
|
});
|
||||||
|
const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: `${node.offsetHeight}px` });
|
||||||
|
// const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
|
||||||
|
// (event as TransitionEvent).propertyName === 'height';
|
||||||
|
|
||||||
|
export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
|
||||||
|
name?: string;
|
||||||
|
css?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const collapseMotion = (style: Ref<CSSProperties>, className: Ref<string>): CSSMotionProps => {
|
||||||
|
return {
|
||||||
|
name: 'ant-motion-collapse',
|
||||||
|
appear: true,
|
||||||
|
css: true,
|
||||||
|
onBeforeEnter: node => {
|
||||||
|
className.value = 'ant-motion-collapse';
|
||||||
|
style.value = getCollapsedHeight(node);
|
||||||
|
},
|
||||||
|
onEnter: node => {
|
||||||
|
nextTick(() => {
|
||||||
|
style.value = getRealHeight(node);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onAfterEnter: () => {
|
||||||
|
className.value = '';
|
||||||
|
style.value = {};
|
||||||
|
},
|
||||||
|
onBeforeLeave: node => {
|
||||||
|
className.value = 'ant-motion-collapse';
|
||||||
|
style.value = getCurrentHeight(node);
|
||||||
|
},
|
||||||
|
onLeave: node => {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
style.value = getCollapsedHeight(node);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onAfterLeave: () => {
|
||||||
|
className.value = '';
|
||||||
|
style.value = {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Transition, TransitionGroup, collapseMotion };
|
||||||
|
|
||||||
export default Transition;
|
export default Transition;
|
||||||
|
|
|
||||||
|
|
@ -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,322 +1,22 @@
|
||||||
import { defineComponent, inject, provide, toRef, App, ExtractPropTypes, Plugin } from 'vue';
|
import Menu from './src/Menu';
|
||||||
import omit from 'omit.js';
|
import MenuItem from './src/MenuItem';
|
||||||
import VcMenu, { Divider, ItemGroup } from '../vc-menu';
|
import SubMenu from './src/SubMenu';
|
||||||
import SubMenu from './SubMenu';
|
import ItemGroup from './src/ItemGroup';
|
||||||
import PropTypes from '../_util/vue-types';
|
import Divider from './src/Divider';
|
||||||
import animation from '../_util/openAnimation';
|
import { App } from 'vue';
|
||||||
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 */
|
/* istanbul ignore next */
|
||||||
Menu.install = function(app: App) {
|
Menu.install = function(app: App) {
|
||||||
app.component(Menu.name, Menu);
|
app.component(Menu.name, Menu);
|
||||||
app.component(Menu.Item.name, Menu.Item);
|
app.component(MenuItem.name, MenuItem);
|
||||||
app.component(Menu.SubMenu.name, Menu.SubMenu);
|
app.component(SubMenu.name, SubMenu);
|
||||||
app.component(Menu.Divider.name, Menu.Divider);
|
app.component(Divider.name, Divider);
|
||||||
app.component(Menu.ItemGroup.name, Menu.ItemGroup);
|
app.component(ItemGroup.name, ItemGroup);
|
||||||
return app;
|
return app;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Menu as typeof Menu &
|
export default Menu as typeof Menu &
|
||||||
Plugin & {
|
Plugin & {
|
||||||
readonly Item: typeof Item;
|
readonly Item: typeof MenuItem;
|
||||||
readonly SubMenu: typeof SubMenu;
|
readonly SubMenu: typeof SubMenu;
|
||||||
readonly Divider: typeof Divider;
|
readonly Divider: typeof Divider;
|
||||||
readonly ItemGroup: typeof ItemGroup;
|
readonly ItemGroup: typeof ItemGroup;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Divider',
|
||||||
|
props: {
|
||||||
|
prefixCls: String,
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
return () => {
|
||||||
|
return <li class={`${props.prefixCls}-item-divider`} />;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
|
||||||
|
import Transition from '../../_util/transition';
|
||||||
|
import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
|
||||||
|
import SubMenuList from './SubMenuList';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'InlineSubMenuList',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
id: String,
|
||||||
|
open: Boolean,
|
||||||
|
keyPath: Array,
|
||||||
|
},
|
||||||
|
setup(props, { slots }) {
|
||||||
|
const fixedMode = computed(() => 'inline');
|
||||||
|
const { motion, mode, defaultMotions } = useInjectMenu();
|
||||||
|
const sameModeRef = computed(() => mode.value === fixedMode.value);
|
||||||
|
const destroy = ref(!sameModeRef.value);
|
||||||
|
|
||||||
|
const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
|
||||||
|
|
||||||
|
// ================================= Effect =================================
|
||||||
|
// Reset destroy state when mode change back
|
||||||
|
watch(
|
||||||
|
mode,
|
||||||
|
() => {
|
||||||
|
if (sameModeRef.value) {
|
||||||
|
destroy.value = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ flush: 'post' },
|
||||||
|
);
|
||||||
|
const style = ref({});
|
||||||
|
const className = ref('');
|
||||||
|
const mergedMotion = computed(() => {
|
||||||
|
const m =
|
||||||
|
motion.value || defaultMotions.value?.[fixedMode.value] || defaultMotions.value?.other;
|
||||||
|
const res = typeof m === 'function' ? m(style, className) : m;
|
||||||
|
return { ...res, appear: props.keyPath.length <= 1 };
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
if (destroy.value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<MenuContextProvider
|
||||||
|
props={{
|
||||||
|
mode: fixedMode,
|
||||||
|
locked: !sameModeRef.value,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Transition {...mergedMotion.value}>
|
||||||
|
<SubMenuList
|
||||||
|
v-show={mergedOpen.value}
|
||||||
|
id={props.id}
|
||||||
|
style={style.value}
|
||||||
|
class={className.value}
|
||||||
|
>
|
||||||
|
{slots.default?.()}
|
||||||
|
</SubMenuList>
|
||||||
|
</Transition>
|
||||||
|
</MenuContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { getPropsSlot } from '../../_util/props-util';
|
||||||
|
import { computed, defineComponent } from 'vue';
|
||||||
|
import PropTypes from '../../_util/vue-types';
|
||||||
|
import { useInjectMenu } from './hooks/useMenuContext';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'AMenuItemGroup',
|
||||||
|
props: {
|
||||||
|
title: PropTypes.VNodeChild,
|
||||||
|
},
|
||||||
|
inheritAttrs: false,
|
||||||
|
slots: ['title'],
|
||||||
|
setup(props, { slots, attrs }) {
|
||||||
|
const { prefixCls } = useInjectMenu();
|
||||||
|
const groupPrefixCls = computed(() => `${prefixCls.value}-item-group`);
|
||||||
|
return () => {
|
||||||
|
return (
|
||||||
|
<li {...attrs} onClick={e => e.stopPropagation()} class={groupPrefixCls.value}>
|
||||||
|
<div
|
||||||
|
title={typeof props.title === 'string' ? props.title : undefined}
|
||||||
|
class={`${groupPrefixCls.value}-title`}
|
||||||
|
>
|
||||||
|
{getPropsSlot(slots, props, 'title')}
|
||||||
|
</div>
|
||||||
|
<ul class={`${groupPrefixCls.value}-list`}>{slots.default?.()}</ul>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,328 @@
|
||||||
|
import { Key } from '../../_util/type';
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
defineComponent,
|
||||||
|
ExtractPropTypes,
|
||||||
|
ref,
|
||||||
|
PropType,
|
||||||
|
inject,
|
||||||
|
watchEffect,
|
||||||
|
watch,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
toRaw,
|
||||||
|
unref,
|
||||||
|
} from 'vue';
|
||||||
|
import shallowEqual from '../../_util/shallowequal';
|
||||||
|
import useProvideMenu, { StoreMenuInfo, useProvideFirstLevel } from './hooks/useMenuContext';
|
||||||
|
import useConfigInject from '../../_util/hooks/useConfigInject';
|
||||||
|
import {
|
||||||
|
MenuTheme,
|
||||||
|
MenuMode,
|
||||||
|
BuiltinPlacements,
|
||||||
|
TriggerSubMenuAction,
|
||||||
|
MenuInfo,
|
||||||
|
SelectInfo,
|
||||||
|
} from './interface';
|
||||||
|
import devWarning from '../../vc-util/devWarning';
|
||||||
|
import { collapseMotion, CSSMotionProps } from '../../_util/transition';
|
||||||
|
import uniq from 'lodash-es/uniq';
|
||||||
|
|
||||||
|
export const menuProps = {
|
||||||
|
prefixCls: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
inlineCollapsed: Boolean,
|
||||||
|
overflowDisabled: Boolean,
|
||||||
|
openKeys: Array,
|
||||||
|
selectedKeys: Array,
|
||||||
|
selectable: { type: Boolean, default: true },
|
||||||
|
multiple: { type: Boolean, default: false },
|
||||||
|
|
||||||
|
motion: Object as PropType<CSSMotionProps>,
|
||||||
|
|
||||||
|
theme: { type: String as PropType<MenuTheme>, default: 'light' },
|
||||||
|
mode: { type: String as PropType<MenuMode>, default: 'vertical' },
|
||||||
|
|
||||||
|
inlineIndent: { type: Number, default: 24 },
|
||||||
|
subMenuOpenDelay: { type: Number, default: 0.1 },
|
||||||
|
subMenuCloseDelay: { type: Number, default: 0.1 },
|
||||||
|
|
||||||
|
builtinPlacements: { type: Object as PropType<BuiltinPlacements> },
|
||||||
|
|
||||||
|
triggerSubMenuAction: { type: String as PropType<TriggerSubMenuAction>, default: 'hover' },
|
||||||
|
|
||||||
|
getPopupContainer: Function as PropType<(node: HTMLElement) => HTMLElement>,
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'AMenu',
|
||||||
|
props: menuProps,
|
||||||
|
emits: ['update:openKeys', 'openChange', 'select', 'deselect', 'update:selectedKeys', 'click'],
|
||||||
|
setup(props, { slots, emit }) {
|
||||||
|
const { prefixCls, direction } = useConfigInject('menu', props);
|
||||||
|
const store = reactive<Record<string, StoreMenuInfo>>({});
|
||||||
|
const siderCollapsed = inject(
|
||||||
|
'layoutSiderCollapsed',
|
||||||
|
computed(() => undefined),
|
||||||
|
);
|
||||||
|
const inlineCollapsed = computed(() => {
|
||||||
|
if (siderCollapsed.value !== undefined) {
|
||||||
|
return siderCollapsed.value;
|
||||||
|
}
|
||||||
|
return props.inlineCollapsed;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isMounted = ref(false);
|
||||||
|
onMounted(() => {
|
||||||
|
isMounted.value = true;
|
||||||
|
});
|
||||||
|
watchEffect(() => {
|
||||||
|
devWarning(
|
||||||
|
!(props.inlineCollapsed === true && props.mode !== 'inline'),
|
||||||
|
'Menu',
|
||||||
|
'`inlineCollapsed` should only be used when `mode` is inline.',
|
||||||
|
);
|
||||||
|
|
||||||
|
devWarning(
|
||||||
|
!(siderCollapsed.value !== undefined && props.inlineCollapsed === true),
|
||||||
|
'Menu',
|
||||||
|
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeKeys = ref([]);
|
||||||
|
const mergedSelectedKeys = ref([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.selectedKeys,
|
||||||
|
(selectedKeys = mergedSelectedKeys.value) => {
|
||||||
|
mergedSelectedKeys.value = selectedKeys;
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedSubMenuEventKeys = ref([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
[store, mergedSelectedKeys],
|
||||||
|
() => {
|
||||||
|
let subMenuParentEventKeys = [];
|
||||||
|
(Object.values(toRaw(store)) as any).forEach((menuInfo: StoreMenuInfo) => {
|
||||||
|
if (mergedSelectedKeys.value.includes(menuInfo.key)) {
|
||||||
|
subMenuParentEventKeys.push(...unref(menuInfo.parentEventKeys));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
subMenuParentEventKeys = uniq(subMenuParentEventKeys);
|
||||||
|
if (!shallowEqual(selectedSubMenuEventKeys.value, subMenuParentEventKeys)) {
|
||||||
|
selectedSubMenuEventKeys.value = subMenuParentEventKeys;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
// >>>>> Trigger select
|
||||||
|
const triggerSelection = (info: MenuInfo) => {
|
||||||
|
if (!props.selectable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Insert or Remove
|
||||||
|
const { key: targetKey } = info;
|
||||||
|
const exist = mergedSelectedKeys.value.includes(targetKey);
|
||||||
|
let newSelectedKeys: Key[];
|
||||||
|
|
||||||
|
if (exist && props.multiple) {
|
||||||
|
newSelectedKeys = mergedSelectedKeys.value.filter(key => key !== targetKey);
|
||||||
|
} else if (props.multiple) {
|
||||||
|
newSelectedKeys = [...mergedSelectedKeys.value, targetKey];
|
||||||
|
} else {
|
||||||
|
newSelectedKeys = [targetKey];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger event
|
||||||
|
const selectInfo: SelectInfo = {
|
||||||
|
...info,
|
||||||
|
selectedKeys: newSelectedKeys,
|
||||||
|
};
|
||||||
|
if (!('selectedKeys' in props)) {
|
||||||
|
mergedSelectedKeys.value = newSelectedKeys;
|
||||||
|
}
|
||||||
|
if (!shallowEqual(newSelectedKeys, mergedSelectedKeys.value)) {
|
||||||
|
emit('update:selectedKeys', newSelectedKeys);
|
||||||
|
if (exist && props.multiple) {
|
||||||
|
emit('deselect', selectInfo);
|
||||||
|
} else {
|
||||||
|
emit('select', selectInfo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const mergedOpenKeys = ref([]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.openKeys,
|
||||||
|
(openKeys = mergedOpenKeys.value) => {
|
||||||
|
if (!shallowEqual(mergedOpenKeys.value, openKeys)) {
|
||||||
|
mergedOpenKeys.value = openKeys;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
const changeActiveKeys = (keys: Key[]) => {
|
||||||
|
activeKeys.value = keys;
|
||||||
|
};
|
||||||
|
const disabled = computed(() => !!props.disabled);
|
||||||
|
const isRtl = computed(() => direction.value === 'rtl');
|
||||||
|
const mergedMode = ref<MenuMode>('vertical');
|
||||||
|
const mergedInlineCollapsed = ref(false);
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (props.mode === 'inline' && inlineCollapsed.value) {
|
||||||
|
mergedMode.value = 'vertical';
|
||||||
|
mergedInlineCollapsed.value = inlineCollapsed.value;
|
||||||
|
} else {
|
||||||
|
mergedMode.value = props.mode;
|
||||||
|
mergedInlineCollapsed.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const isInlineMode = computed(() => mergedMode.value === 'inline');
|
||||||
|
|
||||||
|
// >>>>> Cache & Reset open keys when inlineCollapsed changed
|
||||||
|
const inlineCacheOpenKeys = ref(mergedOpenKeys.value);
|
||||||
|
|
||||||
|
const mountRef = ref(false);
|
||||||
|
|
||||||
|
// Cache
|
||||||
|
watch(
|
||||||
|
mergedOpenKeys,
|
||||||
|
() => {
|
||||||
|
if (isInlineMode.value) {
|
||||||
|
inlineCacheOpenKeys.value = mergedOpenKeys.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
// Restore
|
||||||
|
watch(
|
||||||
|
isInlineMode,
|
||||||
|
() => {
|
||||||
|
if (!mountRef.value) {
|
||||||
|
mountRef.value = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isInlineMode.value) {
|
||||||
|
mergedOpenKeys.value = inlineCacheOpenKeys.value;
|
||||||
|
} else {
|
||||||
|
const empty = [];
|
||||||
|
mergedOpenKeys.value = empty;
|
||||||
|
// Trigger open event in case its in control
|
||||||
|
emit('update:openKeys', empty);
|
||||||
|
emit('openChange', empty);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
const className = computed(() => {
|
||||||
|
return {
|
||||||
|
[`${prefixCls.value}`]: true,
|
||||||
|
[`${prefixCls.value}-root`]: true,
|
||||||
|
[`${prefixCls.value}-${mergedMode.value}`]: true,
|
||||||
|
[`${prefixCls.value}-inline-collapsed`]: mergedInlineCollapsed.value,
|
||||||
|
[`${prefixCls.value}-rtl`]: isRtl.value,
|
||||||
|
[`${prefixCls.value}-${props.theme}`]: true,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultMotions = {
|
||||||
|
horizontal: { name: `ant-slide-up` },
|
||||||
|
inline: collapseMotion,
|
||||||
|
other: { name: `ant-zoom-big` },
|
||||||
|
};
|
||||||
|
|
||||||
|
useProvideFirstLevel(true);
|
||||||
|
|
||||||
|
const getChildrenKeys = (eventKeys: string[] = []): Key[] => {
|
||||||
|
const keys = [];
|
||||||
|
eventKeys.forEach(eventKey => {
|
||||||
|
const { key, childrenEventKeys } = store[eventKey];
|
||||||
|
keys.push(key, ...getChildrenKeys(childrenEventKeys));
|
||||||
|
});
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================= Open =========================
|
||||||
|
/**
|
||||||
|
* Click for item. SubMenu do not have selection status
|
||||||
|
*/
|
||||||
|
const onInternalClick = (info: MenuInfo) => {
|
||||||
|
emit('click', info);
|
||||||
|
triggerSelection(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onInternalOpenChange = (eventKey: Key, open: boolean) => {
|
||||||
|
const { key, childrenEventKeys } = store[eventKey];
|
||||||
|
let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
|
||||||
|
|
||||||
|
if (open) {
|
||||||
|
newOpenKeys.push(key);
|
||||||
|
} else if (mergedMode.value !== 'inline') {
|
||||||
|
// We need find all related popup to close
|
||||||
|
const subPathKeys = getChildrenKeys(childrenEventKeys);
|
||||||
|
newOpenKeys = newOpenKeys.filter(k => !subPathKeys.includes(k));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!shallowEqual(mergedOpenKeys, newOpenKeys)) {
|
||||||
|
mergedOpenKeys.value = newOpenKeys;
|
||||||
|
emit('update:openKeys', newOpenKeys);
|
||||||
|
emit('openChange', newOpenKeys);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const registerMenuInfo = (key: string, info: StoreMenuInfo) => {
|
||||||
|
store[key] = info as any;
|
||||||
|
};
|
||||||
|
const unRegisterMenuInfo = (key: string) => {
|
||||||
|
delete store[key];
|
||||||
|
};
|
||||||
|
|
||||||
|
useProvideMenu({
|
||||||
|
store,
|
||||||
|
prefixCls,
|
||||||
|
activeKeys,
|
||||||
|
openKeys: mergedOpenKeys,
|
||||||
|
selectedKeys: mergedSelectedKeys,
|
||||||
|
changeActiveKeys,
|
||||||
|
disabled,
|
||||||
|
rtl: isRtl,
|
||||||
|
mode: mergedMode,
|
||||||
|
inlineIndent: computed(() => props.inlineIndent),
|
||||||
|
subMenuCloseDelay: computed(() => props.subMenuCloseDelay),
|
||||||
|
subMenuOpenDelay: computed(() => props.subMenuOpenDelay),
|
||||||
|
builtinPlacements: computed(() => props.builtinPlacements),
|
||||||
|
triggerSubMenuAction: computed(() => props.triggerSubMenuAction),
|
||||||
|
getPopupContainer: computed(() => props.getPopupContainer),
|
||||||
|
inlineCollapsed: mergedInlineCollapsed,
|
||||||
|
antdMenuTheme: computed(() => props.theme),
|
||||||
|
siderCollapsed,
|
||||||
|
defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)),
|
||||||
|
motion: computed(() => (isMounted.value ? props.motion : null)),
|
||||||
|
overflowDisabled: computed(() => props.overflowDisabled),
|
||||||
|
onOpenChange: onInternalOpenChange,
|
||||||
|
onItemClick: onInternalClick,
|
||||||
|
registerMenuInfo,
|
||||||
|
unRegisterMenuInfo,
|
||||||
|
selectedSubMenuEventKeys,
|
||||||
|
isRootMenu: true,
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
return <ul class={className.value}>{slots.default?.()}</ul>;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
|
||||||
|
import PropTypes from '../../_util/vue-types';
|
||||||
|
import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
|
||||||
|
import { useInjectKeyPath } from './hooks/useKeyPath';
|
||||||
|
import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
|
||||||
|
import { cloneElement } from '../../_util/vnode';
|
||||||
|
import Tooltip from '../../tooltip';
|
||||||
|
import { MenuInfo } from './interface';
|
||||||
|
|
||||||
|
let indexGuid = 0;
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'AMenuItem',
|
||||||
|
props: {
|
||||||
|
role: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
danger: Boolean,
|
||||||
|
title: { type: [String, Boolean], default: undefined },
|
||||||
|
icon: PropTypes.VNodeChild,
|
||||||
|
},
|
||||||
|
emits: ['mouseenter', 'mouseleave', 'click'],
|
||||||
|
slots: ['icon'],
|
||||||
|
inheritAttrs: false,
|
||||||
|
setup(props, { slots, emit, attrs }) {
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
const key = instance.vnode.key;
|
||||||
|
const eventKey = `menu_item_${++indexGuid}_$$_${key}`;
|
||||||
|
const { parentEventKeys } = useInjectKeyPath();
|
||||||
|
const {
|
||||||
|
prefixCls,
|
||||||
|
activeKeys,
|
||||||
|
disabled,
|
||||||
|
changeActiveKeys,
|
||||||
|
rtl,
|
||||||
|
inlineCollapsed,
|
||||||
|
siderCollapsed,
|
||||||
|
onItemClick,
|
||||||
|
selectedKeys,
|
||||||
|
store,
|
||||||
|
registerMenuInfo,
|
||||||
|
unRegisterMenuInfo,
|
||||||
|
} = useInjectMenu();
|
||||||
|
const firstLevel = useInjectFirstLevel();
|
||||||
|
const isActive = ref(false);
|
||||||
|
const keyPath = computed(() => {
|
||||||
|
return [...parentEventKeys.value.map(eK => store[eK].key), key];
|
||||||
|
});
|
||||||
|
|
||||||
|
const keysPath = computed(() => [...parentEventKeys.value, eventKey]);
|
||||||
|
const menuInfo = {
|
||||||
|
eventKey,
|
||||||
|
key,
|
||||||
|
parentEventKeys,
|
||||||
|
isLeaf: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
registerMenuInfo(eventKey, menuInfo);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
unRegisterMenuInfo(eventKey);
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
activeKeys,
|
||||||
|
() => {
|
||||||
|
isActive.value = !!activeKeys.value.find(val => val === key);
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
const mergedDisabled = computed(() => disabled.value || props.disabled);
|
||||||
|
const selected = computed(() => selectedKeys.value.includes(key));
|
||||||
|
const classNames = computed(() => {
|
||||||
|
const itemCls = `${prefixCls.value}-item`;
|
||||||
|
return {
|
||||||
|
[`${itemCls}`]: true,
|
||||||
|
[`${itemCls}-danger`]: props.danger,
|
||||||
|
[`${itemCls}-active`]: isActive.value,
|
||||||
|
[`${itemCls}-selected`]: selected.value,
|
||||||
|
[`${itemCls}-disabled`]: mergedDisabled.value,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const getEventInfo = (e: MouseEvent): MenuInfo => {
|
||||||
|
return {
|
||||||
|
key: key,
|
||||||
|
eventKey: eventKey,
|
||||||
|
keyPath: keyPath.value,
|
||||||
|
eventKeyPath: [...parentEventKeys.value, eventKey],
|
||||||
|
domEvent: e,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================ Events ============================
|
||||||
|
const onInternalClick = (e: MouseEvent) => {
|
||||||
|
if (mergedDisabled.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const info = getEventInfo(e);
|
||||||
|
emit('click', e);
|
||||||
|
onItemClick(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseEnter = (event: MouseEvent) => {
|
||||||
|
if (!mergedDisabled.value) {
|
||||||
|
changeActiveKeys(keysPath.value);
|
||||||
|
console.log('item mouseenter', keysPath.value);
|
||||||
|
emit('mouseenter', event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onMouseLeave = (event: MouseEvent) => {
|
||||||
|
if (!mergedDisabled.value) {
|
||||||
|
changeActiveKeys([]);
|
||||||
|
emit('mouseleave', event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderItemChildren = (icon: any, children: any) => {
|
||||||
|
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
|
||||||
|
// ref: https://github.com/ant-design/ant-design/pull/23456
|
||||||
|
if (!icon || (isValidElement(children) && children.type === 'span')) {
|
||||||
|
if (children && inlineCollapsed.value && firstLevel && typeof children === 'string') {
|
||||||
|
return (
|
||||||
|
<div class={`${prefixCls.value}-inline-collapsed-noicon`}>{children.charAt(0)}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
return <span class={`${prefixCls.value}-title-content`}>{children}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const { title } = props;
|
||||||
|
const children = flattenChildren(slots.default?.());
|
||||||
|
const childrenLength = children.length;
|
||||||
|
let tooltipTitle: any = title;
|
||||||
|
if (typeof title === 'undefined') {
|
||||||
|
tooltipTitle = firstLevel ? children : '';
|
||||||
|
} else if (title === false) {
|
||||||
|
tooltipTitle = '';
|
||||||
|
}
|
||||||
|
const tooltipProps: any = {
|
||||||
|
title: tooltipTitle,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!siderCollapsed.value && !inlineCollapsed.value) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================ Render ============================
|
||||||
|
const optionRoleProps = {};
|
||||||
|
|
||||||
|
if (props.role === 'option') {
|
||||||
|
optionRoleProps['aria-selected'] = selected.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
const icon = getPropsSlot(slots, props, 'icon');
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
{...tooltipProps}
|
||||||
|
placement={rtl.value ? 'left' : 'right'}
|
||||||
|
overlayClassName={`${prefixCls.value}-inline-collapsed-tooltip`}
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
{...attrs}
|
||||||
|
class={[
|
||||||
|
classNames.value,
|
||||||
|
{
|
||||||
|
[`${attrs.class}`]: !!attrs.class,
|
||||||
|
[`${prefixCls.value}-item-only-child`]:
|
||||||
|
(icon ? childrenLength + 1 : childrenLength) === 1,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
role={props.role || 'menuitem'}
|
||||||
|
tabindex={props.disabled ? null : -1}
|
||||||
|
data-menu-id={key}
|
||||||
|
aria-disabled={props.disabled}
|
||||||
|
{...optionRoleProps}
|
||||||
|
onMouseenter={onMouseEnter}
|
||||||
|
onMouseleave={onMouseLeave}
|
||||||
|
onClick={onInternalClick}
|
||||||
|
title={typeof title === 'string' ? title : undefined}
|
||||||
|
>
|
||||||
|
{cloneElement(icon, {
|
||||||
|
class: `${prefixCls.value}-item-icon`,
|
||||||
|
})}
|
||||||
|
{renderItemChildren(icon, children)}
|
||||||
|
</li>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
import Trigger from '../../vc-trigger';
|
||||||
|
import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';
|
||||||
|
import { MenuMode } from './interface';
|
||||||
|
import { useInjectMenu } from './hooks/useMenuContext';
|
||||||
|
import { placements, placementsRtl } from './placements';
|
||||||
|
import raf from '../../_util/raf';
|
||||||
|
import classNames from '../../_util/classNames';
|
||||||
|
|
||||||
|
const popupPlacementMap = {
|
||||||
|
horizontal: 'bottomLeft',
|
||||||
|
vertical: 'rightTop',
|
||||||
|
'vertical-left': 'rightTop',
|
||||||
|
'vertical-right': 'leftTop',
|
||||||
|
};
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'PopupTrigger',
|
||||||
|
props: {
|
||||||
|
prefixCls: String,
|
||||||
|
mode: String as PropType<MenuMode>,
|
||||||
|
visible: Boolean,
|
||||||
|
// popup: React.ReactNode;
|
||||||
|
popupClassName: String,
|
||||||
|
popupOffset: Array as PropType<number[]>,
|
||||||
|
disabled: Boolean,
|
||||||
|
onVisibleChange: Function as PropType<(visible: boolean) => void>,
|
||||||
|
},
|
||||||
|
slots: ['popup'],
|
||||||
|
emits: ['visibleChange'],
|
||||||
|
inheritAttrs: false,
|
||||||
|
setup(props, { slots, emit }) {
|
||||||
|
const innerVisible = ref(false);
|
||||||
|
const {
|
||||||
|
getPopupContainer,
|
||||||
|
rtl,
|
||||||
|
subMenuOpenDelay,
|
||||||
|
subMenuCloseDelay,
|
||||||
|
builtinPlacements,
|
||||||
|
triggerSubMenuAction,
|
||||||
|
isRootMenu,
|
||||||
|
} = useInjectMenu();
|
||||||
|
|
||||||
|
const placement = computed(() =>
|
||||||
|
rtl
|
||||||
|
? { ...placementsRtl, ...builtinPlacements.value }
|
||||||
|
: { ...placements, ...builtinPlacements.value },
|
||||||
|
);
|
||||||
|
|
||||||
|
const popupPlacement = computed(() => popupPlacementMap[props.mode]);
|
||||||
|
|
||||||
|
const visibleRef = ref<number>();
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
visible => {
|
||||||
|
raf.cancel(visibleRef.value);
|
||||||
|
visibleRef.value = raf(() => {
|
||||||
|
innerVisible.value = visible;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
raf.cancel(visibleRef.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const onVisibleChange = (visible: boolean) => {
|
||||||
|
emit('visibleChange', visible);
|
||||||
|
};
|
||||||
|
return () => {
|
||||||
|
const { prefixCls, popupClassName, mode, popupOffset, disabled } = props;
|
||||||
|
return (
|
||||||
|
<Trigger
|
||||||
|
prefixCls={prefixCls}
|
||||||
|
popupClassName={classNames(
|
||||||
|
`${prefixCls}-popup`,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-rtl`]: rtl,
|
||||||
|
},
|
||||||
|
popupClassName,
|
||||||
|
)}
|
||||||
|
stretch={mode === 'horizontal' ? 'minWidth' : null}
|
||||||
|
getPopupContainer={
|
||||||
|
isRootMenu ? getPopupContainer.value : triggerNode => triggerNode.parentNode
|
||||||
|
}
|
||||||
|
builtinPlacements={placement.value}
|
||||||
|
popupPlacement={popupPlacement.value}
|
||||||
|
popupVisible={innerVisible.value}
|
||||||
|
popupAlign={popupOffset && { offset: popupOffset }}
|
||||||
|
action={disabled ? [] : [triggerSubMenuAction.value]}
|
||||||
|
mouseEnterDelay={subMenuOpenDelay.value}
|
||||||
|
mouseLeaveDelay={subMenuCloseDelay.value}
|
||||||
|
onPopupVisibleChange={onVisibleChange}
|
||||||
|
// forceRender={forceSubMenuRender}
|
||||||
|
v-slots={{
|
||||||
|
popup: () => {
|
||||||
|
return slots.popup?.({ visible: innerVisible.value });
|
||||||
|
},
|
||||||
|
default: slots.default,
|
||||||
|
}}
|
||||||
|
></Trigger>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,294 @@
|
||||||
|
import PropTypes from '../../_util/vue-types';
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
defineComponent,
|
||||||
|
getCurrentInstance,
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
PropType,
|
||||||
|
onBeforeUnmount,
|
||||||
|
} from 'vue';
|
||||||
|
import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
|
||||||
|
import { useInjectMenu, useProvideFirstLevel, MenuContextProvider } from './hooks/useMenuContext';
|
||||||
|
import { getPropsSlot, isValidElement } from '../../_util/props-util';
|
||||||
|
import classNames from '../../_util/classNames';
|
||||||
|
import useDirectionStyle from './hooks/useDirectionStyle';
|
||||||
|
import PopupTrigger from './PopupTrigger';
|
||||||
|
import SubMenuList from './SubMenuList';
|
||||||
|
import InlineSubMenuList from './InlineSubMenuList';
|
||||||
|
import Transition, { getTransitionProps } from '../../_util/transition';
|
||||||
|
|
||||||
|
let indexGuid = 0;
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'ASubMenu',
|
||||||
|
props: {
|
||||||
|
icon: PropTypes.VNodeChild,
|
||||||
|
title: PropTypes.VNodeChild,
|
||||||
|
disabled: Boolean,
|
||||||
|
level: Number,
|
||||||
|
popupClassName: String,
|
||||||
|
popupOffset: Array as PropType<number[]>,
|
||||||
|
internalPopupClose: Boolean,
|
||||||
|
},
|
||||||
|
slots: ['icon', 'title'],
|
||||||
|
emits: ['titleClick', 'mouseenter', 'mouseleave'],
|
||||||
|
inheritAttrs: false,
|
||||||
|
setup(props, { slots, attrs, emit }) {
|
||||||
|
useProvideFirstLevel(false);
|
||||||
|
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
const key = instance.vnode.key;
|
||||||
|
|
||||||
|
const eventKey = `sub_menu_${++indexGuid}_$$_${key}`;
|
||||||
|
const { parentEventKeys, parentInfo } = useInjectKeyPath();
|
||||||
|
const keysPath = computed(() => [...parentEventKeys.value, eventKey]);
|
||||||
|
|
||||||
|
const childrenEventKeys = ref([]);
|
||||||
|
const menuInfo = {
|
||||||
|
eventKey,
|
||||||
|
key,
|
||||||
|
parentEventKeys,
|
||||||
|
childrenEventKeys,
|
||||||
|
};
|
||||||
|
parentInfo.childrenEventKeys?.value.push(eventKey);
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (parentInfo.childrenEventKeys) {
|
||||||
|
parentInfo.childrenEventKeys.value = parentInfo.childrenEventKeys?.value.filter(
|
||||||
|
k => k != eventKey,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useProvideKeyPath(eventKey, menuInfo);
|
||||||
|
|
||||||
|
const {
|
||||||
|
prefixCls,
|
||||||
|
activeKeys,
|
||||||
|
disabled: contextDisabled,
|
||||||
|
changeActiveKeys,
|
||||||
|
mode,
|
||||||
|
inlineCollapsed,
|
||||||
|
antdMenuTheme,
|
||||||
|
openKeys,
|
||||||
|
overflowDisabled,
|
||||||
|
onOpenChange,
|
||||||
|
registerMenuInfo,
|
||||||
|
unRegisterMenuInfo,
|
||||||
|
selectedSubMenuEventKeys,
|
||||||
|
motion,
|
||||||
|
defaultMotions,
|
||||||
|
} = useInjectMenu();
|
||||||
|
|
||||||
|
registerMenuInfo(eventKey, menuInfo);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
unRegisterMenuInfo(eventKey);
|
||||||
|
});
|
||||||
|
|
||||||
|
const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
|
||||||
|
const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
|
||||||
|
const elementRef = ref();
|
||||||
|
const popupRef = ref();
|
||||||
|
|
||||||
|
// // ================================ Icon ================================
|
||||||
|
// const mergedItemIcon = itemIcon || contextItemIcon;
|
||||||
|
// const mergedExpandIcon = expandIcon || contextExpandIcon;
|
||||||
|
|
||||||
|
// ================================ Open ================================
|
||||||
|
const originOpen = computed(() => openKeys.value.includes(key));
|
||||||
|
const open = computed(() => !overflowDisabled.value && originOpen.value);
|
||||||
|
|
||||||
|
// =============================== Select ===============================
|
||||||
|
const childrenSelected = computed(() => {
|
||||||
|
return selectedSubMenuEventKeys.value.includes(eventKey);
|
||||||
|
});
|
||||||
|
|
||||||
|
const isActive = ref(false);
|
||||||
|
watch(
|
||||||
|
activeKeys,
|
||||||
|
() => {
|
||||||
|
isActive.value = !!activeKeys.value.find(val => val === key);
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
// =============================== Events ===============================
|
||||||
|
// >>>> Title click
|
||||||
|
const onInternalTitleClick = (e: Event) => {
|
||||||
|
// Skip if disabled
|
||||||
|
if (mergedDisabled.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
emit('titleClick', e, key);
|
||||||
|
|
||||||
|
// Trigger open by click when mode is `inline`
|
||||||
|
if (mode.value === 'inline') {
|
||||||
|
onOpenChange(eventKey, !originOpen.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseEnter = (event: MouseEvent) => {
|
||||||
|
if (!mergedDisabled.value) {
|
||||||
|
changeActiveKeys(keysPath.value);
|
||||||
|
emit('mouseenter', event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onMouseLeave = (event: MouseEvent) => {
|
||||||
|
if (!mergedDisabled.value) {
|
||||||
|
changeActiveKeys([]);
|
||||||
|
emit('mouseleave', event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========================== DirectionStyle ==========================
|
||||||
|
const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));
|
||||||
|
|
||||||
|
// >>>>> Visible change
|
||||||
|
const onPopupVisibleChange = (newVisible: boolean) => {
|
||||||
|
if (mode.value !== 'inline') {
|
||||||
|
onOpenChange(eventKey, newVisible);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Used for accessibility. Helper will focus element without key board.
|
||||||
|
* We should manually trigger an active
|
||||||
|
*/
|
||||||
|
const onInternalFocus = () => {
|
||||||
|
changeActiveKeys(keysPath.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// =============================== Render ===============================
|
||||||
|
const popupId = eventKey && `${eventKey}-popup`;
|
||||||
|
|
||||||
|
const popupClassName = computed(() =>
|
||||||
|
classNames(
|
||||||
|
prefixCls.value,
|
||||||
|
`${prefixCls.value}-${antdMenuTheme.value}`,
|
||||||
|
props.popupClassName,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const renderTitle = (title: any, icon: any) => {
|
||||||
|
if (!icon) {
|
||||||
|
return inlineCollapsed.value && props.level === 1 && title && typeof title === 'string' ? (
|
||||||
|
<div class={`${prefixCls.value}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
|
||||||
|
) : (
|
||||||
|
title
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
|
||||||
|
// ref: https://github.com/ant-design/ant-design/pull/23456
|
||||||
|
const titleIsSpan = isValidElement(title) && title.type === 'span';
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{icon}
|
||||||
|
{titleIsSpan ? title : <span class={`${prefixCls.value}-title-content`}>{title}</span>}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cache mode if it change to `inline` which do not have popup motion
|
||||||
|
const triggerModeRef = computed(() => {
|
||||||
|
return mode.value !== 'inline' && keysPath.value.length > 1 ? 'vertical' : mode.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));
|
||||||
|
|
||||||
|
const style = ref({});
|
||||||
|
const className = ref('');
|
||||||
|
const mergedMotion = computed(() => {
|
||||||
|
const m = motion.value || defaultMotions.value?.[mode.value] || defaultMotions.value?.other;
|
||||||
|
const res = typeof m === 'function' ? m(style, className) : m;
|
||||||
|
return res ? getTransitionProps(res.name) : undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const icon = getPropsSlot(slots, props, 'icon');
|
||||||
|
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
|
||||||
|
const subMenuPrefixClsValue = subMenuPrefixCls.value;
|
||||||
|
let titleNode = (
|
||||||
|
<div
|
||||||
|
style={directionStyle.value}
|
||||||
|
class={`${subMenuPrefixClsValue}-title`}
|
||||||
|
tabindex={mergedDisabled.value ? null : -1}
|
||||||
|
ref={elementRef}
|
||||||
|
title={typeof title === 'string' ? title : null}
|
||||||
|
data-menu-id={key}
|
||||||
|
aria-expanded={open.value}
|
||||||
|
aria-haspopup
|
||||||
|
aria-controls={popupId}
|
||||||
|
aria-disabled={mergedDisabled.value}
|
||||||
|
onClick={onInternalTitleClick}
|
||||||
|
onFocus={onInternalFocus}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
|
||||||
|
{/* Only non-horizontal mode shows the icon */}
|
||||||
|
{mode.value !== 'horizontal' && slots.expandIcon ? (
|
||||||
|
slots.expandIcon({ ...props, isOpen: open.value })
|
||||||
|
) : (
|
||||||
|
<i class={`${subMenuPrefixClsValue}-arrow`} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!overflowDisabled.value) {
|
||||||
|
const triggerMode = triggerModeRef.value;
|
||||||
|
titleNode = (
|
||||||
|
<PopupTrigger
|
||||||
|
mode={triggerMode}
|
||||||
|
prefixCls={subMenuPrefixClsValue}
|
||||||
|
visible={!props.internalPopupClose && open.value && mode.value !== 'inline'}
|
||||||
|
popupClassName={popupClassName.value}
|
||||||
|
popupOffset={props.popupOffset}
|
||||||
|
disabled={mergedDisabled.value}
|
||||||
|
onVisibleChange={onPopupVisibleChange}
|
||||||
|
v-slots={{
|
||||||
|
popup: ({ visible }) => (
|
||||||
|
<MenuContextProvider props={{ mode: triggerModeRef, isRootMenu: false }}>
|
||||||
|
<Transition {...mergedMotion.value}>
|
||||||
|
<SubMenuList v-show={visible} id={popupId} ref={popupRef}>
|
||||||
|
{slots.default?.()}
|
||||||
|
</SubMenuList>
|
||||||
|
</Transition>
|
||||||
|
</MenuContextProvider>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{titleNode}
|
||||||
|
</PopupTrigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<MenuContextProvider props={{ mode: renderMode }}>
|
||||||
|
<li
|
||||||
|
{...attrs}
|
||||||
|
role="none"
|
||||||
|
class={classNames(
|
||||||
|
subMenuPrefixClsValue,
|
||||||
|
`${subMenuPrefixClsValue}-${mode.value}`,
|
||||||
|
attrs.class,
|
||||||
|
{
|
||||||
|
[`${subMenuPrefixClsValue}-open`]: open.value,
|
||||||
|
[`${subMenuPrefixClsValue}-active`]: isActive.value,
|
||||||
|
[`${subMenuPrefixClsValue}-selected`]: childrenSelected.value,
|
||||||
|
[`${subMenuPrefixClsValue}-disabled`]: mergedDisabled.value,
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
onMouseenter={onMouseEnter}
|
||||||
|
onMouseleave={onMouseLeave}
|
||||||
|
>
|
||||||
|
{titleNode}
|
||||||
|
|
||||||
|
{/* Inline mode */}
|
||||||
|
{!overflowDisabled.value && (
|
||||||
|
<InlineSubMenuList id={popupId} open={open.value} keyPath={keysPath.value}>
|
||||||
|
{slots.default?.()}
|
||||||
|
</InlineSubMenuList>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
</MenuContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import classNames from '../../_util/classNames';
|
||||||
|
import { FunctionalComponent, provide } from 'vue';
|
||||||
|
import { useInjectMenu } from './hooks/useMenuContext';
|
||||||
|
const InternalSubMenuList: FunctionalComponent<any> = (_props, { slots, attrs }) => {
|
||||||
|
const { prefixCls, mode } = useInjectMenu();
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
{...attrs}
|
||||||
|
class={classNames(
|
||||||
|
prefixCls.value,
|
||||||
|
`${prefixCls.value}-sub`,
|
||||||
|
`${prefixCls.value}-${mode.value === 'inline' ? 'inline' : 'vertical'}`,
|
||||||
|
)}
|
||||||
|
data-menu-list
|
||||||
|
>
|
||||||
|
{slots.default?.()}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
InternalSubMenuList.displayName = 'SubMenuList';
|
||||||
|
|
||||||
|
export default InternalSubMenuList;
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { computed, ComputedRef, CSSProperties } from 'vue';
|
||||||
|
import { useInjectMenu } from './useMenuContext';
|
||||||
|
|
||||||
|
export default function useDirectionStyle(level: ComputedRef<number>): ComputedRef<CSSProperties> {
|
||||||
|
const { mode, rtl, inlineIndent } = useInjectMenu();
|
||||||
|
|
||||||
|
return computed(() =>
|
||||||
|
mode.value !== 'inline'
|
||||||
|
? null
|
||||||
|
: rtl.value
|
||||||
|
? { paddingRight: level.value * inlineIndent.value }
|
||||||
|
: { paddingLeft: level.value * inlineIndent.value },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Key } from '../../../_util/type';
|
||||||
|
import { computed, ComputedRef, inject, InjectionKey, provide } from 'vue';
|
||||||
|
import { StoreMenuInfo } from './useMenuContext';
|
||||||
|
|
||||||
|
const KeyPathContext: InjectionKey<{
|
||||||
|
parentEventKeys: ComputedRef<Key[]>;
|
||||||
|
parentInfo: StoreMenuInfo;
|
||||||
|
}> = Symbol('KeyPathContext');
|
||||||
|
|
||||||
|
const useInjectKeyPath = () => {
|
||||||
|
return inject(KeyPathContext, {
|
||||||
|
parentEventKeys: computed(() => []),
|
||||||
|
parentInfo: {} as StoreMenuInfo,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const useProvideKeyPath = (eventKey: string, menuInfo: StoreMenuInfo) => {
|
||||||
|
const { parentEventKeys } = useInjectKeyPath();
|
||||||
|
const keys = computed(() => [...parentEventKeys.value, eventKey]);
|
||||||
|
provide(KeyPathContext, { parentEventKeys: keys, parentInfo: menuInfo });
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useProvideKeyPath, useInjectKeyPath, KeyPathContext };
|
||||||
|
|
||||||
|
export default useProvideKeyPath;
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
import { Key } from '../../../_util/type';
|
||||||
|
import {
|
||||||
|
ComputedRef,
|
||||||
|
CSSProperties,
|
||||||
|
defineComponent,
|
||||||
|
inject,
|
||||||
|
InjectionKey,
|
||||||
|
provide,
|
||||||
|
Ref,
|
||||||
|
UnwrapRef,
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
BuiltinPlacements,
|
||||||
|
MenuClickEventHandler,
|
||||||
|
MenuMode,
|
||||||
|
MenuTheme,
|
||||||
|
TriggerSubMenuAction,
|
||||||
|
} from '../interface';
|
||||||
|
import { CSSMotionProps } from '../../../_util/transition';
|
||||||
|
|
||||||
|
export interface StoreMenuInfo {
|
||||||
|
eventKey: string;
|
||||||
|
key: Key;
|
||||||
|
parentEventKeys: ComputedRef<string[]>;
|
||||||
|
childrenEventKeys?: Ref<string[]>;
|
||||||
|
isLeaf?: boolean;
|
||||||
|
}
|
||||||
|
export interface MenuContextProps {
|
||||||
|
isRootMenu: boolean;
|
||||||
|
|
||||||
|
store: UnwrapRef<Record<string, StoreMenuInfo>>;
|
||||||
|
registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
|
||||||
|
unRegisterMenuInfo: (key: string) => void;
|
||||||
|
prefixCls: ComputedRef<string>;
|
||||||
|
openKeys: Ref<Key[]>;
|
||||||
|
selectedKeys: Ref<Key[]>;
|
||||||
|
|
||||||
|
selectedSubMenuEventKeys: Ref<string[]>;
|
||||||
|
rtl?: ComputedRef<boolean>;
|
||||||
|
|
||||||
|
locked?: Ref<boolean>;
|
||||||
|
|
||||||
|
inlineCollapsed: Ref<boolean>;
|
||||||
|
antdMenuTheme?: ComputedRef<MenuTheme>;
|
||||||
|
|
||||||
|
siderCollapsed?: ComputedRef<boolean>;
|
||||||
|
|
||||||
|
// // Mode
|
||||||
|
mode: Ref<MenuMode>;
|
||||||
|
|
||||||
|
// // Disabled
|
||||||
|
disabled?: ComputedRef<boolean>;
|
||||||
|
// // Used for overflow only. Prevent hidden node trigger open
|
||||||
|
overflowDisabled?: ComputedRef<boolean>;
|
||||||
|
|
||||||
|
// // Active
|
||||||
|
activeKeys: Ref<Key[]>;
|
||||||
|
changeActiveKeys: (keys: Key[]) => void;
|
||||||
|
// onActive: (key: string) => void;
|
||||||
|
// onInactive: (key: string) => void;
|
||||||
|
|
||||||
|
// // Selection
|
||||||
|
// selectedKeys: string[];
|
||||||
|
|
||||||
|
// // Level
|
||||||
|
inlineIndent: ComputedRef<number>;
|
||||||
|
|
||||||
|
// // Motion
|
||||||
|
motion?: ComputedRef<CSSMotionProps | null>;
|
||||||
|
defaultMotions?: ComputedRef<Partial<
|
||||||
|
{
|
||||||
|
[key in MenuMode | 'other']:
|
||||||
|
| CSSMotionProps
|
||||||
|
| ((style: Ref<CSSProperties>, className: Ref<string>) => CSSMotionProps);
|
||||||
|
}
|
||||||
|
> | null>;
|
||||||
|
|
||||||
|
// // Popup
|
||||||
|
subMenuOpenDelay: ComputedRef<number>;
|
||||||
|
subMenuCloseDelay: ComputedRef<number>;
|
||||||
|
// forceSubMenuRender?: boolean;
|
||||||
|
builtinPlacements?: ComputedRef<BuiltinPlacements>;
|
||||||
|
triggerSubMenuAction?: ComputedRef<TriggerSubMenuAction>;
|
||||||
|
|
||||||
|
// // Icon
|
||||||
|
// itemIcon?: RenderIconType;
|
||||||
|
// expandIcon?: RenderIconType;
|
||||||
|
|
||||||
|
// // Function
|
||||||
|
onItemClick: MenuClickEventHandler;
|
||||||
|
onOpenChange: (key: Key, open: boolean) => void;
|
||||||
|
getPopupContainer: ComputedRef<(node: HTMLElement) => HTMLElement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuContextKey: InjectionKey<MenuContextProps> = Symbol('menuContextKey');
|
||||||
|
|
||||||
|
const useProvideMenu = (props: MenuContextProps) => {
|
||||||
|
provide(MenuContextKey, props);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useInjectMenu = () => {
|
||||||
|
return inject(MenuContextKey);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MenuFirstLevelContextKey: InjectionKey<Boolean> = Symbol('menuFirstLevelContextKey');
|
||||||
|
const useProvideFirstLevel = (firstLevel: Boolean) => {
|
||||||
|
provide(MenuFirstLevelContextKey, firstLevel);
|
||||||
|
};
|
||||||
|
|
||||||
|
const useInjectFirstLevel = () => {
|
||||||
|
return inject(MenuFirstLevelContextKey, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MenuContextProvider = defineComponent({
|
||||||
|
name: 'MenuContextProvider',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
props: Object,
|
||||||
|
},
|
||||||
|
setup(props, { slots }) {
|
||||||
|
useProvideMenu({ ...useInjectMenu(), ...props.props });
|
||||||
|
return () => slots.default?.();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export {
|
||||||
|
useProvideMenu,
|
||||||
|
MenuContextKey,
|
||||||
|
useInjectMenu,
|
||||||
|
MenuFirstLevelContextKey,
|
||||||
|
useProvideFirstLevel,
|
||||||
|
useInjectFirstLevel,
|
||||||
|
MenuContextProvider,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useProvideMenu;
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { Key } from '../../_util/type';
|
||||||
|
|
||||||
|
export type MenuTheme = 'light' | 'dark';
|
||||||
|
|
||||||
|
// ========================== Basic ==========================
|
||||||
|
export type MenuMode = 'horizontal' | 'vertical' | 'inline';
|
||||||
|
|
||||||
|
export type BuiltinPlacements = Record<string, any>;
|
||||||
|
|
||||||
|
export type TriggerSubMenuAction = 'click' | 'hover';
|
||||||
|
|
||||||
|
export interface RenderIconInfo {
|
||||||
|
isSelected?: boolean;
|
||||||
|
isOpen?: boolean;
|
||||||
|
isSubMenu?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type RenderIconType = (props: RenderIconInfo) => any;
|
||||||
|
|
||||||
|
export interface MenuInfo {
|
||||||
|
key: Key;
|
||||||
|
eventKey: string;
|
||||||
|
keyPath?: Key[];
|
||||||
|
eventKeyPath: Key[];
|
||||||
|
domEvent: MouseEvent | KeyboardEvent;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MenuTitleInfo {
|
||||||
|
key: Key;
|
||||||
|
domEvent: MouseEvent | KeyboardEvent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================== Hover ==========================
|
||||||
|
export type MenuHoverEventHandler = (info: { key: Key; domEvent: MouseEvent }) => void;
|
||||||
|
|
||||||
|
// ======================== Selection ========================
|
||||||
|
export interface SelectInfo extends MenuInfo {
|
||||||
|
selectedKeys: Key[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SelectEventHandler = (info: SelectInfo) => void;
|
||||||
|
|
||||||
|
// ========================== Click ==========================
|
||||||
|
export type MenuClickEventHandler = (info: MenuInfo) => void;
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
const autoAdjustOverflow = {
|
||||||
|
adjustX: 1,
|
||||||
|
adjustY: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const placements = {
|
||||||
|
topLeft: {
|
||||||
|
points: ['bl', 'tl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, -7],
|
||||||
|
},
|
||||||
|
bottomLeft: {
|
||||||
|
points: ['tl', 'bl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, 7],
|
||||||
|
},
|
||||||
|
leftTop: {
|
||||||
|
points: ['tr', 'tl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [-4, 0],
|
||||||
|
},
|
||||||
|
rightTop: {
|
||||||
|
points: ['tl', 'tr'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [4, 0],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const placementsRtl = {
|
||||||
|
topLeft: {
|
||||||
|
points: ['bl', 'tl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, -7],
|
||||||
|
},
|
||||||
|
bottomLeft: {
|
||||||
|
points: ['tl', 'bl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [0, 7],
|
||||||
|
},
|
||||||
|
rightTop: {
|
||||||
|
points: ['tr', 'tl'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [-4, 0],
|
||||||
|
},
|
||||||
|
leftTop: {
|
||||||
|
points: ['tl', 'tr'],
|
||||||
|
overflow: autoAdjustOverflow,
|
||||||
|
offset: [4, 0],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default placements;
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
.@{menu-prefix-cls} {
|
.@{menu-prefix-cls} {
|
||||||
// dark theme
|
// dark theme
|
||||||
&-dark,
|
&&-dark,
|
||||||
&-dark &-sub {
|
&-dark &-sub,
|
||||||
|
&&-dark &-sub {
|
||||||
color: @menu-dark-color;
|
color: @menu-dark-color;
|
||||||
background: @menu-dark-bg;
|
background: @menu-dark-bg;
|
||||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||||
|
|
@ -19,8 +20,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dark &-inline&-sub {
|
&-dark &-inline&-sub {
|
||||||
background: @menu-dark-submenu-bg;
|
background: @menu-dark-inline-submenu-bg;
|
||||||
box-shadow: 0 2px 8px fade(@black, 45%) inset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dark&-horizontal {
|
&-dark&-horizontal {
|
||||||
|
|
@ -31,17 +31,23 @@
|
||||||
&-dark&-horizontal > &-submenu {
|
&-dark&-horizontal > &-submenu {
|
||||||
top: 0;
|
top: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
padding: @menu-item-padding;
|
||||||
border-color: @menu-dark-bg;
|
border-color: @menu-dark-bg;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-dark&-horizontal > &-item:hover {
|
||||||
|
background-color: @menu-dark-item-active-bg;
|
||||||
|
}
|
||||||
|
|
||||||
&-dark&-horizontal > &-item > a::before {
|
&-dark&-horizontal > &-item > a::before {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dark &-item,
|
&-dark &-item,
|
||||||
&-dark &-item-group-title,
|
&-dark &-item-group-title,
|
||||||
&-dark &-item > a {
|
&-dark &-item > a,
|
||||||
|
&-dark &-item > span > a {
|
||||||
color: @menu-dark-color;
|
color: @menu-dark-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -77,7 +83,8 @@
|
||||||
&-dark &-submenu-title:hover {
|
&-dark &-submenu-title:hover {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
> a {
|
> a,
|
||||||
|
> span > a {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
}
|
}
|
||||||
> .@{menu-prefix-cls}-submenu-title,
|
> .@{menu-prefix-cls}-submenu-title,
|
||||||
|
|
@ -95,6 +102,10 @@
|
||||||
background-color: @menu-dark-item-hover-bg;
|
background-color: @menu-dark-item-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-dark&-dark:not(&-horizontal) &-item-selected {
|
||||||
|
background-color: @menu-dark-item-active-bg;
|
||||||
|
}
|
||||||
|
|
||||||
&-dark &-item-selected {
|
&-dark &-item-selected {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
|
@ -102,14 +113,19 @@
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
> a,
|
> a,
|
||||||
> a:hover {
|
> span > a,
|
||||||
|
> a:hover,
|
||||||
|
> span > a:hover {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
color: @menu-dark-selected-item-icon-color;
|
color: @menu-dark-selected-item-icon-color;
|
||||||
}
|
|
||||||
.@{iconfont-css-prefix} + span {
|
+ span {
|
||||||
color: @menu-dark-selected-item-text-color;
|
color: @menu-dark-selected-item-text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -122,7 +138,8 @@
|
||||||
&-dark &-item-disabled,
|
&-dark &-item-disabled,
|
||||||
&-dark &-submenu-disabled {
|
&-dark &-submenu-disabled {
|
||||||
&,
|
&,
|
||||||
> a {
|
> a,
|
||||||
|
> span > a {
|
||||||
color: @disabled-color-dark !important;
|
color: @disabled-color-dark !important;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,15 @@
|
||||||
@import '../../style/themes/index';
|
@import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
@import '../../style/mixins/index';
|
||||||
|
@import './status';
|
||||||
|
|
||||||
@menu-prefix-cls: ~'@{ant-prefix}-menu';
|
@menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||||
|
@menu-animation-duration-normal: 0.15s;
|
||||||
|
|
||||||
|
.accessibility-focus() {
|
||||||
|
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Should remove icon style compatible in v5
|
||||||
|
|
||||||
// default theme
|
// default theme
|
||||||
.@{menu-prefix-cls} {
|
.@{menu-prefix-cls} {
|
||||||
|
|
@ -10,14 +18,21 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-left: 0; // Override default ul/ol
|
padding-left: 0; // Override default ul/ol
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
|
font-size: @menu-item-font-size;
|
||||||
line-height: 0; // Fix display inline-block gap
|
line-height: 0; // Fix display inline-block gap
|
||||||
|
text-align: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background: @menu-bg;
|
background: @menu-bg;
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: @box-shadow-base;
|
box-shadow: @box-shadow-base;
|
||||||
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
|
transition: background @animation-duration-slow,
|
||||||
|
width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s;
|
||||||
.clearfix();
|
.clearfix();
|
||||||
|
|
||||||
|
&&-root:focus-visible {
|
||||||
|
.accessibility-focus();
|
||||||
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -25,22 +40,29 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-hidden {
|
&-hidden,
|
||||||
|
&-submenu-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item-group-title {
|
&-item-group-title {
|
||||||
|
height: @menu-item-group-height;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
color: @menu-item-group-title-color;
|
color: @menu-item-group-title-color;
|
||||||
font-size: @font-size-base;
|
font-size: @menu-item-group-title-font-size;
|
||||||
line-height: @line-height-base;
|
line-height: @menu-item-group-height;
|
||||||
transition: all 0.3s;
|
transition: all @animation-duration-slow;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-horizontal &-submenu {
|
||||||
|
transition: border-color @animation-duration-slow @ease-in-out,
|
||||||
|
background @animation-duration-slow @ease-in-out;
|
||||||
|
}
|
||||||
&-submenu,
|
&-submenu,
|
||||||
&-submenu-inline {
|
&-submenu-inline {
|
||||||
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
|
transition: border-color @animation-duration-slow @ease-in-out,
|
||||||
padding 0.15s @ease-in-out;
|
background @animation-duration-slow @ease-in-out,
|
||||||
|
padding @menu-animation-duration-normal @ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-submenu-selected {
|
&-submenu-selected {
|
||||||
|
|
@ -54,11 +76,11 @@
|
||||||
|
|
||||||
&-submenu &-sub {
|
&-submenu &-sub {
|
||||||
cursor: initial;
|
cursor: initial;
|
||||||
transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
|
transition: background @animation-duration-slow @ease-in-out,
|
||||||
|
padding @animation-duration-slow @ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item > a {
|
&-item a {
|
||||||
display: block;
|
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
|
|
@ -75,7 +97,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://github.com/ant-design/ant-design/issues/19809
|
// https://github.com/ant-design/ant-design/issues/19809
|
||||||
&-item > .@{ant-prefix}-badge > a {
|
&-item > .@{ant-prefix}-badge a {
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
|
|
@ -110,8 +132,8 @@
|
||||||
|
|
||||||
&-item-selected {
|
&-item-selected {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
> a,
|
a,
|
||||||
> a:hover {
|
a:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,6 +147,7 @@
|
||||||
&-vertical-left {
|
&-vertical-left {
|
||||||
border-right: @border-width-base @border-style-base @border-color-split;
|
border-right: @border-width-base @border-style-base @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-vertical-right {
|
&-vertical-right {
|
||||||
border-left: @border-width-base @border-style-base @border-color-split;
|
border-left: @border-width-base @border-style-base @border-color-split;
|
||||||
}
|
}
|
||||||
|
|
@ -133,9 +156,17 @@
|
||||||
&-vertical-left&-sub,
|
&-vertical-left&-sub,
|
||||||
&-vertical-right&-sub {
|
&-vertical-right&-sub {
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
max-height: calc(100vh - 100px);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
transform-origin: 0 0;
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/22244
|
||||||
|
// https://github.com/ant-design/ant-design/issues/26812
|
||||||
|
&:not([class*='-active']) {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.@{menu-prefix-cls}-item {
|
.@{menu-prefix-cls}-item {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -155,26 +186,48 @@
|
||||||
min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
|
min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-horizontal &-item,
|
||||||
|
&-horizontal &-submenu-title {
|
||||||
|
transition: border-color @animation-duration-slow, background @animation-duration-slow;
|
||||||
|
}
|
||||||
|
|
||||||
&-item,
|
&-item,
|
||||||
&-submenu-title {
|
&-submenu-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 20px;
|
padding: @menu-item-padding;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
transition: border-color @animation-duration-slow, background @animation-duration-slow,
|
||||||
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
|
padding @animation-duration-slow @ease-in-out;
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
min-width: 14px;
|
min-width: 14px;
|
||||||
margin-right: 10px;
|
|
||||||
font-size: @menu-icon-size;
|
font-size: @menu-icon-size;
|
||||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
transition: font-size @menu-animation-duration-normal @ease-out,
|
||||||
|
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||||
+ span {
|
+ span {
|
||||||
|
margin-left: @menu-icon-margin-right;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
|
// transition: opacity @animation-duration-slow @ease-in-out,
|
||||||
|
// width @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||||
|
transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
|
||||||
|
color @animation-duration-slow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.@{menu-prefix-cls}-item-only-child {
|
||||||
|
> .@{iconfont-css-prefix},
|
||||||
|
> .@{menu-prefix-cls}-item-icon {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
.accessibility-focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > &-item-divider {
|
& > &-item-divider {
|
||||||
|
|
@ -190,94 +243,105 @@
|
||||||
&-popup {
|
&-popup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: @zindex-dropdown;
|
z-index: @zindex-dropdown;
|
||||||
// background: @menu-popup-bg;
|
background: transparent;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: none;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
|
||||||
.submenu-title-wrapper {
|
// https://github.com/ant-design/ant-design/issues/13955
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -7px;
|
top: -7px;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
opacity: 0.0001;
|
opacity: 0.0001;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// https://github.com/ant-design/ant-design/issues/13955
|
||||||
|
&-placement-rightTop::before {
|
||||||
|
top: 0;
|
||||||
|
left: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
> .@{menu-prefix-cls} {
|
> .@{menu-prefix-cls} {
|
||||||
background-color: @menu-bg;
|
background-color: @menu-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
&-submenu-title::after {
|
&-submenu-title::after {
|
||||||
transition: transform 0.3s @ease-in-out;
|
transition: transform @animation-duration-slow @ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-vertical,
|
&-popup > .@{menu-prefix-cls} {
|
||||||
&-vertical-left,
|
background-color: @menu-popup-bg;
|
||||||
&-vertical-right,
|
}
|
||||||
&-inline {
|
|
||||||
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
&-expand-icon,
|
||||||
|
&-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 16px;
|
||||||
|
width: 10px;
|
||||||
|
color: @menu-item-color;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
transition: transform @animation-duration-slow @ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-arrow {
|
||||||
|
// →
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
width: 6px;
|
||||||
right: 16px;
|
height: 1.5px;
|
||||||
width: 10px;
|
background-color: currentColor;
|
||||||
transition: transform 0.3s @ease-in-out;
|
border-radius: 2px;
|
||||||
&::before,
|
transition: background @animation-duration-slow @ease-in-out,
|
||||||
&::after {
|
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
|
||||||
position: absolute;
|
color @animation-duration-slow @ease-in-out;
|
||||||
width: 6px;
|
content: '';
|
||||||
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 {
|
&::before {
|
||||||
transform: rotate(-45deg) translateX(2px);
|
transform: rotate(45deg) translateY(-2.5px);
|
||||||
}
|
}
|
||||||
&::after {
|
&::after {
|
||||||
transform: rotate(45deg) translateX(-2px);
|
transform: rotate(-45deg) translateY(2.5px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-open {
|
&:hover > &-title > &-expand-icon,
|
||||||
&.@{menu-prefix-cls}-submenu-inline
|
&:hover > &-title > &-arrow {
|
||||||
> .@{menu-prefix-cls}-submenu-title
|
color: @menu-highlight-color;
|
||||||
.@{menu-prefix-cls}-submenu-arrow {
|
}
|
||||||
transform: translateY(-2px);
|
|
||||||
&::after {
|
.@{menu-prefix-cls}-inline-collapsed &-arrow,
|
||||||
transform: rotate(-45deg) translateX(-2px);
|
&-inline &-arrow {
|
||||||
}
|
// ↓
|
||||||
&::before {
|
&::before {
|
||||||
transform: rotate(45deg) translateX(2px);
|
transform: rotate(-45deg) translateX(2.5px);
|
||||||
}
|
}
|
||||||
|
&::after {
|
||||||
|
transform: rotate(45deg) translateX(-2.5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-horizontal &-arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-open&-inline > &-title > &-arrow {
|
||||||
|
// ↑
|
||||||
|
transform: translateY(-2px);
|
||||||
|
&::after {
|
||||||
|
transform: rotate(-45deg) translateX(-2.5px);
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
transform: rotate(45deg) translateX(2.5px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -286,18 +350,34 @@
|
||||||
&-vertical-left &-submenu-selected,
|
&-vertical-left &-submenu-selected,
|
||||||
&-vertical-right &-submenu-selected {
|
&-vertical-right &-submenu-selected {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
> a {
|
|
||||||
color: @menu-highlight-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-horizontal {
|
&-horizontal {
|
||||||
line-height: 46px;
|
line-height: @menu-horizontal-line-height;
|
||||||
white-space: nowrap;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:not(.@{menu-prefix-cls}-dark) {
|
||||||
|
> .@{menu-prefix-cls}-item,
|
||||||
|
> .@{menu-prefix-cls}-submenu {
|
||||||
|
margin: @menu-item-padding;
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: @menu-item-padding;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&-active,
|
||||||
|
&-open,
|
||||||
|
&-selected {
|
||||||
|
color: @menu-highlight-color;
|
||||||
|
border-bottom: 2px solid @menu-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .@{menu-prefix-cls}-item,
|
> .@{menu-prefix-cls}-item,
|
||||||
> .@{menu-prefix-cls}-submenu {
|
> .@{menu-prefix-cls}-submenu {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -305,19 +385,14 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||||
&-active,
|
padding: 0;
|
||||||
&-open,
|
|
||||||
&-selected {
|
|
||||||
color: @menu-highlight-color;
|
|
||||||
border-bottom: 2px solid @menu-highlight-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .@{menu-prefix-cls}-item {
|
> .@{menu-prefix-cls}-item {
|
||||||
> a {
|
a {
|
||||||
display: block;
|
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
|
|
@ -326,7 +401,7 @@
|
||||||
bottom: -2px;
|
bottom: -2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-selected > a {
|
&-selected a {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -353,7 +428,8 @@
|
||||||
border-right: @menu-item-active-border-width solid @menu-highlight-color;
|
border-right: @menu-item-active-border-width solid @menu-highlight-color;
|
||||||
transform: scaleY(0.0001);
|
transform: scaleY(0.0001);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
|
transition: transform @menu-animation-duration-normal @ease-out,
|
||||||
|
opacity @menu-animation-duration-normal @ease-out;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -365,7 +441,6 @@
|
||||||
margin-bottom: @menu-item-vertical-margin;
|
margin-bottom: @menu-item-vertical-margin;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: @menu-item-font-size;
|
|
||||||
line-height: @menu-item-height;
|
line-height: @menu-item-height;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
@ -386,6 +461,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-vertical {
|
||||||
|
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
padding-right: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-inline {
|
&-inline {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.@{menu-prefix-cls}-selected,
|
.@{menu-prefix-cls}-selected,
|
||||||
|
|
@ -393,7 +475,8 @@
|
||||||
&::after {
|
&::after {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
|
transition: transform @menu-animation-duration-normal @ease-in-out,
|
||||||
|
opacity @menu-animation-duration-normal @ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -402,13 +485,37 @@
|
||||||
width: ~'calc(100% + 1px)';
|
width: ~'calc(100% + 1px)';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
|
||||||
.@{menu-prefix-cls}-submenu-title {
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
padding-right: 34px;
|
padding-right: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Motion enhance for first level
|
||||||
|
&.@{menu-prefix-cls}-root {
|
||||||
|
.@{menu-prefix-cls}-item,
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: border-color @animation-duration-slow, background @animation-duration-slow,
|
||||||
|
padding 0.1s @ease-out;
|
||||||
|
|
||||||
|
> .@{menu-prefix-cls}-title-content {
|
||||||
|
flex: auto;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-inline-collapsed {
|
&&-inline-collapsed {
|
||||||
width: @menu-collapsed-width;
|
width: @menu-collapsed-width;
|
||||||
|
|
||||||
> .@{menu-prefix-cls}-item,
|
> .@{menu-prefix-cls}-item,
|
||||||
> .@{menu-prefix-cls}-item-group
|
> .@{menu-prefix-cls}-item-group
|
||||||
> .@{menu-prefix-cls}-item-group-list
|
> .@{menu-prefix-cls}-item-group-list
|
||||||
|
|
@ -419,24 +526,34 @@
|
||||||
> .@{menu-prefix-cls}-submenu-title,
|
> .@{menu-prefix-cls}-submenu-title,
|
||||||
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 0 ((@menu-collapsed-width - @menu-icon-size-lg) / 2) !important;
|
padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
|
||||||
text-overflow: clip;
|
text-overflow: clip;
|
||||||
|
|
||||||
.@{menu-prefix-cls}-submenu-arrow {
|
.@{menu-prefix-cls}-submenu-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: @menu-icon-size-lg;
|
font-size: @menu-icon-size-lg;
|
||||||
line-height: @menu-item-height;
|
line-height: @menu-item-height;
|
||||||
+ span {
|
+ span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 0;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
|
.@{iconfont-css-prefix} {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
&-tooltip {
|
&-tooltip {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -470,8 +587,19 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-root&-inline-collapsed {
|
||||||
|
.@{menu-prefix-cls}-item,
|
||||||
|
.@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-title {
|
||||||
|
> .@{menu-prefix-cls}-inline-collapsed-noicon {
|
||||||
|
font-size: @menu-icon-size-lg;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-sub&-inline {
|
&-sub&-inline {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: @menu-inline-submenu-bg;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
@ -495,7 +623,7 @@
|
||||||
background: none;
|
background: none;
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
> a {
|
a {
|
||||||
color: @disabled-color !important;
|
color: @disabled-color !important;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -512,4 +640,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Integration with header element so menu items have the same height
|
||||||
|
.@{ant-prefix}-layout-header {
|
||||||
|
.@{menu-prefix-cls} {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@import './dark';
|
@import './dark';
|
||||||
|
@import './rtl';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
@import '../../style/themes/index';
|
||||||
|
@import '../../style/mixins/index';
|
||||||
|
|
||||||
|
@menu-prefix-cls: ~'@{ant-prefix}-menu';
|
||||||
|
|
||||||
|
.@{menu-prefix-cls} {
|
||||||
|
&&-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-group-title {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-inline,
|
||||||
|
&-vertical {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
border-right: none;
|
||||||
|
border-left: @border-width-base @border-style-base @border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dark&-inline,
|
||||||
|
&-dark&-vertical {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical&-sub,
|
||||||
|
&-vertical-left&-sub,
|
||||||
|
&-vertical-right&-sub {
|
||||||
|
> .@{menu-prefix-cls}-item,
|
||||||
|
> .@{menu-prefix-cls}-submenu {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item,
|
||||||
|
&-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-item-icon,
|
||||||
|
.@{iconfont-css-prefix} {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: @menu-icon-margin-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{menu-prefix-cls}-item-only-child {
|
||||||
|
> .@{menu-prefix-cls}-item-icon,
|
||||||
|
> .@{iconfont-css-prefix} {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu {
|
||||||
|
&-rtl.@{menu-prefix-cls}-submenu-popup {
|
||||||
|
transform-origin: 100% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical,
|
||||||
|
&-vertical-left,
|
||||||
|
&-vertical-right,
|
||||||
|
&-inline {
|
||||||
|
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
right: auto;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical,
|
||||||
|
&-vertical-left,
|
||||||
|
&-vertical-right {
|
||||||
|
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||||
|
&::before {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
transform: rotate(-45deg) translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
transform: rotate(45deg) translateY(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical,
|
||||||
|
&-vertical-left,
|
||||||
|
&-vertical-right,
|
||||||
|
&-inline {
|
||||||
|
.@{menu-prefix-cls}-item {
|
||||||
|
&::after {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-item,
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-inline {
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-vertical {
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-left: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-inline-collapsed&-vertical {
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-group-list {
|
||||||
|
.@{menu-prefix-cls}-item,
|
||||||
|
.@{menu-prefix-cls}-submenu-title {
|
||||||
|
.@{menu-prefix-cls}-rtl & {
|
||||||
|
padding: 0 28px 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-sub&-inline {
|
||||||
|
border: 0;
|
||||||
|
& .@{menu-prefix-cls}-item-group-title {
|
||||||
|
.@{menu-prefix-cls}-rtl& {
|
||||||
|
padding-right: 32px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
@import './index';
|
||||||
|
|
||||||
|
.@{menu-prefix-cls} {
|
||||||
|
// Danger
|
||||||
|
&-item-danger&-item {
|
||||||
|
color: @menu-highlight-danger-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&-active {
|
||||||
|
color: @menu-highlight-danger-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: @menu-item-active-danger-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: @menu-highlight-danger-color;
|
||||||
|
> a,
|
||||||
|
> a:hover {
|
||||||
|
color: @menu-highlight-danger-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) &-selected {
|
||||||
|
background-color: @menu-item-active-danger-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{menu-prefix-cls}-inline &::after {
|
||||||
|
border-right-color: @menu-highlight-danger-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== Dark ====================
|
||||||
|
&-dark &-item-danger&-item {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
& > a {
|
||||||
|
color: @menu-dark-danger-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dark&-dark:not(&-horizontal) &-item-danger&-item-selected {
|
||||||
|
color: @menu-dark-highlight-color;
|
||||||
|
background-color: @menu-dark-item-active-danger-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -239,7 +239,6 @@ a {
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
@import 'motion/move';
|
@import 'motion/move';
|
||||||
@import 'motion/other';
|
@import 'motion/other';
|
||||||
@import 'motion/slide';
|
@import 'motion/slide';
|
||||||
@import 'motion/swing';
|
|
||||||
@import 'motion/zoom';
|
@import 'motion/zoom';
|
||||||
|
|
||||||
// For common/openAnimation
|
// For common/openAnimation
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
.fade-motion(@className, @keyframeName) {
|
.fade-motion(@className, @keyframeName) {
|
||||||
.make-motion(@className, @keyframeName);
|
@name: ~'@{ant-prefix}-@{className}';
|
||||||
.@{className}-enter,
|
.make-motion(@name, @keyframeName);
|
||||||
.@{className}-appear {
|
.@{name}-enter,
|
||||||
|
.@{name}-appear {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
.@{className}-leave {
|
.@{name}-leave {
|
||||||
animation-timing-function: linear;
|
animation-timing-function: linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
.move-motion(@className, @keyframeName) {
|
.move-motion(@className, @keyframeName) {
|
||||||
.make-motion(@className, @keyframeName);
|
@name: ~'@{ant-prefix}-@{className}';
|
||||||
.@{className}-enter,
|
.make-motion(@name, @keyframeName);
|
||||||
.@{className}-appear {
|
.@{name}-enter,
|
||||||
|
.@{name}-appear {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-timing-function: @ease-out-circ;
|
animation-timing-function: @ease-out-circ;
|
||||||
}
|
}
|
||||||
.@{className}-leave {
|
.@{name}-leave {
|
||||||
animation-timing-function: @ease-in-circ;
|
animation-timing-function: @ease-in-circ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,17 +4,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[ant-click-animating='true'],
|
@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
|
||||||
[ant-click-animating-without-extra-node='true'] {
|
@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";
|
||||||
|
|
||||||
|
@{click-animating-true},
|
||||||
|
@{click-animating-with-extra-node-true} {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
--antd-wave-shadow-color: @primary-color;
|
--antd-wave-shadow-color: @primary-color;
|
||||||
|
--scroll-bar: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[ant-click-animating-without-extra-node='true']::after,
|
@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
|
||||||
.ant-click-animating-node {
|
|
||||||
|
@{click-animating-with-extra-node-true-after},
|
||||||
|
.@{ant-prefix}-click-animating-node {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
.slide-motion(@className, @keyframeName) {
|
.slide-motion(@className, @keyframeName) {
|
||||||
.make-motion(@className, @keyframeName);
|
@name: ~'@{ant-prefix}-@{className}';
|
||||||
.@{className}-enter,
|
.make-motion(@name, @keyframeName);
|
||||||
.@{className}-appear {
|
.@{name}-enter,
|
||||||
|
.@{name}-appear {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-timing-function: @ease-out-quint;
|
animation-timing-function: @ease-out-quint;
|
||||||
}
|
}
|
||||||
.@{className}-leave {
|
.@{name}-leave {
|
||||||
animation-timing-function: @ease-in-quint;
|
animation-timing-function: @ease-in-quint;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
.swing-motion(@className, @keyframeName) {
|
|
||||||
.@{className}-enter,
|
|
||||||
.@{className}-appear {
|
|
||||||
.motion-common();
|
|
||||||
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
.@{className}-enter.@{className}-enter-active,
|
|
||||||
.@{className}-appear.@{className}-appear-active {
|
|
||||||
animation-name: ~'@{keyframeName}In';
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swing-motion(swing, antSwing);
|
|
||||||
|
|
||||||
@keyframes antSwingIn {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
transform: translateX(-5px);
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
|
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
|
||||||
.make-motion(@className, @keyframeName, @duration);
|
@name: ~'@{ant-prefix}-@{className}';
|
||||||
.@{className}-enter,
|
.make-motion(@name, @keyframeName, @duration);
|
||||||
.@{className}-appear {
|
.@{name}-enter,
|
||||||
|
.@{name}-appear {
|
||||||
transform: scale(0); // need this by yiminghe
|
transform: scale(0); // need this by yiminghe
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-timing-function: @ease-out-circ;
|
animation-timing-function: @ease-out-circ;
|
||||||
|
|
||||||
&-prepare {
|
&-prepare {
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.@{className}-leave {
|
.@{name}-leave {
|
||||||
animation-timing-function: @ease-in-out-circ;
|
animation-timing-function: @ease-in-out-circ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -54,7 +56,7 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
5% {
|
5% {
|
||||||
transform: scale(0.2);
|
transform: scale(0.8);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
|
|
|
||||||
|
|
@ -490,28 +490,37 @@
|
||||||
// ---
|
// ---
|
||||||
@menu-inline-toplevel-item-height: 40px;
|
@menu-inline-toplevel-item-height: 40px;
|
||||||
@menu-item-height: 40px;
|
@menu-item-height: 40px;
|
||||||
|
@menu-item-group-height: @line-height-base;
|
||||||
@menu-collapsed-width: 80px;
|
@menu-collapsed-width: 80px;
|
||||||
@menu-bg: @component-background;
|
@menu-bg: @component-background;
|
||||||
@menu-popup-bg: @component-background;
|
@menu-popup-bg: @component-background;
|
||||||
@menu-item-color: @text-color;
|
@menu-item-color: @text-color;
|
||||||
|
@menu-inline-submenu-bg: @background-color-light;
|
||||||
@menu-highlight-color: @primary-color;
|
@menu-highlight-color: @primary-color;
|
||||||
@menu-item-active-bg: @item-active-bg;
|
@menu-highlight-danger-color: @error-color;
|
||||||
|
@menu-item-active-bg: @primary-1;
|
||||||
|
@menu-item-active-danger-bg: @red-1;
|
||||||
@menu-item-active-border-width: 3px;
|
@menu-item-active-border-width: 3px;
|
||||||
@menu-item-group-title-color: @text-color-secondary;
|
@menu-item-group-title-color: @text-color-secondary;
|
||||||
@menu-icon-size: @font-size-base;
|
|
||||||
@menu-icon-size-lg: @font-size-lg;
|
|
||||||
|
|
||||||
@menu-item-vertical-margin: 4px;
|
@menu-item-vertical-margin: 4px;
|
||||||
@menu-item-font-size: @font-size-base;
|
@menu-item-font-size: @font-size-base;
|
||||||
@menu-item-boundary-margin: 8px;
|
@menu-item-boundary-margin: 8px;
|
||||||
|
@menu-item-padding: 0 20px;
|
||||||
|
@menu-horizontal-line-height: 46px;
|
||||||
|
@menu-icon-margin-right: 10px;
|
||||||
|
@menu-icon-size: @menu-item-font-size;
|
||||||
|
@menu-icon-size-lg: @font-size-lg;
|
||||||
|
@menu-item-group-title-font-size: @menu-item-font-size;
|
||||||
|
|
||||||
// dark theme
|
// dark theme
|
||||||
@menu-dark-color: @text-color-secondary-dark;
|
@menu-dark-color: @text-color-secondary-dark;
|
||||||
|
@menu-dark-danger-color: @error-color;
|
||||||
@menu-dark-bg: @layout-header-background;
|
@menu-dark-bg: @layout-header-background;
|
||||||
@menu-dark-arrow-color: #fff;
|
@menu-dark-arrow-color: #fff;
|
||||||
@menu-dark-submenu-bg: #000c17;
|
@menu-dark-inline-submenu-bg: #000c17;
|
||||||
@menu-dark-highlight-color: #fff;
|
@menu-dark-highlight-color: #fff;
|
||||||
@menu-dark-item-active-bg: @primary-color;
|
@menu-dark-item-active-bg: @primary-color;
|
||||||
|
@menu-dark-item-active-danger-bg: @error-color;
|
||||||
@menu-dark-selected-item-icon-color: @white;
|
@menu-dark-selected-item-icon-color: @white;
|
||||||
@menu-dark-selected-item-text-color: @white;
|
@menu-dark-selected-item-text-color: @white;
|
||||||
@menu-dark-item-hover-bg: transparent;
|
@menu-dark-item-hover-bg: transparent;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
CSSProperties,
|
||||||
|
defineComponent,
|
||||||
|
HTMLAttributes,
|
||||||
|
onUnmounted,
|
||||||
|
PropType,
|
||||||
|
ref,
|
||||||
|
} from 'vue';
|
||||||
|
import ResizeObserver from '../vc-resize-observer';
|
||||||
|
import classNames from '../_util/classNames';
|
||||||
|
import { Key, VueNode } from '../_util/type';
|
||||||
|
import PropTypes from '../_util/vue-types';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'InternalItem',
|
||||||
|
props: {
|
||||||
|
prefixCls: String,
|
||||||
|
item: PropTypes.any,
|
||||||
|
renderItem: Function as PropType<(item: any) => VueNode>,
|
||||||
|
responsive: Boolean,
|
||||||
|
itemKey: [String, Number],
|
||||||
|
registerSize: Function as PropType<(key: Key, width: number | null) => void>,
|
||||||
|
display: Boolean,
|
||||||
|
order: Number,
|
||||||
|
component: PropTypes.any,
|
||||||
|
invalidate: Boolean,
|
||||||
|
},
|
||||||
|
setup(props, { slots, expose }) {
|
||||||
|
const mergedHidden = computed(() => props.responsive && !props.display);
|
||||||
|
const itemNodeRef = ref();
|
||||||
|
|
||||||
|
expose({ itemNodeRef });
|
||||||
|
|
||||||
|
// ================================ Effect ================================
|
||||||
|
function internalRegisterSize(width: number | null) {
|
||||||
|
props.registerSize(props.itemKey!, width);
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
internalRegisterSize(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const {
|
||||||
|
prefixCls,
|
||||||
|
invalidate,
|
||||||
|
item,
|
||||||
|
renderItem,
|
||||||
|
responsive,
|
||||||
|
registerSize,
|
||||||
|
itemKey,
|
||||||
|
display,
|
||||||
|
order,
|
||||||
|
component: Component = 'div',
|
||||||
|
...restProps
|
||||||
|
} = props;
|
||||||
|
const children = slots.default?.();
|
||||||
|
// ================================ Render ================================
|
||||||
|
const childNode = renderItem && item !== undefined ? renderItem(item) : children;
|
||||||
|
|
||||||
|
let overflowStyle: CSSProperties | undefined;
|
||||||
|
if (!invalidate) {
|
||||||
|
overflowStyle = {
|
||||||
|
opacity: mergedHidden.value ? 0 : 1,
|
||||||
|
height: mergedHidden.value ? 0 : undefined,
|
||||||
|
overflowY: mergedHidden.value ? 'hidden' : undefined,
|
||||||
|
order: responsive ? order : undefined,
|
||||||
|
pointerEvents: mergedHidden.value ? 'none' : undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const overflowProps: HTMLAttributes = {};
|
||||||
|
if (mergedHidden.value) {
|
||||||
|
overflowProps['aria-hidden'] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
let itemNode = (
|
||||||
|
<Component
|
||||||
|
class={classNames(!invalidate && prefixCls)}
|
||||||
|
style={overflowStyle}
|
||||||
|
{...overflowProps}
|
||||||
|
{...restProps}
|
||||||
|
ref={itemNodeRef}
|
||||||
|
>
|
||||||
|
{childNode}
|
||||||
|
</Component>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (responsive) {
|
||||||
|
itemNode = (
|
||||||
|
<ResizeObserver
|
||||||
|
onResize={({ offsetWidth }) => {
|
||||||
|
internalRegisterSize(offsetWidth);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{itemNode}
|
||||||
|
</ResizeObserver>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return itemNode;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
// import Overflow, { OverflowProps } from './Overflow';
|
||||||
|
|
||||||
|
// export { OverflowProps };
|
||||||
|
|
||||||
|
// export default Overflow;
|
||||||
|
|
@ -47,7 +47,7 @@ export default defineComponent({
|
||||||
showAction: PropTypes.any.def([]),
|
showAction: PropTypes.any.def([]),
|
||||||
hideAction: PropTypes.any.def([]),
|
hideAction: PropTypes.any.def([]),
|
||||||
getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
|
getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
|
||||||
// onPopupVisibleChange: PropTypes.func.def(noop),
|
onPopupVisibleChange: PropTypes.func.def(noop),
|
||||||
afterPopupVisibleChange: PropTypes.func.def(noop),
|
afterPopupVisibleChange: PropTypes.func.def(noop),
|
||||||
popup: PropTypes.any,
|
popup: PropTypes.any,
|
||||||
popupStyle: PropTypes.object.def(() => ({})),
|
popupStyle: PropTypes.object.def(() => ({})),
|
||||||
|
|
@ -443,7 +443,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
setPopupVisible(sPopupVisible, event) {
|
setPopupVisible(sPopupVisible, event) {
|
||||||
const { alignPoint, sPopupVisible: prevPopupVisible, $attrs } = this;
|
const { alignPoint, sPopupVisible: prevPopupVisible, onPopupVisibleChange } = this;
|
||||||
this.clearDelayTimer();
|
this.clearDelayTimer();
|
||||||
if (prevPopupVisible !== sPopupVisible) {
|
if (prevPopupVisible !== sPopupVisible) {
|
||||||
if (!hasProp(this, 'popupVisible')) {
|
if (!hasProp(this, 'popupVisible')) {
|
||||||
|
|
@ -452,7 +452,7 @@ export default defineComponent({
|
||||||
prevPopupVisible,
|
prevPopupVisible,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
$attrs.onPopupVisibleChange && $attrs.onPopupVisibleChange(sPopupVisible);
|
onPopupVisibleChange && onPopupVisibleChange(sPopupVisible);
|
||||||
}
|
}
|
||||||
// Always record the point position since mouseEnterDelay will delay the show
|
// Always record the point position since mouseEnterDelay will delay the show
|
||||||
if (alignPoint && event) {
|
if (alignPoint && event) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import devWarning, { resetWarned } from './warning';
|
||||||
|
|
||||||
|
export { resetWarned };
|
||||||
|
|
||||||
|
export default (valid: boolean, component: string, message: string): void => {
|
||||||
|
devWarning(valid, `[ant-design-vue: ${component}] ${message}`);
|
||||||
|
};
|
||||||
124
examples/App.vue
124
examples/App.vue
|
|
@ -1,39 +1,107 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="width: 256px">
|
||||||
<demo />
|
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
|
||||||
|
<MenuUnfoldOutlined v-if="collapsed" />
|
||||||
|
<MenuFoldOutlined v-else />
|
||||||
|
</a-button>
|
||||||
|
<a-menu
|
||||||
|
v-model:openKeys="openKeys"
|
||||||
|
v-model:selectedKeys="selectedKeys"
|
||||||
|
mode="inline"
|
||||||
|
theme="dark"
|
||||||
|
:inline-collapsed="collapsed"
|
||||||
|
>
|
||||||
|
<!-- <a-menu-item key="1">
|
||||||
|
<template #icon>
|
||||||
|
<PieChartOutlined />
|
||||||
|
</template>
|
||||||
|
<span>Option 1</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="2">
|
||||||
|
<template #icon>
|
||||||
|
<DesktopOutlined />
|
||||||
|
</template>
|
||||||
|
<span>Option 2</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="3">
|
||||||
|
<template #icon>
|
||||||
|
<InboxOutlined />
|
||||||
|
</template>
|
||||||
|
<span>Option 3</span>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-sub-menu key="sub1">
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<MailOutlined />
|
||||||
|
<span>Navigation One</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<a-menu-item key="5">Option 5</a-menu-item>
|
||||||
|
<a-menu-item key="6">Option 6</a-menu-item>
|
||||||
|
<a-menu-item key="7">Option 7</a-menu-item>
|
||||||
|
<a-menu-item key="8">Option 8</a-menu-item>
|
||||||
|
</a-sub-menu> -->
|
||||||
|
<a-sub-menu key="sub2">
|
||||||
|
<template #title>
|
||||||
|
<span>
|
||||||
|
<AppstoreOutlined />
|
||||||
|
<span>Navigation Two</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<a-menu-item key="9">Option 9</a-menu-item>
|
||||||
|
<a-menu-item key="10">Option 10</a-menu-item>
|
||||||
|
<a-sub-menu key="sub3" title="Submenu">
|
||||||
|
<a-menu-item key="11">Option 11</a-menu-item>
|
||||||
|
<a-menu-item key="12">Option 12</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
</a-sub-menu>
|
||||||
|
</a-menu>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent, reactive, toRefs, watch } from 'vue';
|
||||||
import demo from '../v2-doc/src/docs/tooltip/demo/index.vue';
|
import {
|
||||||
// import Affix from '../components/affix';
|
MenuFoldOutlined,
|
||||||
|
MenuUnfoldOutlined,
|
||||||
|
PieChartOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
DesktopOutlined,
|
||||||
|
InboxOutlined,
|
||||||
|
AppstoreOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
demo,
|
MenuFoldOutlined,
|
||||||
// Affix,
|
MenuUnfoldOutlined,
|
||||||
|
PieChartOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
DesktopOutlined,
|
||||||
|
InboxOutlined,
|
||||||
|
AppstoreOutlined,
|
||||||
},
|
},
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const state = reactive({
|
||||||
visible: false,
|
collapsed: false,
|
||||||
pStyle: {
|
selectedKeys: ['1'],
|
||||||
fontSize: '16px',
|
openKeys: ['sub1'],
|
||||||
color: 'rgba(0,0,0,0.85)',
|
preOpenKeys: ['sub1'],
|
||||||
lineHeight: '24px',
|
});
|
||||||
display: 'block',
|
|
||||||
marginBottom: '16px',
|
watch(
|
||||||
},
|
() => state.openKeys,
|
||||||
pStyle2: {
|
(val, oldVal) => {
|
||||||
marginBottom: '24px',
|
state.preOpenKeys = oldVal;
|
||||||
},
|
},
|
||||||
|
);
|
||||||
|
const toggleCollapsed = () => {
|
||||||
|
state.collapsed = !state.collapsed;
|
||||||
|
// state.openKeys = state.collapsed ? [] : state.preOpenKeys;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
toggleCollapsed,
|
||||||
};
|
};
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
showDrawer() {
|
|
||||||
this.visible = true;
|
|
||||||
},
|
|
||||||
onClose() {
|
|
||||||
this.visible = false;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
2
v2-doc
2
v2-doc
|
|
@ -1 +1 @@
|
||||||
Subproject commit eacad021cf9e4d7d18fe4c4b9a38cbd7e3378d49
|
Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
|
||||||
Loading…
Reference in New Issue