diff options
Diffstat (limited to 'packages/frontend/src/components/MkAvatars.vue')
| -rw-r--r-- | packages/frontend/src/components/MkAvatars.vue | 15 |
1 files changed, 10 insertions, 5 deletions
diff --git a/packages/frontend/src/components/MkAvatars.vue b/packages/frontend/src/components/MkAvatars.vue index 630620fc08..437dce0a14 100644 --- a/packages/frontend/src/components/MkAvatars.vue +++ b/packages/frontend/src/components/MkAvatars.vue @@ -1,24 +1,29 @@ <template> <div> - <div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> + <div v-for="user in users.slice(0, limit)" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> <MkAvatar :user="user" style="width:32px; height:32px;" indicator link preview/> </div> + <div v-if="users.length > limit" style="display: inline-block;">...</div> </div> </template> <script lang="ts" setup> import { onMounted, ref } from 'vue'; import * as os from '@/os'; +import { UserLite } from 'misskey-js/built/entities'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ userIds: string[]; -}>(); + limit?: number; +}>(), { + limit: Infinity, +}); -const users = ref([]); +const users = ref<UserLite[]>([]); onMounted(async () => { users.value = await os.api('users/show', { userIds: props.userIds, - }); + }) as unknown as UserLite[]; }); </script> |