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

…#3663) * feat(TagInput): expand the deletion function of collapsedItems(#3662) * docs(Select/TreeSelect): update example file(#3662) * fix(TagInput): onClose parameter(#3662) * chore: update api * chore: update api * chore: update api * chore: update api * chore: update api * chore: update snapshot * chore: fix lint * chore: update snapshot --------- Co-authored-by: Uyarn <[email protected]>
Tencent · Mar 26, 2024 · 2504697 · 2504697
1 parent 421f6e7
commit 2504697
Show file tree

Hide file tree

Showing 30 changed files with 2,056 additions and 337 deletions.
diff --git a/src/cascader/_example/collapsed.vue b/src/cascader/_example/collapsed.vue
@@ -1,24 +1,57 @@
 <template>
   <t-space direction="vertical">
-    <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 - 1 }}</span>
-        </t-popup>
+    <h3>default:</h3>
+    <t-cascader v-model="value1" :options="options" :on-remove="handleBlur" multiple :min-collapsed-num="1" />
+
+    <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="value1"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    />
+    <t-cascader
+      v-model="value1"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #collapsedItems="{ value: v, onClose }">
+        <CollapsedItemsRender
+          :style="{ marginRight: '4px' }"
+          :value="v"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
     </t-cascader>
   </t-space>
 </template>
 
 <script lang="jsx" setup>
-import { ref } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 
 const options = [
   {
@@ -55,30 +88,90 @@ const options = [
   },
 ];
 
-const value = ref(['1.1', '1.2', '1.3']);
+const value1 = ref(['1.1', '1.2', '1.3']);
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
 
 const handleBlur = (e) => {
   console.log(e);
 };
 
-const collapsedItems = (h, { value, count }) => {
-  if (!(value instanceof Array) || !count) return;
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
   return (
     <t-popup
       v-slots={{
         content: () => (
-          <div>
-            {value.map((item) => (
-              <p style="padding: 10px;">{item}</p>
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
             ))}
-          </div>
+          </>
         ),
       }}
     >
-      <span v-show={count > 0} style="color: #ED7B2F; margin-left: 10px;">
-        +{count - 1}
-      </span>
+      <t-tag size={size.value} disabled={disabled.value}>
+        Function - More({count})
+      </t-tag>
     </t-popup>
   );
 };
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length);
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>
+            Slot - More({count.value})
+          </t-tag>
+        </t-popup>
+      );
+    };
+  },
+});
 </script>
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-next/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-next/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-next/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-next/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | 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-next/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-next/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-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | String / Slot / Function | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N

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

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` 表示折叠的数量
-   */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调
+   */
+  collapsedItems?: TNode<{
+    value: CascaderOption[];
+    collapsedSelectedItems: CascaderOption[];
+    count: number;
+    onClose: (context: { index: number; e?: MouseEvent }) => void;
+  }>;
   /**
    * 是否禁用组件
    */

diff --git a/src/dropdown/props.ts b/src/dropdown/props.ts
@@ -58,7 +58,20 @@ export default {
     default: 'bottom-left' as TdDropdownProps['placement'],
     validator(val: TdDropdownProps['placement']): boolean {
       if (!val) return true;
-      return ['top', 'left', 'right', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'].includes(val);
+      return [
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+        'left-top',
+        'left-bottom',
+        'right-top',
+        'right-bottom',
+      ].includes(val);
     },
   },
   /** 透传  Popup 组件属性，方便更加自由地控制。比如使用 popupProps.overlayStyle 设置浮层样式 */