PFM Shared

Appearance

Текстовые инпуты ​


Disable

Show Error

Has icon

Has counter

text

date

link

phone

multiLine

Example Label

Инпут должен растягиваться ( Fill container ) на ширину автолэйаута, оборачивающего инпут

Props ​

ts
interface Props {
    modelValue: string; // v-model
    type?: PfmInputType; // тип кнопки
    labelText?: Nullable<string>; // текст лейбла
    placeholderText?: Nullable<string>; // текст плейсхолдера
    errorText?: Nullable<string>; // текст ошибки
    hasError?: boolean; // флаг ошибки
    disabled?: boolean; // флаг активности
    hasIcon?: boolean; // флаг отображения иконки
    maxLenght?: Nullable<number>; // максимальная длина
}

Важно

Даже если передан hasIcon, иконка не будет отображатся в следующих типах

link,

phone,

multiLine,

multiLineExpandable

Маски инпутов ​

в типах phone и date используется маска инпутов imask (ванила версия)

Маска телефона ​

Поскольку в планах пушить продукт на другие снг страны, в вводе номера телефона можно использовать только символы которые мэтчатся регуляркой

ts
/^[+()-\d]*$/g

Маска даты ​

дата идёт в формате dd-mm-yyyy

ts
{
    mask: '00-00-0000',
    placeholderChar: '_'
}