Merge pull request #75 from Leopoldthecoder/next

add rate

components.json

@@ -151,5 +151,8 @@
   ],
   "card": [
     "./packages/card/index.js"
+  ],
+  "rate": [
+    "./packages/rate/index.js"
   ]
 }

examples/app.vue

@@ -4,6 +4,7 @@
   @import '../node_modules/purecss/build/menus.css';
   @import '../node_modules/highlight.js/styles/color-brewer.css';
   @import 'assets/styles/common.css';
+  @import 'assets/styles/fonts/style.css';
 
   html, body {
     margin: 0;

examples/assets/styles/fonts/icomoon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="rate-face-off" d="M0 448c0 282.766 229.234 512 512 512s512-229.234 512-512c0-282.766-229.234-512-512-512s-512 229.234-512 512zM947.2 448c0 240.351-194.849 435.2-435.2 435.2s-435.2-194.849-435.2-435.2c0-240.351 194.849-435.2 435.2-435.2s435.2 194.849 435.2 435.2zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
+<glyph unicode="&#xe901;" glyph-name="rate-face-1" d="M512.001 960c-282.771 0-512.001-229.23-512.001-512.002 0-282.77 229.23-511.998 512.001-511.998 282.769 0 511.999 229.227 511.999 511.998s-229.23 512.002-511.999 512.002zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM694.529 181.197l-3.422 1.216c-56.15 27.872-116.388 42.047-178.882 42.047-64.556 0-125.611-14.316-181.515-42.45l-3.382-1.132c-2.102-0.628-4.945-1.529-8.489-1.529-20.554 0-37.239 18.29-37.239 40.734 0 10.655 4.571 21.361 12.114 29.399l-0.456 2.483 9.516 4.698c66.74 33.104 139.336 50.537 209.907 50.537 71.889 0 142.336-16.984 210.314-50.948 11.943-7.181 19.405-20.953 19.405-35.903 0-26.328-21.71-47.958-47.871-39.153z" />
+<glyph unicode="&#xe902;" glyph-name="rate-face-2" d="M512-64c-282.766 0-512 229.234-512 512s229.234 512 512 512c282.766 0 512-229.234 512-512s-229.234-512-512-512zM294.4 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM627.2 588.853v-51.307c0-28.482 22.923-51.147 51.2-51.147 28.474 0 51.2 22.899 51.2 51.147v51.307c0 28.482-22.923 51.147-51.2 51.147-28.474 0-51.2-22.899-51.2-51.147zM361.143 281.6c-22.711 0-41.143-18.637-41.143-41.6s18.432-41.6 41.143-41.6h301.714c22.711 0 41.143 18.637 41.143 41.6s-18.432 41.6-41.143 41.6h-301.714z" />
+<glyph unicode="&#xe903;" glyph-name="rate-face-3" d="M512.001 960c-282.77 0-512.001-229.23-512.001-511.999s229.23-512.001 512.001-512.001c282.77 0 511.999 229.23 511.999 511.999s-229.229 512.001-511.999 512.001zM817.495 305.565c-0.445-1.485-0.963-2.939-1.569-4.35-0.676-1.572-1.455-3.089-2.317-4.556-55.631-107.613-169.518-181.459-301.323-181.459-0.096 0-0.19 0.002-0.286 0.002s-0.19-0.002-0.286-0.002c-131.804 0-245.693 73.845-301.323 181.459-0.862 1.467-1.641 2.984-2.317 4.556-0.606 1.41-1.124 2.865-1.569 4.35-1.103 3.68-1.705 7.569-1.705 11.597 0 6.566 1.579 12.771 4.372 18.282 6.897 13.601 21.239 22.955 37.822 22.955s30.927-9.355 37.823-22.955h0.676c41.411-81.453 127.131-137.544 226.507-137.652 99.375 0.108 185.095 56.2 226.507 137.652h0.676c6.897 13.601 21.239 22.955 37.823 22.955s30.927-9.355 37.822-22.955c2.794-5.511 4.372-11.715 4.372-18.282 0-4.029-0.602-7.918-1.705-11.597zM627.2 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307zM294.4 588.853c0 28.247 22.726 51.147 51.2 51.147 28.277 0 51.2-22.664 51.2-51.147v-51.307c0-28.247-22.726-51.147-51.2-51.147-28.277 0-51.2 22.664-51.2 51.147v51.307z" />
+</font></defs></svg>

examples/assets/styles/fonts/style.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm');
+  src:  url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
+    url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'),
+    url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'),
+    url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-rate-face-off:before {
+  content: "\e900";
+}
+.icon-rate-face-1:before {
+  content: "\e901";
+}
+.icon-rate-face-2:before {
+  content: "\e902";
+}
+.icon-rate-face-3:before {
+  content: "\e903";
+}
+

examples/docs/rate.md

@@ -0,0 +1,102 @@
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null,
+        value3: null,
+        value4: null,
+        value5: 3.7
+      };
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-rate {
+    margin: 20px 0;
+  }
+</style>
+## 基础用法
+
+<div class="demo-box demo-rate">
+  <el-rate v-model="value1"></el-rate>
+</div>
+
+``` html
+<el-rate v-model="value1"></el-rate>
+```
+
+## 区分颜色
+
+利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
+
+<div class="demo-box demo-rate">
+  <el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+</div>
+
+``` html
+<el-rate v-model="value2" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+```
+
+## 辅助文字
+
+为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
+
+<div class="demo-box demo-rate">
+  <el-rate v-model="value3" show-text></el-rate>
+</div>
+
+``` html
+<el-rate v-model="value3" show-text></el-rate>
+```
+
+## 其他 icon
+
+<div class="demo-box demo-rate">
+  <el-rate v-model="value4" :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']" void-icon-class="icon-rate-face-off" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+</div>
+
+``` html
+<el-rate
+  v-model="value4"
+  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  void-icon-class="icon-rate-face-off"
+  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+</el-rate>
+```
+
+## 只读
+为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
+
+<div class="demo-box demo-rate">
+  <el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
+</div>
+
+``` html
+<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value} 分"></el-rate>
+```
+## Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| v-model | 绑定值 | Number | | 0 |
+| max | 最大分值 | Number | | 5 |
+| disabled | 是否为只读 | Boolean | | false |
+| allow-half | 是否允许半选 | Boolean | | false |
+| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 |
+| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 |
+| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | Array | | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | 未选中 icon 的颜色 | String | | '#C6D1DE' |
+| disabled-void-color | 只读时未选中 icon 的颜色 | String | | '#EFF2F7' |
+| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | Array | | ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] |
+| void-icon-class | 未选中 icon 的类名 | String | | 'el-icon-star-off' |
+| disabled-void-icon-class | 只读时未选中 icon 的类名 | String | | 'el-icon-star-on' |
+| show-text | 是否显示辅助文字 | Boolean | | false |
+| text-color | 辅助文字的颜色 | String | | '1F2D3D' |
+| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] |
+| text-template | 只读时的辅助文字模板 | String | | '{value}' |
+
+## Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change | 分值改变时触发 | 改变后的分值 |
+

