elk/components/status/StatusTranslation.vue
renovate[bot] 3c43a1cdd1
chore(deps): update lint (#1928)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
2023-03-30 19:01:24 +00:00

45 lines
1.1 KiB
Vue

<script setup lang="ts">
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: mastodon.v1.Status
}>()
const {
toggle: _toggleTranslation,
translation,
enabled: isTranslationEnabled,
} = useTranslation(status, getLanguageCode())
const preferenceHideTranslation = usePreferences('hideTranslation')
const showButton = computed(() => !preferenceHideTranslation.value && isTranslationEnabled)
let translating = $ref(false)
async function toggleTranslation() {
translating = true
try {
await _toggleTranslation()
}
finally {
translating = false
}
}
</script>
<template>
<div>
<button
v-if="showButton" p-0 flex="~ center" gap-2 text-sm
:disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation"
>
<span v-if="translating" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill />
</span>
<div v-else i-ri:translate />
{{ translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post') }}
</button>
</div>
</template>
<style scoped></style>