Компоненти — огляд

vue-dev-kit містить 21 UI-компонент із єдиним фірмовим стилем Skyservice. Усі імпортуються з кореня пакета й кастомізуються через CSS-змінні.

import '@skyservice-developers/vue-dev-kit/style.css'
import { SkyButton, Modal, SkyCard /* ... */ } from '@skyservice-developers/vue-dev-kit'

Каталог

Layout

Компонент	Призначення
Header	Шапка сторінки з back-кнопкою, дропдауном розділів, слотом для дій
Modal	Модальне вікно з оверлеєм, скролом, футером
Dialog	Повноекранний діалог (стилі next / classic)

Форми

Компонент	Призначення
SkyButton	Кнопка: 4 варіанти, loading/disabled, block, icon
SkyInput	Текстовий інпут зі станами default/success/error
SkySearchInput	Поле пошуку з очищенням і режимом collapsible
SkySelect	Кастомний select із клавіатурною навігацією
SkySelectSearch	Select із пошуком у дропдауні (для довгих списків)
SkyCheckbox	Чекбокс або switch, boolean / масив
SkyTabs	Сегментовані таби з анімованим індикатором

Дані та статуси

Компонент	Призначення
SkyDataTable	Грід на TanStack Table v9: сортування, пошук, вибір, пагінація
Примітиви таблиці	SkyTableRoot / Header / Head / Body / Row / Cell + композабли
SkyTable	Стара віртуал-скрол таблиця POS: масові дії, inline-редагування
SkyCard	Shell-контейнер картки (+ SkyCardHeader, SkyCardRow)
SkyTileCard	Тайл-картка для списків інтеграцій/додатків
SkyAlert	Інформаційне повідомлення (4 тональності)
SkyBadge	Компактний статус-лейбл із крапкою
SkyLoader	Фірмовий лоадер із двома кільцями

Features

Компонент	Призначення
SkyCheckboxFilter	Кнопка-фільтр із дропдауном, пошуком і мульти-вибором

Сповіщення

Компонент	Призначення
NotificationElement	Web Component для тостів + notificationModule

Спільні конвенції

• v-model — інтерактивні компоненти (Modal, Dialog, SkySelect, SkyInput, SkyCheckbox) працюють через v-model.
• Стани — форми підтримують disabled та (де доречно) state: 'default' | 'success' | 'error'.
• Слоти замість пропсів — контент (іконки, кнопки, заголовки) передається слотами, а не рядковими пропсами, де потрібна гнучкість.
• Тематизація через CSS — кольори/радіуси/відступи задаються лише CSS-змінними, не пропсами.

Демо

Усі компоненти в одному місці — на сторінці Галерея: живі, клікабельні, з посиланням на сторінку кожного.

Локально документація піднімається так:

npm run docs:dev