feat(dynamic-tags): add max prop (#745)

CHANGELOG.en-US.md

@@ -13,6 +13,7 @@
 - `n-menu` add `render-extra` prop.
 - `n-select` add `on-clear` prop.
 - `n-form` add `disabled` prop, closes [#538](https://github.com/TuSimple/naive-ui/issues/538).
+- `n-dynamic-tags` add `max` prop.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 - `n-menu` 新增 `render-extra` 属性
 - `n-select` 新增 `on-clear` 属性
 - `n-form` 增加 `disabled` 属性，关闭 [#538](https://github.com/TuSimple/naive-ui/issues/538)
+- `n-dynamic-tags` 新增 `max` 属性
 
 ### Fixes
 

src/dynamic-tags/demos/enUS/index.demo-entry.md

@@ -6,6 +6,7 @@ Make tags inputable.
 
 ```demo
 basic
+max
 form
 ```
 
@@ -18,6 +19,7 @@ form
 | default-value | `string[]` | `[]` | Default value in uncontrolled mode. |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |
 | 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 round corner. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
 | tag-style | `string \| Object` | `undefined` | Customize the style of the tag. |

src/dynamic-tags/demos/enUS/max.demo.md

@@ -0,0 +1,17 @@
+# Max Tag Count
+
+```html
+<n-dynamic-tags v-model:value="tags" :max="3" />
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      tags: ref(['teacher', 'programmer'])
+    }
+  }
+})
+```

src/dynamic-tags/demos/zhCN/index.demo-entry.md

@@ -6,6 +6,7 @@
 
 ```demo
 basic
+max
 form
 ```
 
@@ -18,6 +19,7 @@ form
 | default-value | `string[]` | `[]` | 非受控模式下的默认值 |
 | disabled | `boolean` | `false` | 是否禁用 |
 | input-style | `string \| Object` | `undefined` | 自定义输入框的样式 |
+| max | `number` | `undefined` | tag 的最大数量 |
 | round | `boolean` | `false` | 是否圆角 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
 | tag-style | `string \| Object` | `undefined` | 自定义标签的样式 |

src/dynamic-tags/demos/zhCN/max.demo.md

@@ -0,0 +1,17 @@
+# 最大标签数量
+
+```html
+<n-dynamic-tags v-model:value="tags" :max="3" />
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      tags: ref(['教师', '程序员'])
+    }
+  }
+})
+```

src/dynamic-tags/src/DynamicTags.tsx

@@ -39,6 +39,7 @@ const dynamicTagsProps = {
   },
   value: Array as PropType<string[]>,
   inputStyle: [String, Object] as PropType<string | CSSProperties>,
+  max: Number as PropType<number>,
   tagStyle: [String, Object] as PropType<string | CSSProperties>,
   // eslint-disable-next-line vue/prop-name-casing
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
@@ -236,6 +237,7 @@ export default defineComponent({
                 ) : (
                   <NButton
                     dashed
+                    disabled={!!this.max && this.mergedValue.length >= this.max}
                     theme={mergedTheme.peers.Button}
                     themeOverrides={mergedTheme.peerOverrides.Button}
                     size={inputSize}