feat(cascader): add max-tag-count prop, fix clear button triggers menu

CHANGELOG.en-US.md

@@ -7,6 +7,11 @@
 - `n-config-provider` prop `theme-overrides` support inheritance.
 - `card` add `hoverable` prop.
 - `select` add `max-tag-count` prop.
+- `cascader` add `max-tag-count` prop.
+
+### Fixes
+
+- Fix `cascader` menu appears after click clear button.
 
 ## 2.0.1
 

CHANGELOG.zh-CN.md

@@ -7,6 +7,11 @@
 - `n-config-provider` 的 `theme-overrides` 支持继承
 - `card` 新增 `hoverable` 属性
 - `select` 新增 `max-tag-count` 属性
+- `cascader` 新增 `max-tag-count` 属性
+
+### Fixes
+
+- 修正 `cascader` 再点击清除按钮后菜单出现
 
 ## 2.0.1
 

src/cascader/demos/enUS/index.demo-entry.md

@@ -24,6 +24,7 @@ multiple-lazy
 | filterable | `boolean` | `false` | If `remote` is set, it won't work. |
 | filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | A string based filter algorithm. |  |
 | leaf-only | `boolean` | `false` | If only allow value of leaf node to be in `value`. |
+| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple mode. `responsive` will keep all the tags in single line. |
 | multiple | `boolean` | `false` |  |
 | options | `Array<CascaderOption>` | required |  |
 | placeholder | `string` | `'Please Select'` |  |

src/cascader/demos/enUS/multiple.demo.md

@@ -8,11 +8,17 @@
     <n-space><n-switch v-model:value="showPath" />Show Path</n-space>
     <n-space><n-switch v-model:value="hoverTrigger" />Hover Trigger</n-space>
     <n-space><n-switch v-model:value="filterable" />Filterable</n-space>
+    <n-space
+      ><n-switch v-model:value="responsiveMaxTagCount" />Responsive
+      MaxTagCount</n-space
+    >
   </n-space>
   <n-cascader
     v-model:value="value"
     multiple
     placeholder="Meaningless values"
+    clearable
+    :max-tag-count="responsiveMaxTagCount ? 'responsive' : undefined"
     :expand-trigger="hoverTrigger ? 'hover' : 'click'"
     :options="options"
     :cascade="cascade"
@@ -62,6 +68,7 @@ export default {
       hoverTrigger: false,
       value: null,
       filterable: false,
+      responsiveMaxTagCount: true,
       options: genOptions()
     }
   }

src/cascader/demos/zhCN/index.demo-entry.md

@@ -24,8 +24,9 @@ multiple-lazy
 | filterable | `boolean` | `false` | `remote` 被设定时不生效 |
 | filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | 一个基于字符串的过滤算法 |  |
 | leaf-only | `boolean` | `false` | 是否只允许 `value` 出现叶节点的值 |
+| max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
 | multiple | `boolean` | `false` |  |
-| options | `Array<CascaderOption>` | required |  |
+| options | `Array<CascaderOption>` | `[]` |  |
 | placeholder | `string` | `'请选择'` |  |
 | remote | `boolean` | `false` |  |
 | separator | `string` | `' / '` |  |

src/cascader/demos/zhCN/multiple.demo.md

@@ -8,11 +8,17 @@
     <n-space><n-switch v-model:value="showPath" />Show Path</n-space>
     <n-space><n-switch v-model:value="hoverTrigger" />Hover Trigger</n-space>
     <n-space><n-switch v-model:value="filterable" />Filterable</n-space>
+    <n-space
+      ><n-switch v-model:value="responsiveMaxTagCount" />Responsive
+      MaxTagCount</n-space
+    >
   </n-space>
   <n-cascader
     v-model:value="value"
     multiple
+    clearable
     placeholder="没啥用的值"
+    :max-tag-count="responsiveMaxTagCount ? 'responsive' : undefined"
     :expand-trigger="hoverTrigger ? 'hover' : 'click'"
     :options="options"
     :cascade="cascade"
@@ -62,6 +68,7 @@ export default {
       hoverTrigger: false,
       value: null,
       filterable: false,
+      responsiveMaxTagCount: true,
       options: genOptions()
     }
   }

src/cascader/src/Cascader.tsx

@@ -115,6 +115,7 @@ export default defineComponent({
       type: Boolean as PropType<boolean | undefined>,
       default: undefined
     },
+    maxTagCount: [String, Number] as PropType<number | 'responsive'>,
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
     // deprecated
@@ -549,7 +550,8 @@ export default defineComponent({
       }
     }
     // --- search
-    function handleClear (): void {
+    function handleClear (e: MouseEvent): void {
+      e.stopPropagation()
       doUpdateValue(null)
     }
     function handleTriggerFocus (e: FocusEvent): void {
@@ -731,6 +733,7 @@ export default defineComponent({
                   default: () => (
                     <NInternalSelection
                       ref="triggerInstRef"
+                      maxTagCount={this.maxTagCount}
                       bordered={this.mergedBordered}
                       size={this.mergedSize}
                       theme={this.mergedTheme.peers.InternalSelection}

src/select/demos/enUS/index.demo-entry.md

@@ -26,7 +26,7 @@ max-tag-count
 ## Props
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | clearable | `boolean` | `false` |  |
 | default-value | `Array<string \| number> \| string \| number \| null` | `null` |  |
 | disabled | `boolean` | `false` |  |
@@ -34,7 +34,7 @@ max-tag-count
 | filterable | `boolean` | `false` | Whether it can filter options. |
 | filter | `(pattern: string, option: Object) => boolean` | A basic string based search method. |  |
 | loading | `boolean` | `false` |  |
-| max-tag-count | `number | 'responsive'` | `undefined` | Max tag count in multiple mode. `responsive` will keep all the tags in single line. |
+| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple mode. `responsive` will keep all the tags in single line. |
 | multiple | `boolean` | `false` |  |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` |  |
 | placeholder | `string` | `'Please Select'` |  |

src/select/demos/zhCN/index.demo-entry.md

@@ -29,7 +29,7 @@ menu-debug
 ## Props
 
 | 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | clearable | `boolean` | `false` |  |
 | default-value | `Array<string \| number> \| string \| number \| null` | `null` |  |
 | disabled | `boolean` | `false` |  |
@@ -37,7 +37,7 @@ menu-debug
 | filterable | `boolean` | `false` | 是否可以过滤 |
 | filter | `(pattern: string, option: Object) => boolean` | 一个简单的字符串搜索算法 |  |
 | loading | `boolean` | `false` |  |
-| max-tag-count | `number | 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
+| max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
 | multiple | `boolean` | `false` |  |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` |  |
 | placeholder | `string` | `'请选择'` |  |