Skip to content

Commit 40b2f6b

Browse files
rstoenescurstoenescu
committed
feat(QRating): Improve consistency (unselected-color --> color & color-selected; icon-content-<i> --> tip-<i>)
1 parent 7a2d975 commit 40b2f6b

File tree

8 files changed

+95
-78
lines changed

8 files changed

+95
-78
lines changed

‎docs/src/examples/QRating/Colors.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
<q-rating
55
v-model="ratingModel"
66
size="3.5em"
7-
:color="ratingColors"
8-
icon="star"
9-
unselected-color="grey"
7+
color="grey"
8+
:color-selected="ratingColors"
109
/>
1110
</div>
1211
</div>

docs/src/examples/QRating/IconContentSlot.vue renamed to docs/src/examples/QRating/SlotTip.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
:max="3"
77
color="primary"
88
>
9-
<template v-slot:icon-content-1>
9+
<template v-slot:tip-1>
1010
<q-tooltip>Not bad</q-tooltip>
1111
</template>
12-
<template v-slot:icon-content-2>
12+
<template v-slot:tip-2>
1313
<q-tooltip>Good</q-tooltip>
1414
</template>
15-
<template v-slot:icon-content-3>
15+
<template v-slot:tip-3>
1616
<q-tooltip>Very good!</q-tooltip>
1717
</template>
1818
</q-rating>
@@ -23,7 +23,7 @@
2323
export default {
2424
data () {
2525
return {
26-
ratingModel: 3
26+
ratingModel: 2
2727
}
2828
}
2929
}

‎docs/src/pages/vue-components/rating.md‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,47 @@ Quasar Rating is a Component which allows users to rate items, usually known as
1111

1212
## Usage
1313

14+
### Basic
15+
1416
<doc-example title="Basic" file="QRating/Basic" />
1517

16-
<doc-example title="With different icon when selected" file="QRating/SelectedIcon" />
18+
<doc-example title="Custom number of choices" file="QRating/Max" />
1719

18-
<doc-example title="With different icon for each rating" file="QRating/ArrayIcon" />
20+
### Icons
1921

20-
<doc-example title="With image icons" file="QRating/Images" />
22+
<doc-example title="Image icons" file="QRating/Images" />
2123

22-
<doc-example title="Custom number of stars" file="QRating/Max" />
24+
In the example below, when using the `icon-selected` prop, notice we can still use `icon` as well. The latter becomes the icon(s) when they are not selected.
2325

24-
<doc-example title="Standard sizes" file="QRating/StandardSizes" />
26+
<doc-example title="Different icon when selected" file="QRating/SelectedIcon" />
2527

26-
<doc-example title="Readonly and disable" file="QRating/ReadonlyDisable" />
28+
<doc-example title="Different icon for each rating" file="QRating/ArrayIcon" />
29+
30+
### Colors
31+
32+
<q-badge label="v1.5.0+" />
33+
34+
When using the `color-selected` prop, notice we can still use `color` as well. The latter becomes the color(s) of the icons when they are not selected.
35+
36+
<doc-example title="Different color for each rating" file="QRating/Colors" />
37+
38+
### Tooltips
2739

28-
<doc-example title="Colors" file="QRating/Colors" />
40+
<q-badge label="v1.5.0+" />
2941

30-
<doc-example title="Icon content slot" file="QRating/IconContentSlot" />
42+
Notice how we can add tooltips to each icon in the example below.
43+
44+
<doc-example title="With QTooltip" file="QRating/SlotTip" />
45+
46+
### Sizes
47+
48+
Apart from the standard sizes below, you can define your own through the `size` property.
49+
50+
<doc-example title="Standard sizes" file="QRating/StandardSizes" />
51+
52+
### Readonly and disable
53+
54+
<doc-example title="Readonly and disable" file="QRating/ReadonlyDisable" />
3155

3256
## QRating API
3357

‎ui/dev/components/form/rating.vue‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,56 @@
55
Model <span class="right-detail"><em>{{ ratingModel }}</em></span>
66
</div>
77

