mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add lib vue-avatar
This commit is contained in:
ogerly
parent
dcbcd9976d
commit
5aba0a8c35
@ -17,7 +17,6 @@
|
||||
"@babel/core": "^7.13.13",
|
||||
"@babel/node": "^7.13.13",
|
||||
"@babel/preset-env": "^7.13.12",
|
||||
"@ogerlys/vue-avatar": "^2.3.4",
|
||||
"@vue/cli-plugin-unit-jest": "^4.5.12",
|
||||
"@vue/test-utils": "^1.1.3",
|
||||
"apollo-boost": "^0.4.9",
|
||||
@ -54,6 +53,7 @@
|
||||
"vee-validate": "^3.4.5",
|
||||
"vue": "2.6.12",
|
||||
"vue-apollo": "^3.0.7",
|
||||
"vue-avatar": "^2.3.3",
|
||||
"vue-flatpickr-component": "^8.1.2",
|
||||
"vue-focus": "^2.1.0",
|
||||
"vue-i18n": "^8.22.4",
|
||||
|
||||
@ -1,209 +0,0 @@
|
||||
<template>
|
||||
<div class="vue-avatar--wrapper" :style="[style, customStyle]" aria-hidden="true">
|
||||
<!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
|
||||
<img v-if="this.isImage" style="display: none" :src="this.src" @error="onImgError" />
|
||||
<span v-show="!this.isImage">{{ userInitial }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const getInitials = (username, initialsCount) => {
|
||||
const parts = username.split(/[ -]/)
|
||||
let initials = ''
|
||||
const initialsCount = initialsCount
|
||||
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
initials += parts[i].charAt(0)
|
||||
}
|
||||
|
||||
if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
|
||||
initials = initials.replace(/[a-z]+/g, '')
|
||||
}
|
||||
|
||||
initials = initials.substr(0, initialsCount).toUpperCase()
|
||||
|
||||
return initials
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'avatar',
|
||||
props: {
|
||||
username: {
|
||||
type: String,
|
||||
},
|
||||
initials: {
|
||||
type: String,
|
||||
},
|
||||
initialsCount: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 50,
|
||||
},
|
||||
src: {
|
||||
type: String,
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
lighten: {
|
||||
type: Number,
|
||||
default: 80,
|
||||
},
|
||||
parser: {
|
||||
type: Function,
|
||||
default: getInitials,
|
||||
validator: (parser) => typeof parser('John', getInitials) === 'string',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
backgroundColors: [
|
||||
'#F44336',
|
||||
'#FF4081',
|
||||
'#9C27B0',
|
||||
'#673AB7',
|
||||
'#3F51B5',
|
||||
'#2196F3',
|
||||
'#03A9F4',
|
||||
'#00BCD4',
|
||||
'#009688',
|
||||
'#4CAF50',
|
||||
'#8BC34A',
|
||||
'#CDDC39',
|
||||
/* '#FFEB3B' , */ '#FFC107',
|
||||
'#FF9800',
|
||||
'#FF5722',
|
||||
'#795548',
|
||||
'#9E9E9E',
|
||||
'#607D8B',
|
||||
],
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (!this.isImage) {
|
||||
this.$emit('avatar-initials', this.username, this.userInitial)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
background() {
|
||||
if (!this.isImage) {
|
||||
return (
|
||||
this.backgroundColor ||
|
||||
this.randomBackgroundColor(this.username.length, this.backgroundColors)
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
fontColor() {
|
||||
if (!this.isImage) {
|
||||
return this.color || this.lightenColor(this.background, this.lighten)
|
||||
}
|
||||
},
|
||||
|
||||
isImage() {
|
||||
return !this.imgError && Boolean(this.src)
|
||||
},
|
||||
|
||||
style() {
|
||||
const style = {
|
||||
display: this.inline ? 'inline-flex' : 'flex',
|
||||
width: `${this.size}px`,
|
||||
height: `${this.size}px`,
|
||||
borderRadius: this.rounded ? '50%' : 0,
|
||||
lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
|
||||
fontWeight: 'bold',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none',
|
||||
}
|
||||
|
||||
const imgBackgroundAndFontStyle = {
|
||||
background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`,
|
||||
}
|
||||
|
||||
const initialBackgroundAndFontStyle = {
|
||||
backgroundColor: this.background,
|
||||
font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
|
||||
color: this.fontColor,
|
||||
}
|
||||
|
||||
const backgroundAndFontStyle = this.isImage
|
||||
? imgBackgroundAndFontStyle
|
||||
: initialBackgroundAndFontStyle
|
||||
|
||||
Object.assign(style, backgroundAndFontStyle)
|
||||
|
||||
return style
|
||||
},
|
||||
|
||||
userInitial() {
|
||||
if (!this.isImage) {
|
||||
const initials = this.initials || this.parser(this.username, getInitials)
|
||||
return initials
|
||||
}
|
||||
return ''
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
initial: getInitials,
|
||||
|
||||
onImgError(evt) {
|
||||
this.imgError = true
|
||||
},
|
||||
|
||||
randomBackgroundColor(seed, colors) {
|
||||
return colors[seed % colors.length]
|
||||
},
|
||||
|
||||
lightenColor(hex, amt) {
|
||||
// From https://css-tricks.com/snippets/javascript/lighten-darken-color/
|
||||
let usePound = false
|
||||
|
||||
if (hex[0] === '#') {
|
||||
hex = hex.slice(1)
|
||||
usePound = true
|
||||
}
|
||||
|
||||
const num = parseInt(hex, 16)
|
||||
let r = (num >> 16) + amt
|
||||
|
||||
if (r > 255) r = 255
|
||||
else if (r < 0) r = 0
|
||||
|
||||
let b = ((num >> 8) & 0x00ff) + amt
|
||||
|
||||
if (b > 255) b = 255
|
||||
else if (b < 0) b = 0
|
||||
|
||||
let g = (num & 0x0000ff) + amt
|
||||
|
||||
if (g > 255) g = 255
|
||||
else if (g < 0) g = 0
|
||||
|
||||
return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -2437,11 +2437,6 @@
|
||||
consola "^2.15.0"
|
||||
node-fetch "^2.6.1"
|
||||
|
||||
"@ogerlys/vue-avatar@^2.3.4":
|
||||
version "2.3.4"
|
||||
resolved "https://registry.yarnpkg.com/@ogerlys/vue-avatar/-/vue-avatar-2.3.4.tgz#b627baced39f908a397630c1141d9c931f4f36f4"
|
||||
integrity sha512-Mjx0lTJzXHC57FUAiBPCPhoB2x6NfXVIh4+AxcmKmY0nE3C2pidPHb3mkpfS3DL2NPJO8qry6TC5j4d1TpeGNw==
|
||||
|
||||
"@polka/url@^1.0.0-next.20":
|
||||
version "1.0.0-next.21"
|
||||
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
|
||||
@ -14196,6 +14191,11 @@ vue-apollo@^3.0.7:
|
||||
serialize-javascript "^4.0.0"
|
||||
throttle-debounce "^2.1.0"
|
||||
|
||||
vue-avatar@^2.3.3:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-avatar/-/vue-avatar-2.3.3.tgz#e125bf4f4a6f4f9480da0c522020266a8609d2a8"
|
||||
integrity sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==
|
||||
|
||||
vue-cli-plugin-i18n@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user