fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.0 KiB
3.0 KiB
category
| category |
|---|
| Time |
useTimeAgoIntl
Reactive time ago with i18n supported. Automatically update the time ago string when the time changes. Powered by Intl.RelativeTimeFormat.
Usage
import { useTimeAgoIntl } from '@vueuse/core';
const timeAgoIntl = useTimeAgoIntl(new Date(2021, 0, 1));
Non-Reactivity Usage
In case you don't need the reactivity, you can use the formatTimeAgo function to get the formatted string instead of a Ref.
import { formatTimeAgoIntl } from '@vueuse/core';
const timeAgoIntl = formatTimeAgoIntl(new Date(2021, 0, 1)); // string
Type Declarations
type Locale = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale;
export interface FormatTimeAgoIntlOptions {
/**
* The locale to format with
*
* @default undefined
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#locales
*/
locale?: Locale;
/**
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options
*/
relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions;
/**
* Whether to insert spaces between parts.
*
* Ignored if `joinParts` is provided.
*
* @default true
*/
insertSpace?: boolean;
/**
* Custom function to join the parts returned by `Intl.RelativeTimeFormat.formatToParts`.
*
* If provided, it will be used instead of the default join logic.
*/
joinParts?: (
parts: Intl.RelativeTimeFormatPart[],
locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale,
) => string;
/**
* Custom units
*/
units?: TimeAgoUnit[];
}
export interface UseTimeAgoIntlOptions<Controls extends boolean> extends FormatTimeAgoIntlOptions {
/**
* Expose more controls and the raw `parts` result.
*
* @default false
*/
controls?: Controls;
/**
* Update interval in milliseconds, set 0 to disable auto update
*
* @default 30_000
*/
updateInterval?: number;
}
type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true
? {
timeAgoIntl: ComputedRef<string>;
parts: ComputedRef<Intl.RelativeTimeFormatPart[]>;
} & Pausable
: ComputedRef<string>;
export interface TimeAgoUnit {
name: Intl.RelativeTimeFormatUnit;
ms: number;
}
/**
* A reactive wrapper for `Intl.RelativeTimeFormat`.
*/
export declare function useTimeAgoIntl(
time: MaybeRefOrGetter<Date | number | string>,
options?: UseTimeAgoIntlOptions<false>,
): UseTimeAgoReturn<false>;
export declare function useTimeAgoIntl(
time: MaybeRefOrGetter<Date | number | string>,
options: UseTimeAgoIntlOptions<true>,
): UseTimeAgoReturn<true>;
/**
* Non-reactive version of useTimeAgoIntl
*/
export declare function formatTimeAgoIntl(
from: Date,
options?: FormatTimeAgoIntlOptions,
now?: Date | number,
): string;
/**
* Format parts into a string
*/
export declare function formatTimeAgoIntlParts(
parts: Intl.RelativeTimeFormatPart[],
options?: FormatTimeAgoIntlOptions,
): string;