elk/components/account/AccountPaginator.vue

44 lines
1.4 KiB
Vue
Raw Normal View History

<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { Paginator, mastodon } from 'masto'
const { paginator, account, context } = defineProps<{
2023-01-08 06:21:09 +00:00
paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
context?: 'following' | 'followers'
account?: mastodon.v1.Account
relationshipContext?: 'followedBy' | 'following'
}>()
const fallbackContext = $computed(() => {
return ['following', 'followers'].includes(context!)
})
const showOriginSite = $computed(() =>
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
)
</script>
<template>
2022-11-24 05:47:14 +00:00
<CommonPaginator :paginator="paginator">
2022-11-17 07:35:42 +00:00
<template #default="{ item }">
<AccountCard
:account="item"
:relationship-context="relationshipContext"
2022-11-28 17:24:39 +00:00
hover-card
2022-11-24 06:18:05 +00:00
border="b base" py2 px4
2022-11-17 07:35:42 +00:00
/>
2022-11-16 16:11:08 +00:00
</template>
<template v-if="fallbackContext && showOriginSite" #done>
<div p5 text-secondary text-center flex flex-col items-center gap1>
<span italic>{{ $t(`account.view_other_${context}`) }}</span>
<NuxtLink
:href="account!.url" target="_blank" external
flex="~ gap-1" items-center text-primary
hover="underline text-primary-active"
>
<div i-ri:external-link-fill />
{{ $t('menu.open_in_original_site') }}
</NuxtLink>
</div>
</template>
2022-11-16 16:11:08 +00:00
</CommonPaginator>
</template>