Skip to content

Commit 5f9db95

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
closes quasarframework#1042, closes quasarframework#882, closes quasarframework#1173 - Separate @input and @change for QInput and derivates (quasarframework#1050)
* Separate @input and @change for QInput and derivates Also fix QInput placeholder with false initial value. Add tests for delayed update (v-model.lazy if it were supported on components) * Remove default model definition * Adjust all controls to emit input on each change and change on blur or drag end * Use @click instead of mouseup and add @touchstart to @mousedown * Use model instead of value in template and add label to slider/range demo * Val is constant in __update in QDatetime
1 parent a24c2fa commit 5f9db95

File tree

30 files changed

+543
-185
lines changed

30 files changed

+543
-185
lines changed

‎dev/components/components/pagination.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
then hit <ENTER>
1414
</p>
1515

16-
<q-pagination @change="onChange" v-model="page" :max="17"></q-pagination>
16+
<q-pagination @change="onChange" @input="onInput" v-model="page" :max="17"></q-pagination>
1717

1818
<p class="caption">Disabled State</p>
1919
<q-pagination v-model="page" :max="17" disable></q-pagination>
@@ -30,7 +30,10 @@ export default {
3030
},
3131
methods: {
3232
onChange (val) {
33-
console.log('@change', val)
33+
console.log('@change', JSON.stringify(val))
34+
},
35+
onInput (val) {
36+
console.log('@input', JSON.stringify(val))
3437
}
3538
}
3639
}

‎dev/components/form/autocomplete.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,22 @@
77
</p>
88

99

10-
<q-search @change="onChange" v-model="terms" placeholder="Start typing a country name">
10+
<q-search @change="onChange" @input="onInput" v-model="terms" placeholder="Start typing a country name">
1111
<q-autocomplete @search="search" @selected="selected" />
1212
</q-search>
1313

14+
<q-search @change="val => { terms = val; onChange(val) }" @input="onInput" :value="terms" placeholder="Start typing a country name (onChange)">
15+
<q-autocomplete @search="search" @selected="selected" />
16+
</q-search>
17+
18+
<q-input @change="onChange" @input="onInput" v-model="terms" placeholder="Start typing a country name">
19+
<q-autocomplete @search="search" @selected="selected" />
20+
</q-input>
21+
22+
<q-input @change="val => { terms = val; onChange(val) }" @input="onInput" :value="terms" placeholder="Start typing a country name (onChange)">
23+
<q-autocomplete @search="search" @selected="selected" />
24+
</q-input>
25+
1426
<q-search inverted v-model="terms" placeholder="Start typing a country name">
1527
<q-autocomplete @search="search" @selected="selected" />
1628
</q-search>
@@ -110,7 +122,10 @@ export default {
110122
this.$q.notify(`Selected suggestion "${item.label}"`)
111123
},
112124
onChange (val) {
113-
console.log('@change', val)
125+
console.log('@change', JSON.stringify(val))
126+
},
127+
onInput (val) {
128+
console.log('@input', JSON.stringify(val))
114129
}
115130
}
116131
}

‎dev/components/form/checkbox.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" :dark="dark" :keep-color="keepColor" />
1313

1414
<br><br>
15-
<q-checkbox @change="onChange" v-model="checked" :dark="dark" :keep-color="keepColor" />
15+
<q-checkbox @change="onChange" @input="onInput" v-model="checked" :dark="dark" :keep-color="keepColor" />
1616
<br><br>
1717
<q-checkbox v-model="checked" label="Label" :dark="dark" :keep-color="keepColor" />
1818
<br><br>
@@ -57,6 +57,7 @@
5757
color="secondary"
5858
v-model="group"
5959
@change="onChange"
60+
@input="onInput"
6061
:dark="dark"
6162
:keep-color="keepColor"
6263
:options="[
@@ -131,9 +132,17 @@ export default {
131132
keepColor: false
132133
}
133134
},
135+
watch: {
136+
group (val, old) {
137+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
138+
}
139+
},
134140
methods: {
135141
onChange (val) {
136-
console.log('@change', val)
142+
console.log('@change', JSON.stringify(val))
143+
},
144+
onInput (val) {
145+
console.log('@input', JSON.stringify(val))
137146
},
138147
onFocus () {
139148
console.log('focused')

‎dev/components/form/chips-input.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@
1212
<span class="mobile-only">Tap</span>
1313
on Chips Textbox below to start adding Chips.
1414
</p>
15-
<q-chips-input align="right" @change="onChange" color="secondary" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
15+
<q-chips-input align="right" @change="onChange" @input="onInput" color="secondary" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
16+
<q-chips-input align="right" @change="val => { model = val; onChange(val) }" @input="onInput" color="secondary" float-label="Float Label (onChange)" :value="model" placeholder="Some placeholder" />
1617
<q-chips-input inverted color="dark" frame-color="amber" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
1718

1819
<div class="bg-grey-9" style="padding: 15px">
1920
<q-chips-input dark color="amber" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
2021
</div>
2122

23+
<p class="caption">v-model.lazy</p>
24+
<q-chips-input :value="model" @change="val => { model = val; onChange(val) }"/>
25+
2226
<p class="caption">Disabled State</p>
2327
<q-chips-input v-model="model" disable/>
2428

@@ -56,9 +60,17 @@ export default {
5660
model: ['Joe']
5761
}
5862
},
63+
watch: {
64+
model (val, old) {
65+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
66+
}
67+
},
5968
methods: {
6069
onChange (val) {
61-
console.log('@change', val)
70+
console.log('@change', JSON.stringify(val))
71+
},
72+
onInput (val) {
73+
console.log('@input', JSON.stringify(val))
6274
}
6375
}
6476
}

