Skip to content

Commit 27af2d8

Browse files
rstoenescurstoenescu
committed
fix(QChip,QBadge): Allow use of label prop + default slot; better slot management overall
1 parent f70fc07 commit 27af2d8

File tree

23 files changed

+152
-139
lines changed

23 files changed

+152
-139
lines changed

‎ui/dev/components/components/chip.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,17 @@
6666
Bookmark
6767
</q-chip>
6868
<q-chip v-bind="chipProps" icon="alarm" label="Set alarm" />
69+
<q-chip v-bind="chipProps" icon="feedback" label="With tooltip">
70+
<q-tooltip>
71+
With tooltip
72+
</q-tooltip>
73+
</q-chip>
74+
<q-chip v-bind="chipProps" icon="feedback">
75+
With tooltip2
76+
<q-tooltip>
77+
With tooltip and inline label
78+
</q-tooltip>
79+
</q-chip>
6980
<q-chip v-bind="chipProps" icon="directions">
7081
Get directions
7182
</q-chip>

‎ui/src/components/avatar/QAvatar.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from 'vue'
22

33
import SizeMixin from '../../mixins/size.js'
44
import QIcon from '../icon/QIcon.js'
5-
import slot from '../../utils/slot.js'
5+
import { mergeSlotSafely } from '../../utils/slot.js'
66

77
export default Vue.extend({
88
name: 'QAvatar',
@@ -37,16 +37,11 @@ export default Vue.extend({
3737
}
3838
},
3939

40-
methods: {
41-
__getContent (h) {
42-
const def = slot(this, 'default')
43-
return this.icon !== void 0
44-
? [ h(QIcon, { props: { name: this.icon } }) ].concat(def)
45-
: def
46-
}
47-
},
48-
4940
render (h) {
41+
const icon = this.icon !== void 0
42+
? [ h(QIcon, { props: { name: this.icon } }) ]
43+
: void 0
44+
5045
return h('div', {
5146
staticClass: 'q-avatar',
5247
style: this.sizeStyle,
@@ -56,9 +51,7 @@ export default Vue.extend({
5651
staticClass: 'q-avatar__content row flex-center overflow-hidden',
5752
class: this.contentClass,
5853
style: this.contentStyle
59-
}, [
60-
this.__getContent(h)
61-
])
54+
}, mergeSlotSafely(icon, this, 'default'))
6255
])
6356
}
6457
})

‎ui/src/components/breadcrumbs/QBreadcrumbsEl.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22

3-
import slot from '../../utils/slot.js'
3+
import { mergeSlot } from '../../utils/slot.js'
44

55
import QIcon from '../icon/QIcon.js'
66
import { RouterLinkMixin } from '../../mixins/router-link.js'
@@ -16,22 +16,22 @@ export default Vue.extend({
1616
},
1717

1818
render (h) {
19+
const child = []
20+
21+
this.icon !== void 0 && child.push(
22+
h(QIcon, {
23+
staticClass: 'q-breadcrumbs__el-icon',
24+
class: this.label !== void 0 ? 'q-breadcrumbs__el-icon--with-label' : null,
25+
props: { name: this.icon }
26+
})
27+
)
28+
29+
this.label && child.push(this.label)
30+
1931
return h(this.hasRouterLink === true ? 'router-link' : 'span', {
2032
staticClass: 'q-breadcrumbs__el q-link flex inline items-center relative-position',
2133
props: this.hasRouterLink === true ? this.routerLinkProps : null,
2234
[this.hasRouterLink === true ? 'nativeOn' : 'on']: this.$listeners
23-
}, [
24-
25-
this.icon !== void 0
26-
? h(QIcon, {
27-
staticClass: 'q-breadcrumbs__el-icon',
28-
class: this.label !== void 0 ? 'q-breadcrumbs__el-icon--with-label' : null,
29-
props: { name: this.icon }
30-
})
31-
: null,
32-
33-
this.label
34-
35-
].concat(slot(this, 'default')))
35+
}, mergeSlot(child, this, 'default'))
3636
}
3737
})

‎ui/src/components/btn/QBtn.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import QSpinner from '../spinner/QSpinner.js'
55

66
import BtnMixin from '../../mixins/btn.js'
77

