From 018e80c36fee5844ce0fc9c9e8667ac59a2b8403 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= Date: Thu, 26 Sep 2024 21:15:50 +0800 Subject: [PATCH] feat(Rate): support clearable API (#4603) --- src/rate/__tests__/index.test.jsx | 17 +++++++++++++++++ src/rate/_usage/props.json | 6 ++++++ src/rate/props.ts | 9 +++++++-- src/rate/rate.en-US.md | 4 +++- src/rate/rate.md | 8 +++++--- src/rate/rate.tsx | 8 +++++++- src/rate/type.ts | 8 ++++++-- 7 files changed, 51 insertions(+), 9 deletions(-) diff --git a/src/rate/__tests__/index.test.jsx b/src/rate/__tests__/index.test.jsx index 1a56a9fc38..f6c0c9a97d 100644 --- a/src/rate/__tests__/index.test.jsx +++ b/src/rate/__tests__/index.test.jsx @@ -39,6 +39,23 @@ describe('Rate', () => { const item = wrapper.find('.t-rate__item'); expect(item.classes()).contains('t-rate__item--half'); }); + it(':clearable', async () => { + const wrapper = mount(Rate, { + props: { + defaultValue: 4, + clearable: true, + }, + }); + + const items = wrapper.findAll('.t-rate__item--full'); + + expect(items.length).toBe(4); + + items.at(3).trigger('click'); + await wrapper.vm.$nextTick(); + const newItems = wrapper.findAll('.t-rate__item--full'); + expect(newItems.length).toBe(0); + }); it(':color String', async () => { const wrapper = mount(Rate, { props: { diff --git a/src/rate/_usage/props.json b/src/rate/_usage/props.json index fc7be3076c..2c76a6acce 100644 --- a/src/rate/_usage/props.json +++ b/src/rate/_usage/props.json @@ -11,6 +11,12 @@ "defaultValue": false, "options": [] }, + { + "name": "clearable", + "type": "Boolean", + "defaultValue": false, + "options": [] + }, { "name": "showText", "type": "Boolean", diff --git a/src/rate/props.ts b/src/rate/props.ts index 180e0dfdb1..b05c9e8ecd 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -10,6 +10,8 @@ import { PropType } from 'vue'; export default { /** 是否允许半选 */ allowHalf: Boolean, + /** 是否允许清除评分，如果允许，重新点击当前评分清除 */ + clearable: Boolean, /** 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] */ color: { type: [String, Array] as PropType, @@ -21,7 +23,10 @@ export default { default: 5, }, /** 是否禁用评分 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 评分图标的间距 */ gap: { type: Number, @@ -33,7 +38,7 @@ export default { }, /** 是否显示对应的辅助文字 */ showText: Boolean, - /** 评分图标的大小，示例：`20px` */ + /** 评分图标的大小 */ size: { type: String, default: '24px', diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md index 45319a4e82..7fb90576eb 100644 --- a/src/rate/rate.en-US.md +++ b/src/rate/rate.en-US.md @@ -1,14 +1,16 @@ :: BASE_DOC :: ## API + ### Rate Props name | type | default | description | required -- | -- | -- | -- | -- allowHalf | Boolean | false | \- | N +clearable | Boolean | false | \- | N color | String / Array | '#ED7B2F' | Typescript：`string \| Array` | N count | Number | 5 | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N gap | Number | 4 | \- | N icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N showText | Boolean | false | \- | N diff --git a/src/rate/rate.md b/src/rate/rate.md index b2601ac3d6..7b04f9e60d 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -1,18 +1,20 @@ :: BASE_DOC :: ## API + ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowHalf | Boolean | false | 是否允许半选 | N +clearable | Boolean | false | 是否允许清除评分，如果允许，重新点击当前评分清除 | N color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N count | Number | 5 | 评分的数量 | N -disabled | Boolean | - | 是否禁用评分 | N +disabled | Boolean | undefined | 是否禁用评分 | N gap | Number | 4 | 评分图标的间距 | N icon | Slot / Function | - | 自定义评分图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N showText | Boolean | false | 是否显示对应的辅助文字 | N -size | String | 24px | 评分图标的大小，示例：`20px` | N +size | String | 24px | 评分图标的大小 | N texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N value | Number | 0 | 选择评分的值。支持语法糖 `v-model` 或 `v-model:value` | N defaultValue | Number | 0 | 选择评分的值。非受控属性 | N diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx index 211292a380..66d8fbd98b 100644 --- a/src/rate/rate.tsx +++ b/src/rate/rate.tsx @@ -65,7 +65,13 @@ export default defineComponent({ const clickHandler = (event: MouseEvent, index: number) => { if (props.disabled) return; - setStarValue(getStarValue(event, index)); + const value = getStarValue(event, index); + if (props.clearable && value === starValue.value) { + hoverValue.value = undefined; + setStarValue(0); + } else { + setStarValue(value); + } }; const getStarCls = (index: number) => { diff --git a/src/rate/type.ts b/src/rate/type.ts index d9b4a2e3a1..3979fe11e0 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -12,6 +12,11 @@ export interface TdRateProps { * @default false */ allowHalf?: boolean; + /** + * 是否允许清除评分，如果允许，重新点击当前评分清除 + * @default false + */ + clearable?: boolean; /** * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] * @default '#ED7B2F' @@ -24,7 +29,6 @@ export interface TdRateProps { count?: number; /** * 是否禁用评分 - * @default false */ disabled?: boolean; /** @@ -42,7 +46,7 @@ export interface TdRateProps { */ showText?: boolean; /** - * 评分图标的大小，示例：`20px` + * 评分图标的大小 * @default 24px */ size?: string;