Input

Компонент Input — это многофункциональное поле ввода с поддержкой маскирования через Cleave.js, префиксов, суффиксов, меток, описаний и состояний ошибки.

Обзор

Основное назначение: универсальный элемент ввода текста и чисел с возможностью форматирования.
Ключевые возможности:
- Поддержка маскирования и форматирования через cleaveOptions (Cleave.js).
- Префиксы и суффиксы (текстовые или через слоты) с опциональной кликабельностью.
- Метка (label) и описание (description).
- Состояния: нормальное, ошибка, заблокированное.
- Нестилизованный режим (unstyled).
- События blur, focus, prefix-click, suffix-click.
- Публичные методы: focus(), blur(), getRawValue(), getFormattedValue().

API компонента

Props

Проп	Тип	По умолчанию	Описание
`modelValue`	`String`		Значение поля ввода (v-model).
`type`	`String`	`'text'`	HTML-тип поля ввода.
`label`	`String`		Текст метки над полем.
`description`	`String`		Текст описания под полем.
`prefix`	`String`		Текст или иконка перед полем ввода. Может быть заменён через слот `prefix`.
`suffix`	`String`		Текст или иконка после поля ввода. Может быть заменён через слот `suffix`.
`clickablePrefix`	`Boolean`	`false`	Делает префикс кликабельным (добавляет `cursor-pointer`).
`clickableSuffix`	`Boolean`	`false`	Делает суффикс кликабельным (добавляет `cursor-pointer`).
`error`	`Boolean \| String`		Сообщение об ошибке. Если строка — отображается под полем.
`disabled`	`Boolean`	`false`	Блокирует поле ввода.
`unstyled`	`Boolean`	`false`	Убирает все стили по умолчанию.
`id`	`String`		HTML-атрибут `id`. Если не указан, генерируется автоматически (`tl-{counter}-input`).
`className`	`String`		Дополнительные CSS-классы для поля ввода.
`classNames`	`Object`	`{}`	Объект для кастомизации внутренних классов. Ключи: `root`, `label`, `labelText`, `wrapper`, `input`, `prefix`, `suffix`, `description`, `error`.
`rootProps`	`Object`	`{}`	Дополнительные атрибуты для корневого элемента.
`labelProps`	`Object`	`{}`	Дополнительные атрибуты для элемента `label`.
`cleaveOptions`	`Object`		Опции для Cleave.js. Если переданы, включается маскирование ввода.

События

Событие	Параметр	Описание
`update:modelValue`	`String`	Вызывается при изменении значения поля.
`blur`	`Event`	Вызывается при потере фокуса.
`focus`	`Event`	Вызывается при получении фокуса.
`prefix-click`	`Event`	Вызывается при клике на префикс.
`suffix-click`	`Event`	Вызывается при клике на суффикс.

Слоты

Имя слота	Описание
`prefix`	Содержимое перед полем ввода. Заменяет проп `prefix`.
`suffix`	Содержимое после поля ввода. Заменяет проп `suffix`.

Методы

Метод	Описание
`focus()`	Устанавливает фокус на поле ввода.
`blur()`	Убирает фокус с поля ввода.
`getRawValue()`	Возвращает сырое значение (без форматирования). При использовании Cleave — `cleaveInstance.getRawValue()`.
`getFormattedValue()`	Возвращает форматированное значение. При использовании Cleave — `cleaveInstance.getFormattedValue()`.