@skyservice-developers/vue-dev-kit 2.14.3 → 2.15.0

package/README.md

@@ -30,7 +30,8 @@ import {
   SkyTable,
   // грід на TanStack + примітиви таблиці + композабли
   SkyDataTable, createSkyColumnHelper, skyTableFeatures,
-  SkyTableRoot, SkyTableHeader, SkyTableHead, SkyTableBody, SkyTableRow, SkyTableCell,
+  SkyTableRoot, SkyTableHeader, SkyTableHead, SkyTableBody, SkyTableVirtualBody,
+  SkyTableRow, SkyTableCell,
   useTableSort, useTableSelection, useColumnVisibility,
   FunctionalCalendar, SkyDateRangePicker,
   SkyFilterDropdown,
@@ -437,6 +438,10 @@ import {
 
 Кастомний select **з полем пошуку** у дропдауні — для довгих списків опцій. Дизайн 1:1 зі `SkySelect`, той самий формат опцій (`{ value, text }`) та стани. Не використовує нативний `<select>`, тому працює на старих браузерах (перевірено з Chromium 84): без `flex gap`, `inset`, `:focus-visible`, `Array.at()` тощо.
 
+Панель не вилазить за нижній край вікна: якщо знизу тісно, вона розкривається **вгору**, а висоту обмежує під доступне місце — скролиться список усередині. Сторона переобирається на скрол і ресайз, поки панель відкрита. Teleport-а немає, тож контейнер з `overflow: hidden` (напр. `Modal`) панель усе одно обріже — там беріть `SkyFilterDropdown`.
+
+Поле пошуку з'являється **від 6 опцій** (`searchThreshold`): на коротких списках воно лише шумить. Коли пошуку немає, стрілками й `Enter` керує сам тригер — фокус нікуди не переносимо.
+
 ```vue
 <SkySelectSearch
   v-model="selected"
@@ -463,6 +468,7 @@ import {
 | `hint` | `String` | `''` | Підказка під полем |
 | `searchPlaceholder` | `String` | `'Пошук…'` | Placeholder поля пошуку |
 | `noResultsText` | `String` | `'Нічого не знайдено'` | Текст за відсутності збігів |
+| `searchThreshold` | `Number` | `6` | Від скількох опцій показувати поле пошуку. `0` — завжди, `Infinity` — ніколи |
 
 #### Events
 
@@ -908,8 +914,37 @@ const columns = [
 | `initialSorting` | `SortingState` | — | Початкове сортування |
 | `emptyText` | `String` | `'Даних немає'` | Текст порожнього стану |
 | `interactiveRows` | `Boolean` | `false` | Курсор і hover на рядках |
+| `virtual` | `Boolean \| SkyDataTableVirtualOptions` | `false` | Віртуалізація тіла — у DOM лише видиме вікно рядків |
+
+Слоти: `toolbar`, `actions`, `footer`, `empty` (усі отримують `{ table }`). Події: `row-click`, `reach-end` (тільки у віртуальному режимі). Інстанс таблиці доступний через `ref` → `tableRef.table`.
+
+#### Віртуалізація
 
-Слоти: `toolbar`, `actions`, `footer`, `empty` (усі отримують `{ table }`). Подія: `row-click`. Інстанс таблиці доступний через `ref` → `tableRef.table`.
+На кілька тисяч рядків браузер провисає не на даних, а на DOM. Проп `virtual` лишає в розмітці тільки видиме вікно:
+
+```vue
+<SkyDataTable :columns="columns" :data="rows" row-id="id" virtual />
+
+<SkyDataTable
+  :columns="columns"
+  :data="rows"
+  row-id="id"
+  :virtual="{ estimateSize: 44, overscan: 8 }"
+  @reach-end="loadMore"
+/>
+```
+
+| Опція | Тип | За замовчуванням | Опис |
+|-------|-----|------------------|------|
+| `estimateSize` | `Number` | `40` | Очікувана висота рядка в px |
+| `overscan` | `Number` | `6` | Скільки рядків тримати понад видиме вікно |
+| `dynamic` | `Boolean` | `false` | Рядки різної висоти — вимірювання через ResizeObserver |
+
+Змінюється рівно одне: хто вирішує, які рядки зараз у DOM. Сортування, фільтрація, вибір і `getRowCount()` працюють по всьому набору даних.
+
+> **Потрібна обмежена висота.** Скрол-контейнером є тіло таблиці — дайте таблиці `height` або `flex: 1; min-height: 0`, інакше скролитиметься сторінка й вікно не зсуватиметься.
+
+> **Не поєднуйте з `pageSize`.** На сторінці в кілька десятків рядків віртуалізувати нічого; компонент попередить у консолі. Природна пара до `virtual` — довантаження за `reach-end`.
 
 #### Набір фіч
 
@@ -940,7 +975,7 @@ const features = tableFeatures({
 <script setup>
 import {
   SkyTableRoot, SkyTableHeader, SkyTableHead,
-  SkyTableBody, SkyTableRow, SkyTableCell,
+  SkyTableBody, SkyTableVirtualBody, SkyTableRow, SkyTableCell,
 } from '@skyservice-developers/vue-dev-kit'
 
 const columns = [
@@ -968,7 +1003,7 @@ const columns = [
 
 | Шар | Експорти | Коли підключати |
 |-----|----------|-----------------|
-| Примітиви (`shared/ui/table`) | `SkyTableRoot`, `SkyTableHeader`, `SkyTableHead`, `SkyTableBody`, `SkyTableRow`, `SkyTableCell`, `SkyTableEmpty` | завжди |
+| Примітиви (`shared/ui/table`) | `SkyTableRoot`, `SkyTableHeader`, `SkyTableHead`, `SkyTableBody`, `SkyTableVirtualBody`, `SkyTableRow`, `SkyTableCell`, `SkyTableEmpty` | завжди |
 | Композабли (`shared/lib/table`) | `useTableSort`, `useTableSelection`, `useColumnVisibility` | за потреби |
 | Фічі (`features/table`) | `TableMassActions`, `TableColumnSettings`, `TableVirtualBody` | опційно, кожна окремо |
 
@@ -980,13 +1015,46 @@ const { visibility, visibleColumns } = useColumnVisibility(columns, { storageKey
 
 Композабли не сортують і не фільтрують дані — вони тримають стан, а дані лишаються за застосунком (зазвичай сортує сервер). Колонка вибору описується як звичайна колонка (`{ name: '_select', width: 44 }`), щоб грід шапки й рядків рахувався з одного джерела.
 
-> `vue-virtual-scroller` імпортує лише `TableVirtualBody`. Не потрібна віртуалізація — беріть `SkyTableBody`, і залежність не знадобиться.
+#### Тіло: два режими, один контракт
+
+`SkyTableBody` без пропа `rows` — прозора обгортка (рядки складаєте самі, як вище). З `rows` — ітерує сам і віддає scoped-слот:
+
+```vue
+<SkyTableBody :rows="rows" :row-key="row => row.id">
+  <template #empty><SkyTableEmpty text="Даних немає" /></template>
+  <template #default="{ row }">
+    <SkyTableRow><SkyTableCell>{{ row.name }}</SkyTableCell></SkyTableRow>
+  </template>
+</SkyTableBody>
+```
+
+`SkyTableVirtualBody` приймає ті самі `rows`/`rowKey` і віддає той самий слот, лишаючи в DOM тільки видиме вікно рядків. Тому перемикання віртуалізації — це заміна тега, а не переписування розмітки:
+
+```vue
+<component :is="virtual ? SkyTableVirtualBody : SkyTableBody" :rows="rows" :row-key="row => row.id">
+  <template #default="{ row }">…</template>
+</component>
+```
+
+| Prop `SkyTableVirtualBody` | Тип | За замовчуванням | Опис |
+|------|-----|------------------|------|
+| `rows` | `TRow[]` | — | Рядки (обовʼязково) |
+| `rowKey` | `(row, index) => string \| number` | індекс | Ключ рядка |
+| `estimateSize` | `Number` | `40` | Очікувана висота рядка в px |
+| `overscan` | `Number` | `6` | Скільки рядків тримати понад видиме вікно |
+| `dynamic` | `Boolean` | `false` | Рядки різної висоти — вимірювання через ResizeObserver |
+
+Подія `reach-end` — коли останній рядок увійшов у вікно.
+
+> **Потрібна обмежена висота.** Скрол-контейнером є саме тіло. Якщо таблиця росте разом з контентом і скролиться сторінка, вікно ніколи не зсувається. Дайте таблиці `height` або `flex: 1; min-height: 0`.
+
+> `TableVirtualBody` з `features/table` лишається як сумісна обгортка зі старим контрактом (`items` + слот `{ item, index }`). У новому коді беріть `SkyTableVirtualBody`.
 
 ---
 
 ### SkyTable
 
-Віртуал-скрол таблиця (на `vue-virtual-scroller`) для великих списків — у DOM тримаються лише видимі рядки. Розмітка й стилі 1:1 з таблицею товарів POS: чекбокси, масові дії, сортування, зміна ширини/видимості колонок, розкриття вкладених рядків (модифікацій), inline-редагування комірок і теги.
+Віртуал-скрол таблиця (на `@tanstack/vue-virtual`) для великих списків — у DOM тримаються лише видимі рядки. Розмітка й стилі 1:1 з таблицею товарів POS: чекбокси, масові дії, сортування, зміна ширини/видимості колонок, розкриття вкладених рядків (модифікацій), inline-редагування комірок і теги.
 
 ```vue
 <SkyTable
@@ -1076,7 +1144,7 @@ const json = { items, total: items.length }
 |------|-------|------|
 | `cell-<name>` | `{ row, value, item }` | Кастомний рендер комірки колонки `<name>` |
 
-> **Примітка:** компонент розрахований на хост-середовище Skyservice POS. Він читає словник i18n з `window.lang` (з UA-фолбеками) і використовує host-assets за абсолютними шляхами (`/image/dragons/…`, `/svg/arrow_black.svg`), які віддає застосунок-хост — тому в бібліотеці вони навмисно не бандляться (`vite.config` → `transformAssetUrls.includeAbsolute: false`). `vue-virtual-scroller` — зовнішня залежність: встанови її в застосунку-хості.
+> **Примітка:** компонент розрахований на хост-середовище Skyservice POS. Він читає словник i18n з `window.lang` (з UA-фолбеками) і використовує host-assets за абсолютними шляхами (`/image/dragons/…`, `/svg/arrow_black.svg`), які віддає застосунок-хост — тому в бібліотеці вони навмисно не бандляться (`vite.config` → `transformAssetUrls.includeAbsolute: false`). `@tanstack/vue-virtual` — зовнішня залежність: встанови її в застосунку-хості.
 
 ---
 
@@ -1357,7 +1425,7 @@ src/
 │       ├── SkyBadge/
 │       ├── SkyCard/ SkyCardHeader/ SkyCardRow/
 │       ├── SkyLoader/
-│       ├── table/       # примітиви композиційної таблиці (Root/Header/Head/Body/Row/Cell/Empty)
+│       ├── table/       # примітиви композиційної таблиці (Root/Header/Head/Body/VirtualBody/Row/Cell/Empty)
 │       ├── SkyTable/     # готова віртуал-скрол таблиця (Header/Row/Footer/DynamicScroller/items/*)
 │       ├── SkyTileCard/
 │       ├── SkyFilterDropdown/  # оболонка фільтра (тригер + панель) + FilterSearch

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

@@ -1,7 +1,17 @@
 import { ColumnDef, SortingState, TableFeatures } from '@tanstack/vue-table';
 
+/** Налаштування віртуалізації тіла — те саме, що приймає SkyTableVirtualBody. */
+export interface SkyDataTableVirtualOptions {
+    /** Очікувана висота рядка в px. За замовчуванням 40 — як `--sky-table-row-height`. */
+    estimateSize?: number;
+    /** Скільки рядків тримати в DOM понад видиме вікно. */
+    overscan?: number;
+    /** Рядки різної висоти. Вмикає вимірювання рядків — дорожче, лише за потреби. */
+    dynamic?: boolean;
+}
 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 "onReach-end"?: (() => any) | undefined;
         readonly "onRow-click"?: ((row: TData) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
         /** Опис колонок у форматі TanStack. Ширину беремо з `size` / `meta.widthFr`. */
@@ -23,6 +33,15 @@ declare const _default: <TData extends Record<string, any>>(__VLS_props: Awaited
         emptyText?: string;
         /** Курсор-вказівник і hover на рядках. */
         interactiveRows?: boolean;
+        /**
+         * Віртуалізація тіла: в DOM лишається тільки видиме вікно рядків.
+         * `true` — з дефолтами, обʼєкт — з налаштуваннями.
+         *
+         * Вимагає обмеженої висоти таблиці й несумісна з `pageSize`: на сторінці
+         * в кілька десятків рядків віртуалізувати нічого. Природна пара до неї —
+         * не пагінація, а довантаження за подією `reach-end`.
+         */
+        virtual?: boolean | SkyDataTableVirtualOptions;
     }, 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<{
@@ -200,7 +219,7 @@ declare const _default: <TData extends Record<string, any>>(__VLS_props: Awaited
             }, TData>;
         }): any;
     }>;
-    emit: (evt: "row-click", row: TData) => void;
+    emit: ((evt: "reach-end") => void) & ((evt: "row-click", row: TData) => void);
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

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

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

@@ -1,9 +1,8 @@
-
 declare function __VLS_template(): {
     default?(_: {
         item: any;
-        index: any;
-        active: any;
+        index: number;
+        active: boolean;
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -12,7 +11,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     keyField?: string;
     /** Очікувана мінімальна висота рядка — база для розрахунку вікна. */
     minItemSize?: number;
-    /** Поля, зміна яких змінює висоту рядка (розкриті модифікації, теги). */
+    /**
+     * @deprecated Більше ні на що не впливає: висоту рядків тепер стежить
+     * ResizeObserver, тож перелічувати залежності вручну не треба.
+     */
     sizeDependencies?: (row: any) => unknown[];
 }>, {
     keyField: string;
@@ -26,7 +28,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     keyField?: string;
     /** Очікувана мінімальна висота рядка — база для розрахунку вікна. */
     minItemSize?: number;
-    /** Поля, зміна яких змінює висоту рядка (розкриті модифікації, теги). */
+    /**
+     * @deprecated Більше ні на що не впливає: висоту рядків тепер стежить
+     * ResizeObserver, тож перелічувати залежності вручну не треба.
+     */
     sizeDependencies?: (row: any) => unknown[];
 }>, {
     keyField: string;

package/dist/shared/ui/SkySelectSearch/SkySelectSearch.vue.d.ts

@@ -12,6 +12,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hint?: string;
     searchPlaceholder?: string;
     noResultsText?: string;
+    /**
+     * Скільки опцій має бути, щоб з'явилось поле пошуку. На коротких списках воно
+     * лише заважає — усе видно й так. `0` — показувати завжди, `Infinity` — ніколи.
+     */
+    searchThreshold?: number;
 }>, {
     modelValue: undefined;
     id: undefined;
@@ -21,6 +26,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hint: string;
     searchPlaceholder: string;
     noResultsText: string;
+    searchThreshold: number;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -33,6 +39,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hint?: string;
     searchPlaceholder?: string;
     noResultsText?: string;
+    /**
+     * Скільки опцій має бути, щоб з'явилось поле пошуку. На коротких списках воно
+     * лише заважає — усе видно й так. `0` — показувати завжди, `Infinity` — ніколи.
+     */
+    searchThreshold?: number;
 }>, {
     modelValue: undefined;
     id: undefined;
@@ -42,6 +53,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hint: string;
     searchPlaceholder: string;
     noResultsText: string;
+    searchThreshold: number;
 }>>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
@@ -53,6 +65,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     state: "success" | "error" | "default";
     hint: string;
     noResultsText: string;
+    searchThreshold: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/shared/ui/SkyTable/Row.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     $emit: (event: "checkbox" | "open" | "selectUpdate" | "inputEdit" | "openContext" | "openTagsModal" | "deleteTag" | "deleteRow" | "shrink" | "expand", ...args: any[]) => void;
     selected: unknown[];
     index: number;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     selectedColumns: Record<string, any>;
     widthColumns: Record<string, any>;
     tableViewExpanded: boolean;
@@ -17,8 +17,8 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     $props: {
         readonly selected?: unknown[] | undefined;
         readonly index?: number | undefined;
-        readonly item?: Record<string, any> | undefined;
         readonly params?: Record<string, any> | undefined;
+        readonly item?: Record<string, any> | undefined;
         readonly selectedColumns?: Record<string, any> | undefined;
         readonly widthColumns?: Record<string, any> | undefined;
         readonly tableViewExpanded?: boolean | undefined;

package/dist/shared/ui/SkyTable/items/itemDefault.vue.d.ts

@@ -8,15 +8,15 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     name: string;
     section: string;
     index: number;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     widthFlex: string;
     $props: {
         readonly name?: string | undefined;
         readonly section?: string | undefined;
         readonly index?: number | undefined;
-        readonly item?: Record<string, any> | undefined;
         readonly params?: Record<string, any> | undefined;
+        readonly item?: Record<string, any> | undefined;
         readonly widthFlex?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/shared/ui/SkyTable/items/itemInput.vue.d.ts

@@ -42,8 +42,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     index: number;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     widthFlex: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/shared/ui/SkyTable/items/itemSelect.vue.d.ts

@@ -1,13 +1,13 @@
 declare const _default: import('vue').DefineComponent<{}, {
     $emit: (event: "selectUpdate", ...args: any[]) => void;
     index: number;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     widthFlex: string;
     $props: {
         readonly index?: number | undefined;
-        readonly item?: Record<string, any> | undefined;
         readonly params?: Record<string, any> | undefined;
+        readonly item?: Record<string, any> | undefined;
         readonly widthFlex?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/shared/ui/SkyTable/items/itemTagEditor.vue.d.ts

@@ -1,11 +1,11 @@
 declare const _default: import('vue').DefineComponent<{}, {
     $emit: (event: "inputEdit", ...args: any[]) => void;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     widthFlex: string;
     $props: {
-        readonly item?: Record<string, any> | undefined;
         readonly params?: Record<string, any> | undefined;
+        readonly item?: Record<string, any> | undefined;
         readonly widthFlex?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/shared/ui/SkyTable/items/itemTags.vue.d.ts

@@ -42,8 +42,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     index: number;
-    item: Record<string, any>;
     params: Record<string, any>;
+    item: Record<string, any>;
     widthFlex: string;
 }, {}, {
     TagsInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/shared/ui/table/SkyTableBody.vue.d.ts

@@ -1,11 +1,2 @@
-declare function __VLS_template(): {
-    default?(_: {}): any;
-};
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+declare const _default: boolean;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/shared/ui/table/SkyTableVirtualBody.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: <TRow>(__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 "onReach-end"?: (() => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>) & {
+        /** Рядки. На відміну від SkyTableBody тут вони обовʼязкові. */
+        rows: TRow[];
+        /** Ключ рядка. Індекс за замовчуванням — лише для статичних списків. */
+        rowKey?: (row: TRow, index: number) => string | number;
+        /** Очікувана висота рядка в px — база для розрахунку вікна. */
+        estimateSize?: number;
+        /** Скільки рядків тримати в DOM понад видиме вікно. */
+        overscan?: number;
+        /**
+         * Рядки різної висоти (перенос тексту, розкриті деталі). Вмикає вимірювання
+         * кожного видимого рядка через ResizeObserver — точно, але дорожче.
+         * Якщо висота фіксована, лишайте `false`: тоді геометрія рахується
+         * арифметикою, без жодного читання з DOM.
+         */
+        dynamic?: boolean;
+    }, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: ReturnType<() => Readonly<{
+        default(props: {
+            row: TRow;
+            index: number;
+        }): unknown;
+        empty(): unknown;
+    }> & {
+        default(props: {
+            row: TRow;
+            index: number;
+        }): unknown;
+        empty(): unknown;
+    }>;
+    emit: (evt: "reach-end") => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/shared/ui/table/index.d.ts

@@ -2,6 +2,7 @@ export { default as SkyTableRoot } from './SkyTableRoot.vue';
 export { default as SkyTableHeader } from './SkyTableHeader.vue';
 export { default as SkyTableHead } from './SkyTableHead.vue';
 export { default as SkyTableBody } from './SkyTableBody.vue';
+export { default as SkyTableVirtualBody } from './SkyTableVirtualBody.vue';
 export { default as SkyTableRow } from './SkyTableRow.vue';
 export { default as SkyTableCell } from './SkyTableCell.vue';
 export { default as SkyTableEmpty } from './SkyTableEmpty.vue';