8-
<div style="font-size: 2rem; margin-top: 20px;">
8+
<div class="column q-gutter-md" style="font-size: 2rem; margin-top: 20px;">
99
<q-rating v-model="ratingModel" max="3" @change="onChange" @input="onInput" />
10-
<br>
1110
<q-rating v-model="ratingModel" color="primary" max="5" icon="pets" @input="onInput" />
12-
<br>
1311
<q-rating color="teal" v-model="ratingModel" max="9" icon="thumb_up" />
14-
<br>
1512
<q-rating size="3rem" color="red" v-model="ratingModel" :max="6" icon="favorite_border" />
16-
<br>
1713
<q-rating size="3rem" color="red" v-model="ratingModel" :max="6" icon="img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
18-
<br>
1914
<q-rating size="3rem" color="red" v-model="ratingModel" :max="6" icon="star_border" icon-selected="star" />
20-
<br>
2115
<q-rating size="3rem" color="red" v-model="moodModel" :max="4" :icon="ratingIcons" />
22-
<br>
2316
<q-rating size="3rem" :color="ratingColors" v-model="moodModel" :max="4" :icon="ratingIcons" />
17+
<q-rating size="3rem" :color="ratingColors" v-model="moodModel" :max="5" icon="star" :icon-selected="ratingIcons" />
2418
<q-rating
2519
v-model="ratingModel"
2620
size="3.5em"
27-
:color="ratingColors"
28-
unselected-color="grey"
21+
color="grey"
22+
:color-selected="ratingColors"
23+
icon="star"
24+
/>
25+
<q-rating
26+
v-model="ratingModel"
27+
size="3.5em"
28+
color="grey"
29+
color-selected="green-7"
2930
icon="star"
3031
/>
3132
</div>
3233

33-
<p class="caption">
34-
Readonly State
35-
</p>
36-
<q-rating size="2rem" color="primary" v-model="ratingModel" max="6" icon="loyalty" readonly />
37-
38-
<p class="caption">
39-
Disabled State
40-
</p>
41-
<q-rating size="2rem" color="primary" v-model="ratingModel" max="6" icon="create" disable />
42-
4334
<p class="caption">
4435
Slots
4536
</p>
4637
<q-rating size="2rem" color="primary" v-model="ratingModel" max="3">
47-
<template #icon-content-1>
48-
<q-tooltip>Not bad</q-tooltip>
38+
<template #tip-1>
39+
<q-tooltip>Bad</q-tooltip>
4940
</template>
50-
<template #icon-content-2>
41+
<template #tip-2>
5142
<q-tooltip>Good</q-tooltip>
5243
</template>
53-
<template #icon-content-3>
44+
<template #tip-3>
5445
<q-tooltip>Very good!</q-tooltip>
5546
</template>
5647
</q-rating>
48+
49+
<p class="caption">
50+
Readonly State
51+
</p>
52+
<q-rating size="2rem" color="primary" v-model="ratingModel" max="6" icon="loyalty" readonly />
53+
54+
<p class="caption">
55+
Disabled State
56+
</p>
57+
<q-rating size="2rem" color="primary" v-model="ratingModel" max="6" icon="create" disable />
5758
</div>
5859
</div>
5960
</template>

