Skip to content

Commit 92c8a74

Browse files
pdanpdanrstoenescu
pdanpdan
and
rstoenescu
authored
feat(QCheckbox/QRadio): (backport from Qv2) new props -> checked-icon, unchecked-icon, indeterminate-icon (QCheckbox) quasarframework#12233 (quasarframework#12244)
* feat(QCheckbox, QRadio): new props -> checked-icon, unchecked-icon, indeterminate-icon (QCheckbox) - backport from Qv2 quasarframework#12233 * Update checkbox.md * Update radio.md * Update QCheckbox.json * Update QRadio.json Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>
1 parent 632fb1b commit 92c8a74

File tree

19 files changed

+333
-93
lines changed

19 files changed

+333
-93
lines changed

‎docs/src/examples/QCheckbox/Label.vue‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
11
<template>
22
<div class="q-pa-md">
33
<div class="q-gutter-sm">
4-
<q-checkbox v-model="right" label="Label on Right" />
5-
</div>
6-
<div class="q-gutter-sm">
7-
<q-checkbox left-label v-model="left" label="Label on Left" />
8-
</div>
4+
<div>
5+
<q-checkbox v-model="right" label="Label on Right" />
6+
</div>
7+
8+
<div>
9+
<q-checkbox left-label v-model="left" label="Label on Left" />
10+
</div>
11+
12+
<div>
13+
<q-checkbox
14+
v-model="right2"
15+
label="Swipe"
16+
checked-icon="swipe_left"
17+
unchecked-icon="swipe_right"
18+
color="green"
19+
keep-color
20+
/>
21+
</div>
922

10-
<div class="q-px-sm">
23+
<div>
24+
<q-checkbox
25+
left-label
26+
v-model="left2"
27+
label="I agree"
28+
checked-icon="task_alt"
29+
unchecked-icon="highlight_off"
30+
/>
31+
</div>
1132
</div>
1233
</div>
1334
</template>
@@ -17,7 +38,9 @@ export default {
1738
data () {
1839
return {
1940
left: true,
20-
right: false
41+
right: false,
42+
left2: true,
43+
right2: false
2144
}
2245
}
2346
}

‎docs/src/examples/QCheckbox/Standard.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
<template>
22
<div class="q-pa-md">
3-
<div class="q-gutter-sm">
4-
<q-checkbox v-model="val" />
5-
</div>
6-
7-
<div class="q-px-sm">
8-
</div>
3+
<q-checkbox v-model="val" />
94
</div>
105
</template>
116

‎docs/src/examples/QCheckbox/WithIcons.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-checkbox
4+
v-model="val"
5+
checked-icon="star"
6+
unchecked-icon="star_border"
7+
indeterminate-icon="help"
8+
/>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data () {
15+
return {
16+
val: true
17+
}
18+
}
19+
}
20+
</script>

‎docs/src/examples/QRadio/WithIcons.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-sm">
4+
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="line" label="Line" />
5+
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="rectangle" label="Rectangle" />
6+
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="ellipse" label="Ellipse" />
7+
<q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="polygon" label="Polygon" />
8+
</div>
9+
10+
<div class="q-px-sm">
11+
Your selection is: <strong>{{ shape }}</strong>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
data () {
19+
return {
20+
shape: 'line'
21+
}
22+
}
23+
}
24+
</script>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
2323

2424
<doc-example title="Standard" file="QCheckbox/Standard" />
2525

26+
### With custom icons <q-badge align="top" color="brand-primary" label="v1.18+" />
27+
28+
<doc-example title="With icons" file="QCheckbox/WithIcons" />
29+
2630
### Label
2731

2832
<doc-example title="Label" file="QCheckbox/Label" />

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
2323

2424
<doc-example title="Standard" file="QRadio/Standard" />
2525

26+
### With custom icons <q-badge align="top" color="brand-primary" label="v1.18+" />
27+
28+
<doc-example title="With icons" file="QRadio/WithIcons" />
29+
2630
### Dense
2731

2832
<doc-example title="Dense" file="QRadio/Dense" />

‎ui/dev/src/pages/form/checkbox.vue‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,52 @@
88
<q-toggle v-model="keepColor" :dark="dark" :dense="dense" label="Keep Color" />
99
<q-toggle v-model="dense" :dark="dark" :dense="dense" label="Dense" />
1010

11-
<p class="caption">
11+
<p class="caption q-mt-md q-mb-xs">
1212
Standalone
1313
</p>
14-
<q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" />
15-
<q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" />
14+
<div>
15+
<q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" />
16+
<q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" />
17+
<q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" />
18+
</div>
19+
<div>
20+
<q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
21+
<q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
22+
<q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" color="green" checked-icon="star" unchecked-icon="star_border" />
23+
</div>
1624

17-
<p class="caption">
25+
<p class="caption q-mt-md q-mb-xs">
1826
Sizes
1927
</p>
2028
<q-checkbox
2129
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
22-
:key="size"
30+
:key="'a' + size"
31+
:size="size"
32+
:label="size"
33+
v-model="indModel" :dark="dark" :dense="dense" :keep-color="keepColor"
34+
/>
35+
<div />
36+
<q-checkbox
37+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
38+
:key="'b' + size"
2339
:size="size"
2440
:label="size"
25-
v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor"
41+
checked-icon="star" unchecked-icon="star_border" indeterminate-icon="star_half"
42+
v-model="indModel" :dark="dark" :dense="dense" :keep-color="keepColor"
2643
/>
2744