‎dev/components/form/datetime-range.vue‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@
2020
<p class="caption">
2121
Date Range
2222
</p>
23+
<q-datetime-range type="date" float-label="Date range" v-model="first.range" :min="first.min" :max="first.max" @change="onChange" @input="onInput" />
24+
<q-datetime-range type="date" float-label="Date range (onChange)" :value="first.range" :min="first.min" :max="first.max" @change="val => { first.range = val; onChange(val); }" @input="onInput" />
25+
2326
<q-datetime-range vertical type="date" v-model="first.range" :min="first.min" :max="first.max" />
2427
<div class="bg-grey-8" style="width: 300px; padding: 25px">
2528
<q-datetime-range color="secondary" dark type="date" v-model="first.range" :min="first.min" :max="first.max" />
@@ -109,9 +112,20 @@ export default {
109112
monthNames: ['Ianuarie', 'Februarie', 'Martie', 'Aprilie', 'Mai', 'Iunie', 'Iulie', 'August', 'Septembrie', 'Octombrie', 'Noiembrie', 'Decembrie']
110113
}
111114
},
115+
watch: {
116+
'first.range.from' (val, old) {
117+
console.log(`Changed [from] from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
118+
},
119+
'first.range.to' (val, old) {
120+
console.log(`Changed [to] from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
121+
}
122+
},
112123
methods: {
113124
onChange (val) {
114-
console.log('@change', val.from, val.to)
125+
console.log('@change', JSON.stringify(val))
126+
},
127+
onInput (val) {
128+
console.log('@input', JSON.stringify(val))
115129
}
116130
}
117131
}

‎dev/components/form/dialog-select.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,20 @@ export default {
9595
]
9696
}
9797
},
98+
watch: {
99+
select (val, old) {
100+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
101+
},
102+
multipleSelect (val, old) {
103+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
104+
}
105+
},
98106
methods: {
99107
onChange (val) {
100-
console.log('@change', val)
108+
console.log('@change', JSON.stringify(val))
101109
},
102110
onInput (val) {
103-
console.log('@input', val)
111+
console.log('@input', JSON.stringify(val))
104112
}
105113
}
106114
}

‎dev/components/form/input.vue‎

