docs(menu): new feature

CHANGELOG.en-US.md

@@ -15,6 +15,7 @@
 - Fix if `inline-theme-disabled` is set, custom color whose params include decimal won't work in `n-tag`, `n-avatar`, `n-badge`, `n-button`, `n-rate`.
 - Fix `n-tabs`'s border height in `vertical` mode.
 - Fix `n-tree`'s node's hover color has higher priority than selected color in `block-line` mode.
+- Fix `n-tree` click expand switch causes checkbox being checked.
 
 ### Features
 
@@ -41,6 +42,8 @@
 - Adds `n-split` component, closes [#3557](https://github.com/tusen-ai/naive-ui/issues/3557).
 - Adds `n-virtual-list` component.
 - Adds `n-qr-code` component, closes [#2535](https://github.com/tusen-ai/naive-ui/issues/2535).
+- `n-menu` add `responsive` prop, it will collapse overflow menu items in horizontal mode.
+- `n-menu` add `deriveResponsiveState` method.
 
 ## 2.35.0
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,7 @@
 - 修复在 `inline-theme-disabled` 设定后，带小数点的自定义颜色在 `n-tag`、`n-avatar`、`n-badge`、`n-button`、`n-rate` 使用会出问题
 - 修复 `n-tabs` 在 `vertical` 模式下的边界高度不正常
 - 修复 `n-tree` 节点在 `block-line` 模式下的悬浮颜色比选种颜色有更高的优先级
+- 修复 `n-tree` 点击展开开关会导致选中勾选框
 
 ### Features
 
@@ -41,6 +42,8 @@
 - 新增 `n-split` 组件，关闭 [#3557](https://github.com/tusen-ai/naive-ui/issues/3557)
 - 新增 `n-virtual-list` 组件
 - 新增 `n-qr-code` 组件，关闭 [#2535](https://github.com/tusen-ai/naive-ui/issues/2535)
+- `n-menu` 新增 `responsive` 属性，在水平状态会收起溢出的菜单项
+- `n-menu` 新增 `deriveResponsiveState` 方法
 
 ## 2.35.0
 

demo/SiteHeader.vue

@@ -369,7 +369,7 @@ export default defineComponent({
     let lastWindowInnerWidth = window.innerWidth
     window.addEventListener('resize', () => {
       if (window.innerWidth > lastWindowInnerWidth) {
-        menuInstRef.value?.deriveEllipsis()
+        menuInstRef.value?.deriveResponsiveState()
       }
       lastWindowInnerWidth = window.innerWidth
     })

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

@@ -52,6 +52,7 @@ show.vue
 | render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all extras. |  |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | Render function that renders all icons. |  |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | Render function that renders all labels. |  |
+| responsive | `boolean` | `false` | Whether to collapsed menu items that overflows menu. Only work for menu with `mode='horizontal'`. | NEXT_VERSION |
 | 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 item key of the menu. |  |
 | watch-props | `Array<'defaultValue' \| 'defaultExpandedKeys'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. |  |
@@ -93,4 +94,5 @@ show.vue
 
 | Name | Type | Description | Version |
 | --- | --- | --- | --- |
+| deriveResponsiveState | `() => void` | Recalculate the collapsed state of the responsive menu content. When the width of the menu container is not solely determined by the external width, in the `responsive` mode, the menu content cannot automatically expand after being collapsed. You can call this method to ensure that the menu can be expanded again. | NEXT_VERSION |
 | showOption | `(key: string \| number) => void` | Expand menu to show option with specified `key`. If `key` is not specified, selected option will be displayed. | 2.27.0 |

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

@@ -54,6 +54,7 @@ show-debug.vue
 | render-extra | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单额外部分渲染 |  |
 | render-icon | `(option: MenuOption) => VNodeChild` | `undefined` | 批量处理菜单图标渲染 |  |
 | render-label | `(option: MenuOption \| MenuGroupOption) => VNodeChild` | `undefined` | 批量处理菜单标签渲染 |  |
+| responsive | `boolean` | `false` | 是否收起溢出的菜单，仅对 `mode='horizontal'` 的菜单生效 | NEXT_VERSION |
 | root-indent | `number` | `32` | 菜单第一级的缩进，如果没有设定，使用 `indent` 代替 |  |
 | value | `string \| null` | `undefined` | 菜单当前的选中值 |  |
 | watch-props | `Array<'defaultValue' \| 'defaultExpandedKeys'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 |  |
@@ -95,4 +96,5 @@ show-debug.vue
 
 | 名称 | 类型 | 说明 | 版本 |
 | --- | --- | --- | --- |
+| deriveResponsiveState | `() => void` | 重新计算响应式菜单内容折叠状态。在菜单容器宽度并不完全由外部宽度决定的时候，在 `responsive` 情况下，菜单内容收起后无法自动展开，此时你可以调用此方法以保证菜单可以重新展开 | NEXT_VERSION |
 | showOption | `(key?: string \| number) => void` | 展开菜单，确保设定的元素被显示，如果不传入 `key` 会当前选中元素 | 2.27.0 |

src/menu/src/Menu.tsx

@@ -20,6 +20,7 @@ import {
   type FollowerPlacement,
   VResizeObserver
 } from 'vueuc'
+import { createId } from 'seemly'
 import { layoutSiderInjectionKey } from '../../layout/src/interface'
 import type { DropdownProps } from '../../dropdown'
 import { useConfig, useTheme, useThemeClass } from '../../_mixins'
@@ -43,9 +44,8 @@ import type {
 } from './interface'
 import { useCheckDeprecated } from './useCheckDeprecated'
 import { menuInjectionKey } from './context'
-import style from './styles/index.cssr'
 import { NSubmenu } from './Submenu'
-import { createId } from 'seemly'
+import style from './styles/index.cssr'
 
 export const menuProps = {
   ...(useTheme.props as ThemeProps<MenuTheme>),
@@ -129,6 +129,11 @@ export const menuProps = {
   dropdownProps: Object as PropType<DropdownProps>,
   accordion: Boolean,
   nodeProps: Function as PropType<MenuNodeProps>,
+  dropdownPlacement: {
+    type: String as PropType<FollowerPlacement>,
+    default: 'bottom'
+  },
+  responsive: Boolean,
   // deprecated
   items: Array as PropType<Array<MenuOption | MenuGroupOption>>,
   onOpenNamesChange: [Function, Array] as PropType<MaybeArray<OnUpdateKeys>>,
@@ -137,11 +142,7 @@ export const menuProps = {
   MaybeArray<OnUpdateKeys>
   >,
   expandedNames: Array as PropType<Key[]>,
-  defaultExpandedNames: Array as PropType<Key[]>,
-  dropdownPlacement: {
-    type: String as PropType<FollowerPlacement>,
-    default: 'bottom'
-  }
+  defaultExpandedNames: Array as PropType<Key[]>
 } as const
 
 export type MenuSetupProps = ExtractPropTypes<typeof menuProps>
@@ -608,26 +609,29 @@ export default defineComponent({
       getCounter,
       onRender: themeClassHandle?.onRender,
       showOption,
-      deriveEllipsis: onResize
+      deriveResponsiveState: onResize
     } satisfies MenuInst & Record<string, unknown>
   },
   render () {
     const { mergedClsPrefix, mode, themeClass, onRender } = this
     onRender?.()
     const renderMenuItemNodes = (): VNodeChild[] =>
       this.tmNodes.map((tmNode) => itemRenderer(tmNode, this.$props))
+    const horizontal = mode === 'horizontal'
+    const finalResponsive = horizontal && this.responsive
     const renderMainNode = (): VNode => (
       <div
         role={mode === 'horizontal' ? 'menubar' : 'menu'}
         class={[
           `${mergedClsPrefix}-menu`,
           themeClass,
           `${mergedClsPrefix}-menu--${mode}`,
+          finalResponsive && `${mergedClsPrefix}-menu--responsive`,
           this.mergedCollapsed && `${mergedClsPrefix}-menu--collapsed`
         ]}
         style={this.cssVars as any}
       >
-        {mode === 'horizontal' ? (
+        {finalResponsive ? (
           <VOverflow
             ref="overflowRef"
             onUpdateOverflow={this.onUpdateOverflow}
@@ -650,7 +654,7 @@ export default defineComponent({
         )}
       </div>
     )
-    return mode === 'horizontal' ? (
+    return finalResponsive ? (
       <VResizeObserver onResize={this.onResize}>
         {{ default: renderMainNode }}
       </VResizeObserver>

src/menu/src/interface.ts

@@ -83,5 +83,5 @@ export type MenuNodeProps = (
 
 export interface MenuInst {
   showOption: (key?: Key) => void
-  deriveEllipsis: () => void
+  deriveResponsiveState: () => void
 }

src/menu/src/styles/index.cssr.ts

@@ -94,7 +94,7 @@ export default c([
     cM('horizontal', `
       max-width: 100%;
       width: 100%;
-      display: inline-flex;
+      display: flex;
       overflow: hidden;
       padding-bottom: 0;
     `, [
@@ -167,7 +167,7 @@ export default c([
         ])
       ])
     ]),
-    cM('vertical', [
+    cNotM('responsive', [
       cB('menu-item-content-header', `
         overflow: hidden;
         text-overflow: ellipsis;