From 49d380cf99f3ce6e144b6b0626b32ec8bd2f476b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 17 Jan 2017 11:26:02 +0800
Subject: [PATCH] init Rate component

init Rate component
---
 src/components/rate/index.js          |  2 +
 src/components/rate/rate.vue          | 99 +++++++++++++++++++++++++++
 src/index.js                          |  2 +
 src/styles/components/index.less      |  3 +-
 src/styles/components/rate.less       | 66 ++++++++++++++++++
 src/styles/themes/default/custom.less |  1 +
 test/app.vue                          |  1 +
 test/main.js                          |  5 ++
 test/routers/rate.vue                 | 15 ++++
 9 files changed, 193 insertions(+), 1 deletion(-)
 create mode 100644 src/components/rate/index.js
 create mode 100644 src/components/rate/rate.vue
 create mode 100644 src/styles/components/rate.less
 create mode 100644 test/routers/rate.vue

diff --git a/src/components/rate/index.js b/src/components/rate/index.js
new file mode 100644
index 00000000..24e54060
--- /dev/null
+++ b/src/components/rate/index.js
@@ -0,0 +1,2 @@
+import Rate from './rate.vue';
+export default Rate;
\ No newline at end of file
diff --git a/src/components/rate/rate.vue b/src/components/rate/rate.vue
new file mode 100644
index 00000000..e2c64c9b
--- /dev/null
+++ b/src/components/rate/rate.vue
@@ -0,0 +1,99 @@
+<template>
+    <div :class="classes" @mouseleave="handleMouseleave">
+        <div v-for="item in count" :class="starCls(item)">
+            <span
+                :class="[prefixCls + '-star-content']"
+                @mousemove="handleMousemove(item, $event)"
+                @click="handleClick(item)"></span>
+        </div>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-rate';
+
+    export default {
+        props: {
+            count: {
+                type: Number,
+                default: 5
+            },
+            value: {
+                type: Number,
+                default: 0
+            },
+            allowHalf: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                hoverIndex: -1
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            }
+        },
+        methods: {
+            starCls (value) {
+                const hoverIndex = this.hoverIndex;
+                let full = false;
+
+                if (hoverIndex >= value) {
+                    full = true;
+                }
+
+                return [
+                    `${prefixCls}-star`,
+                    {
+                        [`${prefixCls}-star-full`]: full,
+                        [`${prefixCls}-star-zero`]: !full
+                    }
+                ]
+            },
+            handleMousemove(value, event) {
+                if (this.disabled) return;
+
+                if (this.allowHalf) {
+//                    let target = event.target;
+//                    if (hasClass(target, 'el-rate__item')) {
+//                        target = target.querySelector('.el-rate__icon');
+//                    }
+//                    if (hasClass(target, '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;
+            },
+            handleMouseleave () {
+                if (this.disabled) {
+                    return;
+                }
+                if (this.allowHalf) {
+//                    this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
+                }
+//                this.currentValue = this.value;
+                this.hoverIndex = -1;
+            },
+            handleClick (value) {
+
+            }
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 6756a5be..944a1645 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,6 +27,7 @@ import Page from './components/page';
 import Poptip from './components/poptip';
 import Progress from './components/progress';
 import Radio from './components/radio';
+import Rate from './components/rate';
 import Slider from './components/slider';
 import Spin from './components/spin';
 import Steps from './components/steps';
@@ -83,6 +84,7 @@ const iview = {
     Progress,
     Radio,
     RadioGroup: Radio.Group,
+    Rate,
     Row,
     iSelect: Select,
     Slider,
diff --git a/src/styles/components/index.less b/src/styles/components/index.less
index 07baccd4..10f81742 100644
--- a/src/styles/components/index.less
+++ b/src/styles/components/index.less
@@ -34,4 +34,5 @@
 @import "menu";
 @import "date-picker";
 @import "time-picker";
-@import "form";
\ No newline at end of file
+@import "form";
+@import "rate";
\ No newline at end of file
diff --git a/src/styles/components/rate.less b/src/styles/components/rate.less
new file mode 100644
index 00000000..82002ffd
--- /dev/null
+++ b/src/styles/components/rate.less
@@ -0,0 +1,66 @@
+@rate-prefix-cls: ~"@{css-prefix}rate";
+
+.@{rate-prefix-cls} {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    vertical-align: middle;
+    font-weight: normal;
+    font-style: normal;
+    font-family: 'Ionicons';
+
+    &-disabled &-star {
+        &:before,
+        &-content:before {
+            cursor: default;
+        }
+        &:hover {
+            transform: scale(1);
+        }
+    }
+
+    &-star {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        &:before,
+        &-content:before {
+            color: #e9e9e9;
+            cursor: pointer;
+            content: "\F4B3";
+            transition: all @transition-time @ease-in-out;
+            display: block;
+        }
+
+        &-content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+            &:before {
+                color: transparent;
+            }
+        }
+
+        &-half &-content:before,
+        &-full:before {
+            color: @rate-star-color;
+        }
+
+        &-half:hover &-content:before,
+        &-full:hover:before {
+            color: tint(@rate-star-color, 20%);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less
index ba7236e1..fb3367f3 100644
--- a/src/styles/themes/default/custom.less
+++ b/src/styles/themes/default/custom.less
@@ -14,6 +14,7 @@
 @selected-color         : fade(@primary-color, 90%);
 @tooltip-color          : #fff;
 @subsidiary-color       : #9ea7b4;
+@rate-star-color        : #f5a623;
 
 // Base
 @body-background        : #fff;
diff --git a/test/app.vue b/test/app.vue
index 3dfec764..0a1e3cff 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -47,6 +47,7 @@ li + li {
                 <li><a v-link="'/menu'">Menu</a></li>
                 <li><a v-link="'/date'">Date</a></li>
                 <li><a v-link="'/form'">Form</a></li>
+                <li><a v-link="'/rate'">Rate</a></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 363135f9..6805f1cc 100644
--- a/test/main.js
+++ b/test/main.js
@@ -134,6 +134,11 @@ router.map({
             require(['./routers/form.vue'], resolve);
         }
     },
+    '/rate': {
+        component: function (resolve) {
+            require(['./routers/rate.vue'], resolve);
+        }
+    },
 });
 
 router.beforeEach(function () {
diff --git a/test/routers/rate.vue b/test/routers/rate.vue
new file mode 100644
index 00000000..5a7d769a
--- /dev/null
+++ b/test/routers/rate.vue
@@ -0,0 +1,15 @@
+<template>
+    <div style="margin: 100px">
+        <Rate></Rate>
+    </div>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        methods: {}
+    };
+</script>
\ No newline at end of file