Свои страны и флаги

Форматы стран и флаги можно поменять под себя — так же, как тексты ошибок в tinyval: команда копирует данные пакета в ваш проект, вы правите файл и один раз подключаете его при старте приложения.

Страны и форматы

npx tinyval-phone countries            # все 245 стран → phones/countries.ts
npx tinyval-phone countries ru kz de   # только эти страны, остальные остаются как в пакете

// phones/countries.ts
import type { Countries } from 'tinyval-phone';

export default {
  ru: ['7', '(999) 999-99-99', '[78]'],
  kz: ['7', '(999) 999-99-99', '[78]', '[67]'],
  de: ['49', '9999 9999999[9]', '0'],      // свой формат
  ab: ['7', '(999) 999-99-99', '[78]', '940'], // новая страна: +7 940…
  xk: null,                                // убрать страну
} satisfies Countries;

// main.ts — до создания масок
import { setCountries } from 'tinyval-phone';
import countries from './phones/countries';

setCountries(countries);

Запись страны — [код, шаблон после кода, национальная приставка, признак страны]:

Часть	Пример	Что значит
код	'49'	Телефонный код без +
шаблон	'999 9999999[9]'	9 — цифра, [9] — необязательная цифра, '\\9' в строке — цифра 9 как есть
приставка	'0', '[78]'	Что набирают перед местным номером; отбрасывается: 07400… → +44 7400…
признак	'242', '…$'	Для стран с общим кодом: начало номера без кода страны или, с $ на конце, весь номер

Приставка и признак — регулярные выражения по цифрам номера без кода страны. Как различаются страны с общим кодом — в Странах и форматах.

Только свои страны, без остального мира — setCountries(countries, { replace: true }): остальные номера не будут определяться и не будут valid.

Флаги

Команда копирует SVG выбранных флагов в модуль — правьте разметку или замените её своей. Все флаги из этого файла попадают в бандл, поэтому оставляйте только те, что меняете:

npx tinyval-phone flags ru kz          # → phones/flags.ts
npx tinyval-phone flags --all --svg --out public/flags   # файлы .svg — для <img> или графического редактора

// phones/flags.ts
import type { Flags } from 'tinyval-phone/flags';

export default {
  ru: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">…</svg>',
  ab: () => import('./ab.svg?raw').then((m) => m.default), // загрузится, когда понадобится
  su: null,                                                // флага нет
} satisfies Flags;

import { setFlags } from 'tinyval-phone/flags';
import flags from './phones/flags';

setFlags(flags);

Свой набор флагов целиком

Функция вместо объекта загружает любой флаг. Вернула undefined — используется встроенный. Флаги, заданные по коду, важнее функции.

// например, круглые флаги с вашего CDN
setFlags((code) => fetch(`/flags/round/${code}.svg`).then((r) => (r.ok ? r.text() : undefined)));

resetFlags() возвращает встроенные флаги, flagCodes() — список флагов с учётом ваших.

Без файла

Пара изменений не стоит отдельного файла — setCountries и setFlags принимают объект прямо в коде:

setCountries({ de: ['49', '9999 9999999[9]', '0'] });
setFlags({ ru: myRussianFlagSvg });