feat(TagInput): expand the deletion function of collapsedItems(#2941) (…

…#2942) * feat(TagInput): expand the deletion function of collapsedItems(#2941) * fix(TagInput): onClose parameter(#2941) * chore: update api * chore: update api * chore: update api * chore: update api --------- Co-authored-by: Uyarn <[email protected]>
Tencent · Apr 11, 2024 · 9b8bf08 · 9b8bf08
1 parent 2442f0b
commit 9b8bf08
Show file tree

Hide file tree

Showing 31 changed files with 431 additions and 353 deletions.
diff --git a/src/cascader/_example/collapsed.vue b/src/cascader/_example/collapsed.vue
@@ -1,19 +1,31 @@
 <template>
   <t-space direction="vertical">
+    <h3>default:</h3>
     <t-cascader v-model="value" :options="options" :on-remove="handleBlur" multiple :min-collapsed-num="1" />
-    <t-cascader v-model="value" :options="options" :collapsed-items="collapsedItems" multiple :min-collapsed-num="1" />
-    <t-cascader v-model="value" :options="options" multiple clearable :min-collapsed-num="1">
-      <template #collapsedItems="{ collapsedSelectedItems, count }">
-        <t-popup>
-          <template #content>
-            <p v-for="(item, index) in collapsedSelectedItems" :key="index" style="padding: 10px">
-              {{ item }}
-            </p>
-          </template>
-          <span v-show="count > 0" style="color: #00a870; margin-left: 10px">+{{ count }}</span>
-        </t-popup>
-      </template>
-    </t-cascader>
+
+    <h3>use collapsedItems:</h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => (size = value)" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => (disabled = value)" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => (readonly = value)" />
+    </t-space>
+    <t-cascader
+      v-model="value"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    />
   </t-space>
 </template>
 <script lang="jsx">
@@ -55,23 +67,37 @@ export default {
         },
       ],
       value: ['1.1', '1.2', '1.3'],
