@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/STable/utils/useTableServiceRows.js

@@ -0,0 +1,125 @@
+import { resolveTableCellValue, resolveTableNumberField } from "./useFlatTableRows.js";
+import { computed, toValue } from "vue";
+//#region src/components/STable/utils/useTableServiceRows.ts
+/**
+* Служебные строки (группа, футер поддерева, «Показать ещё») и агрегатный футер.
+*
+* Общий принцип: контент такой строки живёт в конкретной колонке, а не растягивается
+* через `colspan` — колоночная структура сохраняется, и при горизонтальном скролле
+* контент не уезжает, потому что колонка по умолчанию главная и всегда sticky-left.
+*/
+var useTableServiceRows = ({ columns, primaryColumnKey, treeNodeByKey, groupTotalKey, depthFooter, groupContentColumnKey, creationContentColumnKey, loadMoreContentColumnKey, treeIndent, loadingMoreChildrenKeys, footerValues, stuckDepthFooterRowIndex, onDepthFooterClick, onLoadMoreChildren }) => {
+	const primaryColumn = computed(() => {
+		return toValue(columns).find((tableColumn) => tableColumn.key === primaryColumnKey.value);
+	});
+	const depthFooterColumnKey = computed(() => {
+		return toValue(depthFooter)?.columnKey ?? primaryColumnKey.value;
+	});
+	/** Колонка контента групповой строки (Figma: «Title row» живёт в главной колонке). */
+	const groupColumnKey = computed(() => {
+		return toValue(groupContentColumnKey) ?? primaryColumnKey.value;
+	});
+	const creationColumnKey = computed(() => {
+		return toValue(creationContentColumnKey) ?? primaryColumnKey.value;
+	});
+	const loadMoreColumnKey = computed(() => {
+		return toValue(loadMoreContentColumnKey) ?? primaryColumnKey.value;
+	});
+	const getGroupCount = (flatRow) => {
+		return treeNodeByKey.value.get(flatRow.key)?.subtreeSize ?? 0;
+	};
+	const getGroupTotal = (flatRow) => {
+		return resolveTableNumberField(flatRow.item, toValue(groupTotalKey));
+	};
+	const getGroupTitle = (flatRow) => {
+		const titleValue = resolveTableCellValue(flatRow.item, primaryColumn.value?.value ?? primaryColumn.value?.key);
+		return titleValue === void 0 ? void 0 : String(titleValue);
+	};
+	/** Отступ уровня прибавляется к базовому паддингу контента ячейки. */
+	const getDepthIndentStyle = (depth) => {
+		return { paddingInlineStart: `calc(var(--s-ui-dimension-4) + ${depth * toValue(treeIndent)}px)` };
+	};
+	const emitDepthFooterClick = (flatRow) => {
+		onDepthFooterClick({
+			parentKey: flatRow.parentKey ?? "",
+			parentItem: flatRow.item,
+			depth: flatRow.depth - 1
+		});
+	};
+	const getDepthFooterSlotScope = (flatRow) => {
+		return {
+			parentKey: flatRow.parentKey ?? "",
+			parentItem: flatRow.item,
+			depth: flatRow.depth - 1,
+			stuck: flatRow.index === stuckDepthFooterRowIndex.value,
+			click: () => {
+				emitDepthFooterClick(flatRow);
+			}
+		};
+	};
+	const loadingMoreChildrenKeySet = computed(() => {
+		return new Set(toValue(loadingMoreChildrenKeys));
+	});
+	const isLoadMoreRowLoading = (flatRow) => {
+		if (!flatRow.parentKey) return false;
+		return loadingMoreChildrenKeySet.value.has(flatRow.parentKey);
+	};
+	const emitLoadMoreChildren = (flatRow) => {
+		if (!flatRow.parentKey || isLoadMoreRowLoading(flatRow)) return;
+		onLoadMoreChildren({
+			key: flatRow.parentKey,
+			item: flatRow.item
+		});
+	};
+	const getLoadMoreSlotScope = (flatRow) => {
+		return {
+			parentKey: flatRow.parentKey ?? "",
+			parentItem: flatRow.item,
+			depth: flatRow.depth,
+			loading: isLoadMoreRowLoading(flatRow),
+			loadMore: () => {
+				emitLoadMoreChildren(flatRow);
+			}
+		};
+	};
+	const getFooterValue = (columnKey) => {
+		return toValue(footerValues)?.[columnKey];
+	};
+	const getFooterValueText = (columnKey) => {
+		const footerValue = getFooterValue(columnKey);
+		if (!footerValue) return "";
+		if (footerValue.limit !== void 0) return `${footerValue.value}/${footerValue.limit}`;
+		return String(footerValue.value);
+	};
+	/** Тон агрегата задаёт приложение: правило «когда предупреждать» — не зона кита. */
+	const getFooterToneClass = (columnKey) => {
+		const footerTone = getFooterValue(columnKey)?.tone;
+		return footerTone ? `s-ui-table__aggregate-cell--tone-${footerTone}` : void 0;
+	};
+	const getFooterSlotScope = (columnKey) => {
+		return {
+			column: toValue(columns).find((tableColumn) => tableColumn.key === columnKey) ?? { key: columnKey },
+			footerValue: getFooterValue(columnKey)
+		};
+	};
+	return {
+		depthFooterColumnKey,
+		groupColumnKey,
+		creationColumnKey,
+		loadMoreColumnKey,
+		getGroupCount,
+		getGroupTotal,
+		getGroupTitle,
+		getDepthIndentStyle,
+		emitDepthFooterClick,
+		getDepthFooterSlotScope,
+		isLoadMoreRowLoading,
+		emitLoadMoreChildren,
+		getLoadMoreSlotScope,
+		getFooterValueText,
+		getFooterToneClass,
+		getFooterSlotScope
+	};
+};
+//#endregion
+export { useTableServiceRows };

