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>
tusen-ai · Nov 11, 2023 · 86e72ce · 86e72ce
1 parent 8484e32
commit 86e72ce
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -58,6 +58,7 @@ export const dynamicInputProps = {
     default: 'input'
   },
   keyField: String,
+  itemClass: String,
   itemStyle: [String, Object] as PropType<string | CSSProperties>,
   // 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({
             <div
               key={keyField ? _[keyField] : ensureKey(_, index)}
               data-key={keyField ? _[keyField] : ensureKey(_, index)}
-              class={`${mergedClsPrefix}-dynamic-input-item`}
+              class={[`${mergedClsPrefix}-dynamic-input-item`, itemClass]}
               style={itemStyle}
             >
               {resolveSlotWithProps(