vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +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

98
components/lib/avatar/BaseAvatar.vue Normal file
View file

@ -0,0 +1,98 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',
{
'p-avatar-image': props.image != null,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge'
}
],
label: 'p-avatar-text',
icon: ({ props }) => ['p-avatar-icon', props.icon]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
export default {
name: 'BaseAvatar',
extends: BaseComponent,
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
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>