You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.1 KiB
56 lines
1.1 KiB
<script setup>
|
|
import BaseUserAvatar from "./BaseUserAvatar.vue"
|
|
import { useI18n } from "vue-i18n"
|
|
import Avatar from "primevue/avatar"
|
|
import { useAvatarList } from "../../composables/useAvatarList"
|
|
|
|
const props = defineProps({
|
|
users: {
|
|
required: true,
|
|
type: Array,
|
|
},
|
|
shortSeveral: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
countSeveral: {
|
|
required: false,
|
|
type: Number,
|
|
default: 2,
|
|
},
|
|
})
|
|
|
|
const { several, userList, plusText } = useAvatarList(props)
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
|
|
<template>
|
|
<ul
|
|
:class="{ 'avatar-list--several': several }"
|
|
class="avatar-list"
|
|
>
|
|
<li
|
|
v-for="(user, idx) in userList"
|
|
:key="idx"
|
|
:title="user.fullName"
|
|
class="avatar-container"
|
|
>
|
|
<BaseUserAvatar
|
|
:alt="t('%s\'s picture', [user.username])"
|
|
:image-url="user.illustrationUrl"
|
|
/>
|
|
<div class="avatar-info">
|
|
<p v-text="user.fullName" />
|
|
<p v-text="user.username" />
|
|
</div>
|
|
</li>
|
|
<li v-if="several">
|
|
<Avatar
|
|
:label="plusText"
|
|
shape="circle"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|