mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-09 10:29:57 +00:00
27 lines
823 B
Vue
27 lines
823 B
Vue
|
<script setup lang="ts">
|
||
|
|
const props = defineProps<{
|
||
|
|
count: number
|
||
|
|
keypath: string
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
inheritAttrs: false,
|
||
|
|
})
|
||
|
|
|
||
|
|
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
|
||
|
|
|
||
|
|
const useSR = $computed(() => forSR(props.count))
|
||
|
|
const rawNumber = $computed(() => formatNumber(props.count))
|
||
|
|
const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<i18n-t :keypath="keypath" :plural="count" tag="span" class="flex gap-x-1">
|
||
|
|
<CommonTooltip v-if="useSR" :content="rawNumber" placement="bottom">
|
||
|
|
<span aria-hidden="true" v-bind="$attrs">{{ humanReadableNumber }}</span>
|
||
|
|
<span sr-only>{{ rawNumber }}</span>
|
||
|
|
</CommonTooltip>
|
||
|
|
<span v-else v-bind="$attrs">{{ humanReadableNumber }}</span>
|
||
|
|
</i18n-t>
|
||
|
|
</template>
|