card.js
4.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import { extend, mergeData } from '../../vue'
import { NAME_CARD } from '../../constants/components'
import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
import { SLOT_NAME_DEFAULT, SLOT_NAME_FOOTER, SLOT_NAME_HEADER } from '../../constants/slots'
import { htmlOrText } from '../../utils/html'
import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
import { sortKeys } from '../../utils/object'
import {
copyProps,
makeProp,
makePropsConfigurable,
pluckProps,
prefixPropName,
unprefixPropName
} from '../../utils/props'
import { props as cardProps } from '../../mixins/card'
import { BCardBody, props as BCardBodyProps } from './card-body'
import { BCardHeader, props as BCardHeaderProps } from './card-header'
import { BCardFooter, props as BCardFooterProps } from './card-footer'
import { BCardImg, props as BCardImgProps } from './card-img'
// --- Props ---
const cardImgProps = copyProps(BCardImgProps, prefixPropName.bind(null, 'img'))
cardImgProps.imgSrc.required = false
export const props = makePropsConfigurable(
sortKeys({
...BCardBodyProps,
...BCardHeaderProps,
...BCardFooterProps,
...cardImgProps,
...cardProps,
align: makeProp(PROP_TYPE_STRING),
noBody: makeProp(PROP_TYPE_BOOLEAN, false)
}),
NAME_CARD
)
// --- Main component ---
// @vue/component
export const BCard = /*#__PURE__*/ extend({
name: NAME_CARD,
functional: true,
props,
render(h, { props, data, slots, scopedSlots }) {
const {
imgSrc,
imgLeft,
imgRight,
imgStart,
imgEnd,
imgBottom,
header,
headerHtml,
footer,
footerHtml,
align,
textVariant,
bgVariant,
borderVariant
} = props
const $scopedSlots = scopedSlots || {}
const $slots = slots()
const slotScope = {}
let $imgFirst = h()
let $imgLast = h()
if (imgSrc) {
const $img = h(BCardImg, {
props: pluckProps(cardImgProps, props, unprefixPropName.bind(null, 'img'))
})
if (imgBottom) {
$imgLast = $img
} else {
$imgFirst = $img
}
}
let $header = h()
const hasHeaderSlot = hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots)
if (hasHeaderSlot || header || headerHtml) {
$header = h(
BCardHeader,
{
props: pluckProps(BCardHeaderProps, props),
domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
},
normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots)
)
}
let $content = normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
// Wrap content in `<card-body>` when `noBody` prop set
if (!props.noBody) {
$content = h(BCardBody, { props: pluckProps(BCardBodyProps, props) }, $content)
// When the `overlap` prop is set we need to wrap the `<b-card-img>` and `<b-card-body>`
// into a relative positioned wrapper to don't distract a potential header or footer
if (props.overlay && imgSrc) {
$content = h('div', { staticClass: 'position-relative' }, [$imgFirst, $content, $imgLast])
// Reset image variables since they are already in the wrapper
$imgFirst = h()
$imgLast = h()
}
}
let $footer = h()
const hasFooterSlot = hasNormalizedSlot(SLOT_NAME_FOOTER, $scopedSlots, $slots)
if (hasFooterSlot || footer || footerHtml) {
$footer = h(
BCardFooter,
{
props: pluckProps(BCardFooterProps, props),
domProps: hasHeaderSlot ? {} : htmlOrText(footerHtml, footer)
},
normalizeSlot(SLOT_NAME_FOOTER, slotScope, $scopedSlots, $slots)
)
}
return h(
props.tag,
mergeData(data, {
staticClass: 'card',
class: {
'flex-row': imgLeft || imgStart,
'flex-row-reverse': (imgRight || imgEnd) && !(imgLeft || imgStart),
[`text-${align}`]: align,
[`bg-${bgVariant}`]: bgVariant,
[`border-${borderVariant}`]: borderVariant,
[`text-${textVariant}`]: textVariant
}
}),
[$imgFirst, $header, $content, $footer, $imgLast]
)
}
})