1 -
import Vue from '../../utils/vue'
2 1
import { mergeData } from 'vue-functional-data-merge'
3 -
import prefixPropName from '../../utils/prefix-prop-name'
4 -
import unPrefixPropName from '../../utils/unprefix-prop-name'
5 -
import copyProps from '../../utils/copy-props'
6 -
import pluckProps from '../../utils/pluck-props'
2 +
import Vue from '../../utils/vue'
3 +
import { htmlOrText } from '../../utils/html'
7 4
import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
5 +
import { copyProps, pluckProps, prefixPropName, unprefixPropName } from '../../utils/props'
8 6
import cardMixin from '../../mixins/card'
9 7
import { BCardBody, props as bodyProps } from './card-body'
10 8
import { BCardHeader, props as headerProps } from './card-header'
@@ -36,49 +34,68 @@ export const BCard = /*#__PURE__*/ Vue.extend({
36 34
functional: true,
37 35
props,
38 36
render(h, { props, data, slots, scopedSlots }) {
39 -
const $slots = slots()
40 -
// Vue < 2.6.x may return undefined for scopedSlots
37 +
const {
38 +
imgLeft,
39 +
imgRight,
40 +
imgStart,
41 +
imgEnd,
42 +
header,
43 +
headerHtml,
44 +
footer,
45 +
footerHtml,
46 +
align,
47 +
textVariant,
48 +
bgVariant,
49 +
borderVariant
50 +
} = props
41 51
const $scopedSlots = scopedSlots || {}
52 +
const $slots = slots()
53 +
const slotScope = {}
42 54 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 - 55 +
let $imgFirst = h()
56 +
let $imgLast = h()
50 57
if (props.imgSrc) {
51 -
const img = h(BCardImg, {
52 -
props: pluckProps(cardImgProps, props, unPrefixPropName.bind(null, 'img'))
58 +
const $img = h(BCardImg, {
59 +
props: pluckProps(cardImgProps, props, unprefixPropName.bind(null, 'img'))
53 60
})
61 + 54 62
if (props.imgBottom) {
55 -
imgLast = img
63 +
$imgLast = $img
56 64
} else {
57 -
imgFirst = img
65 +
$imgFirst = $img
58 66
}
59 67
}
60 68 61 -
if (props.header || props.headerHtml || hasNormalizedSlot('header', $scopedSlots, $slots)) {
62 -
header = h(
69 +
let $header = h()
70 +
const hasHeaderSlot = hasNormalizedSlot('header', $scopedSlots, $slots)
71 +
if (hasHeaderSlot || header || headerHtml) {
72 +
$header = h(
63 73
BCardHeader,
64 -
{ props: pluckProps(headerProps, props) },
65 -
normalizeSlot('header', {}, $scopedSlots, $slots)
74 +
{
75 +
props: pluckProps(headerProps, props),
76 +
domProps: hasHeaderSlot ? {} : htmlOrText(headerHtml, header)
77 +
},
78 +
normalizeSlot('header', slotScope, $scopedSlots, $slots)
66 79
)
67 80
}
68 81 69 -
content = normalizeSlot('default', {}, $scopedSlots, $slots) || []
82 +
let $content = normalizeSlot('default', slotScope, $scopedSlots, $slots)
83 + 84 +
// Wrap content in <card-body> when `noBody` prop set
70 85
if (!props.noBody) {
71 -
// Wrap content in card-body
72 -
content = [h(BCardBody, { props: pluckProps(bodyProps, props) }, [...content])]
86 +
$content = h(BCardBody, { props: pluckProps(bodyProps, props) }, $content)
73 87
}
74 88 75 -
if (props.footer || props.footerHtml || hasNormalizedSlot('footer', $scopedSlots, $slots)) {
76 -
footer = h(
89 +
let $footer = h()
90 +
const hasFooterSlot = hasNormalizedSlot('footer', $scopedSlots, $slots)
91 +
if (hasFooterSlot || footer || footerHtml) {
92 +
$footer = h(
77 93
BCardFooter,
78 94
{
79 -
props: pluckProps(footerProps, props)
95 +
props: pluckProps(footerProps, props),
96 +
domProps: hasHeaderSlot ? {} : htmlOrText(footerHtml, footer)
80 97
},
81 -
normalizeSlot('footer', {}, $scopedSlots, $slots)
98 +
normalizeSlot('footer', slotScope, $scopedSlots, $slots)
82 99
)
83 100
}
84 101
@@ -87,16 +104,15 @@ export const BCard = /*#__PURE__*/ Vue.extend({
87 104
mergeData(data, {
88 105
staticClass: 'card',
89 106
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
107 +
'flex-row': imgLeft || imgStart,
108 +
'flex-row-reverse': (imgRight || imgEnd) && !(imgLeft || imgStart),
109 +
[`text-${align}`]: align,
110 +
[`bg-${bgVariant}`]: bgVariant,
111 +
[`border-${borderVariant}`]: borderVariant,
112 +
[`text-${textVariant}`]: textVariant
97 113
}
98 114
}),
99 -
[imgFirst, header, ...content, footer, imgLast]
115 +
[$imgFirst, $header, $content, $footer, $imgLast]
100 116
)
101 117
}
102 118
})
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4