phoneAuto

Телефон любой страны: маска выбирается по коду, который вводит пользователь. +375 — маска Беларуси, +49 — Германии, +7 701 — Казахстана. Вместе с маской — данные для интерфейса: флаг, название страны, телефонный код.

Сигнатура

function phoneAuto(options?: { defaultCountry?: PhoneCountry; countries?: PhoneCountry[] }): PhoneAutoMask

interface PhoneAutoMask extends Mask {
  country(value: string): CountryInfo | undefined;
}

interface CountryInfo {
  code: PhoneCountry; // 'by'
  dial: string;       // '375'
  flag: string;       // '🇧🇾'
}

Параметры

Опция	Описание
defaultCountry	Страна по умолчанию. Номер без + считается местным: 9991234567 → +7 (999) 123-45-67. Пустое поле показывает её шаблон и флаг. Без опции номер всегда вводится с кодом страны
countries	Среди каких стран определять. При общем коде побеждает первая: ['ca', 'us'] — +1 будет Канадой

Особенности

• Определение идёт по самому длинному подходящему коду: +3 и +37 — ещё не страна, +375 — Беларусь. Пока страна не определена, принимается до 15 цифр (максимум международного стандарта E.164).
• +7 — Россия, но +7 6… и +7 7… — Казахстан (коды казахстанских операторов).
• Чтобы ввести номер другой страны, когда поле уже показывает страну по умолчанию, достаточно набрать + — ввод начнётся заново.
• Значение без маски — все цифры с кодом страны: 375291234567.
• valid и isValid — true, только если номер заполнен по маске определённой страны.
• Национальная приставка отбрасывается: с defaultCountry: 'gb' номер 07400 123456 станет +44 7400 123456, с 'ru' — 8 999… станет +7 (999)….
• Список стран — в Готовых масках. Все 245 стран мира — пакет tinyval-phone с тем же API.

Примеры

Флаг и название страны рядом с полем

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phoneAuto, countryName } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phoneAuto({ defaultCountry: 'ru' });
const tel = ref('');
const country = computed(() => phoneMask.country(tel.value));
</script>

<template>
  <label>
    <span v-if="country">{{ country.flag }} {{ countryName(country.code, 'ru') }}</span>
    <input v-model="tel" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />
  </label>
  <!-- tel: '375291234567' -->
</template>

Свой выбор страны

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phone, phoneCountries, countryName, type PhoneCountry } from 'tinyval-mask/presets';

const countries = phoneCountries(); // [{ code: 'ru', dial: '7', flag: '🇷🇺' }, …]
const selected = ref<PhoneCountry>('ru');
const phoneMask = computed(() => phone(selected.value));
</script>

<template>
  <select v-model="selected">
    <option v-for="c in countries" :key="c.code" :value="c.code">
      {{ c.flag }} {{ countryName(c.code, 'ru') }} +{{ c.dial }}
    </option>
  </select>
  <input v-model="tel" v-mask.raw="phoneMask" />
</template>

Без интерфейса

detectCountry('+375291234567'); // 'by'
detectCountry('77011234567');   // 'kz'
flag('de');                     // '🇩🇪'
countryName('de', 'ru');        // 'Германия'
unmask('+49 151 23456789', phoneAuto()); // '4915123456789'

Флаги и названия

• flag(code) — флаг-эмодзи из кода страны. Windows вместо флагов-эмодзи показывает две буквы (RU) — если это важно, берите SVG-иконки из tinyval-phone/flags по country.code.
• countryName(code, locale) — название на любом языке через стандартный Intl.DisplayNames: таблицы названий в пакете нет, поэтому размер не растёт.

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

phoneTable — таблица стран пакета. Функции phoneFrom, phoneAutoFrom, detectCountryFrom, phoneCountriesFrom работают так же, но с любой таблицей: можно добавить страну или поменять формат. Запись страны — [код, шаблон после кода, национальная приставка, признак страны], приставка и признак — регулярные выражения по цифрам без кода страны.

import { phoneTable, phoneAutoFrom } from 'tinyval-mask/presets';

const table = {
  ...phoneTable,
  jp: ['81', '99-9999-9999', '0'],
  bs: ['1', '(999) 999-9999', '1', '242'], // +1 242… — Багамы / the Bahamas
} as const;
const tel = phoneAutoFrom(table, { defaultCountry: 'jp' });
mask('09012345678', tel); // '+81 90-1234-5678'

См. также

• Готовые маски — phone(country) для одной страны
• vMask — .raw и видимый шаблон