examples/icon.json

@@ -1 +1 @@
-["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"]
+["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]

examples/nav.config.json

@@ -178,6 +178,11 @@
         "name": "滑块 (slider)",
         "title": "slider 滑块",
         "description": "通过拖动滑块在一个固定区间内进行选择"
+      },
+      {
+        "path": "/rate",
+        "name": "评分 (rate)",
+        "title": "评分组件"
       }
     ]
   },

packages/rate/cooking.conf.js

@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElRate',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();

packages/rate/index.js

@@ -0,0 +1,7 @@
+const Rate = require('./src/main');
+
+Rate.install = function(Vue) {
+  Vue.component(Rate.name, Rate);
+};
+
+module.exports = Rate;

packages/rate/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "el-rate",
+  "version": "0.0.0",
+  "description": "A rate component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/rate",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}

packages/rate/src/main.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="el-rate">
+    <span
+      v-for="item in max"
+      class="el-rate__item"
+      @mousemove="setCurrentValue(item, $event)"
+      @mouseleave="resetCurrentValue"
+      @click="selectValue(item)"
+      :style="{ cursor: disabled ? 'auto' : 'pointer' }">
+      <i
+        :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
+        class="el-rate__icon"
+        :style="getIconStyle(item)">
+        <i
+          v-if="showDecimalIcon(item)"
+          :class="decimalIconClass"
+          :style="decimalStyle"
+          class="el-rate__decimal">
+        </i>
+      </i>
+    </span>
+    <span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
+  </div>
+</template>
+
+<script type="text/babel">
+  export default {
+    name: 'el-rate',
+
+    data() {
+      return {
+        classMap: {},
+        colorMap: {},
+        classes: null,
+        pointerAtLeftHalf: false,
+        currentValue: this.value,
+        hoverIndex: -1
+      };
+    },
+
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+      lowThreshold: {
+        type: Number,
+        default: 2
+      },
+      highThreshold: {
+        type: Number,
+        default: 4
+      },
+      max: {
+        type: Number,
+        default: 5
+      },
+      colors: {
+        type: Array,
+        default() {
+          return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
+        }
+      },
+      voidColor: {
+        type: String,
+        default: '#C6D1DE'
+      },
+      disabledVoidColor: {
+        type: String,
+        default: '#EFF2F7'
+      },
+      iconClasses: {
+        type: Array,
+        default() {
+          return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
+        }
+      },
+      voidIconClass: {
+        type: String,
+        default: 'el-icon-star-off'
+      },
+      disabledVoidIconClass: {
+        type: String,
+        default: 'el-icon-star-on'
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+      showText: {
+        type: Boolean,
+        default: false
+      },
+      textColor: {
+        type: String,
+        default: '1f2d3d'
+      },
+      texts: {
+        type: Array,
+        default() {
+          return ['极差', '失望', '一般', '满意', '惊喜'];
+        }
+      },
+      textTemplate: {
+        type: String,
+        default: '{value}'
+      }
+    },
+
+    computed: {
+      text() {
+        let result = '';
+        if (this.disabled) {
+          result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
+        } else {
+          result = this.texts[Math.ceil(this.currentValue) - 1];
+        }
+        return result;
+      },
+
+      decimalStyle() {
+        let width = '';
+        if (this.disabled) {
+          width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
+        }
+        if (this.allowHalf) {
+          width = '50%';
+        }
+        return {
+          color: this.activeColor,
+          width
+        };
+      },
+
+      valueDecimal() {
+        return this.value * 100 - Math.floor(this.value) * 100;
+      },
+
+      decimalIconClass() {
+        return this.getValueFromMap(this.value, this.classMap);
+      },
+
+      voidClass() {
+        return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
+      },
+
+      activeClass() {
+        return this.getValueFromMap(this.currentValue, this.classMap);
+      },
+
+      activeColor() {
+        return this.getValueFromMap(this.currentValue, this.colorMap);
+      },
+
+      classes() {
+        let result = [];
+        let i = 0;
+        let threshold = this.currentValue;
+        if (this.allowHalf && this.currentValue !== Math.floor(this.currentValue)) {
+          threshold--;
+        }
+        for (; i < threshold; i++) {
+          result.push(this.activeClass);
+        }
+        for (; i < this.max; i++) {
+          result.push(this.voidClass);
+        }
+        return result;
+      }
+    },
+
+    watch: {
+      value(val) {
+        this.$emit('change', val);
+        this.currentValue = val;
+      }
+    },
+
+    methods: {
+      getValueFromMap(value, map) {
+        let result = '';
+        if (value <= this.lowThreshold) {
+          result = map.lowColor || map.lowClass;
+        } else if (value >= this.highThreshold) {
+          result = map.highColor || map.highClass;
+        } else {
+          result = map.mediumColor || map.mediumClass;
+        }
+        return result;
+      },
+
+      showDecimalIcon(item) {
+        let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
+        let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toString() === this.currentValue.toString());
+        return showWhenDisabled || showWhenAllowHalf;
+      },
+
+      getIconStyle(item) {
+        const voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        return {
+          color: item <= this.currentValue ? this.activeColor : voidColor
+        };
+      },
+
+      selectValue(value) {
+        if (this.disabled) {
+          return;
+        }
+        if (this.allowHalf && this.pointerAtLeftHalf) {
+          this.$emit('input', this.currentValue);
+        } else {
+          this.$emit('input', value);
+        }
+      },
+
+      setCurrentValue(value, event) {
+        if (this.disabled) {
+          return;
+        }
+        if (this.allowHalf) {
+          let target = event.target;
+          if (target.classList.contains('el-rate__item')) {
+            target = target.querySelector('.el-rate__icon');
+          }
+          if (target.classList.contains('el-rate__decimal')) {
+            target = target.parentNode;
+          }
+          this.pointerAtLeftHalf = event.offsetX * 2 <= target.clientWidth;
+          this.currentValue = this.pointerAtLeftHalf ? value - 0.5 : value;
+        } else {
+          this.currentValue = value;
+        }
+        this.hoverIndex = value;
+      },
+
+      resetCurrentValue() {
+        if (this.disabled) {
+          return;
+        }
+        if (this.allowHalf) {
+          this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+        }
+        this.currentValue = this.value;
+        this.hoverIndex = -1;
+      }
+    },
+
+    created() {
+      if (!this.value) {
+        this.$emit('input', 0);
+      }
+      this.classMap = {
+        lowClass: this.iconClasses[0],
+        mediumClass: this.iconClasses[1],
+        highClass: this.iconClasses[2],
+        voidClass: this.voidIconClass,
+        disabledVoidClass: this.disabledVoidIconClass
+      };
+      this.colorMap = {
+        lowColor: this.colors[0],
+        mediumColor: this.colors[1],
+        highColor: this.colors[2],
+        voidColor: this.voidColor,
+        disabledVoidColor: this.disabledVoidColor
+      };
+    }
+  };
+</script>

