Мета:

1. Навчитися створювати базові компоненти у Vue 3.
2. Опанувати стилізацію компонентів за допомогою Tailwind CSS.
3. Практикувати передачу пропсів та обробку подій між компонентами.

Засоби та інструменти:

• Vue 3
• Tailwind CSS
• Node.js (для встановлення залежностей)
• npm або yarn для управління пакетами

Завдання

1. Налаштування проекту Vue 3 з Tailwind CSS на базі проекту з попередньої лабораторної роботи.

   #Встановіть та налаштуйте Tailwind CSS відповідно до офіційної документації:
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

2. Налаштувати tailwind.config.js за необхідноті.

3. Створіть компонент Button за наступними функціональними вимогами:

   • Приймати наступні пропси:
     • label: Текст кнопки.
     • color: Кольорова тема кнопки (наприклад, червона, синя).
     • size: Розмір кнопки (маленька, середня, велика).
     • icon: Іконка для кнопки (необов’язкова).
   • Використайте Tailwind для стилізації кнопки з урахуванням пропсів.
   • Додайте можливість обробки події click на кнопці.

4. Створіть компонент SearchableDropdown за наступними функціональними вимогами:

   • Загальні вимоги:
     • Приймає масив елементів для випадаючого списку через пропс.
     • Має поле пошуку для фільтрації варіантів, що відображається при отриманні фокусу вводу.
     • Використайте Tailwind для стилізації випадаючого списку та поля пошуку.
     • Забезпечте можливість вибору елементу та передачі вибраного значення у батьківський компонент через подію.
   • Пошук по значенням (Searchable):
     • Користувач має можливість вводити текст для фільтрації елементів списку.
     • Список варіантів має оновлюватися відповідно до введеного тексту в режимі реального часу.
     • Якщо жоден варіант не відповідає введеному тексту, відображається повідомлення "Нічого не знайдено".
   • Вибір значення (Selection):
     • Користувач може вибрати одне або кілька значень зі списку (в залежності від налаштувань компонента).
     • Після вибору список закривається, а вибране значення відображається в полі введення.
   • Підтримка клавіатури:
     • Компонент підтримує навігацію за допомогою клавіш стрілок та Enter для вибору елементів.
   • Скидання вибору (Clear Selection):
     • Додати можливість очищати вибране значення через кнопку "очистити".
   • Кастомізація відображення варіантів:
     • Користувач може кастомізувати відображення елементів списку (наприклад, додавати іконки).
5. Створіть сторінку з демо, яка відображатиме всі можливі комбінації параметрів для кожного з компонентів:
   • Для компонента Button – різні кольори, розміри та наявність іконок.
   • Для SearchableDropdown – різні набори даних, фільтрація, можливість вибору кількох елементів.
6. Розмістіть ваш проект в директорії lab2 публічного репозиторію GitHub/GitLab/Bitbucket з назвою <vendor>/mjsf-mag та додайте посилання на репозиторій у звіт.

Контрольні питання

• Що таке props у Vue.js і для чого вони використовуються?
• Які типи даних можна використовувати для пропсів у Vue? Як визначити тип пропсу?
• Як задати значення за замовчуванням для пропса у Vue?
• Що таке emits у Vue.js і для чого вони використовуються?
• Як передати подію з дочірнього компонента до батьківського компонента у Vue?
• Як визначити події, які компонент може "викидати" (emit)?
• Як можна обробляти події у батьківському компоненті, що надходять від дочірнього компонента?
• Що таке директиви у Vue.js і як вони відрізняються від компонентів?
• Які є вбудовані директиви у Vue.js, і які їхні основні призначення?
• Як створити власну директиву у Vue.js? Які основні етапи цього процесу?