Компонент CollapsibleSearch — это сворачиваемое поле поиска с кнопкой-иконкой. Поле ввода анимированно раскрывается при клике на иконку поиска и автоматически получает фокус.
- Основное назначение: компактный поиск, который раскрывается по нажатию кнопки.
- Ключевые возможности:
- Анимированное раскрытие и скрытие поля ввода.
- Автоматический фокус при раскрытии.
- Начальное состояние (свёрнут/раскрыт) через
defaultState. - Поддержка
v-model. - Кастомизация кнопки через
buttonProps. - Data-атрибут
data-collapsed для стилизации.
| Проп | Тип | По умолчанию | Описание |
|---|
modelValue | String | '' | Значение поискового запроса (v-model). |
defaultState | Boolean | false | Начальное состояние поля поиска: true — раскрыто, false — свёрнуто. |
className | String | | Дополнительные CSS-классы для поля ввода. |
buttonProps | Object | {} | Дополнительные пропсы для кнопки поиска. |
| Событие | Параметр | Описание |
|---|
update:modelValue | String | Вызывается при изменении поискового запроса. |
| Атрибут | Значение | Описание |
|---|
data-collapsed | 'true' | 'false' | Отражает состояние поля: 'true' — свёрнуто, 'false' — раскрыто. |
<CollapsibleSearch v-model="searchQuery" />