Lines changed: 81 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,65 @@
44
<q-input ref="xi" :attributes="{gigi: 'yes'}" @change="onChange" v-model="text" />
55
<q-btn @click="$refs.xi.select()">Select</q-btn>
66
<q-input v-model="text" stack-label="Stack Label" />
7-
<q-input v-model="text" float-label="Float Label" placeholder="Gigi" />
7+
<q-card>
8+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Text value: {{JSON.stringify(text)}}</q-card-title>
9+
<q-card-main>
10+
<q-input v-model="text" float-label="Text" placeholder="Placeholder" @input="onInput" @change="onChange" clearable />
11+
<q-input :value="text" float-label="Text (onChange)" placeholder="Placeholder" @input="onInput" @change="val => { text = val, onChange(val) }" clearable />
12+
</q-card-main>
13+
</q-card>
14+
15+
<q-card>
16+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Numeric value: {{JSON.stringify(numberNull)}}</q-card-title>
17+
<q-card-main>
18+
<q-input v-model="numberNull" type="number" prefix="$" float-label="Number (initial null)" @input="onInput" @change="onChange" clearable />
19+
<q-input :value="numberNull" type="number" prefix="$" float-label="Number (initial null, onChange)" @input="onInput" @change="val => { numberNull = val, onChange(val) }" clearable />
20+
<q-input v-model="numberNull" type="number" :max-decimals="2" prefix="$" float-label="Number (initial null, 2 decimals)" @input="onInput" @change="onChange" clearable />
21+
<q-input :value="numberNull" type="number" :max-decimals="2" prefix="$" float-label="Number (initial null, 2 decimals, onChange)" @input="onInput" @change="val => { numberNull = val, onChange(val) }" clearable />
22+
</q-card-main>
23+
</q-card>
24+
25+
<q-card>
26+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Numeric value: {{JSON.stringify(numberInt)}}</q-card-title>
27+
<q-card-main>
28+
<q-input v-model="numberInt" type="number" prefix="$" float-label="Number (initial int)" @input="onInput" @change="onChange" clearable />
29+
<q-input :value="numberInt" type="number" prefix="$" float-label="Number (initial int, onChange)" @input="onInput" @change="val => { numberInt = val, onChange(val) }" clearable />
30+
<q-input v-model="numberInt" type="number" :max-decimals="2" prefix="$" float-label="Number (initial int, 2 decimals)" @input="onInput" @change="onChange" clearable />
31+
<q-input :value="numberInt" type="number" :max-decimals="2" prefix="$" float-label="Number (initial int, 2 decimals, onChange)" @input="onInput" @change="val => { numberInt = val, onChange(val) }" clearable />
32+
</q-card-main>
33+
</q-card>
34+
35+
<q-card>
36+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Numeric value: {{JSON.stringify(numberFloat)}}</q-card-title>
37+
<q-card-main>
38+
<q-input v-model="numberFloat" type="number" prefix="$" float-label="Number (initial float)" @input="onInput" @change="onChange" clearable />
39+
<q-input :value="numberFloat" type="number" prefix="$" float-label="Number (initial float, onChange)" @input="onInput" @change="val => { numberFLoat = val, onChange(val) }" clearable />
40+
<q-input v-model="numberFloat" type="number" :max-decimals="2" prefix="$" float-label="Number (initial float, 2 decimals)" @input="onInput" @change="onChange" clearable />
41+
<q-input :value="numberFloat" type="number" :max-decimals="2" prefix="$" float-label="Number (initial float, 2 decimals, onChange)" @input="onInput" @change="val => { numberFloat = val, onChange(val) }" clearable />
42+
</q-card-main>
43+
</q-card>
44+
45+
<q-card>
46+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Numeric value: {{JSON.stringify(numberFloatText)}}</q-card-title>
47+
<q-card-main>
48+
<q-input v-model="numberFloatText" type="number" prefix="$" float-label="Number (initial float as text)" @input="onInput" @change="onChange" clearable />
49+
<q-input :value="numberFloatText" type="number" prefix="$" float-label="Number (initial float as text, onChange)" @input="onInput" @change="val => { numberFloatText = val, onChange(val) }" clearable />
50+
<q-input v-model="numberFloatText" type="number" :max-decimals="2" prefix="$" float-label="Number (initial float as text, 2 decimals)" @input="onInput" @change="onChange" clearable />
51+
<q-input :value="numberFloatText" type="number" :max-decimals="2" prefix="$" float-label="Number (initial float as text, 2 decimals, onChange)" @input="onInput" @change="val => { numberFloatText = val, onChange(val) }" clearable />
52+
</q-card-main>
53+
</q-card>
54+
55+
<q-card>
56+
<q-card-title class="bg-dark text-white q-px-small q-py-smaller">Password: {{JSON.stringify(text)}}</q-card-title>
57+
<q-card-main>
58+
<q-input v-model="text" type="password" float-label="Password" @input="onInput" @change="onChange" />
59+
<q-input :value="text" type="password" float-label="Password (onChange)" @input="onInput" @change="val => { text = val, onChange(val) }" />
60+
<q-input v-model="text" type="password" float-label="Password" @input="onInput" @change="onChange" clearable />
61+
<q-input :value="text" type="password" float-label="Password (onChange)" @input="onInput" @change="val => { text = val, onChange(val) }" clearable />
62+
</q-card-main>
63+
</q-card>
864

9-
<q-input v-model="number" type="number" prefix="$" float-label="Number" />
1065
<q-input v-model="text" suffix="@gmail.com" float-label="Clearable" clearable />
11-
<q-input v-model="text" type="password" float-label="Password" />
1266
<q-input v-model="text" type="password" float-label="Password & no-pass-toggle" no-pass-toggle />
1367

1468
<q-input disable v-model="text" float-label="Float Label" placeholder="Gigi" />
@@ -23,6 +77,20 @@
2377
<q-input v-model="text" float-label="Has warning" warning />
2478
<q-input v-model="text" float-label="Has both error and warning" error warning />
2579

