Skip to content

Commit 58aca0c

Browse files
rstoenescurstoenescu
committed
feat: [Request] Color for QCheckbox, QRadio and QToggle when unchecked quasarframework#973 + dark property
1 parent ad3965b commit 58aca0c

File tree

19 files changed

+174
-116
lines changed

19 files changed

+174
-116
lines changed

‎dev/components/form/checkbox.vue‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,54 @@
11
<template>
22
<div>
3-
<div class="layout-padding">
3+
<div class="layout-padding" :class="`bg-${dark ? 'black' : 'white'}${dark ? ' text-white' : ''}`">
44
<div class="label bg-secondary text-white">
55
Model <span class="right-detail"><em>{{checked}}</em></span>
66
</div>
7+
<q-toggle v-model="dark" label="Dark" />
8+
<q-toggle v-model="keepColor" label="Keep Color" />
79

810
<p class="caption">Standalone</p>
9-
<q-checkbox v-model="checked" checked-icon="sentiment very satisfied" unchecked-icon="sentiment very dissatisfied" />
10-
<q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" />
11+
<q-checkbox v-model="checked" checked-icon="sentiment very satisfied" unchecked-icon="sentiment very dissatisfied" :dark="dark" :keep-color="keepColor" />
12+
<q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" :dark="dark" :keep-color="keepColor" />
1113

1214
<br><br>
13-
<q-checkbox @change="onChange" v-model="checked" />
15+
<q-checkbox @change="onChange" v-model="checked" :dark="dark" :keep-color="keepColor" />
1416
<br><br>
15-
<q-checkbox v-model="checked" label="Label" />
17+
<q-checkbox v-model="checked" label="Label" :dark="dark" :keep-color="keepColor" />
1618
<br><br>
1719

18-
<q-checkbox v-model="checked" label="Checkbox Label" />
20+
<q-checkbox v-model="checked" label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
1921
<br><br>
20-
<q-checkbox v-model="checked" color="teal" label="Checkbox Label" />
22+
<q-checkbox v-model="checked" color="teal" label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
2123
<br><br>
22-
<q-checkbox v-model="checked" color="orange" label="Checkbox Label" />
23-
<br><br>
24-
<q-checkbox v-model="checked" color="dark" label="Checkbox Label" />
24+
<q-checkbox v-model="checked" color="orange" label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
2525

2626
<p class="caption">Label on the left side</p>
27-
<q-checkbox v-model="checked" color="teal" left-label label="Checkbox Label" />
27+
<q-checkbox v-model="checked" color="teal" left-label label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
2828
<br><br>
29-
<q-checkbox v-model="checked" color="orange" left-label label="Checkbox Label" />
29+
<q-checkbox v-model="checked" color="orange" left-label label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
3030
<br><br>
31-
<q-checkbox v-model="checked" color="dark" left-label label="Checkbox Label" />
31+
<q-checkbox v-model="checked" color="dark" left-label label="Checkbox Label" :dark="dark" :keep-color="keepColor" />
3232

3333
<p class="caption">Array Model</p>
3434
<div class="label bg-secondary text-white">
3535
Model <span class="right-detail"><em>{{selection}}</em></span>
3636
</div>
3737

38-
<q-checkbox @change="onChange" v-model="selection" val="one" label="One" />
38+
<q-checkbox @change="onChange" v-model="selection" val="one" label="One" :dark="dark" :keep-color="keepColor" />
3939
<br><br>
40-
<q-checkbox @change="onChange" v-model="selection" val="two" label="Two" />
40+
<q-checkbox @change="onChange" v-model="selection" val="two" label="Two" :dark="dark" :keep-color="keepColor" />
4141
<br><br>
42-
<q-checkbox @change="onChange" v-model="selection" val="three" label="Three" />
42+
<q-checkbox @change="onChange" v-model="selection" val="three" label="Three" :dark="dark" :keep-color="keepColor" />
4343

4444
<p class="caption">Disabled State</p>
45-
<q-checkbox v-model="checked" disable label="Disabled Checkbox" />
45+
<q-checkbox v-model="checked" disable label="Disabled Checkbox" :dark="dark" :keep-color="keepColor" />
4646

