Skip to content

Commit 11d6fc3

Browse files
rstoenescurstoenescu
committed
feat(QCheckbox/QRadio/QToggle): size prop; QToggle indeterminate state quasarframework#6057 
1 parent 0c7af12 commit 11d6fc3

File tree

23 files changed

+593
-483
lines changed

23 files changed

+593
-483
lines changed

‎ui/dev/src/pages/form/checkbox-radio-toggle-test.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,74 @@
2121
<q-toggle v-model="checked2" :disable="disable" :dark="dark" color="accent" label="Toggle Label" :keep-color="keepColor" />
2222
<q-toggle v-model="checked3" :disable="disable" :dark="dark" color="teal" label="Toggle Label" :keep-color="keepColor" />
2323
</div>
24+
25+
<div class="row items-center q-mb-md">
26+
<span class="text-h6 q-mr-md">Sizes</span>
27+
<div>
28+
( <q-toggle v-model="dense" label="Dense" :dark="dark" /> )
29+
</div>
30+
</div>
31+
<q-markup-table :dark="dark">
32+
<tbody>
33+
<tr v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size">
34+
<td>
35+
<q-radio
36+
:size="size"
37+
:label="size"
38+
v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
39+
/>
40+
</td>
41+
<td>
42+
<q-checkbox
43+
:size="size"
44+
:label="size"
45+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
46+
/>
47+
</td>
48+
<td>
49+
<q-toggle
50+
:size="size"
51+
:label="size"
52+
unchecked-icon="visibility_off" checked-icon="visibility"
53+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
54+
/>
55+
</td>
56+
</tr>
57+
</tbody>
58+
</q-markup-table>
59+
60+
<q-markup-table class="q-mt-lg" separator="cell" :dark="dark">
61+
<tbody>
62+
<tr>
63+
<td v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size">
64+
<q-radio
65+
:size="size"
66+
:label="size"
67+
v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
68+
/>
69+
</td>
70+
</tr>
71+
<tr>
72+
<td v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size">
73+
<q-checkbox
74+
:size="size"
75+
:label="size"
76+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
77+
/>
78+
</td>
79+
</tr>
80+
<tr>
81+
<td v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size">
82+
<q-toggle
83+
:size="size"
84+
:label="size"
85+
unchecked-icon="visibility_off" checked-icon="visibility"
86+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
87+
/>
88+
</td>
89+
</tr>
90+
</tbody>
91+
</q-markup-table>
2492
</div>
2593
</template>
2694

