39 lines
919 B
Vue
39 lines
919 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import AuthorAvatar from '@/components/AuthorAvatar.vue'
|
|
import type { Byline } from '@/composables/useArticles'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
authors: Byline[]
|
|
size?: number
|
|
max?: number
|
|
}>(),
|
|
{ size: 24, max: 3 },
|
|
)
|
|
|
|
const shown = computed(() => props.authors.slice(0, props.max))
|
|
const extra = computed(() => Math.max(0, props.authors.length - props.max))
|
|
</script>
|
|
|
|
<template>
|
|
<span class="flex min-w-0 items-center">
|
|
<UAvatarGroup
|
|
:ui="{ base: 'ring-0 -me-1.5 first-of-type:me-0' }"
|
|
data-testid="author-stack"
|
|
>
|
|
<AuthorAvatar
|
|
v-for="author in shown"
|
|
:key="author.id"
|
|
:name="author.name"
|
|
:avatar-id="author.avatar_id"
|
|
:size="size"
|
|
ring
|
|
/>
|
|
</UAvatarGroup>
|
|
<span v-if="extra > 0" class="ml-1.5 text-xs text-muted" data-testid="author-stack-more"
|
|
>+{{ extra }}</span
|
|
>
|
|
</span>
|
|
</template>
|