44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import { isLargeBody } from '@/lib/bodyCounts'
|
|
|
|
const NUMBER_LOCALE = 'en-US'
|
|
|
|
const props = defineProps<{
|
|
words: number
|
|
characters: number
|
|
state: 'clean' | 'dirty' | 'saving' | 'saved' | 'error' | 'offline'
|
|
}>()
|
|
|
|
function formatCount(count: number) {
|
|
return count.toLocaleString(NUMBER_LOCALE)
|
|
}
|
|
|
|
const message = computed(() => {
|
|
if (props.state === 'saving' && isLargeBody(props.characters)) {
|
|
return t('Saving {0} characters. This can take a few seconds.', [
|
|
formatCount(props.characters),
|
|
])
|
|
}
|
|
if (props.state === 'error' && isLargeBody(props.characters)) {
|
|
return t("Couldn't save. Your text is kept. Retry.")
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const countText = computed(() =>
|
|
t('{0} words · {1} characters', [formatCount(props.words), formatCount(props.characters)]),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-3 border-t border-default bg-default px-6 py-2">
|
|
<span class="flex-1 text-xs text-muted" :class="{ 'text-error': state === 'error' }">{{
|
|
message
|
|
}}</span>
|
|
<span class="font-mono text-xs text-muted">{{ countText }}</span>
|
|
</div>
|
|
</template>
|