feat(dynamic-tags): add input-class tag-class prop (#5264)

* feat(n-dynamic-tags): add `input-class` `tag-class` prop * Apply suggestions from code review --------- Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Nov 11, 2023 · 8484e32 · 8484e32
1 parent 14f40ba
commit 8484e32
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -23,6 +23,7 @@
 - `n-card` adds `content-class`, `footer-class`, `header-class` and `header-extra-class` props.
 - `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.
 
 ## 2.35.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -23,6 +23,7 @@
 - `n-card` 新增 `content-class`、`footer-class`、`header-class` 和 `header-extra-class` 属性
 - `n-descriptions` 新增 `content-class` 和 `label-class` 属性
 - `n-upload` 新增 `file-list-class` 和 `trigger-class` 属性
+- `n-dynamic-input` 新增 `input-class` 和 `tag-class` 属性
 
 ## 2.35.0
 

diff --git a/src/dynamic-tags/demos/enUS/index.demo-entry.md b/src/dynamic-tags/demos/enUS/index.demo-entry.md
@@ -25,11 +25,13 @@ on-create.vue
 | default-value | `string[]` | `[]` | Default value. |  |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |  |
 | input-props | `InputProps` | `undefined` | Props of internal `n-input`. | 2.25.0 |
+| input-class | `string` | `undefined` | Customize the class of the input. | NEXT_VERSION |
 | input-style | `string \| Object` | `undefined` | Customize the style of the input. |  |
 | max | `number` | `undefined` | Maximum number of tags. |  |
 | round | `boolean` | `false` | Whether the tag has rounded corners. |  |
 | render-tag | `((tag: string, index: number) => VNodeChild) \| ((tag: { label: string, value: string }, index: number) => VNodeChild)` | `undefined` | custom render tag. | 2.27.0 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |  |
+| tag-class | `string` | `undefined` | Customize the class of the tag. | NEXT_VERSION |
 | tag-style | `string \| Object` | `undefined` | Customize the style of the tag. |  |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |  |
 | value | `string[]` | `undefined` | Value if manually set. |  |

diff --git a/src/dynamic-tags/demos/zhCN/index.demo-entry.md b/src/dynamic-tags/demos/zhCN/index.demo-entry.md
@@ -25,11 +25,13 @@ on-create.vue
 | default-value | `string[] \| Array<{ label: string, value: string }>` | `[]` | 非受控模式下的默认值 |  |
 | disabled | `boolean` | `false` | 是否禁用 |  |
 | input-props | `InputProps` | `undefined` | 内部 `n-input` 组件的属性 | 2.25.0 |
+| input-class | `string` | `undefined` | 自定义输入框的类名 | NEXT_VERSION |
 | input-style | `string \| Object` | `undefined` | 自定义输入框的样式 |  |
 | max | `number` | `undefined` | tag 的最大数量 |  |
 | round | `boolean` | `false` | 是否圆角 |  |
 | render-tag | `((tag: string, index: number) => VNodeChild) \| ((tag: { label: string, value: string }, index: number) => VNodeChild)` | `undefined` | 自定义渲染 tag | 2.27.0 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |  |
+| tag-class | `string` | `undefined` | 自定义标签的类名 |  NEXT_VERSION |
 | tag-style | `string \| Object` | `undefined` | 自定义标签的样式 |  |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 标签类型 |  |
 | value | `string[] \| Array<{ label: string, value: string }>` | `undefined` | 受控模式下的值 |  |

diff --git a/src/dynamic-tags/src/DynamicTags.tsx b/src/dynamic-tags/src/DynamicTags.tsx
@@ -55,9 +55,11 @@ export const dynamicTagsProps = {
     default: () => []
   },
   value: Array as PropType<Array<string | DynamicTagsOption>>,
+  inputClass: String,
   inputStyle: [String, Object] as PropType<string | CSSProperties>,
   inputProps: Object as PropType<InputProps>,
   max: Number as PropType<number>,
+  tagClass: String,
   tagStyle: [String, Object] as PropType<string | CSSProperties>,
   renderTag: Function as PropType<
   | ((tag: string, index: number) => VNodeChild)
@@ -218,6 +220,7 @@ export default defineComponent({
           default: () => {
             const {
               mergedTheme,
+              tagClass,
               tagStyle,
               type,
               round,
@@ -227,6 +230,7 @@ export default defineComponent({
               mergedDisabled,
               showInput,
               inputValue,
+              inputClass,
               inputStyle,
               inputSize,
               inputForceFocused,
@@ -247,6 +251,7 @@ export default defineComponent({
                     key={index}
                     theme={mergedTheme.peers.Tag}
                     themeOverrides={mergedTheme.peerOverrides.Tag}
+                    class={tagClass}
                     style={tagStyle}
                     type={type}
                     round={round}
@@ -276,6 +281,7 @@ export default defineComponent({
                       placeholder=""
                       size={inputSize}
                       style={inputStyle}
+                      class={inputClass}
                       autosize
                       {...this.inputProps}
                       ref="inputInstRef"