Skip to content

Commit 26b119a

Browse files
pdanpdanpdanpdan
authored
feat(ui form comps): Form components enhancements (quasarframework#6295)
* feat(QKnob,QSlider): Add name prop and native field for form processing * Add name and native input for QRange, QRating. Use real value for QSelect. Stringify objects * Move tests on own page and respect disabled for QRange, QRating, QSlider
1 parent 2bd305d commit 26b119a

File tree

15 files changed

+418
-106
lines changed

15 files changed

+418
-106
lines changed

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

Lines changed: 17 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,25 @@
44
<q-toggle v-model="disable" label="Disable" :dark="dark" />
55
<q-toggle v-model="dark" label="Dark" :dark="dark" :false-value="null" />
66

7-
<q-card tag="form" @submit.prevent="onSubmit" :dark="dark" :disabled="disable">
8-
<q-card-section>
9-
<div class="q-mb-lg row q-col-gutter-x-md">
10-
<q-select name="select1" filled class="col" v-model="select1" dense :options="options" :dark="dark" :disable="disable" label="select1 - Single" clearable />
11-
<q-select name="select2" filled class="col" v-model="select2" dense :options="options" :dark="dark" :disable="disable" label="select2 - Multiple" multiple clearable />
12-
</div>
13-
14-
<div class="q-mb-lg row q-col-gutter-x-md">
15-
<q-input name="text1" filled class="col" v-model="text1" dense :dark="dark" :disable="disable" clearable label="text1 - Text" />
16-
<q-input name="textarea1" filled class="col" v-model="text2" dense :dark="dark" :disable="disable" clearable type="textarea" autogrow label="textarea1 - Textarea" />
17-
<q-file name="file1" filled class="col" v-model="file" dense :dark="dark" :disable="disable" clearable label="file1 - File" />
18-
</div>
19-
20-
<div class="q-my-lg">
21-
<q-radio name="radio1" v-model="option" val="opt1" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Option 1`" :keep-color="keepColor" />
22-
<q-radio name="radio1" v-model="option" val="opt2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Option 2`" :keep-color="keepColor" />
23-
<q-radio name="radio1" v-model="option" val="opt3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Option 3`" :keep-color="keepColor" />
24-
<q-radio name="radio1" v-model="option" :val="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Option Obj`" :keep-color="keepColor" />
25-
</div>
26-
27-
<div class="q-my-lg">
28-
<q-checkbox name="checkbox1" v-model="checked" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
29-
<q-checkbox name="checkbox2" v-model="checked2" :true-value="2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
30-
<q-checkbox name="checkbox3" v-model="checked3" :true-value="3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
31-
<q-checkbox name="checkbox4" v-model="checked4" :true-value="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Checkbox Obj`" :keep-color="keepColor" />
32-
</div>
7+
<div class="q-my-lg">
8+
<q-radio v-model="option" val="opt1" :disable="disable" :dark="dark" color="primary" label="Disabled Option 1" :keep-color="keepColor" />
9+
<q-radio v-model="option" val="opt2" :disable="disable" :dark="dark" color="accent" label="Disabled Option 2" :keep-color="keepColor" />
10+
<q-radio v-model="option" val="opt3" :disable="disable" :dark="dark" color="teal" label="Disabled Option 3" :keep-color="keepColor" />
11+
</div>
3312

34-
<div class="q-my-lg">
35-
<q-toggle name="toggle1" v-model="checked" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
36-
<q-toggle name="toggle2" v-model="checked2" :true-value="2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
37-
<q-toggle name="toggle3" v-model="checked3" :true-value="3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
38-
<q-toggle name="toggle4" v-model="checked4" :true-value="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Toggle Label Obj`" :keep-color="keepColor" />
39-
</div>
40-
</q-card-section>
13+
<div class="q-my-lg">
14+
<q-checkbox v-model="checked" :disable="disable" :dark="dark" color="primary" label="Disabled Checkbox" :keep-color="keepColor" />
15+
<q-checkbox v-model="checked2" :disable="disable" :dark="dark" color="accent" label="Disabled Checkbox" :keep-color="keepColor" />
16+
<q-checkbox v-model="checked3" :disable="disable" :dark="dark" color="teal" label="Disabled Checkbox" :keep-color="keepColor" />
17+
</div>
4118

42-
<q-card-actions>
43-
<q-btn color="primary" type="submit" label="Submit" class="q-px-md" />
44-
<div class="col row q-gutter-sm items-center q-pl-sm">
45-
<div
46-
v-for="(item, index) in submitResult"
47-
:key="index"
48-
class="col-grow q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
49-
>
50-
{{ item.name }} = {{ item.value }}
51-
</div>
52-
</div>
53-
</q-card-actions>
54-
</q-card>
19+
<div class="q-my-lg">
20+
<q-toggle v-model="checked" :disable="disable" :dark="dark" color="primary" label="Toggle Label" :keep-color="keepColor" />
21+
<q-toggle v-model="checked2" :disable="disable" :dark="dark" color="accent" label="Toggle Label" :keep-color="keepColor" />
22+
<q-toggle v-model="checked3" :disable="disable" :dark="dark" color="teal" label="Toggle Label" :keep-color="keepColor" />
23+
</div>
5524

56-
<div class="row items-center q-my-md">
25+
<div class="row items-center q-mb-md">
5726
<span class="text-h6 q-mr-md">Sizes</span>
5827
<div>
5928
( <q-toggle v-model="dense" label="Dense" :dark="dark" /> )
@@ -135,38 +104,11 @@ export default {
135104
checked: true,
136105
checked2: false,
137106
checked3: false,
138-
checked4: false,
139107
140-
trueValue: {
141-
value: true
142-
},
143-
144-
option: 'opt1',
145-
146-
select1: null,
147-
select2: null,
148-
options: [ 'Option 1', 'Option 2', { label: 'Option 3 - Obj' }, { label: 'Option 4 - Obj' } ],
149-
150-
text1: '1',
151-
text2: '2',
152-
153-
file: null,
154-
155-
submitResult: null
108+
option: 'opt1'
156109
}
157110
},
158111
methods: {
159-
onSubmit (evt) {
160-
const formData = new FormData(evt.target)
161-
const submitResult = []
162-
for (const [ name, value ] of formData.entries()) {
163-
submitResult.push({
164-
name,
165-
value
166-
})
167-
}
168-
this.submitResult = submitResult
169-
}
170112
}
171113
}
172114
</script>

