1 1
import Vue from '../../utils/vue'
2 2
import { getComponentConfig } from '../../utils/config'
3 -
import { isNumber, isString, isUndefinedOrNull } from '../../utils/inspect'
3 +
import { isNumber, isString } from '../../utils/inspect'
4 4
import { toFloat } from '../../utils/number'
5 5
import { omit } from '../../utils/object'
6 6
import { pluckProps } from '../../utils/props'
@@ -15,17 +15,13 @@ import normalizeSlotMixin from '../../mixins/normalize-slot'
15 15
const NAME = 'BAvatar'
16 16
const CLASS_NAME = 'b-avatar'
17 17 18 +
const SIZES = ['sm', null, 'lg']
19 + 18 20
const RX_NUMBER = /^[0-9]*\.?[0-9]+$/
19 21 20 22
const FONT_SIZE_SCALE = 0.4
21 23
const BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7
22 24 23 -
const DEFAULT_SIZES = {
24 -
sm: '1.5em',
25 -
md: '2.5em',
26 -
lg: '3.5em'
27 -
}
28 - 29 25
// --- Props ---
30 26
const linkProps = omit(BLinkProps, ['active', 'event', 'routerTag'])
31 27
@@ -99,18 +95,10 @@ const props = {
99 95 100 96
// --- Utility methods ---
101 97
export const computeSize = value => {
102 -
// Default to `md` size when `null`, or parse to
103 -
// number when value is a float-like string
104 -
value =
105 -
isUndefinedOrNull(value) || value === ''
106 -
? 'md'
107 -
: isString(value) && RX_NUMBER.test(value)
108 -
? toFloat(value, 0)
109 -
: value
98 +
// Parse to number when value is a float-like string
99 +
value = isString(value) && RX_NUMBER.test(value) ? toFloat(value, 0) : value
110 100
// Convert all numbers to pixel values
111 -
// Handle default sizes when `sm`, `md` or `lg`
112 -
// Or use value as is
113 -
return isNumber(value) ? `${value}px` : DEFAULT_SIZES[value] || value
101 +
return isNumber(value) ? `${value}px` : value || null
114 102
}
115 103 116 104
// --- Main component ---
@@ -130,36 +118,35 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
130 118
computed: {
131 119
computedSize() {
132 120
// Always use the avatar group size
133 -
return computeSize(this.bvAvatarGroup ? this.bvAvatarGroup.size : this.size)
121 +
const { bvAvatarGroup } = this
122 +
return computeSize(bvAvatarGroup ? bvAvatarGroup.size : this.size)
134 123
},
135 124
computedVariant() {
136 -
// Prefer avatar-group variant if provided
137 -
const avatarGroup = this.bvAvatarGroup
138 -
return avatarGroup && avatarGroup.variant ? avatarGroup.variant : this.variant
125 +
const { bvAvatarGroup } = this
126 +
return bvAvatarGroup && bvAvatarGroup.variant ? bvAvatarGroup.variant : this.variant
139 127
},
140 128
computedRounded() {
141 -
const avatarGroup = this.bvAvatarGroup
142 -
const square = avatarGroup && avatarGroup.square ? true : this.square
143 -
const rounded = avatarGroup && avatarGroup.rounded ? avatarGroup.rounded : this.rounded
129 +
const { bvAvatarGroup } = this
130 +
const square = bvAvatarGroup && bvAvatarGroup.square ? true : this.square
131 +
const rounded = bvAvatarGroup && bvAvatarGroup.rounded ? bvAvatarGroup.rounded : this.rounded
144 132
return square ? '0' : rounded === '' ? true : rounded || 'circle'
145 133
},
146 134
fontStyle() {
147 -
let fontSize = this.computedSize
148 -
fontSize = fontSize ? `calc(${fontSize} * ${FONT_SIZE_SCALE})` : null
135 +
const { computedSize: size } = this
136 +
const fontSize = SIZES.indexOf(size) === -1 ? `calc(${size} * ${FONT_SIZE_SCALE})` : null
149 137
return fontSize ? { fontSize } : {}
150 138
},
151 139
marginStyle() {
152 -
const avatarGroup = this.bvAvatarGroup
153 -
const overlapScale = avatarGroup ? avatarGroup.overlapScale : 0
154 -
const size = this.computedSize
140 +
const { computedSize: size, bvAvatarGroup } = this
141 +
const overlapScale = bvAvatarGroup ? bvAvatarGroup.overlapScale : 0
155 142
const value = size && overlapScale ? `calc(${size} * -${overlapScale})` : null
156 143
return value ? { marginLeft: value, marginRight: value } : {}
157 144
},
158 145
badgeStyle() {
159 146
const { computedSize: size, badgeTop, badgeLeft, badgeOffset } = this
160 147
const offset = badgeOffset || '0px'
161 148
return {
162 -
fontSize: size ? `calc(${size} * ${BADGE_FONT_SIZE_SCALE} )` : null,
149 +
fontSize: SIZES.indexOf(size) === -1 ? `calc(${size} * ${BADGE_FONT_SIZE_SCALE} )` : null,
163 150
top: badgeTop ? offset : null,
164 151
bottom: badgeTop ? null : offset,
165 152
left: badgeLeft ? offset : null,
@@ -246,6 +233,8 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
246 233
const componentData = {
247 234
staticClass: CLASS_NAME,
248 235
class: {
236 +
// Apply size class
237 +
[`${CLASS_NAME}-${size}`]: size && SIZES.indexOf(size) !== -1,
249 238
// We use badge styles for theme variants when not rendering `BButton`
250 239
[`badge-${variant}`]: !button && variant,
251 240
// Rounding/Square
@@ -254,7 +243,7 @@ export const BAvatar = /*#__PURE__*/ Vue.extend({
254 243
// Other classes
255 244
disabled
256 245
},
257 -
style: { width: size, height: size, ...marginStyle },
246 +
style: { ...marginStyle, width: size, height: size },
258 247
attrs: { 'aria-label': ariaLabel || null },
259 248
props: button ? { variant, disabled, type } : link ? pluckProps(linkProps, this) : {},
260 249
on: button || link ? { click: this.onClick } : {}
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