2022-11-26 17:34:24 +09:00
|
|
|
import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
|
2022-11-25 17:57:34 +09:00
|
|
|
|
|
|
|
export const useFormattedDateTime = (
|
2022-11-27 17:48:04 +09:00
|
|
|
value: MaybeComputedRef<string | Date | undefined | null>,
|
2022-11-25 17:57:34 +09:00
|
|
|
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
|
|
|
|
) => {
|
2022-11-30 08:25:29 +09:00
|
|
|
const { locale } = useI18n()
|
2022-12-01 22:14:58 +09:00
|
|
|
const formatter = $computed(() => Intl.DateTimeFormat(locale.value, options))
|
2022-11-26 12:36:18 +09:00
|
|
|
return computed(() => {
|
|
|
|
const v = resolveUnref(value)
|
|
|
|
return v ? formatter.format(new Date(v)) : ''
|
|
|
|
})
|
2022-11-25 17:57:34 +09:00
|
|
|
}
|
2022-11-26 14:05:44 +09:00
|
|
|
|
|
|
|
export const timeAgoOptions: UseTimeAgoOptions<false> = {
|
|
|
|
showSecond: true,
|
|
|
|
messages: {
|
|
|
|
justNow: 'just now',
|
|
|
|
past: n => n,
|
|
|
|
future: n => n.match(/\d/) ? `in ${n}` : n,
|
|
|
|
month: (n, past) => n === 1
|
|
|
|
? past
|
|
|
|
? 'last month'
|
|
|
|
: 'next month'
|
|
|
|
: `${n}m`,
|
|
|
|
year: (n, past) => n === 1
|
|
|
|
? past
|
|
|
|
? 'last year'
|
|
|
|
: 'next year'
|
|
|
|
: `${n}y`,
|
|
|
|
day: (n, past) => n === 1
|
|
|
|
? past
|
|
|
|
? 'yesterday'
|
|
|
|
: 'tomorrow'
|
|
|
|
: `${n}d`,
|
|
|
|
week: (n, past) => n === 1
|
|
|
|
? past
|
|
|
|
? 'last week'
|
|
|
|
: 'next week'
|
|
|
|
: `${n} week${n > 1 ? 's' : ''}`,
|
|
|
|
hour: n => `${n}h`,
|
|
|
|
minute: n => `${n}min`,
|
|
|
|
second: n => `${n}s`,
|
|
|
|
},
|
|
|
|
}
|