feat(comp: menu): add customAdditional, getKey and overlayContainer

packages/components/config/src/defaultConfig.ts

@@ -145,6 +145,7 @@ export const defaultConfig: GlobalConfig = {
     zoom: [0.5, 2],
   },
   menu: {
+    getKey: 'key',
     indent: 24,
     offset: [0, 8],
     suffix: 'right',

packages/components/config/src/types.ts

@@ -19,7 +19,7 @@ import type { DatePickerType } from '@idux/components/date-picker/src/types'
 import type { FormLabelAlign, FormLayout, FormSize } from '@idux/components/form'
 import type { ListSize } from '@idux/components/list'
 import type { Locale } from '@idux/components/locales'
-import type { MenuTheme } from '@idux/components/menu'
+import type { MenuData, MenuTheme } from '@idux/components/menu'
 import type { MessageType } from '@idux/components/message'
 import type { ModalType } from '@idux/components/modal'
 import type { NotificationPlacement, NotificationType } from '@idux/components/notification'
@@ -206,8 +206,12 @@ export interface DropdownConfig {
   autoAdjust: boolean
   destroyOnHide: boolean
   offset: [number, number]
+  overlayContainer?: PortalTargetType
   placement: PopperPlacement
   showArrow: boolean
+  /**
+   * @deprecated please use `overlayContainer` instead'
+   */
   target?: PortalTargetType
   trigger: PopperTrigger
 }
@@ -259,9 +263,14 @@ export interface ImageViewerConfig {
 }
 
 export interface MenuConfig {
+  getKey: string | ((data: MenuData) => VKey)
   indent: number
   offset: [number, number]
+  overlayContainer?: PortalTargetType
   suffix: string
+  /**
+   * @deprecated please use `overlayContainer` instead'
+   */
   target?: PortalTargetType
   theme: MenuTheme
 }

packages/components/dropdown/docs/Index.zh.md

@@ -20,9 +20,9 @@ order: 0
 | `disabled` | 菜单是否禁用 | `boolean` | `false` | - | - |
 | `hideOnClick` | 点击后是否隐藏菜单 | `boolean` | `true` | - | - |
 | `offset` | 悬浮层位置偏移量 | `[number, number]` | `[0,8]` | ✅ | - |
+| `overlayContainer` | 自定义下拉框容器节点  | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `placement` | 悬浮层的对齐方式 | `PopperPlacement` | `'bottomStart'` | ✅ | - |
 | `showArrow` | 是否显示箭头 | `boolean` | `false` | ✅ | - |
-| `target` | 自定义下拉框容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `trigger` | 悬浮层触发方式 | `PopperTrigger` | `hover` | ✅ | - |
 
 #### DropdownSlots

packages/components/dropdown/src/Dropdown.tsx

@@ -58,7 +58,12 @@ function useConfigProps(
       offset: props.offset ?? config.offset,
       placement: props.placement ?? config.placement,
       showArrow: props.showArrow ?? config.showArrow,
-      target: props.target ?? config.target ?? `${mergedPrefixCls.value}-container`,
+      target:
+        props.target ??
+        props.overlayContainer ??
+        config.target ??
+        config.overlayContainer ??
+        `${mergedPrefixCls.value}-overlay-container`,
       trigger: trigger,
       ['onUpdate:visible']: setVisibility,
     }

packages/components/dropdown/src/types.ts

@@ -20,8 +20,12 @@ export const dropdownProps = {
   disabled: IxPropTypes.bool.def(false),
   hideOnClick: IxPropTypes.bool.def(true),
   offset: IxPropTypes.array() as unknown as VueTypeDef<[number, number]>,
+  overlayContainer: ɵPortalTargetDef,
   placement: ɵOverlayPlacementDef,
   showArrow: IxPropTypes.bool,
+  /**
+   * @deprecated please use `overlayContainer` instead'
+   */
   target: ɵPortalTargetDef,
   trigger: ɵOverlayTriggerDef,
 
@@ -30,6 +34,6 @@ export const dropdownProps = {
 }
 
 export type DropdownProps = ExtractInnerPropTypes<typeof dropdownProps>
-export type DropdownPublicProps = ExtractPublicPropTypes<typeof dropdownProps>
+export type DropdownPublicProps = Omit<ExtractPublicPropTypes<typeof dropdownProps>, 'target'>
 export type DropdownComponent = DefineComponent<Omit<HTMLAttributes, keyof DropdownPublicProps> & DropdownPublicProps>
 export type DropdownInstance = InstanceType<DefineComponent<DropdownProps>>

packages/components/menu/__tests__/__snapshots__/menu.spec.ts.snap

@@ -2,15 +2,15 @@
 
 exports[`Menu > render work 1`] = `
 "<ul class=\\"ix-menu ix-menu-light ix-menu-vertical\\">
-  <li class=\\"ix-menu-item\\"><i class=\\"ix-icon ix-icon-home\\" role=\\"img\\" aria-label=\\"home\\"></i><span><a>Item 1</a></span></li>
-  <li class=\\"ix-menu-item\\"><i class=\\"ix-icon ix-icon-mail\\" role=\\"img\\" aria-label=\\"mail\\"></i><span>Item 2</span></li>
-  <li class=\\"ix-menu-item ix-menu-item-disabled\\"><i class=\\"ix-icon ix-icon-appstore\\" role=\\"img\\" aria-label=\\"appstore\\"></i><span>Item 3</span></li>
+  <li class=\\"ix-menu-item\\" aria-selected=\\"false\\" role=\\"menuitem\\"><i class=\\"ix-icon ix-icon-home\\" role=\\"img\\" aria-label=\\"home\\"></i><span><a>Item 1</a></span></li>
+  <li class=\\"ix-menu-item\\" aria-label=\\"Item 2\\" aria-selected=\\"false\\" role=\\"menuitem\\"><i class=\\"ix-icon ix-icon-mail\\" role=\\"img\\" aria-label=\\"mail\\"></i><span>Item 2</span></li>
+  <li class=\\"ix-menu-item ix-menu-item-disabled\\" aria-label=\\"Item 3\\" aria-selected=\\"false\\" role=\\"menuitem\\"><i class=\\"ix-icon ix-icon-appstore\\" role=\\"img\\" aria-label=\\"appstore\\"></i><span>Item 3</span></li>
   <li class=\\"ix-menu-divider\\"></li>
-  <li class=\\"ix-menu-sub ix-menu-sub-vertical\\">
+  <li class=\\"ix-menu-sub ix-menu-sub-vertical\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"menuitem\\">
     <div class=\\"ix-menu-sub-label\\"><i class=\\"ix-icon ix-icon-setting\\" role=\\"img\\" aria-label=\\"setting\\"></i><span>Sub Menu 1</span><span class=\\"ix-menu-sub-label-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
     <!---->
   </li>
-  <li class=\\"ix-menu-sub ix-menu-sub-disabled ix-menu-sub-vertical\\">
+  <li class=\\"ix-menu-sub ix-menu-sub-disabled ix-menu-sub-vertical\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"menuitem\\">
     <div class=\\"ix-menu-sub-label\\"><i class=\\"ix-icon ix-icon-github\\" role=\\"img\\" aria-label=\\"github\\"></i><span>Menu Sub 4</span><span class=\\"ix-menu-sub-label-suffix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span></div>
     <!---->
   </li>

packages/components/menu/docs/Index.zh.md

@@ -17,13 +17,15 @@ order: 0
 | `v-model:expandedKeys` | 当前展开的 `IxMenuSub` 的 `key` 数组 | `VKey[]` | - | - | - |
 | `v-model:selectedKeys` | 当前选中的 `IxMenuItem` 的 `key` 数组 | `VKey[]` | - | - | - |
 | `collapsed` | 菜单收起状态 | `boolean` | `false` | - | - |
+| `customAdditional` | 自定义下拉选项的额外属性 | `MenuCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 菜单数据数组 | `MenuData[]` | - | - | 优先级高于 `default` 插槽 |
+| `getKey` | 获取数据的唯一标识 | `string \| (data: CascaderData) => VKey` | `key` | ✅ | - |
 | `indent` | `inline` 模式时的菜单缩进宽度 | `string \| number` | `24` | ✅ | 仅支持 `inline` 模式 |
-| `overlayClassName` | 悬浮层的自定义 `class` | `string` | - | - | `inline` 模式时无效 |
 | `mode` | 菜单模式，现在支持垂直、水平和内嵌 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `false` | - | - |
+| `overlayClassName` | 悬浮层的自定义 `class` | `string` | - | - | `inline` 模式时无效 |
+| `overlayContainer` | 自定义菜单容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | `inline` 模式时无效 |
 | `selectable` | 是否允许选中 | `boolean` | `true` | - | - |
-| `target` | 自定义菜单容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | `inline` 模式时无效 |
 | `theme` | 主题颜色 | `'light' \| 'dark'` | `'light'` | ✅ | - |
 | `onClick` | 点击菜单后的回调 | `(options: MenuClickOptions) => void` | - | - |
 
@@ -35,24 +37,15 @@ export interface MenuClickOptions {
   key: VKey
   type: 'item' | 'itemGroup' | 'sub'
 }
-```
 
-#### MenuCommonProps
-
-`MenuData` 的通用属性
-
-| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
-| --- | --- | --- | --- | --- | --- |
-| `type` | 菜单类型 | `'item' \| 'itemGroup' \| 'sub' \| 'divider'` | - | - | - |
-| `key` | 唯一标识 | `VKey` | - | - | 必传 |
-| `additional` | 菜单的额外配置 | `object` | - | - | 可以传入 `class`, `style` 等原生 DOM 属性 |
+export type MenuCustomAdditional = (options: { data: MenuData; index: number }) => Record<string, any> | undefined
+```
 
 #### MenuItemProps
 
-菜单项的配置，继承自 `MenuCommonProps`
-
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `key` | 唯一标识 | `VKey` | - | - | 必传, 可以通过 `getKey` 指定其他字段 |
 | `type` | 菜单类型 | `'item'` | `'item'` | - | - |
 | `disabled` | 是否禁用 | `boolean` | - | - | - |
 | `icon` | 菜单图标| `string  \| VNode` | - | - |
@@ -62,10 +55,9 @@ export interface MenuClickOptions {
 
 #### MenuItemGroupProps
 
-菜单组的配置，继承自 `MenuCommonProps`
-
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `key` | 唯一标识 | `VKey` | - | - | 必传, 可以通过 `getKey` 指定其他字段 |
 | `type` | 菜单类型 | `'itemGroup'` | - | - | 必传 |
 | `children` | 子菜单数据 | `MenuData[]` | - | - | - |
 | `icon` | 菜单图标| `string \| VNode` | - | - |
@@ -75,10 +67,9 @@ export interface MenuClickOptions {
 
 #### MenuSubProps
 
-子菜单的配置，继承自 `MenuCommonProps`
-
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `key` | 唯一标识 | `VKey` | - | - | 必传, 可以通过 `getKey` 指定其他字段 |
 | `type` | 菜单类型 | `'sub'` | - | - | 必传 |
 | `children` | 子菜单数据 | `MenuData[]` | - | - | - |
 | `disabled` | 是否禁用 | `boolean` | - | - | - |
@@ -94,9 +85,8 @@ export interface MenuClickOptions {
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `key` | 唯一标识 | `VKey` | - | - | 必传, 可以通过 `getKey` 指定其他字段 |
 | `type` | 菜单类型 | `'divider'` | - | - | 必传 |
-| `key` | 唯一标识 | `VKey` | - | - | 必传 |
-| `additional` | 菜单的额外配置 | `object` | - | - | 可以传入 `class`, `style` 等原生 DOM 属性 |
 
 ### IxMenuItem
 

packages/components/menu/index.ts

@@ -32,5 +32,6 @@ export type {
   MenuMode,
   MenuTheme,
   MenuClickOptions,
+  MenuCustomAdditional,
   MenuData,
 } from './src/types'

packages/components/menu/src/Menu.tsx

@@ -10,6 +10,7 @@ import { computed, defineComponent, inject, normalizeClass, provide } from 'vue'
 import { type VKey, callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { ɵDropdownToken } from '@idux/components/dropdown'
+import { useGetKey } from '@idux/components/utils'
 
 import { useDataSource } from './composables/useDataSource'
 import { useExpanded } from './composables/useExpanded'
@@ -25,7 +26,7 @@ export default defineComponent({
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-menu`)
     const config = useGlobalConfig('menu')
-
+    const mergedGetKey = useGetKey(props, config, 'components/menu')
     const indent = computed(() => props.indent ?? config.indent)
     const mode = computed(() => props.mode)
 
@@ -44,6 +45,7 @@ export default defineComponent({
       slots,
       config,
       mergedPrefixCls,
+      mergedGetKey,
       indent,
       theme,
       expandedKeys,
@@ -66,7 +68,7 @@ export default defineComponent({
     const dateSource = useDataSource(props, slots)
 
     return () => {
-      return <ul class={classes.value}>{coverChildren(dateSource.value)}</ul>
+      return <ul class={classes.value}>{coverChildren(dateSource.value, mergedGetKey.value)}</ul>
     }
   },
 })

packages/components/menu/src/contents/MenuDivider.tsx

@@ -8,10 +8,19 @@
 import { type FunctionalComponent, type HTMLAttributes, inject } from 'vue'
 
 import { menuToken } from '../token'
+import { MenuDividerProps } from '../types'
 
-const MenuDivider: FunctionalComponent<HTMLAttributes> = () => {
-  const { mergedPrefixCls } = inject(menuToken)!
-  return <li class={`${mergedPrefixCls.value}-divider`}></li>
+const MenuDivider: FunctionalComponent<
+  HTMLAttributes & {
+    data: MenuDividerProps
+    index: number
+  }
+> = props => {
+  const { props: menuProps, mergedPrefixCls } = inject(menuToken)!
+  const customAdditional = menuProps.customAdditional
+    ? menuProps.customAdditional({ data: props.data, index: props.index })
+    : undefined
+  return <li class={`${mergedPrefixCls.value}-divider`} {...props.data.additional} {...customAdditional}></li>
 }
 MenuDivider.displayName = 'MenuDivider'
 

packages/components/menu/src/contents/MenuItem.tsx

@@ -76,9 +76,20 @@ export default defineComponent({
       const slotProps = iconSlot || labelSlot ? { ...props.data, selected: isSelected.value } : undefined
       const iconNode = coverIcon(iconSlot, slotProps!, icon)
       const labelNode = labelSlot ? labelSlot(slotProps!) : label
-
+      const customAdditional = menuProps.customAdditional
+        ? menuProps.customAdditional({ data: props.data, index: props.index })
+        : undefined
       return (
-        <li class={classes.value} style={style.value} {...additional} onClick={disabled ? undefined : onClick}>
+        <li
+          class={classes.value}
+          style={style.value}
+          aria-label={label}
+          aria-selected={isSelected.value}
+          role="menuitem"
+          onClick={disabled ? undefined : onClick}
+          {...additional}
+          {...customAdditional}
+        >
           {iconNode}
           <span>{labelNode}</span>
         </li>

packages/components/menu/src/contents/MenuItemGroup.tsx

@@ -26,7 +26,14 @@ export default defineComponent({
     provide(menuItemGroupToken, true)
 
     // menuContext must exist
-    const { props: menuProps, slots: menuSlots, mergedPrefixCls, indent, handleClick } = inject(menuToken)!
+    const {
+      props: menuProps,
+      slots: menuSlots,
+      mergedPrefixCls,
+      mergedGetKey,
+      indent,
+      handleClick,
+    } = inject(menuToken)!
     const menuSubContext = inject(menuSubToken, null)
     const menuItemGroupContext = inject(menuItemGroupToken, null)
 
@@ -57,13 +64,16 @@ export default defineComponent({
       const labelNode = labelSlot ? labelSlot(slotProps) : label
 
       const prefixCls = `${mergedPrefixCls.value}-item-group`
+      const customAdditional = menuProps.customAdditional
+        ? menuProps.customAdditional({ data: props.data, index: props.index })
+        : undefined
       return (
-        <li class={prefixCls} {...additional}>
+        <li class={prefixCls} aria-label={label} {...additional} {...customAdditional}>
           <div class={`${prefixCls}-label`} style={labelStyle.value} onClick={onClick}>
             {iconNode}
             <span>{labelNode}</span>
           </div>
-          <ul class={`${prefixCls}-content`}>{coverChildren(children)}</ul>
+          <ul class={`${prefixCls}-content`}>{coverChildren(children, mergedGetKey.value)}</ul>
         </li>
       )
     }

packages/components/menu/src/contents/Utils.tsx

@@ -11,29 +11,31 @@ import { isString } from 'lodash-es'
 
 import { Logger } from '@idux/cdk/utils'
 import { IxIcon } from '@idux/components/icon'
+import { type GetKeyFn } from '@idux/components/utils'
 
 import { type MenuData } from '../types'
 import MenuDivider from './MenuDivider'
 import MenuItem from './MenuItem'
 import MenuItemGroup from './MenuItemGroup'
 import MenuSub from './menu-sub/MenuSub'
 
-export function coverChildren(data?: MenuData[]): VNode[] {
+export function coverChildren(data: MenuData[] | undefined, getKetFn: GetKeyFn): VNode[] {
   if (!data || data.length === 0) {
     return []
   }
 
   const nodes: VNode[] = []
-  data.forEach(item => {
+  data.forEach((item, index) => {
     const { type } = item
+    const key = getKetFn(item)
     if (!type || type === 'item') {
-      nodes.push(<MenuItem key={item.key} data={item}></MenuItem>)
+      nodes.push(<MenuItem key={key} index={index} data={item}></MenuItem>)
     } else if (type === 'sub') {
-      nodes.push(<MenuSub key={item.key} data={item}></MenuSub>)
+      nodes.push(<MenuSub key={key} index={index} data={item}></MenuSub>)
     } else if (type === 'itemGroup') {
-      nodes.push(<MenuItemGroup key={item.key} data={item}></MenuItemGroup>)
+      nodes.push(<MenuItemGroup key={key} index={index} data={item}></MenuItemGroup>)
     } else if (type === 'divider') {
-      nodes.push(<MenuDivider key={item.key} {...item.additional}></MenuDivider>)
+      nodes.push(<MenuDivider key={key} index={index} data={item}></MenuDivider>)
     } else {
       __DEV__ && Logger.warn('components/menu', `type [${type}] not supported`)
     }

packages/components/menu/src/contents/menu-sub/InlineContent.tsx

@@ -15,7 +15,7 @@ import { coverChildren } from '../Utils'
 export default defineComponent({
   name: 'MenuSubInlineContent',
   setup() {
-    const { mergedPrefixCls } = inject(menuToken)!
+    const { mergedPrefixCls, mergedGetKey } = inject(menuToken)!
     const { props, isExpanded } = inject(menuSubToken)!
 
     const classes = computed(() => {
@@ -29,7 +29,7 @@ export default defineComponent({
       return (
         <ɵCollapseTransition appear>
           <ul v-show={isExpanded.value} class={classes.value}>
-            {coverChildren(props.data.children)}
+            {coverChildren(props.data.children, mergedGetKey.value)}
           </ul>
         </ɵCollapseTransition>
       )