@shtabapp/ui-kit 1.85.0 → 1.85.2

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

@@ -0,0 +1,144 @@
+import { ESTableColumnSticky } from "../STable.types.js";
+import { computed, ref, toValue } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/components/STable/utils/useTableColumnResize.ts
+/**
+* Live-ресайз колонок: во время драга пишутся только CSS-переменные ширины и
+* sticky-офсетов (без vdom); модель коммитится на pointerup. Перемер строк
+* заморожен до коммита (окно не меняется — замер сам не срабатывает).
+*/
+var useTableColumnResize = ({ tableRootElement, scrollElement, columnDescriptors, columnWidths, enabled, onResizeEnd, remeasureRows }) => {
+	const resizeSession = ref();
+	const resizingColumnKey = computed(() => {
+		return resizeSession.value?.columnKey;
+	});
+	const clampColumnWidth = (descriptor, nextWidth) => {
+		const clampedMin = Math.max(descriptor.minWidth, nextWidth);
+		return descriptor.maxWidth ? Math.min(descriptor.maxWidth, clampedMin) : clampedMin;
+	};
+	/**
+	* Live-запись ширины жеста и кумулятивных sticky-офсетов, без vdom.
+	* Пишутся ТОЛЬКО live-переменные (fallback — модельные): Vue-патчи `:style`
+	* о них не знают и не затирают.
+	*/
+	const applyLiveColumnWidth = (columnKey, liveWidth) => {
+		const rootElement = tableRootElement.value;
+		if (!rootElement) return;
+		const resolveWidth = (descriptor) => {
+			return descriptor.key === columnKey ? liveWidth : descriptor.width;
+		};
+		const descriptors = columnDescriptors.value;
+		const resizedDescriptor = descriptors.find((descriptor) => descriptor.key === columnKey);
+		if (resizedDescriptor) rootElement.style.setProperty(resizedDescriptor.liveWidthVar, `${liveWidth}px`);
+		let stickyLeftOffset = 0;
+		descriptors.forEach((descriptor) => {
+			if (descriptor.sticky === ESTableColumnSticky.LEFT && descriptor.liveStickyOffsetVar) {
+				rootElement.style.setProperty(descriptor.liveStickyOffsetVar, `${stickyLeftOffset}px`);
+				stickyLeftOffset += resolveWidth(descriptor);
+			}
+		});
+		let stickyRightOffset = 0;
+		[...descriptors].reverse().forEach((descriptor) => {
+			if (descriptor.sticky === ESTableColumnSticky.RIGHT && descriptor.liveStickyOffsetVar) {
+				rootElement.style.setProperty(descriptor.liveStickyOffsetVar, `${stickyRightOffset}px`);
+				stickyRightOffset += resolveWidth(descriptor);
+			}
+		});
+	};
+	/** Снятие всех live-переменных — модельные значения снова в силе. */
+	const clearLiveColumnVars = () => {
+		const rootElement = tableRootElement.value;
+		if (!rootElement) return;
+		columnDescriptors.value.forEach((descriptor) => {
+			rootElement.style.removeProperty(descriptor.liveWidthVar);
+			if (descriptor.liveStickyOffsetVar) rootElement.style.removeProperty(descriptor.liveStickyOffsetVar);
+		});
+	};
+	const commitColumnWidth = (columnKey, committedWidth) => {
+		columnWidths.value = {
+			...columnWidths.value,
+			[columnKey]: committedWidth
+		};
+		onResizeEnd(columnKey, committedWidth);
+		remeasureRows();
+	};
+	const finishResizeSession = (commit) => {
+		const session = resizeSession.value;
+		if (!session) return;
+		resizeSession.value = void 0;
+		if (commit) commitColumnWidth(session.columnKey, session.liveWidth);
+		clearLiveColumnVars();
+	};
+	const handleResizeHandlePointerdown = (event, columnKey) => {
+		if (!toValue(enabled)) return;
+		const descriptor = columnDescriptors.value.find((columnDescriptor) => columnDescriptor.key === columnKey);
+		if (!descriptor?.resizable) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (event.isTrusted && event.target instanceof Element) event.target.setPointerCapture(event.pointerId);
+		resizeSession.value = {
+			columnKey,
+			startClientX: event.clientX,
+			startWidth: descriptor.width,
+			liveWidth: descriptor.width,
+			pointerId: event.pointerId
+		};
+	};
+	useEventListener("pointermove", (event) => {
+		const session = resizeSession.value;
+		if (!session || event.pointerId !== session.pointerId) return;
+		const descriptor = columnDescriptors.value.find((columnDescriptor) => columnDescriptor.key === session.columnKey);
+		if (!descriptor) return;
+		const nextWidth = clampColumnWidth(descriptor, session.startWidth + (event.clientX - session.startClientX));
+		if (nextWidth !== session.liveWidth) {
+			session.liveWidth = nextWidth;
+			applyLiveColumnWidth(session.columnKey, nextWidth);
+		}
+	});
+	useEventListener("pointerup", (event) => {
+		if (resizeSession.value && event.pointerId === resizeSession.value.pointerId) finishResizeSession(true);
+	});
+	useEventListener("pointercancel", () => {
+		finishResizeSession(false);
+	});
+	useEventListener("blur", () => {
+		finishResizeSession(false);
+	});
+	useEventListener("keydown", (event) => {
+		if (resizeSession.value && event.key === "Escape") {
+			event.preventDefault();
+			finishResizeSession(false);
+		}
+	});
+	const handleResizeHandleKeydown = (event, columnKey) => {
+		if (!toValue(enabled) || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		const descriptor = columnDescriptors.value.find((columnDescriptor) => columnDescriptor.key === columnKey);
+		if (!descriptor?.resizable) return;
+		event.preventDefault();
+		const stepSize = event.shiftKey ? 1 : 8;
+		const direction = event.key === "ArrowRight" ? 1 : -1;
+		const nextWidth = clampColumnWidth(descriptor, descriptor.width + direction * stepSize);
+		if (nextWidth !== descriptor.width) commitColumnWidth(columnKey, nextWidth);
+	};
+	/** Даблклик по ручке — автофит по контенту видимых ячеек колонки (потолок 640). */
+	const handleResizeHandleDblclick = (columnKey) => {
+		if (!toValue(enabled)) return;
+		const descriptor = columnDescriptors.value.find((columnDescriptor) => columnDescriptor.key === columnKey);
+		const container = scrollElement.value;
+		if (!descriptor?.resizable || !container) return;
+		let maxContentWidth = descriptor.minWidth;
+		container.querySelectorAll(`td[data-column-key="${columnKey}"] .s-ui-table__cell-body`).forEach((cellBody) => {
+			if (cellBody instanceof HTMLElement) maxContentWidth = Math.max(maxContentWidth, cellBody.scrollWidth + 8);
+		});
+		const fittedWidth = clampColumnWidth(descriptor, Math.min(640, maxContentWidth));
+		if (fittedWidth !== descriptor.width) commitColumnWidth(columnKey, fittedWidth);
+	};
+	return {
+		resizingColumnKey,
+		handleResizeHandlePointerdown,
+		handleResizeHandleKeydown,
+		handleResizeHandleDblclick
+	};
+};
+//#endregion
+export { useTableColumnResize };

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

@@ -0,0 +1,311 @@
+const require_STable_types = require("../STable.types.cjs");
+let vue = require("vue");
+//#region src/components/STable/utils/useTableColumns.ts
+var ESTableServiceColumn = /* @__PURE__ */ function(ESTableServiceColumn) {
+	ESTableServiceColumn["INDICATOR"] = "indicator";
+	ESTableServiceColumn["CHECKBOX"] = "checkbox";
+	ESTableServiceColumn["RIGHT_EDGE"] = "rightEdge";
+	/** Кнопка управления колонками в шапке; в строках ячейки пустые. */
+	ESTableServiceColumn["COLUMNS_MANAGER"] = "columnsManager";
+	return ESTableServiceColumn;
+}({});
+/** Kebab-имена служебных колонок для BEM-модификаторов. */
+var TABLE_SERVICE_COLUMN_CSS_NAME = {
+	["indicator"]: "indicator",
+	["checkbox"]: "checkbox",
+	["rightEdge"]: "right-edge",
+	["columnsManager"]: "columns-manager"
+};
+/** Правые служебные колонки: липнут к правому краю, крайняя — управление колонками. */
+var TRAILING_SERVICE_COLUMNS = new Set(["rightEdge", "columnsManager"]);
+var resolveServiceColumnSticky = (service) => {
+	return TRAILING_SERVICE_COLUMNS.has(service) ? require_STable_types.ESTableColumnSticky.RIGHT : require_STable_types.ESTableColumnSticky.LEFT;
+};
+var sanitizeColumnCssKey = (columnKey) => {
+	return columnKey.replace(/[^a-zA-Z0-9_-]/g, "-");
+};
+var buildTableColumnWidthVar = (columnKey) => {
+	return `--s-ui-table-col-w-${sanitizeColumnCssKey(columnKey)}`;
+};
+var buildTableStickyOffsetVar = (columnKey) => {
+	return `--s-ui-table-sticky-${sanitizeColumnCssKey(columnKey)}`;
+};
+/**
+* Live-переменные жеста ресайза. Отдельные имена с fallback на модельные:
+* они ставятся setProperty вне Vue-биндинга, поэтому патчи `:style` их не затирают.
+*/
+var buildTableColumnLiveWidthVar = (columnKey) => {
+	return `--s-ui-table-live-w-${sanitizeColumnCssKey(columnKey)}`;
+};
+var buildTableStickyLiveOffsetVar = (columnKey) => {
+	return `--s-ui-table-live-sticky-${sanitizeColumnCssKey(columnKey)}`;
+};
+/** Сколько ещё может вырасти гибкая колонка с учётом её `maxWidth`. */
+var resolveGrowLimit = (descriptor, currentGrowth) => {
+	if (descriptor.maxWidth === void 0) return Number.POSITIVE_INFINITY;
+	return Math.max(0, descriptor.maxWidth - descriptor.baseWidth - currentGrowth);
+};
+/**
+* Раздача излишка пропорционально `baseWidth` открытых (не упёршихся в `maxWidth`) колонок.
+* Последняя открытая берёт остаток от округления, чтобы сумма сходилась до пикселя.
+* Возвращает, сколько излишка не удалось раздать из-за `maxWidth`.
+*/
+var allocateGrowthPass = (openDescriptors, surplus, growthByKey) => {
+	const baseTotal = openDescriptors.reduce((sum, descriptor) => sum + descriptor.baseWidth, 0);
+	let distributed = 0;
+	openDescriptors.forEach((descriptor, index) => {
+		const share = index === openDescriptors.length - 1 ? surplus - distributed : Math.floor(surplus * descriptor.baseWidth / baseTotal);
+		const currentGrowth = growthByKey.get(descriptor.key) ?? 0;
+		const growth = Math.min(share, resolveGrowLimit(descriptor, currentGrowth));
+		growthByKey.set(descriptor.key, currentGrowth + growth);
+		distributed += growth;
+	});
+	return surplus - distributed;
+};
+/** Дефолт ширины колонки без `width`: главная шире (Figma «Title column»). */
+var resolveDefaultColumnWidth = (isPrimaryColumn) => {
+	return isPrimaryColumn ? 430 : 160;
+};
+/** Крайние sticky-колонки зон: у них рисуется тень границы зоны. */
+var markStickyEdgeDescriptors = (descriptors) => {
+	const stickyLeftDescriptors = descriptors.filter((descriptor) => {
+		return descriptor.sticky === require_STable_types.ESTableColumnSticky.LEFT;
+	});
+	const lastStickyLeftDescriptor = stickyLeftDescriptors[stickyLeftDescriptors.length - 1];
+	if (lastStickyLeftDescriptor) lastStickyLeftDescriptor.lastStickyLeft = true;
+	const firstRightDescriptor = descriptors.find((descriptor) => {
+		return descriptor.sticky === require_STable_types.ESTableColumnSticky.RIGHT;
+	});
+	if (firstRightDescriptor) firstRightDescriptor.firstStickyRight = true;
+};
+/**
+* Раздача излишка вьюпорта гибким колонкам. Возвращает исходный массив (та же identity,
+* `v-memo` строк не сбрасывается), если излишка нет или гибких колонок нет; иначе — новый
+* массив, где у выросших колонок обновлена `width`. Колонки с `maxWidth` упираются в него,
+* их доля уходит по кругу остальным; что не разобрали — остаётся филлеру.
+*/
+var allocateGrowth = (flexibleDescriptors, surplus) => {
+	const growthByKey = /* @__PURE__ */ new Map();
+	let remaining = surplus;
+	for (let pass = 0; pass < flexibleDescriptors.length && remaining > 0; pass += 1) {
+		const openDescriptors = flexibleDescriptors.filter((descriptor) => {
+			return resolveGrowLimit(descriptor, growthByKey.get(descriptor.key) ?? 0) > 0;
+		});
+		if (openDescriptors.length === 0) return growthByKey;
+		remaining = allocateGrowthPass(openDescriptors, remaining, growthByKey);
+	}
+	return growthByKey;
+};
+var distributeTableColumnWidths = (descriptors, viewportWidth) => {
+	const baseTotal = descriptors.reduce((sum, descriptor) => sum + descriptor.baseWidth, 0);
+	const flexibleDescriptors = descriptors.filter((descriptor) => descriptor.flexible);
+	const surplus = Math.floor(viewportWidth) - baseTotal;
+	if (surplus <= 0 || flexibleDescriptors.length === 0) return descriptors;
+	const growthByKey = allocateGrowth(flexibleDescriptors, surplus);
+	return descriptors.map((descriptor) => {
+		const growth = growthByKey.get(descriptor.key);
+		return growth ? {
+			...descriptor,
+			width: descriptor.baseWidth + growth
+		} : descriptor;
+	});
+};
+var useTableColumns = ({ columns, columnOrder, columnWidths, hiddenColumns, hasIndicator, hasCheckbox, hasRightEdge, hasColumnsManager, columnsManagerWidth = 32, columnsResizable, columnsDraggable, viewportWidth }) => {
+	const primaryColumnKey = (0, vue.computed)(() => {
+		const sourceColumns = (0, vue.toValue)(columns);
+		return sourceColumns.find((tableColumn) => tableColumn.primary)?.key ?? sourceColumns[0]?.key;
+	});
+	/** Видимые data-колонки в итоговом порядке: главная → sticky-left → обычные → sticky-right. */
+	const orderedDataColumns = (0, vue.computed)(() => {
+		const sourceColumns = (0, vue.toValue)(columns);
+		const hiddenKeySet = new Set(hiddenColumns.value ?? []);
+		const orderKeys = columnOrder.value;
+		const columnByKey = new Map(sourceColumns.map((tableColumn) => [tableColumn.key, tableColumn]));
+		const orderedKeys = [];
+		if (orderKeys) {
+			orderKeys.forEach((columnKey) => {
+				if (columnByKey.has(columnKey)) orderedKeys.push(columnKey);
+			});
+			sourceColumns.forEach((tableColumn) => {
+				if (!orderKeys.includes(tableColumn.key)) orderedKeys.push(tableColumn.key);
+			});
+		} else sourceColumns.forEach((tableColumn) => {
+			orderedKeys.push(tableColumn.key);
+		});
+		const visibleColumns = [];
+		orderedKeys.forEach((columnKey) => {
+			const tableColumn = columnByKey.get(columnKey);
+			if (!tableColumn) return;
+			if (!(columnKey === primaryColumnKey.value) && hiddenKeySet.has(columnKey)) return;
+			visibleColumns.push(tableColumn);
+		});
+		const leadingColumns = [];
+		const primaryColumns = [];
+		const stickyLeftColumns = [];
+		const regularColumns = [];
+		const stickyRightColumns = [];
+		visibleColumns.forEach((tableColumn) => {
+			if (tableColumn.key === primaryColumnKey.value) primaryColumns.push(tableColumn);
+			else if (tableColumn.leading) leadingColumns.push(tableColumn);
+			else if (tableColumn.sticky === require_STable_types.ESTableColumnSticky.LEFT) stickyLeftColumns.push(tableColumn);
+			else if (tableColumn.sticky === require_STable_types.ESTableColumnSticky.RIGHT) stickyRightColumns.push(tableColumn);
+			else regularColumns.push(tableColumn);
+		});
+		return [
+			...leadingColumns,
+			...primaryColumns,
+			...stickyLeftColumns,
+			...regularColumns,
+			...stickyRightColumns
+		];
+	});
+	/**
+	* Базовая ширина: модель (ресайз/автофит) → `width` конфига → дефолт. Колонка без явной
+	* ширины гибкая — заполняет свободную ширину вьюпорта; sticky-right всегда фиксированные.
+	*/
+	const resolveColumnBaseWidth = (tableColumn, isPrimaryColumn) => {
+		const modelWidth = columnWidths.value?.[tableColumn.key];
+		if (modelWidth) return {
+			baseWidth: modelWidth,
+			flexible: false
+		};
+		if (tableColumn.width) return {
+			baseWidth: tableColumn.width,
+			flexible: false
+		};
+		return {
+			baseWidth: resolveDefaultColumnWidth(isPrimaryColumn),
+			flexible: tableColumn.sticky !== require_STable_types.ESTableColumnSticky.RIGHT
+		};
+	};
+	/** Правые служебные колонки: right-edge, затем крайняя колонка управления колонками. */
+	const pushTrailingServiceColumns = (pushServiceColumn) => {
+		if ((0, vue.toValue)(hasRightEdge)) pushServiceColumn("rightEdge", 40);
+		if ((0, vue.toValue)(hasColumnsManager)) pushServiceColumn("columnsManager", (0, vue.toValue)(columnsManagerWidth));
+	};
+	/** Полный список колонок в базовых ширинах: служебные слева, data, служебные справа. */
+	const baseColumnDescriptors = (0, vue.computed)(() => {
+		const descriptors = [];
+		const resizableEnabled = (0, vue.toValue)(columnsResizable);
+		const draggableEnabled = (0, vue.toValue)(columnsDraggable);
+		const pushServiceColumn = (service, width) => {
+			const sticky = resolveServiceColumnSticky(service);
+			descriptors.push({
+				key: `__s-ui-table-${service}`,
+				service,
+				width,
+				baseWidth: width,
+				flexible: false,
+				minWidth: width,
+				maxWidth: width,
+				sticky,
+				align: require_STable_types.ESTableColumnAlign.LEFT,
+				primary: false,
+				resizable: false,
+				draggable: false,
+				sortable: false,
+				hideable: false,
+				colIndex: 0,
+				widthVar: buildTableColumnWidthVar(service),
+				liveWidthVar: buildTableColumnLiveWidthVar(service),
+				stickyOffsetVar: buildTableStickyOffsetVar(service),
+				liveStickyOffsetVar: buildTableStickyLiveOffsetVar(service),
+				lastStickyLeft: false,
+				firstStickyRight: false
+			});
+		};
+		if ((0, vue.toValue)(hasIndicator)) pushServiceColumn("indicator", 2);
+		if ((0, vue.toValue)(hasCheckbox)) pushServiceColumn("checkbox", 24);
+		orderedDataColumns.value.forEach((tableColumn) => {
+			const isPrimaryColumn = tableColumn.key === primaryColumnKey.value;
+			const isLeadingColumn = Boolean(tableColumn.leading) && !isPrimaryColumn;
+			const sticky = isPrimaryColumn || isLeadingColumn ? require_STable_types.ESTableColumnSticky.LEFT : tableColumn.sticky;
+			const { baseWidth, flexible } = resolveColumnBaseWidth(tableColumn, isPrimaryColumn);
+			descriptors.push({
+				key: tableColumn.key,
+				column: tableColumn,
+				width: baseWidth,
+				baseWidth,
+				flexible,
+				minWidth: tableColumn.minWidth ?? 60,
+				maxWidth: tableColumn.maxWidth,
+				sticky,
+				align: tableColumn.align ?? require_STable_types.ESTableColumnAlign.LEFT,
+				primary: isPrimaryColumn,
+				resizable: resizableEnabled && (tableColumn.resizable ?? true),
+				draggable: draggableEnabled && !isPrimaryColumn && !isLeadingColumn && (tableColumn.draggable ?? true),
+				sortable: tableColumn.sortable ?? false,
+				hideable: !isPrimaryColumn && !isLeadingColumn && (tableColumn.hideable ?? true),
+				colIndex: 0,
+				widthVar: buildTableColumnWidthVar(tableColumn.key),
+				liveWidthVar: buildTableColumnLiveWidthVar(tableColumn.key),
+				stickyOffsetVar: sticky ? buildTableStickyOffsetVar(tableColumn.key) : void 0,
+				liveStickyOffsetVar: sticky ? buildTableStickyLiveOffsetVar(tableColumn.key) : void 0,
+				lastStickyLeft: false,
+				firstStickyRight: false
+			});
+		});
+		pushTrailingServiceColumns(pushServiceColumn);
+		let renderColIndex = 0;
+		descriptors.forEach((descriptor) => {
+			if (descriptor.sticky !== require_STable_types.ESTableColumnSticky.RIGHT) {
+				renderColIndex += 1;
+				descriptor.colIndex = renderColIndex;
+			}
+		});
+		descriptors.forEach((descriptor) => {
+			if (descriptor.sticky === require_STable_types.ESTableColumnSticky.RIGHT) {
+				renderColIndex += 1;
+				descriptor.colIndex = renderColIndex;
+			}
+		});
+		markStickyEdgeDescriptors(descriptors);
+		return descriptors;
+	});
+	/** Рендеримые колонки: излишек вьюпорта роздан гибким колонкам. */
+	const columnDescriptors = (0, vue.computed)(() => {
+		return distributeTableColumnWidths(baseColumnDescriptors.value, (0, vue.toValue)(viewportWidth));
+	});
+	const totalWidth = (0, vue.computed)(() => {
+		return columnDescriptors.value.reduce((widthSum, descriptor) => {
+			return widthSum + descriptor.width;
+		}, 0);
+	});
+	/** CSS-переменные ширин и кумулятивных sticky-офсетов — один источник для rootStyle. */
+	const columnCssVars = (0, vue.computed)(() => {
+		const cssVars = {};
+		let stickyLeftOffset = 0;
+		columnDescriptors.value.forEach((descriptor) => {
+			cssVars[descriptor.widthVar] = `${descriptor.width}px`;
+			if (descriptor.sticky === require_STable_types.ESTableColumnSticky.LEFT && descriptor.stickyOffsetVar) {
+				cssVars[descriptor.stickyOffsetVar] = `${stickyLeftOffset}px`;
+				stickyLeftOffset += descriptor.width;
+			}
+		});
+		let stickyRightOffset = 0;
+		[...columnDescriptors.value].reverse().forEach((descriptor) => {
+			if (descriptor.sticky === require_STable_types.ESTableColumnSticky.RIGHT && descriptor.stickyOffsetVar) {
+				cssVars[descriptor.stickyOffsetVar] = `${stickyRightOffset}px`;
+				stickyRightOffset += descriptor.width;
+			}
+		});
+		return cssVars;
+	});
+	return {
+		primaryColumnKey,
+		orderedDataColumns,
+		columnDescriptors,
+		dataColumnDescriptors: (0, vue.computed)(() => {
+			return columnDescriptors.value.filter((descriptor) => descriptor.column);
+		}),
+		columnCssVars,
+		totalWidth,
+		columnCount: (0, vue.computed)(() => {
+			return columnDescriptors.value.length;
+		})
+	};
+};
+//#endregion
+exports.ESTableServiceColumn = ESTableServiceColumn;
+exports.TABLE_SERVICE_COLUMN_CSS_NAME = TABLE_SERVICE_COLUMN_CSS_NAME;
+exports.useTableColumns = useTableColumns;