2306 lines
75 KiB
JavaScript
2306 lines
75 KiB
JavaScript
import _objectSpread$1 from '@babel/runtime/helpers/esm/objectSpread2';
|
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
import { createVNode, defineComponent, computed, shallowRef, inject, ref, watchEffect, watch, unref, Fragment, Teleport, getCurrentInstance, provide, toRef, Transition, withDirectives, vShow } from 'vue';
|
|
import { s as shallowequal } from './shallowequal-DbdDzF9p.mjs';
|
|
import { bb as Icon, E as useConfigInject, aD as devWarning, ae as cloneElement, M as objectType, P as PropTypes, J as flattenChildren, F as genComponentStyleHook, bo as isValid, H as classNames, S as KeyCode, ab as isValidElement, a0 as merge, ag as initZoomMotion, a9 as clearFix, Q as resetComponent, R as textEllipsis, a6 as getPropsSlot, bp as resetIcon, a2 as genFocusOutline, ap as getTransitionProps } from './server.mjs';
|
|
import uniq from 'lodash-es/uniq.js';
|
|
import { O as Overflow } from './Overflow-DfCwiuVq.mjs';
|
|
import { _ as __nuxt_component_2, T as Trigger } from './index-B7KbXP6Z.mjs';
|
|
import { w as wrapperRaf } from './raf-ruCY1ktO.mjs';
|
|
import { c as collapseMotion, g as genCollapseMotion } from './collapseMotion-cQ2SGjCA.mjs';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
import { i as initSlideMotion } from './slide-D6E-HIQp.mjs';
|
|
|
|
// This icon file is generated automatically.
|
|
var EllipsisOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z" } }] }, "name": "ellipsis", "theme": "outlined" };
|
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var EllipsisOutlined = function EllipsisOutlined(props, context) {
|
|
var p = _objectSpread({}, props, context.attrs);
|
|
|
|
return createVNode(Icon, _objectSpread({}, p, {
|
|
"icon": EllipsisOutlined$1
|
|
}), null);
|
|
};
|
|
|
|
EllipsisOutlined.displayName = 'EllipsisOutlined';
|
|
EllipsisOutlined.inheritAttrs = false;
|
|
|
|
const OverrideContextKey = Symbol("OverrideContextKey");
|
|
const useInjectOverride = () => {
|
|
return inject(OverrideContextKey, void 0);
|
|
};
|
|
const useProvideOverride = (props) => {
|
|
var _a, _b, _c;
|
|
const {
|
|
prefixCls,
|
|
mode,
|
|
selectable,
|
|
validator,
|
|
onClick,
|
|
expandIcon
|
|
} = useInjectOverride() || {};
|
|
provide(OverrideContextKey, {
|
|
prefixCls: computed(() => {
|
|
var _a2, _b2;
|
|
return (_b2 = (_a2 = props.prefixCls) === null || _a2 === void 0 ? void 0 : _a2.value) !== null && _b2 !== void 0 ? _b2 : prefixCls === null || prefixCls === void 0 ? void 0 : prefixCls.value;
|
|
}),
|
|
mode: computed(() => {
|
|
var _a2, _b2;
|
|
return (_b2 = (_a2 = props.mode) === null || _a2 === void 0 ? void 0 : _a2.value) !== null && _b2 !== void 0 ? _b2 : mode === null || mode === void 0 ? void 0 : mode.value;
|
|
}),
|
|
selectable: computed(() => {
|
|
var _a2, _b2;
|
|
return (_b2 = (_a2 = props.selectable) === null || _a2 === void 0 ? void 0 : _a2.value) !== null && _b2 !== void 0 ? _b2 : selectable === null || selectable === void 0 ? void 0 : selectable.value;
|
|
}),
|
|
validator: (_a = props.validator) !== null && _a !== void 0 ? _a : validator,
|
|
onClick: (_b = props.onClick) !== null && _b !== void 0 ? _b : onClick,
|
|
expandIcon: (_c = props.expandIcon) !== null && _c !== void 0 ? _c : expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.value
|
|
});
|
|
};
|
|
const MenuContextKey = Symbol("menuContextKey");
|
|
const useProvideMenu = (props) => {
|
|
provide(MenuContextKey, props);
|
|
};
|
|
const useInjectMenu = () => {
|
|
return inject(MenuContextKey);
|
|
};
|
|
const ForceRenderKey = Symbol("ForceRenderKey");
|
|
const useProvideForceRender = (forceRender) => {
|
|
provide(ForceRenderKey, forceRender);
|
|
};
|
|
const useInjectForceRender = () => {
|
|
return inject(ForceRenderKey, false);
|
|
};
|
|
const MenuFirstLevelContextKey = Symbol("menuFirstLevelContextKey");
|
|
const useProvideFirstLevel = (firstLevel) => {
|
|
provide(MenuFirstLevelContextKey, firstLevel);
|
|
};
|
|
const useInjectFirstLevel = () => {
|
|
return inject(MenuFirstLevelContextKey, true);
|
|
};
|
|
const MenuContextProvider = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "MenuContextProvider",
|
|
inheritAttrs: false,
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: void 0
|
|
},
|
|
overflowDisabled: {
|
|
type: Boolean,
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const menuContext = useInjectMenu();
|
|
const newContext = _extends({}, menuContext);
|
|
if (props.mode !== void 0) {
|
|
newContext.mode = toRef(props, "mode");
|
|
}
|
|
if (props.overflowDisabled !== void 0) {
|
|
newContext.overflowDisabled = toRef(props, "overflowDisabled");
|
|
}
|
|
useProvideMenu(newContext);
|
|
return () => {
|
|
var _a;
|
|
return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
|
|
};
|
|
}
|
|
});
|
|
const SiderCollapsedKey = Symbol("siderCollapsed");
|
|
const OVERFLOW_KEY = "$$__vc-menu-more__key";
|
|
const KeyPathContext = Symbol("KeyPathContext");
|
|
const useInjectKeyPath = () => {
|
|
return inject(KeyPathContext, {
|
|
parentEventKeys: computed(() => []),
|
|
parentKeys: computed(() => []),
|
|
parentInfo: {}
|
|
});
|
|
};
|
|
const useProvideKeyPath = (eventKey, key, menuInfo) => {
|
|
const {
|
|
parentEventKeys,
|
|
parentKeys
|
|
} = useInjectKeyPath();
|
|
const eventKeys = computed(() => [...parentEventKeys.value, eventKey]);
|
|
const keys = computed(() => [...parentKeys.value, key]);
|
|
provide(KeyPathContext, {
|
|
parentEventKeys: eventKeys,
|
|
parentKeys: keys,
|
|
parentInfo: menuInfo
|
|
});
|
|
return keys;
|
|
};
|
|
const measure = Symbol("measure");
|
|
const PathContext = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
setup(_props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
provide(measure, true);
|
|
return () => {
|
|
var _a;
|
|
return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
|
|
};
|
|
}
|
|
});
|
|
const useMeasure = () => {
|
|
return inject(measure, false);
|
|
};
|
|
function useDirectionStyle(level) {
|
|
const {
|
|
mode,
|
|
rtl,
|
|
inlineIndent
|
|
} = useInjectMenu();
|
|
return computed(() => mode.value !== "inline" ? null : rtl.value ? {
|
|
paddingRight: `${level.value * inlineIndent.value}px`
|
|
} : {
|
|
paddingLeft: `${level.value * inlineIndent.value}px`
|
|
});
|
|
}
|
|
let indexGuid$1 = 0;
|
|
const menuItemProps = () => ({
|
|
id: String,
|
|
role: String,
|
|
disabled: Boolean,
|
|
danger: Boolean,
|
|
title: {
|
|
type: [String, Boolean],
|
|
default: void 0
|
|
},
|
|
icon: PropTypes.any,
|
|
onMouseenter: Function,
|
|
onMouseleave: Function,
|
|
onClick: Function,
|
|
onKeydown: Function,
|
|
onFocus: Function,
|
|
// Internal user prop
|
|
originItemValue: objectType()
|
|
});
|
|
const __nuxt_component_1 = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AMenuItem",
|
|
inheritAttrs: false,
|
|
props: menuItemProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit,
|
|
attrs
|
|
} = _ref;
|
|
const instance = getCurrentInstance();
|
|
const isMeasure = useMeasure();
|
|
const key = typeof instance.vnode.key === "symbol" ? String(instance.vnode.key) : instance.vnode.key;
|
|
devWarning(typeof instance.vnode.key !== "symbol", "MenuItem", `MenuItem \`:key="${String(key)}"\` not support Symbol type`);
|
|
const eventKey = `menu_item_${++indexGuid$1}_$$_${key}`;
|
|
const {
|
|
parentEventKeys,
|
|
parentKeys
|
|
} = useInjectKeyPath();
|
|
const {
|
|
prefixCls,
|
|
activeKeys,
|
|
disabled,
|
|
changeActiveKeys,
|
|
rtl,
|
|
inlineCollapsed,
|
|
siderCollapsed,
|
|
onItemClick,
|
|
selectedKeys,
|
|
registerMenuInfo,
|
|
unRegisterMenuInfo
|
|
} = useInjectMenu();
|
|
const firstLevel = useInjectFirstLevel();
|
|
const isActive = shallowRef(false);
|
|
const keysPath = computed(() => {
|
|
return [...parentKeys.value, key];
|
|
});
|
|
const menuInfo = {
|
|
eventKey,
|
|
key,
|
|
parentEventKeys,
|
|
parentKeys,
|
|
isLeaf: true
|
|
};
|
|
registerMenuInfo(eventKey, menuInfo);
|
|
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 classNames2 = 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) => {
|
|
return {
|
|
key,
|
|
eventKey,
|
|
keyPath: keysPath.value,
|
|
eventKeyPath: [...parentEventKeys.value, eventKey],
|
|
domEvent: e,
|
|
item: _extends(_extends({}, props), attrs)
|
|
};
|
|
};
|
|
const onInternalClick = (e) => {
|
|
if (mergedDisabled.value) {
|
|
return;
|
|
}
|
|
const info = getEventInfo(e);
|
|
emit("click", e);
|
|
onItemClick(info);
|
|
};
|
|
const onMouseEnter = (event) => {
|
|
if (!mergedDisabled.value) {
|
|
changeActiveKeys(keysPath.value);
|
|
emit("mouseenter", event);
|
|
}
|
|
};
|
|
const onMouseLeave = (event) => {
|
|
if (!mergedDisabled.value) {
|
|
changeActiveKeys([]);
|
|
emit("mouseleave", event);
|
|
}
|
|
};
|
|
const onInternalKeyDown = (e) => {
|
|
emit("keydown", e);
|
|
if (e.which === KeyCode.ENTER) {
|
|
const info = getEventInfo(e);
|
|
emit("click", e);
|
|
onItemClick(info);
|
|
}
|
|
};
|
|
const onInternalFocus = (e) => {
|
|
changeActiveKeys(keysPath.value);
|
|
emit("focus", e);
|
|
};
|
|
const renderItemChildren = (icon, children) => {
|
|
const wrapNode = createVNode("span", {
|
|
"class": `${prefixCls.value}-title-content`
|
|
}, [children]);
|
|
if (!icon || isValidElement(children) && children.type === "span") {
|
|
if (children && inlineCollapsed.value && firstLevel && typeof children === "string") {
|
|
return createVNode("div", {
|
|
"class": `${prefixCls.value}-inline-collapsed-noicon`
|
|
}, [children.charAt(0)]);
|
|
}
|
|
}
|
|
return wrapNode;
|
|
};
|
|
const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));
|
|
return () => {
|
|
var _a, _b, _c, _d, _e;
|
|
if (isMeasure) return null;
|
|
const title = (_a = props.title) !== null && _a !== void 0 ? _a : (_b = slots.title) === null || _b === void 0 ? void 0 : _b.call(slots);
|
|
const children = flattenChildren((_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots));
|
|
const childrenLength = children.length;
|
|
let tooltipTitle = title;
|
|
if (typeof title === "undefined") {
|
|
tooltipTitle = firstLevel && childrenLength ? children : "";
|
|
} else if (title === false) {
|
|
tooltipTitle = "";
|
|
}
|
|
const tooltipProps = {
|
|
title: tooltipTitle
|
|
};
|
|
if (!siderCollapsed.value && !inlineCollapsed.value) {
|
|
tooltipProps.title = null;
|
|
tooltipProps.open = false;
|
|
}
|
|
const optionRoleProps = {};
|
|
if (props.role === "option") {
|
|
optionRoleProps["aria-selected"] = selected.value;
|
|
}
|
|
const icon = (_d = props.icon) !== null && _d !== void 0 ? _d : (_e = slots.icon) === null || _e === void 0 ? void 0 : _e.call(slots, props);
|
|
return createVNode(__nuxt_component_2, _objectSpread$1(_objectSpread$1({}, tooltipProps), {}, {
|
|
"placement": rtl.value ? "left" : "right",
|
|
"overlayClassName": `${prefixCls.value}-inline-collapsed-tooltip`
|
|
}), {
|
|
default: () => [createVNode(Overflow.Item, _objectSpread$1(_objectSpread$1(_objectSpread$1({
|
|
"component": "li"
|
|
}, attrs), {}, {
|
|
"id": props.id,
|
|
"style": _extends(_extends({}, attrs.style || {}), directionStyle.value),
|
|
"class": [classNames2.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,
|
|
"onKeydown": onInternalKeyDown,
|
|
"onFocus": onInternalFocus,
|
|
"title": typeof title === "string" ? title : void 0
|
|
}), {
|
|
default: () => [cloneElement(typeof icon === "function" ? icon(props.originItemValue) : icon, {
|
|
class: `${prefixCls.value}-item-icon`
|
|
}, false), renderItemChildren(icon, children)]
|
|
})]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const autoAdjustOverflow = {
|
|
adjustX: 1,
|
|
adjustY: 1
|
|
};
|
|
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]
|
|
}
|
|
};
|
|
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]
|
|
}
|
|
};
|
|
const popupPlacementMap = {
|
|
horizontal: "bottomLeft",
|
|
vertical: "rightTop",
|
|
"vertical-left": "rightTop",
|
|
"vertical-right": "leftTop"
|
|
};
|
|
const PopupTrigger = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "PopupTrigger",
|
|
inheritAttrs: false,
|
|
props: {
|
|
prefixCls: String,
|
|
mode: String,
|
|
visible: Boolean,
|
|
// popup: React.ReactNode;
|
|
popupClassName: String,
|
|
popupOffset: Array,
|
|
disabled: Boolean,
|
|
onVisibleChange: Function
|
|
},
|
|
slots: Object,
|
|
emits: ["visibleChange"],
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const innerVisible = shallowRef(false);
|
|
const {
|
|
getPopupContainer,
|
|
rtl,
|
|
subMenuOpenDelay,
|
|
subMenuCloseDelay,
|
|
builtinPlacements,
|
|
triggerSubMenuAction,
|
|
forceSubMenuRender,
|
|
motion,
|
|
defaultMotions,
|
|
rootClassName
|
|
} = useInjectMenu();
|
|
const forceRender = useInjectForceRender();
|
|
const placement = computed(() => rtl.value ? _extends(_extends({}, placementsRtl), builtinPlacements.value) : _extends(_extends({}, placements), builtinPlacements.value));
|
|
const popupPlacement = computed(() => popupPlacementMap[props.mode]);
|
|
const visibleRef = shallowRef();
|
|
watch(() => props.visible, (visible) => {
|
|
wrapperRaf.cancel(visibleRef.value);
|
|
visibleRef.value = wrapperRaf(() => {
|
|
innerVisible.value = visible;
|
|
});
|
|
}, {
|
|
immediate: true
|
|
});
|
|
const onVisibleChange = (visible) => {
|
|
emit("visibleChange", visible);
|
|
};
|
|
const mergedMotion = computed(() => {
|
|
var _a, _b;
|
|
const m = motion.value || ((_a = defaultMotions.value) === null || _a === void 0 ? void 0 : _a[props.mode]) || ((_b = defaultMotions.value) === null || _b === void 0 ? void 0 : _b.other);
|
|
const res = typeof m === "function" ? m() : m;
|
|
return res ? getTransitionProps(res.name, {
|
|
css: true
|
|
}) : void 0;
|
|
});
|
|
return () => {
|
|
const {
|
|
prefixCls,
|
|
popupClassName,
|
|
mode,
|
|
popupOffset,
|
|
disabled
|
|
} = props;
|
|
return createVNode(Trigger, {
|
|
"prefixCls": prefixCls,
|
|
"popupClassName": classNames(`${prefixCls}-popup`, {
|
|
[`${prefixCls}-rtl`]: rtl.value
|
|
}, popupClassName, rootClassName.value),
|
|
"stretch": mode === "horizontal" ? "minWidth" : null,
|
|
"getPopupContainer": getPopupContainer.value,
|
|
"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": forceRender || forceSubMenuRender.value,
|
|
"popupAnimation": mergedMotion.value
|
|
}, {
|
|
popup: slots.popup,
|
|
default: slots.default
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const InternalSubMenuList = (_props, _ref) => {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
var _a;
|
|
const {
|
|
prefixCls,
|
|
mode
|
|
} = useInjectMenu();
|
|
return createVNode("ul", _objectSpread$1(_objectSpread$1({}, attrs), {}, {
|
|
"class": classNames(prefixCls.value, `${prefixCls.value}-sub`, `${prefixCls.value}-${mode.value === "inline" ? "inline" : "vertical"}`),
|
|
"data-menu-list": true
|
|
}), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]);
|
|
};
|
|
InternalSubMenuList.displayName = "SubMenuList";
|
|
const InlineSubMenuList = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "InlineSubMenuList",
|
|
inheritAttrs: false,
|
|
props: {
|
|
id: String,
|
|
open: Boolean,
|
|
keyPath: Array
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
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);
|
|
watch(mode, () => {
|
|
if (sameModeRef.value) {
|
|
destroy.value = false;
|
|
}
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
const mergedMotion = computed(() => {
|
|
var _a, _b;
|
|
const m = motion.value || ((_a = defaultMotions.value) === null || _a === void 0 ? void 0 : _a[fixedMode.value]) || ((_b = defaultMotions.value) === null || _b === void 0 ? void 0 : _b.other);
|
|
const res = typeof m === "function" ? m() : m;
|
|
return _extends(_extends({}, res), {
|
|
appear: props.keyPath.length <= 1
|
|
});
|
|
});
|
|
return () => {
|
|
var _a;
|
|
if (destroy.value) {
|
|
return null;
|
|
}
|
|
return createVNode(MenuContextProvider, {
|
|
"mode": fixedMode.value
|
|
}, {
|
|
default: () => [createVNode(Transition, mergedMotion.value, {
|
|
default: () => [withDirectives(createVNode(InternalSubMenuList, {
|
|
"id": props.id
|
|
}, {
|
|
default: () => [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]
|
|
}), [[vShow, mergedOpen.value]])]
|
|
})]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
let indexGuid = 0;
|
|
const subMenuProps = () => ({
|
|
icon: PropTypes.any,
|
|
title: PropTypes.any,
|
|
disabled: Boolean,
|
|
level: Number,
|
|
popupClassName: String,
|
|
popupOffset: Array,
|
|
internalPopupClose: Boolean,
|
|
eventKey: String,
|
|
expandIcon: Function,
|
|
theme: String,
|
|
onMouseenter: Function,
|
|
onMouseleave: Function,
|
|
onTitleClick: Function,
|
|
// Internal user prop
|
|
originItemValue: objectType()
|
|
});
|
|
const SubMenu = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "ASubMenu",
|
|
inheritAttrs: false,
|
|
props: subMenuProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs,
|
|
emit
|
|
} = _ref;
|
|
var _a, _b;
|
|
useProvideFirstLevel(false);
|
|
const isMeasure = useMeasure();
|
|
const instance = getCurrentInstance();
|
|
const vnodeKey = typeof instance.vnode.key === "symbol" ? String(instance.vnode.key) : instance.vnode.key;
|
|
devWarning(typeof instance.vnode.key !== "symbol", "SubMenu", `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`);
|
|
const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`;
|
|
const eventKey = (_a = props.eventKey) !== null && _a !== void 0 ? _a : isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : key;
|
|
const {
|
|
parentEventKeys,
|
|
parentInfo,
|
|
parentKeys
|
|
} = useInjectKeyPath();
|
|
const keysPath = computed(() => [...parentKeys.value, key]);
|
|
const childrenEventKeys = shallowRef([]);
|
|
const menuInfo = {
|
|
eventKey,
|
|
key,
|
|
parentEventKeys,
|
|
childrenEventKeys,
|
|
parentKeys
|
|
};
|
|
(_b = parentInfo.childrenEventKeys) === null || _b === void 0 ? void 0 : _b.value.push(eventKey);
|
|
useProvideKeyPath(eventKey, key, menuInfo);
|
|
const {
|
|
prefixCls,
|
|
activeKeys,
|
|
disabled: contextDisabled,
|
|
changeActiveKeys,
|
|
mode,
|
|
inlineCollapsed,
|
|
openKeys,
|
|
overflowDisabled,
|
|
onOpenChange,
|
|
registerMenuInfo,
|
|
unRegisterMenuInfo,
|
|
selectedSubMenuKeys,
|
|
expandIcon: menuExpandIcon,
|
|
theme
|
|
} = useInjectMenu();
|
|
const hasKey = vnodeKey !== void 0 && vnodeKey !== null;
|
|
const forceRender = !isMeasure && (useInjectForceRender() || !hasKey);
|
|
useProvideForceRender(forceRender);
|
|
if (isMeasure && hasKey || !isMeasure && !hasKey || forceRender) {
|
|
registerMenuInfo(eventKey, menuInfo);
|
|
}
|
|
const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
|
|
const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
|
|
const elementRef = shallowRef();
|
|
const popupRef = shallowRef();
|
|
const originOpen = computed(() => openKeys.value.includes(key));
|
|
const open = computed(() => !overflowDisabled.value && originOpen.value);
|
|
const childrenSelected = computed(() => {
|
|
return selectedSubMenuKeys.value.includes(key);
|
|
});
|
|
const isActive = shallowRef(false);
|
|
watch(activeKeys, () => {
|
|
isActive.value = !!activeKeys.value.find((val) => val === key);
|
|
}, {
|
|
immediate: true
|
|
});
|
|
const onInternalTitleClick = (e) => {
|
|
if (mergedDisabled.value) {
|
|
return;
|
|
}
|
|
emit("titleClick", e, key);
|
|
if (mode.value === "inline") {
|
|
onOpenChange(key, !originOpen.value);
|
|
}
|
|
};
|
|
const onMouseEnter = (event) => {
|
|
if (!mergedDisabled.value) {
|
|
changeActiveKeys(keysPath.value);
|
|
emit("mouseenter", event);
|
|
}
|
|
};
|
|
const onMouseLeave = (event) => {
|
|
if (!mergedDisabled.value) {
|
|
changeActiveKeys([]);
|
|
emit("mouseleave", event);
|
|
}
|
|
};
|
|
const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));
|
|
const onPopupVisibleChange = (newVisible) => {
|
|
if (mode.value !== "inline") {
|
|
onOpenChange(key, newVisible);
|
|
}
|
|
};
|
|
const onInternalFocus = () => {
|
|
changeActiveKeys(keysPath.value);
|
|
};
|
|
const popupId = eventKey && `${eventKey}-popup`;
|
|
const popupClassName = computed(() => classNames(prefixCls.value, `${prefixCls.value}-${props.theme || theme.value}`, props.popupClassName));
|
|
const renderTitle = (title, icon) => {
|
|
if (!icon) {
|
|
return inlineCollapsed.value && !parentKeys.value.length && title && typeof title === "string" ? createVNode("div", {
|
|
"class": `${prefixCls.value}-inline-collapsed-noicon`
|
|
}, [title.charAt(0)]) : createVNode("span", {
|
|
"class": `${prefixCls.value}-title-content`
|
|
}, [title]);
|
|
}
|
|
const titleIsSpan = isValidElement(title) && title.type === "span";
|
|
return createVNode(Fragment, null, [cloneElement(typeof icon === "function" ? icon(props.originItemValue) : icon, {
|
|
class: `${prefixCls.value}-item-icon`
|
|
}, false), titleIsSpan ? title : createVNode("span", {
|
|
"class": `${prefixCls.value}-title-content`
|
|
}, [title])]);
|
|
};
|
|
const triggerModeRef = computed(() => {
|
|
return mode.value !== "inline" && keysPath.value.length > 1 ? "vertical" : mode.value;
|
|
});
|
|
const renderMode = computed(() => mode.value === "horizontal" ? "vertical" : mode.value);
|
|
const subMenuTriggerModeRef = computed(() => triggerModeRef.value === "horizontal" ? "vertical" : triggerModeRef.value);
|
|
const baseTitleNode = () => {
|
|
var _a2, _b2;
|
|
const subMenuPrefixClsValue = subMenuPrefixCls.value;
|
|
const icon = (_a2 = props.icon) !== null && _a2 !== void 0 ? _a2 : (_b2 = slots.icon) === null || _b2 === void 0 ? void 0 : _b2.call(slots, props);
|
|
const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;
|
|
const title = renderTitle(getPropsSlot(slots, props, "title"), icon);
|
|
return createVNode("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": true,
|
|
"aria-controls": popupId,
|
|
"aria-disabled": mergedDisabled.value,
|
|
"onClick": onInternalTitleClick,
|
|
"onFocus": onInternalFocus
|
|
}, [title, mode.value !== "horizontal" && expandIcon ? expandIcon(_extends(_extends({}, props), {
|
|
isOpen: open.value
|
|
})) : createVNode("i", {
|
|
"class": `${subMenuPrefixClsValue}-arrow`
|
|
}, null)]);
|
|
};
|
|
return () => {
|
|
var _a2;
|
|
if (isMeasure) {
|
|
if (!hasKey) {
|
|
return null;
|
|
}
|
|
return (_a2 = slots.default) === null || _a2 === void 0 ? void 0 : _a2.call(slots);
|
|
}
|
|
const subMenuPrefixClsValue = subMenuPrefixCls.value;
|
|
let titleNode = () => null;
|
|
if (!overflowDisabled.value && mode.value !== "inline") {
|
|
const popupOffset = mode.value === "horizontal" ? [0, 8] : [10, 0];
|
|
titleNode = () => createVNode(PopupTrigger, {
|
|
"mode": triggerModeRef.value,
|
|
"prefixCls": subMenuPrefixClsValue,
|
|
"visible": !props.internalPopupClose && open.value,
|
|
"popupClassName": popupClassName.value,
|
|
"popupOffset": props.popupOffset || popupOffset,
|
|
"disabled": mergedDisabled.value,
|
|
"onVisibleChange": onPopupVisibleChange
|
|
}, {
|
|
default: () => [baseTitleNode()],
|
|
popup: () => createVNode(MenuContextProvider, {
|
|
"mode": subMenuTriggerModeRef.value
|
|
}, {
|
|
default: () => [createVNode(InternalSubMenuList, {
|
|
"id": popupId,
|
|
"ref": popupRef
|
|
}, {
|
|
default: slots.default
|
|
})]
|
|
})
|
|
});
|
|
} else {
|
|
titleNode = () => createVNode(PopupTrigger, null, {
|
|
default: baseTitleNode
|
|
});
|
|
}
|
|
return createVNode(MenuContextProvider, {
|
|
"mode": renderMode.value
|
|
}, {
|
|
default: () => [createVNode(Overflow.Item, _objectSpread$1(_objectSpread$1({
|
|
"component": "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,
|
|
"data-submenu-id": key
|
|
}), {
|
|
default: () => {
|
|
return createVNode(Fragment, null, [titleNode(), !overflowDisabled.value && createVNode(InlineSubMenuList, {
|
|
"id": popupId,
|
|
"open": open.value,
|
|
"keyPath": keysPath.value
|
|
}, {
|
|
default: slots.default
|
|
})]);
|
|
}
|
|
})]
|
|
});
|
|
};
|
|
}
|
|
});
|
|
const menuItemGroupProps = () => ({
|
|
title: PropTypes.any,
|
|
// Internal user prop
|
|
originItemValue: objectType()
|
|
});
|
|
const ItemGroup = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AMenuItemGroup",
|
|
inheritAttrs: false,
|
|
props: menuItemGroupProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
prefixCls
|
|
} = useInjectMenu();
|
|
const groupPrefixCls = computed(() => `${prefixCls.value}-item-group`);
|
|
const isMeasure = useMeasure();
|
|
return () => {
|
|
var _a, _b;
|
|
if (isMeasure) return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
|
|
return createVNode("li", _objectSpread$1(_objectSpread$1({}, attrs), {}, {
|
|
"onClick": (e) => e.stopPropagation(),
|
|
"class": groupPrefixCls.value
|
|
}), [createVNode("div", {
|
|
"title": typeof props.title === "string" ? props.title : void 0,
|
|
"class": `${groupPrefixCls.value}-title`
|
|
}, [getPropsSlot(slots, props, "title")]), createVNode("ul", {
|
|
"class": `${groupPrefixCls.value}-list`
|
|
}, [(_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots)])]);
|
|
};
|
|
}
|
|
});
|
|
const menuDividerProps = () => ({
|
|
prefixCls: String,
|
|
dashed: Boolean
|
|
});
|
|
const Divider = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AMenuDivider",
|
|
props: menuDividerProps(),
|
|
setup(props) {
|
|
const {
|
|
prefixCls
|
|
} = useInjectMenu();
|
|
const cls = computed(() => {
|
|
return {
|
|
[`${prefixCls.value}-item-divider`]: true,
|
|
[`${prefixCls.value}-item-divider-dashed`]: !!props.dashed
|
|
};
|
|
});
|
|
return () => {
|
|
return createVNode("li", {
|
|
"class": cls.value
|
|
}, null);
|
|
};
|
|
}
|
|
});
|
|
var __rest = function(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
function convertItemsToNodes(list, store, parentMenuInfo) {
|
|
return (list || []).map((opt, index) => {
|
|
if (opt && typeof opt === "object") {
|
|
const _a = opt, {
|
|
label,
|
|
children,
|
|
key,
|
|
type
|
|
} = _a, restProps = __rest(_a, ["label", "children", "key", "type"]);
|
|
const mergedKey = key !== null && key !== void 0 ? key : `tmp-${index}`;
|
|
const parentKeys = parentMenuInfo ? parentMenuInfo.parentKeys.slice() : [];
|
|
const childrenEventKeys = [];
|
|
const menuInfo = {
|
|
eventKey: mergedKey,
|
|
key: mergedKey,
|
|
parentEventKeys: ref(parentKeys),
|
|
parentKeys: ref(parentKeys),
|
|
childrenEventKeys: ref(childrenEventKeys),
|
|
isLeaf: false
|
|
};
|
|
if (children || type === "group") {
|
|
if (type === "group") {
|
|
const childrenNodes2 = convertItemsToNodes(children, store, parentMenuInfo);
|
|
return createVNode(ItemGroup, _objectSpread$1(_objectSpread$1({
|
|
"key": mergedKey
|
|
}, restProps), {}, {
|
|
"title": label,
|
|
"originItemValue": opt
|
|
}), {
|
|
default: () => [childrenNodes2]
|
|
});
|
|
}
|
|
store.set(mergedKey, menuInfo);
|
|
if (parentMenuInfo) {
|
|
parentMenuInfo.childrenEventKeys.push(mergedKey);
|
|
}
|
|
const childrenNodes = convertItemsToNodes(children, store, {
|
|
childrenEventKeys,
|
|
parentKeys: [].concat(parentKeys, mergedKey)
|
|
});
|
|
return createVNode(SubMenu, _objectSpread$1(_objectSpread$1({
|
|
"key": mergedKey
|
|
}, restProps), {}, {
|
|
"title": label,
|
|
"originItemValue": opt
|
|
}), {
|
|
default: () => [childrenNodes]
|
|
});
|
|
}
|
|
if (type === "divider") {
|
|
return createVNode(Divider, _objectSpread$1({
|
|
"key": mergedKey
|
|
}, restProps), null);
|
|
}
|
|
menuInfo.isLeaf = true;
|
|
store.set(mergedKey, menuInfo);
|
|
return createVNode(__nuxt_component_1, _objectSpread$1(_objectSpread$1({
|
|
"key": mergedKey
|
|
}, restProps), {}, {
|
|
"originItemValue": opt
|
|
}), {
|
|
default: () => [label]
|
|
});
|
|
}
|
|
return null;
|
|
}).filter((opt) => opt);
|
|
}
|
|
function useItems(props) {
|
|
const itemsNodes = shallowRef([]);
|
|
const hasItmes = shallowRef(false);
|
|
const store = shallowRef(/* @__PURE__ */ new Map());
|
|
watch(() => props.items, () => {
|
|
const newStore = /* @__PURE__ */ new Map();
|
|
hasItmes.value = false;
|
|
if (props.items) {
|
|
hasItmes.value = true;
|
|
itemsNodes.value = convertItemsToNodes(props.items, newStore);
|
|
} else {
|
|
itemsNodes.value = void 0;
|
|
}
|
|
store.value = newStore;
|
|
}, {
|
|
immediate: true,
|
|
deep: true
|
|
});
|
|
return {
|
|
itemsNodes,
|
|
store,
|
|
hasItmes
|
|
};
|
|
}
|
|
const getHorizontalStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
motionDurationSlow,
|
|
menuHorizontalHeight,
|
|
colorSplit,
|
|
lineWidth,
|
|
lineType,
|
|
menuItemPaddingInline
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-horizontal`]: {
|
|
lineHeight: `${menuHorizontalHeight}px`,
|
|
border: 0,
|
|
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
|
boxShadow: "none",
|
|
"&::after": {
|
|
display: "block",
|
|
clear: "both",
|
|
height: 0,
|
|
content: '"\\20"'
|
|
},
|
|
// ======================= Item =======================
|
|
[`${componentCls}-item, ${componentCls}-submenu`]: {
|
|
position: "relative",
|
|
display: "inline-block",
|
|
verticalAlign: "bottom",
|
|
paddingInline: menuItemPaddingInline
|
|
},
|
|
[`> ${componentCls}-item:hover,
|
|
> ${componentCls}-item-active,
|
|
> ${componentCls}-submenu ${componentCls}-submenu-title:hover`]: {
|
|
backgroundColor: "transparent"
|
|
},
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(",")
|
|
},
|
|
// ===================== Sub Menu =====================
|
|
[`${componentCls}-submenu-arrow`]: {
|
|
display: "none"
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const getRTLStyle = (_ref) => {
|
|
let {
|
|
componentCls,
|
|
menuArrowOffset
|
|
} = _ref;
|
|
return {
|
|
[`${componentCls}-rtl`]: {
|
|
direction: "rtl"
|
|
},
|
|
[`${componentCls}-submenu-rtl`]: {
|
|
transformOrigin: "100% 0"
|
|
},
|
|
// Vertical Arrow
|
|
[`${componentCls}-rtl${componentCls}-vertical,
|
|
${componentCls}-submenu-rtl ${componentCls}-vertical`]: {
|
|
[`${componentCls}-submenu-arrow`]: {
|
|
"&::before": {
|
|
transform: `rotate(-45deg) translateY(-${menuArrowOffset})`
|
|
},
|
|
"&::after": {
|
|
transform: `rotate(45deg) translateY(${menuArrowOffset})`
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const accessibilityFocus = (token) => _extends({}, genFocusOutline(token));
|
|
const getThemeStyle = (token, themeSuffix) => {
|
|
const {
|
|
componentCls,
|
|
colorItemText,
|
|
colorItemTextSelected,
|
|
colorGroupTitle,
|
|
colorItemBg,
|
|
colorSubItemBg,
|
|
colorItemBgSelected,
|
|
colorActiveBarHeight,
|
|
colorActiveBarWidth,
|
|
colorActiveBarBorderSize,
|
|
motionDurationSlow,
|
|
motionEaseInOut,
|
|
motionEaseOut,
|
|
menuItemPaddingInline,
|
|
motionDurationMid,
|
|
colorItemTextHover,
|
|
lineType,
|
|
colorSplit,
|
|
// Disabled
|
|
colorItemTextDisabled,
|
|
// Danger
|
|
colorDangerItemText,
|
|
colorDangerItemTextHover,
|
|
colorDangerItemTextSelected,
|
|
colorDangerItemBgActive,
|
|
colorDangerItemBgSelected,
|
|
colorItemBgHover,
|
|
menuSubMenuBg,
|
|
// Horizontal
|
|
colorItemTextSelectedHorizontal,
|
|
colorItemBgSelectedHorizontal
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-${themeSuffix}`]: {
|
|
color: colorItemText,
|
|
background: colorItemBg,
|
|
[`&${componentCls}-root:focus-visible`]: _extends({}, accessibilityFocus(token)),
|
|
// ======================== Item ========================
|
|
[`${componentCls}-item-group-title`]: {
|
|
color: colorGroupTitle
|
|
},
|
|
[`${componentCls}-submenu-selected`]: {
|
|
[`> ${componentCls}-submenu-title`]: {
|
|
color: colorItemTextSelected
|
|
}
|
|
},
|
|
// Disabled
|
|
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
|
color: `${colorItemTextDisabled} !important`
|
|
},
|
|
// Hover
|
|
[`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: {
|
|
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
|
color: colorItemTextHover
|
|
}
|
|
},
|
|
[`&:not(${componentCls}-horizontal)`]: {
|
|
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
|
|
"&:hover": {
|
|
backgroundColor: colorItemBgHover
|
|
},
|
|
"&:active": {
|
|
backgroundColor: colorItemBgSelected
|
|
}
|
|
},
|
|
[`${componentCls}-submenu-title`]: {
|
|
"&:hover": {
|
|
backgroundColor: colorItemBgHover
|
|
},
|
|
"&:active": {
|
|
backgroundColor: colorItemBgSelected
|
|
}
|
|
}
|
|
},
|
|
// Danger - only Item has
|
|
[`${componentCls}-item-danger`]: {
|
|
color: colorDangerItemText,
|
|
[`&${componentCls}-item:hover`]: {
|
|
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
|
color: colorDangerItemTextHover
|
|
}
|
|
},
|
|
[`&${componentCls}-item:active`]: {
|
|
background: colorDangerItemBgActive
|
|
}
|
|
},
|
|
[`${componentCls}-item a`]: {
|
|
"&, &:hover": {
|
|
color: "inherit"
|
|
}
|
|
},
|
|
[`${componentCls}-item-selected`]: {
|
|
color: colorItemTextSelected,
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
color: colorDangerItemTextSelected
|
|
},
|
|
[`a, a:hover`]: {
|
|
color: "inherit"
|
|
}
|
|
},
|
|
[`& ${componentCls}-item-selected`]: {
|
|
backgroundColor: colorItemBgSelected,
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
backgroundColor: colorDangerItemBgSelected
|
|
}
|
|
},
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
[`&:not(${componentCls}-item-disabled):focus-visible`]: _extends({}, accessibilityFocus(token))
|
|
},
|
|
[`&${componentCls}-submenu > ${componentCls}`]: {
|
|
backgroundColor: menuSubMenuBg
|
|
},
|
|
[`&${componentCls}-popup > ${componentCls}`]: {
|
|
backgroundColor: colorItemBg
|
|
},
|
|
// ====================== Horizontal ======================
|
|
[`&${componentCls}-horizontal`]: _extends(_extends({}, themeSuffix === "dark" ? {
|
|
borderBottom: 0
|
|
} : {}), {
|
|
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
|
|
top: colorActiveBarBorderSize,
|
|
marginTop: -colorActiveBarBorderSize,
|
|
marginBottom: 0,
|
|
borderRadius: 0,
|
|
"&::after": {
|
|
position: "absolute",
|
|
insetInline: menuItemPaddingInline,
|
|
bottom: 0,
|
|
borderBottom: `${colorActiveBarHeight}px solid transparent`,
|
|
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
|
content: '""'
|
|
},
|
|
[`&:hover, &-active, &-open`]: {
|
|
"&::after": {
|
|
borderBottomWidth: colorActiveBarHeight,
|
|
borderBottomColor: colorItemTextSelectedHorizontal
|
|
}
|
|
},
|
|
[`&-selected`]: {
|
|
color: colorItemTextSelectedHorizontal,
|
|
backgroundColor: colorItemBgSelectedHorizontal,
|
|
"&::after": {
|
|
borderBottomWidth: colorActiveBarHeight,
|
|
borderBottomColor: colorItemTextSelectedHorizontal
|
|
}
|
|
}
|
|
}
|
|
}),
|
|
// ================== Inline & Vertical ===================
|
|
//
|
|
[`&${componentCls}-root`]: {
|
|
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
|
|
borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}`
|
|
}
|
|
},
|
|
// ======================== Inline ========================
|
|
[`&${componentCls}-inline`]: {
|
|
// Sub
|
|
[`${componentCls}-sub${componentCls}-inline`]: {
|
|
background: colorSubItemBg
|
|
},
|
|
// Item
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: colorActiveBarBorderSize && colorActiveBarWidth ? {
|
|
width: `calc(100% + ${colorActiveBarBorderSize}px)`
|
|
} : {},
|
|
[`${componentCls}-item`]: {
|
|
position: "relative",
|
|
"&::after": {
|
|
position: "absolute",
|
|
insetBlock: 0,
|
|
insetInlineEnd: 0,
|
|
borderInlineEnd: `${colorActiveBarWidth}px solid ${colorItemTextSelected}`,
|
|
transform: "scaleY(0.0001)",
|
|
opacity: 0,
|
|
transition: [`transform ${motionDurationMid} ${motionEaseOut}`, `opacity ${motionDurationMid} ${motionEaseOut}`].join(","),
|
|
content: '""'
|
|
},
|
|
// Danger
|
|
[`&${componentCls}-item-danger`]: {
|
|
"&::after": {
|
|
borderInlineEndColor: colorDangerItemTextSelected
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-selected, ${componentCls}-item-selected`]: {
|
|
"&::after": {
|
|
transform: "scaleY(1)",
|
|
opacity: 1,
|
|
transition: [`transform ${motionDurationMid} ${motionEaseInOut}`, `opacity ${motionDurationMid} ${motionEaseInOut}`].join(",")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const getVerticalInlineStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
menuItemHeight,
|
|
itemMarginInline,
|
|
padding,
|
|
menuArrowSize,
|
|
marginXS,
|
|
marginXXS
|
|
} = token;
|
|
const paddingWithArrow = padding + menuArrowSize + marginXS;
|
|
return {
|
|
[`${componentCls}-item`]: {
|
|
position: "relative"
|
|
},
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
height: menuItemHeight,
|
|
lineHeight: `${menuItemHeight}px`,
|
|
paddingInline: padding,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
marginInline: itemMarginInline,
|
|
marginBlock: marginXXS,
|
|
width: `calc(100% - ${itemMarginInline * 2}px)`
|
|
},
|
|
// disable margin collapsed
|
|
[`${componentCls}-submenu`]: {
|
|
paddingBottom: 0.02
|
|
},
|
|
[`> ${componentCls}-item,
|
|
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
|
height: menuItemHeight,
|
|
lineHeight: `${menuItemHeight}px`
|
|
},
|
|
[`${componentCls}-item-group-list ${componentCls}-submenu-title,
|
|
${componentCls}-submenu-title`]: {
|
|
paddingInlineEnd: paddingWithArrow
|
|
}
|
|
};
|
|
};
|
|
const getVerticalStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
iconCls,
|
|
menuItemHeight,
|
|
colorTextLightSolid,
|
|
dropdownWidth,
|
|
controlHeightLG,
|
|
motionDurationMid,
|
|
motionEaseOut,
|
|
paddingXL,
|
|
fontSizeSM,
|
|
fontSizeLG,
|
|
motionDurationSlow,
|
|
paddingXS,
|
|
boxShadowSecondary
|
|
} = token;
|
|
const inlineItemStyle = {
|
|
height: menuItemHeight,
|
|
lineHeight: `${menuItemHeight}px`,
|
|
listStylePosition: "inside",
|
|
listStyleType: "disc"
|
|
};
|
|
return [
|
|
{
|
|
[componentCls]: {
|
|
[`&-inline, &-vertical`]: _extends({
|
|
[`&${componentCls}-root`]: {
|
|
boxShadow: "none"
|
|
}
|
|
}, getVerticalInlineStyle(token))
|
|
},
|
|
[`${componentCls}-submenu-popup`]: {
|
|
[`${componentCls}-vertical`]: _extends(_extends({}, getVerticalInlineStyle(token)), {
|
|
boxShadow: boxShadowSecondary
|
|
})
|
|
}
|
|
},
|
|
// Vertical only
|
|
{
|
|
[`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: {
|
|
minWidth: dropdownWidth,
|
|
maxHeight: `calc(100vh - ${controlHeightLG * 2.5}px)`,
|
|
padding: "0",
|
|
overflow: "hidden",
|
|
borderInlineEnd: 0,
|
|
// https://github.com/ant-design/ant-design/issues/22244
|
|
// https://github.com/ant-design/ant-design/issues/26812
|
|
"&:not([class*='-active'])": {
|
|
overflowX: "hidden",
|
|
overflowY: "auto"
|
|
}
|
|
}
|
|
},
|
|
// Inline Only
|
|
{
|
|
[`${componentCls}-inline`]: {
|
|
width: "100%",
|
|
// Motion enhance for first level
|
|
[`&${componentCls}-root`]: {
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`, `padding ${motionDurationMid} ${motionEaseOut}`].join(","),
|
|
[`> ${componentCls}-title-content`]: {
|
|
flex: "auto",
|
|
minWidth: 0,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis"
|
|
},
|
|
"> *": {
|
|
flex: "none"
|
|
}
|
|
}
|
|
},
|
|
// >>>>> Sub
|
|
[`${componentCls}-sub${componentCls}-inline`]: {
|
|
padding: 0,
|
|
border: 0,
|
|
borderRadius: 0,
|
|
boxShadow: "none",
|
|
[`& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: inlineItemStyle,
|
|
[`& ${componentCls}-item-group-title`]: {
|
|
paddingInlineStart: paddingXL
|
|
}
|
|
},
|
|
// >>>>> Item
|
|
[`${componentCls}-item`]: inlineItemStyle
|
|
}
|
|
},
|
|
// Inline Collapse Only
|
|
{
|
|
[`${componentCls}-inline-collapsed`]: {
|
|
width: menuItemHeight * 2,
|
|
[`&${componentCls}-root`]: {
|
|
[`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: {
|
|
[`> ${componentCls}-inline-collapsed-noicon`]: {
|
|
fontSize: fontSizeLG,
|
|
textAlign: "center"
|
|
}
|
|
}
|
|
},
|
|
[`> ${componentCls}-item,
|
|
> ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-item,
|
|
> ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title,
|
|
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
|
insetInlineStart: 0,
|
|
paddingInline: `calc(50% - ${fontSizeSM}px)`,
|
|
textOverflow: "clip",
|
|
[`
|
|
${componentCls}-submenu-arrow,
|
|
${componentCls}-submenu-expand-icon
|
|
`]: {
|
|
opacity: 0
|
|
},
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
margin: 0,
|
|
fontSize: fontSizeLG,
|
|
lineHeight: `${menuItemHeight}px`,
|
|
"+ span": {
|
|
display: "inline-block",
|
|
opacity: 0
|
|
}
|
|
}
|
|
},
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
display: "inline-block"
|
|
},
|
|
"&-tooltip": {
|
|
pointerEvents: "none",
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
display: "none"
|
|
},
|
|
"a, a:hover": {
|
|
color: colorTextLightSolid
|
|
}
|
|
},
|
|
[`${componentCls}-item-group-title`]: _extends(_extends({}, textEllipsis), {
|
|
paddingInline: paddingXS
|
|
})
|
|
}
|
|
}
|
|
];
|
|
};
|
|
const genMenuItemStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
fontSize,
|
|
motionDurationSlow,
|
|
motionDurationMid,
|
|
motionEaseInOut,
|
|
motionEaseOut,
|
|
iconCls,
|
|
controlHeightSM
|
|
} = token;
|
|
return {
|
|
// >>>>> Item
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
position: "relative",
|
|
display: "block",
|
|
margin: 0,
|
|
whiteSpace: "nowrap",
|
|
cursor: "pointer",
|
|
transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`, `padding ${motionDurationSlow} ${motionEaseInOut}`].join(","),
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
minWidth: fontSize,
|
|
fontSize,
|
|
transition: [`font-size ${motionDurationMid} ${motionEaseOut}`, `margin ${motionDurationSlow} ${motionEaseInOut}`, `color ${motionDurationSlow}`].join(","),
|
|
"+ span": {
|
|
marginInlineStart: controlHeightSM - fontSize,
|
|
opacity: 1,
|
|
transition: [`opacity ${motionDurationSlow} ${motionEaseInOut}`, `margin ${motionDurationSlow}`, `color ${motionDurationSlow}`].join(",")
|
|
}
|
|
},
|
|
[`${componentCls}-item-icon`]: _extends({}, resetIcon()),
|
|
[`&${componentCls}-item-only-child`]: {
|
|
[`> ${iconCls}, > ${componentCls}-item-icon`]: {
|
|
marginInlineEnd: 0
|
|
}
|
|
}
|
|
},
|
|
// Disabled state sets text to gray and nukes hover/tab effects
|
|
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
|
background: "none !important",
|
|
cursor: "not-allowed",
|
|
"&::after": {
|
|
borderColor: "transparent !important"
|
|
},
|
|
a: {
|
|
color: "inherit !important"
|
|
},
|
|
[`> ${componentCls}-submenu-title`]: {
|
|
color: "inherit !important",
|
|
cursor: "not-allowed"
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const genSubMenuArrowStyle = (token) => {
|
|
const {
|
|
componentCls,
|
|
motionDurationSlow,
|
|
motionEaseInOut,
|
|
borderRadius,
|
|
menuArrowSize,
|
|
menuArrowOffset
|
|
} = token;
|
|
return {
|
|
[`${componentCls}-submenu`]: {
|
|
[`&-expand-icon, &-arrow`]: {
|
|
position: "absolute",
|
|
top: "50%",
|
|
insetInlineEnd: token.margin,
|
|
width: menuArrowSize,
|
|
color: "currentcolor",
|
|
transform: "translateY(-50%)",
|
|
transition: `transform ${motionDurationSlow} ${motionEaseInOut}, opacity ${motionDurationSlow}`
|
|
},
|
|
"&-arrow": {
|
|
// →
|
|
"&::before, &::after": {
|
|
position: "absolute",
|
|
width: menuArrowSize * 0.6,
|
|
height: menuArrowSize * 0.15,
|
|
backgroundColor: "currentcolor",
|
|
borderRadius,
|
|
transition: [`background ${motionDurationSlow} ${motionEaseInOut}`, `transform ${motionDurationSlow} ${motionEaseInOut}`, `top ${motionDurationSlow} ${motionEaseInOut}`, `color ${motionDurationSlow} ${motionEaseInOut}`].join(","),
|
|
content: '""'
|
|
},
|
|
"&::before": {
|
|
transform: `rotate(45deg) translateY(-${menuArrowOffset})`
|
|
},
|
|
"&::after": {
|
|
transform: `rotate(-45deg) translateY(${menuArrowOffset})`
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
const getBaseStyle = (token) => {
|
|
const {
|
|
antCls,
|
|
componentCls,
|
|
fontSize,
|
|
motionDurationSlow,
|
|
motionDurationMid,
|
|
motionEaseInOut,
|
|
lineHeight,
|
|
paddingXS,
|
|
padding,
|
|
colorSplit,
|
|
lineWidth,
|
|
zIndexPopup,
|
|
borderRadiusLG,
|
|
radiusSubMenuItem,
|
|
menuArrowSize,
|
|
menuArrowOffset,
|
|
lineType,
|
|
menuPanelMaskInset
|
|
} = token;
|
|
return [
|
|
// Misc
|
|
{
|
|
"": {
|
|
[`${componentCls}`]: _extends(_extends({}, clearFix()), {
|
|
// Hidden
|
|
[`&-hidden`]: {
|
|
display: "none"
|
|
}
|
|
})
|
|
},
|
|
[`${componentCls}-submenu-hidden`]: {
|
|
display: "none"
|
|
}
|
|
},
|
|
{
|
|
[componentCls]: _extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), clearFix()), {
|
|
marginBottom: 0,
|
|
paddingInlineStart: 0,
|
|
// Override default ul/ol
|
|
fontSize,
|
|
lineHeight: 0,
|
|
listStyle: "none",
|
|
outline: "none",
|
|
transition: `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
|
|
[`ul, ol`]: {
|
|
margin: 0,
|
|
padding: 0,
|
|
listStyle: "none"
|
|
},
|
|
// Overflow ellipsis
|
|
[`&-overflow`]: {
|
|
display: "flex",
|
|
[`${componentCls}-item`]: {
|
|
flex: "none"
|
|
}
|
|
},
|
|
[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: {
|
|
borderRadius: token.radiusItem
|
|
},
|
|
[`${componentCls}-item-group-title`]: {
|
|
padding: `${paddingXS}px ${padding}px`,
|
|
fontSize,
|
|
lineHeight,
|
|
transition: `all ${motionDurationSlow}`
|
|
},
|
|
[`&-horizontal ${componentCls}-submenu`]: {
|
|
transition: [`border-color ${motionDurationSlow} ${motionEaseInOut}`, `background ${motionDurationSlow} ${motionEaseInOut}`].join(",")
|
|
},
|
|
[`${componentCls}-submenu, ${componentCls}-submenu-inline`]: {
|
|
transition: [`border-color ${motionDurationSlow} ${motionEaseInOut}`, `background ${motionDurationSlow} ${motionEaseInOut}`, `padding ${motionDurationMid} ${motionEaseInOut}`].join(",")
|
|
},
|
|
[`${componentCls}-submenu ${componentCls}-sub`]: {
|
|
cursor: "initial",
|
|
transition: [`background ${motionDurationSlow} ${motionEaseInOut}`, `padding ${motionDurationSlow} ${motionEaseInOut}`].join(",")
|
|
},
|
|
[`${componentCls}-title-content`]: {
|
|
transition: `color ${motionDurationSlow}`
|
|
},
|
|
[`${componentCls}-item a`]: {
|
|
"&::before": {
|
|
position: "absolute",
|
|
inset: 0,
|
|
backgroundColor: "transparent",
|
|
content: '""'
|
|
}
|
|
},
|
|
// Removed a Badge related style seems it's safe
|
|
// https://github.com/ant-design/ant-design/issues/19809
|
|
// >>>>> Divider
|
|
[`${componentCls}-item-divider`]: {
|
|
overflow: "hidden",
|
|
lineHeight: 0,
|
|
borderColor: colorSplit,
|
|
borderStyle: lineType,
|
|
borderWidth: 0,
|
|
borderTopWidth: lineWidth,
|
|
marginBlock: lineWidth,
|
|
padding: 0,
|
|
"&-dashed": {
|
|
borderStyle: "dashed"
|
|
}
|
|
}
|
|
}), genMenuItemStyle(token)), {
|
|
[`${componentCls}-item-group`]: {
|
|
[`${componentCls}-item-group-list`]: {
|
|
margin: 0,
|
|
padding: 0,
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
paddingInline: `${fontSize * 2}px ${padding}px`
|
|
}
|
|
}
|
|
},
|
|
// ======================= Sub Menu =======================
|
|
"&-submenu": {
|
|
"&-popup": {
|
|
position: "absolute",
|
|
zIndex: zIndexPopup,
|
|
background: "transparent",
|
|
borderRadius: borderRadiusLG,
|
|
boxShadow: "none",
|
|
transformOrigin: "0 0",
|
|
// https://github.com/ant-design/ant-design/issues/13955
|
|
"&::before": {
|
|
position: "absolute",
|
|
inset: `${menuPanelMaskInset}px 0 0`,
|
|
zIndex: -1,
|
|
width: "100%",
|
|
height: "100%",
|
|
opacity: 0,
|
|
content: '""'
|
|
}
|
|
},
|
|
// https://github.com/ant-design/ant-design/issues/13955
|
|
"&-placement-rightTop::before": {
|
|
top: 0,
|
|
insetInlineStart: menuPanelMaskInset
|
|
},
|
|
[`> ${componentCls}`]: _extends(_extends(_extends({
|
|
borderRadius: borderRadiusLG
|
|
}, genMenuItemStyle(token)), genSubMenuArrowStyle(token)), {
|
|
[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
|
borderRadius: radiusSubMenuItem
|
|
},
|
|
[`${componentCls}-submenu-title::after`]: {
|
|
transition: `transform ${motionDurationSlow} ${motionEaseInOut}`
|
|
}
|
|
})
|
|
}
|
|
}), genSubMenuArrowStyle(token)), {
|
|
[`&-inline-collapsed ${componentCls}-submenu-arrow,
|
|
&-inline ${componentCls}-submenu-arrow`]: {
|
|
// ↓
|
|
"&::before": {
|
|
transform: `rotate(-45deg) translateX(${menuArrowOffset})`
|
|
},
|
|
"&::after": {
|
|
transform: `rotate(45deg) translateX(-${menuArrowOffset})`
|
|
}
|
|
},
|
|
[`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]: {
|
|
// ↑
|
|
transform: `translateY(-${menuArrowSize * 0.2}px)`,
|
|
"&::after": {
|
|
transform: `rotate(-45deg) translateX(-${menuArrowOffset})`
|
|
},
|
|
"&::before": {
|
|
transform: `rotate(45deg) translateX(${menuArrowOffset})`
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// Integration with header element so menu items have the same height
|
|
{
|
|
[`${antCls}-layout-header`]: {
|
|
[componentCls]: {
|
|
lineHeight: "inherit"
|
|
}
|
|
}
|
|
}
|
|
];
|
|
};
|
|
const useStyle = (prefixCls, injectStyle) => {
|
|
const useOriginHook = genComponentStyleHook("Menu", (token, _ref) => {
|
|
let {
|
|
overrideComponentToken
|
|
} = _ref;
|
|
if ((injectStyle === null || injectStyle === void 0 ? void 0 : injectStyle.value) === false) {
|
|
return [];
|
|
}
|
|
const {
|
|
colorBgElevated,
|
|
colorPrimary,
|
|
colorError,
|
|
colorErrorHover,
|
|
colorTextLightSolid
|
|
} = token;
|
|
const {
|
|
controlHeightLG,
|
|
fontSize
|
|
} = token;
|
|
const menuArrowSize = fontSize / 7 * 5;
|
|
const menuToken = merge(token, {
|
|
menuItemHeight: controlHeightLG,
|
|
menuItemPaddingInline: token.margin,
|
|
menuArrowSize,
|
|
menuHorizontalHeight: controlHeightLG * 1.15,
|
|
menuArrowOffset: `${menuArrowSize * 0.25}px`,
|
|
menuPanelMaskInset: -7,
|
|
menuSubMenuBg: colorBgElevated
|
|
});
|
|
const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
|
|
const menuDarkToken = merge(menuToken, {
|
|
colorItemText: colorTextDark,
|
|
colorItemTextHover: colorTextLightSolid,
|
|
colorGroupTitle: colorTextDark,
|
|
colorItemTextSelected: colorTextLightSolid,
|
|
colorItemBg: "#001529",
|
|
colorSubItemBg: "#000c17",
|
|
colorItemBgActive: "transparent",
|
|
colorItemBgSelected: colorPrimary,
|
|
colorActiveBarWidth: 0,
|
|
colorActiveBarHeight: 0,
|
|
colorActiveBarBorderSize: 0,
|
|
// Disabled
|
|
colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
|
|
// Danger
|
|
colorDangerItemText: colorError,
|
|
colorDangerItemTextHover: colorErrorHover,
|
|
colorDangerItemTextSelected: colorTextLightSolid,
|
|
colorDangerItemBgActive: colorError,
|
|
colorDangerItemBgSelected: colorError,
|
|
menuSubMenuBg: "#001529",
|
|
// Horizontal
|
|
colorItemTextSelectedHorizontal: colorTextLightSolid,
|
|
colorItemBgSelectedHorizontal: colorPrimary
|
|
}, _extends({}, overrideComponentToken));
|
|
return [
|
|
// Basic
|
|
getBaseStyle(menuToken),
|
|
// Horizontal
|
|
getHorizontalStyle(menuToken),
|
|
// Vertical
|
|
getVerticalStyle(menuToken),
|
|
// Theme
|
|
getThemeStyle(menuToken, "light"),
|
|
getThemeStyle(menuDarkToken, "dark"),
|
|
// RTL
|
|
getRTLStyle(menuToken),
|
|
// Motion
|
|
genCollapseMotion(menuToken),
|
|
initSlideMotion(menuToken, "slide-up"),
|
|
initSlideMotion(menuToken, "slide-down"),
|
|
initZoomMotion(menuToken, "zoom-big")
|
|
];
|
|
}, (token) => {
|
|
const {
|
|
colorPrimary,
|
|
colorError,
|
|
colorTextDisabled,
|
|
colorErrorBg,
|
|
colorText,
|
|
colorTextDescription,
|
|
colorBgContainer,
|
|
colorFillAlter,
|
|
colorFillContent,
|
|
lineWidth,
|
|
lineWidthBold,
|
|
controlItemBgActive,
|
|
colorBgTextHover
|
|
} = token;
|
|
return {
|
|
dropdownWidth: 160,
|
|
zIndexPopup: token.zIndexPopupBase + 50,
|
|
radiusItem: token.borderRadiusLG,
|
|
radiusSubMenuItem: token.borderRadiusSM,
|
|
colorItemText: colorText,
|
|
colorItemTextHover: colorText,
|
|
colorItemTextHoverHorizontal: colorPrimary,
|
|
colorGroupTitle: colorTextDescription,
|
|
colorItemTextSelected: colorPrimary,
|
|
colorItemTextSelectedHorizontal: colorPrimary,
|
|
colorItemBg: colorBgContainer,
|
|
colorItemBgHover: colorBgTextHover,
|
|
colorItemBgActive: colorFillContent,
|
|
colorSubItemBg: colorFillAlter,
|
|
colorItemBgSelected: controlItemBgActive,
|
|
colorItemBgSelectedHorizontal: "transparent",
|
|
colorActiveBarWidth: 0,
|
|
colorActiveBarHeight: lineWidthBold,
|
|
colorActiveBarBorderSize: lineWidth,
|
|
// Disabled
|
|
colorItemTextDisabled: colorTextDisabled,
|
|
// Danger
|
|
colorDangerItemText: colorError,
|
|
colorDangerItemTextHover: colorError,
|
|
colorDangerItemTextSelected: colorError,
|
|
colorDangerItemBgActive: colorErrorBg,
|
|
colorDangerItemBgSelected: colorErrorBg,
|
|
itemMarginInline: token.marginXXS
|
|
};
|
|
});
|
|
return useOriginHook(prefixCls);
|
|
};
|
|
const menuProps = () => ({
|
|
id: String,
|
|
prefixCls: String,
|
|
// donot use items, now only support inner use
|
|
items: Array,
|
|
disabled: Boolean,
|
|
inlineCollapsed: Boolean,
|
|
disabledOverflow: Boolean,
|
|
forceSubMenuRender: Boolean,
|
|
openKeys: Array,
|
|
selectedKeys: Array,
|
|
activeKey: String,
|
|
selectable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
tabindex: {
|
|
type: [Number, String]
|
|
},
|
|
motion: Object,
|
|
role: String,
|
|
theme: {
|
|
type: String,
|
|
default: "light"
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: "vertical"
|
|
},
|
|
inlineIndent: {
|
|
type: Number,
|
|
default: 24
|
|
},
|
|
subMenuOpenDelay: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
subMenuCloseDelay: {
|
|
type: Number,
|
|
default: 0.1
|
|
},
|
|
builtinPlacements: {
|
|
type: Object
|
|
},
|
|
triggerSubMenuAction: {
|
|
type: String,
|
|
default: "hover"
|
|
},
|
|
getPopupContainer: Function,
|
|
expandIcon: Function,
|
|
onOpenChange: Function,
|
|
onSelect: Function,
|
|
onDeselect: Function,
|
|
onClick: [Function, Array],
|
|
onFocus: Function,
|
|
onBlur: Function,
|
|
onMousedown: Function,
|
|
"onUpdate:openKeys": Function,
|
|
"onUpdate:selectedKeys": Function,
|
|
"onUpdate:activeKey": Function
|
|
});
|
|
const EMPTY_LIST = [];
|
|
const Menu = defineComponent({
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
name: "AMenu",
|
|
inheritAttrs: false,
|
|
props: menuProps(),
|
|
slots: Object,
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit,
|
|
attrs
|
|
} = _ref;
|
|
const {
|
|
direction,
|
|
getPrefixCls
|
|
} = useConfigInject("menu", props);
|
|
const override = useInjectOverride();
|
|
const prefixCls = computed(() => {
|
|
var _a;
|
|
return getPrefixCls("menu", props.prefixCls || ((_a = override === null || override === void 0 ? void 0 : override.prefixCls) === null || _a === void 0 ? void 0 : _a.value));
|
|
});
|
|
const [wrapSSR, hashId] = useStyle(prefixCls, computed(() => {
|
|
return !override;
|
|
}));
|
|
const store = shallowRef(/* @__PURE__ */ new Map());
|
|
const siderCollapsed = inject(SiderCollapsedKey, ref(void 0));
|
|
const inlineCollapsed = computed(() => {
|
|
if (siderCollapsed.value !== void 0) {
|
|
return siderCollapsed.value;
|
|
}
|
|
return props.inlineCollapsed;
|
|
});
|
|
const {
|
|
itemsNodes
|
|
} = useItems(props);
|
|
const isMounted = shallowRef(false);
|
|
watchEffect(() => {
|
|
devWarning(!(props.inlineCollapsed === true && props.mode !== "inline"), "Menu", "`inlineCollapsed` should only be used when `mode` is inline.");
|
|
devWarning(!(siderCollapsed.value !== void 0 && props.inlineCollapsed === true), "Menu", "`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.");
|
|
});
|
|
const activeKeys = ref([]);
|
|
const mergedSelectedKeys = ref([]);
|
|
const keyMapStore = ref({});
|
|
watch(store, () => {
|
|
const newKeyMapStore = {};
|
|
for (const menuInfo of store.value.values()) {
|
|
newKeyMapStore[menuInfo.key] = menuInfo;
|
|
}
|
|
keyMapStore.value = newKeyMapStore;
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
watchEffect(() => {
|
|
if (props.activeKey !== void 0) {
|
|
let keys = [];
|
|
const menuInfo = props.activeKey ? keyMapStore.value[props.activeKey] : void 0;
|
|
if (menuInfo && props.activeKey !== void 0) {
|
|
keys = uniq([].concat(unref(menuInfo.parentKeys), props.activeKey));
|
|
} else {
|
|
keys = [];
|
|
}
|
|
if (!shallowequal(activeKeys.value, keys)) {
|
|
activeKeys.value = keys;
|
|
}
|
|
}
|
|
});
|
|
watch(() => props.selectedKeys, (selectedKeys) => {
|
|
if (selectedKeys) {
|
|
mergedSelectedKeys.value = selectedKeys.slice();
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
deep: true
|
|
});
|
|
const selectedSubMenuKeys = ref([]);
|
|
watch([keyMapStore, mergedSelectedKeys], () => {
|
|
let subMenuParentKeys = [];
|
|
mergedSelectedKeys.value.forEach((key) => {
|
|
const menuInfo = keyMapStore.value[key];
|
|
if (menuInfo) {
|
|
subMenuParentKeys = subMenuParentKeys.concat(unref(menuInfo.parentKeys));
|
|
}
|
|
});
|
|
subMenuParentKeys = uniq(subMenuParentKeys);
|
|
if (!shallowequal(selectedSubMenuKeys.value, subMenuParentKeys)) {
|
|
selectedSubMenuKeys.value = subMenuParentKeys;
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
const triggerSelection = (info) => {
|
|
if (props.selectable) {
|
|
const {
|
|
key: targetKey
|
|
} = info;
|
|
const exist = mergedSelectedKeys.value.includes(targetKey);
|
|
let newSelectedKeys;
|
|
if (props.multiple) {
|
|
if (exist) {
|
|
newSelectedKeys = mergedSelectedKeys.value.filter((key) => key !== targetKey);
|
|
} else {
|
|
newSelectedKeys = [...mergedSelectedKeys.value, targetKey];
|
|
}
|
|
} else {
|
|
newSelectedKeys = [targetKey];
|
|
}
|
|
const selectInfo = _extends(_extends({}, info), {
|
|
selectedKeys: newSelectedKeys
|
|
});
|
|
if (!shallowequal(newSelectedKeys, mergedSelectedKeys.value)) {
|
|
if (props.selectedKeys === void 0) {
|
|
mergedSelectedKeys.value = newSelectedKeys;
|
|
}
|
|
emit("update:selectedKeys", newSelectedKeys);
|
|
if (exist && props.multiple) {
|
|
emit("deselect", selectInfo);
|
|
} else {
|
|
emit("select", selectInfo);
|
|
}
|
|
}
|
|
}
|
|
if (mergedMode.value !== "inline" && !props.multiple && mergedOpenKeys.value.length) {
|
|
triggerOpenKeys(EMPTY_LIST);
|
|
}
|
|
};
|
|
const mergedOpenKeys = ref([]);
|
|
watch(() => props.openKeys, function() {
|
|
let openKeys = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : mergedOpenKeys.value;
|
|
if (!shallowequal(mergedOpenKeys.value, openKeys)) {
|
|
mergedOpenKeys.value = openKeys.slice();
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
deep: true
|
|
});
|
|
let timeout;
|
|
const changeActiveKeys = (keys) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
if (props.activeKey === void 0) {
|
|
activeKeys.value = keys;
|
|
}
|
|
emit("update:activeKey", keys[keys.length - 1]);
|
|
});
|
|
};
|
|
const disabled = computed(() => !!props.disabled);
|
|
const isRtl = computed(() => direction.value === "rtl");
|
|
const mergedMode = ref("vertical");
|
|
const mergedInlineCollapsed = shallowRef(false);
|
|
watchEffect(() => {
|
|
var _a;
|
|
if ((props.mode === "inline" || props.mode === "vertical") && inlineCollapsed.value) {
|
|
mergedMode.value = "vertical";
|
|
mergedInlineCollapsed.value = inlineCollapsed.value;
|
|
} else {
|
|
mergedMode.value = props.mode;
|
|
mergedInlineCollapsed.value = false;
|
|
}
|
|
if ((_a = override === null || override === void 0 ? void 0 : override.mode) === null || _a === void 0 ? void 0 : _a.value) {
|
|
mergedMode.value = override.mode.value;
|
|
}
|
|
});
|
|
const isInlineMode = computed(() => mergedMode.value === "inline");
|
|
const triggerOpenKeys = (keys) => {
|
|
mergedOpenKeys.value = keys;
|
|
emit("update:openKeys", keys);
|
|
emit("openChange", keys);
|
|
};
|
|
const inlineCacheOpenKeys = ref(mergedOpenKeys.value);
|
|
const mountRef = shallowRef(false);
|
|
watch(mergedOpenKeys, () => {
|
|
if (isInlineMode.value) {
|
|
inlineCacheOpenKeys.value = mergedOpenKeys.value;
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
watch(isInlineMode, () => {
|
|
if (!mountRef.value) {
|
|
mountRef.value = true;
|
|
return;
|
|
}
|
|
if (isInlineMode.value) {
|
|
mergedOpenKeys.value = inlineCacheOpenKeys.value;
|
|
} else {
|
|
triggerOpenKeys(EMPTY_LIST);
|
|
}
|
|
}, {
|
|
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 rootPrefixCls = computed(() => getPrefixCls());
|
|
const defaultMotions = computed(() => ({
|
|
horizontal: {
|
|
name: `${rootPrefixCls.value}-slide-up`
|
|
},
|
|
inline: collapseMotion(`${rootPrefixCls.value}-motion-collapse`),
|
|
other: {
|
|
name: `${rootPrefixCls.value}-zoom-big`
|
|
}
|
|
}));
|
|
useProvideFirstLevel(true);
|
|
const getChildrenKeys = function() {
|
|
let eventKeys = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
|
|
const keys = [];
|
|
const storeValue = store.value;
|
|
eventKeys.forEach((eventKey) => {
|
|
const {
|
|
key,
|
|
childrenEventKeys
|
|
} = storeValue.get(eventKey);
|
|
keys.push(key, ...getChildrenKeys(unref(childrenEventKeys)));
|
|
});
|
|
return keys;
|
|
};
|
|
const onInternalClick = (info) => {
|
|
var _a;
|
|
emit("click", info);
|
|
triggerSelection(info);
|
|
(_a = override === null || override === void 0 ? void 0 : override.onClick) === null || _a === void 0 ? void 0 : _a.call(override);
|
|
};
|
|
const onInternalOpenChange = (key, open) => {
|
|
var _a;
|
|
const childrenEventKeys = ((_a = keyMapStore.value[key]) === null || _a === void 0 ? void 0 : _a.childrenEventKeys) || [];
|
|
let newOpenKeys = mergedOpenKeys.value.filter((k) => k !== key);
|
|
if (open) {
|
|
newOpenKeys.push(key);
|
|
} else if (mergedMode.value !== "inline") {
|
|
const subPathKeys = getChildrenKeys(unref(childrenEventKeys));
|
|
newOpenKeys = uniq(newOpenKeys.filter((k) => !subPathKeys.includes(k)));
|
|
}
|
|
if (!shallowequal(mergedOpenKeys, newOpenKeys)) {
|
|
triggerOpenKeys(newOpenKeys);
|
|
}
|
|
};
|
|
const registerMenuInfo = (key, info) => {
|
|
store.value.set(key, info);
|
|
store.value = new Map(store.value);
|
|
};
|
|
const unRegisterMenuInfo = (key) => {
|
|
store.value.delete(key);
|
|
store.value = new Map(store.value);
|
|
};
|
|
const lastVisibleIndex = ref(0);
|
|
const expandIcon = computed(() => {
|
|
var _a;
|
|
return props.expandIcon || slots.expandIcon || ((_a = override === null || override === void 0 ? void 0 : override.expandIcon) === null || _a === void 0 ? void 0 : _a.value) ? (opt) => {
|
|
let icon = props.expandIcon || slots.expandIcon;
|
|
icon = typeof icon === "function" ? icon(opt) : icon;
|
|
return cloneElement(icon, {
|
|
class: `${prefixCls.value}-submenu-expand-icon`
|
|
}, false);
|
|
} : null;
|
|
});
|
|
useProvideMenu({
|
|
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,
|
|
theme: computed(() => props.theme),
|
|
siderCollapsed,
|
|
defaultMotions: computed(() => isMounted.value ? defaultMotions.value : null),
|
|
motion: computed(() => isMounted.value ? props.motion : null),
|
|
overflowDisabled: shallowRef(void 0),
|
|
onOpenChange: onInternalOpenChange,
|
|
onItemClick: onInternalClick,
|
|
registerMenuInfo,
|
|
unRegisterMenuInfo,
|
|
selectedSubMenuKeys,
|
|
expandIcon,
|
|
forceSubMenuRender: computed(() => props.forceSubMenuRender),
|
|
rootClassName: hashId
|
|
});
|
|
const getChildrenList = () => {
|
|
var _a;
|
|
return itemsNodes.value || flattenChildren((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
|
|
};
|
|
return () => {
|
|
var _a;
|
|
const childList = getChildrenList();
|
|
const allVisible = lastVisibleIndex.value >= childList.length - 1 || mergedMode.value !== "horizontal" || props.disabledOverflow;
|
|
const getWrapperList = (childList2) => {
|
|
return mergedMode.value !== "horizontal" || props.disabledOverflow ? childList2 : (
|
|
// Need wrap for overflow dropdown that do not response for open
|
|
childList2.map((child, index) => (
|
|
// Always wrap provider to avoid sub node re-mount
|
|
createVNode(MenuContextProvider, {
|
|
"key": child.key,
|
|
"overflowDisabled": index > lastVisibleIndex.value
|
|
}, {
|
|
default: () => child
|
|
})
|
|
))
|
|
);
|
|
};
|
|
const overflowedIndicator = ((_a = slots.overflowedIndicator) === null || _a === void 0 ? void 0 : _a.call(slots)) || createVNode(EllipsisOutlined, null, null);
|
|
return wrapSSR(createVNode(Overflow, _objectSpread$1(_objectSpread$1({}, attrs), {}, {
|
|
"onMousedown": props.onMousedown,
|
|
"prefixCls": `${prefixCls.value}-overflow`,
|
|
"component": "ul",
|
|
"itemComponent": __nuxt_component_1,
|
|
"class": [className.value, attrs.class, hashId.value],
|
|
"role": "menu",
|
|
"id": props.id,
|
|
"data": getWrapperList(childList),
|
|
"renderRawItem": (node) => node,
|
|
"renderRawRest": (omitItems) => {
|
|
const len = omitItems.length;
|
|
const originOmitItems = len ? childList.slice(-len) : null;
|
|
return createVNode(Fragment, null, [createVNode(SubMenu, {
|
|
"eventKey": OVERFLOW_KEY,
|
|
"key": OVERFLOW_KEY,
|
|
"title": overflowedIndicator,
|
|
"disabled": allVisible,
|
|
"internalPopupClose": len === 0
|
|
}, {
|
|
default: () => originOmitItems
|
|
}), createVNode(PathContext, null, {
|
|
default: () => [createVNode(SubMenu, {
|
|
"eventKey": OVERFLOW_KEY,
|
|
"key": OVERFLOW_KEY,
|
|
"title": overflowedIndicator,
|
|
"disabled": allVisible,
|
|
"internalPopupClose": len === 0
|
|
}, {
|
|
default: () => originOmitItems
|
|
})]
|
|
})]);
|
|
},
|
|
"maxCount": mergedMode.value !== "horizontal" || props.disabledOverflow ? Overflow.INVALIDATE : Overflow.RESPONSIVE,
|
|
"ssr": "full",
|
|
"data-menu-list": true,
|
|
"onVisibleChange": (newLastIndex) => {
|
|
lastVisibleIndex.value = newLastIndex;
|
|
}
|
|
}), {
|
|
default: () => [createVNode(Teleport, {
|
|
"to": "body"
|
|
}, {
|
|
default: () => [createVNode("div", {
|
|
"style": {
|
|
display: "none"
|
|
},
|
|
"aria-hidden": true
|
|
}, [createVNode(PathContext, null, {
|
|
default: () => [getWrapperList(getChildrenList())]
|
|
})])]
|
|
})]
|
|
}));
|
|
};
|
|
}
|
|
});
|
|
Menu.install = function(app) {
|
|
app.component(Menu.name, Menu);
|
|
app.component(__nuxt_component_1.name, __nuxt_component_1);
|
|
app.component(SubMenu.name, SubMenu);
|
|
app.component(Divider.name, Divider);
|
|
app.component(ItemGroup.name, ItemGroup);
|
|
return app;
|
|
};
|
|
Menu.Item = __nuxt_component_1;
|
|
Menu.Divider = Divider;
|
|
Menu.SubMenu = SubMenu;
|
|
Menu.ItemGroup = ItemGroup;
|
|
|
|
export { EllipsisOutlined as E, Menu as M, __nuxt_component_1 as _, useProvideOverride as u };
|
|
//# sourceMappingURL=index-_EXf9gbe.mjs.map
|