Skip to content

Commit

Permalink
fix(Menu): 修复 mode 和 trigger 配置项传字符串，类型报错提示的问题 (#797)
Browse files Browse the repository at this point in the history
  • Loading branch information
@1zumii
1zumii committed May 8, 2024
1 parent c70b1f1 commit 6dfc128
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 36 deletions.
35 changes: 22 additions & 13 deletions components/menu/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,17 @@ import type {
ComputedRef,
InjectionKey,
PropType,
Ref,
} from 'vue';

import { pick } from 'lodash-es';
import type { ExtractPublicPropTypes } from '../_util/interface';
import type { ComponentInnerProps, ExtractPublicPropTypes } from '../_util/interface';
import { popperProps } from '../popper/props';
import type { MenuOption } from './interface';
import type { MenuItemType, MenuOption } from './interface';

export enum MODE {
VERTICAL = 'vertical',
HORIZONTAL = 'horizontal',
}
export type MODE = 'vertical' | 'horizontal';

export enum TRIGGER {
CLICK = 'click',
HOVER = 'hover',
}
export type TRIGGER = 'click' | 'hover';

export const COMPONENT_NAME = {
MENU: 'FMenu',
Expand Down Expand Up @@ -54,9 +49,9 @@ export const menuProps = {
// 垂直或者水平
mode: {
type: String as PropType<MODE>,
default: MODE.HORIZONTAL,
default: 'horizontal' satisfies MODE,
validator: (value: MODE) => {
return Object.values(MODE).includes(value);
return (['horizontal', 'vertical'] satisfies MODE[]).includes(value);
},
},
// 是否收起
Expand Down Expand Up @@ -93,10 +88,24 @@ export const menuProps = {
expandTrigger: {
type: String as PropType<TRIGGER>,
validator: (value: TRIGGER) => {
return Object.values(TRIGGER).includes(value);
return (['click', 'hover'] satisfies TRIGGER[]).includes(value);
},
},

} as const satisfies ComponentObjectPropsOptions;

export type MenuProps = ExtractPublicPropTypes<typeof menuProps>;

export type RootMenuInjection = {
props: ComponentInnerProps<typeof menuProps>;
currentValue: Ref<string | number>;
clickMenuItem: (value: string | number) => void;
renderWithPopper: ComputedRef<boolean>;
currentExpandedKeys: Ref<(string | number)[]>;
accordion: ComputedRef<boolean>;
expandTrigger: ComputedRef<TRIGGER>;
updateExpandedKeys: (val: string | number | (string | number)[]) => void;
handleSubMenu: (subMenu: MenuItemType, indexPath: Ref<MenuNode[]>) => void;
};

export const ROOT_MENU_KEY: InjectionKey<RootMenuInjection> = Symbol('ROOT_MENU_KEY');
4 changes: 2 additions & 2 deletions components/menu/interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Ref, VNodeChild } from 'vue';
import type { ComponentInternalInstance, Ref, VNodeChild } from 'vue';

export interface MenuOption {
value: string | number;
Expand All @@ -9,7 +9,7 @@ export interface MenuOption {
}

export interface MenuItemType {
uid: string;
uid: ComponentInternalInstance['uid'];
value: string | number;
type: string;
children: MenuItemType[];
Expand Down
22 changes: 11 additions & 11 deletions components/menu/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import { useArrayModel, useNormalModel } from '../_util/use/useModel';
import { UPDATE_MODEL_EVENT } from '../_util/constants';
import { concat } from '../_util/utils';
import { useTheme } from '../_theme/useTheme';
import { COMPONENT_NAME, MODE, TRIGGER, menuProps } from './const';
import { COMPONENT_NAME, ROOT_MENU_KEY, menuProps } from './const';
import useParent from './useParent';
import useMenu from './useMenu';
import MenuGroup from './menuGroup';
import MenuItem from './menuItem';
import SubMenu from './subMenu';
import type { MenuNode } from './const';
import type { MenuNode, TRIGGER } from './const';
import type { MenuItemTypePlain } from './useParent';

import type { MenuItemType, MenuOption } from './interface';
Expand All @@ -44,15 +44,15 @@ export default defineComponent({

// 水平模式一定是采用Popper的
const renderWithPopper = computed(() => {
if (props.mode === MODE.HORIZONTAL) {
if (props.mode === 'horizontal') {
return true;
}
return props.collapsed;
});

const { children } = useParent();

const clickMenuItem = (value: string) => {
const clickMenuItem = (value: string | number) => {
updateCurrentValue(value);
emit('select', { value });
// 选择后，关闭所有的子菜单
Expand Down Expand Up @@ -90,21 +90,21 @@ export default defineComponent({

const accordion = computed(() => {
// 如果是水平的菜单，accordion 只能为true
return props.mode === MODE.HORIZONTAL ? true : props.accordion;
return props.mode === 'horizontal' ? true : props.accordion;
});

// 展开的方式
const expandTrigger = computed(() => {
const expandTrigger = computed<TRIGGER>(() => {
// 垂直模式默认点击，且仅支持点击展开
if (props.mode === MODE.VERTICAL) {
return TRIGGER.CLICK;
if (props.mode === 'vertical') {
return 'click';
}
if (props.expandTrigger) {
return props.expandTrigger;
}
// 如果没有设置expandTrigger,水平模式默认hover
if (props.mode === MODE.HORIZONTAL) {
return TRIGGER.HOVER;
if (props.mode === 'horizontal') {
return 'hover';
}
});

Expand All @@ -124,7 +124,7 @@ export default defineComponent({
updateExpandedKeys(subMenu.value || subMenu.uid);
};

provide('rootMenu', {
provide(ROOT_MENU_KEY, {
props,
currentValue,
clickMenuItem,
Expand Down
14 changes: 8 additions & 6 deletions components/menu/subMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ import DownOutlined from '../icon/DownOutlined';
import RightOutlined from '../icon/RightOutlined';
import Ellipsis from '../ellipsis/ellipsis';
import type { ExtractPublicPropTypes } from '../_util/interface';
import { COMPONENT_NAME, MODE, SUB_MENU_KEY, TRIGGER } from './const';
import type { TRIGGER } from './const';
import { COMPONENT_NAME, MODE, SUB_MENU_KEY } from './const';
import useChildren from './useChildren';
import useParent from './useParent';
import useMenu from './useMenu';
import type { MenuItemType } from './interface';

const prefixCls = getPrefixCls('sub-menu');

Expand Down Expand Up @@ -102,7 +104,7 @@ export default defineComponent({
});

const placement = computed(() => {
if (rootMenu.props.mode === MODE.HORIZONTAL) {
if (rootMenu.props.mode === 'horizontal') {
return isFirstLevel.value ? 'bottom-start' : 'right-start';
}
return 'right-start';
Expand All @@ -115,15 +117,15 @@ export default defineComponent({

const handleTrigger = () => {
isOpened.value = !isOpened.value;
rootMenu.handleSubMenu(subMenu, indexPath);
rootMenu.handleSubMenu(subMenu as unknown as MenuItemType, indexPath);
};

const handleEnter = () => {
// 如果是hover 且 只能展开一项的场景，进入第一层的时候要清空
if (rootMenu.accordion.value && isFirstLevel.value) {
rootMenu.updateExpandedKeys([]);
}
rootMenu.handleSubMenu(subMenu, indexPath);
rootMenu.handleSubMenu(subMenu as unknown as MenuItemType, indexPath);
};

watch(
Expand Down Expand Up @@ -181,15 +183,15 @@ export default defineComponent({
};

// 两种展开的方式 hover&click
const renderWrapper = (expandTrigger: string) => {
const renderWrapper = (expandTrigger: TRIGGER) => {
const wrapperContent = (
<>
{renderIcon()}
{!onlyIcon.value ? renderTitle() : null}
{!onlyIcon.value ? renderArrow() : null}
</>
);
return expandTrigger === TRIGGER.CLICK
return expandTrigger === 'click'
? (
<div
class={`${prefixCls}-wrapper`}
Expand Down
11 changes: 7 additions & 4 deletions components/menu/useChildren.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { type ComputedRef, computed, inject } from 'vue';
import { CHILDREN_KEY, COMPONENT_NAME } from './const';
import { computed, inject } from 'vue';
import type { ComputedRef } from 'vue';
import { CHILDREN_KEY, COMPONENT_NAME, ROOT_MENU_KEY } from './const';
import type { MenuNode } from './const';

export default (indexPath: ComputedRef<MenuNode[]>) => {
const useChildren = (indexPath: ComputedRef<MenuNode[]>) => {
// 根节点 menu
const rootMenu = inject('rootMenu', null);
const rootMenu = inject(ROOT_MENU_KEY, null);
// 父级组件，可能为 menu / sub-menu / menu-group
const parentMenu = inject(CHILDREN_KEY, null);

Expand Down Expand Up @@ -48,3 +49,5 @@ export default (indexPath: ComputedRef<MenuNode[]>) => {
indexPath,
};
};

export default useChildren;

0 comments on commit 6dfc128

Please sign in to comment.