4747
<q-field
4848
icon="cloud"
4949
helper="Helper"
5050
label="Horizontal"
51+
:dark="dark"
5152
error-label="Max 10 characters!"
5253
>
5354
<q-option-group
@@ -56,6 +57,8 @@
5657
color="secondary"
5758
v-model="group"
5859
@change="onChange"
60+
:dark="dark"
61+
:keep-color="keepColor"
5962
:options="[
6063
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
6164
{ label: 'Option 3', value: 'op3' },
@@ -68,6 +71,7 @@
6871
icon="cloud"
6972
helper="Helper"
7073
label="Horizontal"
74+
:dark="dark"
7175
error-label="Max 10 characters!"
7276
>
7377
<q-option-group
@@ -76,9 +80,9 @@
7680
@focus="onFocus"
7781
@blur="onBlur"
7882
:options="[
79-
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
80-
{ label: 'Option 3', value: 'op3' },
81-
{ label: 'Option 4', value: 'op4' }
83+
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2', dark, keepColor },
84+
{ label: 'Option 3', value: 'op3', dark, keepColor },
85+
{ label: 'Option 4', value: 'op4', dark, keepColor }
8286
]"
8387
/>
8488
</q-field>
@@ -87,15 +91,15 @@
8791
<q-list link>
8892
<q-item tag="label">
8993
<q-item-side>
90-
<q-checkbox @change="onChange" v-model="checked"></q-checkbox>
94+
<q-checkbox @change="onChange" v-model="checked" :dark="dark" :keep-color="keepColor"></q-checkbox>
9195
</q-item-side>
9296
<q-item-main>
9397
<q-item-tile title>Notification</q-item-tile>
9498
</q-item-main>
9599
</q-item>
96100
<q-item tag="label">
97101
<q-item-side>
98-
<q-checkbox @change="onChange" v-model="checked"></q-checkbox>
102+
<q-checkbox @change="onChange" v-model="checked" :dark="dark" :keep-color="keepColor"></q-checkbox>
99103
</q-item-side>
100104
<q-item-main>
101105
<q-item-tile label>Notification</q-item-tile>
@@ -104,7 +108,7 @@
104108
</q-item>
105109
<q-item tag="label">
106110
<q-item-side>
107-
<q-checkbox @change="onChange" v-model="checked"></q-checkbox>
111+
<q-checkbox @change="onChange" v-model="checked" :dark="dark" :keep-color="keepColor"></q-checkbox>
108112
</q-item-side>
109113
<q-item-main>
110114
<q-item-tile label>Notification</q-item-tile>
@@ -122,7 +126,9 @@ export default {
122126
return {
123127
checked: true,
124128
group: ['op2'],
125-
selection: ['one', 'two', 'three']
129+
selection: ['one', 'two', 'three'],
130+
dark: false,
131+
keepColor: false
126132
}
127133
},
128134
methods: {

‎dev/components/form/radio.vue‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,44 @@
11
<template>
22
<div>
3-
<div class="layout-padding">
3+
<div class="layout-padding" :class="`bg-${dark ? 'black' : 'white'}${dark ? ' text-white' : ''}`">
44
<div class="label bg-secondary text-white">
55
Model <span class="right-detail"><em>{{option}}</em></span>
66
</div>
7+
<q-toggle v-model="dark" label="Dark" />
8+
<q-toggle v-model="keepColor" label="Keep Color" />
79

810
<p class="caption">Standalone</p>
9-
<q-radio @change="onChange" v-model="option" val="opt1" />
11+
<q-radio @change="onChange" v-model="option" val="opt1" :dark="dark" :keep-color="keepColor" />
1012
<br><br>
11-
<q-radio @change="onChange" v-model="option" val="opt2" label="Option 2" />
13+
<q-radio @change="onChange" v-model="option" val="opt2" label="Option 2" :dark="dark" :keep-color="keepColor" />
1214
<br><br>
13-
<q-radio @change="onChange" v-model="option" val="opt3" color="teal" label="Option 3" />
15+
<q-radio @change="onChange" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :keep-color="keepColor" />
1416
<br><br>
15-
<q-radio @change="onChange" v-model="option" val="opt4" color="orange" label="Option 4" />
17+
<q-radio @change="onChange" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :keep-color="keepColor" />
1618

1719
<p class="caption">Label on the left side</p>
18-
<q-radio v-model="option" val="opt2" left-label label="Option 2" />
20+
<q-radio v-model="option" val="opt2" left-label label="Option 2" :dark="dark" :keep-color="keepColor" />
1921
<br><br>
20-
<q-radio v-model="option" val="opt3" left-label color="teal" label="Option 3" />
22+
<q-radio v-model="option" val="opt3" left-label color="teal" label="Option 3" :dark="dark" :keep-color="keepColor" />
2123
<br><br>
22-
<q-radio v-model="option" val="opt4" left-label color="orange" label="Option 4" />
24+
<q-radio v-model="option" val="opt4" left-label color="orange" label="Option 4" :dark="dark" :keep-color="keepColor" />
2325

2426
<p class="caption">Disabled State</p>
25-
<q-radio v-model="option" val="opt1" disable label="Disabled Option 1" />
27+
<q-radio v-model="option" val="opt1" disable label="Disabled Option 1" :dark="dark" :keep-color="keepColor" />
2628

2729
<q-field
2830
icon="cloud"
2931
helper="Helper"
3032
label="Horizontal"
33+
:dark="dark"
3134
error-label="Max 10 characters!"
3235
>
3336
<q-option-group
3437
type="radio"
3538
v-model="group"
3639
@change="onChange"
40+
:dark="dark"
41+
:keep-color="keepColor"
3742
:options="[
3843
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
3944
{ label: 'Option 3', value: 'op3', color: 'secondary' },
@@ -46,15 +51,18 @@
4651
icon="cloud"
4752
helper="Helper"
4853
label="Horizontal"
54+
:dark="dark"
4955
error-label="Max 10 characters!"
5056
>
5157
<q-option-group
5258
inline
5359
v-model="group"
60+
:dark="dark"
61+
:keep-color="keepColor"
5462
:options="[
55-
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
56-
{ label: 'Option 3', value: 'op3', color: 'secondary' },
57-
{ label: 'Option 4', value: 'op4', color: 'amber' }
63+
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2', dark, keepColor },
64+
{ label: 'Option 3', value: 'op3', color: 'secondary', dark, keepColor },
65+
{ label: 'Option 4', value: 'op4', color: 'amber', dark, keepColor }
5866
]"
5967
/>
6068
</q-field>
@@ -63,10 +71,13 @@
6371
icon="cloud"
6472
helper="Helper"
6573
label="Horizontal"
74+
:dark="dark"
6675
error-label="Max 10 characters!"
6776
>
6877
<q-option-group
6978
v-model="group"
79+
:dark="dark"
80+
:keep-color="keepColor"
7081
inline
7182
:options="[
7283
{ label: 'Option 2', value: 'op2' },
@@ -80,15 +91,15 @@
8091
<q-list link>
8192
<q-item tag="label">
8293
<q-item-side>
83-
<q-radio @change="onChange" v-model="option" val="opt1" />
94+
<q-radio @change="onChange" v-model="option" val="opt1" :dark="dark" :keep-color="keepColor" />
8495
</q-item-side>
8596
<q-item-main>
8697
<q-item-tile label>Option 1</q-item-tile>
8798
</q-item-main>
8899
</q-item>
89100
<q-item tag="label">
90101
<q-item-side>
91-
<q-radio @change="onChange" v-model="option" val="opt2" />
102+
<q-radio @change="onChange" v-model="option" val="opt2" :dark="dark" :keep-color="keepColor" />
92103
</q-item-side>
93104
<q-item-main>
94105
<q-item-tile label>Option 2</q-item-tile>
@@ -97,7 +108,7 @@
97108
</q-item>
98109
<q-item tag="label">
99110
<q-item-side>
100-
<q-radio @change="onChange" v-model="option" val="opt3" />
111+
<q-radio @change="onChange" v-model="option" val="opt3" :dark="dark" :keep-color="keepColor" />
101112
</q-item-side>
102113
<q-item-main>
103114
<q-item-tile label>Option 3</q-item-tile>
@@ -114,7 +125,9 @@ export default {
114125
data () {
115126
return {
116127
option: 'opt1',
117-
group: 'op3'
128+
group: 'op3',
129+
dark: false,
130+
keepColor: false
118131
}
119132
},
120133
methods: {

0 commit comments

Comments
 (0)