Skip to content

Commit 97acda2

Browse files
rstoenescurstoenescu
committed
refactor: QInputFrame to render functions
1 parent ae68cc7 commit 97acda2

File tree

9 files changed

+87
-78
lines changed

9 files changed

+87
-78
lines changed

‎src/components/chips-input/QChipsInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
<script>
8787
import FrameMixin from '../../mixins/input-frame.js'
8888
import InputMixin from '../../mixins/input.js'
89-
import QInputFrame from '../input-frame/QInputFrame.vue'
89+
import QInputFrame from '../input-frame/QInputFrame.js'
9090
import QChip from '../chip/QChip.js'
9191
import QSpinner from '../spinner/QSpinner.js'
9292
import { getEventKey, stopAndPrevent } from '../../utils/event.js'

‎src/components/color/QColor.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import FrameMixin from '../../mixins/input-frame.js'
22
import DisplayModeMixin from '../../mixins/display-mode.js'
3-
import QInputFrame from '../input-frame/QInputFrame.vue'
3+
import QInputFrame from '../input-frame/QInputFrame.js'
44
import QPopover from '../popover/QPopover.js'
55
import QColorPicker from './QColorPicker.js'
66
import QBtn from '../btn/QBtn.js'
77
import QModal from '../modal/QModal.js'
8+
import QIcon from '../icon/QIcon.js'
89
import clone from '../../utils/clone.js'
910
import { getEventKey, stopAndPrevent } from '../../utils/event.js'
1011

@@ -299,15 +300,15 @@ export default {
299300
}, this.__getPicker(h, true)),
300301

