@shtabapp/ui-kit 1.84.0 → 1.85.1

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

@@ -0,0 +1,118 @@
+import { ESTableColumnAlign, ESTableColumnSticky } from "../STable.types.js";
+import { TABLE_FILLER_COLUMN_KEY } from "../constants/tableSizes.js";
+import { TABLE_SERVICE_COLUMN_CSS_NAME } from "./useTableColumns.js";
+import { computed, toValue } from "vue";
+//#region src/components/STable/utils/useTableCellPlans.ts
+var CELL_ALIGN_CLASS = {
+	[ESTableColumnAlign.LEFT]: "s-ui-table__cell--align-left",
+	[ESTableColumnAlign.CENTER]: "s-ui-table__cell--align-center",
+	[ESTableColumnAlign.RIGHT]: "s-ui-table__cell--align-right"
+};
+/**
+* Планы отрисовки ячеек: классы, sticky-офсеты и место шеврона считаются один раз
+* на колонку, а не на каждую строку — при виртуализации это разница между сотней
+* и тысячами вычислений на кадр.
+*
+* Шапка и тело делят одно разбиение на зоны: слева всё, что не прилипает вправо,
+* затем филлер, затем правые sticky-колонки. Филлер — запись без дескриптора/плана,
+* поэтому обе зоны рендерятся одним циклом с одинаковой разметкой.
+*/
+var useTableCellPlans = ({ columnDescriptors, hasTreeStructure, expandColumnKey, primaryColumnKey }) => {
+	const leadingDescriptors = computed(() => {
+		return columnDescriptors.value.filter((descriptor) => {
+			return descriptor.sticky !== ESTableColumnSticky.RIGHT;
+		});
+	});
+	const trailingDescriptors = computed(() => {
+		return columnDescriptors.value.filter((descriptor) => {
+			return descriptor.sticky === ESTableColumnSticky.RIGHT;
+		});
+	});
+	const headerCells = computed(() => {
+		const describe = (descriptor) => {
+			return {
+				key: descriptor.key,
+				descriptor
+			};
+		};
+		return [
+			...leadingDescriptors.value.map(describe),
+			{
+				key: TABLE_FILLER_COLUMN_KEY,
+				descriptor: void 0
+			},
+			...trailingDescriptors.value.map(describe)
+		];
+	});
+	const getStickyCellStyle = (descriptor) => {
+		if (!descriptor.sticky || !descriptor.stickyOffsetVar || !descriptor.liveStickyOffsetVar) return;
+		const stickyOffset = `var(${descriptor.liveStickyOffsetVar}, var(${descriptor.stickyOffsetVar}))`;
+		if (descriptor.sticky === ESTableColumnSticky.LEFT) return {
+			left: stickyOffset,
+			"--s-ui-table-cell-inline-offset": stickyOffset
+		};
+		return { right: stickyOffset };
+	};
+	const getCellStaticClasses = (descriptor) => {
+		const serviceCssName = descriptor.service ? TABLE_SERVICE_COLUMN_CSS_NAME[descriptor.service] : void 0;
+		return {
+			"s-ui-table__cell--sticky-left": descriptor.sticky === ESTableColumnSticky.LEFT,
+			"s-ui-table__cell--sticky-right": descriptor.sticky === ESTableColumnSticky.RIGHT,
+			"s-ui-table__cell--last-sticky-left": descriptor.lastStickyLeft,
+			"s-ui-table__cell--first-sticky-right": descriptor.firstStickyRight,
+			"s-ui-table__cell--primary": descriptor.primary,
+			[`s-ui-table__cell--service-${serviceCssName}`]: Boolean(serviceCssName),
+			[CELL_ALIGN_CLASS[descriptor.align]]: Boolean(descriptor.column)
+		};
+	};
+	const isExpandColumn = (descriptor) => {
+		if (!toValue(hasTreeStructure) || !descriptor.column) return false;
+		const explicitKey = toValue(expandColumnKey);
+		return descriptor.key === (explicitKey ?? toValue(primaryColumnKey));
+	};
+	const buildCellRenderPlan = (descriptor) => {
+		const classNames = ["s-ui-table__cell"];
+		Object.entries(getCellStaticClasses(descriptor)).forEach(([className, classEnabled]) => {
+			if (classEnabled) classNames.push(className);
+		});
+		return {
+			descriptor,
+			cellClass: classNames.join(" "),
+			style: getStickyCellStyle(descriptor),
+			chevron: isExpandColumn(descriptor)
+		};
+	};
+	const leadingCellPlans = computed(() => {
+		return leadingDescriptors.value.map(buildCellRenderPlan);
+	});
+	const trailingCellPlans = computed(() => {
+		return trailingDescriptors.value.map(buildCellRenderPlan);
+	});
+	return {
+		leadingDescriptors,
+		trailingDescriptors,
+		headerCells,
+		getStickyCellStyle,
+		getHeaderCellClasses: getCellStaticClasses,
+		leadingCellPlans,
+		trailingCellPlans,
+		rowCellPlans: computed(() => {
+			const describe = (cellPlan) => {
+				return {
+					key: cellPlan.descriptor.key,
+					cellPlan
+				};
+			};
+			return [
+				...leadingCellPlans.value.map(describe),
+				{
+					key: TABLE_FILLER_COLUMN_KEY,
+					cellPlan: void 0
+				},
+				...trailingCellPlans.value.map(describe)
+			];
+		})
+	};
+};
+//#endregion
+export { useTableCellPlans };

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

