├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src
    └── Rating.vue
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon <cfddream@gmail.com<
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Rating
 2 | 
 3 | Rating component is based on [starability.css](http://lunarlogic.github.io/starability/) for Vue Bulma.
 4 | 
 5 | ## Installation
 6 | 
 7 | ```
 8 | $ npm install vue-bulma-rating --save
 9 | ```
10 | 
11 | ## Examples
12 | 
13 | ```vue
14 | <template>
15 |   <form>
16 |     <rating :items="items" legend="Default star rating:" :value="value" @change="update"></rating>
17 |   </form>
18 |   {{ value }}
19 | </template>
20 | 
21 | <script>
22 | import Rating from 'vue-bulma-rating'
23 | 
24 | export default {
25 |   components: {
26 |     Rating
27 |   },
28 | 
29 |   data () {
30 |     return {
31 |       value: 2,
32 |       items: [
33 |         {
34 |           title: '5 Stars',
35 |           value: 5
36 |         },
37 |         {
38 |           title: '4 Stars',
39 |           value: 4
40 |         },
41 |         {
42 |           title: '3 Stars',
43 |           value: 3
44 |         },
45 |         {
46 |           title: '2 Stars',
47 |           value: 2
48 |         },
49 |         {
50 |           title: '1 Star',
51 |           value: 1
52 |         }
53 |       ]
54 |     }
55 |   },
56 | 
57 |   methods: {
58 |     update (val) {
59 |       this.value = val
60 |     }
61 |   }
62 | }
63 | </script>
64 | 
65 | ```
66 | 
67 | 
68 | ## Badges
69 | 
70 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
71 | ![](https://img.shields.io/badge/status-stable-green.svg)
72 | 
73 | ---
74 | 
75 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
76 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
77 | > Twitter [@_fundon](https://twitter.com/_fundon)
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-rating",
 3 |   "version": "1.0.1",
 4 |   "description": "Rating component is based on starability for Vue Bulma",
 5 |   "main": "src/Rating.vue",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2"
 9 |   },
10 |   "repository": "vue-bulma/rating",
11 |   "keywords": [
12 |     "vue",
13 |     "bulma",
14 |     "vue-bulma",
15 |     "vue-bulma-component",
16 |     "vue-bulma-rating",
17 |     "starability",
18 |     "rating",
19 |     "rate"
20 |   ],
21 |   "author": "Fangdun Cai <cfddream@gmail.com>",
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "starability": "1.0.5"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/Rating.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <fieldset :class="[`starability-${kind}`, 'rating']">
  3 |     <legend v-if="legend">{{ legend }}</legend>
  4 |     <template v-for="(item, index) in items">
  5 |       <input type="radio" :id="uuid(index)" name="rating" :value="item.value" :checked="hasChecked(index)" @change="change($event)">
  6 |       <label class="touchable" :for="uuid(index)" :title="item.title || ''">{{ item.label || '' }}</label>
  7 |     </template>
  8 |   </fieldset>
  9 | </template>
 10 | 
 11 | <script>
 12 | export default {
 13 |   props: {
 14 |     legend: String,
 15 |     items: {
 16 |       type: Array,
 17 |       default: () => ([])
 18 |     },
 19 |     value: {
 20 |       type: Number,
 21 |       default: -1
 22 |     },
 23 |     kind: {
 24 |       type: String,
 25 |       default: 'basic',
 26 |       validator: (val) => ['basic', 'slot', 'grow', 'growRotate', 'fade', 'checkmark'].indexOf(val) > -1
 27 |     }
 28 |   },
 29 | 
 30 |   data () {
 31 |     return {
 32 |       selected: this.value
 33 |     }
 34 |   },
 35 | 
 36 |   methods: {
 37 |     uuid (index) {
 38 |       return `rating-${this._uid}-item-${index}`
 39 |     },
 40 | 
 41 |     hasChecked (index) {
 42 |       return this.count - index === this.selected
 43 |     },
 44 | 
 45 |     change (e) {
 46 |       this.selected = e.target.value >>> 0
 47 |       this.$emit('change', this.selected)
 48 |     }
 49 |   },
 50 | 
 51 |   computed: {
 52 |     count () {
 53 |       return this.items.length
 54 |     }
 55 |   }
 56 | }
 57 | </script>
 58 | 
 59 | <style lang="scss">
 60 | @import "~starability/starability-scss/variables";
 61 | 
 62 | $accessible-highlight: false;
 63 | 
 64 | $image-directory-path: '~starability/starability-images';
 65 | 
 66 | @mixin starability-base($bg-image-path: 'icons') {
 67 |   display: block;
 68 |   position: relative;
 69 |   width: $star-count * $star-size;
 70 |   min-height: 2 * $star-size;
 71 |   padding: 0;
 72 |   border: none;
 73 | 
 74 |   > input {
 75 |     position: absolute;
 76 |     margin-right: -100%;
 77 |     opacity: 0;
 78 |   }
 79 | 
 80 |   > input:checked ~ label,
 81 |   > input:focus ~ label {
 82 |     background-position: 0 (-$star-size);
 83 |   }
 84 | 
 85 |   @if ($hover-enabled) {
 86 |     > input:hover ~ label {
 87 |       background-position: 0 (-$star-size);
 88 |     }
 89 |   }
 90 | 
 91 |   @if ($accessible-highlight) {
 92 |     > input:focus + label {
 93 |       outline: 1px dotted #999;
 94 |     }
 95 |   }
 96 | 
 97 |   > label {
 98 |     position: relative;
 99 |     display: inline-block;
100 |     float: right;
101 |     width: $star-size;
102 |     height: $star-size;
103 |     color: transparent;
104 |     cursor: pointer;
105 |     background-image: url('#{$image-directory-path}/#{$bg-image-path}.png');
106 |     background-repeat: no-repeat;
107 | 
108 |     @media screen and (min-resolution: 192dpi) {
109 |       background-image: url('#{$image-directory-path}/#{$bg-image-path}@2x.png');
110 |       background-size: $star-size auto;
111 |     }
112 |   }
113 | }
114 | 
115 | @mixin starability-animation-base($bg-image-path: 'icons') {
116 |   display: none;
117 |   position: absolute;
118 |   content: ' ';
119 |   width: $star-size;
120 |   height:  $star-size;
121 |   background-image: url('#{$image-directory-path}/#{$bg-image-path}.png');
122 |   background-repeat: no-repeat;
123 | 
124 |   @media screen and (min-resolution: 192dpi) {
125 |     background-image: url('#{$image-directory-path}/#{$bg-image-path}@2x.png');
126 |     background-size: $star-size auto;
127 |   }
128 | }
129 | 
130 | .starability-basic {
131 |   @include starability-base;
132 | }
133 | 
134 | .starability-slot {
135 |   @include starability-base;
136 | 
137 |   > input:checked ~ label,
138 |   > input:hover ~ label,
139 |   > input:focus ~ label {
140 |     transition: background-position .7s;
141 |   }
142 | }
143 | 
144 | @keyframes grow {
145 | 
146 |   0% {
147 |     transform: scale(1,1);
148 |   }
149 | 
150 |   99% {
151 |     transform: scale(4,4);
152 |     opacity: 0;
153 |   }
154 | 
155 |   100% {
156 |     transform: scale(1,1);
157 |     opacity: 0;
158 |   }
159 | }
160 | 
161 | .starability-grow {
162 |   @include starability-base;
163 | 
164 |   > label:before {
165 |     @include starability-animation-base;
166 |     bottom: 0;
167 |   }
168 | 
169 |   > input:checked + label:before {
170 |     background-position: 0 (-$star-size);
171 |     display: block;
172 |     animation-duration: 1s;
173 |     animation-name: grow;
174 |     animation-fill-mode: forwards;
175 |   }
176 | }
177 | 
178 | @keyframes grow-rotate {
179 | 
180 |   0% {
181 |     transform: scale(1,1) rotate(0deg);
182 |   }
183 | 
184 |   99% {
185 |     transform: scale(4,4) rotate(90deg);
186 |     opacity: 0;
187 |   }
188 | 
189 |   100% {
190 |     transform: scale(1,1) rotate(0deg);
191 |     opacity: 0;
192 |   }
193 | }
194 | 
195 | .starability-growRotate {
196 |   @include starability-base;
197 | 
198 |   > label:before {
199 |     @include starability-animation-base;
200 |     bottom: 0;
201 |   }
202 | 
203 |   > input:checked + label:before {
204 |     background-position: 0 (-$star-size);
205 |     display: block;
206 |     animation-duration: 1s;
207 |     animation-name: grow-rotate;
208 |     animation-fill-mode: forwards;
209 |   }
210 | }
211 | 
212 | @keyframes fade {
213 | 
214 |   0% {
215 |     transform: translateY($star-size);
216 |   }
217 | 
218 |   80% {
219 |     opacity: 100%;
220 |   }
221 | 
222 |   100% {
223 |     transform: none;
224 |     opacity: 0;
225 |   }
226 | }
227 | 
228 | .starability-fade {
229 |   @include starability-base;
230 | 
231 |   > label:before {
232 |     @include starability-animation-base;
233 |     background-position: 0 (-$star-size);
234 |     bottom: $star-size;
235 |   }
236 | 
237 |   > input:checked + label:before {
238 |     display: block;
239 |     animation-name: fade;
240 |     animation-duration: 1s;
241 |     animation-fill-mode: forwards;
242 |   }
243 | }
244 | 
245 | @keyframes checkmark {
246 | 
247 |   0% {
248 |     transform: translateX(-0.5 * $star-size);
249 |   }
250 | 
251 |   60% {
252 |     opacity: 1;
253 |   }
254 | 
255 |   70% {
256 |     transform: none;
257 |   }
258 | 
259 |   80% {
260 |     opacity: 1;
261 |   }
262 | 
263 |   100% {
264 |     opacity: 0;
265 |   }
266 | }
267 | 
268 | .starability-checkmark {
269 |   @include starability-base('icons-checkmark');
270 | 
271 |   > label {
272 |     position: static;
273 |     z-index: 2;
274 |   }
275 | 
276 |   > label:before {
277 |     @include starability-animation-base('icons-checkmark');
278 |     background-position: 0 (-2*$star-size);
279 |     right: -$star-size;
280 |   }
281 | 
282 |   > input:checked + label:before {
283 |     display: block;
284 |     animation-name: checkmark;
285 |     animation-duration: .7s;
286 |     animation-fill-mode: forwards;
287 |   }
288 | }
289 | </style>
290 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | starability@1.0.5:
6 |   version "1.0.5"
7 |   resolved "https://registry.yarnpkg.com/starability/-/starability-1.0.5.tgz#5419145ec7d57dd169db353089acae19cffd05e0"
8 | 


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