Skip to content

Commit 35403f1

Browse files
rstoenescurstoenescu
committed
feat: Label prop for QRadio, QCheckbox and QToggle
1 parent 30a7313 commit 35403f1

38 files changed

+269
-381
lines changed

‎dev/components/form/checkbox.vue‎

Lines changed: 26 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,36 @@
66
</div>
77

88
<p class="caption">Standalone</p>
9-
<q-checkbox v-model="checked" checked-icon="sentiment very satisfied" unchecked-icon="sentiment very dissatisfied"></q-checkbox>
10-
<q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px"></q-checkbox>
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" />
1111

1212
<br><br>
13-
<div class="column group">
14-
<q-checkbox v-model="checked" style="margin-bottom: 15px"></q-checkbox>
15-
<label>
16-
<q-checkbox v-model="checked"></q-checkbox>
17-
Checkbox Label
18-
</label>
19-
20-
<label>
21-
<q-checkbox v-model="checked" color="teal"></q-checkbox>
22-
Checkbox Label
23-
</label>
24-
25-
<label>
26-
<q-checkbox v-model="checked" color="orange"></q-checkbox>
27-
Checkbox Label
28-
</label>
13+
<q-checkbox v-model="checked" />
14+
<br><br>
15+
<q-checkbox v-model="checked" label="Label" />
16+
<br><br>
2917

30-
<label>
31-
<q-checkbox v-model="checked" color="dark"></q-checkbox>
32-
Checkbox Label
33-
</label>
34-
</div>
18+
<q-checkbox v-model="checked" label="Checkbox Label" />
19+
<br><br>
20+
<q-checkbox v-model="checked" color="teal" label="Checkbox Label" />
21+
<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" />
3525

3626
<p class="caption">Array Model</p>
37-
<div class="column group">
38-
<div class="label bg-secondary text-white">
39-
Model <span class="right-detail"><em>{{selection}}</em></span>
40-
</div>
41-
42-
<label>
43-
<q-checkbox v-model="selection" val="one"></q-checkbox>
44-
One
45-
</label>
46-
<label>
47-
<q-checkbox v-model="selection" val="two"></q-checkbox>
48-
Two
49-
</label>
50-
<label>
51-
<q-checkbox v-model="selection" val="three"></q-checkbox>
52-
Three
53-
</label>
27+
<div class="label bg-secondary text-white">
28+
Model <span class="right-detail"><em>{{selection}}</em></span>
5429
</div>
5530

31+
<q-checkbox v-model="selection" val="one" label="One" />
32+
<br><br>
33+
<q-checkbox v-model="selection" val="two" label="Two" />
34+
<br><br>
35+
<q-checkbox v-model="selection" val="three" label="Three" />
36+
5637
<p class="caption">Disabled State</p>
57-
<label>
58-
<q-checkbox v-model="checked" disable></q-checkbox>
59-
Checkbox Label
60-
</label>
38+
<q-checkbox v-model="checked" disable label="Disabled Checkbox" />
6139

6240
<q-field
6341
icon="cloud"
@@ -105,20 +83,20 @@
10583
Notifications
10684
</div>
10785
</label>
108-
<label class="item two-lines">
86+
<label class="item">
10987
<div class="item-primary">
11088
<q-checkbox v-model="checked"></q-checkbox>
11189
</div>
112-
<div class="item-content">
90+
<div class="item-content text">
11391
<div>Notifications</div>
11492
<div>Allow notifications</div>
11593
</div>
11694
</label>
117-
<label class="item three-lines">
95+
<label class="item">
11896
<div class="item-primary">
11997
<q-checkbox v-model="checked"></q-checkbox>
12098
</div>
121-
<div class="item-content">
99+
<div class="item-content text">
122100
<div>Notifications</div>
123101
<div>Allow notifications Allow notifications Allow notifications Allow notifications Allow notifications </div>
124102
</div>

‎dev/components/form/input.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,7 @@
4444
</div>
4545

4646
<p class="caption">With loading state</p>
47-
<q-label>
48-
<q-checkbox v-model="loading" />
49-
<span>Loading (click me)</span>
50-
</q-label>
47+
<q-checkbox v-model="loading" label="Loading (click me)" />
5148
<q-input :loading="loading" v-model="text" placeholder="Gigi" />
5249
<q-input :loading="loading" v-model="text" stack-label="Float Label" placeholder="Gigi" />
5350
<q-input :loading="loading" inverted v-model="text" stack-label="Float Label" placeholder="Gigi" />
@@ -131,10 +128,9 @@
131128