package/dist/components/STable/utils/useTableSorting.cjs

@@ -0,0 +1,89 @@
+const require_STable_types = require("../STable.types.cjs");
+let vue = require("vue");
+//#region src/components/STable/utils/useTableSorting.ts
+/**
+* Сортировка как намерение: кит не трогает данные, а держит индикаторы
+* (`sortState`) и сообщает о смене наружу. Порядок записей в `sortState` — это
+* порядок мультисортировки, он же даёт номера бейджей в шапке.
+*/
+var useTableSorting = ({ sortState, onSortChange }) => {
+	const sortEntryByKey = (0, vue.computed)(() => {
+		return new Map(sortState.value.map((sortEntry) => [sortEntry.key, sortEntry]));
+	});
+	const getColumnSortDirection = (columnKey) => {
+		return sortEntryByKey.value.get(columnKey)?.direction;
+	};
+	const getColumnSortIndex = (columnKey) => {
+		if (sortState.value.length < 2) return;
+		const sortEntryIndex = sortState.value.findIndex((sortEntry) => sortEntry.key === columnKey);
+		return sortEntryIndex === -1 ? void 0 : sortEntryIndex + 1;
+	};
+	const commit = (sortEntries) => {
+		sortState.value = sortEntries;
+		onSortChange(sortEntries);
+	};
+	/** Клик по sortable-хедеру: replace-цикл asc → desc → снятие; append — внутри мультисорта. */
+	const applySortCycle = (columnKey, append) => {
+		const sortEntries = [...sortState.value];
+		const entryIndex = sortEntries.findIndex((sortEntry) => sortEntry.key === columnKey);
+		const currentEntry = entryIndex === -1 ? void 0 : sortEntries[entryIndex];
+		const nextEntry = !currentEntry ? {
+			key: columnKey,
+			direction: require_STable_types.ESTableSortDirection.ASC
+		} : currentEntry.direction === require_STable_types.ESTableSortDirection.ASC ? {
+			key: columnKey,
+			direction: require_STable_types.ESTableSortDirection.DESC
+		} : void 0;
+		if (!append) {
+			commit(nextEntry ? [nextEntry] : []);
+			return;
+		}
+		if (entryIndex !== -1) if (nextEntry) sortEntries.splice(entryIndex, 1, nextEntry);
+		else sortEntries.splice(entryIndex, 1);
+		else if (nextEntry) sortEntries.push(nextEntry);
+		commit(sortEntries);
+	};
+	/** Точная установка направления из kebab-меню; undefined — сброс. */
+	const applySortExact = (columnKey, direction) => {
+		const sortEntries = [...sortState.value];
+		const entryIndex = sortEntries.findIndex((sortEntry) => sortEntry.key === columnKey);
+		if (!direction) {
+			if (entryIndex !== -1) {
+				sortEntries.splice(entryIndex, 1);
+				commit(sortEntries);
+			}
+			return;
+		}
+		const sortEntry = {
+			key: columnKey,
+			direction
+		};
+		if (entryIndex !== -1) sortEntries.splice(entryIndex, 1, sortEntry);
+		else sortEntries.push(sortEntry);
+		commit(sortEntries);
+	};
+	const getHeaderAriaSort = (descriptor) => {
+		if (!descriptor.column) return;
+		const sortDirection = getColumnSortDirection(descriptor.key);
+		if (!sortDirection) return;
+		return sortDirection === require_STable_types.ESTableSortDirection.ASC ? "ascending" : "descending";
+	};
+	const getHeaderSlotScope = (descriptor) => {
+		if (!descriptor.column) return { column: { key: descriptor.key } };
+		return {
+			column: descriptor.column,
+			sortDirection: getColumnSortDirection(descriptor.key),
+			sortIndex: getColumnSortIndex(descriptor.key)
+		};
+	};
+	return {
+		getColumnSortDirection,
+		getColumnSortIndex,
+		applySortCycle,
+		applySortExact,
+		getHeaderAriaSort,
+		getHeaderSlotScope
+	};
+};
+//#endregion
+exports.useTableSorting = useTableSorting;

