UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

236 lines (235 loc) 9 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.menuItemProps = exports.default = void 0; var _vue = require("vue"); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _propsUtil = require("../../_util/props-util"); var _vueTypes = _interopRequireDefault(require("../../_util/vue-types")); var _useKeyPath = require("./hooks/useKeyPath"); var _useMenuContext = require("./hooks/useMenuContext"); var _vnode = require("../../_util/vnode"); var _tooltip = _interopRequireDefault(require("../../tooltip")); var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode")); var _useDirectionStyle = _interopRequireDefault(require("./hooks/useDirectionStyle")); var _vcOverflow = _interopRequireDefault(require("../../vc-overflow")); var _devWarning = _interopRequireDefault(require("../../vc-util/devWarning")); var _type = require("../../_util/type"); let indexGuid = 0; const menuItemProps = () => ({ id: String, role: String, disabled: Boolean, danger: Boolean, title: { type: [String, Boolean], default: undefined }, icon: _vueTypes.default.any, onMouseenter: Function, onMouseleave: Function, onClick: Function, onKeydown: Function, onFocus: Function, // Internal user prop originItemValue: (0, _type.objectType)() }); exports.menuItemProps = menuItemProps; var _default = exports.default = (0, _vue.defineComponent)({ compatConfig: { MODE: 3 }, name: 'AMenuItem', inheritAttrs: false, props: menuItemProps(), slots: Object, setup(props, _ref) { let { slots, emit, attrs } = _ref; const instance = (0, _vue.getCurrentInstance)(); const isMeasure = (0, _useKeyPath.useMeasure)(); const key = typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key; (0, _devWarning.default)(typeof instance.vnode.key !== 'symbol', 'MenuItem', `MenuItem \`:key="${String(key)}"\` not support Symbol type`); const eventKey = `menu_item_${++indexGuid}_$$_${key}`; const { parentEventKeys, parentKeys } = (0, _useKeyPath.useInjectKeyPath)(); const { prefixCls, activeKeys, disabled, changeActiveKeys, rtl, inlineCollapsed, siderCollapsed, onItemClick, selectedKeys, registerMenuInfo, unRegisterMenuInfo } = (0, _useMenuContext.useInjectMenu)(); const firstLevel = (0, _useMenuContext.useInjectFirstLevel)(); const isActive = (0, _vue.shallowRef)(false); const keysPath = (0, _vue.computed)(() => { return [...parentKeys.value, key]; }); // const keysPath = computed(() => [...parentEventKeys.value, eventKey]); const menuInfo = { eventKey, key, parentEventKeys, parentKeys, isLeaf: true }; registerMenuInfo(eventKey, menuInfo); (0, _vue.onBeforeUnmount)(() => { unRegisterMenuInfo(eventKey); }); (0, _vue.watch)(activeKeys, () => { isActive.value = !!activeKeys.value.find(val => val === key); }, { immediate: true }); const mergedDisabled = (0, _vue.computed)(() => disabled.value || props.disabled); const selected = (0, _vue.computed)(() => selectedKeys.value.includes(key)); const classNames = (0, _vue.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: (0, _extends2.default)((0, _extends2.default)({}, props), attrs) }; }; // ============================ Events ============================ 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.default.ENTER) { const info = getEventInfo(e); // Legacy. Key will also trigger click event emit('click', e); onItemClick(info); } }; /** * Used for accessibility. Helper will focus element without key board. * We should manually trigger an active */ const onInternalFocus = e => { changeActiveKeys(keysPath.value); emit('focus', e); }; const renderItemChildren = (icon, children) => { const wrapNode = (0, _vue.createVNode)("span", { "class": `${prefixCls.value}-title-content` }, [children]); // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性,则内部包裹一个 span // ref: https://github.com/ant-design/ant-design/pull/23456 if (!icon || (0, _propsUtil.isValidElement)(children) && children.type === 'span') { if (children && inlineCollapsed.value && firstLevel && typeof children === 'string') { return (0, _vue.createVNode)("div", { "class": `${prefixCls.value}-inline-collapsed-noicon` }, [children.charAt(0)]); } } return wrapNode; }; // ========================== DirectionStyle ========================== const directionStyle = (0, _useDirectionStyle.default)((0, _vue.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 = (0, _propsUtil.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; // Reset `visible` to fix control mode tooltip display not correct // ref: https://github.com/ant-design/ant-design/issues/16742 tooltipProps.open = false; } // ============================ Render ============================ 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 (0, _vue.createVNode)(_tooltip.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tooltipProps), {}, { "placement": rtl.value ? 'left' : 'right', "overlayClassName": `${prefixCls.value}-inline-collapsed-tooltip` }), { default: () => [(0, _vue.createVNode)(_vcOverflow.default.Item, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({ "component": "li" }, attrs), {}, { "id": props.id, "style": (0, _extends2.default)((0, _extends2.default)({}, attrs.style || {}), directionStyle.value), "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, "onKeydown": onInternalKeyDown, "onFocus": onInternalFocus, "title": typeof title === 'string' ? title : undefined }), { default: () => [(0, _vnode.cloneElement)(typeof icon === 'function' ? icon(props.originItemValue) : icon, { class: `${prefixCls.value}-item-icon` }, false), renderItemChildren(icon, children)] })] }); }; } });