elk/components/status/StatusBody.vue

56 lines
1.5 KiB
Vue
Raw Normal View History

2022-11-14 02:20:07 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-14 02:20:07 +00:00
2023-01-07 09:31:48 +00:00
const {
status,
2023-01-18 15:59:37 +00:00
newer,
2023-01-07 09:31:48 +00:00
withAction = true,
} = defineProps<{
2023-01-08 06:21:09 +00:00
status: mastodon.v1.Status | mastodon.v1.StatusEdit
2023-01-18 15:59:37 +00:00
newer?: mastodon.v1.Status
withAction?: boolean
2022-11-14 02:20:07 +00:00
}>()
2023-01-05 16:48:20 +00:00
const { translation } = useTranslation(status, getLanguageCode())
2023-01-07 09:31:48 +00:00
const emojisObject = useEmojisFallback(() => status.emojis)
const vnode = computed(() => {
2023-01-07 09:31:48 +00:00
if (!status.content)
return null
return contentToVNode(status.content, {
2023-01-07 09:31:48 +00:00
emojis: emojisObject.value,
mentions: 'mentions' in status ? status.mentions : undefined,
2023-01-07 09:31:48 +00:00
markdown: true,
2023-01-13 00:08:56 +00:00
collapseMentionLink: !!('inReplyToId' in status && status.inReplyToId),
2023-01-18 15:59:37 +00:00
status: 'id' in status ? status : undefined,
inReplyToStatus: newer,
2023-01-07 09:31:48 +00:00
})
})
2022-11-14 02:20:07 +00:00
</script>
<template>
2023-01-18 15:59:37 +00:00
<div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative>
2023-01-07 09:31:48 +00:00
<span
v-if="status.content"
2023-01-07 09:31:48 +00:00
class="content-rich line-compact" dir="auto"
:lang="('language' in status && status.language) || undefined"
>
<component :is="vnode" v-if="vnode" />
2023-01-07 09:31:48 +00:00
</span>
2022-12-23 21:53:21 +00:00
<div v-else />
<template v-if="translation.visible">
<div my2 h-px border="b base" bg-base />
<ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
<div v-else text-red-4>
Error: {{ translation.error }}
</div>
</template>
2022-11-20 21:21:53 +00:00
</div>
2022-11-14 02:20:07 +00:00
</template>
<style>
.status-body.with-action p {
cursor: pointer;
}
</style>