feat(Rate): support clearable API (#4603)

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: {

src/rate/_usage/props.json

@@ -11,6 +11,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "clearable",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "showText",
     "type": "Boolean",

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<TdRateProps['color']>,
@@ -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',

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<string>` | 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

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<string>` | 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<string>` | N
 value | Number | 0 | 选择评分的值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | Number | 0 | 选择评分的值。非受控属性 | N

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) => {

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;