Phone

Import Permalink to "Import"

import ProximaPhone from 'proxima-vue/field/phone';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaPhone from 'proxima-vue/field/phone';

const value = ref('');

<ProximaPhone
  label="Phone"
  v-model="value"
/>

Format Permalink to "Format"

По умолчанию формат зависит от выбранной локализации, но вы можете указать его напрямую, символ * это цифра для ввода: By default, the format depends on the selected localization, but you can directly specify the desired format, symbol * is the number to enter:

<ProximaPhone
  format="+7 (***) ***-**-**"
  validity-status="both"
  width="20"
/>

Mask char Permalink to "Mask char"

Вы можете указать свой символ для маски: You can specify your own placeholder symbol for the mask:

<ProximaPhone
  mask-char="*"
  width="20"
  validity-status="both"
/>

<ProximaPhone
  mask-char="#"
  width="20"
  validity-status="both"
/>

Blink Permalink to "Blink"

По умолчанию при вводе недопустимого символа фон поля мерцает красным цветом, вы можете задать другой цвет или отключить анимацию вовсе: By default, when you enter an invalid character, the field's background blink red. You can set a different color or disable the animation altogether:

:root {
  --field-blink-rgb: 255, 0, 0;
  --field-blink-rgb-opacity: 0.15;
}

<ProximaPhone
  :has-invalid-blink="false"
/>

Unexpected Permalink to "Unexpected"

Поле имеет отдельное событие при вводе недопустимого символа: The field triggers a custom event when an invalid character is entered:

<ProximaPhone
  :has-invalid-blink="false"
  @unexpected:input="onUnexpectedInput"
/>

const onUnexpectedInput = (event) => {
  alert(`Unexpected char: ${event.inputData}`);
};

Raw Permalink to "Raw"

Функция для удаления всех символов кроме цифр: The function to remove all characters except numbers:

import { getRawPhone } from 'proxima-vue/field/phone';

getRawPhone('+7 (911) 182-00-40'); // '79111820040'

CSS Permalink to "CSS"

--field-mask-color: var(--field-placeholder-color);
--field-invalid-mask-color: color-mix(
  in srgb, var(--field-invalid-color), #fff 50%
);

Locale Permalink to "Locale"

Компонент использует токены локализации: The component uses localization tokens:

{
  fieldUnexpectedUseNumber: "Invalid character, use numbers",
  fieldBadPhone: "Please enter a valid phone number",
}

Extends Permalink to "Extends"

Данный компонент основан на текстовом поле и поддерживает его пропсы, события, слоты, БЭМ модификаторы и кастомные свойства. This component is based on a text field and supports its props, events, slots, BEM modifiers and custom properties.