elk/composables/i18n.ts

89 lines
2.9 KiB
TypeScript
Raw Normal View History

2022-12-02 08:52:00 +00:00
import type { MaybeRef } from '@vueuse/shared'
import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
2022-12-02 08:52:00 +00:00
const formatter = Intl.NumberFormat()
const humanReadableNumber = (
2022-12-02 08:52:00 +00:00
num: number,
{ k, m }: { k: string; m: string } = { k: 'K', m: 'M' },
useFormatter: Intl.NumberFormat = formatter,
) => {
if (num < 10000)
return useFormatter.format(num)
// show 1 decimal: we cannot use toFixed(1), it is a string
2022-12-02 08:52:00 +00:00
if (num < 1000000)
return `${useFormatter.format(Math.floor(num / 100) / 10)}${k}`
2022-12-02 08:52:00 +00:00
// show 2 decimals: we cannot use toFixed(2), it is a string
return `${useFormatter.format(Math.floor(num / 10000) / 100)}${m}`
2022-12-02 08:52:00 +00:00
}
export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {
return useFormatter.format(num)
}
export const useHumanReadableNumber = () => {
const i18n = useI18n()
const numberFormatter = $computed(() => Intl.NumberFormat(i18n.locale.value))
return {
formatHumanReadableNumber: (num: MaybeRef<number>) => {
return humanReadableNumber(
unref(num),
{ k: i18n.t('common.kiloSuffix'), m: i18n.t('common.megaSuffix') },
numberFormatter,
)
},
formatNumber: (num: MaybeRef<number>) => {
return formattedNumber(
unref(num),
numberFormatter,
)
},
forSR: (num: MaybeRef<number>) => {
return unref(num) > 10000
},
}
}
export const useFormattedDateTime = (
2022-11-27 08:48:04 +00:00
value: MaybeComputedRef<string | Date | undefined | null>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
) => {
2022-11-29 23:25:29 +00:00
const { locale } = useI18n()
const formatter = $computed(() => Intl.DateTimeFormat(locale.value, options))
return computed(() => {
const v = resolveUnref(value)
return v ? formatter.format(new Date(v)) : ''
})
}
2022-11-26 05:05:44 +00:00
2022-12-02 08:16:06 +00:00
export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
2022-12-02 02:18:36 +00:00
const { d, t } = useI18n()
2022-12-02 08:16:06 +00:00
const prefix = short ? 'short_' : ''
2022-12-02 02:18:36 +00:00
return {
rounding: 'floor',
2022-12-02 08:16:06 +00:00
showSecond: !short,
updateInterval: short ? 60_000 : 1_000,
2022-12-02 02:18:36 +00:00
messages: {
justNow: t('time_ago_options.just_now'),
// just return the value
past: n => n,
// just return the value
future: n => n,
2022-12-02 08:16:06 +00:00
second: (n, p) => t(`time_ago_options.${prefix}second_${p ? 'past' : 'future'}`, n),
minute: (n, p) => t(`time_ago_options.${prefix}minute_${p ? 'past' : 'future'}`, n),
hour: (n, p) => t(`time_ago_options.${prefix}hour_${p ? 'past' : 'future'}`, n),
day: (n, p) => t(`time_ago_options.${prefix}day_${p ? 'past' : 'future'}`, n),
week: (n, p) => t(`time_ago_options.${prefix}week_${p ? 'past' : 'future'}`, n),
month: (n, p) => t(`time_ago_options.${prefix}month_${p ? 'past' : 'future'}`, n),
year: (n, p) => t(`time_ago_options.${prefix}year_${p ? 'past' : 'future'}`, n),
2022-12-02 02:18:36 +00:00
},
fullDateFormatter(date) {
2022-12-02 08:16:06 +00:00
return d(date, short ? 'short' : 'long')
2022-12-02 02:18:36 +00:00
},
}
2022-11-26 05:05:44 +00:00
}
2022-12-02 08:16:06 +00:00