87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { Actor } from '~/types'
|
|
|
|
import { toRefs } from '@vueuse/core'
|
|
import { computed } from 'vue'
|
|
import { truncate } from '~/utils/filters'
|
|
|
|
import Link from '~/components/ui/Link.vue'
|
|
|
|
interface Props {
|
|
actor: Actor
|
|
avatar?: boolean
|
|
admin?: boolean
|
|
displayName?: boolean
|
|
truncateLength?: number
|
|
discrete?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
avatar: true,
|
|
admin: false,
|
|
displayName: false,
|
|
truncateLength: 30,
|
|
discrete: false
|
|
})
|
|
|
|
const { displayName, actor, truncateLength, admin, avatar } = toRefs(props)
|
|
|
|
const repr = computed(() => {
|
|
const name = displayName.value || actor.value.is_local
|
|
? actor.value.preferred_username
|
|
: actor.value.full_username
|
|
|
|
return truncate(name, truncateLength.value)
|
|
})
|
|
|
|
const url = computed(() => {
|
|
if (admin.value) {
|
|
return { name: 'manage.moderation.accounts.detail', params: { id: actor.value.full_username } }
|
|
}
|
|
|
|
if (actor.value.is_local) {
|
|
return { name: 'profile.overview', params: { username: actor.value.preferred_username } }
|
|
}
|
|
|
|
return {
|
|
name: 'profile.full.overview',
|
|
params: {
|
|
username: actor.value.preferred_username,
|
|
domain: actor.value.domain
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Link
|
|
:to="url"
|
|
:title="actor.full_username"
|
|
class="username"
|
|
:solid="!discrete"
|
|
:secondary="!discrete"
|
|
:round="!discrete"
|
|
>
|
|
<span class="center">
|
|
<actor-avatar
|
|
v-if="avatar"
|
|
:actor="actor"
|
|
/>
|
|
<slot>{{ repr }}</slot>
|
|
</span>
|
|
</Link>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
a.username {
|
|
span.center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
i.label {
|
|
padding: 4px 8px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
</style>
|