VuSearch ui-kit element

[Dmatrushka19]

Изменения

• Создал src/components/VuSearch.vue.
• Использовал [v-text-field] из Vuetify как основу.
• Поддержал v-model
• Вписал нужные классы, чтобы совпало с Figma (цвета, размеры, отступы).
• Добавил иконку search в начало и кнопку с иконкой в конец (описал эмит для этой кнопки).
• Поддержал состояния: hover, active
• Создал стори для Storybook
• Показал все состояния компонента: normal, hover, active

Детали реализации

1. VuSearch.ts: создал компонент, с нужными стилями и элементами; описал эмит для кнопки сортировки
2. VuSearch.stories.ts: показал все возможные состояния. Состояние active реализовал через play. storybook-addon-pseudo-states не поддерживает динамические классы (.v-field--focused), а работает только с CSS-псевдоклассами (:focus, :hover и т. п.). Vuetify при фокусе не использует :focus, а добавляет класс .v-field--focused на обёртку поля ввода. Поэтому реализую показ активного состояния через добавление этого класса вручную через play() после рендера DOM.

Check-List

• Вы проверили свой код перед отправкой запроса?
• Вы написали тесты к реализованным функциям?
• Вы не забыли применить форматирование black и isort для Back-End или Prettier для Front-End?

[BatuevIO]

Надо немного доработать