@shtabapp/ui-kit 1.84.0 → 1.85.1

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

@@ -0,0 +1,224 @@
+import { resolveTreeKeyboardNavigationAction } from "../../../composables/treeKeyboardNavigation.js";
+import { ESTableRowKind } from "../STable.types.js";
+import { ESTableGridSection, resolveTableGridSection } from "./useTableGridFocus.js";
+import { toValue } from "vue";
+//#region src/components/STable/utils/useTableGridKeyboard.ts
+var GRID_TEXT_ENTRY_SELECTOR = "input, textarea, select, [contenteditable=\"true\"]";
+/**
+* Клавиатурный диспетчер грида: разбирает событие и переводит его в вызовы
+* `useTableGridFocus` и коллбэки таблицы. Собственного состояния не держит —
+* адрес фокуса и режим «внутри ячейки» живут в `useTableGridFocus`.
+*/
+var useTableGridKeyboard = ({ gridFocus, columnDescriptors, flatRows, expandColumnKey, primaryColumnKey, groupColumnKey, selectable, openMenuColumnKey, toggleExpanded, toggleRowSelected, applySortCycle, setColumnMenuOpen, resizeColumnByKeyboard, onDepthFooterActivate, onLoadMoreActivate, onRowActivate }) => {
+	const getFocusedDescriptor = () => {
+		const columnKey = gridFocus.focusAddress.value.columnKey;
+		return columnDescriptors.value.find((descriptor) => descriptor.key === columnKey);
+	};
+	const getFocusedBodyRow = () => {
+		const rowIndex = gridFocus.focusBodyRowIndex.value;
+		return rowIndex === void 0 ? void 0 : flatRows.value[rowIndex];
+	};
+	const resolveTreeColumnKey = (flatRow) => {
+		return flatRow.kind === ESTableRowKind.GROUP ? toValue(groupColumnKey) : toValue(expandColumnKey) ?? toValue(primaryColumnKey);
+	};
+	/**
+	* Ссылка или кнопка в ячейке — своя остановка Tab в документе, и обход снаружи встаёт на
+	* неё, минуя roving-ячейку. Вход с клавиатуры (`:focus-visible`) извне таблицы в чужую
+	* ячейку переводится на roving-ячейку. Мышь, программный фокус изнутри и поля ввода
+	* (у них `:focus-visible` и от мыши) остаются, где встали.
+	*/
+	const isKeyboardEntryPastRovingCell = (event, eventTarget, address) => {
+		const gridElement = event.currentTarget;
+		const previousElement = event.relatedTarget;
+		return !(gridElement instanceof Node && previousElement instanceof Node && gridElement.contains(previousElement)) && eventTarget.matches(":focus-visible") && !eventTarget.matches(GRID_TEXT_ENTRY_SELECTOR) && !gridFocus.isCellFocused(address.section, address.rowKey, address.columnKey);
+	};
+	/** Адрес ячейки из её `data-*`; null — элемент не ячейка грида. */
+	const resolveCellAddress = (cellElement) => {
+		const section = resolveTableGridSection(cellElement.dataset.section ?? null);
+		const columnKey = cellElement.dataset.columnKey;
+		if (!section || !columnKey) return null;
+		return {
+			section,
+			rowKey: cellElement.dataset.rowKey,
+			columnKey
+		};
+	};
+	/** Фокус пришёл мышью или из ячейки — адрес модели догоняет DOM. */
+	const handleGridFocusIn = (event) => {
+		const eventTarget = event.target;
+		if (!(eventTarget instanceof HTMLElement)) return;
+		const cellElement = eventTarget.closest("[data-section]");
+		const address = cellElement instanceof HTMLElement ? resolveCellAddress(cellElement) : null;
+		if (!address) return;
+		const isInsideCell = cellElement !== eventTarget;
+		if (isInsideCell && isKeyboardEntryPastRovingCell(event, eventTarget, address)) {
+			gridFocus.focusAddressNow(gridFocus.focusAddress.value, { scroll: false });
+			return;
+		}
+		gridFocus.syncFocusAddress(address, isInsideCell);
+	};
+	/**
+	* Контракт treegrid: на колонке дерева ArrowRight раскрывает узел или уходит к первому
+	* потомку, ArrowLeft сворачивает или уходит к родителю. На остальных колонках стрелки
+	* остаются обычной навигацией грида. Возвращает true, если действие дерева применено.
+	*/
+	const handleTreeHorizontalKeydown = (key) => {
+		const address = gridFocus.focusAddress.value;
+		if (address.section !== ESTableGridSection.BODY || !address.rowKey) return false;
+		const flatRow = getFocusedBodyRow();
+		if (!flatRow || flatRow.kind === ESTableRowKind.DEPTH_FOOTER) return false;
+		if (address.columnKey !== resolveTreeColumnKey(flatRow)) return false;
+		const action = resolveTreeKeyboardNavigationAction(key, flatRow.key, flatRows.value);
+		if (!action) return false;
+		if (action.type === "select") {
+			gridFocus.focusAddressNow({
+				section: ESTableGridSection.BODY,
+				rowKey: action.rowKey,
+				columnKey: address.columnKey
+			});
+			return true;
+		}
+		toggleExpanded(action.rowKey);
+		return true;
+	};
+	/** Enter на ячейке: сначала действие строки, иначе — вход внутрь ячейки. */
+	const activateFocusedCell = (event) => {
+		const address = gridFocus.focusAddress.value;
+		if (address.section === ESTableGridSection.HEADER) {
+			const descriptor = getFocusedDescriptor();
+			if (descriptor?.sortable) {
+				applySortCycle(descriptor.key, event.shiftKey || event.ctrlKey || event.metaKey);
+				return;
+			}
+			gridFocus.enterCell();
+			return;
+		}
+		const flatRow = getFocusedBodyRow();
+		if (!flatRow) {
+			gridFocus.enterCell();
+			return;
+		}
+		if (flatRow.kind === ESTableRowKind.DEPTH_FOOTER) {
+			onDepthFooterActivate(flatRow);
+			return;
+		}
+		if (flatRow.kind === ESTableRowKind.LOAD_MORE) {
+			onLoadMoreActivate(flatRow);
+			return;
+		}
+		if ((flatRow.hasChildren || flatRow.kind === ESTableRowKind.GROUP) && address.columnKey === resolveTreeColumnKey(flatRow)) {
+			toggleExpanded(flatRow.key);
+			return;
+		}
+		if (!gridFocus.enterCell()) onRowActivate(flatRow, event);
+	};
+	/**
+	* Tab: внутри ячейки — к соседнему её интерактиву, с края ячейки и с самой ячейки — из грида.
+	* На выходе действие по умолчанию не гасится: браузер продолжает обход от границы грида.
+	*/
+	const handleGridTab = (event) => {
+		if (event.defaultPrevented) return;
+		const direction = event.shiftKey ? -1 : 1;
+		if (gridFocus.cellEntered.value && gridFocus.moveCellFocus(direction)) {
+			event.preventDefault();
+			return;
+		}
+		gridFocus.leaveGrid(direction);
+	};
+	/** Внутри ячейки грид отдаёт клавиши её интерактиву; Escape возвращает на ячейку. */
+	const handleEnteredCellKeydown = (event) => {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			gridFocus.exitCell();
+		}
+	};
+	/** Модификаторные сочетания разбираются до switch: они зависят от колонки, а не от клавиши. */
+	const handleColumnModifierKeydown = (event) => {
+		const descriptor = getFocusedDescriptor();
+		if (!descriptor) return false;
+		const isHorizontalArrow = event.key === "ArrowLeft" || event.key === "ArrowRight";
+		if (event.altKey && event.shiftKey && isHorizontalArrow) {
+			event.preventDefault();
+			resizeColumnByKeyboard(descriptor, event.key === "ArrowRight" ? 1 : -1);
+			return true;
+		}
+		const isMenuKey = event.altKey && event.key === "ArrowDown" || event.key === "ContextMenu";
+		const inHeader = gridFocus.focusAddress.value.section === ESTableGridSection.HEADER;
+		if (descriptor.column && inHeader && isMenuKey) {
+			event.preventDefault();
+			setColumnMenuOpen(descriptor.key, toValue(openMenuColumnKey) !== descriptor.key);
+			return true;
+		}
+		return false;
+	};
+	const handleGridKeydown = (event) => {
+		if (event.key === "Tab") {
+			handleGridTab(event);
+			return;
+		}
+		if (gridFocus.cellEntered.value) {
+			handleEnteredCellKeydown(event);
+			return;
+		}
+		if (handleColumnModifierKeydown(event)) return;
+		switch (event.key) {
+			case "ArrowRight":
+				event.preventDefault();
+				if (!handleTreeHorizontalKeydown("ArrowRight")) gridFocus.moveFocus(0, 1);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				if (!handleTreeHorizontalKeydown("ArrowLeft")) gridFocus.moveFocus(0, -1);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				gridFocus.moveFocus(1, 0);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				gridFocus.moveFocus(-1, 0);
+				break;
+			case "Home":
+				event.preventDefault();
+				if (event.ctrlKey || event.metaKey) gridFocus.moveToGridEdge("first");
+				else gridFocus.moveToRowEdge("start");
+				break;
+			case "End":
+				event.preventDefault();
+				if (event.ctrlKey || event.metaKey) gridFocus.moveToGridEdge("last");
+				else gridFocus.moveToRowEdge("end");
+				break;
+			case "PageDown":
+				event.preventDefault();
+				gridFocus.moveByPage(1);
+				break;
+			case "PageUp":
+				event.preventDefault();
+				gridFocus.moveByPage(-1);
+				break;
+			case "F2":
+				event.preventDefault();
+				gridFocus.enterCell();
+				break;
+			case "Enter":
+				event.preventDefault();
+				activateFocusedCell(event);
+				break;
+			case " ":
+			case "Spacebar": {
+				event.preventDefault();
+				const rowKey = gridFocus.focusedBodyRowKey.value;
+				if (!toValue(selectable) || !rowKey) break;
+				toggleRowSelected(rowKey);
+				break;
+			}
+			default: break;
+		}
+	};
+	return {
+		handleGridFocusIn,
+		handleGridKeydown
+	};
+};
+//#endregion
+export { useTableGridKeyboard };

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

