+28
-18
lines changedFilter options
+28
-18
lines changed Original file line number Diff line number Diff line change
@@ -11,9 +11,12 @@ import { BIconPersonFill } from '../../icons/icons'
11 11 12 12
// --- Constants ---
13 13
const NAME = 'BAvatar'
14 +
const CLASS_NAME = 'b-avatar'
14 15 15 16
const RX_NUMBER = /^[0-9]*\.?[0-9]+$/
16 17 18 +
const FONT_SIZE_SCALE = 0.4
19 + 17 20
const DEFAULT_SIZES = {
18 21
sm: '1.5em',
19 22
md: '2.5em',
@@ -81,6 +84,10 @@ const props = {
81 84
type: String
82 85
// default: null
83 86
},
87 +
alt: {
88 +
type: String,
89 +
default: 'avatar'
90 +
},
84 91
variant: {
85 92
type: String,
86 93
default: () => getComponentConfig(NAME, 'variant')
@@ -130,48 +137,46 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
130 137
functional: true,
131 138
props,
132 139
render(h, { props, data, children }) {
133 -
const isButton = props.button
140 +
const { variant, disabled, square, icon, src, text, button: isButton, buttonType: type } = props
134 141
const isBLink = !isButton && (props.href || props.to)
135 142
const tag = isButton ? BButton : isBLink ? BLink : 'span'
136 -
const variant = props.variant
137 -
const disabled = props.disabled
138 -
const type = props.buttonType
139 -
const square = props.square
140 143
const rounded = square ? false : props.rounded === '' ? true : props.rounded || 'circle'
141 144
const size = computeSize(props.size)
145 +
const alt = props.alt || null
146 +
const ariaLabel = props.ariaLabel || null
142 147 143 148
let $content = null
144 149
if (children) {
145 150
// Default slot overrides props
146 151
$content = children
147 -
} else if (props.icon) {
152 +
} else if (icon) {
148 153
$content = h(BIcon, {
149 -
props: { icon: props.icon },
150 -
attrs: { 'aria-hidden': 'true' }
154 +
props: { icon },
155 +
attrs: { 'aria-hidden': 'true', alt }
151 156
})
152 -
} else if (props.src) {
153 -
$content = h('img', { attrs: { src: props.src } })
154 -
} else if (props.text) {
155 -
const fontSize = size ? `calc(${size} * 0.4)` : null
156 -
$content = h('span', { style: { fontSize } }, props.text)
157 +
} else if (src) {
158 +
$content = h('img', { attrs: { src, alt } })
159 +
} else if (text) {
160 +
const fontSize = size ? `calc(${size} * ${FONT_SIZE_SCALE})` : null
161 +
$content = h('span', { style: { fontSize } }, text)
157 162
} else {
158 -
$content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true' } })
163 +
$content = h(BIconPersonFill, { attrs: { 'aria-hidden': 'true', alt } })
159 164
}
160 165 161 166
const componentData = {
162 -
staticClass: 'b-avatar',
167 +
staticClass: CLASS_NAME,
163 168
class: {
164 169
// We use badge/button styles for theme variants
165 -
[`${isButton ? 'btn' : 'badge'}-${props.variant}`]: !!props.variant,
166 -
// Rounding / Square
170 +
[`${isButton ? 'btn' : 'badge'}-${variant}`]: !!variant,
171 +
// Rounding/Square
167 172
rounded: rounded === true,
168 173
'rounded-0': square,
169 174
[`rounded-${rounded}`]: rounded && rounded !== true,
170 175
// Other classes
171 176
disabled
172 177
},
173 178
style: { width: size, height: size },
174 -
attrs: { 'aria-label': props.ariaLabel || null },
179 +
attrs: { 'aria-label': ariaLabel },
175 180
props: isButton ? { variant, disabled, type } : isBLink ? pluckProps(linkProps, props) : {}
176 181
}
177 182
@@ -22,6 +22,11 @@
22 22
"prop": "icon",
23 23
"description": "Icon name to use for the avatar. Must be all lowercase. Defaults to `person-fill` if `text` or `src` props not provided"
24 24
},
25 +
{
26 +
"prop": "alt",
27 +
"version": "2.9.0",
28 +
"description": "Value to place in the 'alt' attribute for image and icon avatars"
29 +
},
25 30
{
26 31
"prop": "size",
27 32
"description": "Size of the avatar. Refer to the documentation for details"
You can’t perform that action at this time.
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