/
index.ts
197 lines (168 loc) · 5.76 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
import type { MaybeComputedRef, Pausable } from '@vueuse/shared'
import { resolveUnref } from '@vueuse/shared'
import type { ComputedRef } from 'vue-demi'
import { computed, unref } from 'vue-demi'
import { useNow } from '../useNow'
export type UseTimeAgoFormatter<T = number> = (value: T, isPast: boolean) => string
export type UseTimeAgoUnitNamesDefault = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'
export interface UseTimeAgoMessagesBuiltIn {
justNow: string
past: string | UseTimeAgoFormatter<string>
future: string | UseTimeAgoFormatter<string>
}
export type UseTimeAgoMessages<UnitNames extends string = UseTimeAgoUnitNamesDefault>
= UseTimeAgoMessagesBuiltIn
& Record<UnitNames, string | UseTimeAgoFormatter<number>>
export interface UseTimeAgoOptions<Controls extends boolean, UnitNames extends string = UseTimeAgoUnitNamesDefault> {
/**
* Expose more controls
*
* @default false
*/
controls?: Controls
/**
* Intervals to update, set 0 to disable auto update
*
* @default 30_000
*/
updateInterval?: number
/**
* Maximum unit (of diff in milliseconds) to display the full date instead of relative
*
* @default undefined
*/
max?: UnitNames | number
/**
* Formatter for full date
*/
fullDateFormatter?: (date: Date) => string
/**
* Messages for formatting the string
*/
messages?: UseTimeAgoMessages<UnitNames>
/**
* Minimum display time unit (default is minute)
*
* @default false
*/
showSecond?: boolean
/**
* Rounding method to apply.
*
* @default 'round'
*/
rounding?: 'round' | 'ceil' | 'floor' | number
/**
* Custom units
*/
units?: UseTimeAgoUnit<UseTimeAgoUnitNamesDefault>[]
}
interface UseTimeAgoUnit<Unit extends string = UseTimeAgoUnitNamesDefault> {
max: number
value: number
name: Unit
}
const DEFAULT_UNITS: UseTimeAgoUnit<UseTimeAgoUnitNamesDefault>[] = [
{ max: 60000, value: 1000, name: 'second' },
{ max: 2760000, value: 60000, name: 'minute' },
{ max: 72000000, value: 3600000, name: 'hour' },
{ max: 518400000, value: 86400000, name: 'day' },
{ max: 2419200000, value: 604800000, name: 'week' },
{ max: 28512000000, value: 2592000000, name: 'month' },
{ max: Infinity, value: 31536000000, name: 'year' },
]
const DEFAULT_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitNamesDefault> = {
justNow: 'just now',
past: n => n.match(/\d/) ? `${n} ago` : n,
future: n => n.match(/\d/) ? `in ${n}` : n,
month: (n, past) => n === 1
? past
? 'last month'
: 'next month'
: `${n} month${n > 1 ? 's' : ''}`,
year: (n, past) => n === 1
? past
? 'last year'
: 'next year'
: `${n} year${n > 1 ? 's' : ''}`,
day: (n, past) => n === 1
? past
? 'yesterday'
: 'tomorrow'
: `${n} day${n > 1 ? 's' : ''}`,
week: (n, past) => n === 1
? past
? 'last week'
: 'next week'
: `${n} week${n > 1 ? 's' : ''}`,
hour: n => `${n} hour${n > 1 ? 's' : ''}`,
minute: n => `${n} minute${n > 1 ? 's' : ''}`,
second: n => `${n} second${n > 1 ? 's' : ''}`,
}
const DEFAULT_FORMATTER = (date: Date) => date.toISOString().slice(0, 10)
export type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true ? { timeAgo: ComputedRef<string> } & Pausable : ComputedRef<string>
/**
* Reactive time ago formatter.
*
* @see https://vueuse.org/useTimeAgo
* @param options
*/
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options?: UseTimeAgoOptions<false, UnitNames>): UseTimeAgoReturn<false>
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<true, UnitNames>): UseTimeAgoReturn<true>
export function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<boolean, UnitNames> = {}) {
const {
controls: exposeControls = false,
max,
updateInterval = 30_000,
messages = DEFAULT_MESSAGES as UseTimeAgoMessages<UnitNames>,
fullDateFormatter = DEFAULT_FORMATTER,
units = DEFAULT_UNITS,
showSecond = false,
rounding = 'round',
} = options
const { abs } = Math
const roundFn = typeof rounding === 'number'
? (n: number) => +n.toFixed(rounding)
: Math[rounding]
const { now, ...controls } = useNow({ interval: updateInterval, controls: true })
function getTimeAgo(from: Date, now: Date) {
const diff = +now - +from
const absDiff = abs(diff)
// less than a minute
if (absDiff < 60000 && !showSecond)
return messages.justNow
if (typeof max === 'number' && absDiff > max)
return fullDateFormatter(new Date(from))
if (typeof max === 'string') {
const unitMax = units.find(i => i.name === max)?.max
if (unitMax && absDiff > unitMax)
return fullDateFormatter(new Date(from))
}
for (const unit of units) {
if (absDiff < unit.max)
return format(diff, unit)
}
}
function applyFormat(name: UnitNames | keyof UseTimeAgoMessagesBuiltIn, val: number | string, isPast: boolean) {
const formatter = messages[name]
if (typeof formatter === 'function')
return formatter(val as never, isPast)
return formatter.replace('{0}', val.toString())
}
function format(diff: number, unit: UseTimeAgoUnit) {
const val = roundFn(abs(diff) / unit.value)
const past = diff > 0
const str = applyFormat(unit.name as UnitNames, val, past)
return applyFormat(past ? 'past' : 'future', str, past)
}
const timeAgo = computed(() => getTimeAgo(new Date(resolveUnref(time)), unref(now.value)))
if (exposeControls) {
return {
timeAgo,
...controls,
}
}
else {
return timeAgo
}
}