8000 Update card.js · bootstrap-vue/bootstrap-vue@0baa352 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0baa352

Browse files
jacobmllr95jacobmllr95
committed
Update card.js
1 parent e58989b commit 0baa352

File tree

1 file changed

+53
-34
lines changed

1 file changed

+53
-34
lines changed

‎src/components/card/card.js

Lines changed: 53 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import Vue from '../../utils/vue'
21
import { mergeData } from 'vue-functional-data-merge'
3-
import prefixPropName from '../../utils/prefix-prop-name'
4-
import unPrefixPropName from '../../utils/unprefix-prop-name'
2+
import Vue from '../../utils/vue'
53
import copyProps from '../../utils/copy-props'
64
import pluckProps from '../../utils/pluck-props'
5+
import prefixPropName from '../../utils/prefix-prop-name'
6+
import unPrefixPropName from '../../utils/unprefix-prop-name'
7+
import { htmlOrText } from '../../utils/html'
78
import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
89
import cardMixin from '../../mixins/card'
910
import { BCardBody, props as bodyProps } from './card-body'
@@ -36,49 +37,68 @@ export const BCard = /*#__PURE__*/ Vue.extend({
3637
functional: true,
3738
props,
3839
render(h, { props, data, slots, scopedSlots }) {
39-
const $slots = slots()
40-
// Vue < 2.6.x may return undefined for scopedSlots
40+
const {
41+
imgLeft,
42+
imgRight,
43+
imgStart,
44+
imgEnd,
45+
header,
46+
headerHtml,
47+
footer,
48+
footerHtml,
49+
align,
50+
textVariant,
51+
bgVariant,
52+
borderVariant
53+
} = props
4154
const $scopedSlots = scopedSlots || {}
55+
const $slots = slots()
56+
const slotScope = {}
4257

43-
// Create placeholder elements for each section
44-
let imgFirst = h()
45-
let header = h()
46-
let content = h()
47-
let footer = h()
48-
let imgLast = h()
49-
58+
let $imgFirst = h()
59+
let $imgLast = h()
5060
if (props.imgSrc) {
51-
const img = h(BCardImg, {
61+
const $img = h(BCardImg, {
5262
props: pluckProps(cardImgProps, props, unPrefixPropName.bind(null, 'img'))
5363
})
64+
5465
if (props.imgBottom) {
55-
imgLast = img
66+
$imgLast = $img
5667
} else {
57-
imgFirst = img
68+
$imgFirst = $img
5869
}
5970
}
6071

61-
if (props.header || props.headerHtml || hasNormalizedSlot('header', $scopedSlots, $slots)) {
62-
header = h(
72+
let $header = h()
73+
const hasHeaderSlot = hasNormalizedSlot('header', $scopedSlots, $slots)
74+
if (hasHeaderSlot || header || headerHtml) {
75+
$header = h(
6376
BCardHeader,
64-
{ props: pluckProps(headerProps, props) },
65-
normalizeSlot('header', {}, $scopedSlots, $slots)
77+
{
78+
props: pluckProps(headerProps, props),
79+
domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
80+
},
81+
normalizeSlot('header', slotScope, $scopedSlots, $slots)
6682
)
6783
}
6884

69-
content = normalizeSlot('default', {}, $scopedSlots, $slots) || []
85+
let $content = normalizeSlot('default', slotScope, $scopedSlots, $slots)
86+
87+
// Wrap content in <card-body> when `noBody` prop set
7088
if (!props.noBody) {
71-
// Wrap content in card-body
72-
content = [h(BCardBody, { props: pluckProps(bodyProps, props) }, [...content])]
89+
$content = h(BCardBody, { props: pluckProps(bodyProps, props) }, $content)
7390
}
7491

75-
if (props.footer || props.footerHtml || hasNormalizedSlot('footer', $scopedSlots, $slots)) {
76-
footer = h(
92+
let $footer = h()
93+
const hasFooterSlot = hasNormalizedSlot('footer', $scopedSlots, $slots)
94+
if (hasFooterSlot || footer || footerHtml) {
95+
$footer = h(
7796
BCardFooter,
7897
{
79-
props: pluckProps(footerProps, props)
98+
props: pluckProps(footerProps, props),
99+
domProps: hasHeaderSlot ? {} : htmlOrText(footerHtml, footer)
80100
},
81-
normalizeSlot('footer', {}, $scopedSlots, $slots)
101+
normalizeSlot('footer', slotScope, $scopedSlots, $slots)
82102
)
83103
}
84104

@@ -87,16 +107,15 @@ export const BCard = /*#__PURE__*/ Vue.extend({
87107
mergeData(data, {
88108
staticClass: 'card',
89109
class: {
90-
'flex-row': props.imgLeft || props.imgStart,
91-
'flex-row-reverse':
92-
(props.imgRight || props.imgEnd) && !(props.imgLeft || props.imgStart),
93-
[`text-${props.align}`]: props.align,
94-
[`bg-${props.bgVariant}`]: props.bgVariant,
95-
[`border-${props.borderVariant}`]: props.borderVariant,
96-
[`text-${props.textVariant}`]: props.textVariant
110+
'flex-row': imgLeft || imgStart,
111+
'flex-row-reverse': (imgRight || imgEnd) && !(imgLeft || imgStart),
112+
[`text-${align}`]: align,
113+
[`bg-${bgVariant}`]: bgVariant,
114+
[`border-${borderVariant}`]: borderVariant,
115+
[`text-${textVariant}`]: textVariant
97116
}
98117
}),
99-
[imgFirst, header, ...content, footer, imgLast]
118+
[$imgFirst, $header, $content, $footer, $imgLast]
100119
)
101120
}
102121
})

0 commit comments

Comments
 (0)
0