@@ -0,0 +1,155 @@
+const require_tableDndShared = require("./tableDndShared.cjs");
+let vue = require("vue");
+let _atlaskit_pragmatic_drag_and_drop_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+let _atlaskit_pragmatic_drag_and_drop_element_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+let _atlaskit_pragmatic_drag_and_drop_element_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+let _atlaskit_pragmatic_drag_and_drop_element_pointer_outside_of_preview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
+let _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+//#region src/components/STable/utils/useTableColumnDnd.ts
+/**
+* DnD колонок: draggable + dropTarget на th, closest-edge left/right,
+* кастомное превью-бейдж. Sticky-колонки переносятся только внутри своей зоны.
+*/
+var useTableColumnDnd = ({ tableId, tableRootElement, enabled, columnDescriptors, onReorder, isResizing }) => {
+	const columnCleanups = /* @__PURE__ */ new Map();
+	const registeredColumnKeys = /* @__PURE__ */ new Map();
+	const draggingColumnKey = (0, vue.shallowRef)();
+	const dropIndicator = (0, vue.shallowRef)();
+	const findDescriptor = (columnKey) => {
+		return columnDescriptors.value.find((descriptor) => descriptor.key === columnKey);
+	};
+	const areInSameStickyZone = (sourceKey, targetKey) => {
+		const sourceDescriptor = findDescriptor(sourceKey);
+		const targetDescriptor = findDescriptor(targetKey);
+		if (!sourceDescriptor || !targetDescriptor || targetDescriptor.primary) return false;
+		const zoneOf = (descriptor) => {
+			return descriptor.sticky ?? "regular";
+		};
+		return zoneOf(sourceDescriptor) === zoneOf(targetDescriptor);
+	};
+	const registerColumnHeaderElement = (columnKey, headerElement) => {
+		if (!(headerElement instanceof HTMLElement)) {
+			columnCleanups.forEach((cleanup, registeredElement) => {
+				if (!registeredElement.isConnected) {
+					cleanup();
+					columnCleanups.delete(registeredElement);
+					registeredColumnKeys.delete(registeredElement);
+				}
+			});
+			return;
+		}
+		if (registeredColumnKeys.get(headerElement) === columnKey) return;
+		columnCleanups.get(headerElement)?.();
+		registeredColumnKeys.set(headerElement, columnKey);
+		const cleanup = (0, _atlaskit_pragmatic_drag_and_drop_combine.combine)((0, _atlaskit_pragmatic_drag_and_drop_element_adapter.draggable)({
+			element: headerElement,
+			canDrag: () => {
+				const descriptor = findDescriptor(columnKey);
+				return Boolean((0, vue.toValue)(enabled) && descriptor?.draggable && !(0, vue.toValue)(isResizing));
+			},
+			getInitialData: () => {
+				return {
+					type: require_tableDndShared.TABLE_COLUMN_DRAG_TYPE,
+					tableId,
+					columnKey
+				};
+			},
+			onGenerateDragPreview: ({ nativeSetDragImage }) => {
+				const descriptor = findDescriptor(columnKey);
+				(0, _atlaskit_pragmatic_drag_and_drop_element_set_custom_native_drag_preview.setCustomNativeDragPreview)({
+					nativeSetDragImage,
+					getOffset: (0, _atlaskit_pragmatic_drag_and_drop_element_pointer_outside_of_preview.pointerOutsideOfPreview)({
+						x: "8px",
+						y: "8px"
+					}),
+					render: ({ container }) => {
+						const previewBadge = document.createElement("div");
+						previewBadge.className = "s-ui-table__column-drag-preview";
+						previewBadge.textContent = descriptor?.column?.title ?? columnKey;
+						container.appendChild(previewBadge);
+					}
+				});
+			},
+			onDragStart: () => {
+				draggingColumnKey.value = columnKey;
+			},
+			onDrop: () => {
+				draggingColumnKey.value = void 0;
+				dropIndicator.value = void 0;
+			}
+		}), (0, _atlaskit_pragmatic_drag_and_drop_element_adapter.dropTargetForElements)({
+			element: headerElement,
+			canDrop: ({ source }) => {
+				return require_tableDndShared.isTableColumnDragData(source.data, tableId) && source.data.columnKey !== columnKey && areInSameStickyZone(source.data.columnKey, columnKey);
+			},
+			getData: ({ input, element }) => {
+				return (0, _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge.attachClosestEdge)({ columnKey }, {
+					input,
+					element,
+					allowedEdges: ["left", "right"]
+				});
+			},
+			onDrag: ({ self }) => {
+				const edge = (0, _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge.extractClosestEdge)(self.data);
+				if (edge === "left" || edge === "right") {
+					const currentIndicator = dropIndicator.value;
+					if (currentIndicator?.targetKey !== columnKey || currentIndicator.edge !== edge) dropIndicator.value = {
+						targetKey: columnKey,
+						edge
+					};
+				}
+			},
+			onDragLeave: () => {
+				if (dropIndicator.value?.targetKey === columnKey) dropIndicator.value = void 0;
+			}
+		}));
+		columnCleanups.set(headerElement, cleanup);
+	};
+	const stopColumnMonitor = (0, _atlaskit_pragmatic_drag_and_drop_element_adapter.monitorForElements)({
+		canMonitor: ({ source }) => {
+			return require_tableDndShared.isTableColumnDragData(source.data, tableId);
+		},
+		onDrop: ({ source, location }) => {
+			draggingColumnKey.value = void 0;
+			dropIndicator.value = void 0;
+			const dropTarget = location.current.dropTargets[0];
+			if (!dropTarget || !require_tableDndShared.isTableColumnDragData(source.data, tableId)) return;
+			const targetData = dropTarget.data;
+			const targetKey = targetData.columnKey;
+			const edge = (0, _atlaskit_pragmatic_drag_and_drop_hitbox_closest_edge.extractClosestEdge)(targetData);
+			if (typeof targetKey !== "string" || edge !== "left" && edge !== "right") return;
+			if (targetKey === source.data.columnKey) return;
+			onReorder(source.data.columnKey, targetKey, edge);
+		}
+	});
+	(0, vue.onBeforeUnmount)(() => {
+		stopColumnMonitor();
+		columnCleanups.forEach((cleanup) => {
+			cleanup();
+		});
+		columnCleanups.clear();
+		registeredColumnKeys.clear();
+	});
+	/** Позиция линии колоночного дропа: замер th по факту смены индикатора. */
+	const dropLineStyle = (0, vue.shallowRef)();
+	(0, vue.watch)(dropIndicator, (indicator) => {
+		const rootElement = tableRootElement.value;
+		const headerCellElement = indicator ? rootElement?.querySelector(`th[data-column-key="${indicator.targetKey}"]`) : void 0;
+		if (!indicator || !rootElement || !headerCellElement) {
+			dropLineStyle.value = void 0;
+			return;
+		}
+		const rootRect = rootElement.getBoundingClientRect();
+		const cellRect = headerCellElement.getBoundingClientRect();
+		const lineX = indicator.edge === "left" ? cellRect.left : cellRect.right;
+		dropLineStyle.value = { left: `${Math.round(lineX - rootRect.left - 1)}px` };
+	});
+	return {
+		registerColumnHeaderElement,
+		draggingColumnKey,
+		dropIndicator,
+		dropLineStyle
+	};
+};
+//#endregion
+exports.useTableColumnDnd = useTableColumnDnd;

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

