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

src/cascader/_example-composition/custom-options.vue

@@ -78,13 +78,13 @@ const options = ref([
 ]);
 const optionsData = computed(() => getDeepOptions(options.value));
 const optionRender = (h, { item }) => (
-    <div class="tdesign-demo__user-option">
-      <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
-      <div class="tdesign-demo__user-option-info">
-        <div>{item.label}</div>
-        <div>{item.value}</div>
-      </div>
+  <div class="tdesign-demo__user-option">
+    <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
+    <div class="tdesign-demo__user-option-info">
+      <div>{item.label}</div>
+      <div>{item.value}</div>
     </div>
+  </div>
 );
 const getDeepOptions = (options) => {
   if (!options) return null;

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>
       );
     },

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

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

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,
@@ -242,6 +218,7 @@ export default defineComponent({
           tag: slots.tag,
           suffix: slots.suffix,
           label: slots.label,
+          collapsedItems: slots.collapsedItems,
         }}
       />
     );

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']>,
   },

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 表示无论什么情况，选中值仅呈现叶子节点

src/dialog/_example-composition/custom.vue

@@ -109,9 +109,9 @@ const bodyVisible1 = ref(false);
 const bodyVisible2 = ref(false);
 const bodyVisible3 = ref(false);
 const getConfirmBtn = () => (
-    <t-button theme="primary" disabled>
-      我知道了
-    </t-button>
+  <t-button theme="primary" disabled>
+    我知道了
+  </t-button>
 );
 // 使用 button.content 渲染函数输出
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

src/dialog/_example-composition/custom/bottom.vue

@@ -44,8 +44,8 @@ const visible1 = ref(false);
 const visible2 = ref(false);
 const visible3 = ref(false);
 const getConfirmBtn = () => (
-    <t-button theme="primary" disabled>
-      我知道了
-    </t-button>
+  <t-button theme="primary" disabled>
+    我知道了
+  </t-button>
 );
 </script>

src/drawer/_example-composition/custom.vue

@@ -46,11 +46,11 @@ const visible = ref(false);
 const visible2 = ref(false);
 const visible3 = ref(false);
 const renderFooter = () => (
-    <div>
-      <t-button>confirm</t-button>
-      <t-button variant="outline" onClick={() => (visible2.value = false)}>
-        cancel
-      </t-button>
-    </div>
+  <div>
+    <t-button>confirm</t-button>
+    <t-button variant="outline" onClick={() => (visible2.value = false)}>
+      cancel
+    </t-button>
+  </div>
 );
 </script>

src/image-viewer/_example-composition/block.vue

@@ -22,14 +22,14 @@ const initialImages = [
 ];
 const images = ref(initialImages);
 const trigger = (h, { open }) => (
-    <div class="tdesign-demo-image-viewer__ui-image">
-      <img alt="test" src={img} class="tdesign-demo-image-viewer__ui-image--img" />
-      <div class="tdesign-demo-image-viewer__ui-image--hover" onClick={open}>
-        <span>
-          <BrowseIcon size="1.4em" /> 预览
-        </span>
-      </div>
+  <div class="tdesign-demo-image-viewer__ui-image">
+    <img alt="test" src={img} class="tdesign-demo-image-viewer__ui-image--img" />
+    <div class="tdesign-demo-image-viewer__ui-image--hover" onClick={open}>
+      <span>
+        <BrowseIcon size="1.4em" /> 预览
+      </span>
     </div>
+  </div>
 );
 </script>
 

src/input-adornment/_example-composition/select.vue

@@ -19,23 +19,23 @@
 
 <script setup lang="jsx">
 const protocolSelect = () => (
-    <t-select
-      autoWidth
-      options={['http://', 'https://'].map((value) => ({
-        label: value,
-        value,
-      }))}
-      defaultValue="http://"
-    />
+  <t-select
+    autoWidth
+    options={['http://', 'https://'].map((value) => ({
+      label: value,
+      value,
+    }))}
+    defaultValue="http://"
+  />
 );
 const tldSelect = () => (
-    <t-select
-      autoWidth
-      options={['.com', '.cn', '.net', '.org'].map((value) => ({
-        label: value,
-        value,
-      }))}
-      defaultValue=".cn"
-    />
+  <t-select
+    autoWidth
+    options={['.com', '.cn', '.net', '.org'].map((value) => ({
+      label: value,
+      value,
+    }))}
+    defaultValue=".cn"
+  />
 );
 </script>