Select

Компонент Select — это стилизованный выпадающий список с поддержкой одиночного и множественного выбора, префиксов, суффиксов, метки, описания и состояний ошибки. Автоматически определяет цвет фона для корректного отображения кастомной стрелки.

Обзор

Основное назначение: выбор одного или нескольких значений из выпадающего списка.
Ключевые возможности:
- Одиночный (multiple: false) и множественный (multiple: true) выбор.
- Генерация опций из массива data или через слот.
- Автоматическое определение фона для маскировки кастомной стрелки.
- Префикс и суффикс (по умолчанию — иконка ChevronDown).
- Отключение суффикса через suffix: false.
- Метка (label) и описание (description).
- Состояния: нормальное, ошибка, заблокированное.
- Нестилизованный режим (unstyled).

API компонента

Props

Проп	Тип	По умолчанию	Описание
`modelValue`	`String \| Number \| Array`	`''`	Выбранное значение. При `multiple: true` — массив значений.
`label`	`String`		Текст метки над полем.
`description`	`String`		Текст описания под полем.
`error`	`Boolean \| String`	`false`	Сообщение об ошибке. Если строка — отображается под полем.
`multiple`	`Boolean`	`false`	Включает режим множественного выбора.
`disabled`	`Boolean`	`false`	Блокирует поле.
`unstyled`	`Boolean`	`false`	Убирает все стили по умолчанию.
`data`	`Array`	`[]`	Массив опций. Элементы могут быть строками или объектами `{ label, value, disabled }`.
`prefix`	`String \| Object`		Текст или компонент перед полем выбора. Может быть заменён через слот `prefix`.
`suffix`	`String \| Object \| Boolean`	`true`	Текст или компонент после поля выбора. `true` — иконка по умолчанию, `false` — без суффикса. Может быть заменён через слот `suffix`.
`id`	`String`		HTML-атрибут `id`. Если не указан, генерируется автоматически.
`className`	`String`		Дополнительные CSS-классы для поля выбора.
`classNames`	`Object`	`{}`	Объект для кастомизации внутренних классов. Ключи: `root`, `label`, `labelText`, `wrapper`, `select`, `prefix`, `suffix`, `description`, `error`.
`rootProps`	`Object`	`{}`	Дополнительные атрибуты для корневого элемента.
`labelProps`	`Object`	`{}`	Дополнительные атрибуты для элемента `label`.

События

Событие	Параметр	Описание
`update:modelValue`	`String \| Number \| Array`	Вызывается при изменении выбранного значения.
`change`	`Event`	Нативное событие `change`.

Слоты

Имя слота	Описание
`default`	Позволяет вручную задать элементы `<option>`. Заменяет автоматическую генерацию из `data`.
`prefix`	Содержимое перед полем выбора. Заменяет проп `prefix`.
`suffix`	Содержимое после поля выбора. Заменяет проп `suffix`.

Формат данных (`data`)

Массив data автоматически преобразуется в опции:

Строка: "Значение" → { label: "Значение", value: "Значение" }.
Объект: { label: "Метка", value: "val", disabled: false }.