feat(menu): add placement prop (#316)

* feat(menu): add placement prop

* feat(menu): add placement prop

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-menu` add `placement` prop.
+
 ### Fixes
 
 - Fix `n-log` warn on highlight.js when no language is set, closes [#327](https://github.com/TuSimple/naive-ui/issues/327).

CHANGELOG.zh-CN.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-menu` 新增 `placement` 属性
+
 ### Fixes
 
 - 修复 `n-log` 在未设定语言时仍然对缺少 highlight.js 报错，关闭 [#327](https://github.com/TuSimple/naive-ui/issues/327)

src/menu/demos/enUS/index.demo-entry.md

@@ -35,6 +35,7 @@ long-label
 | inverted | `boolean` | `false` | Use inverted style. |
 | options | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | `[]` | Items data of menu. |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | Menu layout. |
+| placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | Only effective in horizontal mode. |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all labels. |
 | root-indent | `number` | `undefined` | The indent of menu's first level children. If not set, menu will use `indent` in place of it. |
 | value | `string \| null` | `undefined` | The selected name of menu. |

src/menu/demos/zhCN/index.demo-entry.md

@@ -35,6 +35,7 @@ long-label
 | inverted | `boolean` | `false` | 使用反转样式 |
 | options | `Array<MenuOption \| Submenu \| MenuOptionGroup>` | `[]` | 菜单的数据 |
 | mode | `'vertical' \| 'horizontal'` | `'vertical'` | 菜单的布局方式 |
+| placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | 仅在 `mode='horizontal'` 模式下生效 |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单渲染 |
 | root-indent | `number` | `32` | 菜单第一级的缩进，如果没有设定，使用 `indent` 代替 |
 | value | `string \| null` | `undefined` | 菜单当前的选中值 |

src/menu/src/Menu.tsx

@@ -31,6 +31,7 @@ import {
   OnUpdateKeysImpl
 } from './interface'
 import { layoutSiderInjectionKey } from '../../layout/src/interface'
+import { FollowerPlacement } from 'vueuc'
 
 const menuProps = {
   ...(useTheme.props as ThemeProps<MenuTheme>),
@@ -153,7 +154,11 @@ const menuProps = {
   },
   renderLabel: Function as PropType<
   (option: MenuOption | MenuGroupOption) => VNodeChild
-  >
+  >,
+  placement: {
+    type: String as PropType<FollowerPlacement>,
+    default: 'bottom'
+  }
 } as const
 
 export type MenuSetupProps = ExtractPropTypes<typeof menuProps>

src/menu/src/use-menu-child.ts

@@ -8,6 +8,7 @@ import { menuInjectionKey } from './Menu'
 import type { MenuSetupProps } from './Menu'
 import { menuItemGroupInjectionKey } from './MenuOptionGroup'
 import { submenuInjectionKey } from './Submenu'
+import { FollowerPlacement } from 'vueuc'
 
 const ICON_MARGIN_RIGHT = 8
 
@@ -37,7 +38,7 @@ export interface MenuOptionGroupInjection {
 export type UseMenuChildProps = ExtractPropTypes<typeof useMenuChildProps>
 
 export interface UseMenuChild {
-  dropdownPlacement: ComputedRef<'bottom' | 'right' | 'right-start'>
+  dropdownPlacement: ComputedRef<FollowerPlacement>
   activeIconSize: ComputedRef<number>
   maxIconSize: ComputedRef<number>
   paddingLeft: ComputedRef<number | undefined>
@@ -60,7 +61,7 @@ export function useMenuChild (props: UseMenuChildProps): UseMenuChild {
   })
   const dropdownPlacementRef = computed(() => {
     if (horizontalRef.value) {
-      return 'bottom'
+      return menuProps.placement
     }
     if ('tmNodes' in props) return 'right-start'
     return 'right'