1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-20 02:25:11 +03:00
elk/components/account/AccountRolesIndicator.vue
2023-07-25 17:29:54 +02:00

31 lines
728 B
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
defineProps<{
account: mastodon.v1.Account
limit?: number
}>()
</script>
<template>
<div
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
<slot name="prepend" />
<div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
<div :style="`color: ${role.color}; border-color: ${role.color}`">
{{ role.name }}
</div>
</div>
</div>
<div
v-if="limit && account.roles?.length > limit"
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
+{{ account.roles?.length - limit }}
</div>
</template>