feat(menu): add accordion prop (#1184)

* feat(menu): add accordion mode

* feat(menu): rebuild accordion to level 1 & add doc

* fix(menu): accordion only effect first-level menu

* refator(menu): move treeKeysLevelOne to common ref

* refactor(menu): use Map instead of Object

* refator(menu): use Set instead of Map

CHANGELOG.en-US.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### Feats
+
+- `n-menu` add `accordion` prop , closes [#917](https://github.com/TuSimple/naive-ui/issues/917).
 ## Pending
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### Feats
+
+- `n-menu` 添加 `accordion` 属性，关闭 [#917](https://github.com/TuSimple/naive-ui/issues/917)
 ## Pending
 
 ### Breaking Changes
@@ -1429,4 +1432,4 @@
 
 ### Feats
 
-- `n-data-table` 增加了 empty 插槽 [#86](https://github.com/TuSimple/naive-ui/issues/86)
+- `n-data-table` 增加了 empty 插槽 [#86](https://github.com/TuSimple/naive-ui/issues/86)

src/menu/demos/enUS/accordion.demo.md

@@ -0,0 +1,86 @@
+# Accordion
+
+Like an accordion. You can use `accordion` prop to switch this mode for the first-level menu.
+
+```html
+<n-menu
+  :options="menuOptions"
+  :default-expanded-keys="defaultExpandedKeys"
+  accordion
+/>
+```
+
+```js
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  FishOutline as FishIcon,
+  PawOutline as PawIcon,
+  BagOutline as BagOutlineIcon
+} from '@vicons/ionicons5'
+
+function renderIcon (icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+  {
+    label: 'Fish',
+    key: 'fish',
+    icon: renderIcon(FishIcon),
+    children: [
+      {
+        label: 'Braise',
+        key: 'braise',
+        children: [
+          {
+            label: 'Spicy',
+            key: 'spicy'
+          }
+        ]
+      },
+      {
+        label: 'Steamed',
+        key: 'steamed',
+        children: [
+          {
+            label: 'No Green Onion',
+            key: 'no-green-onion'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'Bear Paw',
+    key: 'bear-paw',
+    icon: renderIcon(PawIcon),
+    children: [
+      {
+        label: 'Protect Wild Animals',
+        key: 'protect-wild-animals'
+      }
+    ]
+  },
+  {
+    label: 'Both',
+    key: 'both',
+    icon: renderIcon(BagOutlineIcon),
+    children: [
+      {
+        label: "You can't have your cake and eat it",
+        key: 'can-not'
+      }
+    ]
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      menuOptions,
+      defaultExpandedKeys: ['fish', 'braise']
+    }
+  }
+})
+```

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

@@ -15,6 +15,7 @@ indent
 collapse
 inverted
 long-label
+accordion
 ```
 
 ## API
@@ -23,6 +24,7 @@ long-label
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| accordion | `boolean` | `false` | Whether to use accordion mode |
 | collapsed-icon-size | `number` | `24` | The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it. |
 | collapsed-width | `number` | `48` | The menu width after collapsed. |
 | collapsed | `boolean` | `false` | The collapsed status of menu, only works when menu is vertical. |

src/menu/demos/zhCN/accordion.demo.md

@@ -0,0 +1,86 @@
+# 手风琴
+
+像一个手风琴。使用 `accordion` 属性对一级菜单使用该模式。
+
+```html
+<n-menu
+  :options="menuOptions"
+  :default-expanded-keys="defaultExpandedKeys"
+  accordion
+/>
+```
+
+```js
+import { defineComponent, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  FishOutline as FishIcon,
+  PawOutline as PawIcon,
+  BagOutline as BagOutlineIcon
+} from '@vicons/ionicons5'
+
+function renderIcon (icon) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions = [
+  {
+    label: '鱼',
+    key: 'fish',
+    icon: renderIcon(FishIcon),
+    children: [
+      {
+        label: '红烧',
+        key: 'braise',
+        children: [
+          {
+            label: '加辣',
+            key: 'spicy'
+          }
+        ]
+      },
+      {
+        label: '清蒸',
+        key: 'steamed',
+        children: [
+          {
+            label: '不要葱',
+            key: 'no-green-onion'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: '熊掌',
+    key: 'bear-paw',
+    icon: renderIcon(PawIcon),
+    children: [
+      {
+        label: '保护野生动物',
+        key: 'protect-wild-animals'
+      }
+    ]
+  },
+  {
+    label: '两个都要',
+    key: 'both',
+    icon: renderIcon(BagOutlineIcon),
+    children: [
+      {
+        label: '鱼和熊掌不可兼得',
+        key: 'can-not'
+      }
+    ]
+  }
+]
+
+export default defineComponent({
+  setup () {
+    return {
+      menuOptions,
+      defaultExpandedKeys: ['fish', 'braise']
+    }
+  }
+})
+```

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

@@ -15,6 +15,7 @@ indent
 collapse
 inverted
 long-label
+accordion
 ```
 
 ## API
@@ -23,6 +24,7 @@ long-label
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| accordion | `boolean` | `false` | 是否使用手风琴模式 |
 | collapsed-icon-size | `number` | `24` | 菜单折叠时图标的大小，如果为设定则使用 `icon-size` 代替 |
 | collapsed-width | `number` | `48` | 折叠后菜单的宽度 |
 | collapsed | `boolean` | `false` | 菜单是否折叠，值在菜单为垂直时有用 |

src/menu/src/Menu.tsx

@@ -160,7 +160,8 @@ const menuProps = {
   dropdownPlacement: {
     type: String as PropType<FollowerPlacement>,
     default: 'bottom'
-  }
+  },
+  accordion: Boolean
 } as const
 
 export type MenuSetupProps = ExtractPropTypes<typeof menuProps>
@@ -207,6 +208,7 @@ export default defineComponent({
         }
       )
     )
+    const treeKeysLevelOneRef = computed(() => new Set(treeMateRef.value.treeNodes.map(e => e.key)))
 
     const uncontrolledValueRef = ref(props.defaultValue)
     const controlledValueRef = toRef(props, 'value')
@@ -296,6 +298,12 @@ export default defineComponent({
       if (~index) {
         currentExpandedKeys.splice(index, 1)
       } else {
+        if (props.accordion) {
+          if (treeKeysLevelOneRef.value.has(key)) {
+            const closeKeyIndex = currentExpandedKeys.findIndex(e => treeKeysLevelOneRef.value.has(e))
+            if (closeKeyIndex > -1) { currentExpandedKeys.splice(closeKeyIndex, 1) }
+          }
+        }
         currentExpandedKeys.push(key)
       }
       doUpdateExpandedKeys(currentExpandedKeys)