[Improvement] Rate: rename component (#1002)

packages/rate/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :class="b()">
+    <div
+      :class="b('item')"
+      v-for="(isFull, index) in starList"
+      :key="index"
+      :style="{
+        'width': `${size}px`
+      }"
+      @click="selectRate(index)"
+    >
+      <svg
+        v-if="isFull"
+        :fill="disabled ? defaultColor : color"
+        viewBox="0 0 32 32"
+        width="100%"
+        height="100%"
+      >
+        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"/>
+      </svg>
+      <svg
+        v-else
+        :fill="defaultColor"
+        viewBox="0 0 32 32"
+      >
+        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"/>
+      </svg>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import create from '../utils/create';
+
+export default create({
+  name: 'rate',
+
+  props: {
+    size: {
+      type: Number,
+      default: 20
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: '#ffd21e'
+    },
+    defaultColor: {
+      type: String,
+      default: '#c7c7c7'
+    },
+    disabledColor: {
+      type: String,
+      default: '#bdbdbd'
+    },
+    total: {
+      type: Number,
+      default: 5
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    starList() {
+      return new Array(this.total).fill(false).map((value, index) => index < this.value);
+    }
+  },
+
+  methods: {
+    selectRate(index) {
+      if (!this.disabled) {
+        this.$emit('input', index + 1);
+      }
+    }
+  }
+});
+</script>