import { App, InjectionKey, MaybeRef } from 'vue'; import { DateValue } from '../components/OnyxDatePicker/types.js'; import { FlattenedKeysOf } from '../types/i18n.js'; import { DeepPartial } from '../types/utils.js'; import { DatetimeFormat } from './datetime-formats.js'; import { default as enUS } from './locales/en-US.json'; import { NumberFormat } from './number-formats.js'; /** * The type of the imported `enUS` above is a concrete type so the value type of each message * is e.g. "{ myKey: 'HelloWorld'}" but it should be "{ myKey: string }". * This utility type converts all values to be of type string (more generic) * so we can actually use other locales as well. */ type GetTypeOfTranslations = T extends object ? { [P in keyof T]?: GetTypeOfTranslations; } : string; /** Available translations that are used by onyx components. */ export type OnyxTranslations = GetTypeOfTranslations; export type OnyxTranslationKey = FlattenedKeysOf; export type OnyxNumberFormatOptions = NumberFormat | Intl.NumberFormatOptions; export type OnyxDateFormatOptions = DatetimeFormat | Intl.DateTimeFormatOptions; export type ProvideI18nOptions = { /** * Current locale / language to use. * If a ref is passed (e.g. the locale from the `vue-i18n` package) * all onyx messages will be updated if it changes (if locale is supported). * If a message is missing for your currently set locale, English will be used as fallback. * * The should be in the BCP 47 format as it's used to localize date times using the native [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) * * @default "en-US" */ locale?: MaybeRef; /** * Available translations / messages. English is always supported. For build-in translations, see: * https://onyx.schwarz/development/i18n.html * * @example * ```ts * import deDE from "sit-onyx/locales/de-DE.json"; * { * messages: { * // English is always supported so we don't need to add it here * 'de-DE': deDE * } * } * ``` */ messages?: Record>; /** * Custom translation function. This option can be used to pass a custom function for translations to onyx in case you want your i18n library to handle them. * @example * ```ts * import { useI18n } from "vue-i18n"; * * const { t } = useI18n(); * { * t: computed((key, placeholders) => t(`onyx.${key}`, placeholders?.n ?? 1, { named: placeholders })) * } * ``` * * Note: If a custom `t` function is used, passed messages will not be used. */ t?: MaybeRef; }; export type TranslationFunction = (key: OnyxTranslationKey, /** Named values to interpolate into the translation. The property `n` is special as it represents the number of elements for pluralization. */ placeholders?: Record & { n?: number; }) => string; export declare const I18N_INJECTION_KEY: InjectionKey; export type OnyxI18n = ReturnType; /** * Creates a new i18n instance. */ export declare const createI18n: (options?: ProvideI18nOptions) => { t: Readonly>; locale: Readonly>; d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>; n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>; }; /** * Provides a global i18n instance that is used by onyx. * Must only be called once in the `App.vue` file of a project that consumes onyx. */ export declare const provideI18n: (app: App, options?: ProvideI18nOptions) => { t: Readonly>; locale: Readonly>; d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>; n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>; }; /** * Injects the onyx i18n instance. * Creates a fallback if provide was never called. */ export declare const injectI18n: () => { t: Readonly>; locale: Readonly>; d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>; n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>; }; export {};