‎ui/src/components/rating/QRating.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ export default Vue.extend({
2828
iconSelected: [String, Array],
2929

3030
color: [String, Array],
31+
colorSelected: [String, Array],
3132

3233
noReset: Boolean,
33-
unselectedColor: String,
3434

3535
readonly: Boolean,
3636
disable: Boolean
@@ -50,23 +50,25 @@ export default Vue.extend({
5050
classes () {
5151
return `q-rating--${this.editable === true ? '' : 'non-'}editable` +
5252
(this.disable === true ? ' disabled' : '') +
53-
(this.color !== void 0 && Array.isArray(this.color) === false && this.unselectedColor === void 0 ? ` text-${this.color}` : '') +
54-
(this.unselectedColor !== void 0 ? ' q-rating--uncolored' : '')
53+
(this.color !== void 0 && Array.isArray(this.color) === false ? ` text-${this.color}` : '')
5554
},
5655

5756
iconData () {
5857
const
59-
len = Array.isArray(this.icon) === true ? this.icon.length : 0,
60-
selectedLen = Array.isArray(this.iconSelected) === true ? this.iconSelected.length : 0,
61-
colorLen = Array.isArray(this.color) === true ? this.color.length : 0
58+
iconLen = Array.isArray(this.icon) === true ? this.icon.length : 0,
59+
selIconLen = Array.isArray(this.iconSelected) === true ? this.iconSelected.length : 0,
60+
colorLen = Array.isArray(this.color) === true ? this.color.length : 0,
61+
selColorLen = Array.isArray(this.colorSelected) === true ? this.colorSelected.length : 0
6262

6363
return {
64-
len,
65-
selectedLen,
64+
iconLen,
65+
icon: iconLen > 0 ? this.icon[iconLen - 1] : this.icon,
66+
selIconLen,
67+
selIcon: selIconLen > 0 ? this.iconSelected[selIconLen - 1] : this.iconSelected,
6668
colorLen,
67-
icon: len > 0 ? this.icon[len - 1] : this.icon,
68-
selected: selectedLen > 0 ? this.iconSelected[selectedLen - 1] : this.iconSelected,
69-
selectedColor: colorLen > 0 ? this.color[colorLen - 1] : void 0
69+
color: colorLen > 0 ? this.color[colorLen - 1] : this.color,
70+
selColorLen,
71+
selColor: selColorLen > 0 ? this.colorSelected[selColorLen - 1] : this.colorSelected
7072
}
7173
}
7274
},
@@ -119,14 +121,14 @@ export default Vue.extend({
119121

120122
for (let i = 1; i <= this.max; i++) {
121123
const
122-
active = (!this.mouseModel && this.value >= i) || (this.mouseModel && this.mouseModel >= i),
123-
exSelected = this.mouseModel && this.value >= i && this.mouseModel < i,
124-
name = icons.selected !== void 0 && (active === true || exSelected === true)
125-
? (i <= icons.selectedLen ? this.iconSelected[i - 1] : icons.selected)
126-
: (i <= icons.len ? this.icon[i - 1] : icons.icon),
127-
color = active === true
128-
? (i <= icons.colorLen ? this.color[i - 1] : icons.selectedColor)
129-
: (this.unselectedColor !== void 0 ? this.unselectedColor : void 0)
124+
active = (this.mouseModel === 0 && this.value >= i) || (this.mouseModel > 0 && this.mouseModel >= i),
125+
exSelected = this.mouseModel > 0 && this.value >= i && this.mouseModel < i,
126+
name = icons.selIcon !== void 0 && (active === true || exSelected === true)
127+
? (i <= icons.selIconLen ? this.iconSelected[i - 1] : icons.selIcon)
128+
: (i <= icons.iconLen ? this.icon[i - 1] : icons.icon),
129+
color = icons.selColor !== void 0 && active === true
130+
? (i <= icons.selColorLen ? this.colorSelected[i - 1] : icons.selColor)
131+
: (i <= icons.colorLen ? this.color[i - 1] : icons.color)
130132

131133
child.push(
132134
h(QIcon, {
@@ -141,15 +143,15 @@ export default Vue.extend({
141143
},
142144
props: { name: name || this.$q.iconSet.rating.icon },
143145
attrs: { tabindex },
144-
on: cache(this, 'ico#' + i, {
146+
on: cache(this, 'i#' + i, {
145147
click: () => { this.__set(i) },
146148
mouseover: () => { this.__setHoverValue(i) },
147149
mouseout: () => { this.mouseModel = 0 },
148150
focus: () => { this.__setHoverValue(i) },
149151
blur: () => { this.mouseModel = 0 },
150152
keyup: e => { this.__keyup(e, i) }
151153
})
152-
}, slot(this, `icon-content-${i}`))
154+
}, slot(this, `tip-${i}`))
153155
)
154156
}
155157

‎ui/src/components/rating/QRating.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@
5252
"examples": [ "primary", "teal-10", "[\"accent\", \"grey-7\"] "]
5353
},
5454

55+
"color-selected": {
56+
"extends": "color",
57+
"type": [ "String", "Array" ],
58+
"desc": "Color name from the Quasar Palette for selected icons",
59+
"addedIn": "v1.5.0"
60+
},
61+
5562
"no-reset": {
5663
"type": "Boolean",
5764
"desc": "When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0",
@@ -64,12 +71,6 @@
6471

6572
"disable": {
6673
"extends": "disable"
67-
},
68-
69-
"unselected-color": {
70-
"extends": "color",
71-
"desc": "Color name from the Quasar Palette for unselected icons",
72-
"addedIn": "v1.5.0"
7374
}
7475
},
7576

@@ -80,8 +81,8 @@
8081
},
8182

8283
"slots": {
83-
"icon-content-[index]": {
84-
"desc": "Slot to define the content of the icon at '[index]'. Suggestion: QTooltip",
84+
"tip-[index]": {
85+
"desc": "Slot to define the tooltip of icon at '[index]' (1-based); Suggestion: QTooltip",
8586
"addedIn": "v1.5.0"
8687
}
8788
}

‎ui/src/components/rating/QRating.sass‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,3 @@
2323
cursor: pointer
2424
&--non-editable span, .q-icon
2525
outline: 0
26-
27-
&--uncolored
28-
color: unset
29-
& .q-rating__icon--exselected
30-
opacity: .4

‎ui/src/components/rating/QRating.styl‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,3 @@
2323
cursor pointer
2424
&--non-editable span, .q-icon
2525
outline 0
26-
27-
&--uncolored
28-
color unset
29-
& .q-rating__icon--exselected
30-
opacity .4

0 commit comments

Comments
 (0)