vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For Avatar

Browse source
This commit is contained in:
Bahadır Sofuoğlu 2023-05-23 16:16:38 +03:00
parent e25a6930b4
commit b8fefac1fd
3 changed files with 110 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

89
components/lib/avatar/Avatar.vue
View file

@ -1,100 +1,25 @@
<template>
<div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
<div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar" data-pc-section="root">
<slot>
<span v-if="label" class="p-avatar-text" v-bind="ptm('label')">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="['p-avatar-icon', icon]" v-bind="ptm('icon')" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
<span v-if="label" :class="cx('label')" v-bind="ptm('label')" data-pc-section="label">{{ label }}</span>
<component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" data-pc-section="icon" />
<span v-else-if="icon" :class="cx('icon')" v-bind="ptm('icon')" data-pc-section="icon" />
<img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" data-pc-section="image" />
</slot>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseAvatar from './BaseAvatar';
export default {
name: 'Avatar',
extends: BaseComponent,
extends: BaseAvatar,
emits: ['error'],
props: {
label: {
type: String,
default: null
},
icon: {
type: String,
default: null
},
image: {
type: String,
default: null
},
size: {
type: String,
default: 'normal'
},
shape: {
type: String,
default: 'square'
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
methods: {
onError() {
this.$emit('error');
}
},
computed: {
containerClass() {
return [
'p-avatar p-component',
{
'p-avatar-image': this.image != null,
'p-avatar-circle': this.shape === 'circle',
'p-avatar-lg': this.size === 'large',
'p-avatar-xl': this.size === 'xlarge'
}
];
}
}
};
</script>
<style>
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.p-avatar.p-avatar-image {
background-color: transparent;
}
.p-avatar.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar .p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
</style>