From 86e72ce0aaef8ee70e4e8ed212a8f709b21d0a9b Mon Sep 17 00:00:00 2001 From: jahnli Date: Sat, 11 Nov 2023 18:48:58 +0800 Subject: [PATCH] feat(dynamic-input): add `item-class` prop (#5263) * feat(n-dynamic-input): add `item-class` prop * Apply suggestions from code review --------- Co-authored-by: 07akioni <07akioni2@gmail.com> --- CHANGELOG.en-US.md | 5 +++-- CHANGELOG.zh-CN.md | 1 + src/dynamic-input/demos/enUS/index.demo-entry.md | 1 + src/dynamic-input/demos/zhCN/index.demo-entry.md | 1 + src/dynamic-input/src/DynamicInput.tsx | 4 +++- 5 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a8c7ba15277..5867e76000b 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -24,6 +24,7 @@ - `n-descriptions` adds `content-class` and `label-class` props. - `n-upload` adds `file-list-class` and `trigger-class` props. - `n-dynamic-input` adds `input-class` and `tag-class` props. +- `n-dynamic-input` adds `item-class` prop. ## 2.35.0 @@ -69,8 +70,8 @@ - `n-tree` adds `scrollbar-props` prop, closes [#4021](https://github.com/tusen-ai/naive-ui/issues/4666). - `n-select` adds `focusInput` `blurInput` methods. - `n-tree-select` adds `focusInput` `blurInput` methods. -- `n-image-group` adds `on-preview-prev` `on-preview-next` prop -- `n-tree` adds `show-line` prop, closes [#3796](https://github.com/tusen-ai/naive-ui/issues/3796), [#4554](https://github.com/tusen-ai/naive-ui/pull/4554) +- `n-image-group` adds `on-preview-prev` `on-preview-next` prop. +- `n-tree` adds `show-line` prop, closes [#3796](https://github.com/tusen-ai/naive-ui/issues/3796), [#4554](https://github.com/tusen-ai/naive-ui/pull/4554). - `n-tree` adds node information for `render-switcher-icon` props, closes [#4815](https://github.com/tusen-ai/naive-ui/issues/4815). - `n-input-number` export the `select` method. - `n-data-table` adds `n-data-table-tr--expanded` class to expanded rows, and `n-data-table-tr n-data-table-tr--expand` class to the additional row, closes [#4420](https://github.com/tusen-ai/naive-ui/issues/4420). diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4f2f9365368..4768449ca56 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -24,6 +24,7 @@ - `n-descriptions` 新增 `content-class` 和 `label-class` 属性 - `n-upload` 新增 `file-list-class` 和 `trigger-class` 属性 - `n-dynamic-input` 新增 `input-class` 和 `tag-class` 属性 +- `n-dynamic-input` 新增 `item-class` 属性 ## 2.35.0 diff --git a/src/dynamic-input/demos/enUS/index.demo-entry.md b/src/dynamic-input/demos/enUS/index.demo-entry.md index 10b35798fcb..0b38886c252 100644 --- a/src/dynamic-input/demos/enUS/index.demo-entry.md +++ b/src/dynamic-input/demos/enUS/index.demo-entry.md @@ -28,6 +28,7 @@ custom-action.vue | create-button-props | `ButtonProps` | `undefined` | Props of create item button. | 2.25.0 | | default-value | `unknown[]` | `[]` | Default value. | | | disabled | `boolean` | `false` | Whether to disable the dynamic-input. It won't work for custom content. | 2.34.4 | +| item-class | `string` | `undefined` | The class of each item of the dynamic input. | NEXT_VERSION | | item-style | `string \| Object` | `undefined` | The style of each item of the dynamic input. | | | key-field | `string` | `undefined` | The key of each item that should be used in the rendering of the list. | | | min | `number` | `0` | Minimum number of items. | | diff --git a/src/dynamic-input/demos/zhCN/index.demo-entry.md b/src/dynamic-input/demos/zhCN/index.demo-entry.md index 9fa31d5570e..6dec1dde7f8 100644 --- a/src/dynamic-input/demos/zhCN/index.demo-entry.md +++ b/src/dynamic-input/demos/zhCN/index.demo-entry.md @@ -30,6 +30,7 @@ create-debug.vue | create-button-props | `ButtonProps` | `undefined` | 新建项按钮的属性 | 2.25.0 | | default-value | `unknown[]` | `[]` | 非受控模式下的默认值 | | | disabled | `boolean` | `false` | 是否禁用，对自定义内容无效 | 2.34.4 | +| item-class | `string` | `undefined` | 动态录入中每项的类名 | NEXT_VERSION | | item-style | `string \| Object` | `undefined` | 动态录入中每项的样式 | | | key-field | `string` | `undefined` | 每一项的 key 值，会被用于列表渲染中 | | | min | `number` | `0` | 最少有几项内容 | | diff --git a/src/dynamic-input/src/DynamicInput.tsx b/src/dynamic-input/src/DynamicInput.tsx index 85f5e09ea0a..63c9386f236 100644 --- a/src/dynamic-input/src/DynamicInput.tsx +++ b/src/dynamic-input/src/DynamicInput.tsx @@ -58,6 +58,7 @@ export const dynamicInputProps = { default: 'input' }, keyField: String, + itemClass: String, itemStyle: [String, Object] as PropType, // for preset pair keyPlaceholder: { @@ -303,6 +304,7 @@ export default defineComponent({ render () { const { $slots, + itemClass, buttonSize, mergedClsPrefix, mergedValue, @@ -361,7 +363,7 @@ export default defineComponent({
{resolveSlotWithProps(