refactor(rate): rate tips

src/rate/__test__/demo.test.jsx

@@ -3,28 +3,26 @@
  */
 
 import { mount } from '@vue/test-utils';
-import allowHalfVue from '@/rate/demos/allow-half.vue';
+import actionVue from '@/rate/demos/action.vue';
+import baseVue from '@/rate/demos/base.vue';
 import colorVue from '@/rate/demos/color.vue';
 import countVue from '@/rate/demos/count.vue';
-import disabledVue from '@/rate/demos/disabled.vue';
-import filledVue from '@/rate/demos/filled.vue';
-import iconVue from '@/rate/demos/icon.vue';
+import customVue from '@/rate/demos/custom.vue';
 import mobileVue from '@/rate/demos/mobile.vue';
-import outlineVue from '@/rate/demos/outline.vue';
+import showTextVue from '@/rate/demos/show-text.vue';
 import sizeVue from '@/rate/demos/size.vue';
-import textVue from '@/rate/demos/text.vue';
+import specialVue from '@/rate/demos/special.vue';
 
 const mapper = {
-  allowHalfVue,
+  actionVue,
+  baseVue,
   colorVue,
   countVue,
-  disabledVue,
-  filledVue,
-  iconVue,
+  customVue,
   mobileVue,
-  outlineVue,
+  showTextVue,
   sizeVue,
-  textVue,
+  specialVue,
 };
 
 describe('Rate', () => {

src/rate/__test__/index.test.jsx

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import { StarFilledIcon, StarIcon } from 'tdesign-icons-vue-next';
+import { IconFont, StarIcon } from 'tdesign-icons-vue-next';
 import Rate from '../rate.vue';
 import { trigger } from '../../image-viewer/__test__/touch';
 
@@ -18,65 +18,56 @@ describe('Rate', () => {
   describe('Rate', () => {
     it('create', async () => {
       const wrapper = mount(() => <Rate />);
-      expect(wrapper.classes()).toContain('t-rate');
-      const items = wrapper.findAll('.t-rate--item');
+      expect(wrapper.classes()).toContain(`${name}`);
+      const items = wrapper.findAll(`.${name}__icon`);
       expect(items.length).toBe(5);
-      const icon = wrapper.findComponent(StarFilledIcon);
+      const icon = wrapper.findComponent(IconFont);
       expect(icon.exists()).toBeTruthy();
     });
 
     it(': count', async () => {
       const wrapper = mount(() => <Rate count={10} />);
-      const items = wrapper.findAll('.t-rate--item');
+      const items = wrapper.findAll(`.${name}__icon`);
       expect(items.length).toBe(10);
     });
 
     it(': gap', async () => {
       const wrapper = mount(() => <Rate gap={10} />);
-      const items = wrapper.findAll('.t-rate--item');
+      const items = wrapper.findAll(`.${name}__icon`);
       for (let i = 0; i < items.length - 1; i++) {
         expect(getComputedStyle(items[i].element, null).marginRight).toBe('10px');
       }
       expect(getComputedStyle(items[items.length - 1].element, null).marginRight).toBe('0px');
     });
 
-    it(': variant', async () => {
-      const wrapper = mount(() => <Rate variant="outline" />);
-      const icon = wrapper.findComponent(StarIcon);
-      expect(icon.exists()).toBeTruthy();
-    });
-
     it(': allowHalf', async () => {
       const value = ref(0);
       const showText = true;
       const texts = ['很差', '差', '一般', '好评', '优秀'];
       const onChange = vi.fn();
       const wrapper = mount(() => <Rate v-model={value.value} allowHalf showText texts={texts} onChange={onChange} />);
-      const leftIcons = wrapper.findAll('.t-rate--icon-left');
-      const rightIcons = wrapper.findAll('.t-rate--icon-right');
-      await leftIcons[0].trigger('click');
+      const icons = wrapper.findAll(`.${name}__icon`);
+      await icons[0].trigger('click');
+      let tips = wrapper.find(`.${name}__tips`)
+      expect(tips.exists()).toBeTruthy();
+      let tipsItem = tips.findAll(`.${name}__tips-item`);
+      await tipsItem[0].trigger('click');
       expect(onChange).toHaveBeenCalledTimes(1);
-      expect(leftIcons[0].exists()).toBeTruthy();
+      expect(icons[0].exists()).toBeTruthy();
       expect(value.value).toBe(0.5);
-      await rightIcons[0].trigger('click');
+      await icons[0].trigger('click');
+      tips = wrapper.find(`.${name}__tips`)
+      expect(tips.exists()).toBeTruthy();
+      tipsItem = tips.findAll(`.${name}__tips-item`);
+      await tipsItem[1].trigger('click');
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(rightIcons[0].exists()).toBeTruthy();
+      expect(icons[0].exists()).toBeTruthy();
       expect(value.value).toBe(1);
-      const $target = wrapper.find(`.${name}--list`);
+      const $target = wrapper.find(`.${name}__wrapper`);
       await move($target);
       expect(onChange).toHaveBeenCalledTimes(3);
     });
 
-    it(': clearable', async () => {
-      const value = ref(1);
-      const wrapper = mount(() => <Rate v-model={value.value} clearable />);
-      const icons = wrapper.findAll('.t-rate--icon');
-      await icons[1].trigger('click');
-      expect(value.value).toBe(2);
-      await icons[1].trigger('click');
-      expect(value.value).toBe(0);
-    });
-
     it(': showText && texts', async () => {
       const defaultValue = 3;
       const showText = true;
@@ -90,10 +81,10 @@ describe('Rate', () => {
           onChange,
         },
       });
-      const $text = wrapper.find(`.${name}--text`);
+      const $text = wrapper.find(`.${name}__text`);
       expect($text.text()).toEqual(texts[defaultValue - 1]);
 
-      const icons = wrapper.findAll(`.${name}--icon`);
+      const icons = wrapper.findAll(`.${name}__icon`);
       const index = 3;
       await icons[index].trigger('click');
       expect(onChange).toHaveBeenLastCalledWith(index + 1);
@@ -108,8 +99,8 @@ describe('Rate', () => {
         },
       });
       // disabled = true, 不触发 change， touch 无效
-      const $target = wrapper.find(`.${name}--list`);
-      const icons = wrapper.findAll(`.${name}--icon`);
+      const $target = wrapper.find(`.${name}__wrapper`);
+      const icons = wrapper.findAll(`.${name}__icon`);
       const index = 3;
 
       await icons[index].trigger('click');

src/rate/demos/action.vue

@@ -0,0 +1,25 @@
+<template>
+  <tdesign-demo-block summary="只可选全星时">
+    <CustomCell title="点击或滑动" class="space">
+      <t-rate v-model="value1" />
+    </CustomCell>
+  </tdesign-demo-block>
+  <tdesign-demo-block summary="可选半星时">
+    <CustomCell title="点击或滑动" class="space">
+      <t-rate v-model="value2" allow-half />
+    </CustomCell>
+  </tdesign-demo-block>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import CustomCell from './components/custom-cell.vue';
+
+const value1 = ref(3);
+const value2 = ref(3);
+</script>
+<style lang="less" scoped>
+.space {
+  margin-bottom: 16px;
+}
+</style>

src/rate/demos/filled.vue → src/rate/demos/base.vue

@@ -1,6 +1,6 @@
 <template>
-  <CustomCell title="请点击评分">
-    <t-rate v-model="value" clearable :gap="defaultGap" @change="changeValue" />
+  <CustomCell title="实心评分">
+    <t-rate v-model="value" @change="changeValue" />
   </CustomCell>
 </template>
 
@@ -11,6 +11,5 @@ import CustomCell from './components/custom-cell.vue';
 const changeValue = (val: Number) => {
   console.log('current value is', val);
 };
-const defaultGap = 8;
 const value = ref(3);
 </script>

src/rate/demos/color.vue

@@ -1,18 +1,17 @@
 <template>
-  <CustomCell title="空心评分" class="space">
-    <t-rate v-model="value1" variant="outline" clearable :color="['#FFC51C', '#E8E8E8']" :gap="defaultGap" />
+  <CustomCell title="填充评分" class="space">
+    <t-rate v-model="value1" allow-half :color="['#FFC51C', '#E8E8E8']" />
   </CustomCell>
-  <CustomCell title="实心评分" class="space">
-    <t-rate v-model="value" clearable allow-half :color="['#FFC51C', '#E8E8E8']" :gap="defaultGap" />
+  <CustomCell title="线描评分" class="space">
+    <t-rate v-model="value" allow-half color="#00A870" :icon="['star-filled', 'star']" />
   </CustomCell>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import CustomCell from './components/custom-cell.vue';
 
-const defaultGap = 8;
-const value = ref(2.5);
+const value = ref(2);
 const value1 = ref(3);
 </script>
 <style lang="less" scoped>

src/rate/demos/count.vue

@@ -1,13 +1,12 @@
 <template>
-  <CustomCell title="自定义数量">
-    <t-rate v-model="value" :count="4" clearable :gap="defaultGap" />
+  <CustomCell title="自定义评分数量">
+    <t-rate v-model="value" :count="3" />
   </CustomCell>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import CustomCell from './components/custom-cell.vue';
 
-const defaultGap = 8;
-const value = ref(3);
+const value = ref(2);
 </script>

src/rate/demos/custom.vue

@@ -0,0 +1,15 @@
+<template>
+  <CustomCell title="自定义评分">
+    <t-rate v-model="value" icon="thumb-up" @change="changeValue" />
+  </CustomCell>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import CustomCell from './components/custom-cell.vue';
+
+const changeValue = (val: Number) => {
+  console.log('current value is', val);
+};
+const value = ref(3);
+</script>

src/rate/demos/mobile.vue

@@ -2,46 +2,43 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Rate 评分</h1>
     <p class="summary">用于对某行为/事物进行打分。</p>
-    <tdesign-demo-block title="01 类型" summary="实心评分">
-      <FilledDemo />
+    <br />
+    <tdesign-demo-block title="01 组件类型" summary="实心评分">
+      <BaseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="空心评分">
-      <OutlineDemo />
+    <tdesign-demo-block summary="自定义评分">
+      <CustomDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="自定义数量评分">
+    <tdesign-demo-block summary="自定义评分数量">
       <CountDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="半星评分">
-      <AllowHalfDemo />
-    </tdesign-demo-block>
     <tdesign-demo-block summary="带描述评分">
-      <TextDemo />
+      <ShowTextDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="02 组件状态">
+      <ActionDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="禁用评分">
-      <DisabledDemo />
+    <tdesign-demo-block title="03 组件样式" summary="评分大小">
+      <SizeDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="设置评分颜色">
       <ColorDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 规格" summary="评价规格">
-      <SizeDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="自定义图标评分">
-      <IconDemo />
+    <tdesign-demo-block title="04 特殊样式" summary="竖向带描述评分">
+      <SpecialDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import IconDemo from './icon.vue';
+import BaseDemo from './base.vue';
+import CustomDemo from './custom.vue';
+import CountDemo from './count.vue';
+import ShowTextDemo from './show-text.vue';
+import ActionDemo from './action.vue';
 import SizeDemo from './size.vue';
 import ColorDemo from './color.vue';
-import DisabledDemo from './disabled.vue';
-import CountDemo from './count.vue';
-import FilledDemo from './filled.vue';
-import OutlineDemo from './outline.vue';
-import TextDemo from './text.vue';
-import AllowHalfDemo from './allow-half.vue';
+import SpecialDemo from './special.vue';
 </script>
 
 <style lang="less">