132129
<q-input v-model="area" type="textarea" float-label="Textarea" :max-height="100" :min-rows="3" />
133130

134-
<q-label class="fixed" style="bottom: 16px; right: 16px;">
135-
<q-checkbox v-model="error" />
136-
<span>Error</span>
137-
</q-label>
131+
<div class="fixed" style="bottom: 16px; right: 16px;">
132+
<q-checkbox v-model="error" label="Error" />
133+
</div>
138134
</div>
139135
</div>
140136
</template>

‎dev/components/form/radio.vue‎

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,16 @@
66
</div>
77

88
<p class="caption">Standalone</p>
9-
<div class="column group">
10-
<q-radio v-model="option" val="opt1" style="margin-bottom: 15px"></q-radio>
11-
<label>
12-
<q-radio v-model="option" val="opt2"></q-radio>
13-
Option 2
14-
</label>
15-
<label>
16-
<q-radio v-model="option" val="opt3" color="teal"></q-radio>
17-
Option 3
18-
</label>
19-
<label>
20-
<q-radio v-model="option" val="opt4" color="orange"></q-radio>
21-
Option 4
22-
</label>
23-
</div>
9+
<q-radio v-model="option" val="opt1" />
10+
<br><br>
11+
<q-radio v-model="option" val="opt2" label="Option 2" />
12+
<br><br>
13+
<q-radio v-model="option" val="opt3" color="teal" label="Option 3" />
14+
<br><br>
15+
<q-radio v-model="option" val="opt4" color="orange" label="Option 4" />
2416

2517
<p class="caption">Disabled State</p>
26-
<label>
27-
<q-radio v-model="option" val="opt1" disable></q-radio>
28-
Option 1
29-
</label>
18+
<q-radio v-model="option" val="opt1" disable label="Option 1 - Disabled" />
3019

3120
<q-field
3221
icon="cloud"
@@ -39,8 +28,8 @@
3928
v-model="group"
4029
:options="[
4130
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
42-
{ label: 'Option 3', value: 'op3' },
43-
{ label: 'Option 4', value: 'op4' }
31+
{ label: 'Option 3', value: 'op3', color: 'secondary' },
32+
{ label: 'Option 4', value: 'op4', color: 'amber' }
4433
]"
4534
/>
4635
</q-field>
@@ -56,8 +45,8 @@
5645
v-model="group"
5746
:options="[
5847
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
59-
{ label: 'Option 3', value: 'op3' },
60-
{ label: 'Option 4', value: 'op4' }
48+
{ label: 'Option 3', value: 'op3', color: 'secondary' },
49+
{ label: 'Option 4', value: 'op4', color: 'amber' }
6150
]"
6251
/>
6352
</q-field>
@@ -73,8 +62,8 @@
7362
inline
7463
:options="[
7564
{ label: 'Option 2', value: 'op2' },
76-
{ label: 'Option 3', value: 'op3' },
77-
{ label: 'Option 4', value: 'op4' }
65+
{ label: 'Option 3', value: 'op3', color: 'secondary' },
66+
{ label: 'Option 4', value: 'op4', color: 'amber' }
7867
]"
7968
/>
8069
</q-field>
@@ -89,20 +78,20 @@
8978
Option 1
9079
</div>
9180
</label>
92-
<label class="item two-lines">
81+
<label class="item">
9382
<div class="item-primary">
9483
<q-radio v-model="option" val="opt2"></q-radio>
9584
</div>
96-
<div class="item-content">
85+
<div class="item-content text">
9786
<div>Option 2</div>
9887
<div>Allows notifications</div>
9988
</div>
10089
</label>
101-
<label class="item three-lines">
90+
<label class="item">
10291
<div class="item-primary">
10392
<q-radio v-model="option" val="opt3"></q-radio>
10493
</div>
105-
<div class="item-content">
94+
<div class="item-content text">
10695
<div>Option 3</div>
10796
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
10897
</div>

‎dev/components/form/toggle.vue‎

Lines changed: 25 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,70 +6,36 @@
66
</div>
77

