40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { AvatarVariants } from "@/components/ui/avatar";
|
|
import type { UserModel } from "@/types/models/user-model";
|
|
import { usePage } from "@inertiajs/vue3";
|
|
import { computed } from "vue";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { getInitials } from "@/composables/useInitials";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
user?: UserModel;
|
|
rounded?: boolean;
|
|
size?: AvatarVariants["size"];
|
|
label?: string;
|
|
}>(),
|
|
{
|
|
rounded: true,
|
|
size: "default",
|
|
},
|
|
);
|
|
|
|
const page = usePage();
|
|
const user = computed(() => props.user ?? page.props.auth.user);
|
|
const accessibleLabel = computed(() => props.label ?? user.value.name);
|
|
const initials = computed(() => getInitials(user.value.name));
|
|
</script>
|
|
|
|
<template>
|
|
<Avatar :size="size" :shape="rounded ? 'circle' : 'rounded'">
|
|
<AvatarImage
|
|
v-if="user.avatar"
|
|
:src="user.avatar"
|
|
:alt="accessibleLabel"
|
|
/>
|
|
<AvatarFallback :aria-label="accessibleLabel">
|
|
{{ initials }}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</template>
|