Skip to content

Commit 0a55f4e

Browse files
rstoenescurstoenescu
committed
feat: Button & Editor work
1 parent 55ccd60 commit 0a55f4e

File tree

16 files changed

+368
-472
lines changed

16 files changed

+368
-472
lines changed

‎dev/components/components/button-group.vue‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,36 @@
55
<div v-for="outline in options" :key="outline" v-if="!(push || flat) || !outline">
66
<div v-for="rounded in options" :key="rounded">
77
<div v-for="size in sizes" :key="size" class="q-ma-sm">
8-
<div v-for="disable in options.slice().reverse()" :key="disable">
9-
<p class="caption">
10-
{{push ? 'push ' : ''}}
11-
{{rounded ? 'rounded ' : ''}}
12-
{{outline ? 'outline ' : ''}}
13-
{{flat ? 'flat ' : ''}}
14-
{{size}}
15-
{{disable ? 'disable ' : ''}}
16-
</p>
17-
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
18-
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" :disable="disable">
19-
First
20-
</q-btn>
21-
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" :disable="disable">
22-
Second
23-
</q-btn>
24-
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" :disable="disable">
25-
Third
26-
</q-btn>
27-
</q-btn-group>
28-
</div>
8+
<p class="caption">
9+
{{push ? 'push ' : ''}}
10+
{{rounded ? 'rounded ' : ''}}
11+
{{outline ? 'outline ' : ''}}
12+
{{flat ? 'flat ' : ''}}
13+
{{size}}
14+
</p>
15+
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
16+
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
17+
First
18+
</q-btn>
19+
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
20+
Second
21+
</q-btn>
22+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size">
23+
Third
24+
</q-btn>
25+
</q-btn-group>
26+
27+
<q-btn-group :push="push" :rounded="rounded" :outline="outline" :flat="flat">
28+
<q-btn color="yellow" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
29+
First
30+
</q-btn>
31+
<q-btn color="amber" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
32+
Second
33+
</q-btn>
34+
<q-btn color="orange" :push="push" :rounded="rounded" :outline="outline" :flat="flat" :size="size" disable>
35+
Third
36+
</q-btn>
37+
</q-btn-group>
2938
</div>
3039
</div>
3140
</div>

‎dev/components/components/button-toggle-group.vue‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎dev/components/components/button-toggle.vue‎

Lines changed: 78 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,101 @@
11
<template>
2-
<div class="layout-padding button-group-test">
3-
<q-toggle v-model="toggled" />
4-
<br><br>
2+
<div class="layout-padding button-toggle-group-test">
3+
<p class="caption">
4+
<span>Model: </span>
5+
<strong>{{ model }}</strong>
6+
</p>
57

6-
<q-btn-toggle
7-
v-model="toggled"
8-
toggle-color="primary"
9-
>
10-
Toggle me
11-
</q-btn-toggle>
8+
<div v-for="push in options" :key="push">
9+
<div v-for="flat in options" :key="flat" v-if="!push || !flat">
10+
<div v-for="outline in options" :key="outline" v-if="!(push || flat) || !outline">
11+
<div v-for="glossy in options" :key="glossy" v-if="!(push || flat) || !outline">
12+
<div v-for="rounded in options" :key="rounded">
13+
<div v-for="size in sizes" :key="size" class="q-ma-sm">
14+
<p class="caption">
15+
{{push ? 'push ' : ''}}
16+
{{rounded ? 'rounded ' : ''}}
17+
{{outline ? 'outline ' : ''}}
18+
{{flat ? 'flat ' : ''}}
19+
{{glossy ? 'glossy ' : ''}}
20+
{{size}}
21+
</p>
1222

13-
<q-btn-toggle
14-
v-model="toggled"
15-
color="green"
16-
toggle-color="red"
17-
>
18-
Toggle me
19-
</q-btn-toggle>
23+
<q-btn-toggle v-model="model" toggle-color="primary" color="amber" text-color="dark"
24+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
25+
:options="[
26+
{label: 'One', value: 'one'},
27+
{label: 'Two', value: 'two'},
28+
{label: 'Three', value: 'three'}
29+
]"
30+
/>
2031

