37 lines
1010 B
Vue
37 lines
1010 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useAvatarImage } from '@/composables/useAvatarImage'
|
|
import { initialsOf } from '@/lib/directory'
|
|
|
|
const TONES = ['bg-(--rc-sand)', 'bg-(--ui-bg-accented)', 'bg-(--ui-bg-elevated)'] as const
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
name: string
|
|
avatarId?: number | null
|
|
size?: number
|
|
ring?: boolean
|
|
}>(),
|
|
{ avatarId: null, size: 32, ring: false },
|
|
)
|
|
|
|
const src = useAvatarImage(() => props.avatarId)
|
|
const tone = computed(() => TONES[props.name.length % TONES.length])
|
|
const fontSize = computed(() => `${Math.round(props.size * 0.36)}px`)
|
|
</script>
|
|
|
|
<template>
|
|
<UAvatar
|
|
:src="src"
|
|
:alt="name"
|
|
:text="initialsOf(name)"
|
|
aria-hidden="true"
|
|
:style="{ width: `${size}px`, height: `${size}px`, fontSize }"
|
|
:class="[tone, ring ? 'border-2 border-(--ui-bg)' : 'border border-default']"
|
|
:ui="{
|
|
root: 'shrink-0 rounded-none text-highlighted',
|
|
fallback: 'font-semibold leading-none text-highlighted',
|
|
}"
|
|
/>
|
|
</template>
|