@@ -31,6 +99,7 @@ export default {
3199
keepColor: true,
32100
disable: true,
33101
dark: null,
102+
dense: false,
34103
35104
checked: true,
36105
checked2: false,

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,17 @@
1414
<q-checkbox v-model="checked" checked-icon="sentiment very satisfied" unchecked-icon="sentiment very dissatisfied" indeterminate-icon="help" :dark="dark" :dense="dense" :keep-color="keepColor" />
1515
<q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" />
1616

17+
<p class="caption">
18+
Sizes
19+
</p>
20+
<q-checkbox
21+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
22+
:key="size"
23+
:size="size"
24+
:label="size"
25+
v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor"
26+
/>
27+
1728
<p class="caption">
1829
Indeterminate
1930
</p>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@
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>
2020

21+
<p class="caption">
22+
Sizes
23+
</p>
24+
<q-radio
25+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
26+
:key="size"
27+
:size="size"
28+
:label="size"
29+
v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
30+
/>
31+
2132
<p class="caption">
2233
Label on the left side
2334
</p>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,38 @@
1616
<q-toggle v-model="checked" color="orange" label="Toggle Label" :dark="dark" :dense="dense" :keep-color="keepColor" />
1717
<q-toggle v-model="checked" color="teal" label="Toggle Label" :dark="dark" :dense="dense" :keep-color="keepColor" />
1818

19+
<p class="caption">
20+
Sizes
21+
</p>
22+
<div>
23+
<q-toggle
24+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
25+
:key="size"
26+
:size="size"
27+
:label="size"
28+
unchecked-icon="visibility_off" checked-icon="visibility"
29+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
30+
/>
31+
</div>
32+
<div>
33+
<q-toggle
34+
v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
35+
:key="size"
36+
:size="size"
37+
:label="size"
38+
:unchecked-icon="mdiEyeOff" :checked-icon="mdiEye"
39+
v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor"
40+
/>
41+
</div>
42+
43+
<p class="caption">
44+
Indeterminate
45+
</p>
46+
<q-toggle v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
47+
<q-toggle v-model="indModel" unchecked-icon="visibility_off" checked-icon="visibility" indeterminate-icon="help" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
48+
<q-toggle v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="accent" label="Three states" />
49+
<q-toggle size="100px" v-model="indModel" unchecked-icon="visibility_off" checked-icon="visibility" indeterminate-icon="help" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
50+
1951
<p class="caption">
2052
Label on the left side
2153
</p>
@@ -168,12 +200,19 @@
168200
</template>
169201

170202
<script>
203+
import { mdiEye, mdiEyeOff } from '@quasar/extras/mdi-v4'
204+
171205
export default {
206+
created () {
207+
this.mdiEye = mdiEye
208+
this.mdiEyeOff = mdiEyeOff
209+
},
172210
data () {
173211
return {
174212
checked: true,
175213
group: ['op3'],
176214
selection: ['two'],
215+
indModel: null,
177216
dark: null,
178217
dense: false,
179218
keepColor: false

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

Lines changed: 29 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -2,102 +2,42 @@ import Vue from 'vue'
22

33
import CheckboxMixin from '../../mixins/checkbox.js'
44

5-
import { slot, mergeSlot } from '../../utils/slot.js'
6-
import { cache } from '../../utils/vm.js'
7-
85
export default Vue.extend({
96
name: 'QCheckbox',
107

118
mixins: [ CheckboxMixin ],
129

13-
props: {
14-
toggleIndeterminate: Boolean,
15-
indeterminateValue: { default: null }
16-
},
17-
18-
computed: {
19-
isIndeterminate () {
20-
return this.value === void 0 || this.value === this.indeterminateValue
21-
},
22-
23-
classes () {
24-
return {
25-
'disabled': this.disable,
26-
'q-checkbox--dark': this.isDark,
27-
'q-checkbox--dense': this.dense,
28-
'reverse': this.leftLabel
29-
}
30-
},
31-
32-
innerClass () {
33-
if (this.isTrue === true) {
34-
return 'q-checkbox__inner--active' +
35-
(this.color !== void 0 ? ' text-' + this.color : '')
36-
}
37-
else if (this.isIndeterminate === true) {
38-
return 'q-checkbox__inner--indeterminate' +
39-
(this.color !== void 0 ? ' text-' + this.color : '')
40-
}
41-
else if (this.keepColor === true && this.color !== void 0) {
42-
return 'text-' + this.color
43-
}
10+
methods: {
11+
__getInner (h) {
12+
return [
13+
h('div', {
14+
staticClass: 'q-checkbox__bg absolute'
15+
}, [
16+
h('svg', {
17+
staticClass: 'q-checkbox__check fit absolute-full',
18+
attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24' }
19+
}, [
20+
h('path', {
21+
staticClass: 'q-checkbox__check-det',
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__check-indet',
30+
attrs: {
31+
d: 'M4,14H20V10H4'
32+
}
33+
})
34+
])
35+
])
36+
]
4437
}
4538
},
4639

47-
render (h) {
48-
const content = [
49-
h('div', {
50-
staticClass: 'q-checkbox__bg absolute'
51-
}, [
52-
h('svg', {
53-
staticClass: 'q-checkbox__check fit absolute-full',
54-
attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24' }
55-
}, [
56-
h('path', {
57-
attrs: {
58-
fill: 'none',
59-
d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
60-
}
61-
})
62-
]),
63-
64-
h('div', { staticClass: 'q-checkbox__check-indet absolute' })
65-
])
66-
]
67-
68-
this.disable !== true && content.unshift(
69-
h('input', {
70-
staticClass: 'q-checkbox__native q-ma-none q-pa-none invisible',
71-
attrs: { type: 'checkbox' }
72-
})
73-
)
74-
75-
const child = [
76-
h('div', {
77-
staticClass: 'q-checkbox__inner relative-position no-pointer-events',
78-
class: this.innerClass
79-
}, content)
80-
]
81-
82-
const label = this.label !== void 0
83-
? mergeSlot([ this.label ], this, 'default')
84-
: slot(this, 'default')
85-
86-
label !== void 0 && child.push(
87-
h('div', {
88-
staticClass: 'q-checkbox__label q-anchor--skip'
89-
}, label)
90-
)
91-
92-
return h('div', {
93-
staticClass: 'q-checkbox cursor-pointer no-outline row inline no-wrap items-center',
94-
class: this.classes,
95-
attrs: { tabindex: this.computedTabindex },
96-
on: cache(this, 'inpExt', {
97-
click: this.toggle,
98-
keydown: this.__onKeydown,
99-
keyup: this.__onKeyup
100-
})
101-
}, child)
40+
created () {
41+
this.type = 'checkbox'
10242
}
10343
})

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

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

44
"meta": {
55
"docsUrl": "https://v1.quasar.dev/vue-components/checkbox"
6-
},
7-
8-
"props": {
9-
"indeterminate-value": {
10-
"type": "Any",
11-
"desc": "What model value should be considered as 'indeterminate'?",
12-
"default": null,
13-
"examples": [ 0, "not_answered" ],
14-
"category": "behavior"
15-
},
16-
17-
"toggle-indeterminate": {
18-
"type": "Boolean",
19-
"desc": "When user clicks/taps on the component, should we toggle through the indeterminate state too?",
20-
"category": "behavior"
21-
}
226
}
237
}

0 commit comments

Comments
 (0)