21-
<q-btn-toggle
22-
v-model="toggled"
23-
color="green"
24-
toggle-color="red"
25-
push
26-
>
27-
Toggle me
28-
</q-btn-toggle>
32+
<q-btn-toggle v-model="model" toggle-color="primary"
33+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
34+
disable
35+
:options="[
36+
{label: 'One', value: 'one'},
37+
{label: 'Two', value: 'two'},
38+
{label: 'Three', value: 'three'}
39+
]"
40+
/>
2941

30-
<div style="margin-top: 25px">
31-
<q-btn-toggle
32-
dense
33-
v-model="toggled"
34-
toggle-color="primary"
35-
>
36-
Toggle me
37-
</q-btn-toggle>
42+
<q-btn-toggle v-model="model" toggle-color="primary"
43+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
44+
:options="[
45+
{label: 'One', icon: 'filter_1', value: 'one'},
46+
{label: 'Two', icon: 'filter_2', value: 'two'},
47+
{label: 'Three', icon: 'filter_3', value: 'three'}
48+
]"
49+
/>
3850

39-
<q-btn-toggle
40-
dense
41-
v-model="toggled"
42-
color="green"
43-
toggle-color="red"
44-
>
45-
Toggle me
46-
</q-btn-toggle>
51+
<q-btn-toggle v-model="model" toggle-color="primary"
52+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
53+
:options="[
54+
{icon: 'filter_1', value: 'one'},
55+
{icon: 'filter_2', value: 'two'},
56+
{icon: 'filter_3', value: 'three'}
57+
]"
58+
/>
4759

48-
<q-btn-toggle
49-
dense
50-
v-model="toggled"
51-
color="green"
52-
toggle-color="red"
53-
push
54-
>
55-
Toggle me
56-
</q-btn-toggle>
57-
</div>
58-
59-
<div style="margin-top: 25px">
60-
Disable
61-
<q-btn-toggle
62-
dense
63-
v-model="toggled"
64-
toggle-color="primary"
65-
disable
66-
>
67-
Toggle me
68-
</q-btn-toggle>
69-
70-
<q-btn-toggle
71-
dense
72-
v-model="toggled"
73-
color="green"
74-
toggle-color="red"
75-
disable
76-
>
77-
Toggle me
78-
</q-btn-toggle>
60+
<q-btn-toggle v-model="model" toggle-color="primary"
61+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
62+
:options="[
63+
{label: 'One', iconRight: 'filter_1', value: 'one'},
64+
{label: 'Two', iconRight: 'filter_2', value: 'two'},
65+
{label: 'Three', iconRight: 'filter_3', value: 'three'}
66+
]"
67+
/>
7968

80-
<q-btn-toggle
81-
dense
82-
v-model="toggled"
83-
color="green"
84-
toggle-color="red"
85-
push
86-
disable
87-
>
88-
Toggle me
89-
</q-btn-toggle>
69+
<q-btn-toggle v-model="model" toggle-color="primary"
70+
:push="push" :flat="flat" :outline="outline" :glossy="glossy" :rounded="rounded" :size="size"
71+
:options="[
72+
{label: 'One', value: 'one'},
73+
{label: 'Two', toggleColor: 'yellow', value: 'two'},
74+
{label: 'Three', toggleColor: 'red', value: 'three'}
75+
]"
76+
/>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
9082
</div>
91-
9283
</div>
9384
</template>
9485

9586
<script>
9687
export default {
9788
data () {
9889
return {
99-
toggled: false
90+
model: '',
91+
options: [true, false],
92+
sizes: ['sm', 'md', 'lg']
10093
}
10194
}
10295
}
10396
</script>
10497

10598
<style lang="stylus">
106-
.button-toggle-test
107-
.q-btn-toggle
108-
margin 5px 15px
99+
.button-toggle-group-test .q-btn-toggle
100+
margin 15px
109101
</style>

‎dev/components/components/data-table.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</q-field>
77

88
<div>
9-
<q-btn-toggle color="primary" toggle-color="red" v-model="loader" label="Show loader" />
9+
<q-toggle color="primary" v-model="loader" label="Show loader" />
1010
<q-toggle color="primary" v-model="selectionToggle" label="Multiple selection" />
1111
<q-select multiple toggle v-model="visibleColumns" :options="visibleColumnsOptions" />
1212
<q-radio v-model="separator" val="horizontal" label="Horizontal" />

0 commit comments

Comments
 (0)