Email

Import Permalink to "Import"

import ProximaEmail from 'proxima-vue/field/email';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaEmail from 'proxima-vue/field/email';

const value = ref('');

<ProximaEmail
  label="E-mail"
  placeholder="Enter email"
  v-model="value"
/>

Autocomplete Permalink to "Autocomplete"

По умолчанию компонент будет показывать список адресов через нативный datalist сразу после ввода @, вы можете заменить список доменов через пропс domains или отключить автодополнение вовсе: By default, the component will display a list of addresses via the native datalist immediately after entering @. You can replace the list of domains using the domains prop or disable autocompletion altogether:

<ProximaEmail
  :domains="['company.com', 'company.ru']"
/>

<ProximaEmail
  :has-autocomplete="false"
/>

Validator Permalink to "Validator"

Для проверки валидности используется функция с регулярным выражением /^.+@.+\..+$/, но вы можете передать свою функцию проверки в пропс validator: To check the validity, a function with the regular expression /^.+@.+\..+$/ is used, but you can pass your own validation function to the validator prop:

<ProximaEmail
  :validator="checkEmail"
  validity-status="both"
  v-model="value"
/>

import { ref } from 'vue';
import ProximaEmail from 'proxima-vue/field/email';

const value = ref('');

const checkEmail = (value) => {
  return value === 'dontcare@gmail.com';
};

Locale Permalink to "Locale"

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

{
  fieldBadEmail: "Please enter a valid email address",
}

Extends Permalink to "Extends"

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