feat: Rate component

src-next/rate/README.md

@@ -0,0 +1,123 @@
+# Rate
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Rate } from 'vant';
+
+Vue.use(Rate);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-rate v-model="value" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: 3,
+    };
+  },
+};
+```
+
+### Custom Icon
+
+```html
+<van-rate v-model="value" icon="like" void-icon="like-o" />
+```
+
+### Custom Style
+
+```html
+<van-rate
+  v-model="value"
+  :size="25"
+  color="#ffd21e"
+  void-icon="star"
+  void-color="#eee"
+/>
+```
+
+### Half Star
+
+```html
+<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: 2.5,
+    };
+  },
+};
+```
+
+### Custom Count
+
+```html
+<van-rate v-model="value" :count="6" />
+```
+
+### Disabled
+
+```html
+<van-rate v-model="value" disabled />
+```
+
+### Readonly
+
+```html
+<van-rate v-model="value" readonly />
+```
+
+### Change Event
+
+```html
+<van-rate v-model="value" @change="onChange" />
+```
+
+```javascript
+export default {
+  method: {
+    onChange(value) {
+      Toast('current value:' + value);
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Current rate | _number_ | - |
+| count | Count | _number \| string_ | `5` |
+| size | Icon size | _number \| string_ | `20px` |
+| gutter | Icon gutter | _number \| string_ | `4px` |
+| color | Selected color | _string_ | `#ee0a24` |
+| void-color | Void color | _string_ | `#c8c9cc` |
+| disabled-color | Disabled color | _string_ | `#c8c9cc` |
+| icon | Selected icon | _string_ | `star` |
+| void-icon | Void icon | _string_ | `star-o` |
+| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
+| allow-half | Whether to allow half star | _boolean_ | `false` |
+| readonly | Whether to be readonly | _boolean_ | `false` |
+| disabled | Whether to disable rate | _boolean_ | `false` |
+| touchable `v2.2.0` | Whether to allow select rate by touch gesture | _boolean_ | `true` |
+
+### Events
+
+| Event  | Description                 | Parameters   |
+| ------ | --------------------------- | ------------ |
+| change | Triggered when rate changed | current rate |

src-next/rate/README.zh-CN.md

@@ -0,0 +1,123 @@
+# Rate 评分
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Rate } from 'vant';
+
+Vue.use(Rate);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<van-rate v-model="value" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: 3,
+    };
+  },
+};
+```
+
+### 自定义图标
+
+```html
+<van-rate v-model="value" icon="like" void-icon="like-o" />
+```
+
+### 自定义样式
+
+```html
+<van-rate
+  v-model="value"
+  :size="25"
+  color="#ffd21e"
+  void-icon="star"
+  void-color="#eee"
+/>
+```
+
+### 半星
+
+```html
+<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: 2.5,
+    };
+  },
+};
+```
+
+### 自定义数量
+
+```html
+<van-rate v-model="value" :count="6" />
+```
+
+### 禁用状态
+
+```html
+<van-rate v-model="value" disabled />
+```
+
+### 只读状态
+
+```html
+<van-rate v-model="value" readonly />
+```
+
+### 监听 change 事件
+
+```html
+<van-rate v-model="value" @change="onChange" />
+```
+
+```javascript
+export default {
+  method: {
+    onChange(value) {
+      Toast('当前值：' + value);
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前分值 | _number_ | - |
+| count | 图标总数 | _number \| string_ | `5` |
+| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
+| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
+| color | 选中时的颜色 | _string_ | `#ee0a24` |
+| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
+| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
+| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
+| void-icon | 未选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star-o` |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| allow-half | 是否允许半选 | _boolean_ | `false` |
+| readonly | 是否为只读状态  | _boolean_ | `false` |
+| disabled | 是否禁用评分 | _boolean_ | `false` |
+| touchable `v2.2.0` | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
+
+### Events
+
+| 事件名 | 说明                     | 回调参数 |
+| ------ | ------------------------ | -------- |
+| change | 当前分值变化时触发的事件 | 当前分值 |

src-next/rate/demo/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-rate v-model="value1" />
+    </demo-block>
+
+    <demo-block :title="t('customIcon')">
+      <van-rate v-model="value2" icon="like" void-icon="like-o" />
+    </demo-block>
+
+    <demo-block :title="t('customStyle')">
+      <van-rate
+        v-model="value3"
+        :size="25"
+        color="#ffd21e"
+        void-icon="star"
+        void-color="#eee"
+      />
+    </demo-block>
+
+    <demo-block :title="t('halfStar')">
+      <van-rate
+        v-model="value4"
+        :size="25"
+        allow-half
+        void-icon="star"
+        void-color="#eee"
+      />
+    </demo-block>
+
+    <demo-block :title="t('customCount')">
+      <van-rate v-model="value5" :count="6" />
+    </demo-block>
+
+    <demo-block :title="t('disabled')">
+      <van-rate v-model="value6" disabled />
+    </demo-block>
+
+    <demo-block :title="t('readonly')">
+      <van-rate v-model="value6" readonly />
+    </demo-block>
+
+    <demo-block v-if="!isWeapp" :title="t('changeEvent')">
+      <van-rate v-model="value7" @change="onChange" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      halfStar: '半星',
+      disabled: '禁用状态',
+      customIcon: '自定义图标',
+      customStyle: '自定义样式',
+      customCount: '自定义数量',
+      readonly: '只读状态',
+      changeEvent: '监听 change 事件',
+      toastContent: (value) => `当前值：${value}`,
+    },
+    'en-US': {
+      halfStar: 'Half Star',
+      disabled: 'Disabled',
+      customIcon: 'Custom Icon',
+      customStyle: 'Custom Style',
+      customCount: 'Custom Count',
+      readonly: 'Readonly',
+      changeEvent: 'Change Event',
+      toastContent: (value) => `current value：${value}`,
+    },
+  },
+
+  data() {
+    return {
+      value1: 3,
+      value2: 3,
+      value3: 3,
+      value4: 2.5,
+      value5: 4,
+      value6: 3,
+      value7: 2,
+    };
+  },
+
+  methods: {
+    onChange(value) {
+      this.value7 = value;
+      this.$toast(this.t('toastContent', value));
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-rate {
+  padding-bottom: 20px;
+  background-color: #fff;
+
+  .van-rate {
+    margin-left: @padding-md;
+  }
+}
+</style>

src-next/rate/index.js

@@ -0,0 +1,221 @@
+// Utils
+import { createNamespace, addUnit } from '../utils';
+import { preventDefault } from '../utils/dom/event';
+
+// Mixins
+import { TouchMixin } from '../mixins/touch';
+import { FieldMixin } from '../mixins/field';
+
+// Components
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('rate');
+
+function getRateStatus(value, index, allowHalf) {
+  if (value >= index) {
+    return 'full';
+  }
+
+  if (value + 0.5 >= index && allowHalf) {
+    return 'half';
+  }
+
+  return 'void';
+}
+
+export default createComponent({
+  mixins: [TouchMixin, FieldMixin],
+
+  props: {
+    size: [Number, String],
+    color: String,
+    gutter: [Number, String],
+    readonly: Boolean,
+    disabled: Boolean,
+    allowHalf: Boolean,
+    voidColor: String,
+    iconPrefix: String,
+    disabledColor: String,
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    icon: {
+      type: String,
+      default: 'star',
+    },
+    voidIcon: {
+      type: String,
+      default: 'star-o',
+    },
+    count: {
+      type: [Number, String],
+      default: 5,
+    },
+    touchable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  created() {
+    this.itemRefs = [];
+  },
+
+  computed: {
+    list() {
+      const list = [];
+      for (let i = 1; i <= this.count; i++) {
+        list.push(getRateStatus(this.modelValue, i, this.allowHalf));
+      }
+
+      return list;
+    },
+
+    sizeWithUnit() {
+      return addUnit(this.size);
+    },
+
+    gutterWithUnit() {
+      return addUnit(this.gutter);
+    },
+  },
+
+  mounted() {
+    this.bindTouchEvent(this.$el);
+  },
+
+  methods: {
+    select(index) {
+      if (!this.disabled && !this.readonly && index !== this.modelValue) {
+        this.$emit('update:modelValue', index);
+        this.$emit('change', index);
+      }
+    },
+
+    onTouchStart(event) {
+      if (this.readonly || this.disabled || !this.touchable) {
+        return;
+      }
+
+      this.touchStart(event);
+
+      const rects = this.itemRefs.map((item) => item.getBoundingClientRect());
+      const ranges = [];
+
+      rects.forEach((rect, index) => {
+        if (this.allowHalf) {
+          ranges.push(
+            { score: index + 0.5, left: rect.left },
+            { score: index + 1, left: rect.left + rect.width / 2 }
+          );
+        } else {
+          ranges.push({ score: index + 1, left: rect.left });
+        }
+      });
+
+      this.ranges = ranges;
+    },
+
+    onTouchMove(event) {
+      if (this.readonly || this.disabled || !this.touchable) {
+        return;
+      }
+
+      this.touchMove(event);
+
+      if (this.direction === 'horizontal') {
+        preventDefault(event);
+
+        const { clientX } = event.touches[0];
+        this.select(this.getScoreByPosition(clientX));
+      }
+    },
+
+    getScoreByPosition(x) {
+      for (let i = this.ranges.length - 1; i > 0; i--) {
+        if (x > this.ranges[i].left) {
+          return this.ranges[i].score;
+        }
+      }
+
+      return this.allowHalf ? 0.5 : 1;
+    },
+
+    genStar(status, index) {
+      const {
+        icon,
+        color,
+        count,
+        voidIcon,
+        disabled,
+        voidColor,
+        disabledColor,
+      } = this;
+      const score = index + 1;
+      const isFull = status === 'full';
+      const isVoid = status === 'void';
+
+      let style;
+      if (this.gutterWithUnit && score !== +count) {
+        style = { paddingRight: this.gutterWithUnit };
+      }
+
+      return (
+        <div
+          key={index}
+          ref={(val) => {
+            this.itemRefs[index] = val;
+          }}
+          role="radio"
+          style={style}
+          tabindex="0"
+          aria-setsize={count}
+          aria-posinset={score}
+          aria-checked={String(!isVoid)}
+          class={bem('item')}
+        >
+          <Icon
+            size={this.sizeWithUnit}
+            name={isFull ? icon : voidIcon}
+            class={bem('icon', { disabled, full: isFull })}
+            color={disabled ? disabledColor : isFull ? color : voidColor}
+            classPrefix={this.iconPrefix}
+            data-score={score}
+            onClick={() => {
+              this.select(score);
+            }}
+          />
+          {this.allowHalf && (
+            <Icon
+              size={this.sizeWithUnit}
+              name={isVoid ? voidIcon : icon}
+              class={bem('icon', ['half', { disabled, full: !isVoid }])}
+              color={disabled ? disabledColor : isVoid ? voidColor : color}
+              classPrefix={this.iconPrefix}
+              data-score={score - 0.5}
+              onClick={() => {
+                this.select(score - 0.5);
+              }}
+            />
+          )}
+        </div>
+      );
+    },
+  },
+
+  render() {
+    return (
+      <div
+        class={bem({
+          readonly: this.readonly,
+          disabled: this.disabled,
+        })}
+        tabindex="0"
+        role="radiogroup"
+      >
+        {this.list.map((status, index) => this.genStar(status, index))}
+      </div>
+    );
+  },
+});

src-next/rate/index.less

@@ -0,0 +1,46 @@
+@import '../style/var';
+
+.van-rate {
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+
+  &__item {
+    position: relative;
+
+    &:not(:last-child) {
+      padding-right: @rate-icon-gutter;
+    }
+  }
+
+  &__icon {
+    display: block;
+    width: 1em;
+    color: @rate-icon-void-color;
+    font-size: @rate-icon-size;
+
+    &--half {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0.5em;
+      overflow: hidden;
+    }
+
+    &--full {
+      color: @rate-icon-full-color;
+    }
+
+    &--disabled {
+      color: @rate-icon-disabled-color;
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    cursor: default;
+  }
+}

src-next/rate/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
+          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
+          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i><i data-score="4.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+          <!----></i></div>
+    </div>
+  </div>
+</div>
+`;

src-next/rate/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gutter prop 1`] = `
+<div tabindex="0" role="radiogroup" class="van-rate">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
+      <!----></i></div>
+</div>
+`;
+
+exports[`size prop 1`] = `
+<div tabindex="0" role="radiogroup" class="van-rate">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
+      <!----></i></div>
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
+      <!----></i></div>
+</div>
+`;

src-next/rate/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src-next/rate/test/index.spec.js

@@ -0,0 +1,154 @@
+import Rate from '..';
+import { mount, triggerDrag } from '../../../test';
+
+function mockGetBoundingClientRect(items) {
+  items.filter((icon, index) => {
+    icon.element.getBoundingClientRect = () => ({
+      left: index * 25,
+      width: 25,
+    });
+    return true;
+  });
+}
+
+test('change event', () => {
+  const onInput = jest.fn();
+  const onChange = jest.fn();
+
+  const wrapper = mount(Rate, {
+    listeners: {
+      input: (value) => {
+        onInput(value);
+        wrapper.setProps({ value });
+      },
+      change: onChange,
+    },
+  });
+  const item4 = wrapper.findAll('.van-rate__icon').at(3);
+
+  item4.trigger('click');
+  item4.trigger('click');
+
+  expect(onInput).toHaveBeenCalledWith(4);
+  expect(onInput).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenCalledWith(4);
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test('allow half', () => {
+  const onInput = jest.fn();
+  const onChange = jest.fn();
+
+  const wrapper = mount(Rate, {
+    propsData: {
+      allowHalf: true,
+    },
+    listeners: {
+      input: onInput,
+      change: onChange,
+    },
+  });
+  const item4 = wrapper.findAll('.van-rate__icon--half').at(3);
+
+  item4.trigger('click');
+  expect(onInput).toHaveBeenCalledWith(3.5);
+  expect(onChange).toHaveBeenCalledWith(3.5);
+});
+
+test('disabled', () => {
+  const onInput = jest.fn();
+  const onChange = jest.fn();
+
+  const wrapper = mount(Rate, {
+    propsData: {
+      disabled: true,
+    },
+    listeners: {
+      input: onInput,
+      change: onChange,
+    },
+  });
+  const item4 = wrapper.findAll('.van-rate__item').at(3);
+
+  triggerDrag(wrapper, 100, 0);
+  item4.trigger('click');
+
+  expect(onInput).toHaveBeenCalledTimes(0);
+  expect(onChange).toHaveBeenCalledTimes(0);
+});
+
+test('touchmove to select item', () => {
+  const onChange = jest.fn();
+  const wrapper = mount(Rate, {
+    listeners: {
+      change: onChange,
+    },
+  });
+
+  const icons = wrapper.findAll('.van-rate__item');
+
+  mockGetBoundingClientRect(icons);
+  triggerDrag(wrapper, 100, 0);
+
+  expect(onChange).toHaveBeenNthCalledWith(1, 1);
+  expect(onChange).toHaveBeenNthCalledWith(2, 2);
+  expect(onChange).toHaveBeenNthCalledWith(3, 2);
+  expect(onChange).toHaveBeenNthCalledWith(4, 4);
+});
+
+test('touchmove to select half item', () => {
+  const onChange = jest.fn();
+  const wrapper = mount(Rate, {
+    propsData: {
+      allowHalf: true,
+    },
+    listeners: {
+      change: onChange,
+    },
+  });
+
+  const icons = wrapper.findAll('.van-rate__item');
+
+  mockGetBoundingClientRect(icons);
+  triggerDrag(wrapper, 100, 0);
+
+  expect(onChange).toHaveBeenNthCalledWith(1, 1);
+  expect(onChange).toHaveBeenNthCalledWith(2, 1.5);
+  expect(onChange).toHaveBeenNthCalledWith(3, 2);
+  expect(onChange).toHaveBeenNthCalledWith(4, 4);
+});
+
+test('gutter prop', () => {
+  const wrapper = mount(Rate, {
+    propsData: {
+      gutter: 10,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('size prop', () => {
+  const wrapper = mount(Rate, {
+    propsData: {
+      size: '2rem',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('untouchable', () => {
+  const onChange = jest.fn();
+  const wrapper = mount(Rate, {
+    propsData: {
+      touchable: false,
+    },
+    listeners: {
+      change: onChange,
+    },
+  });
+
+  triggerDrag(wrapper, 100, 0);
+  expect(onChange).toHaveBeenCalledTimes(0);
+});

vant.config.js

@@ -151,10 +151,10 @@ module.exports = {
               //   path: 'radio',
               //   title: 'Radio 单选框',
               // },
-              // {
-              //   path: 'rate',
-              //   title: 'Rate 评分',
-              // },
+              {
+                path: 'rate',
+                title: 'Rate 评分',
+              },
               // {
               //   path: 'search',
               //   title: 'Search 搜索',
@@ -485,10 +485,10 @@ module.exports = {
               //   path: 'radio',
               //   title: 'Radio',
               // },
-              // {
-              //   path: 'rate',
-              //   title: 'Rate',
-              // },
+              {
+                path: 'rate',
+                title: 'Rate',
+              },
               // {
               //   path: 'search',
               //   title: 'Search',