Skip to content

Commit 771e097

Browse files
SinanMtlSinanMtl
authored
Merge pull request #21 from SinanMtl/feature/Customization
Feature/Customization
2 parents 5b20132 + 3b4f248 commit 771e097

File tree

4 files changed

+88
-23
lines changed

4 files changed

+88
-23
lines changed

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,20 @@ Use HTML template
6565
<rate :length="5" :value="2" :readonly="true" />
6666
```
6767

68+
- `iconref {string}`: ID of symbol icon
69+
70+
Insert symbol icon into your codebase
71+
```html
72+
<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
73+
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
74+
</symbol>
75+
````
76+
77+
Then add Rate component. `iconref` must be symbol's id
78+
```html
79+
<rate :length="5" iconref="icon-heart" />
80+
```
81+
6882
- `v-model`
6983

7084
```javascript

‎dev/App.vue

+66-15
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@
2525
<div class="col-3">
2626
<p>
2727
<strong>Show count (Default value)</strong>
28-
<rate :length="5" :value="3" :showcount="true" />
28+
<rate showcount :length="5" :value="3" />
2929
</p>
3030
</div>
3131
<div class="col-3">
3232
<p>
3333
<strong>Rate Descriptions</strong>
34-
<rate :length="5" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
34+
<rate :length="5" :ratedesc="desc" />
3535
</p>
3636
</div>
3737
<div class="col-3">
3838
<p>
3939
<strong>Rate Descriptions (Default Value)</strong>
40-
<rate :length="5" :value="3" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
40+
<rate :length="5" :value="3" :ratedesc="desc" />
4141
</p>
4242
</div>
4343
<div class="col-3">
4444
<p>
4545
<strong>Rate Descriptions (Read-only)</strong>
46-
<rate :length="5" :value="3" :readonly="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
46+
<rate readonly :length="5" :value="3" :ratedesc="desc" />
4747
</p>
4848
</div>
4949
</div>
@@ -52,25 +52,58 @@
5252
<div class="col-3">
5353
<p>
5454
<strong>Basic</strong>
55-
<rate :length="5" :disabled="true" :showcount="true" />
55+
<rate showcount disabled :length="5" />
5656
</p>
5757
</div>
5858
<div class="col-3">
5959
<p>
6060
<strong>Default value</strong>
61-
<rate :length="5" :value="3" :disabled="true" />
61+
<rate disabled :length="5" :value="3" />
6262
</p>
6363
</div>
6464
<div class="col-3">
6565
<p>
6666
<strong>Show count</strong>
67-
<rate :length="5" :value="3" :disabled="true" :showcount="true" />
67+
<rate disabled showcount :length="5" :value="3" />
6868
</p>
6969
</div>
7070
<div class="col-3">
7171
<p>
7272
<strong>Rate Descriptions</strong>
73-
<rate :length="5" :value="3" :disabled="true" :ratedesc="['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']" />
73+
<rate disabled :length="5" :value="3" :ratedesc="desc" />
74+
</p>
75+
</div>
76+
</div>
77+
78+
<h2>Customization</h2>
79+
<div class="grid">
80+
<div class="flex-primary">
81+
<p>
82+
<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
83+
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
84+
</symbol>
85+
<rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart" />
86+
<details>
87+
<summary>Example</summary>
88+
<div class="code">
89+
<pre>&lt;template&gt;
90+
&lt;symbol id="icon-heart" class="icon" viewBox="0 0 32 32"&gt;
91+
&lt;path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"&gt;&lt;/path&gt;
92+
&lt;/symbol&gt;
93+
94+
&lt;rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart"&gt;
95+
&lt;/template&gt;
96+
97+
&lt;style&gt;
98+
.RateCustom.Rate .icon {
99+
width: 25px;
100+
height: 25px;
101+
}
102+
.RateCustom.Rate .Rate__star.filled { color: blue; }
103+
.RateCustom.Rate .Rate__star.hover { color: red; }
104+
&lt;/style&gt;</pre>
105+
</div>
106+
</details>
74107
</p>
75108
</div>
76109
</div>
@@ -85,7 +118,8 @@ export default {
85118
name: 'App',
86119
data () {
87120
return {
88-
myCurrentRate: 0
121+
myCurrentRate: 3,
122+
desc: ['Very Bad', 'Bad', 'Normal', 'Good', 'Very Good']
89123
}
90124
},
91125
components: {
@@ -122,19 +156,36 @@ export default {
122156
flex-wrap: wrap;
123157
}
124158
159+
.code{
160+
text-align: left;
161+
background-color: #efefef;
162+
border-radius: 10px;
163+
padding: 20px;
164+
overflow: auto;
165+
max-width: 100%;
166+
}
167+
168+
.code pre{margin: 0}
169+
170+
.Rate.RateCustom .icon {
171+
width: 25px;
172+
height: 25px;
173+
}
174+
175+
.Rate.RateCustom .Rate__star.filled{color: teal;}
176+
.Rate.RateCustom .Rate__star.hover{color: red;}
177+
178+
.flex-primary{ flex: 1; width: 100%; }
125179
.grid [class*=col-]{padding: 0 20px;}
126180
.grid .col-3{width: 100%}
127181
128182
@media screen and (min-width: 768px) {
129-
.grid .col-3{
130-
width:50%
131-
}
183+
.grid .col-3{width: 50%;}
184+
.grid .col-2{width: 50%;}
132185
}
133186
134187
@media screen and (min-width: 992px) {
135-
.grid .col-3{
136-
width: 25%;
137-
}
188+
.grid .col-3{width: 25%;}
138189
}
139190
</style>
140191

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-rate",
3-
"version": "2.2.0",
3+
"version": "2.3.0",
44
"description": "Rate component for Vue",
55
"main": "dist/vue-rate.js",
66
"scripts": {

‎src/Rate.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
44
<defs>
55
<symbol id="icon-star-full" viewBox="0 0 32 32">
6-
<title>star-full</title>
76
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
87
</symbol>
98
</defs>
@@ -12,7 +11,7 @@
1211
<template v-for="n in length">
1312
<button type="button" :key="n" :class="{'Rate__star': true, 'hover': n <= over, 'filled': (n <= rate || isFilled(n))}" @mouseover="onOver(n)" @mouseout="onOut(n)" @click="setRate(n)" @keyup="onOver(n)" @keyup.enter="setRate(n)" :disabled="disabled">
1413
<svg class="icon">
15-
<use xlink:href="#icon-star-full"></use>
14+
<use :xlink:href="`#${iconref}`"></use>
1615
</svg>
1716
</button>
1817
</template>
@@ -34,7 +33,8 @@ export default {
3433
required: {type: Boolean},
3534
ratedesc: {type: Array, default () { return [] }},
3635
disabled: {type: Boolean, default: false},
37-
readonly: {type: Boolean, default: false}
36+
readonly: {type: Boolean, default: false},
37+
iconref: { type: String, default: 'icon-star-full' }
3838
},
3939
data () {
4040
return {
@@ -84,8 +84,10 @@ export default {
8484
</script>
8585

8686
<!-- Add "scoped" attribute to limit CSS to this component only -->
87-
<style scoped>
88-
.icon {
87+
<style>
88+
.Rate{cursor: default;}
89+
90+
.Rate .icon {
8991
display: inline-block;
9092
width: 16px;
9193
height: 16px;
@@ -98,8 +100,6 @@ export default {
98100
margin: 0 5px;
99101
}
100102

101-
.Rate{cursor: default;}
102-
103103
.Rate__star{
104104
color: #dedbdb;
105105
display: inline-block;

0 commit comments

Comments
 (0)