package/dist/components/STable/utils/useTableSorting.js

@@ -0,0 +1,89 @@
+import { ESTableSortDirection } from "../STable.types.js";
+import { computed } from "vue";
+//#region src/components/STable/utils/useTableSorting.ts
+/**
+* Сортировка как намерение: кит не трогает данные, а держит индикаторы
+* (`sortState`) и сообщает о смене наружу. Порядок записей в `sortState` — это
+* порядок мультисортировки, он же даёт номера бейджей в шапке.
+*/
+var useTableSorting = ({ sortState, onSortChange }) => {
+	const sortEntryByKey = computed(() => {
+		return new Map(sortState.value.map((sortEntry) => [sortEntry.key, sortEntry]));
+	});
+	const getColumnSortDirection = (columnKey) => {
+		return sortEntryByKey.value.get(columnKey)?.direction;
+	};
+	const getColumnSortIndex = (columnKey) => {
+		if (sortState.value.length < 2) return;
+		const sortEntryIndex = sortState.value.findIndex((sortEntry) => sortEntry.key === columnKey);
+		return sortEntryIndex === -1 ? void 0 : sortEntryIndex + 1;
+	};
+	const commit = (sortEntries) => {
+		sortState.value = sortEntries;
+		onSortChange(sortEntries);
+	};
+	/** Клик по sortable-хедеру: replace-цикл asc → desc → снятие; append — внутри мультисорта. */
+	const applySortCycle = (columnKey, append) => {
+		const sortEntries = [...sortState.value];
+		const entryIndex = sortEntries.findIndex((sortEntry) => sortEntry.key === columnKey);
+		const currentEntry = entryIndex === -1 ? void 0 : sortEntries[entryIndex];
+		const nextEntry = !currentEntry ? {
+			key: columnKey,
+			direction: ESTableSortDirection.ASC
+		} : currentEntry.direction === ESTableSortDirection.ASC ? {
+			key: columnKey,
+			direction: ESTableSortDirection.DESC
+		} : void 0;
+		if (!append) {
+			commit(nextEntry ? [nextEntry] : []);
+			return;
+		}
+		if (entryIndex !== -1) if (nextEntry) sortEntries.splice(entryIndex, 1, nextEntry);
+		else sortEntries.splice(entryIndex, 1);
+		else if (nextEntry) sortEntries.push(nextEntry);
+		commit(sortEntries);
+	};
+	/** Точная установка направления из kebab-меню; undefined — сброс. */
+	const applySortExact = (columnKey, direction) => {
+		const sortEntries = [...sortState.value];
+		const entryIndex = sortEntries.findIndex((sortEntry) => sortEntry.key === columnKey);
+		if (!direction) {
+			if (entryIndex !== -1) {
+				sortEntries.splice(entryIndex, 1);
+				commit(sortEntries);
+			}
+			return;
+		}
+		const sortEntry = {
+			key: columnKey,
+			direction
+		};
+		if (entryIndex !== -1) sortEntries.splice(entryIndex, 1, sortEntry);
+		else sortEntries.push(sortEntry);
+		commit(sortEntries);
+	};
+	const getHeaderAriaSort = (descriptor) => {
+		if (!descriptor.column) return;
+		const sortDirection = getColumnSortDirection(descriptor.key);
+		if (!sortDirection) return;
+		return sortDirection === ESTableSortDirection.ASC ? "ascending" : "descending";
+	};
+	const getHeaderSlotScope = (descriptor) => {
+		if (!descriptor.column) return { column: { key: descriptor.key } };
+		return {
+			column: descriptor.column,
+			sortDirection: getColumnSortDirection(descriptor.key),
+			sortIndex: getColumnSortIndex(descriptor.key)
+		};
+	};
+	return {
+		getColumnSortDirection,
+		getColumnSortIndex,
+		applySortCycle,
+		applySortExact,
+		getHeaderAriaSort,
+		getHeaderSlotScope
+	};
+};
+//#endregion
+export { useTableSorting };