@@ -0,0 +1,115 @@
+let vue = require("vue");
+//#region src/components/STable/utils/useTableRenderEntries.ts
+/**
+* Единый поток рендера tbody: блоки строк (окно плюс форс-строки вне окна),
+* разделённые спейсерами по фактическим виртуальным офсетам.
+*
+* Ключ рендера — всегда идентичность строки. Роль (прилипшая, активная) на ключ не
+* влияет: она меняется в рантайме, и ключ, зависящий от роли, размонтировал бы живой
+* DOM вместе с фокусом, начатым кликом и незавершённым перетаскиванием.
+*/
+var useTableRenderEntries = ({ flatRows, virtualEnabled, windowIndexes, uiTotalSize, getRowUiOffset, activeGroupRowIndex, activeDepthFooterRowIndexes, leavingDepthFooterRowIndex, slidingDepthFooterRowIndexes, farDepthFooterRowIndexes, activeRowIndex }) => {
+	/** Форс-строки вне окна: sticky-группа, sticky-футеры и активная строка навигации. */
+	const forcedRowAnchors = (0, vue.computed)(() => {
+		const anchors = [];
+		if (activeGroupRowIndex.value !== void 0) anchors.push(activeGroupRowIndex.value);
+		anchors.push(...activeDepthFooterRowIndexes.value);
+		if (activeRowIndex.value !== void 0) anchors.push(activeRowIndex.value);
+		return anchors;
+	});
+	return { renderEntries: (0, vue.computed)(() => {
+		const allRows = flatRows.value;
+		const stuckTopIndex = activeGroupRowIndex.value;
+		const stuckBottomIndexes = new Set(activeDepthFooterRowIndexes.value);
+		const slidingIndexes = new Set(slidingDepthFooterRowIndexes.value);
+		const farIndexes = new Set(farDepthFooterRowIndexes.value);
+		const leavingIndex = leavingDepthFooterRowIndex.value;
+		const leavingOffset = leavingIndex === void 0 ? void 0 : getRowUiOffset(leavingIndex);
+		const coverHeight = leavingOffset ? leavingOffset.end - leavingOffset.start : void 0;
+		const entries = [];
+		/** Обрезка по высоте уходящего футера — только прижатому под ним, не самому уходящему. */
+		const resolveCoverHeight = (stuckBottom, leaving, sliding) => {
+			return stuckBottom && !leaving && !sliding ? coverHeight : void 0;
+		};
+		const pushRow = (flatRow) => {
+			const rowOffset = getRowUiOffset(flatRow.index);
+			const stuckBottom = stuckBottomIndexes.has(flatRow.index);
+			const stuckBottomLeaving = flatRow.index === leavingIndex;
+			const stuckBottomSliding = slidingIndexes.has(flatRow.index);
+			entries.push({
+				row: flatRow,
+				renderKey: flatRow.key,
+				stuckTop: flatRow.index === stuckTopIndex,
+				stuckBottom,
+				stuckBottomLeaving,
+				stuckBottomSliding,
+				stuckBottomCoverHeight: resolveCoverHeight(stuckBottom, stuckBottomLeaving, stuckBottomSliding),
+				stuckBottomFar: farIndexes.has(flatRow.index),
+				rowHeight: rowOffset ? rowOffset.end - rowOffset.start : void 0
+			});
+		};
+		if (!(0, vue.toValue)(virtualEnabled)) {
+			allRows.forEach(pushRow);
+			return entries;
+		}
+		const uiTotal = uiTotalSize.value;
+		const windowRowIndexes = windowIndexes.value.filter((rowIndex) => {
+			const rowOffset = getRowUiOffset(rowIndex);
+			return !rowOffset || rowOffset.end > 0 && rowOffset.start < uiTotal;
+		});
+		const firstWindowIndex = windowRowIndexes[0];
+		const lastWindowIndex = windowRowIndexes[windowRowIndexes.length - 1];
+		const forcedIndexes = /* @__PURE__ */ new Set();
+		forcedRowAnchors.value.forEach((rowIndex) => {
+			if (allRows[rowIndex]) forcedIndexes.add(rowIndex);
+		});
+		const blocks = [];
+		if (firstWindowIndex !== void 0 && lastWindowIndex !== void 0) blocks.push({
+			startIndex: firstWindowIndex,
+			endIndex: lastWindowIndex
+		});
+		forcedIndexes.forEach((rowIndex) => {
+			if (!(firstWindowIndex !== void 0 && lastWindowIndex !== void 0 && rowIndex >= firstWindowIndex && rowIndex <= lastWindowIndex)) blocks.push({
+				startIndex: rowIndex,
+				endIndex: rowIndex
+			});
+		});
+		blocks.sort((leftBlock, rightBlock) => leftBlock.startIndex - rightBlock.startIndex);
+		let spacerIndex = 0;
+		let flowOffset = 0;
+		const pushSpacer = (spacerHeight) => {
+			entries.push({
+				renderKey: `spacer-${spacerIndex}`,
+				spacer: true,
+				spacerHeight: Math.max(0, Math.round(spacerHeight))
+			});
+			spacerIndex += 1;
+		};
+		const resolveBlockUiBounds = (block) => {
+			const blockStart = getRowUiOffset(block.startIndex);
+			const blockEnd = getRowUiOffset(block.endIndex);
+			if (!blockStart || !blockEnd) return {
+				start: flowOffset,
+				height: 0
+			};
+			return {
+				start: blockStart.start,
+				height: blockEnd.end - blockStart.start
+			};
+		};
+		blocks.forEach((block) => {
+			const { start: blockStart, height: blockHeight } = resolveBlockUiBounds(block);
+			const blockStartOffset = Math.min(uiTotal, Math.max(flowOffset, blockStart));
+			pushSpacer(blockStartOffset - flowOffset);
+			for (let rowIndex = block.startIndex; rowIndex <= block.endIndex; rowIndex += 1) {
+				const flatRow = allRows[rowIndex];
+				if (flatRow) pushRow(flatRow);
+			}
+			flowOffset = blockStartOffset + blockHeight;
+		});
+		pushSpacer(uiTotal - flowOffset);
+		return entries;
+	}) };
+};
+//#endregion
+exports.useTableRenderEntries = useTableRenderEntries;

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

