Locale

Вспомогательная функция для создания мультиязычности. Composable function for localization.

Import Permalink to "Import"

import useProximaLocale from 'proxima-vue/composables/locale';

Lang Permalink to "Lang"

Язык можно установить при создании приложения или с помощью специальной функции: The language can be set when creating the application or by using a special function:

import { setLang } from 'proxima-vue/locale';

setLang('ru'); // Set russian language

Locales Permalink to "Locales"

Вы можете установить локализацию при создании приложения или с помощью специальной функции: Localization can be set when creating the application or by using a special function:

import { setLocales } from 'proxima-vue/locale';

setLocales({
  en: {
    myToken: 'Hello, world!',
  },
  ru: {
    myToken: 'Всем привет!',
  },
});

Затем можно использовать внутри компонентов: Then it can be used inside components:

// Any component

import useProximaLocale from 'proxima-vue/composables/locale';

const { getLocaleToken } = useProximaLocale();

getLocaleToken('myToken'); // Hello, world!

Component tokens Permalink to "Component tokens"

Также можно устанавливать локализацию внутри компонентов: You can also set localization within components:

При совпадении названия глобальные токены имеют приоритетWhen tokens have the same names, priority is given to global tokens from locales

import useProximaLocale from 'proxima-vue/composables/locale';

const { getLocaleToken, setLang } = useProximaLocale({
  myComponentToken: {
    ru: 'Всем привет!',
    en: 'Hello, world!',
  },
});

getLocaleToken('myComponentToken'); // Hello, world!
setLang('ru');
getLocaleToken('myComponentToken'); // Всем привет!

Plural token Permalink to "Plural token"

import useProximaLocale from 'proxima-vue/composables/locale';

const { getLocaleToken, setLang } = useProximaLocale({
  myPluralToken: {
    ru: '{n} билет | {n} билета | {n} билетов',
    en: '{n} ticket | {n} tickets',
  },
});

getLocaleToken('myPluralToken', 1); // 1 ticket
getLocaleToken('myPluralToken', 2); // 2 tickets
getLocaleToken('myPluralToken', 5); // 5 tickets

setLang('ru');

getLocaleToken('myPluralToken', 1); // 1 билет
getLocaleToken('myPluralToken', 2); // 2 билета
getLocaleToken('myPluralToken', 5); // 5 билетов

Token keys Permalink to "Token keys"

import useProximaLocale from 'proxima-vue/composables/locale';

const { getLocaleToken } = useProximaLocale({
  myToken: {
    en: 'Views: {0}, comments: {1}',
  },
  anotherToken: {
    en: 'Views: {views}, comments: {comments}',
  },
});

// Array -> Views: 11, comments: 33
getLocaleToken('myToken', [11, 33]);

// Object -> Views: 11, comments: 33
getLocaleToken('anotherToken', { views: 11, comments: 33 });

Date Permalink to "Date"

import useProximaLocale from 'proxima-vue/composables/locale';

const { getLocaleDate } = useProximaLocale();

// you can use timestamp
getLocaleDate(1708109366613); // 'February 16, 2024 at 9:49 PM'

// or ISO string
getLocaleDate('2024-02-16T18:49:32.000Z');

// or Date object
getLocaleDate(new Date());

// Without time
getLocaleDate(1708109366613, false) // 'February 16, 2024'

Translations Permalink to "Translations"

По умолчанию есть перевод для 8 языков: By default, there are translations available for 8 languages:

import en from 'proxima-vue/locale/en';

{
  checkboxRequired: "The checkbox must be checked",
  selectRequired: "Choose one of the options",
  switchRequired: "The switch must be activated",
  fieldInvalid: "The field is not valid",
  fieldRequired: "The field is required",
  fieldUnexpectedUseNumber: "Invalid character, use numbers",
  fieldCreateLabel: "Create “{query}”",
  fieldCreateDescription: "Press Enter to create and select “{query}”",
  fieldNotfoundLabel: "Nothing was found",
  fieldFilterCountLabel: "Showing {visibleCount} of {totalCount} items, refine your request to see the rest",
  fieldSelectedLabel: "{n} item selected | {n} items selected",
  fieldBadLength: "Minimum number of characters: {minlength}, currently: {count}",
  fieldBadEmail: "Please enter a valid email address",
  fieldBadPhone: "Please enter a valid phone number",
  fieldBadDate: "Date does not match format: {format}",
  fieldIsoDate: "year month day",
  fieldBadMonth: "The month is entered incorrectly, it should be from 01 to 12, now: {month}",
  fieldBadDay: "The day is entered incorrectly, it should be from 01 to {max}, now: {day}",
  fieldDateUnderflow: "The earliest date to accept: {date}",
  fieldDateOverflow: "The latest date to accept: {date}",
  fieldPhoneFormat: "+1 (***) ***-****",
  modalCloseAriaLabel: "Close the modal",
}

View source on GitHub