@@ -0,0 +1,155 @@
+import { TABLE_COLUMN_DRAG_TYPE, isTableColumnDragData } from "./tableDndShared.js";
+import { onBeforeUnmount, shallowRef, toValue, watch } from "vue";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+//#region src/components/STable/utils/useTableColumnDnd.ts
+/**
+* DnD колонок: draggable + dropTarget на th, closest-edge left/right,
+* кастомное превью-бейдж. Sticky-колонки переносятся только внутри своей зоны.
+*/
+var useTableColumnDnd = ({ tableId, tableRootElement, enabled, columnDescriptors, onReorder, isResizing }) => {
+	const columnCleanups = /* @__PURE__ */ new Map();
+	const registeredColumnKeys = /* @__PURE__ */ new Map();
+	const draggingColumnKey = shallowRef();
+	const dropIndicator = shallowRef();
+	const findDescriptor = (columnKey) => {
+		return columnDescriptors.value.find((descriptor) => descriptor.key === columnKey);
+	};
+	const areInSameStickyZone = (sourceKey, targetKey) => {
+		const sourceDescriptor = findDescriptor(sourceKey);
+		const targetDescriptor = findDescriptor(targetKey);
+		if (!sourceDescriptor || !targetDescriptor || targetDescriptor.primary) return false;
+		const zoneOf = (descriptor) => {
+			return descriptor.sticky ?? "regular";
+		};
+		return zoneOf(sourceDescriptor) === zoneOf(targetDescriptor);
+	};
+	const registerColumnHeaderElement = (columnKey, headerElement) => {
+		if (!(headerElement instanceof HTMLElement)) {
+			columnCleanups.forEach((cleanup, registeredElement) => {
+				if (!registeredElement.isConnected) {
+					cleanup();
+					columnCleanups.delete(registeredElement);
+					registeredColumnKeys.delete(registeredElement);
+				}
+			});
+			return;
+		}
+		if (registeredColumnKeys.get(headerElement) === columnKey) return;
+		columnCleanups.get(headerElement)?.();
+		registeredColumnKeys.set(headerElement, columnKey);
+		const cleanup = combine(draggable({
+			element: headerElement,
+			canDrag: () => {
+				const descriptor = findDescriptor(columnKey);
+				return Boolean(toValue(enabled) && descriptor?.draggable && !toValue(isResizing));
+			},
+			getInitialData: () => {
+				return {
+					type: TABLE_COLUMN_DRAG_TYPE,
+					tableId,
+					columnKey
+				};
+			},
+			onGenerateDragPreview: ({ nativeSetDragImage }) => {
+				const descriptor = findDescriptor(columnKey);
+				setCustomNativeDragPreview({
+					nativeSetDragImage,
+					getOffset: pointerOutsideOfPreview({
+						x: "8px",
+						y: "8px"
+					}),
+					render: ({ container }) => {
+						const previewBadge = document.createElement("div");
+						previewBadge.className = "s-ui-table__column-drag-preview";
+						previewBadge.textContent = descriptor?.column?.title ?? columnKey;
+						container.appendChild(previewBadge);
+					}
+				});
+			},
+			onDragStart: () => {
+				draggingColumnKey.value = columnKey;
+			},
+			onDrop: () => {
+				draggingColumnKey.value = void 0;
+				dropIndicator.value = void 0;
+			}
+		}), dropTargetForElements({
+			element: headerElement,
+			canDrop: ({ source }) => {
+				return isTableColumnDragData(source.data, tableId) && source.data.columnKey !== columnKey && areInSameStickyZone(source.data.columnKey, columnKey);
+			},
+			getData: ({ input, element }) => {
+				return attachClosestEdge({ columnKey }, {
+					input,
+					element,
+					allowedEdges: ["left", "right"]
+				});
+			},
+			onDrag: ({ self }) => {
+				const edge = extractClosestEdge(self.data);
+				if (edge === "left" || edge === "right") {
+					const currentIndicator = dropIndicator.value;
+					if (currentIndicator?.targetKey !== columnKey || currentIndicator.edge !== edge) dropIndicator.value = {
+						targetKey: columnKey,
+						edge
+					};
+				}
+			},
+			onDragLeave: () => {
+				if (dropIndicator.value?.targetKey === columnKey) dropIndicator.value = void 0;
+			}
+		}));
+		columnCleanups.set(headerElement, cleanup);
+	};
+	const stopColumnMonitor = monitorForElements({
+		canMonitor: ({ source }) => {
+			return isTableColumnDragData(source.data, tableId);
+		},
+		onDrop: ({ source, location }) => {
+			draggingColumnKey.value = void 0;
+			dropIndicator.value = void 0;
+			const dropTarget = location.current.dropTargets[0];
+			if (!dropTarget || !isTableColumnDragData(source.data, tableId)) return;
+			const targetData = dropTarget.data;
+			const targetKey = targetData.columnKey;
+			const edge = extractClosestEdge(targetData);
+			if (typeof targetKey !== "string" || edge !== "left" && edge !== "right") return;
+			if (targetKey === source.data.columnKey) return;
+			onReorder(source.data.columnKey, targetKey, edge);
+		}
+	});
+	onBeforeUnmount(() => {
+		stopColumnMonitor();
+		columnCleanups.forEach((cleanup) => {
+			cleanup();
+		});
+		columnCleanups.clear();
+		registeredColumnKeys.clear();
+	});
+	/** Позиция линии колоночного дропа: замер th по факту смены индикатора. */
+	const dropLineStyle = shallowRef();
+	watch(dropIndicator, (indicator) => {
+		const rootElement = tableRootElement.value;
+		const headerCellElement = indicator ? rootElement?.querySelector(`th[data-column-key="${indicator.targetKey}"]`) : void 0;
+		if (!indicator || !rootElement || !headerCellElement) {
+			dropLineStyle.value = void 0;
+			return;
+		}
+		const rootRect = rootElement.getBoundingClientRect();
+		const cellRect = headerCellElement.getBoundingClientRect();
+		const lineX = indicator.edge === "left" ? cellRect.left : cellRect.right;
+		dropLineStyle.value = { left: `${Math.round(lineX - rootRect.left - 1)}px` };
+	});
+	return {
+		registerColumnHeaderElement,
+		draggingColumnKey,
+		dropIndicator,
+		dropLineStyle
+	};
+};
+//#endregion
+export { useTableColumnDnd };

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

