@soxa-ui/plugins 0.0.0-stage → 0.3.0-beta.1

package/dist/custom/table/column-reorder/column-reorder.plugin.js

@@ -0,0 +1,465 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TCollectionBundlesPlugin } from "../../collection/bundles.plugin.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isMeasurableElement } from "../../../utils/isMeasurableElement.js";
+import { isFocusableElement } from "../../../utils/isFocusableElement.js";
+import { afterTransitions } from "../../../utils/afterTransitions.js";
+import { arrowStep, slideDirection } from "../../slide/direction.js";
+//#region src/custom/table/column-reorder/column-reorder.plugin.ts
+/**
+* Переменная сдвига взятого заголовка — контракт с темой. Значение — px по
+* оси окна от его места: пока колонку несут — от места нажатия, и заголовок
+* идёт за указателем; когда отпустили — до места, куда колонка встанет, и
+* тема довозит его туда переходом. Колонка под ним стоит на месте. Без жеста
+* переменной нет.
+*/
+var DRAG_VARIABLE = "--so-table-column-drag";
+/**
+* Переменная сдвига соседей — контракт с темой: ширина взятого заголовка, px.
+* На неё уступают место колонки между взятой и местом, куда её несут
+* (`data-shift`), — в шапке и, если тема ведёт тело, в теле.
+*
+* Лежит там, где её читают: в `head` — на шапке (`thead`), тело её не читает;
+* в `column` — на корне, от него её наследуют и шапка, и тело. Переменная
+* наследуется, и её запись пересчитывает стиль всем потомкам узла: на корне
+* большой таблицы без окна — каждой ячейке тела. В `none` и без жеста
+* переменной нет.
+*/
+var SHIFT_VARIABLE = "--so-table-column-shift";
+/**
+* Сколько пройти от точки нажатия, чтобы нажатие стало жестом, px: меньше —
+* это нажатие кнопки сортировки, а не перестановка. Порог тот же, что у жеста
+* слоя (`TSwipePlugin`).
+*/
+var START_DISTANCE = 6;
+/**
+* Ось шапки: колонки идут вдоль строки, к её концу. По ней направление письма
+* сводится в сторону, куда колонка уходит дальше от начала (`slideDirection`),
+* как у ручки ширины.
+*/
+var AXIS = {
+	orientation: "horizontal",
+	inverted: false
+};
+/** Ребёнок узла с классом — только прямые дети: во вложенной таблице свои шапки. */
+function childOf(node, className) {
+	return Array.from(node.children).find((child) => child.classList.contains(className)) ?? null;
+}
+/**
+* Сдвиг взятого заголовка до места `place`: его край, дальний от исходного
+* места, встаёт на тот же край заголовка, который там стоит, — там взятый
+* окажется после перестановки, потому что колонки между ними уступают ему
+* ровно его ширину. Направление письма считать не нужно: дальний край — тот,
+* к которому заголовок едет. На своём месте — ноль.
+*/
+function landingOffset(gesture, place) {
+	const own = gesture.boxes[gesture.from];
+	const target = gesture.boxes[place];
+	if (!own || !target) return 0;
+	return target.left > own.left ? target.left + target.width - (own.left + own.width) : target.left - own.left;
+}
+/**
+* TTableColumnReorderPlugin — перестановка колонок пользователем: заголовок
+* тащат указателем или сдвигают Ctrl+Shift+←/→.
+*
+* Операции над DOM — здесь, место колонки — у расширения `columns` коллекции
+* строк: плагин переводит указатель и клавиши в его команды (`dragStart`,
+* `dragOver`, `dragDrop`, `dragEnd`, `dragCancel`, `moveColumn`). Какую
+* колонку можно взять, куда она встанет, какие метки получат колонки и что
+* сообщить приложению, решает расширение. Движок плагин узнаёт от реестра
+* bundles (`engine:bound`).
+*
+* **Заголовки** плагин находит в шапке своей таблицы — прямыми детьми, по
+* классам владельца и колонки: заголовков таблица рисует по одному на
+* показанную колонку и в её порядке, поэтому место заголовка в строке шапки —
+* место колонки среди показанных. Колонку выбора и шапки вложенных таблиц
+* поиск не видит.
+*
+* **Указатель** — на корне: нажатие на заголовке колонки, которую можно
+* взять, становится жестом, когда указатель ушёл по строке дальше порога, —
+* до этого оно остаётся нажатием, и кнопка сортировки сортирует. Нажатие,
+* которое уже взяли (ручка ширины гасит своё), не наше. Жест захватывает
+* указатель на корне: протяжка за таблицей и отпускание где угодно приходят
+* сюда, а `click` отпускания до кнопки сортировки не доходит. Касание, в
+* отличие от мыши, браузер с нажатия сам захватывает за узлом заголовка под
+* пальцем, и начало жеста, перенося захват на корень, этот узел захвата
+* лишает: его `lostpointercapture` всплывает до корня. Отнятым указатель
+* считается, только когда захват потерял сам корень.
+*
+* Взяв колонку, плагин снимает коробки заголовков — относительно корня, один
+* раз — и направление строки, а потом пишет ширину взятого
+* (`--so-table-column-shift`) туда, где её читает тема: в `head` — шапке, в
+* `column` — корню. На неё тема сдвигает соседей, которым расширение
+* поставило `data-shift`. Место, куда колонка встанет, плагин считает по
+* серединам остальных заголовков из снимка, а не из документа: сдвинутые
+* соседи не двигают пороги, и место не прыгает, а прокрутку посреди жеста
+* учитывает коробка корня. Взятый заголовок идёт за указателем — переменная
+* сдвига на нём.
+*
+* В обработчике указателя — сначала чтения, потом записи: снимок,
+* направление и место считаются, пока стиль и раскладка те, что в кадре.
+* Чтение после записи заставило бы браузер пересчитать стиль синхронно,
+* прямо в обработчике, а в кадре — ещё раз. Направление строки — из снимка:
+* стиль на шагах жеста плагин не читает.
+*
+* **Шапка стоит** — таблица в `none` (`dragPreview` расширения на старте
+* жеста): ширину взятого плагин не пишет никуда, а отпускание переставляет
+* колонку сразу, `dragEnd` (отмена — `dragCancel`), без приземления — как
+* до живого жеста. Остальное то же: снимок, место, заголовок за указателем.
+*
+* **Отпустили** — колонка не переставляется сразу: расширение замораживает
+* место (`dragDrop`, `data-landing`), а кадром позже, когда метка уже в
+* разметке, заголовок получает сдвиг до места, где встанет, и тема довозит
+* его переходом. Доиграл переход заголовка — `dragEnd`: перестановка и снятие
+* меток одной операцией, и переменные сняты тут же. К этому времени заголовки
+* и ячейки стоят там, где их поставит новая раскладка, а переходы тема
+* выключает вместе с жестом, — ничего не отъезжает. Без движения переходов
+* нет, и колонка встаёт через кадр. Отнятый указатель (`pointercancel` или
+* захват, потерянный корнем) и Escape — то же приземление на своё место и
+* `dragCancel`. Сколько ждать, решает тема — плагин режима движения не читает.
+*
+* Нажатие и Ctrl+Shift+←/→, пришедшие, пока заголовок приземляется,
+* доводят приземление сразу: следующее действие видит модель и шапку в одном
+* порядке. Заголовок под ними плагин находит до доводки — после неё модель
+* уже в новом порядке, а шапка ещё нет.
+*
+* **Клавиши** — Ctrl+Shift+←/→ на заголовке под фокусом (на кнопке
+* сортировки и поле ручки, а в Grid — на самой ячейке): шаг к началу или к
+* концу строки по вычисленному направлению письма, в RTL ← — к концу.
+* Таблица перерисовывает шапку, и узел под фокусом браузер при переносе мог
+* потерять — плагин возвращает ему фокус кадром позже.
+*/
+var TTableColumnReorderPlugin = class extends TBasePlugin {
+	_owner = null;
+	_root = null;
+	_engine = null;
+	_press = null;
+	_landing = null;
+	_frame = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance() ?? null;
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => this._attach(node));
+		element?.events.on("removed", () => this._detach());
+		ctx.get(TCollectionBundlesPlugin)?.events.on("engine:bound", (engine) => {
+			this._engine = engine;
+		});
+	}
+	destroy() {
+		this._detach();
+		this._owner = null;
+		this._engine = null;
+		super.destroy();
+	}
+	_attach(root) {
+		this._detach();
+		this._root = root;
+		const target = root;
+		target.addEventListener("pointerdown", this._onPointerDown);
+		target.addEventListener("pointermove", this._onPointerMove);
+		target.addEventListener("pointerup", this._onPointerUp);
+		target.addEventListener("pointercancel", this._onPointerCancel);
+		target.addEventListener("lostpointercapture", this._onLostCapture);
+		target.addEventListener("keydown", this._onKeyDown);
+	}
+	_detach() {
+		this._abort();
+		this._cancelFrame();
+		const target = this._root;
+		target?.removeEventListener("pointerdown", this._onPointerDown);
+		target?.removeEventListener("pointermove", this._onPointerMove);
+		target?.removeEventListener("pointerup", this._onPointerUp);
+		target?.removeEventListener("pointercancel", this._onPointerCancel);
+		target?.removeEventListener("lostpointercapture", this._onLostCapture);
+		target?.removeEventListener("keydown", this._onKeyDown);
+		this._root = null;
+	}
+	/** Показанные колонки — по ним разложены заголовки шапки. */
+	get _shown() {
+		return this._engine?.extensions.columns.shownColumns ?? [];
+	}
+	/** Шапка своей таблицы — прямой ребёнок корня: у вложенной таблицы своя. */
+	_head() {
+		const root = this._root;
+		const owner = this._owner;
+		return root && owner ? childOf(root, owner.classes.resolve("__head")) : null;
+	}
+	/**
+	* Заголовки шапки своей таблицы — по одному на показанную колонку, в её
+	* порядке. Шапка ещё не дорисовала смену колонок — заголовков нет: место
+	* в строке не совпало бы с местом колонки.
+	*/
+	_headers() {
+		const owner = this._owner;
+		const shown = this._shown;
+		const base = shown[0]?.classes.base;
+		const head = this._head();
+		if (!owner || !base) return [];
+		const row = head && childOf(head, owner.classes.resolve("__head-row"));
+		const cells = row ? Array.from(row.children).filter((cell) => cell.classList.contains(base)) : [];
+		return cells.length === shown.length ? cells : [];
+	}
+	/** Заголовок, в котором лежит цель события, и его колонка. */
+	_hit(target) {
+		if (!(target instanceof Node)) return void 0;
+		const headers = this._headers();
+		const index = headers.findIndex((cell) => cell.contains(target));
+		return index === -1 ? void 0 : {
+			column: this._shown[index],
+			cell: headers[index]
+		};
+	}
+	/** Коробки заголовков по строке — относительно корня: снимок на старте жеста. */
+	_boxes(root) {
+		const origin = root.getBoundingClientRect().left;
+		return this._headers().map((cell) => {
+			const box = cell.getBoundingClientRect();
+			return {
+				left: box.left - origin,
+				width: box.width
+			};
+		});
+	}
+	/**
+	* Место среди показанных, куда встанет взятая колонка, — сколько остальных
+	* заголовков серединой стоят раньше указателя по строке. Середины — из
+	* снимка на старте жеста, от нынешнего края корня: заголовки, которые тема
+	* сдвинула, порогов не двигают. Свой заголовок не в счёт: он идёт за
+	* указателем. Направление строки — тоже из снимка: стиль здесь не читается.
+	*/
+	_placeAt(x, root, gesture) {
+		const ltr = gesture.direction === "from-left";
+		const origin = root.getBoundingClientRect().left;
+		return gesture.boxes.filter((box, index) => {
+			if (index === gesture.from) return false;
+			const middle = origin + box.left + box.width / 2;
+			return ltr ? x > middle : x < middle;
+		}).length;
+	}
+	_onPointerDown = (event) => {
+		if (this._press) return;
+		const hit = this._hit(event.target);
+		this._finishLanding();
+		if (event.button !== 0 || event.defaultPrevented) return;
+		if (!hit || !hit.column.reorderable || hit.column.disabled) return;
+		this._press = {
+			pointer: event.pointerId,
+			origin: event.clientX,
+			column: hit.column,
+			cell: hit.cell,
+			gesture: null
+		};
+	};
+	_onPointerMove = (event) => {
+		const press = this._press;
+		const root = this._root;
+		const columns = this._engine?.extensions.columns;
+		if (!press || !root || !columns || event.pointerId !== press.pointer) return;
+		const offset = event.clientX - press.origin;
+		if (press.gesture) press.gesture.place = this._placeAt(event.clientX, root, press.gesture);
+		else {
+			if (Math.abs(offset) < START_DISTANCE) return;
+			press.gesture = this._takeGesture(root, press.column, event.clientX);
+			if (!press.gesture) {
+				this._press = null;
+				return;
+			}
+			if ("setPointerCapture" in root) root.setPointerCapture(event.pointerId);
+			root.ownerDocument.getSelection()?.removeAllRanges();
+			root.ownerDocument.addEventListener("keydown", this._onEscape, true);
+		}
+		if (isMeasurableElement(press.cell)) press.cell.style.setProperty(DRAG_VARIABLE, `${offset}px`);
+		columns.dragOver(press.gesture.place);
+	};
+	/**
+	* Колонку взяли. Сначала чтения — коробки заголовков (до сдвига взятого),
+	* направление строки и место под указателем, — потом записи: жест у
+	* расширения и ширина взятого там, где её читает тема (`_shiftHolder`).
+	* Шапка стоит (`still`, таблица в `none`) — ширины нет: соседям сдвигаться
+	* не на что. Заголовков нет или колонку не дали взять — жеста нет.
+	*/
+	_takeGesture(root, column, x) {
+		const columns = this._engine?.extensions.columns;
+		const boxes = this._boxes(root);
+		const from = this._shown.indexOf(column);
+		const own = boxes[from];
+		if (!columns || !own) return null;
+		const direction = slideDirection(AXIS, root);
+		const place = this._placeAt(x, root, {
+			boxes,
+			from,
+			direction
+		});
+		if (!columns.dragStart(column)) return null;
+		const preview = columns.dragPreview;
+		const shiftHolder = this._shiftHolder(root, preview);
+		if (isMeasurableElement(shiftHolder)) shiftHolder.style.setProperty(SHIFT_VARIABLE, `${own.width}px`);
+		return {
+			boxes,
+			from,
+			place,
+			direction,
+			still: preview === "none",
+			shiftHolder
+		};
+	}
+	/**
+	* Узел для ширины взятого — там, где её читает тема: в `head` — шапка, в
+	* `column` — корень, от которого её наследует и тело. На корне большой
+	* таблицы запись пересчитала бы стиль каждой ячейке тела, а в `head` тело
+	* стоит. В `none` соседям сдвигаться не на что — узла нет.
+	*/
+	_shiftHolder(root, preview) {
+		switch (preview) {
+			case "column": return root;
+			case "head": return this._head();
+			default: return null;
+		}
+	}
+	_onPointerUp = (event) => {
+		if (this._press?.pointer !== event.pointerId) return;
+		this._release(true);
+	};
+	/** Браузер отнял указатель — колонка возвращается на место. */
+	_onPointerCancel = (event) => {
+		if (this._press?.pointer !== event.pointerId) return;
+		this._release(false);
+	};
+	/**
+	* Захват потерял корень — указатель у него отняли, и жест кончен, как от
+	* `pointercancel`. Узел под пальцем теряет захват и посреди жеста: касание
+	* браузер сам захватывает за ним, а начало жеста переносит захват на
+	* корень. Это событие всплывает до корня, но жест не кончает — указатель
+	* по-прежнему у корня.
+	*/
+	_onLostCapture = (event) => {
+		if (event.target === this._root) this._onPointerCancel(event);
+	};
+	/** Escape посреди жеста — отмена. Слушается на документе: фокус бывает вне таблицы. */
+	_onEscape = (event) => {
+		if (event.key !== "Escape" || !this._press?.gesture) return;
+		event.preventDefault();
+		this._release(false);
+	};
+	/**
+	* Закончить нажатие: отпустили — заголовок приземляется на место, куда
+	* колонку принесли, отмена — на своё, и соседи возвращаются. Коллекцию
+	* переставит конец приземления.
+	*/
+	_release(commit) {
+		const press = this._press;
+		const gesture = press?.gesture;
+		this._press = null;
+		if (!press || !gesture) return;
+		this._root?.ownerDocument.removeEventListener("keydown", this._onEscape, true);
+		const columns = this._engine?.extensions.columns;
+		const place = commit ? gesture.place : gesture.from;
+		if (gesture.still) {
+			if (commit) columns?.dragEnd();
+			else columns?.dragCancel();
+			this._clearVariables(press.cell, gesture.shiftHolder);
+			return;
+		}
+		if (!commit) columns?.dragOver(gesture.from);
+		columns?.dragDrop();
+		this._land(press.cell, gesture.shiftHolder, landingOffset(gesture, place), commit);
+	}
+	/**
+	* Заголовок — на место: кадром позже, когда `data-landing` уже в разметке
+	* и тема ведёт его переходом, — так же сдвиг отпущенной панели снимает
+	* `TSwipePlugin`. Конец — когда заголовок доиграл свои переходы.
+	*/
+	_land(cell, shiftHolder, offset, commit) {
+		const landing = {
+			cell,
+			shiftHolder,
+			commit,
+			frame: null,
+			wait: null
+		};
+		this._landing = landing;
+		landing.frame = requestAnimationFrame(() => {
+			landing.frame = null;
+			if (isMeasurableElement(cell)) cell.style.setProperty(DRAG_VARIABLE, `${offset}px`);
+			landing.wait = afterTransitions(cell, () => {
+				if (this._landing === landing) this._landed();
+			});
+		});
+	}
+	/** Заголовок встал: колонка — на место, метки и переменные сняты. */
+	_landed() {
+		const landing = this._landing;
+		if (!landing) return;
+		this._landing = null;
+		const columns = this._engine?.extensions.columns;
+		if (landing.commit) columns?.dragEnd();
+		else columns?.dragCancel();
+		this._clearVariables(landing.cell, landing.shiftHolder);
+	}
+	/** Довести приземление сразу — без кадра и без ожидания переходов. */
+	_finishLanding() {
+		const landing = this._landing;
+		if (!landing) return;
+		if (landing.frame !== null) cancelAnimationFrame(landing.frame);
+		landing.wait?.();
+		this._landed();
+	}
+	/**
+	* Корень ушёл: жест и приземление — прочь без перестановки, ожидания и
+	* кадры сняты.
+	*/
+	_abort() {
+		const press = this._press;
+		const landing = this._landing;
+		this._press = null;
+		this._landing = null;
+		if (landing) {
+			if (landing.frame !== null) cancelAnimationFrame(landing.frame);
+			landing.wait?.();
+		}
+		const cell = landing?.cell ?? (press?.gesture ? press.cell : null);
+		if (!cell) return;
+		this._root?.ownerDocument.removeEventListener("keydown", this._onEscape, true);
+		this._engine?.extensions.columns.dragCancel();
+		this._clearVariables(cell, landing?.shiftHolder ?? press?.gesture?.shiftHolder ?? null);
+	}
+	/** Снять сдвиги жеста: у взятого заголовка и ширину взятого — с узла, которому её записали. */
+	_clearVariables(cell, shiftHolder) {
+		if (isMeasurableElement(cell)) cell.style.removeProperty(DRAG_VARIABLE);
+		if (isMeasurableElement(shiftHolder)) shiftHolder.style.removeProperty(SHIFT_VARIABLE);
+	}
+	_onKeyDown = (event) => {
+		if (!event.ctrlKey || !event.shiftKey || event.altKey || event.metaKey) return;
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		const root = this._root;
+		const step = root ? arrowStep(slideDirection(AXIS, root), event.key) : null;
+		if (!root || step === null) return;
+		const hit = this._hit(event.target);
+		this._finishLanding();
+		const columns = this._engine?.extensions.columns;
+		if (!columns || !hit || !hit.column.reorderable || hit.column.disabled) return;
+		event.preventDefault();
+		const from = this._shown.indexOf(hit.column);
+		if (columns.moveColumn(hit.column, from + step)) this._keepFocus(event.target);
+	};
+	/**
+	* Фокус — тому же узлу после перерисовки шапки: переставленный заголовок
+	* браузер переносит в документе, и узел под фокусом при этом его теряет.
+	*/
+	_keepFocus(target) {
+		if (!isFocusableElement(target)) return;
+		this._cancelFrame();
+		this._frame = requestAnimationFrame(() => {
+			this._frame = null;
+			if (target.isConnected && target.ownerDocument.activeElement !== target) target.focus();
+		});
+	}
+	_cancelFrame() {
+		if (this._frame === null) return;
+		cancelAnimationFrame(this._frame);
+		this._frame = null;
+	}
+};
+//#endregion
+export { TTableColumnReorderPlugin };