88
<p class="caption">Standalone</p>
9-
<div class="column group">
10-
<q-toggle v-model="checked" style="margin-bottom: 15px"></q-toggle>
11-
<label>
12-
<q-toggle v-model="checked"></q-toggle>
13-
Toggle Label
14-
</label>
15-
16-
<label>
17-
<q-toggle v-model="checked" color="orange"></q-toggle>
18-
Toggle Label
19-
</label>
20-
21-
<label>
22-
<q-toggle v-model="checked" color="teal"></q-toggle>
23-
Toggle Label
24-
</label>
25-
26-
<label>
27-
<q-toggle v-model="checked" color="dark"></q-toggle>
28-
Toggle Label
29-
</label>
30-
</div>
9+
<q-toggle v-model="checked" />
10+
<br><br>
11+
<q-toggle v-model="checked" label="Toggle Label" />
12+
<br><br>
13+
<q-toggle v-model="checked" color="orange" label="Toggle Label" />
14+
<br><br>
15+
<q-toggle v-model="checked" color="teal" label="Toggle Label" />
16+
<br><br>
17+
<q-toggle v-model="checked" color="dark" label="Toggle Label" />
3118

3219
<p class="caption">Array Model</p>
33-
<div class="column group">
34-
<div class="label bg-secondary text-white">
35-
Model <span class="right-detail"><em>{{selection}}</em></span>
36-
</div>
37-
38-
<label>
39-
<q-toggle v-model="selection" val="one"></q-toggle>
40-
One
41-
</label>
42-
<label>
43-
<q-toggle v-model="selection" val="two"></q-toggle>
44-
Two
45-
</label>
46-
<label>
47-
<q-toggle v-model="selection" val="three"></q-toggle>
48-
Three
49-
</label>
20+
<div class="label bg-secondary text-white">
21+
Model <span class="right-detail"><em>{{selection}}</em></span>
5022
</div>
5123

24+
<q-toggle v-model="selection" val="one" label="One" />
25+
<br><br>
26+
<q-toggle v-model="selection" val="two" label="Two" />
27+
<br><br>
28+
<q-toggle v-model="selection" val="three" label="Three" />
29+
5230
<p class="caption">With Icon</p>
53-
<div class="column group">
54-
<label>
55-
<q-toggle v-model="checked" icon="alarm"></q-toggle>
56-
Toggle Label
57-
</label>
58-
<label>
59-
<q-toggle v-model="checked" icon="mail" color="secondary"></q-toggle>
60-
Toggle Label
61-
</label>
62-
<label>
63-
<q-toggle v-model="checked" unchecked-icon="visibility_off" checked-icon="visibility" color="red"></q-toggle>
64-
Toggle Label
65-
</label>
66-
</div>
31+
<q-toggle v-model="checked" icon="alarm" label="Toggle Label" />
32+
<br><br>
33+
<q-toggle v-model="checked" icon="mail" color="secondary" label="Toggle Label" />
34+
<br><br>
35+
<q-toggle v-model="checked" unchecked-icon="visibility_off" checked-icon="visibility" color="red" label="Toggle Label" />
6736

6837
<p class="caption">Disabled State</p>
69-
<label>
70-
<q-toggle v-model="checked" disable></q-toggle>
71-
Toggle Label
72-
</label>
38+
<q-toggle v-model="checked" disable label="Toggle Label" />
7339

7440
<q-field
7541
icon="cloud"
@@ -83,8 +49,8 @@
8349
v-model="group"
8450
:options="[
8551
{ label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
86-
{ label: 'Option 3', value: 'op3' },
87-
{ label: 'Option 4', value: 'op4' }
52+
{ label: 'Option 3', value: 'op3', color: 'secondary' },
53+
{ label: 'Option 4', value: 'op4', color: 'tertiary' }
8854
]"
8955
/>
9056
</q-field>

‎dev/components/other/vue-transitions.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@
99
on the Toggle below to see the transition in action.
1010
</p>
1111
<p>
12-
<q-label>
13-
<q-toggle v-model="visible"></q-toggle>
14-
<span>Visible image</span>
15-
</q-label>
12+
<q-toggle v-model="visible" label="Visible image" />
1613
</p>
1714

1815
<q-slide-transition>

‎src/components.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export * from './components/input'
2121
export * from './components/input-frame'
2222
export * from './components/item'
2323
export * from './components/knob'
24-
export * from './components/label'
2524
export * from './components/layout'
2625
export * from './components/modal'
2726
export * from './components/observables'

0 commit comments

Comments
 (0)