+      size: 'medium',
+      disabled: false,
+      readonly: false,
+      minCollapsedNum: 1,
     };
   },
   methods: {
-    collapsedItems(h, { value: selectedValue, count }) {
-      if (!count) return;
-      const value = selectedValue instanceof Array ? selectedValue : [selectedValue];
-      // hover展示全部已选项
+    collapsedItems(h, { value, onClose }) {
+      if (!(value instanceof Array)) return null;
+      const count = value.length - this.minCollapsedNum;
+      const collapsedTags = value.slice(this.minCollapsedNum, value.length);
+      if (count <= 0) return null;
       return (
         <t-popup>
           <div slot="content">
-            {value.map((item) => (
-              <p style="padding: 10px;">{item.label}</p>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={this.size}
+                disabled={this.disabled}
+                closable={!this.readonly && !this.disabled}
+                onClose={(context) => onClose({ e: context.e, index: this.minCollapsedNum + index })}
+              >
+                {item}
+              </t-tag>
             ))}
           </div>
-          <span v-show={count > 0} style="color: #ED7B2F; margin-left: 10px;">
-            +{count}
-          </span>
+          <t-tag size={this.size} disabled={this.disabled}>
+            Function - More({count})
+          </t-tag>
         </t-popup>
       );
     },

diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
 name | type | default | description | required
@@ -10,7 +11,7 @@ borderless | Boolean | false | \- | N
 checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
@@ -45,7 +46,7 @@ tips | String / Slot / Function | - | tips at the bottom of cascader。Typescrip
 trigger | String | click | options: click/hover | N
 value | String / Number / Array | [] | `v-model` is supported。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
-valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: CascaderOption[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N
 valueType | String | single | options: single/full | N
 onBlur | Function |  | Typescript：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/> | N

diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
@@ -1,16 +1,17 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 autofocus | Boolean | - | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 clearable | Boolean | false | 是否支持清空选项 | N
-collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | String / Slot / Function | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
@@ -44,7 +45,7 @@ tips | String / Slot / Function | - | 输入框下方提示文本，会根据不
 trigger | String | click | 展开下一层级的方式。可选项：click/hover | N
 value | String / Number / Array | [] | 选中项的值。支持语法糖 `v-model`。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
 defaultValue | String / Number / Array | [] | 选中项的值。非受控属性。TS 类型：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/cascader/type.ts) | N
-valueDisplay | String / Slot / Function | - | 【开发中】自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption>; selectedOptions: CascaderOption[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 valueMode | String | onlyLeaf | 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点。可选项：onlyLeaf/parentFirst/all | N
 valueType | String | single | 用于控制选中值的类型。single 表示输入输出值为 叶子结点值， full 表示输入输出值为全路径。可选项：single/full | N
 onBlur | Function |  | TS 类型：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/>当输入框失去焦点时触发 | N

diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
@@ -11,7 +11,7 @@ import props from './props';
 
 import { useCascaderContext } from './hooks';
 import {
-  CascaderValue, TreeKeysType, TdSelectInputProps, TdCascaderProps,
+  CascaderValue, TdSelectInputProps, TdCascaderProps,
 } from './interface';
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { PopupVisibleChangeContext } from '../popup';
@@ -22,12 +22,6 @@ import useFormDisabled from '../hooks/useFormDisabled';
 import { TagInputValue } from '../tag-input';
 import { renderTNodeJSX } from '../utils/render-tnode';
 
-const DEFAULT_KEYS = {
-  label: 'label',
-  value: 'value',
-  children: 'children',
-};
-
 export default defineComponent({
   name: 'TCascader',
 
@@ -124,24 +118,6 @@ export default defineComponent({
       );
     };
 
-    const renderCollapsedItems = () => {
-      const cascaderValue = this.innerValue || [];
-      const keys = (this.keys as TreeKeysType) || DEFAULT_KEYS;
-      const value = Array.isArray(cascaderValue) ? cascaderValue : [cascaderValue];
-      const cascaderOptions = value.map((item) => {
-        const tmpValue = typeof item === 'object' ? item[keys.value] : item;
-        if (tmpValue === undefined) return null;
-        return cascaderContext.treeStore.getNode(tmpValue).data;
-      });
-      return renderTNodeJSX(this, 'collapsedItems', {
-        params: {
-          value: cascaderOptions,
-          collapsedSelectedItems: cascaderOptions.slice(0, this.minCollapsedNum),
-          count: value.length - this.minCollapsedNum,
-        },
-      });
-    };
-
     const {
       setVisible, visible, inputVal, setInputVal,
     } = cascaderContext;
@@ -159,7 +135,7 @@ export default defineComponent({
             keys: this.keys,
             allowInput: isFilterable,
             minCollapsedNum: this.minCollapsedNum,
-            collapsedItems: renderCollapsedItems,
+            collapsedItems: this.collapsedItems,
             label: this.label,
             valueDisplay: renderValueDisplay,
             suffix: this.suffix,
@@ -243,6 +219,7 @@ export default defineComponent({
           tag: slots.tag,
           suffix: slots.suffix,
           label: slots.label,
+          collapsedItems: slots.collapsedItems,
         }}
       />
     );

diff --git a/src/cascader/props.ts b/src/cascader/props.ts
@@ -20,7 +20,7 @@ export default {
   checkStrictly: Boolean,
   /** 是否支持清空选项 */
   clearable: Boolean,
-  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */
+  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */
   collapsedItems: {
     type: Function as PropType<TdCascaderProps['collapsedItems']>,
   },
@@ -165,7 +165,7 @@ export default {
     type: [String, Number, Array] as PropType<TdCascaderProps['defaultValue']>,
     default: (): TdCascaderProps['defaultValue'] => [],
   },
-  /** 【开发中】自定义选中项呈现的内容 */
+  /** 自定义选中项呈现的内容 */
   valueDisplay: {
     type: [String, Function] as PropType<TdCascaderProps['valueDisplay']>,
   },

diff --git a/src/cascader/type.ts b/src/cascader/type.ts
@@ -39,9 +39,14 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
    */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+  collapsedItems?: TNode<{
+    value: CascaderOption[];
+    collapsedSelectedItems: CascaderOption[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用组件
    */
@@ -190,14 +195,15 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   defaultValue?: CascaderValue<CascaderOption>;
   /**
-   * 【开发中】自定义选中项呈现的内容
+   * 自定义选中项呈现的内容
    */
   valueDisplay?:
     | string
     | TNode<{
         value: CascaderValue<CascaderOption>;
         onClose: (index: number) => void;
         displayValue?: CascaderValue<CascaderOption>;
+        selectedOptions: CascaderOption[];
       }>;
   /**
    * 选中值模式。all 表示父节点和子节点全部会出现在选中值里面；parentFirst 表示当子节点全部选中时，仅父节点在选中值里面；onlyLeaf 表示无论什么情况，选中值仅呈现叶子节点

diff --git a/src/select-input/props.ts b/src/select-input/props.ts
@@ -18,7 +18,7 @@ export default {
   borderless: Boolean,
   /** 是否可清空 */
   clearable: Boolean,
-  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量 */
+  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */
   collapsedItems: {
     type: Function as PropType<TdSelectInputProps['collapsedItems']>,
   },
@@ -76,6 +76,8 @@ export default {
   defaultPopupVisible: Boolean,
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
   readonly: Boolean,
+  /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */
+  reserveKeyword: Boolean,
   /** 输入框状态 */
   status: {
     type: String as PropType<TdSelectInputProps['status']>,

diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### SelectInput Props
 
 name | type | default | description | required
@@ -10,7 +11,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`string` | N