301302
this.isClearable
302-
? h('QIcon', {
303+
? h(QIcon, {
303304
slot: 'after',
304305
props: { name: this.$q.icon.input[`clear${this.isInverted ? 'Inverted' : ''}`] },
305306
nativeOn: { click: this.clear },
306307
staticClass: 'q-if-control'
307308
})
308309
: null,
309310

310-
h('QIcon', {
311+
h(QIcon, {
311312
slot: 'after',
312313
props: { name: this.$q.icon.input.dropdown },
313314
staticClass: 'q-if-control'

‎src/components/datetime/QDatetime.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import FrameMixin from '../../mixins/input-frame.js'
22
import DisplayModeMixin from '../../mixins/display-mode.js'
33
import CanRenderMixin from '../../mixins/can-render.js'
44
import { input, inline } from './datetime-props.js'
5-
import QInputFrame from '../input-frame/QInputFrame.vue'
5+
import QInputFrame from '../input-frame/QInputFrame.js'
6+
import QIcon from '../icon/QIcon.js'
67
import QPopover from '../popover/QPopover.js'
78
import QDatetimePicker from './QDatetimePicker'
89
import QBtn from '../btn/QBtn.js'
@@ -333,15 +334,15 @@ export default {
333334
}, this.__getPicker(h, true)),
334335

335336
this.isClearable
336-
? h('QIcon', {
337+
? h(QIcon, {
337338
slot: 'after',
338339
props: { name: this.$q.icon.input[`clear${this.isInverted ? 'Inverted' : ''}`] },
339340
nativeOn: { click: this.clear },
340341
staticClass: 'q-if-control'
341342
})
342343
: null,
343344

344-
h('QIcon', {
345+
h(QIcon, {
345346
slot: 'after',
346347
props: { name: this.$q.icon.input.dropdown },
347348
staticClass: 'q-if-control'

src/components/input-frame/QInputFrame.vue renamed to src/components/input-frame/QInputFrame.js

Lines changed: 74 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,6 @@
1-
<template>
2-
<div
3-
class="q-if row no-wrap items-end relative-position"
4-
:class="classes"
5-
:tabindex="focusable && !disable ? 0 : -1"
6-
@click="__onClick"
7-
>
8-
<template v-if="before">
9-
<q-icon
10-
v-for="item in before"
11-
:key="`b${item.icon}`"
12-
class="q-if-control q-if-control-before"
13-
:class="{hidden: __additionalHidden(item, hasError, hasWarning, length)}"
14-
:name="item.icon"
15-
@mousedown.native="__onMouseDown"
16-
@touchstart.native="__onMouseDown"
17-
@click.native="__baHandler($event, item)"
18-
/>
19-
</template>
20-
21-
<div class="q-if-inner col row no-wrap relative-position">
22-
<div
23-
v-if="hasLabel"
24-
class="q-if-label ellipsis full-width absolute self-start"
25-
:class="{'q-if-label-above': labelIsAbove}"
26-
v-html="label"
27-
/>
28-
29-
<span
30-
v-if="prefix"
31-
class="q-if-addon q-if-addon-left"
32-
:class="addonClass"
33-
v-html="prefix"
34-
/>
35-
36-
<slot/>
37-
38-
<span
39-
v-if="suffix"
40-
class="q-if-addon q-if-addon-right"
41-
:class="addonClass"
42-
v-html="suffix"
43-
/>
44-
</div>
45-
46-
<template v-if="after">
47-
<q-icon
48-
v-for="item in after"
49-
:key="`a${item.icon}`"
50-
class="q-if-control"
51-
:class="{hidden: __additionalHidden(item, hasError, hasWarning, length)}"
52-
:name="item.icon"
53-
@mousedown.native="__onMouseDown"
54-
@touchstart.native="__onMouseDown"
55-
@click.native="__baHandler($event, item)"
56-
/>
57-
</template>
58-
<slot name="after"/>
59-
</div>
60-
</template>
61-
62-
<script>
631
import FrameMixin from '../../mixins/input-frame.js'
642
import ParentFieldMixin from '../../mixins/parent-field.js'
3+
import QIcon from '../icon/QIcon.js'
654

665
export default {
676
name: 'QInputFrame',
@@ -142,6 +81,78 @@ export default {
14281
item.handler(evt)
14382
}
14483
}
84+
},
85+
86+
render (h) {
87+
return h('div', {
88+
staticClass: 'q-if row no-wrap items-end relative-position',
89+
'class': this.classes,
90+
attrs: { tabindex: this.focusable && !this.disable ? 0 : -1 },
91+
on: { click: this.__onClick }
92+
}, [
93+
(this.before && this.before.map(item => {
94+
return h(QIcon, {
95+
key: `b${item.icon}`,
96+
staticClass: 'q-if-control q-if-control-before',
97+
'class': {
98+
hidden: this.__additionalHidden(item, this.hasError, this.hasWarning, this.length)
99+
},
100+
props: {
101+
name: item.icon
102+
},
103+
nativeOn: {
104+
mousedown: this.__onMouseDown,
105+
touchstart: this.__onMouseDown,
106+
click: e => { this.__baHandler(e, item) }
107+
}
108+
})
109+
})) || void 0,
110+
111+
h('div', {
112+
staticClass: 'q-if-inner col row no-wrap relative-position'
113+
}, [
114+
(this.hasLabel && h('div', {
115+
staticClass: 'q-if-label ellipsis full-width absolute self-start',
116+
'class': { 'q-if-label-above': this.labelIsAbove },
117+
domProps: {
118+
innerHTML: this.label
119+
}
120+
})) || void 0,
121+
122+
(this.prefix && h('span', {
123+
staticClass: 'q-if-addon q-if-addon-left',
124+
'class': this.addonClass,
125+
domProps: {
126+
innerHTML: this.prefix
127+
}
128+
})) || void 0
129+
].concat(this.$slots.default).concat([
130+
(this.suffix && h('span', {
131+
staticClass: 'q-if-addon q-if-addon-right',
132+
'class': this.addonClass,
133+
domProps: {
134+
innerHTML: this.suffix
135+
}
136+
})) || void 0
137+
])),
138+
139+
(this.after && this.after.map(item => {
140+
return h(QIcon, {
141+
key: `a${item.icon}`,
142+
staticClass: 'q-if-control',
143+
'class': {
144+
hidden: this.__additionalHidden(item, this.hasError, this.hasWarning, this.length)
145+
},
146+
props: {
147+
name: item.icon
148+
},
149+
nativeOn: {
150+
mousedown: this.__onMouseDown,
151+
touchstart: this.__onMouseDown,
152+
click: e => { this.__baHandler(e, item) }
153+
}
154+
})
155+
})) || void 0
156+
].concat(this.$slots.after))
145157
}
146158
}
147-
</script>

‎src/components/input-frame/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import QInputFrame from './QInputFrame.vue'
1+
import QInputFrame from './QInputFrame.js'
22

33
export {
44
QInputFrame

‎src/components/input/QInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ import inputTypes from './input-types.js'
133133
import frameDebounce from '../../utils/frame-debounce.js'
134134
import { between } from '../../utils/format.js'
135135
import QResizeObservable from '../observables/QResizeObservable.js'
136-
import QInputFrame from '../input-frame/QInputFrame.vue'
136+
import QInputFrame from '../input-frame/QInputFrame.js'
137137
import QSpinner from '../spinner/QSpinner.js'
138138
139139
export default {

‎src/components/select/QSelect.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import QCheckbox from '../checkbox/QCheckbox.js'
66
import QRadio from '../radio/QRadio.js'
77
import QToggle from '../toggle/QToggle.js'
88
import QIcon from '../icon/QIcon.js'
9-
import QInputFrame from '../input-frame/QInputFrame.vue'
9+
import QInputFrame from '../input-frame/QInputFrame.js'
1010
import QChip from '../chip/QChip.js'
1111
import FrameMixin from '../../mixins/input-frame.js'
1212
import KeyboardSelectionMixin from '../../mixins/keyboard-selection.js'

‎src/components/uploader/QUploader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import QInputFrame from '../input-frame/QInputFrame.vue'
1+
import QInputFrame from '../input-frame/QInputFrame.js'
22
import FrameMixin from '../../mixins/input-frame.js'
33
import { humanStorageSize } from '../../utils/format.js'
44
import QSpinner from '../spinner/QSpinner.js'

‎src/mixins/input-frame.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import QIcon from '../components/icon/QIcon.js'
21
import { stopAndPrevent } from '../utils/event.js'
32
import AlignMixin from './align.js'
43

@@ -9,9 +8,6 @@ const marginal = {
98

109
export default {
1110
mixins: [AlignMixin],
12-
components: {
13-
QIcon
14-
},
1511
props: {
1612
prefix: String,
1713
suffix: String,

0 commit comments

Comments
 (0)