package/dist/components/STable/utils/useTableStickyRows.cjs

@@ -0,0 +1,132 @@
+const require_STable_types = require("../STable.types.cjs");
+require("../constants/tableSizes.cjs");
+let vue = require("vue");
+//#region src/components/STable/utils/useTableStickyRows.ts
+var EMPTY_STUCK_FOOTER_ROLES = {
+	pinned: [],
+	sliding: []
+};
+/**
+* Выбор «активных» sticky-строк по индексам (вердикт ресёрча sticky-строк):
+* JS решает только, ЧЬИ ячейки получают `position: sticky`, — само прилипание,
+* плавный вход и выход в поток делает CSS. Активный групп-хедер — глубочайшая
+* группа, накрывающая верх вьюпорта; активный depth-футер — футер глубочайшего
+* предка строки у нижней границы (вариант А: прижат, пока поддерево видимо).
+*/
+var useTableStickyRows = ({ snapshot, visibleRange, groupRowSticky, depthFooterSticky, bottomVisibleRowIndex, getRowOffset }) => {
+	const activeGroupRowIndex = (0, vue.computed)(() => {
+		const range = visibleRange.value;
+		if (!range || !(0, vue.toValue)(groupRowSticky)) return;
+		const { flatRows, getRowIndexByKey } = snapshot.value;
+		const topRow = flatRows[range.startIndex];
+		if (!topRow) return;
+		let candidateKey = topRow.kind === require_STable_types.ESTableRowKind.GROUP ? topRow.key : topRow.parentKey;
+		while (candidateKey) {
+			const candidateIndex = getRowIndexByKey(candidateKey);
+			const candidateRow = candidateIndex === void 0 ? void 0 : flatRows[candidateIndex];
+			if (!candidateRow) return;
+			if (candidateRow.kind === require_STable_types.ESTableRowKind.GROUP) return candidateRow.index;
+			candidateKey = candidateRow.parentKey;
+		}
+	});
+	/** Поддерево, чей футер прижимает строка: служебные строки — поддерево родителя. */
+	const resolveFooterOwnerKey = (row) => {
+		return row.kind === require_STable_types.ESTableRowKind.DEPTH_FOOTER || row.kind === require_STable_types.ESTableRowKind.LOAD_MORE ? row.parentKey : row.key;
+	};
+	const getParentKey = (rowKey) => {
+		const { flatRows, getRowIndexByKey } = snapshot.value;
+		const rowIndex = getRowIndexByKey(rowKey);
+		return rowIndex === void 0 ? void 0 : flatRows[rowIndex]?.parentKey;
+	};
+	/** Футер глубочайшего предка строки; `undefined`, если футеров у предков нет. */
+	const findDepthFooterRowIndex = (rowIndex) => {
+		const { flatRows, depthFooterIndexByParentKey } = snapshot.value;
+		const row = flatRows[rowIndex];
+		let candidateKey = row ? resolveFooterOwnerKey(row) : void 0;
+		while (candidateKey) {
+			const footerIndex = depthFooterIndexByParentKey.get(candidateKey);
+			if (footerIndex !== void 0) return footerIndex;
+			candidateKey = getParentKey(candidateKey);
+		}
+	};
+	/** Футер отпустится в пределах запаса: его строка ближе LOOKAHEAD px под кромкой. */
+	const releasesWithinLookahead = (footerIndex, edgeOffset) => {
+		const footerStart = getRowOffset(footerIndex)?.start;
+		return footerStart !== void 0 && footerStart - edgeOffset < 1200;
+	};
+	/**
+	* Следующие футеры за уходящим, пока предыдущий прижатый отпускается в пределах
+	* запаса. Строка сразу за футером лежит вне его поддерева, поэтому её футер — всегда
+	* другой (в том числе футер родителя при вложенных `depths`).
+	*/
+	const collectFollowingFooterIndexes = (edgeFooterIndex, edgeOffset) => {
+		const pinned = [edgeFooterIndex];
+		let footerIndex = edgeFooterIndex;
+		while (pinned.length < 6 && releasesWithinLookahead(footerIndex, edgeOffset)) {
+			const nextFooterIndex = findDepthFooterRowIndex(footerIndex + 1);
+			if (nextFooterIndex === void 0) return pinned;
+			pinned.push(nextFooterIndex);
+			footerIndex = nextFooterIndex;
+		}
+		return pinned;
+	};
+	/**
+	* Прижатые футеры: футер строки у кромки (уходящий) и следующие за ним, чьи строки
+	* лежат в пределах `TABLE_DEPTH_FOOTER_LOOKAHEAD_PX` под кромкой. Следующие прижимаются
+	* заранее и лежат ПОД уходящим: когда уходящий отпустит sticky и уедет в поток, под
+	* ним уже стоит плашка. Запас в пикселях, а не в строках: JS переключает роли на кадр
+	* позже композитора, и за кадр быстрой прокрутки отпускается несколько футеров подряд.
+	* Без уходящего заранее не прижимается ничего — плашка поддерева, которое ещё не
+	* дошло до кромки, висела бы без прикрытия.
+	*/
+	const resolveStuckFooterRowIndexes = (bottomIndex) => {
+		const edgeFooterIndex = findDepthFooterRowIndex(bottomIndex);
+		if (edgeFooterIndex === void 0) return [];
+		return collectFollowingFooterIndexes(edgeFooterIndex, getRowOffset(bottomIndex)?.end ?? 0);
+	};
+	/**
+	* Выезжающие футеры: две строки над кромкой (запас на AUTO-высоты), если это футеры.
+	* CSS их уже отпустил, sticky для них no-op, но роль держит их поверх всех, пока они
+	* не выедут из слота целиком: снятие подъёма в момент смены строки у кромки
+	* переворачивало z в зоне перекрытия, и текст плашки «отпрыгивал» на кадр.
+	*/
+	const findSlidingFooterRowIndexes = (bottomIndex, pinnedIndexes) => {
+		const { flatRows } = snapshot.value;
+		return [bottomIndex - 2, bottomIndex - 1].filter((rowIndex) => {
+			return flatRows[rowIndex]?.kind === require_STable_types.ESTableRowKind.DEPTH_FOOTER && !pinnedIndexes.includes(rowIndex);
+		});
+	};
+	const stuckFooterRoles = (0, vue.computed)(() => {
+		const bottomIndex = bottomVisibleRowIndex.value;
+		if (!(0, vue.toValue)(depthFooterSticky) || bottomIndex === void 0) return EMPTY_STUCK_FOOTER_ROLES;
+		const pinned = resolveStuckFooterRowIndexes(bottomIndex);
+		return {
+			pinned,
+			sliding: findSlidingFooterRowIndexes(bottomIndex, pinned)
+		};
+	});
+	/** Все строки со sticky-ячейками и подъёмом z: выезжающие, у кромки, следующий. */
+	const activeDepthFooterRowIndexes = (0, vue.computed)(() => {
+		const { pinned, sliding } = stuckFooterRoles.value;
+		return [...sliding, ...pinned];
+	});
+	return {
+		activeGroupRowIndex,
+		activeDepthFooterRowIndex: (0, vue.computed)(() => {
+			return stuckFooterRoles.value.pinned[0];
+		}),
+		activeDepthFooterRowIndexes,
+		leavingDepthFooterRowIndex: (0, vue.computed)(() => {
+			const [edgeFooterIndex, nextFooterIndex] = stuckFooterRoles.value.pinned;
+			return nextFooterIndex === void 0 ? void 0 : edgeFooterIndex;
+		}),
+		slidingDepthFooterRowIndexes: (0, vue.computed)(() => {
+			return stuckFooterRoles.value.sliding;
+		}),
+		farDepthFooterRowIndexes: (0, vue.computed)(() => {
+			return stuckFooterRoles.value.pinned.slice(2);
+		})
+	};
+};
+//#endregion
+exports.useTableStickyRows = useTableStickyRows;