8-
import slot from '../../utils/slot.js'
8+
import { mergeSlot } from '../../utils/slot.js'
99
import { stop, prevent, stopAndPrevent, listenOpts } from '../../utils/event.js'
1010
import { getTouchTarget } from '../../utils/touch.js'
1111
import { isKeyCode } from '../../utils/key-composition'
@@ -200,8 +200,8 @@ export default Vue.extend({
200200
},
201201

202202
render (h) {
203+
let inner = []
203204
const
204-
inner = [],
205205
data = {
206206
staticClass: 'q-btn inline q-btn-item non-selectable no-outline',
207207
class: this.classes,
@@ -240,8 +240,7 @@ export default Vue.extend({
240240
h('div', [ this.label ])
241241
)
242242

243-
const def = slot(this, 'default')
244-
def !== void 0 && inner.push(def)
243+
inner = mergeSlot(inner, this, 'default')
245244

246245
if (this.iconRight !== void 0 && this.isRound === false) {
247246
inner.push(

‎ui/src/components/carousel/QCarousel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { PanelParentMixin } from '../../mixins/panel.js'
77
import FullscreenMixin from '../../mixins/fullscreen.js'
88

99
import { isNumber } from '../../utils/is.js'
10-
import slot from '../../utils/slot.js'
10+
import { mergeSlot } from '../../utils/slot.js'
1111

1212
export default Vue.extend({
1313
name: 'QCarousel',
@@ -163,7 +163,7 @@ export default Vue.extend({
163163
}))
164164
}
165165

166-
return node.concat(slot(this, 'control'))
166+
return mergeSlot(node, this, 'control')
167167
},
168168

169169
__renderPanels (h) {

‎ui/src/components/checkbox/QCheckbox.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from 'vue'
22

33
import CheckboxMixin from '../../mixins/checkbox.js'
44

5-
import slot from '../../utils/slot.js'
5+
import slot, { mergeSlot } from '../../utils/slot.js'
66

77
export default Vue.extend({
88
name: 'QCheckbox',
@@ -79,15 +79,15 @@ export default Vue.extend({
7979
}, content)
8080
]
8181

82-
const def = slot(this, 'default')
82+
const label = this.label !== void 0
83+
? mergeSlot([ this.label ], this, 'default')
84+
: slot(this, 'default')
8385

84-
if (this.label !== void 0 || def !== void 0) {
85-
child.push(
86-
h('div', {
87-
staticClass: 'q-checkbox__label q-anchor--skip'
88-
}, (this.label !== void 0 ? [ this.label ] : []).concat(def))
89-
)
90-
}
86+
label !== void 0 && child.push(
87+
h('div', {
88+
staticClass: 'q-checkbox__label q-anchor--skip'
89+
}, label)
90+
)
9191

9292
return h('div', {
9393
staticClass: 'q-checkbox cursor-pointer no-outline row inline no-wrap items-center',

‎ui/src/components/chip/QChip.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import RippleMixin from '../../mixins/ripple.js'
77
import SizeMixin from '../../mixins/size.js'
88

99
import { stopAndPrevent } from '../../utils/event.js'
10-
import slot from '../../utils/slot.js'
10+
import { mergeSlotSafely } from '../../utils/slot.js'
1111

1212
const sizes = {
1313
xs: 8,
@@ -129,10 +129,14 @@ export default Vue.extend({
129129
})
130130
)
131131

132+
const label = this.label !== void 0
133+
? [ this.label ]
134+
: void 0
135+
132136
child.push(
133137
h('div', {
134138
staticClass: 'q-chip__content row no-wrap items-center q-anchor--skip'
135-
}, this.label !== void 0 ? [ this.label ] : slot(this, 'default'))
139+
}, mergeSlotSafely(label, this, 'default'))
136140
)
137141

138142
this.iconRight && child.push(

‎ui/src/components/footer/QFooter.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from 'vue'
22

33
import QResizeObserver from '../resize-observer/QResizeObserver.js'
44
import { onSSR } from '../../plugins/Platform.js'
5-
import slot from '../../utils/slot.js'
5+
import { mergeSlot } from '../../utils/slot.js'
66
import { stop } from '../../utils/event.js'
77

88
export default Vue.extend({
@@ -150,7 +150,7 @@ export default Vue.extend({
150150
...this.$listeners,
151151
input: stop
152152
}
153-
}, child.concat(slot(this, 'default')))
153+
}, mergeSlot(child, this, 'default'))
154154
},
155155

156156
created () {

‎ui/src/components/header/QHeader.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22

33
import QResizeObserver from '../resize-observer/QResizeObserver.js'
4-
import slot from '../../utils/slot.js'
4+
import { mergeSlot } from '../../utils/slot.js'
55
import { stop } from '../../utils/event.js'
66

77
export default Vue.extend({
@@ -116,14 +116,12 @@ export default Vue.extend({
116116
},
117117

118118
render (h) {
119-
const child = [
119+
const child = mergeSlot([
120120
h(QResizeObserver, {
121121
props: { debounce: 0 },
122122
on: { resize: this.__onResize }
123123
})
124-
].concat(
125-
slot(this, 'default')
126-
)
124+
], this, 'default')
127125

128126
this.elevated === true && child.push(
129127
h('div', {

‎ui/src/components/icon/QIcon.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Vue from 'vue'
22

33
import SizeMixin from '../../mixins/size.js'
4-
import slot from '../../utils/slot.js'
4+
import { mergeSlot } from '../../utils/slot.js'
55

66
export default Vue.extend({
77
name: 'QIcon',
@@ -119,18 +119,11 @@ export default Vue.extend({
119119
})
120120
}
121121

122-
let child = [ this.type.content ]
123-
const def = slot(this, 'default')
124-
125-
if (def !== void 0) {
126-
child = child.concat(def)
127-
}
128-
129122
return h('i', {
130123
staticClass: this.type.cls,
131124
style: this.sizeStyle,
132125
on: this.$listeners,
133126
attrs: { 'aria-hidden': true }
134-
}, child)
127+
}, mergeSlot([ this.type.content ], this, 'default'))
135128
}
136129
})

0 commit comments

Comments
 (0)