69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
size: {
|
|
type: [String, Number],
|
|
default: 40,
|
|
},
|
|
gender: {
|
|
type: String,
|
|
default: '',
|
|
validator: (value) => ['male', 'female', ''].includes(value.toLowerCase()),
|
|
},
|
|
profileImageUrl: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
class: {
|
|
type: [String, Object, Array],
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const avatarSource = computed(() => {
|
|
if (props.profileImageUrl) {
|
|
return props.profileImageUrl
|
|
}
|
|
|
|
switch (props.gender.toLowerCase()) {
|
|
case 'male':
|
|
return null // Gunakan slot default untuk v-icon
|
|
case 'female':
|
|
return null // Gunakan slot default untuk v-icon
|
|
default:
|
|
return null // Gunakan slot default untuk v-icon
|
|
}
|
|
})
|
|
|
|
const avatarIcon = computed(() => {
|
|
if (!props.profileImageUrl) {
|
|
switch (props.gender.toLowerCase()) {
|
|
case 'male':
|
|
return 'mdi-face-man'
|
|
case 'female':
|
|
return 'mdi-face-woman'
|
|
default:
|
|
return 'mdi-emoticon-confused'
|
|
}
|
|
}
|
|
return null
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-avatar :size="size" color="primary" :class="class">
|
|
<img v-if="avatarSource" :src="avatarSource" :alt="`Avatar`" />
|
|
<v-icon
|
|
v-else-if="avatarIcon"
|
|
:size="Math.max(Number(size) * 0.66, 20)"
|
|
color="white"
|
|
>
|
|
{{ avatarIcon }}
|
|
</v-icon>
|
|
<slot v-else name="fallback">
|
|
<v-icon :size="Math.max(Number(size) * 0.66, 20)" color="white">
|
|
mdi-account-circle
|
|
</v-icon>
|
|
</slot>
|
|
</v-avatar>
|
|
</template>
|