@@ -0,0 +1,144 @@
+const require_STable_types = require("../STable.types.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@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 = (0, vue.ref)();
+	const resizingColumnKey = (0, vue.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 === require_STable_types.ESTableColumnSticky.LEFT && descriptor.liveStickyOffsetVar) {
+				rootElement.style.setProperty(descriptor.liveStickyOffsetVar, `${stickyLeftOffset}px`);
+				stickyLeftOffset += resolveWidth(descriptor);
+			}
+		});
+		let stickyRightOffset = 0;
+		[...descriptors].reverse().forEach((descriptor) => {
+			if (descriptor.sticky === require_STable_types.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 (!(0, vue.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
+		};
+	};
+	(0, _vueuse_core.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);
+		}
+	});
+	(0, _vueuse_core.useEventListener)("pointerup", (event) => {
+		if (resizeSession.value && event.pointerId === resizeSession.value.pointerId) finishResizeSession(true);
+	});
+	(0, _vueuse_core.useEventListener)("pointercancel", () => {
+		finishResizeSession(false);
+	});
+	(0, _vueuse_core.useEventListener)("blur", () => {
+		finishResizeSession(false);
+	});
+	(0, _vueuse_core.useEventListener)("keydown", (event) => {
+		if (resizeSession.value && event.key === "Escape") {
+			event.preventDefault();
+			finishResizeSession(false);
+		}
+	});
+	const handleResizeHandleKeydown = (event, columnKey) => {
+		if (!(0, vue.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 (!(0, vue.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
+exports.useTableColumnResize = useTableColumnResize;