img.js
4.02 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
import { extend, mergeData } from '../../vue'
import { NAME_IMG } from '../../constants/components'
import {
PROP_TYPE_ARRAY_STRING,
PROP_TYPE_BOOLEAN,
PROP_TYPE_BOOLEAN_STRING,
PROP_TYPE_NUMBER_STRING,
PROP_TYPE_STRING
} from '../../constants/props'
import { concat } from '../../utils/array'
import { identity } from '../../utils/identity'
import { isString } from '../../utils/inspect'
import { toInteger } from '../../utils/number'
import { makeProp, makePropsConfigurable } from '../../utils/props'
import { toString } from '../../utils/string'
// --- Constants --
// Blank image with fill template
const BLANK_TEMPLATE =
'<svg width="%{w}" height="%{h}" ' +
'xmlns="http://www.w3.org/2000/svg" ' +
'viewBox="0 0 %{w} %{h}" preserveAspectRatio="none">' +
'<rect width="100%" height="100%" style="fill:%{f};"></rect>' +
'</svg>'
// --- Helper methods ---
const makeBlankImgSrc = (width, height, color) => {
const src = encodeURIComponent(
BLANK_TEMPLATE.replace('%{w}', toString(width))
.replace('%{h}', toString(height))
.replace('%{f}', color)
)
return `data:image/svg+xml;charset=UTF-8,${src}`
}
// --- Props ---
export const props = makePropsConfigurable(
{
alt: makeProp(PROP_TYPE_STRING),
blank: makeProp(PROP_TYPE_BOOLEAN, false),
blankColor: makeProp(PROP_TYPE_STRING, 'transparent'),
block: makeProp(PROP_TYPE_BOOLEAN, false),
center: makeProp(PROP_TYPE_BOOLEAN, false),
fluid: makeProp(PROP_TYPE_BOOLEAN, false),
// Gives fluid images class `w-100` to make them grow to fit container
fluidGrow: makeProp(PROP_TYPE_BOOLEAN, false),
height: makeProp(PROP_TYPE_NUMBER_STRING),
left: makeProp(PROP_TYPE_BOOLEAN, false),
right: makeProp(PROP_TYPE_BOOLEAN, false),
// Possible values:
// `false`: no rounding of corners
// `true`: slightly rounded corners
// 'top': top corners rounded
// 'right': right corners rounded
// 'bottom': bottom corners rounded
// 'left': left corners rounded
// 'circle': circle/oval
// '0': force rounding off
rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
sizes: makeProp(PROP_TYPE_ARRAY_STRING),
src: makeProp(PROP_TYPE_STRING),
srcset: makeProp(PROP_TYPE_ARRAY_STRING),
thumbnail: makeProp(PROP_TYPE_BOOLEAN, false),
width: makeProp(PROP_TYPE_NUMBER_STRING)
},
NAME_IMG
)
// --- Main component ---
// @vue/component
export const BImg = /*#__PURE__*/ extend({
name: NAME_IMG,
functional: true,
props,
render(h, { props, data }) {
let { alt, src, block, fluidGrow, rounded } = props
let width = toInteger(props.width) || null
let height = toInteger(props.height) || null
let align = null
let srcset = concat(props.srcset)
.filter(identity)
.join(',')
let sizes = concat(props.sizes)
.filter(identity)
.join(',')
if (props.blank) {
if (!height && width) {
height = width
} else if (!width && height) {
width = height
}
if (!width && !height) {
width = 1
height = 1
}
// Make a blank SVG image
src = makeBlankImgSrc(width, height, props.blankColor || 'transparent')
// Disable srcset and sizes
srcset = null
sizes = null
}
if (props.left) {
align = 'float-left'
} else if (props.right) {
align = 'float-right'
} else if (props.center) {
align = 'mx-auto'
block = true
}
return h(
'img',
mergeData(data, {
attrs: {
src,
alt,
width: width ? toString(width) : null,
height: height ? toString(height) : null,
srcset: srcset || null,
sizes: sizes || null
},
class: {
'img-thumbnail': props.thumbnail,
'img-fluid': props.fluid || fluidGrow,
'w-100': fluidGrow,
rounded: rounded === '' || rounded === true,
[`rounded-${rounded}`]: isString(rounded) && rounded !== '',
[align]: align,
'd-block': block
}
})
)
}
})