package/dist/components/STable/utils/useTableStickyRows.js

@@ -0,0 +1,132 @@
+import { ESTableRowKind } from "../STable.types.js";
+import "../constants/tableSizes.js";
+import { computed, toValue } from "vue";
+//#region src/components/STable/utils/useTableStickyRows.ts
+var EMPTY_STUCK_FOOTER_ROLES = {
+	pinned: [],
+	sliding: []
+};
+/**
+* Выбор «активных» sticky-строк по индексам (вердикт ресёрча sticky-строк):
+* JS решает только, ЧЬИ ячейки получают `position: sticky`, — само прилипание,
+* плавный вход и выход в поток делает CSS. Активный групп-хедер — глубочайшая
+* группа, накрывающая верх вьюпорта; активный depth-футер — футер глубочайшего
+* предка строки у нижней границы (вариант А: прижат, пока поддерево видимо).
+*/
+var useTableStickyRows = ({ snapshot, visibleRange, groupRowSticky, depthFooterSticky, bottomVisibleRowIndex, getRowOffset }) => {
+	const activeGroupRowIndex = computed(() => {
+		const range = visibleRange.value;
+		if (!range || !toValue(groupRowSticky)) return;
+		const { flatRows, getRowIndexByKey } = snapshot.value;
+		const topRow = flatRows[range.startIndex];
+		if (!topRow) return;
+		let candidateKey = topRow.kind === ESTableRowKind.GROUP ? topRow.key : topRow.parentKey;
+		while (candidateKey) {
+			const candidateIndex = getRowIndexByKey(candidateKey);
+			const candidateRow = candidateIndex === void 0 ? void 0 : flatRows[candidateIndex];
+			if (!candidateRow) return;
+			if (candidateRow.kind === ESTableRowKind.GROUP) return candidateRow.index;
+			candidateKey = candidateRow.parentKey;
+		}
+	});
+	/** Поддерево, чей футер прижимает строка: служебные строки — поддерево родителя. */
+	const resolveFooterOwnerKey = (row) => {
+		return row.kind === ESTableRowKind.DEPTH_FOOTER || row.kind === ESTableRowKind.LOAD_MORE ? row.parentKey : row.key;
+	};
+	const getParentKey = (rowKey) => {
+		const { flatRows, getRowIndexByKey } = snapshot.value;
+		const rowIndex = getRowIndexByKey(rowKey);
+		return rowIndex === void 0 ? void 0 : flatRows[rowIndex]?.parentKey;
+	};
+	/** Футер глубочайшего предка строки; `undefined`, если футеров у предков нет. */
+	const findDepthFooterRowIndex = (rowIndex) => {
+		const { flatRows, depthFooterIndexByParentKey } = snapshot.value;
+		const row = flatRows[rowIndex];
+		let candidateKey = row ? resolveFooterOwnerKey(row) : void 0;
+		while (candidateKey) {
+			const footerIndex = depthFooterIndexByParentKey.get(candidateKey);
+			if (footerIndex !== void 0) return footerIndex;
+			candidateKey = getParentKey(candidateKey);
+		}
+	};
+	/** Футер отпустится в пределах запаса: его строка ближе LOOKAHEAD px под кромкой. */
+	const releasesWithinLookahead = (footerIndex, edgeOffset) => {
+		const footerStart = getRowOffset(footerIndex)?.start;
+		return footerStart !== void 0 && footerStart - edgeOffset < 1200;
+	};
+	/**
+	* Следующие футеры за уходящим, пока предыдущий прижатый отпускается в пределах
+	* запаса. Строка сразу за футером лежит вне его поддерева, поэтому её футер — всегда
+	* другой (в том числе футер родителя при вложенных `depths`).
+	*/
+	const collectFollowingFooterIndexes = (edgeFooterIndex, edgeOffset) => {
+		const pinned = [edgeFooterIndex];
+		let footerIndex = edgeFooterIndex;
+		while (pinned.length < 6 && releasesWithinLookahead(footerIndex, edgeOffset)) {
+			const nextFooterIndex = findDepthFooterRowIndex(footerIndex + 1);
+			if (nextFooterIndex === void 0) return pinned;
+			pinned.push(nextFooterIndex);
+			footerIndex = nextFooterIndex;
+		}
+		return pinned;
+	};
+	/**
+	* Прижатые футеры: футер строки у кромки (уходящий) и следующие за ним, чьи строки
+	* лежат в пределах `TABLE_DEPTH_FOOTER_LOOKAHEAD_PX` под кромкой. Следующие прижимаются
+	* заранее и лежат ПОД уходящим: когда уходящий отпустит sticky и уедет в поток, под
+	* ним уже стоит плашка. Запас в пикселях, а не в строках: JS переключает роли на кадр
+	* позже композитора, и за кадр быстрой прокрутки отпускается несколько футеров подряд.
+	* Без уходящего заранее не прижимается ничего — плашка поддерева, которое ещё не
+	* дошло до кромки, висела бы без прикрытия.
+	*/
+	const resolveStuckFooterRowIndexes = (bottomIndex) => {
+		const edgeFooterIndex = findDepthFooterRowIndex(bottomIndex);
+		if (edgeFooterIndex === void 0) return [];
+		return collectFollowingFooterIndexes(edgeFooterIndex, getRowOffset(bottomIndex)?.end ?? 0);
+	};
+	/**
+	* Выезжающие футеры: две строки над кромкой (запас на AUTO-высоты), если это футеры.
+	* CSS их уже отпустил, sticky для них no-op, но роль держит их поверх всех, пока они
+	* не выедут из слота целиком: снятие подъёма в момент смены строки у кромки
+	* переворачивало z в зоне перекрытия, и текст плашки «отпрыгивал» на кадр.
+	*/
+	const findSlidingFooterRowIndexes = (bottomIndex, pinnedIndexes) => {
+		const { flatRows } = snapshot.value;
+		return [bottomIndex - 2, bottomIndex - 1].filter((rowIndex) => {
+			return flatRows[rowIndex]?.kind === ESTableRowKind.DEPTH_FOOTER && !pinnedIndexes.includes(rowIndex);
+		});
+	};
+	const stuckFooterRoles = computed(() => {
+		const bottomIndex = bottomVisibleRowIndex.value;
+		if (!toValue(depthFooterSticky) || bottomIndex === void 0) return EMPTY_STUCK_FOOTER_ROLES;
+		const pinned = resolveStuckFooterRowIndexes(bottomIndex);
+		return {
+			pinned,
+			sliding: findSlidingFooterRowIndexes(bottomIndex, pinned)
+		};
+	});
+	/** Все строки со sticky-ячейками и подъёмом z: выезжающие, у кромки, следующий. */
+	const activeDepthFooterRowIndexes = computed(() => {
+		const { pinned, sliding } = stuckFooterRoles.value;
+		return [...sliding, ...pinned];
+	});
+	return {
+		activeGroupRowIndex,
+		activeDepthFooterRowIndex: computed(() => {
+			return stuckFooterRoles.value.pinned[0];
+		}),
+		activeDepthFooterRowIndexes,
+		leavingDepthFooterRowIndex: computed(() => {
+			const [edgeFooterIndex, nextFooterIndex] = stuckFooterRoles.value.pinned;
+			return nextFooterIndex === void 0 ? void 0 : edgeFooterIndex;
+		}),
+		slidingDepthFooterRowIndexes: computed(() => {
+			return stuckFooterRoles.value.sliding;
+		}),
+		farDepthFooterRowIndexes: computed(() => {
+			return stuckFooterRoles.value.pinned.slice(2);
+		})
+	};
+};
+//#endregion
+export { useTableStickyRows };

