Refactoring + small fix

- Some methods were incorrectly defined as computed, these have now been
moved to methods.
- the rating watcher did not set selectedRating to the prop value, which
  has now been fixed.
- An extra example has been added to example.html.

README.md

@@ -56,7 +56,7 @@ When using require or import you will need to make sure you can compile `ES6` (s
 
 A `dist` file has also been created, which you can include in your webpage like so:
 
-<script src="https://unpkg.com/[email protected].0/dist/star-rating.js"></script>
+<script src="https://unpkg.com/[email protected].1/dist/star-rating.js"></script>
 
 The `star-rating` component is registered automatically, so there is no need to manually register the component.
 
@@ -91,6 +91,10 @@ The following props can be passed to the component:
 </star-rating>
 ```
 
+### Reactive Props
+
+The `rating` prop is reactive, meaning that if you bind it to data in your parent view model, any change to that value will automatically feed through to the component. It's important to note that if you want to use this functionality you will have to manually sync data between the parent and child. 
+
 ### Custom Events
 
 `vue-star-rating` fires the following custom events, simply use `v-on:event` or the `@` shortand to capture the event.

examples/example.html

@@ -6,21 +6,19 @@
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="../dist/star-rating.js"></script>
     <style>
-
-    body{
+    body {
         font-size: 1.2em;
     }
-
+    
     .rating-text {
-       font-weight:bold;
-       font-size: 1.9em;
-       border: 1px solid #cfcfcf;
-       padding-left:10px;
-       padding-right:10px;
-       border-radius: 5px;
-       color: #999;
+        font-weight: bold;
+        font-size: 1.9em;
+        border: 1px solid #cfcfcf;
+        padding-left: 10px;
+        padding-right: 10px;
+        border-radius: 5px;
+        color: #999;
     }
-
     </style>
 </head>
 
@@ -71,6 +69,12 @@ <h2>Capture Mouse Over Rating</h2>
             <star-rating :show-rating="false" @current-rating="showCurrentRating" @rating-selected="setCurrentSelectedRating" :increment="0.5"></star-rating>
         </div>
         <div style="margin-top:10px;font-weight:bold;">{{currentRating}}</div>
+
+        <h2>Resetable stars</h2>
+        <div style="display:inline-block;">
+            <star-rating :rating="resetableRating" @rating-selected="syncRating"></star-rating>
+            <div style="padding-top:10px;cursor:pointer;margin-bottom:20px;color: blue;"><a @click="reset">Reset Rating</a></div>
+        </div>
     </div>
 
     <script type="text/javascript">
@@ -85,12 +89,19 @@ <h2>Capture Mouse Over Rating</h2>
             },
             setCurrentSelectedRating: function(rating) {
                 this.currentSelectedRating = "You have Selected: " + rating + " stars";
+            },
+            reset: function() {
+                this.resetableRating = 0;
+            },
+            syncRating: function(rating) {
+                this.resetableRating = rating;
             }
         },
         data: {
             rating: "No Rating Selected",
             currentRating: "No Rating",
-            currentSelectedRating: "No Current Rating"
+            currentSelectedRating: "No Current Rating",
+            resetableRating: 3
         }
     });
     </script>

src/star-rating.vue

@@ -50,32 +50,15 @@ export default {
         this.step = this.increment * 100;
         this.currentRating = this.rating;
         this.selectedRating = this.rating;
-        this.createStars;
-    },
-    computed: {
-        createStars() {
-            this.fillLevel = [];
-            this.round;
-            for (var i = 0; i < this.maxRating; i++) {
-                let level = 0;
-                if (i < this.currentRating) {
-                    level = (this.currentRating - i > 1) ? 100 : (this.currentRating - i) * 100;
-                }
-                this.fillLevel[i] = Math.round(level);
-            }
-        },
-        round() {
-            var inv = 1.0 / this.increment;
-            this.currentRating = Math.ceil(this.currentRating * inv) / inv;
-        }
+        this.createStars();
     },
     methods: {
         setRating($event, persist) {
             if (!this.readOnly) {
                 let position = $event.position / 100;
                 this.currentRating = (($event.id + position) - 1).toFixed(2);
                 this.currentRating = (this.currentRating > this.maxRating) ? this.maxRating : this.currentRating;
-                this.createStars;
+                this.createStars();
                 if (persist) {
                     this.selectedRating = this.currentRating;
                     this.$emit('rating-selected', this.selectedRating);
@@ -87,14 +70,30 @@ export default {
         resetRating() {
             if (!this.readOnly) {
                 this.currentRating = this.selectedRating;
-                this.createStars;
+                this.createStars();
             }
+        },
+        createStars() {
+            this.fillLevel = [];
+            this.round();
+            for (var i = 0; i < this.maxRating; i++) {
+                let level = 0;
+                if (i < this.currentRating) {
+                    level = (this.currentRating - i > 1) ? 100 : (this.currentRating - i) * 100;
+                }
+                this.fillLevel[i] = Math.round(level);
+            }
+        },
+        round() {
+            var inv = 1.0 / this.increment;
+            this.currentRating = Math.ceil(this.currentRating * inv) / inv;
         }
     },
     watch: {
         rating(val) {
             this.currentRating = val;
-            this.createStars;
+            this.selectedRating = val;
+            this.createStars();
         }
     },
     data() {

src/star.vue

@@ -18,7 +18,7 @@ export default {
     props: ['fill', 'size', 'id', 'activeColor', 'inactiveColor'],
     created() {
         this.calculatePoints;
-        this.setFill;
+        this.setFill();
         this.grad = Math.random().toString(36).substring(7);
     },
     computed: {
@@ -29,9 +29,6 @@ export default {
         },
         starPointsToString() {
             return this.starPoints.join(',');
-        },
-        setFill() {
-            this.fillWidth = this.fill + "%";
         }
     },
     methods: {
@@ -42,24 +39,26 @@ export default {
                 id: this.id
             })
         },
-        getPosition($event){
+        getPosition($event) {
             // calculate position in percentage.
             var starWidth = (92 / 100) * this.size;
             var position = Math.round((100 / starWidth) * $event.offsetX);
-
             return (position > 100) ? 100 : position;
         },
         selected($event) {
             this.$emit('star-selected', {
                 id: this.id,
                 position: this.getPosition($event)
             })
+        },
+        setFill() {
+            this.fillWidth = this.fill + "%";
         }
     },
     watch: {
         fill(val) {
             this.fillWidth = val;
-            this.setFill;
+            this.setFill();
         }
     },
     data() {