feat(Rate): add clearable prop (#11969)

* feat(Rate): add clearable prop

* test(Rate): update test snapshots

* fix(Rate): solve problem

* feat: extract constant

* test: update test case

packages/vant/src/image-preview/ImagePreviewItem.tsx

@@ -15,6 +15,7 @@ import {
   createNamespace,
   makeRequiredProp,
   LONG_PRESS_START_TIME,
+  TAP_OFFSET,
   type ComponentInstance,
 } from '../utils';
 
@@ -250,7 +251,6 @@ export default defineComponent({
 
       // Same as the default value of iOS double tap timeout
       const TAP_TIME = 250;
-      const TAP_OFFSET = 5;
 
       if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
         // tap or double tap

packages/vant/src/rate/README.md

@@ -76,6 +76,14 @@ export default {
 <van-rate v-model="value" :count="6" />
 ```
 
+### Clearable
+
+When the `clearable` prop is set to `true`, clicking on the same value again will reset the value to `0`.
+
+```html
+<van-rate v-model="value" clearable />
+```
+
 ### Disabled
 
 ```html
@@ -144,6 +152,7 @@ export default {
 | void-icon | Void icon | _string_ | `star-o` |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
 | allow-half | Whether to allow half star | _boolean_ | `false` |
+| clearable | Whether to allow clear when click again | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
 | disabled | Whether to disable rate | _boolean_ | `false` |
 | touchable | Whether to allow select rate by touch gesture | _boolean_ | `true` |

packages/vant/src/rate/README.zh-CN.md

@@ -86,6 +86,14 @@ export default {
 <van-rate v-model="value" :count="6" />
 ```
 
+### 可清空
+
+当 `clearable` 属性设置为 `true`，再次点击相同的值时，可以将值重置为 `0`。
+
+```html
+<van-rate v-model="value" clearable />
+```
+
 ### 禁用状态
 
 通过 `disabled` 属性来禁用评分。
@@ -162,6 +170,7 @@ export default {
 | void-icon | 未选中时的图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `star-o` |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | allow-half | 是否允许半选 | _boolean_ | `false` |
+| clearable | 是否允许再次点击后清除 | _boolean_ | `false` |
 | readonly | 是否为只读状态，只读状态下无法修改评分 | _boolean_ | `false` |
 | disabled | 是否禁用评分 | _boolean_ | `false` |
 | touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |

packages/vant/src/rate/Rate.tsx

@@ -10,6 +10,7 @@ import {
   makeNumberProp,
   makeNumericProp,
   createNamespace,
+  TAP_OFFSET,
 } from '../utils';
 
 // Composables
@@ -60,6 +61,7 @@ export const rateProps = {
   color: String,
   count: makeNumericProp(5),
   gutter: numericProp,
+  clearable: Boolean,
   readonly: Boolean,
   disabled: Boolean,
   voidIcon: makeStringProp('star-o'),
@@ -85,8 +87,9 @@ export default defineComponent({
     const [itemRefs, setItemRefs] = useRefs();
     const groupRef = ref<Element>();
 
-    const untouchable = () =>
+    const unselectable = computed(() => props.readonly || props.disabled);
-      props.readonly || props.disabled || !props.touchable;
+
+    const untouchable = computed(() => unselectable.value || !props.touchable);
 
     const list = computed<RateListItem[]>(() =>
       Array(+props.count)
@@ -111,6 +114,7 @@ export default defineComponent({
     let groupRefRect: DOMRect;
     let minRectTop = Number.MAX_SAFE_INTEGER;
     let maxRectTop = Number.MIN_SAFE_INTEGER;
+    let onlyTap = false;
 
     const updateRanges = () => {
       groupRefRect = useRect(groupRef);
@@ -169,24 +173,24 @@ export default defineComponent({
       return props.allowHalf ? 0.5 : 1;
     };
 
-    const select = (index: number) => {
+    const select = (value: number) => {
-      if (!props.disabled && !props.readonly && index !== props.modelValue) {
+      if (unselectable.value || value === props.modelValue) return;
-        emit('update:modelValue', index);
+      emit('update:modelValue', value);
-        emit('change', index);
+      emit('change', value);
-      }
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      if (untouchable()) {
+      if (untouchable.value) {
         return;
       }
 
       touch.start(event);
+      onlyTap = true;
       updateRanges();
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      if (untouchable()) {
+      if (untouchable.value) {
         return;
       }
 
@@ -197,6 +201,13 @@ export default defineComponent({
         preventDefault(event);
         select(getScoreByPosition(clientX, clientY));
       }
+
+      if (
+        onlyTap &&
+        (touch.offsetX.value > TAP_OFFSET || touch.offsetY.value > TAP_OFFSET)
+      ) {
+        onlyTap = false;
+      }
     };
 
     const renderStar = (item: RateListItem, index: number) => {
@@ -227,9 +238,11 @@ export default defineComponent({
 
       const onClickItem = (event: MouseEvent) => {
         updateRanges();
-        select(
+        let value = allowHalf
-          allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score
+          ? getScoreByPosition(event.clientX, event.clientY)
-        );
+          : score;
+        if (props.clearable && onlyTap && value === props.modelValue) value = 0;
+        select(value);
       };
 
       return (

packages/vant/src/rate/demo/index.vue

@@ -11,6 +11,7 @@ const t = useTranslate({
     customIcon: '自定义图标',
     customStyle: '自定义样式',
     customCount: '自定义数量',
+    clearable: '可清空',
     readonly: '只读状态',
     readonlyHalfStar: '只读状态小数显示',
     changeEvent: '监听 change 事件',
@@ -22,6 +23,7 @@ const t = useTranslate({
     customIcon: 'Custom Icon',
     customStyle: 'Custom Style',
     customCount: 'Custom Count',
+    clearable: 'Clearable',
     readonly: 'Readonly',
     readonlyHalfStar: 'Readonly Half Star',
     changeEvent: 'Change Event',
@@ -37,6 +39,7 @@ const value5 = ref(4);
 const value6 = ref(3);
 const value7 = ref(3.3);
 const value8 = ref(2);
+const value9 = ref(3);
 
 const onChange = (value: number) => showToast(t('toastContent', value));
 </script>
@@ -68,6 +71,10 @@ const onChange = (value: number) => showToast(t('toastContent', value));
     <van-rate v-model="value5" :count="6" />
   </demo-block>
 
+  <demo-block :title="t('clearable')">
+    <van-rate v-model="value9" clearable />
+  </demo-block>
+
   <demo-block :title="t('disabled')">
     <van-rate v-model="value6" disabled />
   </demo-block>

packages/vant/src/rate/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -426,6 +426,87 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <!--[-->
+  <div role="radiogroup"
+       class="van-rate"
+       tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
+  >
+    <!--[-->
+    <div role="radio"
+         style
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="1"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
+         style
+      >
+        <!--[-->
+      </i>
+    </div>
+    <div role="radio"
+         style
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="2"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
+         style
+      >
+        <!--[-->
+      </i>
+    </div>
+    <div role="radio"
+         style
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="3"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
+         style
+      >
+        <!--[-->
+      </i>
+    </div>
+    <div role="radio"
+         style
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="4"
+         aria-checked="false"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
+         style
+      >
+        <!--[-->
+      </i>
+    </div>
+    <div role="radio"
+         style
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="5"
+         aria-checked="false"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
+         style
+      >
+        <!--[-->
+      </i>
+    </div>
+  </div>
+</div>
 <div>
   <!--[-->
   <div role="radiogroup"

packages/vant/src/rate/test/__snapshots__/demo.spec.ts.snap

@@ -320,6 +320,65 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div role="radiogroup"
+       class="van-rate"
+       tabindex="0"
+       aria-disabled="false"
+       aria-readonly="false"
+  >
+    <div role="radio"
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="1"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+      </i>
+    </div>
+    <div role="radio"
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="2"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+      </i>
+    </div>
+    <div role="radio"
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="3"
+         aria-checked="true"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+      </i>
+    </div>
+    <div role="radio"
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="4"
+         aria-checked="false"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
+      </i>
+    </div>
+    <div role="radio"
+         class="van-rate__item"
+         tabindex="0"
+         aria-setsize="5"
+         aria-posinset="5"
+         aria-checked="false"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
+      </i>
+    </div>
+  </div>
+</div>
 <div>
   <div role="radiogroup"
        class="van-rate van-rate--disabled"

packages/vant/src/rate/test/index.spec.ts

@@ -1,5 +1,6 @@
 import { Rate } from '..';
-import { mount, triggerDrag } from '../../../test';
+import { mount, trigger, triggerDrag } from '../../../test';
+import { TAP_OFFSET } from '../../utils';
 import type { DOMWrapper } from '@vue/test-utils';
 
 function mockGetBoundingClientRect(items: DOMWrapper<Element>[]) {
@@ -141,3 +142,27 @@ test('should render correct count when using string prop', () => {
 
   expect(icons).toHaveLength(4);
 });
+
+test('should reset value to 0 when using clearable prop', () => {
+  const wrapper = mount(Rate, {
+    props: {
+      modelValue: 4,
+      clearable: true,
+    },
+  });
+  const icons = wrapper.findAll('.van-rate__item');
+  const item4 = wrapper.findAll('.van-rate__icon')[3];
+  mockGetBoundingClientRect(icons);
+
+  trigger(wrapper, 'touchstart', 80, 0);
+  trigger(wrapper, 'touchmove', 80 + TAP_OFFSET, 0);
+  item4.trigger('click');
+  expect(wrapper.emitted('change')![0]).toEqual([0]);
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([0]);
+
+  trigger(wrapper, 'touchstart', 80, 0);
+  trigger(wrapper, 'touchmove', 80 + TAP_OFFSET + 1, 0);
+  item4.trigger('click');
+  expect(wrapper.emitted('change')).toHaveLength(1);
+  expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+});

packages/vant/src/utils/constant.ts

@@ -17,3 +17,4 @@ export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');
 // Same as the default value of iOS long press time
 // https://developer.apple.com/documentation/uikit/uilongpressgesturerecognizer/1616423-minimumpressduration
 export const LONG_PRESS_START_TIME = 500;
+export const TAP_OFFSET = 5;