package/dist/components/STable/utils/useTableStyleVars.cjs

@@ -0,0 +1,41 @@
+let vue = require("vue");
+//#region src/components/STable/utils/useTableStyleVars.ts
+var resolveSize = (size) => {
+	if (typeof size === "number") return `${size}px`;
+	return size || void 0;
+};
+/**
+* CSS-переменные блока: единственный источник размеров — константы `tableSizes`,
+* поэтому в стилях нет дублей чисел, а ширины и sticky-офсеты колонок приезжают
+* из `useTableColumns` уже посчитанными.
+*/
+var useTableStyleVars = ({ tfootBarStackHeight, hasFooterValues, scrollClientWidth, columnCssVars, totalWidth, height, maxHeight }) => {
+	return {
+		rootStyle: (0, vue.computed)(() => {
+			const viewportWidth = (0, vue.toValue)(scrollClientWidth);
+			return {
+				"--s-ui-table-header-height": `40px`,
+				"--s-ui-table-row-min-height": `40px`,
+				"--s-ui-table-scrollbar-size": `12px`,
+				"--s-ui-table-header-stack": `40px`,
+				"--s-ui-table-bottom-stack": `${tfootBarStackHeight.value}px`,
+				"--s-ui-table-footer-bar-height": `40px`,
+				"--s-ui-table-create-row-height": `40px`,
+				"--s-ui-table-aggregate-offset": (0, vue.toValue)(hasFooterValues) ? `40px` : "0px",
+				...viewportWidth > 0 ? { "--s-ui-table-viewport-width": `${viewportWidth}px` } : {},
+				...columnCssVars.value
+			};
+		}),
+		scrollStyle: (0, vue.computed)(() => {
+			return {
+				height: resolveSize((0, vue.toValue)(height)),
+				maxHeight: resolveSize((0, vue.toValue)(maxHeight))
+			};
+		}),
+		tableStyle: (0, vue.computed)(() => {
+			return { width: `max(100%, ${totalWidth.value}px)` };
+		})
+	};
+};
+//#endregion
+exports.useTableStyleVars = useTableStyleVars;

