├── .gitignore
├── demo_indicator.png
├── package.json
├── README.md
└── star-rating.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | *.idea
2 | 


--------------------------------------------------------------------------------
/demo_indicator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JonathanDn/vue-stars-rating/HEAD/demo_indicator.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dynamic-star-rating",
 3 |   "version": "1.0.8",
 4 |   "description": "A highly dynamic vue stars rating component, similar to google play stars rating",
 5 |   "main": "star-rating.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "peerDependencies": {
10 |     "vue": "^2.5.17"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/JonathanDn/vue-stars-rating.git"
15 |   },
16 |   "keywords": [
17 |     "vue", "vue.js", "frontend", "web", "stars", "rating", "google play", "star-rating", "stars-rating", "dynamic", "customize"
18 |   ],
19 |   "author": "Jonathan Doron <yonidn7@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/JonathanDn/vue-stars-rating/issues"
23 |   },
24 |   "homepage": "https://github.com/JonathanDn/vue-stars-rating#readme"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-dynamic-star-rating
 2 | ## A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play)
 3 | 
 4 | ![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")
 5 | [![view on npm](http://img.shields.io/npm/v/vue-dynamic-star-rating.svg?colorB=red)](https://www.npmjs.org/package/vue-dynamic-star-rating)
 6 | 
 7 | For a walkthrough blogpost about how I implemented this component you can head to my *[medium post](https://medium.com/@yonatandoron/star-rating-make-svg-great-again-d4ce4731347e)*
 8 | 
 9 | ###### Demo
10 | 
11 | ![4.8 star rating](https://github.com/JonathanDn/vue-stars-rating/blob/master/demo_indicator.png "4.8 star rating")
12 | 
13 | [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/morqm41968)
14 | 
15 | # Usage
16 | Install via NPM ```npm i vue-dynamic-star-rating```
17 | 
18 | Then require in your project:
19 | ```js
20 | var StarRating = require('vue-dynamic-star-rating');
21 | ```
22 | or ES6 syntax:
23 | ```js
24 | import StarRating from 'vue-dynamic-star-rating'
25 | ```
26 | Then you can register the component globally:
27 | ```js
28 | Vue.component('star-rating', StarRating);
29 | ```
30 | Or in your Vue component:
31 | ```js
32 | components: {
33 |   StarRating
34 | }
35 | ```
36 | You can then use the following selector anywhere in your project:
37 | * To get up and running quick the package now supports rendering just the selector with default values
38 | ```html
39 | <star-rating></star-rating>
40 | ```
41 | 
42 | # Docs
43 | The component `<star-rating></star-rating>` support various property. You can use either : 
44 | - `rating` to define the default rating value
45 | - `star-style` to define the style that applies to the rating. If not provided, the default values are used.
46 | - `is-indicator-active` to determine if an indicator should be enabled.
47 | 
48 | ## Basics
49 | 
50 | | Property | Type  | Description | Default
51 | | --- | ---  | --- | --- |
52 | | **rating** | Number  | A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons | 1 |
53 | | **isIndicatorActive** | Boolean | A property that deteremines weather a rating indicator would show to the right | true |
54 | | **starStyle** | Object | See the following "Customized Styling" section below | ``` { "fullStarColor" : "#ed8a19",  "emptyStarColor" : "#737373",  "starWidth" : 20,  "starHeight" : 20 }```
55 | 
56 | ## Customized Styling
57 | 
58 | | Property | Type  | Description | Default |
59 | | --- | ---  | --- | --- |
60 | | **fullStarColor** | string | Set the full or partially-full star color | ```#ed8a19``` |
61 | | **emptyStarColor** | string | Set the empty or partially-empty star color | ```#737373``` |
62 | | **starWidth** | number | Set the star width | 20 |
63 | | **starHeight** | number | Set the star height | 20 |
64 | 
65 | ## Implementation Example
66 | Define your **config** options object in the component importing StarRating e.g
67 | ```js
68 | data: function() {
69 |     return {
70 |         rating: 4.7,
71 |         starStyle: {
72 |             fullStarColor: '#ed8a19',
73 |             emptyStarColor: '#737373',
74 |             starWidth: 30,
75 |             starHeight: 30
76 |         }
77 |     }
78 | }
79 | ```
80 | And bind it to the selector like so
81 | ```html
82 | <star-rating :rating="rating" :star-style="starStyle"></star-rating>
83 | 
84 | ```
85 | 
86 | Feedback would be much appreciated, questions, suggestions, issues are more than welcome.
87 | 
88 | ---
89 | 👨‍💻 Follow me on [Twitter](https://twitter.com/jodoron).
90 | 


--------------------------------------------------------------------------------
/star-rating.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="star-rating" :aria-label="rating + ' of 5'">
  3 |     <div v-for="(star, index) in stars" :key="index" class="star-container">
  4 |       <svg
  5 |         class="star-svg"
  6 |         :style="[
  7 |           { fill: `url(#gradient${star.raw})` },
  8 |           { width: styleStarWidth },
  9 |           { height: styleStarHeight },
 10 |         ]"
 11 |         aria-hidden="true"
 12 |       >
 13 |         <polygon :points="getStarPoints" style="fill-rule: nonzero" />
 14 |         <defs>
 15 |           <!--
 16 | 					  id has to be unique to each star fullness(dynamic offset) - it indicates fullness above
 17 | 					-->
 18 |           <linearGradient :id="`gradient${star.raw}`">
 19 |             <stop
 20 |               id="stop1"
 21 |               :offset="star.percent"
 22 |               stop-opacity="1"
 23 |               :stop-color="getFullFillColor(star)"
 24 |             ></stop>
 25 |             <stop
 26 |               id="stop2"
 27 |               :offset="star.percent"
 28 |               stop-opacity="0"
 29 |               :stop-color="getFullFillColor(star)"
 30 |             ></stop>
 31 |             <stop
 32 |               id="stop3"
 33 |               :offset="star.percent"
 34 |               stop-opacity="1"
 35 |               :stop-color="styleEmptyStarColor"
 36 |             ></stop>
 37 |             <stop
 38 |               id="stop4"
 39 |               offset="100%"
 40 |               stop-opacity="1"
 41 |               :stop-color="styleEmptyStarColor"
 42 |             ></stop>
 43 |           </linearGradient>
 44 |         </defs>
 45 |       </svg>
 46 |     </div>
 47 |     <div v-if="isIndicatorActive" class="indicator">{{ rating }}</div>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | export default {
 53 |   name: "stars-rating",
 54 |   components: {},
 55 |   props: {
 56 |     rating: {
 57 |       type: Number,
 58 |       default: 4.3,
 59 |     },
 60 |     starStyle: {
 61 |       type: Object,
 62 |     },
 63 |     isIndicatorActive: {
 64 |       type: Boolean,
 65 |       default: true,
 66 |     },
 67 |   },
 68 |   data: function () {
 69 |     return {
 70 |       stars: [],
 71 |       emptyStar: 0,
 72 |       fullStar: 1,
 73 |       totalStars: 5,
 74 |       // Binded Nested Props registered as data/computed and not props
 75 |       styleStarWidth: 100,
 76 |       styleStarHeight: 100,
 77 |       styleEmptyStarColor: "#737373",
 78 |       styleFullStarColor: "#ed8a19",
 79 |     };
 80 |   },
 81 |   directives: {},
 82 |   computed: {
 83 |     getStarPoints () {
 84 |       let centerX = this.styleStarWidth / 2;
 85 |       let centerY = this.styleStarWidth / 2;
 86 | 
 87 |       let innerCircleArms = 5; // a 5 arms star
 88 | 
 89 |       let innerRadius = this.styleStarWidth / innerCircleArms;
 90 |       let innerOuterRadiusRatio = 2.5; // Unique value - determines fatness/sharpness of star
 91 |       let outerRadius = innerRadius * innerOuterRadiusRatio;
 92 | 
 93 |       return this.calcStarPoints(
 94 |         centerX,
 95 |         centerY,
 96 |         innerCircleArms,
 97 |         innerRadius,
 98 |         outerRadius
 99 |       );
100 |     },
101 |   },
102 |   methods: {
103 |     calcStarPoints(
104 |       centerX,
105 |       centerY,
106 |       innerCircleArms,
107 |       innerRadius,
108 |       outerRadius
109 |     ) {
110 |       let angle = Math.PI / innerCircleArms;
111 |       let angleOffsetToCenterStar = 60;
112 | 
113 |       let totalArms = innerCircleArms * 2;
114 |       let points = "";
115 |       for (let i = 0; i < totalArms; i++) {
116 |         let isEvenIndex = i % 2 == 0;
117 |         let r = isEvenIndex ? outerRadius : innerRadius;
118 |         let currX = centerX + Math.cos(i * angle + angleOffsetToCenterStar) * r;
119 |         let currY = centerY + Math.sin(i * angle + angleOffsetToCenterStar) * r;
120 |         points += currX + "," + currY + " ";
121 |       }
122 |       return points;
123 |     },
124 |     initStars() {
125 |       for (let i = 0; i < this.totalStars; i++) {
126 |         this.stars.push({
127 |           raw: this.emptyStar,
128 |           percent: this.emptyStar + "%",
129 |         });
130 |       }
131 |     },
132 |     setStars() {
133 |       let fullStarsCounter = Math.floor(this.rating);
134 |       for (let i = 0; i < this.stars.length; i++) {
135 |         if (fullStarsCounter !== 0) {
136 |           this.stars[i].raw = this.fullStar;
137 |           this.stars[i].percent = this.calcStarFullness(this.stars[i]);
138 |           fullStarsCounter--;
139 |         } else {
140 |           let surplus = Math.round((this.rating % 1) * 10) / 10; // Support just one decimal
141 |           let roundedOneDecimalPoint = Math.round(surplus * 10) / 10;
142 |           this.stars[i].raw = roundedOneDecimalPoint;
143 |           return (this.stars[i].percent = this.calcStarFullness(this.stars[i]));
144 |         }
145 |       }
146 |     },
147 |     getFullFillColor(starData) {
148 |       return starData.raw !== this.emptyStar
149 |         ? this.styleFullStarColor
150 |         : this.styleEmptyStarColor;
151 |     },
152 |     calcStarFullness(starData) {
153 |       let starFullnessPercent = starData.raw * 100 + "%";
154 |       return starFullnessPercent;
155 |     },
156 |     setNestedConfigStyles(objToFlatten) {
157 |       if (typeof objToFlatten === "object") {
158 |         for (let i in objToFlatten) {
159 |           let newKey =
160 |             "style" + i.charAt(0).toUpperCase() + i.substring(1, i.length);
161 |           this[newKey] = objToFlatten[i];
162 |         }
163 |       }
164 |     },
165 |   },
166 |   created() {
167 |     this.setNestedConfigStyles(this.starStyle);
168 |     this.initStars();
169 |     this.setStars();
170 |   },
171 | };
172 | </script>
173 | 
174 | <style scoped lang="scss">
175 | .star-rating {
176 |   display: flex;
177 |   align-items: center;
178 |   .star-container {
179 |     display: flex;
180 |   }
181 |   .star-container:not(:last-child) {
182 |     margin-right: 5px;
183 |   }
184 | }
185 | </style>
186 | 


--------------------------------------------------------------------------------