@@ -0,0 +1,115 @@
+import { computed, toValue } from "vue";
+//#region src/components/STable/utils/useTableRenderEntries.ts
+/**
+* Единый поток рендера tbody: блоки строк (окно плюс форс-строки вне окна),
+* разделённые спейсерами по фактическим виртуальным офсетам.
+*
+* Ключ рендера — всегда идентичность строки. Роль (прилипшая, активная) на ключ не
+* влияет: она меняется в рантайме, и ключ, зависящий от роли, размонтировал бы живой
+* DOM вместе с фокусом, начатым кликом и незавершённым перетаскиванием.
+*/
+var useTableRenderEntries = ({ flatRows, virtualEnabled, windowIndexes, uiTotalSize, getRowUiOffset, activeGroupRowIndex, activeDepthFooterRowIndexes, leavingDepthFooterRowIndex, slidingDepthFooterRowIndexes, farDepthFooterRowIndexes, activeRowIndex }) => {
+	/** Форс-строки вне окна: sticky-группа, sticky-футеры и активная строка навигации. */
+	const forcedRowAnchors = computed(() => {
+		const anchors = [];
+		if (activeGroupRowIndex.value !== void 0) anchors.push(activeGroupRowIndex.value);
+		anchors.push(...activeDepthFooterRowIndexes.value);
+		if (activeRowIndex.value !== void 0) anchors.push(activeRowIndex.value);
+		return anchors;
+	});
+	return { renderEntries: computed(() => {
+		const allRows = flatRows.value;
+		const stuckTopIndex = activeGroupRowIndex.value;
+		const stuckBottomIndexes = new Set(activeDepthFooterRowIndexes.value);
+		const slidingIndexes = new Set(slidingDepthFooterRowIndexes.value);
+		const farIndexes = new Set(farDepthFooterRowIndexes.value);
+		const leavingIndex = leavingDepthFooterRowIndex.value;
+		const leavingOffset = leavingIndex === void 0 ? void 0 : getRowUiOffset(leavingIndex);
+		const coverHeight = leavingOffset ? leavingOffset.end - leavingOffset.start : void 0;
+		const entries = [];
+		/** Обрезка по высоте уходящего футера — только прижатому под ним, не самому уходящему. */
+		const resolveCoverHeight = (stuckBottom, leaving, sliding) => {
+			return stuckBottom && !leaving && !sliding ? coverHeight : void 0;
+		};
+		const pushRow = (flatRow) => {
+			const rowOffset = getRowUiOffset(flatRow.index);
+			const stuckBottom = stuckBottomIndexes.has(flatRow.index);
+			const stuckBottomLeaving = flatRow.index === leavingIndex;
+			const stuckBottomSliding = slidingIndexes.has(flatRow.index);
+			entries.push({
+				row: flatRow,
+				renderKey: flatRow.key,
+				stuckTop: flatRow.index === stuckTopIndex,
+				stuckBottom,
+				stuckBottomLeaving,
+				stuckBottomSliding,
+				stuckBottomCoverHeight: resolveCoverHeight(stuckBottom, stuckBottomLeaving, stuckBottomSliding),
+				stuckBottomFar: farIndexes.has(flatRow.index),
+				rowHeight: rowOffset ? rowOffset.end - rowOffset.start : void 0
+			});
+		};
+		if (!toValue(virtualEnabled)) {
+			allRows.forEach(pushRow);
+			return entries;
+		}
+		const uiTotal = uiTotalSize.value;
+		const windowRowIndexes = windowIndexes.value.filter((rowIndex) => {
+			const rowOffset = getRowUiOffset(rowIndex);
+			return !rowOffset || rowOffset.end > 0 && rowOffset.start < uiTotal;
+		});
+		const firstWindowIndex = windowRowIndexes[0];
+		const lastWindowIndex = windowRowIndexes[windowRowIndexes.length - 1];
+		const forcedIndexes = /* @__PURE__ */ new Set();
+		forcedRowAnchors.value.forEach((rowIndex) => {
+			if (allRows[rowIndex]) forcedIndexes.add(rowIndex);
+		});
+		const blocks = [];
+		if (firstWindowIndex !== void 0 && lastWindowIndex !== void 0) blocks.push({
+			startIndex: firstWindowIndex,
+			endIndex: lastWindowIndex
+		});
+		forcedIndexes.forEach((rowIndex) => {
+			if (!(firstWindowIndex !== void 0 && lastWindowIndex !== void 0 && rowIndex >= firstWindowIndex && rowIndex <= lastWindowIndex)) blocks.push({
+				startIndex: rowIndex,
+				endIndex: rowIndex
+			});
+		});
+		blocks.sort((leftBlock, rightBlock) => leftBlock.startIndex - rightBlock.startIndex);
+		let spacerIndex = 0;
+		let flowOffset = 0;
+		const pushSpacer = (spacerHeight) => {
+			entries.push({
+				renderKey: `spacer-${spacerIndex}`,
+				spacer: true,
+				spacerHeight: Math.max(0, Math.round(spacerHeight))
+			});
+			spacerIndex += 1;
+		};
+		const resolveBlockUiBounds = (block) => {
+			const blockStart = getRowUiOffset(block.startIndex);
+			const blockEnd = getRowUiOffset(block.endIndex);
+			if (!blockStart || !blockEnd) return {
+				start: flowOffset,
+				height: 0
+			};
+			return {
+				start: blockStart.start,
+				height: blockEnd.end - blockStart.start
+			};
+		};
+		blocks.forEach((block) => {
+			const { start: blockStart, height: blockHeight } = resolveBlockUiBounds(block);
+			const blockStartOffset = Math.min(uiTotal, Math.max(flowOffset, blockStart));
+			pushSpacer(blockStartOffset - flowOffset);
+			for (let rowIndex = block.startIndex; rowIndex <= block.endIndex; rowIndex += 1) {
+				const flatRow = allRows[rowIndex];
+				if (flatRow) pushRow(flatRow);
+			}
+			flowOffset = blockStartOffset + blockHeight;
+		});
+		pushSpacer(uiTotal - flowOffset);
+		return entries;
+	}) };
+};
+//#endregion
+export { useTableRenderEntries };