32 lines
728 B
Vue
32 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>
|