package/dist/custom/table/column-reorder/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './column-reorder.plugin';

package/dist/custom/table/column-reorder/types.d.ts

@@ -0,0 +1,81 @@
+import type { ITableColumn } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+import type { TSlideDirection } from '../../slide/types';
+/**
+ * Своих событий у плагина нет: что колонку взяли, куда несут и куда она
+ * встала, сообщает расширение `columns` — наборами колонок и `column:move`.
+ * Второй путь к тем же фактам через события плагина разошёлся бы с первым.
+ */
+export type TTableColumnReorderPluginEvents = TPluginEvents;
+/** Нажатие на заголовок, которое может стать жестом перестановки. */
+export type TTableColumnReorderPress = {
+    /** `pointerId` указателя: чужие указатели жест не двигают */
+    pointer: number;
+    /** Точка нажатия по строке — `clientX` */
+    origin: number;
+    /** Колонка, заголовок которой нажали */
+    column: ITableColumn;
+    /** Её заголовок — его плагин сдвигает за указателем */
+    cell: Element;
+    /**
+     * Жест: указатель ушёл дальше порога, и колонку взяли. До этого — `null`:
+     * нажатие остаётся нажатием кнопки сортировки
+     */
+    gesture: TTableColumnReorderGesture | null;
+};
+/**
+ * Взятая колонка: где стояли заголовки, когда её взяли, и куда её несут.
+ * Коробки и направление строки плагин читает у документа один раз, на старте
+ * жеста, до первой записи: дальше место считается по ним, без чтения стиля.
+ */
+export type TTableColumnReorderGesture = {
+    /**
+     * Заголовки показанных колонок на старте жеста, по их порядку. По ним
+     * считаются место и приземление: тема сдвигает соседей, и их коробки
+     * посреди жеста — уже не места колонок
+     */
+    boxes: ReadonlyArray<TTableColumnReorderBox>;
+    /** Место взятой колонки среди показанных */
+    from: number;
+    /** Место, куда колонку несут сейчас; на своём месте — `from` */
+    place: number;
+    /**
+     * Куда растёт строка — вычисленное направление письма корня на старте
+     * жеста (`slideDirection`): `from-left` слева направо, `from-right` в RTL
+     */
+    direction: TSlideDirection;
+    /**
+     * Шапка стоит — таблица в `none`: ширины взятого нет нигде, и колонка
+     * встаёт на отпускании, без приземления
+     */
+    still: boolean;
+    /**
+     * Узел, которому записана ширина взятого (`--so-table-column-shift`), —
+     * там, где её читает тема: шапка в `head`, корень в `column`; в `none` —
+     * `null`. С него ширину и снимают
+     */
+    shiftHolder: Element | null;
+};
+/**
+ * Заголовок на старте жеста — по строке, относительно корня таблицы, px: так
+ * снимок переживает прокрутку посреди жеста.
+ */
+export type TTableColumnReorderBox = {
+    /** Левый край */
+    left: number;
+    /** Ширина */
+    width: number;
+};
+/** Отпущенный заголовок: едет на место, пока не доиграл переход темы. */
+export type TTableColumnReorderLanding = {
+    /** Заголовок взятой колонки */
+    cell: Element;
+    /** Узел с шириной взятого — `shiftHolder` жеста: снять её, когда колонка встала */
+    shiftHolder: Element | null;
+    /** Отпустили на месте — `dragEnd`; отмена — `dragCancel` */
+    commit: boolean;
+    /** Кадр, в котором заголовок получит место: к нему `data-landing` уже в разметке */
+    frame: number | null;
+    /** Отмена ожидания переходов заголовка — после кадра */
+    wait: (() => void) | null;
+};