‎ui/dev/src/pages/form/form-native.vue‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<div class="q-layout-padding" :class="dark ? 'bg-black text-white' : ''">
3+
<q-toggle v-model="keepColor" label="Keep color" :dark="dark" />
4+
<q-toggle v-model="disable" label="Disable" :dark="dark" />
5+
<q-toggle v-model="dark" label="Dark" :dark="dark" :false-value="null" />
6+
7+
<q-card tag="form" @submit.prevent="onSubmit" :dark="dark" :disabled="disable">
8+
<q-card-section>
9+
<div class="q-mb-lg row q-col-gutter-x-md">
10+
<q-select name="select1" filled class="col" v-model="select1" :options="options1" :dark="dark" :disable="disable" label="select1 - Single" clearable />
11+
<q-select name="select2" filled class="col" v-model="select2" :options="options1" :dark="dark" :disable="disable" label="select2 - Multiple" multiple clearable />
12+
</div>
13+
14+
<div class="q-mb-lg row q-col-gutter-x-md">
15+
<q-select name="select3" filled class="col" v-model="select3" :options="options2" :dark="dark" :disable="disable" label="select3 - obj - Single" clearable />
16+
<q-select name="select4" filled class="col" v-model="select4" :options="options2" :dark="dark" :disable="disable" label="select4 - obj - Multiple" multiple clearable />
17+
</div>
18+
19+
<div class="q-mb-lg row q-col-gutter-x-md">
20+
<q-input name="text1" filled class="col" v-model="text1" :dark="dark" :disable="disable" clearable label="text1 - Text" />
21+
<q-input name="textarea1" filled class="col" v-model="text2" :dark="dark" :disable="disable" clearable type="textarea" autogrow label="textarea1 - Textarea" />
22+
<q-file name="file1" filled class="col" v-model="file" :dark="dark" :disable="disable" clearable label="file1 - File" />
23+
</div>
24+
25+
<div class="q-my-lg">
26+
<q-radio name="radio1" v-model="option" val="opt1" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Option 1`" :keep-color="keepColor" />
27+
<q-radio name="radio1" v-model="option" val="opt2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Option 2`" :keep-color="keepColor" />
28+
<q-radio name="radio1" v-model="option" val="opt3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Option 3`" :keep-color="keepColor" />
29+
<q-radio name="radio1" v-model="option" :val="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Option Obj`" :keep-color="keepColor" />
30+
</div>
31+
32+
<div class="q-my-lg">
33+
<q-checkbox name="checkbox1" v-model="checked" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
34+
<q-checkbox name="checkbox2" v-model="checked2" :true-value="2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
35+
<q-checkbox name="checkbox3" v-model="checked3" :true-value="3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Checkbox`" :keep-color="keepColor" />
36+
<q-checkbox name="checkbox4" v-model="checked4" :true-value="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Checkbox Obj`" :keep-color="keepColor" />
37+
</div>
38+
39+
<div class="q-my-lg">
40+
<q-toggle name="toggle1" v-model="checked" :disable="disable" :dark="dark" color="primary" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
41+
<q-toggle name="toggle2" v-model="checked2" :true-value="2" :disable="disable" :dark="dark" color="accent" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
42+
<q-toggle name="toggle3" v-model="checked3" :true-value="3" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Toggle Label`" :keep-color="keepColor" />
43+
<q-toggle name="toggle4" v-model="checked4" :true-value="trueValue" :disable="disable" :dark="dark" color="teal" :label="`${disable ? 'Disabled ' : ''}Toggle Label Obj`" :keep-color="keepColor" />
44+
</div>
45+
46+
<div class="q-my-lg">
47+
<q-knob name="knob1" size="100px" color="orange" v-model="number1" :disable="disable" :dark="dark" />
48+
<q-knob name="knob2" size="100px" color="blue" v-model="number2" show-value :disable="disable" :dark="dark" />
49+
<q-knob name="knob3" size="100px" color="green" v-model="number3" show-value :disable="disable" :dark="dark">
50+
<div class="text-center">Slot<br/>{{ number3 }}</div>
51+
</q-knob>
52+
</div>
53+
54+
<div class="q-my-lg">
55+
<q-slider name="slider1" v-model="number4" :disable="disable" :dark="dark" />
56+
</div>
57+
58+
<div class="q-my-lg">
59+
<q-range name="range1" v-model="range1" :disable="disable" :dark="dark" />
60+
</div>
61+
62+
<div class="q-my-lg">
63+
<q-rating name="rating1" size="48px" v-model="rating1" :disable="disable" :dark="dark" />
64+
</div>
65+
</q-card-section>
66+
67+
<q-card-actions>
68+
<q-btn color="primary" type="submit" label="Submit" class="q-px-md" />
69+
<div class="col row q-gutter-sm items-center q-pl-sm">
70+
<div
71+
v-for="(item, index) in submitResult"
72+
:key="index"
73+
class="col-grow q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
74+
>
75+
{{ item.name }} = {{ item.value }}
76+
</div>
77+
</div>
78+
</q-card-actions>
79+
</q-card>
80+
</div>
81+
</template>
82+
83+
<script>
84+
export default {
85+
data () {
86+
return {
87+
keepColor: true,
88+
disable: false,
89+
dark: null,
90+
91+
checked: true,
92+
checked2: false,
93+
checked3: false,
94+
checked4: false,
95+
96+
trueValue: {
97+
value: true
98+
},
99+
100+
option: 'opt1',
101+
102+
select1: null,
103+
select2: null,
104+
select3: null,
105+
select4: null,
106+
options1: [ 'Option 1', 'Option 2', { label: 'Option 3 - Obj' }, { label: 'Option 4 - Obj' } ],
107+
options2: [
108+
{ label: 'Option 1 - Obj', value: 'Option 1' },
109+
{ label: 'Option 2 - Obj', value: 'Option 2' },
110+
{ label: 'Option 3 - Obj', value: 'Option 3' },
111+
{ label: 'Option 4 - Obj', value: 'Option 4' }
112+
],
113+
114+
text1: '1',
115+
text2: '2',
116+
117+
number1: 10,
118+
number2: 20,
119+
number3: 30,
120+
number4: 40,
121+
122+
range1: {
123+
min: 20,
124+
max: 60
125+
},
126+
127+
rating1: 3,
128+
129+
file: null,
130+
131+
submitResult: null
132+
}
133+
},
134+
methods: {
135+
onSubmit (evt) {
136+
const formData = new FormData(evt.target)
137+
const submitResult = []
138+
for (const [ name, value ] of formData.entries()) {
139+
submitResult.push({
140+
name,
141+
value: value.name || value
142+
})
143+
}
144+
this.submitResult = submitResult
145+
}
146+
}
147+
}
148+
</script>

0 commit comments

Comments
 (0)