2023-01-02 20:19:36 +00:00
|
|
|
import type { MaybeComputedRef, MaybeRef, UseTimeAgoOptions } from '@vueuse/core'
|
2022-11-25 08:57:34 +00:00
|
|
|
|
2022-12-02 08:52:00 +00:00
|
|
|
const formatter = Intl.NumberFormat()
|
|
|
|
|
2023-01-08 08:21:25 +00:00
|
|
|
export function formattedNumber(num: number, useFormatter: Intl.NumberFormat = formatter) {
|
2022-12-02 08:52:00 +00:00
|
|
|
return useFormatter.format(num)
|
|
|
|
}
|
|
|
|
|
2023-01-08 08:21:25 +00:00
|
|
|
export function useHumanReadableNumber() {
|
2023-01-01 19:31:14 +00:00
|
|
|
const { n, locale } = useI18n()
|
2023-01-01 14:29:11 +00:00
|
|
|
|
|
|
|
const fn = (num: number) => {
|
2023-01-01 19:31:14 +00:00
|
|
|
return n(
|
|
|
|
num,
|
|
|
|
num < 10000
|
|
|
|
? 'smallCounting'
|
|
|
|
: num < 1000000
|
|
|
|
? 'kiloCounting'
|
|
|
|
: 'millionCounting',
|
|
|
|
locale.value,
|
|
|
|
)
|
2023-01-01 14:29:11 +00:00
|
|
|
}
|
|
|
|
|
2022-12-02 08:52:00 +00:00
|
|
|
return {
|
2023-01-01 14:29:11 +00:00
|
|
|
formatHumanReadableNumber: (num: MaybeRef<number>) => fn(unref(num)),
|
|
|
|
formatNumber: (num: MaybeRef<number>) => n(unref(num), 'smallCounting', locale.value),
|
|
|
|
formatPercentage: (num: MaybeRef<number>) => n(unref(num), 'percentage', locale.value),
|
|
|
|
forSR: (num: MaybeRef<number>) => unref(num) > 10000,
|
2022-12-02 08:52:00 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-08 08:21:25 +00:00
|
|
|
export function useFormattedDateTime(value: MaybeComputedRef<string | number | Date | undefined | null>,
|
|
|
|
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }) {
|
2022-11-29 23:25:29 +00:00
|
|
|
const { locale } = useI18n()
|
2022-12-01 13:14:58 +00:00
|
|
|
const formatter = $computed(() => Intl.DateTimeFormat(locale.value, options))
|
2022-11-26 03:36:18 +00:00
|
|
|
return computed(() => {
|
|
|
|
const v = resolveUnref(value)
|
|
|
|
return v ? formatter.format(new Date(v)) : ''
|
|
|
|
})
|
2022-11-25 08:57:34 +00:00
|
|
|
}
|
2022-11-26 05:05:44 +00:00
|
|
|
|
2023-01-08 08:21:25 +00:00
|
|
|
export function useTimeAgoOptions(short = false): UseTimeAgoOptions<false> {
|
2023-01-01 14:29:11 +00:00
|
|
|
const { d, t, n: fnf, locale } = useI18n()
|
2022-12-02 08:16:06 +00:00
|
|
|
const prefix = short ? 'short_' : ''
|
2022-12-02 02:18:36 +00:00
|
|
|
|
2023-01-01 14:29:11 +00:00
|
|
|
const fn = (n: number, past: boolean, key: string) => {
|
|
|
|
return t(`time_ago_options.${prefix}${key}_${past ? 'past' : 'future'}`, n, {
|
|
|
|
named: {
|
|
|
|
v: fnf(n, 'smallCounting', locale.value),
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2022-12-02 02:18:36 +00:00
|
|
|
return {
|
2022-12-19 21:20:32 +00:00
|
|
|
rounding: 'floor',
|
2022-12-02 08:16:06 +00:00
|
|
|
showSecond: !short,
|
2023-01-08 08:21:25 +00:00
|
|
|
updateInterval: short ? 60000 : 1000,
|
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,
|
2023-01-01 14:29:11 +00:00
|
|
|
second: (n, p) => fn(n, p, 'second'),
|
|
|
|
minute: (n, p) => fn(n, p, 'minute'),
|
|
|
|
hour: (n, p) => fn(n, p, 'hour'),
|
|
|
|
day: (n, p) => fn(n, p, 'day'),
|
|
|
|
week: (n, p) => fn(n, p, 'week'),
|
|
|
|
month: (n, p) => fn(n, p, 'month'),
|
|
|
|
year: (n, p) => fn(n, p, 'year'),
|
2022-12-20 13:27:53 +00:00
|
|
|
invalid: '',
|
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
|
|
|
}
|