package/dist/custom/table/column-resize/column-resize.plugin.d.ts

@@ -0,0 +1,96 @@
+import type { ITableColumn } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { ITableColumnResizePluginOptions, TTableColumnResizePluginEvents } from './types';
+/**
+ * TTableColumnResizePlugin — ручка ширины колонки: указатель, клавиши и жест
+ * скринридера.
+ *
+ * Операции над DOM — здесь, ширина — у колонки: плагин переводит указатель и
+ * клавиши в px и зовёт её команды (`grab`, `drag`, `release`, `shift`,
+ * `moveToEdge`). Какой станет ширина, в каких пределах и когда слать `commit`,
+ * решает колонка, и жест она ведёт от своего итога ширины: ширины колонок
+ * раскладывает ядро, и итог — та ширина, что видна. Сторону, куда колонка
+ * растёт, плагин берёт у вычисленного направления письма (`slideDirection`):
+ * ручка стоит у конца строки, и в RTL колонку расширяет движение влево.
+ *
+ * **Указатель** — на полосе ручки: нажатие с её захватом начинает жест,
+ * протяжка двигает край, отпускание или отнятый указатель жест заканчивают.
+ * Своих действий у нажатия нет (`preventDefault`): ни выделения текста, ни
+ * своего фокуса браузера. Слушает корень, а не полосу: полосу разметка рисует
+ * и убирает, а корень — заголовок — живёт всё монтирование, и захват
+ * указателя держится на нём.
+ *
+ * **Отложенный жест** (`resizePreview: 'deferred'` таблицы) ширину до
+ * отпускания не меняет: её будущую границу показывает призрак, которого
+ * рисует тема по `data-resize-ghost` заголовка. Плагин пишет заголовку его
+ * сдвиг от края колонки (`--so-table-column-ghost`, по оси окна, на каждый
+ * шаг, если сменился) и высоту (`--so-table-column-ghost-size`, один раз на
+ * нажатии: от верха заголовка до низа таблицы в окне браузера) и снимает их
+ * в конце жеста. Переменные — на заголовке, а не на корне: запись на корень
+ * пересчитала бы стиль каждой ячейки тела. Escape посреди жеста — отмена в
+ * обоих режимах (`cancel` колонки).
+ *
+ * **Клавиши и жест скринридера** — у поля ручки, как у поля ползунка
+ * (`TSlideKeyboardPlugin`): стрелки — шаг по стороне роста, Shift со стрелкой,
+ * PageUp и PageDown — крупный шаг, Home и End — края хода. Поле браузер сдвинул
+ * бы своим шагом, поэтому клавиши плагин берёт себе. Мобильный скринридер
+ * клавиш не шлёт: свайп двигает поле и сообщает событием `input`, а плагин
+ * переводит направление правки в шаг колонки и возвращает полю её ширину.
+ * Шаги — опции установки.
+ */
+export declare class TTableColumnResizePlugin extends TBasePlugin<ITableColumn, TTableColumnResizePluginEvents> {
+    private _column;
+    private _root;
+    private _gesture;
+    private _step;
+    private _largeStep;
+    install(ctx: IPluginContext, options?: ITableColumnResizePluginOptions): void;
+    destroy(): void;
+    private _attach;
+    private _detach;
+    private readonly _onPointerDown;
+    private readonly _onPointerMove;
+    /**
+     * Призрак — на ширину, которую запишет отложенный жест: сдвиг от края
+     * колонки по оси окна. Ход колонка уже учла, поэтому за границы колонки
+     * призрак не уходит. Тот же сдвиг не пишется: переменная на заголовке
+     * пересчитывает его стиль. В живом жесте призрака нет.
+     */
+    private _moveGhost;
+    /**
+     * Высота призрака: от верха заголовка до низа таблицы, но не ниже окна
+     * браузера — таблица в тысячи строк дала бы линию в сотни тысяч px.
+     */
+    private _ghostSize;
+    /** Снять переменные призрака: жест закончен. */
+    private _clearGhost;
+    private readonly _onPointerUp;
+    /** Закончить жест: отпустили, браузер отнял указатель или корень ушёл. */
+    private _end;
+    /**
+     * Escape посреди жеста — отмена: ширина нажатия, без `commit`. Захват
+     * указателя плагин отпускает сам: протяжка дальше ширину не двигает.
+     */
+    private _cancel;
+    /**
+     * Фокус — полю ручки, как у ползунка: клавиши продолжают с той ширины, на
+     * которой отпустили указатель. Без прокрутки: страница не должна прыгать к
+     * ручке, которую пользователь и так держит.
+     *
+     * И без кольца (`focusVisible: false`). Фокус ставит скрипт, а видимость
+     * такого фокуса браузер берёт у прошлого: пришёл тот не от мыши — свежая
+     * страница, Tab, — и нажатие мышью зажгло бы линию ручки, которую держит
+     * только фокус с клавиатуры.
+     */
+    private _focus;
+    private readonly _onKeyDown;
+    /** Что клавиша делает с шириной; не наша клавиша — `null`, её обработает браузер. */
+    private _actionOf;
+    /**
+     * Правка поля не клавишей — жестом скринридера. Колонка делает шаг в ту же
+     * сторону, а поле показывает её ширину: и когда шаг сделан, и когда упёрся в
+     * край хода.
+     */
+    private readonly _onInput;
+}