@skyservice-developers/vue-dev-kit 2.11.0 → 2.12.0

package/README.md

@@ -2,6 +2,8 @@
 
 Vue 3 developer toolkit для Skyservice mini-apps: UI компоненти + TypeScript SDK (iframe bridge + HTTP API клієнт).
 
+📖 **Документація з живими демо:** https://74cfe434-a2b3-4d49-8fa7-db7343e399dc.apps.platform365.online/
+
 > **v2.0.0 breaking changes:**
 > - Vue 2 більше не підтримується (тільки Vue 3.4+).
 > - Додано повноцінний SDK (`bridge` + `SkyserviceAPI`), раніше опублікований як окремий пакет `skyservice-sdk` (задепрекейтнутий).
@@ -22,14 +24,20 @@ import '@skyservice-developers/vue-dev-kit/style.css'
 import {
   // shared/ui
   Header, Modal, Dialog,
-  SkyButton, SkySelect, SkySelectSearch, SkyInput, SkySearchInput, SkyCheckbox,
+  SkyButton, SkySelect, SkySelectSearch, SkyInput, SkySearchInput, SkyCheckbox, SkyTabs,
   SkyAlert, SkyBadge, SkyLoader,
   SkyCard, SkyCardHeader, SkyCardRow,
   SkyTable,
+  // грід на TanStack + примітиви таблиці + композабли
+  SkyDataTable, createSkyColumnHelper, skyTableFeatures,
+  SkyTableRoot, SkyTableHeader, SkyTableHead, SkyTableBody, SkyTableRow, SkyTableCell,
+  useTableSort, useTableSelection, useColumnVisibility,
+  FunctionalCalendar, SkyDateRangePicker,
   // widgets
   SkyTileCard,
   // features
   SkyCheckboxFilter,
+  TableMassActions, TableColumnSettings, TableVirtualBody,
   // sdk
   navigate, SkyserviceAPI, isInsideIframe,
   // sky-service-ui-components
@@ -381,60 +389,47 @@ import {
 
 ### SkySelect
 
-Кастомний select з дропдауном, клавіатурною навігацією та підтримкою рядків і об'єктів як опцій.
+Нативний `<select>` у фірмовому стилі, зі станами `default | success | error` та підказкою під полем.
 
 ```vue
-<!-- Об'єкти -->
 <SkySelect
-  v-model="selected"
+  v-model="payment"
   :options="[
-    { label: 'Готівка', value: 'cash' },
-    { label: 'Картка', value: 'card' },
+    { value: 'cash', text: 'Готівка' },
+    { value: 'card', text: 'Картка' },
   ]"
   placeholder="Оберіть спосіб оплати"
 />
 
-<!-- Рядки -->
-<SkySelect v-model="selected" :options="['Кг', 'Шт', 'Л']" />
-
-<!-- На всю ширину -->
-<SkySelect v-model="selected" :options="options" block />
+<SkySelect v-model="payment" :options="options" state="error" hint="Оберіть спосіб" />
+<SkySelect v-model="payment" :options="options" disabled />
 ```
 
 #### Props
 
 | Prop | Тип | За замовчуванням | Опис |
 |------|-----|------------------|------|
-| `modelValue` / `value` | `any` | `null` | Поточне значення (v-model) |
-| `options` | `Array` | `[]` | `Array<{ label, value } \| string>` |
-| `placeholder` | `String` | `''` | Текст-заглушка |
+| `modelValue` | `string \| number` | — | Поточне значення (v-model) |
+| `options` | `Array<{ value: string \| number; text: string }>` | — | Список опцій (обов'язковий) |
+| `id` | `String` | — | HTML id |
 | `disabled` | `Boolean` | `false` | Вимкнений стан |
-| `block` | `Boolean` | `false` | Повна ширина |
-| `teleport` | `Boolean` | `false` | Рендерить дропдаун в `<body>` (для модалок/overflow:hidden контейнерів) |
+| `state` | `'default' \| 'success' \| 'error'` | `'default'` | Візуальний стан рамки |
+| `placeholder` | `String` | `''` | Текст-заглушка (рендериться як `disabled hidden` опція) |
+| `hint` | `String` | `''` | Підказка під полем у кольорі `state` |
 
-#### Клавіатура
+#### Events
 
-| Клавіша | Дія |
-|---------|-----|
-| `Enter` / `Space` | Відкрити дропдаун |
-| `↑` / `↓` | Навігація по опціях |
-| `Enter` | Вибрати поточну опцію |
-| `Esc` | Закрити дропдаун |
+| Event | Payload | Опис |
+|-------|---------|------|
+| `update:modelValue` | `string \| number` | Emit при виборі опції |
 
-#### CSS змінні
+> **Формат опцій — тільки `{ value, text }`.** Масив рядків або `{ label, value }` дадуть порожні пункти:
+> компонент читає `option.value` і `option.text`. Мапте дані заздалегідь — `units.map(u => ({ value: u, text: u }))`.
 
-```css
---sky-select-padding: 10px 14px
---sky-select-radius: 6px
---sky-select-font-size: 14px
---sky-select-border: 1px solid #d1d5db
---sky-select-dropdown-shadow: 0 4px 12px rgba(0,0,0,0.1)
---sky-select-dropdown-max-height: 220px
---sky-select-option-hover-bg: #f3f4f6
---sky-select-option-selected-color: #24973f
-```
+> Список малює браузер, тож клавіатура й поведінка на мобільних — рідні для платформи, а дропдаун
+> не обрізається контейнерами з `overflow: hidden` (усередині `Modal` teleport не потрібен).
+> Компонент займає всю ширину контейнера — обмежуйте батьківський блок, якщо треба вужче.
 
----
 
 ### SkySelectSearch
 
@@ -579,6 +574,39 @@ import {
 
 ---
 
+### SkyTabs
+
+Сегментовані таби з анімованим індикатором: біла «пігулка» плавно переїжджає під активну опцію й підлаштовує ширину під довжину тексту.
+
+```vue
+<SkyTabs
+  v-model="period"
+  :options="[
+    { value: 'day', text: 'День' },
+    { value: 'week', text: 'Тиждень' },
+    { value: 'month', text: 'Місяць' },
+  ]"
+/>
+```
+
+#### Props
+
+| Prop | Тип | За замовчуванням | Опис |
+|------|-----|------------------|------|
+| `modelValue` | `string \| number` | — | Активне значення (v-model) |
+| `options` | `Array<{ value: string \| number; text: string }>` | — | Список табів (обов'язковий) |
+| `disabled` | `Boolean` | `false` | Блокує весь набір |
+
+#### Events
+
+| Event | Payload | Опис |
+|-------|---------|------|
+| `update:modelValue` | `string \| number` | Emit при виборі таба |
+
+> Індикатор вимірює активну кнопку через `getBoundingClientRect()`: на першому рендері стає на місце без анімації, далі — з переходом. Реагує на `resize` вікна і зміну кількості опцій. У прихованому контейнері (`display: none`) розміри нульові — позиція виправиться після показу.
+
+---
+
 ### SkyAlert
 
 Інформаційне повідомлення з 4 тональностями та опціональною іконкою.
@@ -831,6 +859,129 @@ Shell-контейнер для карток: ribbon / header / body / footer
 
 ---
 
+### SkyDataTable
+
+Грід на [TanStack Table v9](https://tanstack.com/table/latest): headless-ядро тримає стан і обчислення, розмітка й стилі — наші. Візуально це та сама таблиця, що в POS. Повний опис — у [документації](https://74cfe434-a2b3-4d49-8fa7-db7343e399dc.apps.platform365.online/components/data-table).
+
+```vue
+<script setup lang="ts">
+import { h } from 'vue'
+import { SkyDataTable, SkyBadge, createSkyColumnHelper } from '@skyservice-developers/vue-dev-kit'
+
+const column = createSkyColumnHelper<Product>()
+
+const columns = [
+  column.accessor('name', { header: 'Назва', meta: { widthFr: 2 } }),
+  column.accessor('price', {
+    header: 'Ціна',
+    size: 110,
+    meta: { align: 'right' },
+    cell: ({ getValue }) => `${getValue()} ₴`,
+  }),
+  column.accessor('status', {
+    header: 'Статус',
+    size: 150,
+    enableSorting: false,
+    cell: ({ getValue }) =>
+      h(SkyBadge, { tone: getValue() === 'Активний' ? 'success' : 'default', label: getValue() }),
+  }),
+]
+</script>
+
+<template>
+  <SkyDataTable :columns="columns" :data="products" :page-size="25" row-id="id" searchable />
+</template>
+```
+
+#### Props
+
+| Prop | Тип | За замовчуванням | Опис |
+|------|-----|------------------|------|
+| `columns` | `ColumnDef[]` | — | Опис колонок (TanStack) |
+| `data` | `TData[]` | — | Дані |
+| `features` | `TableFeatures` | `skyTableFeatures` | Власний набір фіч |
+| `rowId` | `String \| (row) => string` | — | Ключ рядка |
+| `pageSize` | `Number` | `0` | Розмір сторінки; `0` — без пагінації |
+| `searchable` | `Boolean` | `false` | Поле глобального пошуку в тулбарі |
+| `initialSorting` | `SortingState` | — | Початкове сортування |
+| `emptyText` | `String` | `'Даних немає'` | Текст порожнього стану |
+| `interactiveRows` | `Boolean` | `false` | Курсор і hover на рядках |
+
+Слоти: `toolbar`, `actions`, `footer`, `empty` (усі отримують `{ table }`). Подія: `row-click`. Інстанс таблиці доступний через `ref` → `tableRef.table`.
+
+#### Набір фіч
+
+Фічі TanStack v9 вмикаються явно — кіт експортує стабільний `skyTableFeatures` (сортування, вибір, видимість колонок, пагінація, фільтрація + слоти row-моделей і реєстри `sortFns`/`filterFns`). Потрібно більше — зберіть свій обʼєкт і передайте пропом `features`:
+
+```ts
+import { tableFeatures, rowExpandingFeature, createExpandedRowModel } from '@tanstack/vue-table'
+import { skyTableFeatures } from '@skyservice-developers/vue-dev-kit'
+
+const features = tableFeatures({
+  ...skyTableFeatures,
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+})
+```
+
+Ширина колонок: `size: 150` — фіксовані px, `meta: { widthFr: 2 }` — гнучка частка (має пріоритет над `size`), `meta: { align }` і `meta: { minWidthScreen }` — вирівнювання й приховування на вузьких екранах.
+
+> `@tanstack/vue-table` входить у залежності пакета й лишається зовнішнім у бандлі — застосунки, які гріда не використовують, його не тягнуть.
+
+---
+
+### Таблиця з примітивів (композиційна)
+
+Набір примітивів і композаблів замість одного великого компонента: береш тільки те, що треба. Без вибору рядків, без масових дій, без віртуалізації — і нічого з цього не потрапляє в бандл. Повний опис — у [документації](https://74cfe434-a2b3-4d49-8fa7-db7343e399dc.apps.platform365.online/components/table).
+
+```vue
+<script setup>
+import {
+  SkyTableRoot, SkyTableHeader, SkyTableHead,
+  SkyTableBody, SkyTableRow, SkyTableCell,
+} from '@skyservice-developers/vue-dev-kit'
+
+const columns = [
+  { name: 'name', title: 'Товар', widthFr: 2 },
+  { name: 'price', title: 'Ціна', width: 90, align: 'right' },
+]
+</script>
+
+<template>
+  <SkyTableRoot :columns="columns">
+    <SkyTableHeader>
+      <SkyTableHead v-for="c in columns" :key="c.name" :column="c" />
+    </SkyTableHeader>
+    <SkyTableBody>
+      <SkyTableRow v-for="row in rows" :key="row.id">
+        <SkyTableCell>{{ row.name }}</SkyTableCell>
+        <SkyTableCell align="right">{{ row.price }}</SkyTableCell>
+      </SkyTableRow>
+    </SkyTableBody>
+  </SkyTableRoot>
+</template>
+```
+
+#### Що входить
+
+| Шар | Експорти | Коли підключати |
+|-----|----------|-----------------|
+| Примітиви (`shared/ui/table`) | `SkyTableRoot`, `SkyTableHeader`, `SkyTableHead`, `SkyTableBody`, `SkyTableRow`, `SkyTableCell`, `SkyTableEmpty` | завжди |
+| Композабли (`shared/lib/table`) | `useTableSort`, `useTableSelection`, `useColumnVisibility` | за потреби |
+| Фічі (`features/table`) | `TableMassActions`, `TableColumnSettings`, `TableVirtualBody` | опційно, кожна окремо |
+
+```ts
+const { sort, toggle } = useTableSort({ initial: { of: 'name', ot: 'asc' } })
+const { selected, isSelected, toggle: select, toggleAll } = useTableSelection(rows, { rowId: 'id' })
+const { visibility, visibleColumns } = useColumnVisibility(columns, { storageKey: 'products' })
+```
+
+Композабли не сортують і не фільтрують дані — вони тримають стан, а дані лишаються за застосунком (зазвичай сортує сервер). Колонка вибору описується як звичайна колонка (`{ name: '_select', width: 44 }`), щоб грід шапки й рядків рахувався з одного джерела.
+
+> `vue-virtual-scroller` імпортує лише `TableVirtualBody`. Не потрібна віртуалізація — беріть `SkyTableBody`, і залежність не знадобиться.
+
+---
+
 ### SkyTable
 
 Віртуал-скрол таблиця (на `vue-virtual-scroller`) для великих списків — у DOM тримаються лише видимі рядки. Розмітка й стилі 1:1 з таблицею товарів POS: чекбокси, масові дії, сортування, зміна ширини/видимості колонок, розкриття вкладених рядків (модифікацій), inline-редагування комірок і теги.
@@ -927,6 +1078,33 @@ const json = { items, total: items.length }
 
 ---
 
+### FunctionalCalendar
+
+Перенесено зі SkyMarket (`src/lib/functional-calendar`), стилі й розмітка 1:1. Форк [vue-functional-calendar](https://github.com/ManukMinasyan/vue-functional-calendar) під Vue 3 — пропси, події та слоти без змін відносно оригіналу.
+
+```vue
+<FunctionalCalendar
+  :value="calendarData"
+  @input="calendarData = $event"
+  is-date-range
+  is-modal
+/>
+```
+
+### SkyDateRangePicker
+
+Перенесено зі SkyMarket (`DatePickerRange.vue`) — готовий попап-піка діапазону дат на базі `FunctionalCalendar`: іконка-тригер, лейбл періоду, пресети (Сьогодні / Вчора / Тиждень / Місяць / Минулий-Поточний місяць / За весь час), стилі 1:1. На відміну від оригіналу, який читав `store`/`@/langs` конкретного застосунку, тут стан і тексти (з UA-фолбеками) локальні.
+
+```vue
+<SkyDateRangePicker v-model="range" @set-date="onPreset" />
+```
+
+```js
+const range = reactive({ start: '', end: '' }) // { start, end } у форматі yyyy-mm-dd
+```
+
+---
+
 ## Features
 
 ### SkyCheckboxFilter
@@ -1097,18 +1275,26 @@ src/
 │       ├── BaseTeleport/
 │       ├── SkyButton/
 │       ├── SkySelect/ SkySelectSearch/ SkyInput/ SkySearchInput/ SkyCheckbox/
+│       ├── SkyTabs/     # сегментовані таби з анімованим індикатором
 │       ├── SkyAlert/
 │       ├── SkyBadge/
 │       ├── SkyCard/ SkyCardHeader/ SkyCardRow/
 │       ├── SkyLoader/
-│       ├── SkyTable/     # віртуал-скрол таблиця (Header/Row/Footer/DynamicScroller/items/*)
+│       ├── table/       # примітиви композиційної таблиці (Root/Header/Head/Body/Row/Cell/Empty)
+│       ├── SkyTable/     # готова віртуал-скрол таблиця (Header/Row/Footer/DynamicScroller/items/*)
 │       ├── SkyTileCard/
+│       ├── functional-calendar/ # форк vue-functional-calendar, перенесений зі SkyMarket 1:1
+│       ├── SkyDateRangePicker/  # DatePickerRange зі SkyMarket, store/langs → props/локальний стан
 │       └── <Component>/
 │           ├── <Component>.vue
 │           └── index.ts
+│   └── lib/
+│       └── table/   # skyTableFeatures + useTableSort / useTableSelection / useColumnVisibility
 ├── features/          # фічові блоки (orchestration shared/ui)
 │   ├── index.ts
-│   └── SkyCheckboxFilter/
+│   ├── SkyCheckboxFilter/
+│   ├── table/         # TableMassActions / TableColumnSettings / TableVirtualBody
+│   └── data-table/    # SkyDataTable на TanStack v9 + перемикач колонок
 ├── sdk/               # TypeScript SDK (без Vue залежностей)
 │   ├── bridge.ts      # iframe postMessage API
 │   ├── api.ts         # SkyserviceAPI HTTP клієнт

package/dist/features/data-table/SkyDataTable.vue.d.ts

@@ -0,0 +1,210 @@
+import { ColumnDef, SortingState, TableFeatures } from '@tanstack/vue-table';
+
+declare const _default: <TData extends Record<string, any>>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{
+        readonly "onRow-click"?: ((row: TData) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
+        /** Опис колонок у форматі TanStack. Ширину беремо з `size` / `meta.widthFr`. */
+        columns: ColumnDef<any, TData, any>[];
+        data: TData[];
+        /**
+         * Набір фіч. За замовчуванням — сортування, вибір, видимість колонок,
+         * пагінація і фільтрація. Потрібно більше — зберіть свій через `tableFeatures()`.
+         */
+        features?: TableFeatures;
+        /** Ключ рядка. Без нього TanStack бере індекс, і вибір «поїде» після сортування. */
+        rowId?: string | ((row: TData) => string);
+        /** Розмір сторінки. `0` вимикає пагінацію — рендеряться всі рядки. */
+        pageSize?: number;
+        /** Показати поле глобального пошуку в тулбарі. */
+        searchable?: boolean;
+        searchPlaceholder?: string;
+        initialSorting?: SortingState;
+        emptyText?: string;
+        /** Курсор-вказівник і hover на рядках. */
+        interactiveRows?: boolean;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        table: import('@tanstack/vue-table').VueTable<{
+            columnFilteringFeature: import('@tanstack/table-core').TableFeature;
+            columnSizingFeature: import('@tanstack/table-core').TableFeature;
+            columnVisibilityFeature: import('@tanstack/table-core').TableFeature;
+            globalFilteringFeature: import('@tanstack/table-core').TableFeature;
+            rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+            rowSelectionFeature: import('@tanstack/table-core').TableFeature;
+            rowSortingFeature: import('@tanstack/table-core').TableFeature;
+            coreRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+            filteredRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+            sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+            paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+            sortFns: {
+                alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+            };
+            filterFns: {
+                arrIncludes: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                arrIncludesAll: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                arrHas: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                arrIncludesSome: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                between: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                betweenInclusive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                empty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                endsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                equals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                equalsString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                equalsStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                inDateRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                inNumberRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                includesString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                includesStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                notEmpty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                startsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                weakEquals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+            };
+        }, TData>;
+    }>): void;
+    attrs: any;
+    slots: ReturnType<() => {
+        toolbar?(_: {
+            table: import('@tanstack/vue-table').VueTable<{
+                columnFilteringFeature: import('@tanstack/table-core').TableFeature;
+                columnSizingFeature: import('@tanstack/table-core').TableFeature;
+                columnVisibilityFeature: import('@tanstack/table-core').TableFeature;
+                globalFilteringFeature: import('@tanstack/table-core').TableFeature;
+                rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+                rowSelectionFeature: import('@tanstack/table-core').TableFeature;
+                rowSortingFeature: import('@tanstack/table-core').TableFeature;
+                coreRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                filteredRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortFns: {
+                    alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                };
+                filterFns: {
+                    arrIncludes: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesAll: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrHas: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesSome: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    between: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    betweenInclusive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    empty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    endsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inDateRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inNumberRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    notEmpty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    startsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    weakEquals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                };
+            }, TData>;
+        }): any;
+        actions?(_: {
+            table: import('@tanstack/vue-table').VueTable<{
+                columnFilteringFeature: import('@tanstack/table-core').TableFeature;
+                columnSizingFeature: import('@tanstack/table-core').TableFeature;
+                columnVisibilityFeature: import('@tanstack/table-core').TableFeature;
+                globalFilteringFeature: import('@tanstack/table-core').TableFeature;
+                rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+                rowSelectionFeature: import('@tanstack/table-core').TableFeature;
+                rowSortingFeature: import('@tanstack/table-core').TableFeature;
+                coreRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                filteredRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortFns: {
+                    alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                };
+                filterFns: {
+                    arrIncludes: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesAll: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrHas: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesSome: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    between: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    betweenInclusive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    empty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    endsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inDateRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inNumberRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    notEmpty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    startsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    weakEquals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                };
+            }, TData>;
+        }): any;
+        empty?(_: {}): any;
+        footer?(_: {
+            table: import('@tanstack/vue-table').VueTable<{
+                columnFilteringFeature: import('@tanstack/table-core').TableFeature;
+                columnSizingFeature: import('@tanstack/table-core').TableFeature;
+                columnVisibilityFeature: import('@tanstack/table-core').TableFeature;
+                globalFilteringFeature: import('@tanstack/table-core').TableFeature;
+                rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+                rowSelectionFeature: import('@tanstack/table-core').TableFeature;
+                rowSortingFeature: import('@tanstack/table-core').TableFeature;
+                coreRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                filteredRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+                sortFns: {
+                    alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                    textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+                };
+                filterFns: {
+                    arrIncludes: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesAll: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrHas: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    arrIncludesSome: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    between: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    betweenInclusive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    empty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    endsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    equalsStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inDateRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    inNumberRange: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesString: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    includesStringSensitive: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    notEmpty: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    startsWith: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                    weakEquals: import('@tanstack/table-core').CreatedFilterFn<any, any>;
+                };
+            }, TData>;
+        }): any;
+    }>;
+    emit: (evt: "row-click", row: TData) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/features/data-table/SkyDataTableColumnToggle.vue.d.ts

@@ -0,0 +1,36 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    table: any;
+    title?: string;
+    resetLabel?: string;
+}>, {
+    title: string;
+    resetLabel: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    table: any;
+    title?: string;
+    resetLabel?: string;
+}>, {
+    title: string;
+    resetLabel: string;
+}>>> & Readonly<{}>, {
+    title: string;
+    resetLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/features/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkyDataTable } from './SkyDataTable.vue';
+export { default as SkyDataTableColumnToggle } from './SkyDataTableColumnToggle.vue';

package/dist/features/index.d.ts

@@ -1 +1,3 @@
 export { default as SkyCheckboxFilter } from './SkyCheckboxFilter';
+export * from './table';
+export * from './data-table';

package/dist/features/table/TableColumnSettings.vue.d.ts

@@ -0,0 +1,31 @@
+import { SkyTableColumn } from '../../shared/ui/table/types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    columns: SkyTableColumn[];
+    /** Мапа `name → показувати` з useColumnVisibility. */
+    modelValue: Record<string, boolean>;
+    title?: string;
+    resetLabel?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, boolean>) => void;
+    reset: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    columns: SkyTableColumn[];
+    /** Мапа `name → показувати` з useColumnVisibility. */
+    modelValue: Record<string, boolean>;
+    title?: string;
+    resetLabel?: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, boolean>) => any) | undefined;
+    onReset?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};