diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 625380b40..f98d2868f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -17,6 +17,7 @@ ### Feats +- `n-menu` add `show` prop to set whether the Menu item is show, closes [#3334](https://github.com/TuSimple/naive-ui/issues/3334) - `n-alert` adds `bordered` prop, closes [#3358](https://github.com/TuSimple/naive-ui/issues/3358). - `n-tag` add `trigger-click-on-close` prop, closes [#3343](https://github.com/TuSimple/naive-ui/issues/3343). - `n-cascader` adds `disabled-field` prop, closes [#3338](https://github.com/TuSimple/naive-ui/issues/3338). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index e24786572..4830b6695 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -17,6 +17,7 @@ ### Feats +- `n-menu` 新增 `show` 属性，用于是否显示菜单，关闭 [#3334](https://github.com/TuSimple/naive-ui/issues/3334) - `n-alert` 新增 `bordered` 属性，关闭 [#3358](https://github.com/TuSimple/naive-ui/issues/3358) - `n-tag` 新增 `trigger-click-on-close` 属性，关闭 [#3343](https://github.com/TuSimple/naive-ui/issues/3343) - `n-cascader` 新增 `disabled-field` 属性，关闭 [#3338](https://github.com/TuSimple/naive-ui/issues/3338) diff --git a/demo/pages/docs/import-on-demand/enUS/index.md b/demo/pages/docs/import-on-demand/enUS/index.md index 817cd4a51..70f90b688 100644 --- a/demo/pages/docs/import-on-demand/enUS/index.md +++ b/demo/pages/docs/import-on-demand/enUS/index.md @@ -72,9 +72,14 @@ export default defineConfig({ imports: [ 'vue', { - 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'], - }, - ], + 'naive-ui': [ + 'useDialog', + 'useMessage', + 'useNotification', + 'useLoadingBar' + ] + } + ] }), Components({ resolvers: [NaiveUiResolver()] diff --git a/demo/pages/docs/import-on-demand/zhCN/index.md b/demo/pages/docs/import-on-demand/zhCN/index.md index ac1ecb6a3..89791ee8a 100644 --- a/demo/pages/docs/import-on-demand/zhCN/index.md +++ b/demo/pages/docs/import-on-demand/zhCN/index.md @@ -52,7 +52,7 @@ Naive UI 支持 tree shaking，组件、语言、主题均可 tree-shaking。 ## 自动引入 -可以使用 `unplugin-auto-import` 插件来自动导入API。 +可以使用 `unplugin-auto-import` 插件来自动导入 API。 如果使用模板方式进行开发，可以使用 `unplugin-vue-components` 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件。 @@ -72,9 +72,14 @@ export default defineConfig({ imports: [ 'vue', { - 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'], - }, - ], + 'naive-ui': [ + 'useDialog', + 'useMessage', + 'useNotification', + 'useLoadingBar' + ] + } + ] }), Components({ resolvers: [NaiveUiResolver()] diff --git a/src/dropdown/demos/enUS/index.demo-entry.md b/src/dropdown/demos/enUS/index.demo-entry.md index b74b969c7..18885aae9 100644 --- a/src/dropdown/demos/enUS/index.demo-entry.md +++ b/src/dropdown/demos/enUS/index.demo-entry.md @@ -76,5 +76,5 @@ For other props, for example `placement`, please see [Popover Props](popover#Pop | Property | Type | Description | | -------- | ------------------ | -------------------------------------- | | type | `'render'` | The type of the DropdownRenderOption. | -| key? | `string \| number` | Render option ID (should be unique). | -| render? | `() => VNodeChild` | Render function of the option content. | +| key? | `string \| number` | Render option ID (should be unique). | +| render? | `() => VNodeChild` | Render function of the option content. | diff --git a/src/dropdown/demos/zhCN/index.demo-entry.md b/src/dropdown/demos/zhCN/index.demo-entry.md index c7e6f1930..6a60f1583 100644 --- a/src/dropdown/demos/zhCN/index.demo-entry.md +++ b/src/dropdown/demos/zhCN/index.demo-entry.md @@ -61,7 +61,7 @@ scrollable-debug.vue | 属性 | 类型 | 说明 | | ---- | ------------------ | ------------ | | type | `'divider'` | 分割线的类型 | -| key? | `string \| number` | 需要唯一 | +| key? | `string \| number` | 需要唯一 | #### DropdownGroupOption Type @@ -75,8 +75,8 @@ scrollable-debug.vue #### DropdownRenderOption Type -| 属性 | 类型 | 说明 | -| ------ | ------------------ | --------------------------- | -| type | `'render'` | DropdownRenderOption 的类型 | +| 属性 | 类型 | 说明 | +| ------- | ------------------ | --------------------------- | +| type | `'render'` | DropdownRenderOption 的类型 | | key? | `string \| number` | 渲染选项 ID（应该是唯一的） | | render? | `() => VNodeChild` | 选项内容的渲染功能 | diff --git a/src/menu/demos/enUS/index.demo-entry.md b/src/menu/demos/enUS/index.demo-entry.md index f108bec9f..16176a0bf 100644 --- a/src/menu/demos/enUS/index.demo-entry.md +++ b/src/menu/demos/enUS/index.demo-entry.md @@ -19,6 +19,7 @@ accordion.vue router-link.vue customize-field.vue expand-selected-option.vue +show.vue ``` ## API @@ -62,6 +63,7 @@ expand-selected-option.vue | --- | --- | --- | | children? | `Array` | Child menu options. | | disabled? | `boolean` | Whether to disable the menu item. | +| show? | `boolean` | Whether to show the menu item. | | extra? | `string \| (() => VNodeChild)` | The extra parts of the menu item. | | icon? | `() => VNodeChild` | The icon for the menu item. | | key | `string` | The indentifier of the menu item. | diff --git a/src/menu/demos/enUS/show.demo.vue b/src/menu/demos/enUS/show.demo.vue new file mode 100644 index 000000000..304f14f90 --- /dev/null +++ b/src/menu/demos/enUS/show.demo.vue @@ -0,0 +1,74 @@ + +# Control option display + +In some cases, different characters will see different menus. You can use the `show` prop to hide the menu. + + + + + diff --git a/src/menu/demos/zhCN/index.demo-entry.md b/src/menu/demos/zhCN/index.demo-entry.md index 309e747e5..21fa8d0c3 100644 --- a/src/menu/demos/zhCN/index.demo-entry.md +++ b/src/menu/demos/zhCN/index.demo-entry.md @@ -19,6 +19,7 @@ accordion.vue router-link.vue customize-field.vue expand-selected-option.vue +show.vue debug.vue ``` @@ -63,6 +64,7 @@ debug.vue | --------- | -------------------------------------- | ---------------- | | children? | `Array` | 子选项 | | disabled? | `boolean` | 是否禁用菜单项 | +| show? | `boolean` | 是否显示菜单项 | | extra? | `string \| (() => VNodeChild)` | 菜单项的额外部分 | | icon? | `() => VNode` | 菜单项的图标 | | key | `string` | 菜单项的标识符 | diff --git a/src/menu/demos/zhCN/show.demo.vue b/src/menu/demos/zhCN/show.demo.vue new file mode 100644 index 000000000..29ea3e9d0 --- /dev/null +++ b/src/menu/demos/zhCN/show.demo.vue @@ -0,0 +1,74 @@ + +# 控制选项的显示隐藏 + +在某种情况下，不同的角色会看到不同的菜单。你可以使用 `show` 属性来隐藏菜单。 + + + + + diff --git a/src/menu/src/Menu.tsx b/src/menu/src/Menu.tsx index 70f718505..1af986926 100644 --- a/src/menu/src/Menu.tsx +++ b/src/menu/src/Menu.tsx @@ -95,6 +95,10 @@ export const menuProps = { default: undefined }, disabled: Boolean, + show: { + type: Boolean, + defalut: true + }, inverted: Boolean, 'onUpdate:expandedKeys': [Function, Array] as PropType< MaybeArray diff --git a/src/menu/src/utils.tsx b/src/menu/src/utils.tsx index 7f08e7fe9..5332ad510 100644 --- a/src/menu/src/utils.tsx +++ b/src/menu/src/utils.tsx @@ -36,7 +36,10 @@ export function itemRenderer ( menuProps: MenuSetupProps ): VNode | undefined { const { rawNode } = tmNode - + const { show } = rawNode + if (typeof show === 'boolean' && !show) { + return null + } if (isIgnoredNode(rawNode)) { if (isDividerNode(rawNode)) { return diff --git a/src/menu/tests/Menu.spec.tsx b/src/menu/tests/Menu.spec.tsx index 26b9fd1ea..b1de75907 100644 --- a/src/menu/tests/Menu.spec.tsx +++ b/src/menu/tests/Menu.spec.tsx @@ -406,4 +406,28 @@ describe('n-menu', () => { /> ) }) + + it('should work with `hidden` prop', async () => { + const options = [ + { + label: 'fantasy', + key: 'fantasy', + show: false + }, + { + label: 'mojito', + key: 'mojito' + }, + { + label: 'initialj', + key: 'initialj' + } + ] + const wrapper = mount(NMenu, { + props: { + options: options + } + }) + expect(wrapper.findAll('.n-menu-item-content').length).toBe(2) + }) }) diff --git a/src/popconfirm/demos/enUS/index.demo-entry.md b/src/popconfirm/demos/enUS/index.demo-entry.md index 9729bef6f..2949b1dfe 100644 --- a/src/popconfirm/demos/enUS/index.demo-entry.md +++ b/src/popconfirm/demos/enUS/index.demo-entry.md @@ -38,4 +38,5 @@ For more props, see [popover](popover#Popover-Props). | icon | `()` | Popconfirm icon. | ### Popconfirm Methods + See [popover](popover#Popover-Methods). diff --git a/src/popconfirm/demos/zhCN/index.demo-entry.md b/src/popconfirm/demos/zhCN/index.demo-entry.md index 0aabe868b..9f1cf4a33 100644 --- a/src/popconfirm/demos/zhCN/index.demo-entry.md +++ b/src/popconfirm/demos/zhCN/index.demo-entry.md @@ -38,4 +38,5 @@ actions.vue | icon | `()` | 弹出确认的图标 | ### Popconfirm Methods + See [popover](popover#Popover-Methods) diff --git a/src/tag/demos/zhCN/closable.demo.vue b/src/tag/demos/zhCN/closable.demo.vue index 7f0313688..3d4182104 100644 --- a/src/tag/demos/zhCN/closable.demo.vue +++ b/src/tag/demos/zhCN/closable.demo.vue @@ -16,12 +16,7 @@ 手写的从前 - + 哪里都是你