80+
<p class="caption">False initial value</p>
81+
<q-input v-model="textFalse" float-label="Some placeholder" />
82+
<q-input v-model="textFalse" stack-label="Some placeholder" />
83+
84+
<p class="caption">Zero initial value</p>
85+
<q-input v-model="textZero" float-label="Some placeholder" />
86+
<q-input v-model="textZero" stack-label="Some placeholder" />
87+
88+
<p class="caption">v-model.lazy: "{{text}}"</p>
89+
<q-input :value="text" @change="val => { text = val }" clearable placeholder="Some placeholder" />
90+
91+
<p class="caption">v-model.trim: "{{text}}"</p>
92+
<q-input v-model.trim="text" clearable placeholder="Some placeholder" />
93+
2694
<p class="caption">Inverted Inputs</p>
2795
<q-input v-model="text" :error="error" inverted color="secondary" type="password" clearable placeholder="Some placeholder" :after="[{icon: 'warning', error: true, handler () {}}]" />
2896
<q-input v-model="text" inverted stack-label="Colored" color="amber" />
@@ -148,7 +216,12 @@ export default {
148216
data () {
149217
return {
150218
text: '',
151-
number: null,
219+
textFalse: false,
220+
textZero: '0',
221+
numberNull: null,
222+
numberInt: 0,
223+
numberFloat: 0.00001,
224+
numberFloatText: '0.00001',
152225
area: '',
153226
focus: false,
154227
error: false,
@@ -162,7 +235,10 @@ export default {
162235
},
163236
methods: {
164237
onChange (val) {
165-
console.log('@change', val)
238+
console.log('@change', JSON.stringify(val))
239+
},
240+
onInput (val) {
241+
console.log('@input', JSON.stringify(val))
166242
}
167243
}
168244
}

‎dev/components/form/knob.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
:min="min"
1212
:max="max"
1313
@change="onChange"
14+
@input="onInput"
1415
></q-knob>
1516
<q-knob
1617
class="text-primary"
17-
v-model="model"
18+
:value="model"
1819
:min="min"
1920
:max="max"
21+
@change="val => { model = val; onChange(val) }"
22+
@input="onInput"
2023
></q-knob>
2124

2225
<p class="caption">With Step</p>
@@ -113,9 +116,17 @@ export default {
113116
max: 50
114117
}
115118
},
119+
watch: {
120+
model (val, old) {
121+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
122+
}
123+
},
116124
methods: {
117125
onChange (val) {
118-
console.log('@change', val)
126+
console.log('@change', JSON.stringify(val))
127+
},
128+
onInput (val) {
129+
console.log('@input', JSON.stringify(val))
119130
}
120131
}
121132
}

‎dev/components/form/radio.vue‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
<q-toggle v-model="keepColor" label="Keep Color" />
99

1010
<p class="caption">Standalone</p>
11-
<q-radio @change="onChange" v-model="option" val="opt1" :dark="dark" :keep-color="keepColor" />
11+
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt1" :dark="dark" :keep-color="keepColor" />
1212
<br><br>
13-
<q-radio @change="onChange" v-model="option" val="opt2" label="Option 2" :dark="dark" :keep-color="keepColor" />
13+
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt2" label="Option 2" :dark="dark" :keep-color="keepColor" />
1414
<br><br>
15-
<q-radio @change="onChange" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :keep-color="keepColor" />
15+
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :keep-color="keepColor" />
1616
<br><br>
17-
<q-radio @change="onChange" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :keep-color="keepColor" />
17+
<q-radio @change="onChange" @input="onInput" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :keep-color="keepColor" />
1818

1919
<p class="caption">Label on the left side</p>
2020
<q-radio v-model="option" val="opt2" left-label label="Option 2" :dark="dark" :keep-color="keepColor" />
@@ -37,6 +37,7 @@
3737
type="radio"
3838
v-model="group"
3939
@change="onChange"
40+
@input="onInput"
4041
:dark="dark"
4142
:keep-color="keepColor"
4243
:options="[
@@ -130,9 +131,20 @@ export default {
130131
keepColor: false
131132
}
132133
},
134+
watch: {
135+
option (val, old) {
136+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
137+
},
138+
group (val, old) {
139+
console.log(`Changed from ${JSON.stringify(old)} to ${JSON.stringify(val)}`)
140+
}
141+
},
133142
methods: {
134-
onChange (v) {
135-
console.log('@change', v)
143+
onChange (val) {
144+
console.log('@change', JSON.stringify(val))
145+
},
146+
onInput (val) {
147+
console.log('@input', JSON.stringify(val))
136148
}
137149
}
138150
}

0 commit comments

Comments
 (0)