package/dist/components/STable/utils/useTableStyleVars.js

@@ -0,0 +1,41 @@
+import { computed, toValue } from "vue";
+//#region src/components/STable/utils/useTableStyleVars.ts
+var resolveSize = (size) => {
+	if (typeof size === "number") return `${size}px`;
+	return size || void 0;
+};
+/**
+* CSS-переменные блока: единственный источник размеров — константы `tableSizes`,
+* поэтому в стилях нет дублей чисел, а ширины и sticky-офсеты колонок приезжают
+* из `useTableColumns` уже посчитанными.
+*/
+var useTableStyleVars = ({ tfootBarStackHeight, hasFooterValues, scrollClientWidth, columnCssVars, totalWidth, height, maxHeight }) => {
+	return {
+		rootStyle: computed(() => {
+			const viewportWidth = toValue(scrollClientWidth);
+			return {
+				"--s-ui-table-header-height": `40px`,
+				"--s-ui-table-row-min-height": `40px`,
+				"--s-ui-table-scrollbar-size": `12px`,
+				"--s-ui-table-header-stack": `40px`,
+				"--s-ui-table-bottom-stack": `${tfootBarStackHeight.value}px`,
+				"--s-ui-table-footer-bar-height": `40px`,
+				"--s-ui-table-create-row-height": `40px`,
+				"--s-ui-table-aggregate-offset": toValue(hasFooterValues) ? `40px` : "0px",
+				...viewportWidth > 0 ? { "--s-ui-table-viewport-width": `${viewportWidth}px` } : {},
+				...columnCssVars.value
+			};
+		}),
+		scrollStyle: computed(() => {
+			return {
+				height: resolveSize(toValue(height)),
+				maxHeight: resolveSize(toValue(maxHeight))
+			};
+		}),
+		tableStyle: computed(() => {
+			return { width: `max(100%, ${totalWidth.value}px)` };
+		})
+	};
+};
+//#endregion
+export { useTableStyleVars };