Skip to content

Commit 55c2719

Browse files
rstoenescurstoenescu
committed
feat: QDialog - hitting enter key on prompt submits the Dialog
1 parent f5ae338 commit 55c2719

File tree

3 files changed

+190
-5
lines changed

3 files changed

+190
-5
lines changed

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<template>
2+
<div class="layout-padding">
3+
<!--
4+
This is for fast tests.
5+
Use this page but don't add it into your commits (leave it outside
6+
of your commit).
7+
8+
For some test that you think it should be persistent,
9+
make a new *.vue file here or in another folder under /dev/components.
10+
-->
11+
<q-color
12+
clearable
13+
class="q-ma-sm"
14+
@focus="onFocus"
15+
@blur="onBlur"
16+
@change="onChange"
17+
@input="onInput"
18+
@clear="onClear"
19+
v-model="color"
20+
modal
21+
placeholder="Color (RGBA)"
22+
:after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
23+
24+
<q-color
25+
clearable
26+
class="q-ma-sm"
27+
@focus="onFocus"
28+
@blur="onBlur"
29+
@input="onInput"
30+
@clear="onClear"
31+
:value="color"
32+
@change="onChange2"
33+
placeholder="Color (RGBA)"
34+
modal
35+
:after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
36+
37+
<br><br>
38+
<q-color
39+
clearable
40+
class="q-ma-sm"
41+
@focus="onFocus"
42+
@blur="onBlur"
43+
@change="onChange"
44+
@input="onInput"
45+
@clear="onClear"
46+
v-model="color"
47+
popover
48+
placeholder="Color (RGBA)"
49+
:after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
50+
51+
<q-color
52+
clearable
53+
class="q-ma-sm"
54+
@focus="onFocus"
55+
@blur="onBlur"
56+
@input="onInput"
57+
@clear="onClear"
58+
:value="color"
59+
@change="onChange2"
60+
placeholder="Color (RGBA)"
61+
popover
62+
:after="[ { icon: 'colorize', handler () { color = defaultColor } }]" />
63+
64+
<br><br>
65+
<q-datetime
66+
clearable
67+
class="q-ma-sm"
68+
@focus="donFocus"
69+
@blur="donBlur"
70+
@change="donChange"
71+
@input="donInput"
72+
@clear="donClear"
73+
v-model="date"
74+
modal
75+
placeholder="Color (RGBA)"
76+
:after="[ { icon: 'colorize', handler () { date = defaultDate } }]" />
77+
78+
<q-datetime
79+
clearable
80+
class="q-ma-sm"
81+
@focus="donFocus"
82+
@blur="donBlur"
83+
@input="donInput"
84+
@clear="donClear"
85+
:value="date"
86+
@change="donChange2"
87+
placeholder="Color (RGBA)"
88+
modal
89+
:after="[ { icon: 'colorize', handler () { date = defaultDate } }]" />
90+
91+
<br><br>
92+
<q-datetime
93+
clearable
94+
class="q-ma-sm"
95+
@focus="donFocus"
96+
@blur="donBlur"
97+
@change="donChange"
98+
@input="donInput"
99+
@clear="donClear"
100+
v-model="date"
101+
popover
102+
placeholder="Color (RGBA)"
103+
:after="[ { icon: 'colorize', handler () { date = defaultDate } }]" />
104+
105+
<q-datetime
106+
clearable
107+
class="q-ma-sm"
108+
@focus="donFocus"
109+
@blur="donBlur"
110+
@input="donInput"
111+
@clear="donClear"
112+
:value="date"
113+
@change="donChange2"
114+
placeholder="Color (RGBA)"
115+
popover
116+
:after="[ { icon: 'colorize', handler () { date = defaultDate } }]" />
117+
118+
</div>
119+
</template>
120+
121+
<script>
122+
export default {
123+
data () {
124+
return {
125+
color: '#aaa',
126+
defaultColor: '#0f0',
127+
128+
date: new Date(),
129+
defaultDate: new Date(2016, 5, 20)
130+
}
131+
},
132+
methods: {
133+
onFocus (v) {
134+
console.log('onFocus', v)
135+
},
136+
onBlur (v) {
137+
console.log('onBlur', v)
138+
},
139+
onChange (v) {
140+
console.log('onChange', v)
141+
},
142+
onChange2 (v) {
143+
console.log('onChange2', v)
144+
this.color = v
145+
},
146+
onInput (v) {
147+
console.log('onInput', v)
148+
},
149+
onClear (v) {
150+
console.log('onClear', v)
151+
},
152+
153+
donFocus (v) {
154+
console.log('donFocus', v)
155+
},
156+
donBlur (v) {
157+
console.log('donBlur', v)
158+
},
159+
donChange (v) {
160+
console.log('donChange', v)
161+
},
162+
donChange2 (v) {
163+
console.log('donChange2', v)
164+
this.date = v
165+
},
166+
donInput (v) {
167+
console.log('donInput', v)
168+
},
169+
donClear (v) {
170+
console.log('donClear', v)
171+
}
172+
}
173+
}
174+
</script>
175+
176+
<style lang="stylus">
177+
@import '~variables'
178+
179+
</style>

‎src/components/dialog/QDialog.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { QBtn } from '../btn'
44
import { QOptionGroup } from '../option-group'
55
import clone from '../../utils/clone'
66
import extend from '../../utils/extend'
7+
import { getEventKey } from '../../utils/event'
78

89
export default {
910
name: 'QDialog',
@@ -94,7 +95,7 @@ export default {
9495
show: () => {
9596
this.$emit('show')
9697

97-
if (!this.$q.platform.is.desktop) {
98+
if (!this.$q.platform.is.desktop || (!this.prompt && !this.options)) {
9899
return
99100
}
100101

@@ -186,12 +187,17 @@ export default {
186187
props: {
187188
value: this.prompt.model,
188189
type: this.prompt.type || 'text',
189-
autofocus: true,
190190
color: this.color,
191191
noPassToggle: true
192192
},
193193
on: {
194-
change: v => { this.prompt.model = v }
194+
input: v => { this.prompt.model = v },
195+
keyup: evt => {
196+
// if ENTER key
197+
if (getEventKey(evt) === 13) {
198+
this.__onOk()
199+
}
200+
}
195201
}
196202
})
197203
]

‎src/plugins/addressbar-color.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function getProp () {
1616
}
1717

1818
function getMetaTag (v) {
19-
const els = document.getElementsByTagName('meta')
19+
const els = document.getElementsByTagName('META')
2020
for (let i in els) {
2121
if (els[i].name === v) {
2222
return els[i]
@@ -41,7 +41,7 @@ function setColor (hexColor) {
4141
metaTag.setAttribute('content', hexColor)
4242

4343
if (newTag) {
44-
document.getElementsByTagName('head')[0].appendChild(metaTag)
44+
document.getElementsByTagName('HEAD')[0].appendChild(metaTag)
4545
}
4646
}
4747

0 commit comments

Comments
 (0)