28-
<p class="caption">
45+
<p class="caption q-mt-md q-mb-xs">
2946
Indeterminate
3047
</p>
3148
<q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
3249
<q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color label="Three states" />
3350
<q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="orange" label="Three states" />
3451
<q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color color="orange" label="Three states" size="100px" />
52+
<div />
53+
<q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
54+
<q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color label="Three states" />
55+
<q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="orange" label="Three states" />
56+
<q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color color="orange" label="Three states" size="100px" />
3557

3658
<p class="caption">
3759
Order ({{ JSON.stringify(orderModel) }})

‎ui/dev/src/pages/form/radio.vue‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,32 @@
1717
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :dense="dense" :keep-color="keepColor" />
1818
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :dense="dense" :keep-color="keepColor" />
1919
</div>
20+
<div class="q-gutter-md">
21+
<q-radio :checked-icon="mdiCheckboxMarkedCircleOutline" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor" />
22+
<q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt2" label="Option 2" :dark="dark" :dense="dense" :keep-color="keepColor" />
23+
<q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :dense="dense" :keep-color="keepColor" />
24+
<q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :dense="dense" :keep-color="keepColor" />
25+
</div>
2026

2127
<p class="caption">
2228
Sizes
2329
</p>
2430
<q-radio
2531
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
26-
:key="size"
32+
:key="'a' + size"
2733
:size="size"
2834
:label="size"
2935
v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
3036
/>
37+
<div />
38+
<q-radio
39+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
40+
:key="'b' + size"
41+
:size="size"
42+
:label="size"
43+
checked-icon="task_alt" unchecked-icon="circle"
44+
v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
45+
/>
3146

3247
<p class="caption">
3348
Label on the left side
@@ -200,6 +215,8 @@
200215
</template>
201216

202217
<script>
218+
import { mdiCheckboxMarkedCircleOutline } from '@quasar/extras/mdi-v6'
219+
203220
export default {
204221
data () {
205222
return {
@@ -225,6 +242,9 @@ export default {
225242
onInput (val) {
226243
console.log('@input', JSON.stringify(val))
227244
}
245+
},
246+
created () {
247+
this.mdiCheckboxMarkedCircleOutline = mdiCheckboxMarkedCircleOutline
228248
}
229249
}
230250
</script>

‎ui/src/components/checkbox/QCheckbox.js‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,65 @@
11
import Vue from 'vue'
22

3+
import QIcon from '../icon/QIcon.js'
4+
35
import CheckboxMixin from '../../mixins/checkbox.js'
46

57
export default Vue.extend({
68
name: 'QCheckbox',
79

810
mixins: [ CheckboxMixin ],
911

12+
computed: {
13+
computedIcon () {
14+
return this.isTrue === true
15+
? this.checkedIcon
16+
: (this.isIndeterminate === true
17+
? this.indeterminateIcon
18+
: this.uncheckedIcon
19+
)
20+
}
21+
},
22+
1023
methods: {
1124
__getInner (h) {
12-
return [
13-
h('div', {
14-
staticClass: 'q-checkbox__bg absolute'
15-
}, [
16-
h('svg', {
17-
staticClass: 'q-checkbox__svg fit absolute-full',
18-
attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24', 'aria-hidden': 'true' }
25+
return this.computedIcon !== void 0
26+
? [
27+
h('div', {
28+
key: 'icon',
29+
staticClass: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
1930
}, [
20-
h('path', {
21-
staticClass: 'q-checkbox__truthy',
22-
attrs: {
23-
fill: 'none',
24-
d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
25-
}
26-
}),
27-
28-
h('path', {
29-
staticClass: 'q-checkbox__indet',
30-
attrs: {
31-
d: 'M4,14H20V10H4'
32-
}
31+
h(QIcon, {
32+
staticClass: 'q-checkbox__icon',
33+
props: { name: this.computedIcon }
3334
})
3435
])
35-
])
36-
]
36+
]
37+
: [
38+
h('div', {
39+
key: 'svg',
40+
staticClass: 'q-checkbox__bg absolute'
41+
}, [
42+
h('svg', {
43+
staticClass: 'q-checkbox__svg fit absolute-full',
44+
attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24', 'aria-hidden': 'true' }
45+
}, [
46+
h('path', {
47+
staticClass: 'q-checkbox__truthy',
48+
attrs: {
49+
fill: 'none',
50+
d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
51+
}
52+
}),
53+
54+
h('path', {
55+
staticClass: 'q-checkbox__indet',
56+
attrs: {
57+
d: 'M4,14H20V10H4'
58+
}
59+
})
60+
])
61+
])
62+
]
3763
}
3864
},
3965

‎ui/src/components/checkbox/QCheckbox.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,22 @@
33

44
"meta": {
55
"docsUrl": "https://v1.quasar.dev/vue-components/checkbox"
6+
},
7+
8+
"props": {
9+
"checked-icon": {
10+
"desc": "The icon to be used when the model is truthy (instead of the default design)",
11+
"addedIn": "v1.18"
12+
},
13+
14+
"unchecked-icon": {
15+
"desc": "The icon to be used when the toggle is falsy (instead of the default design)",
16+
"addedIn": "v1.18"
17+
},
18+
19+
"indeterminate-icon": {
20+
"desc": "The icon to be used when the model is indeterminate (instead of the default design)",
21+
"addedIn": "v1.18"
22+
}
623
}
724
}

0 commit comments

Comments
 (0)