Merge branch 'dev'

craigh411 · Oct 30, 2017 · 1c43d3c · 1c43d3c
2 parents 00a891c + 7ca84c4
commit 1c43d3c
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,7 @@ The following props can be passed to the component:
 | padding  | Pads the right of each star so distance between stars can be altered | 0 |
 | fixed-points  | Specify a fixed number of digits after the decimal point. | null |
 | rtl  | Pass true to display star rating using rtl (right-to-left) | false |
+| round-start-rating  | Pass false if you don't want the start rating value to round to the closest increment. The user will still only be able to select based on the given increment. | true |
 
 **Important:** Vue requires you to pass numbers and boolean values using `v-bind`, any props that require a number or bool should use `v-bind:` or the colon (`:`) shorthand.
 

diff --git a/dist/star-rating.min.js b/dist/star-rating.min.js
diff --git a/dist/star-rating.min.js.map b/dist/star-rating.min.js.map
diff --git a/examples/commonjs/App.vue b/examples/commonjs/App.vue
@@ -1,19 +1,19 @@
 <template>
     <div>
-        <star-rating v-model="rating" active-color="black" :increment="0.01"></star-rating> {{rating}}
+        <star-rating v-model="rating" active-color="black" :increment="1" :rating="rating" :round-start-rating="false" :rtl="true"></star-rating> {{rating}}
     </div>
 </template>
 
 <script type="text/javascript">
-import StarRating from '../../dist/star-rating.min.js';
+import StarRating from '../../src/star-rating.vue';
 
 export default {
     components: {
         StarRating
     },
     data(){
     	return{
-    		rating: 4.38
+    		rating: 3.48
     	}
     }
 }

diff --git a/examples/commonjs/index.html b/examples/commonjs/index.html
@@ -1,7 +1,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>vue-rate-it</title>
+    <title>vue-star-rating</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/examples/index.html b/examples/index.html
@@ -53,6 +53,9 @@ <h2>Fluid Stars</h2>
         <h2>Preset Stars</h2>
         <star-rating :rating="4"></star-rating>
 
+        <h2>Non rounded start rating</h2>
+        <star-rating :rating="4.67" :round-start-rating="false"></star-rating>
+
         <h2>Read Only Stars</h2>
         <star-rating :rating="3.8" :read-only="true" :increment="0.01"></star-rating>
 

diff --git a/spec/star-rating.spec.js b/spec/star-rating.spec.js
@@ -124,6 +124,15 @@ describe('star-rating component', () => {
         expect(data.fillLevel[1]).toEqual(50);
     });
 
+
+    it('should not round the fillLevel up to the nearest given increment', () => {
+        let data = helpers.getData(starRating, { increment: 0.5, rating: 1.1, roundStartRating: false });
+
+        expect(data.fillLevel[0]).toEqual(100);
+        expect(data.fillLevel[1]).toEqual(10);
+    });
+
+
     it('should set the currentRating and selected Rating based on passed rating prop', () => {
         let data = helpers.getData(starRating, { rating: 2 });
 
@@ -219,6 +228,40 @@ describe('star-rating component', () => {
             expect(vm.$children[0].$data.selectedRating).toEqual(2);
         });
 
+
+        it('should set the currentRating to selectedRating on mouseout with rounding', () => {
+            vm = getViewInstance({roundStartRating: true, rating: 4.34}).$mount("#app");
+
+
+            // mousemove on the second star
+            doEventOnStar('mousemove', vm, 2);
+            // currentRating should now be 2
+            expect(vm.$children[0].$data.currentRating).toEqual(2);
+
+            let starRating = document.getElementsByTagName('div')[1];
+
+            // leave the starRating component, currentRating should reset to 1
+            helpers.doEvent('mouseleave', starRating, 0, 0);
+            expect(vm.$children[0].$data.currentRating).toEqual(5);
+        });
+
+
+        it('should set the currentRating to selectedRating on mouseout without rounding', () => {
+            vm = getViewInstance({roundStartRating: false, rating: 4.34}).$mount("#app");
+
+
+            // mousemove on the second star
+            doEventOnStar('mousemove', vm, 2);
+            // currentRating should now be 2
+            expect(vm.$children[0].$data.currentRating).toEqual(2);
+
+            let starRating = document.getElementsByTagName('div')[1];
+
+            // leave the starRating component, currentRating should reset to 1
+            helpers.doEvent('mouseleave', starRating, 0, 0);
+            expect(vm.$children[0].$data.currentRating).toEqual(4.34);
+        });
+
         it('should set the currentRating to selectedRating on mouseout', () => {
             vm = getViewInstance().$mount("#app");
 

diff --git a/src/star-rating.vue b/src/star-rating.vue
@@ -28,6 +28,10 @@ export default {
             type: Number,
             default: 0
         },
+        roundStartRating: {
+            type: Boolean,
+            default: true
+        },
         activeColor: {
             type: String,
             default: '#ffd055'
@@ -84,8 +88,8 @@ export default {
     created() {
         this.step = this.increment * 100
         this.currentRating = this.rating
-        this.selectedRating = this.rating
-        this.createStars()
+        this.selectedRating = this.currentRating
+        this.createStars(this.roundStartRating)
     },
     methods: {
         setRating($event, persist) {
@@ -97,6 +101,7 @@ export default {
                 if (persist) {
                     this.selectedRating = this.currentRating
                     this.$emit('rating-selected', this.selectedRating)
+                    this.ratingSelected = true
                 } else {
                     this.$emit('current-rating', this.currentRating)
                 }
@@ -105,11 +110,13 @@ export default {
         resetRating() {
             if (!this.readOnly) {
                 this.currentRating = this.selectedRating
-                this.createStars()
+                this.createStars(this.shouldRound)
             }
         },
-        createStars() {
-            this.round()
+        createStars(round = true) {
+            if (round) {
+                this.round()
+            }
             for (var i = 0; i < this.maxRating; i++) {
                 let level = 0
                 if (i < this.currentRating) {
@@ -126,6 +133,9 @@ export default {
     computed: {
         formattedRating() {
             return (this.fixedPoints === null) ? this.currentRating : this.currentRating.toFixed(this.fixedPoints)
+        },
+        shouldRound() {
+            return this.ratingSelected || this.roundStartRating
         }
     },
     watch: {
@@ -140,7 +150,8 @@ export default {
             step: 0,
             fillLevel: [],
             currentRating: 0,
-            selectedRating: 0
+            selectedRating: 0,
+            ratingSelected: false
         }
     }
 }
@@ -150,29 +161,23 @@ export default {
 .vue-star-rating-star {
     display: inline-block;
 }
-
 .vue-star-rating-pointer {
     cursor: pointer;
 }
-
 .vue-star-rating {
     display: flex;
     align-items: center;
 }
-
 .vue-star-rating-inline {
     display: inline-flex;
 }
-
 .vue-star-rating-rating-text {
     margin-top: 7px;
     margin-left: 7px;
 }
-
 .vue-star-rating-rtl {
     direction: rtl;
 }
-
 .vue-star-rating-rtl .vue-star-rating-rating-text {
     margin-right: 10px;
     direction:rtl;

diff --git a/src/star.vue b/src/star.vue
@@ -85,7 +85,9 @@ export default {
         getPosition($event) {
             // calculate position in percentage.
             var starWidth = (92 / 100) * this.size
-            var position = Math.round((100 / starWidth) * $event.offsetX)
+            const offset = (this.rtl) ? Math.min($event.offsetX, 45) : Math.max($event.offsetX, 1)
+            var position = Math.round((100 / starWidth) * offset)
+
             return Math.min(position, 100)
         },
         selected($event) {