Skip to content

Commit d05f0aa

Browse files
pdanpdanrstoenescu
pdanpdan
authored and
rstoenescu
committed
Controls related fixes (quasarframework#1515)
* Use different clear icon for inverted, work on __setUpdate and clear * Allow QChip delete with backspace * Fix decimal rounding on QRange * Fix chip color on QSelect * Remove horizontal modifier for slider drag * Add global controls tests playground * Don't emit input on just focus/blur field * Adjustments to emiting input/change events * Update slider-utils.js
1 parent 07da48f commit d05f0aa

File tree

16 files changed

+424
-44
lines changed

16 files changed

+424
-44
lines changed

‎dev/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
class="bg-white shadow-4 fixed z-top"
1010
>
1111
<q-select
12-
stack-label="I18n"
1312
hide-underline
13+
stack-label="I18n"
1414
:options="[
1515
{ label: 'English (US)', value: 'en-us' }
1616
,{ label: 'English (UK)', value: 'en-uk' }

‎dev/components/form/all.vue‎

Lines changed: 325 additions & 0 deletions
Large diffs are not rendered by default.

‎icons/fontawesome.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default {
2323
},
2424
search: {
2525
icon: 'fas fa-search',
26-
clear: 'far fa-times-circle',
27-
clearInverted: 'fas fa-times-circle'
26+
clear: 'fas fa-times-circle',
27+
clearInverted: 'fas fa-times'
2828
},
2929
carousel: {
3030
left: 'fas fa-chevron-left',
@@ -46,7 +46,7 @@ export default {
4646
}
4747
},
4848
chip: {
49-
close: 'far fa-times-circle'
49+
close: 'fas fa-times-circle'
5050
},
5151
chipsInput: {
5252
add: 'far fa-paper-plane'
@@ -98,7 +98,8 @@ export default {
9898
hidePass: 'fas fa-eye-slash',
9999
showNumber: 'fas fa-calculator',
100100
hideNumber: 'fas fa-keyboard',
101-
clear: 'fas fa-times',
101+
clear: 'fas fa-times-circle',
102+
clearInverted: 'fas fa-times',
102103
dropdown: 'fas fa-caret-down'
103104
},
104105
pagination: {
@@ -140,7 +141,8 @@ export default {
140141
},
141142
uploader: {
142143
done: 'fas fa-check',
143-
clear: 'far fa-times-circle',
144+
clear: 'fas fa-times-circle',
145+
clearInverted: 'fas fa-times',
144146
add: 'fas fa-plus-square',
145147
upload: 'fas fa-cloud-upload-alt',
146148
expand: 'fas fa-chevron-down',

‎icons/ionicons.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default {
2323
},
2424
search: {
2525
icon: 'ion-ios-search',
26-
clear: 'ion-close-round',
27-
clearInverted: 'ion-close-circled'
26+
clear: 'ion-close-circled',
27+
clearInverted: 'ion-close-round'
2828
},
2929
carousel: {
3030
left: 'ion-chevron-left',
@@ -46,7 +46,7 @@ export default {
4646
}
4747
},
4848
chip: {
49-
close: 'ion-ios-close'
49+
close: 'ion-close-circled'
5050
},
5151
chipsInput: {
5252
add: 'ion-android-send'
@@ -98,7 +98,8 @@ export default {
9898
hidePass: 'ion-eye-disabled',
9999
showNumber: 'ion-calculator',
100100
hideNumber: 'ion-ios-keypad',
101-
clear: 'ion-backspace-outline',
101+
clear: 'ion-close-circled',
102+
clearInverted: 'ion-close-round',
102103
dropdown: 'ion-android-arrow-dropdown'
103104
},
104105
pagination: {
@@ -140,7 +141,8 @@ export default {
140141
},
141142
uploader: {
142143
done: 'ion-ios-checkmark-outline',
143-
clear: 'ion-ios-close-outline',
144+
clear: 'ion-close-circled',
145+
clearInverted: 'ion-close-round',
144146
add: 'ion-ios-plus-outline',
145147
upload: 'ion-ios-cloud-upload-outline',
146148
expand: 'ion-chevron-down',

‎icons/material.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export default {
9999
showNumber: 'keyboard',
100100
hideNumber: 'keyboard_hide',
101101
clear: 'cancel',
102+
clearInverted: 'clear',
102103
dropdown: 'arrow_drop_down'
103104
},
104105
pagination: {
@@ -140,7 +141,8 @@ export default {
140141
},
141142
uploader: {
142143
done: 'done',
143-
clear: 'clear',
144+
clear: 'cancel',
145+
clearInverted: 'clear',
144146
add: 'add',
145147
upload: 'cloud_upload',
146148
expand: 'keyboard_arrow_down',

‎icons/mdi.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default {
2424
search: {
2525
icon: 'mdi-magnify',
2626
clear: 'mdi-close-circle',
27-
clearInverted: 'mdi-close-circle-outline'
27+
clearInverted: 'mdi-close'
2828
},
2929
carousel: {
3030
left: 'mdi-chevron-left',
@@ -98,7 +98,8 @@ export default {
9898
hidePass: 'mdi-eye-off',
9999
showNumber: 'mdi-keyboard',
100100
hideNumber: 'mdi-keyboard-close',
101-
clear: 'mdi-close',
101+
clear: 'mdi-close-circle',
102+
clearInverted: 'mdi-close',
102103
dropdown: 'mdi-menu-down'
103104
},
104105
pagination: {
@@ -140,7 +141,8 @@ export default {
140141
},
141142
uploader: {
142143
done: 'mdi-done',
143-
clear: 'mdi-close',
144+
clear: 'mdi-close-circle',
145+
clearInverted: 'mdi-close',
144146
add: 'mdi-plus',
145147
upload: 'mdi-cloud-upload',
146148
expand: 'mdi-chevron-down',

‎src/components/chip/QChip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default {
4848
this.$emit('focus', e)
4949
},
5050
__handleKeyDown (e) {
51-
if (this.closable && [13, 32].includes(getEventKey(e))) {
51+
if (this.closable && [8, 13, 32].includes(getEventKey(e))) {
5252
stopAndPrevent(e)
5353
this.$emit('hide')
5454
}

‎src/components/color/QColor.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,17 @@ export default {
120120
}
121121
}, 1)
122122
},
123-
__onHide () {
123+
__onHide (forceUpdate) {
124124
this.focused = false
125125
this.$emit('blur')
126-
if (this.isPopover && !this.$refs.popup.showing) {
126+
if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
127127
this.__update(true)
128128
}
129129
},
130130
__setModel (val, forceUpdate) {
131131
this.model = clone(val)
132132
if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
133-
this.__update()
133+
this.__update(forceUpdate)
134134
}
135135
},
136136
__update (change) {
@@ -245,7 +245,7 @@ export default {
245245
},
246246
on: {
247247
show: this.__onFocus,
248-
hide: this.__onHide
248+
hide: val => this.__onHide(true)
249249
}
250250
}, this.__getPicker(h))
251251
: h(QModal, {
@@ -259,14 +259,14 @@ export default {
259259
},
260260
on: {
261261
show: this.__onFocus,
262-
hide: this.__onHide
262+
hide: val => this.__onHide(true)
263263
}
264264
}, this.__getPicker(h, true)),
265265

266266
this.editable && this.clearable && this.actualValue.length
267267
? h('q-icon', {
268268
slot: 'after',
269-
props: { name: this.$q.icon.input.clear },
269+
props: { name: this.$q.icon.input[`clear${this.inverted ? 'Inverted' : ''}`] },
270270
nativeOn: { click: this.clear },
271271
staticClass: 'q-if-control'
272272
})

‎src/components/datetime/QDatetime.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,17 +120,17 @@ export default {
120120
}
121121
}, 1)
122122
},
123-
__onHide () {
123+
__onHide (forceUpdate) {
124124
this.focused = false
125125
this.$emit('blur')
126-
if (this.isPopover && !this.$refs.popup.showing) {
126+
if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
127127
this.__update(true)
128128
}
129129
},
130130
__setModel (val, forceUpdate) {
131131
this.model = clone(val)
132132
if (forceUpdate || (this.isPopover && this.$refs.popup.showing)) {
133-
this.__update()
133+
this.__update(forceUpdate)
134134
}
135135
},
136136
__update (change) {
@@ -256,7 +256,7 @@ export default {
256256
},
257257
on: {
258258
show: this.__onFocus,
259-
hide: this.__onHide
259+
hide: val => this.__onHide(true)
260260
}
261261
}, this.__getPicker(h))
262262
: h(QModal, {
@@ -270,14 +270,14 @@ export default {
270270
},
271271
on: {
272272
show: this.__onFocus,
273-
hide: this.__onHide
273+
hide: val => this.__onHide(true)
274274
}
275275
}, this.__getPicker(h, true)),
276276

277277
this.editable && this.clearable && this.actualValue.length
278278
? h('q-icon', {
279279
slot: 'after',
280-
props: { name: this.$q.icon.input.clear },
280+
props: { name: this.$q.icon.input[`clear${this.inverted ? 'Inverted' : ''}`] },
281281
nativeOn: { click: this.clear },
282282
staticClass: 'q-if-control'
283283
})

‎src/components/input/QInput.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
<q-icon
101101
v-if="editable && clearable && length"
102102
slot="after"
103-
:name="$q.icon.input.clear"
103+
:name="$q.icon.input[`clear${this.inverted ? 'Inverted' : ''}`]"
104104
class="q-if-control"
105105
@mousedown.native="__clearTimer"
106106
@touchstart.native="__clearTimer"
@@ -267,6 +267,11 @@ export default {
267267
this.isNumberError = true
268268
if (forceUpdate) {
269269
this.$emit('input', forcedValue)
270+
this.$nextTick(() => {
271+
if (JSON.stringify(forcedValue) !== JSON.stringify(this.value)) {
272+
this.$emit('change', forcedValue)
273+
}
274+
})
270275
}
271276
return
272277
}
@@ -279,8 +284,15 @@ export default {
279284
val = val.toUpperCase()
280285
}
281286
282-
this.$emit('input', val)
283287
this.model = val
288+
this.$emit('input', val)
289+
if (forceUpdate) {
290+
this.$nextTick(() => {
291+
if (JSON.stringify(val) !== JSON.stringify(this.value)) {
292+
this.$emit('change', val)
293+
}
294+
})
295+
}
284296
},
285297
__updateArea () {
286298
const shadow = this.$refs.shadow

0 commit comments

Comments
 (0)