packages/select/src/select.vue

@@ -190,8 +190,6 @@
       },
 
       value(val) {
-        this.$emit('input', val);
-        this.$emit('change', val);
         if (this.valueChangeBySelected) {
           this.valueChangeBySelected = false;
           return;
@@ -486,6 +484,7 @@
         this.selected = {};
         this.selectedLabel = '';
         this.$emit('input', '');
+        this.$emit('change', '');
         this.visible = false;
       },
 

packages/theme-default/src/fonts/element-icons.svg

@@ -39,9 +39,8 @@
 <glyph unicode="&#xe91d;" glyph-name="caret-bottom" d="M409.826 240.51c37.19-36.187 97.855-35.83 134.678 0l367.178 357.276c73.495 71.513 49.602 129.486-53.106 129.486h-762.822c-102.825 0-126.512-58.060-53.106-129.486l367.178-357.276z" />
 <glyph unicode="&#xe91e;" glyph-name="edit" d="M84.186 243.909l-84.186-307.909 306.998 85.375 484.852 484.209-225.523 219.804-482.141-481.48zM755.070 913.917l-120.787-120.643 226.275-219.096 117.282 117.171c61.546 61.477 61.546 161.098 0 222.569-61.532 61.443-161.309 61.443-222.77 0z" />
 <glyph unicode="&#xe91f;" glyph-name="caret-top" d="M409.826 700.266c37.19 36.187 97.855 35.83 134.678 0l367.178-357.276c73.495-71.513 49.602-129.486-53.106-129.486h-762.822c-102.825 0-126.512 58.060-53.106 129.486l367.178 357.276z" />
-<glyph unicode="&#xe920;" glyph-name="check" d="M361.151 322.144l482.718 482.718 120.68-120.68-603.398-603.398-301.699 301.699 120.68 120.68 181.019-181.019z" />
+<glyph unicode="&#xe920;" glyph-name="check" horiz-adv-x="1365" d="M569.942 138.091c-19.251 0-38.43 7.354-53.122 21.979l-300.554 300.519c-29.301 29.327-29.301 76.928 0 106.265 29.373 29.327 76.95 29.327 106.25 0l247.431-247.392 472.796 472.724c29.301 29.412 76.874 29.412 106.25 0 29.301-29.327 29.301-76.856 0-106.182l-525.913-525.94c-14.686-14.631-33.941-21.979-53.122-21.979v0z" />
 <glyph unicode="&#xe921;" glyph-name="minus" d="M78.769 526.769h866.462c43.503 0 78.769-35.266 78.769-78.769s-35.266-78.769-78.769-78.769h-866.462c-43.503 0-78.769 35.266-78.769 78.769s35.266 78.769 78.769 78.769z" />
-<glyph unicode="&#xe922;" glyph-name="truck" d="M794.624 593.76c-5.952 8.896-15.936 14.24-26.624 14.24h-32c-17.696 0-32-14.304-32-32v-192c0-17.696 14.304-32 32-32h128c17.696 0 32 14.304 32 32v48c0 6.304-1.888 12.512-5.376 17.76l-96 144zM864 384h-128v192h32l96-144v-48zM1007.872 469.248l-128 192c-17.856 26.784-47.744 42.752-79.872 42.752h-128v64c0 52.928-43.072 96-96 96h-480c-52.928 0-96-43.072-96-96v-352c0-52.928 43.072-96 96-96v0-96c0-52.928 43.072-96 96-96h36.544c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h169.024c14.304-55.072 64-96 123.488-96 59.424 0 109.12 40.928 123.424 96h36.608c52.928 0 96 43.072 96 96v192c0 19.008-5.568 37.44-16.128 53.248zM96 384c-17.664 0-32 14.304-32 32v352c0 17.696 14.336 32 32 32h480c17.696 0 32-14.304 32-32v-352c0-17.696-14.304-32-32-32h-480zM352.032 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.704-64-64-64zM768 96c-35.36 0-64 28.672-64 64s28.64 64 64 64c35.328 0 64-28.672 64-64s-28.672-64-64-64zM960 224c0-17.696-14.304-32-32-32h-36.576c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-169.024c-14.304 55.072-64 96-123.424 96-59.488 0-109.184-40.928-123.488-96h-36.576c-17.664 0-32 14.304-32 32v96h416c52.928 0 96 43.072 96 96v224h128c10.688 0 20.672-5.344 26.624-14.24l128-192c3.488-5.248 5.376-11.456 5.376-17.76v-192z" />
-<glyph unicode="&#xf104;" glyph-name="angle-left" horiz-adv-x="384" d="M384.002 164.382q0 8.578-6.598 15.176l-259.3 259.3 259.3 259.3q6.598 6.598 6.598 15.176t-6.598 15.176l-32.989 32.989q-6.598 6.598-15.176 6.598t-15.176-6.598l-307.466-307.466q-6.598-6.598-6.598-15.176t6.598-15.176l307.466-307.466q6.598-6.598 15.176-6.598t15.176 6.598l32.989 32.989q6.598 6.598 6.598 15.176z" />
-<glyph unicode="&#xf105;" glyph-name="angle-right" horiz-adv-x="347" d="M340 438.858q0-7.429-5.714-13.143l-266.286-266.286q-5.714-5.714-13.143-5.714t-13.143 5.714l-28.571 28.571q-5.714 5.714-5.714 13.143t5.714 13.143l224.571 224.571-224.571 224.571q-5.714 5.714-5.714 13.143t5.714 13.143l28.571 28.571q5.714 5.714 13.143 5.714t13.143-5.714l266.286-266.286q5.714-5.714 5.714-13.143z" />
+<glyph unicode="&#xe922;" glyph-name="star-off" horiz-adv-x="1084" d="M825.372 4.792c11.209-6.583 20.013-9.895 25.334-10.547-0.549 0.067-4.261-0.73-8.655-3.966-4.353-3.206-6.173-6.426-6.257-6.881 0.983 5.318 0.479 14.719-2.4 27.35l-51.746 227.064c-11.993 52.627 9.088 116.45 49.754 151.782l177.754 154.433c9.58 8.323 15.369 15.433 17.595 20.104-0.315-0.662-0.75-4.594 0.986-9.933 1.72-5.288 4.31-8.134 4.83-8.417-4.693 2.561-13.756 4.994-26.661 6.178l-236.495 21.693c-53.054 4.866-107.438 44.343-128.749 93.284l-93.089 213.779c-5.151 11.829-10.308 19.65-14.256 23.326 0.278-0.259 3.528-1.704 8.715-1.704s8.434 1.445 8.711 1.703c-3.948-3.677-9.105-11.497-14.256-23.325l-93.089-213.779c-21.436-49.228-75.606-88.41-128.749-93.284l-236.495-21.693c-13.088-1.2-22.296-3.654-27.077-6.242 0.519 0.281 3.16 3.163 4.921 8.563 1.781 5.463 1.327 9.479 1.001 10.157 2.276-4.739 8.173-11.955 17.906-20.411l177.754-154.433c40.823-35.468 61.701-99.357 49.754-151.782l-51.746-227.064c-2.867-12.582-3.359-21.928-2.374-27.194-0.091 0.485-1.923 3.707-6.257 6.883-4.342 3.182-7.986 3.963-8.497 3.9 5.298 0.647 14.039 3.93 25.15 10.455l203.441 119.468c46.392 27.243 113.588 27.139 159.802 0l203.441-119.468zM492.632 72.318l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468c-27.282 16.021-71.137 16.243-98.798 0z" />
+<glyph unicode="&#xe923;" glyph-name="star-on" horiz-adv-x="1084" d="M591.429 72.318c-27.282 16.021-71.137 16.243-98.798 0l-203.441-119.468c-72.368-42.497-115.912-10.592-97.253 71.282l51.746 227.064c6.976 30.612-6.362 71.929-30.53 92.926l-177.754 154.433c-63.231 54.935-46.973 105.661 37.252 113.387l236.495 21.693c31.094 2.852 66.301 28.129 79.024 57.349l93.089 213.779c33.562 77.075 87.973 77.083 121.539 0l93.089-213.779c12.55-28.821 47.897-54.494 79.024-57.349l236.495-21.693c83.804-7.687 100.070-58.811 37.252-113.387l-177.754-154.433c-23.838-20.71-37.603-61.891-30.53-92.926l51.746-227.064c18.656-81.865-24.522-113.993-97.253-71.282l-203.441 119.468z" />
 </font></defs></svg>

packages/theme-default/src/icon.css

@@ -1,9 +1,9 @@
 @font-face {
     font-family: 'element-icons';
     src:
-        url('fonts/element-icons.ttf?deq2r7') format('truetype'),
-        url('fonts/element-icons.woff?deq2r7') format('woff'),
-        url('fonts/element-icons.svg?deq2r7#element-icons') format('svg');
+        url('fonts/element-icons.ttf?ld8k1a') format('truetype'),
+        url('fonts/element-icons.woff?ld8k1a') format('woff'),
+        url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -127,15 +127,12 @@
 .el-icon-minus:before {
     content: "\e921";
 }
-.el-icon-angle-left:before {
-    content: "\f104";
-}
-.el-icon-angle-right:before {
-    content: "\f105";
-}
-.el-icon-truck:before {
+.el-icon-star-off:before {
     content: "\e922";
 }
+.el-icon-star-on:before {
+    content: "\e923";
+}
 
 .el-icon-loading {
   animation: rotating 1s linear infinite;

packages/theme-default/src/index.css

@@ -34,3 +34,4 @@
 @import "./spinner.css";
 @import "./badge.css";
 @import "./card.css";
+@import "./rate.css";

packages/theme-default/src/input.css

@@ -19,6 +19,7 @@
       border-radius: 4px;
       transition: var(--border-transition-base);
       outline: none;
+      font-size: inherit;
 
       &::placeholder {
         color: var(--input-placeholder-color);

packages/theme-default/src/rate.css

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b rate {
+    height: 20px;
+    @e item {
+      display: inline-block;
+      position: relative;
+      font-size: 0;
+      vertical-align: middle;
+    }
+
+    @e icon {
+      position: relative;
+      display: inline-block;
+      font-size: 18px;
+      margin-right: 6px;
+      color: #C6D1DE;
+      transition: .3s;
+      &.hover {
+        transform: scale(1.15);
+      }
+
+      .path2 {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+
+    @e decimal {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      overflow: hidden;
+    }
+
+    @e text {
+      font-size: 14px;
+      vertical-align: middle;
+    }
+  }
+}

src/index.js

@@ -47,8 +47,9 @@ import Upload from '../packages/upload/index.js';
 import Progress from '../packages/progress/index.js';
 import Spinner from '../packages/spinner/index.js';
 import Message from '../packages/message/index.js';
-import Badge from '../packages/badge/index.js';
 import Card from '../packages/card/index.js';
+import Rate from '../packages/rate/index.js';
+import Badge from '../packages/badge/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -99,8 +100,9 @@ const install = function(Vue) {
   Vue.component(Progress.name, Progress);
   Vue.component(Spinner.name, Spinner);
   Vue.component(Message.name, Message);
-  Vue.component(Badge.name, Badge);
   Vue.component(Card.name, Card);
+  Vue.component(Rate.name, Rate);
+  Vue.component(Badge.name, Badge);
 
   Vue.use(Loading);
 
@@ -167,7 +169,8 @@ module.exports = {
   Upload,
   Progress,
   Spinner,
+  Card,
+  Rate,
   Message,
-  Badge,
-  Card
+  Badge
 };