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

package/dist/custom/date-input/keyboard/keyboard.plugin.js

@@ -0,0 +1,154 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isFocusableElement } from "../../../utils/isFocusableElement.js";
+import { collapseRowSelection, rowOf, rowSelection, segmentElementOf, segmentOf, segmentsOf, selectRow, touchedSegments } from "../parts.js";
+//#region src/custom/date-input/keyboard/keyboard.plugin.ts
+/**
+* Клавиши части под фокусом — команды ядра. ←/→ идут к соседней части по
+* направлению ряда, а не страницы: у `ar-EG` дата пишется справа налево, и →
+* ведёт к части, что стоит правее, — к предыдущей по формату.
+*/
+var COMMANDS = {
+	ArrowUp: (owner) => owner.shiftSegment(1),
+	ArrowDown: (owner) => owner.shiftSegment(-1),
+	Home: (owner) => owner.moveSegmentToEdge("start"),
+	End: (owner) => owner.moveSegmentToEdge("end"),
+	ArrowLeft: (owner) => owner.shiftFocus(owner.segmentsDirection === "rtl" ? 1 : -1),
+	ArrowRight: (owner) => owner.shiftFocus(owner.segmentsDirection === "rtl" ? -1 : 1),
+	Backspace: (owner) => owner.eraseDigit(),
+	Delete: (owner) => owner.clearSegment(),
+	" ": () => {}
+};
+/** Клавиши, которые стирают выделенные части целиком. */
+var ERASE_KEYS = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+/**
+* TDateInputKeyboardPlugin — клавиатура поля даты и DOM-фокус, который идёт
+* за частью под фокусом ядра.
+*
+* Части нередактируемые: браузер текст сам не правит и `beforeinput` не шлёт,
+* а всё, что делает клавиша, — команда ядра. Клавиши берутся только с самой
+* части: у содержимого слотов (кнопки календаря) свои клавиши. Обработанная
+* клавиша гасится `preventDefault`.
+*
+* - **Цифра** — набор в часть (`typeKey`); цифры ASCII, локали и
+*   полноширинные различает ядро. Во время композиции IME клавиша не наша.
+* - **Буква** у периода суток — тот же `typeKey`: какой период она выбирает,
+*   решает ядро по именам периодов локали.
+* - **↑/↓, Home/End** — число части (у периода суток — другой период),
+*   **Backspace** — стереть цифру (с пустой части — фокус на предыдущую),
+*   **Delete** — очистить часть, **←/→** — соседняя часть по направлению ряда.
+* - **Ctrl/Cmd+A** — выделение браузера на весь ряд, по `code`, а не `key`:
+*   на русской раскладке `key` — «ф». Фокус остаётся на части, копирует и
+*   вырезает выделенное плагин буфера обмена.
+* - **Выделение задело части** — Delete и Backspace их очищают, цифра
+*   очищает и набирается в первую (`replaceSegments`). Выделение браузер у
+*   нередактируемого текста сам не снимает, поэтому клавишу, которую поле
+*   обработало, плагин снимает с ним вместе.
+*
+* **Фокус.** `focusin` на части сообщает ядру часть, `focusout` из ряда —
+* что фокуса в поле нет. Обратно — `change:focusedSegment`: ядро перевело
+* фокус (набрали число до конца, Backspace на пустой части), и DOM-фокус идёт
+* за ним, если стоит в ряду. Своих `tabindex` у плагина нет: остановка Tab у
+* каждой части — набор, который отдаёт ядро.
+*/
+var TDateInputKeyboardPlugin = class extends TBasePlugin {
+	_owner = null;
+	_root = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance() ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => this._bind(element));
+		elementPlugin?.events.on("removed", () => this._bind(null));
+		this._listenTo(this._owner?.events, "change:focusedSegment", ({ newValue }) => this._onFocusedSegment(newValue));
+	}
+	destroy() {
+		this._bind(null);
+		this._owner = null;
+		super.destroy();
+	}
+	/** Корень сменился — слушатели переезжают. */
+	_bind(root) {
+		const previous = this._root;
+		previous?.removeEventListener("keydown", this._onKeyDown);
+		previous?.removeEventListener("focusin", this._onFocusIn);
+		previous?.removeEventListener("focusout", this._onFocusOut);
+		this._root = root;
+		const target = root;
+		target?.addEventListener("keydown", this._onKeyDown);
+		target?.addEventListener("focusin", this._onFocusIn);
+		target?.addEventListener("focusout", this._onFocusOut);
+	}
+	_onKeyDown = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || event.defaultPrevented || event.isComposing) return;
+		const row = rowOf(owner, root);
+		if (!row || !segmentOf(owner, root, event.target)) return;
+		if ((event.ctrlKey || event.metaKey) && !event.altKey && event.code === "KeyA") {
+			event.preventDefault();
+			selectRow(row);
+			return;
+		}
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (this._handle(owner, root, row, event.key)) {
+			event.preventDefault();
+			collapseRowSelection(row);
+		}
+	};
+	/** Исполнить клавишу; клавиша не поля — `false`. */
+	_handle(owner, root, row, key) {
+		const range = rowSelection(row);
+		const touched = range ? touchedSegments(segmentsOf(owner, root), range) : [];
+		if (touched.length > 0) {
+			if (ERASE_KEYS.has(key)) {
+				owner.clearSegments(touched);
+				return true;
+			}
+			if (isCharacter(key)) return owner.replaceSegments(touched, key);
+		}
+		const command = COMMANDS[key];
+		if (command) {
+			command(owner);
+			return true;
+		}
+		return isCharacter(key) && owner.typeKey(key);
+	}
+	/** Фокус пришёл на часть — ядро ведёт набор в неё; не на часть — фокуса в поле нет. */
+	_onFocusIn = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root) return;
+		owner.focusSegment(segmentOf(owner, root, event.target)?.part);
+	};
+	/** Фокус ушёл не на часть — из поля. На соседнюю часть его приведёт `focusin`. */
+	_onFocusOut = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || segmentOf(owner, root, event.relatedTarget)) return;
+		owner.focusSegment(void 0);
+	};
+	/**
+	* Ядро перевело фокус на другую часть — DOM-фокус за ним, если он в ряду:
+	* фокус, который пользователь увёл со страницы, поле не забирает.
+	*/
+	_onFocusedSegment = (part) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || part === void 0) return;
+		const current = segmentOf(owner, root, root.ownerDocument.activeElement);
+		if (!current || current.part === part) return;
+		const element = segmentElementOf(owner, root, part);
+		if (isFocusableElement(element)) element.focus();
+	};
+};
+/**
+* Знак, а не имя клавиши (`Enter`, `Tab`): набор берёт один знак. Цифры
+* некоторых систем счисления — за пределами BMP, и знак у них из двух единиц
+* UTF-16.
+*/
+function isCharacter(key) {
+	return [...key].length === 1;
+}
+//#endregion
+export { TDateInputKeyboardPlugin };

package/dist/custom/date-input/keyboard/types.d.ts

@@ -0,0 +1,9 @@
+import type { IDateInput } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+/**
+ * Своих событий у плагина нет: результат клавиши виден в ядре — в частях,
+ * значении и части под фокусом.
+ */
+export type TDateInputKeyboardPluginEvents = TPluginEvents;
+/** Клавиша части — команда ядра для части под фокусом. */
+export type TDateInputKeyCommand = (owner: IDateInput) => void;

package/dist/custom/date-input/parts.d.ts

@@ -0,0 +1,49 @@
+import type { IDateInput, TDateFieldPart, TDateInputPart } from '@soxa-ui/core';
+import type { IPluginContext } from '../../base';
+import type { TDateInputSegmentNode } from './types';
+/**
+ * Все типы частей поля — в формате и нет: смена вида, точности времени и
+ * локали меняет их состав.
+ */
+export declare function allPartTypes(): TDateFieldPart[];
+/**
+ * Части формата поля по порядку — выход ядра без разделителей. Не узлы, а
+ * значения: по ним плагин пишет в наборы частей и тогда, когда разметки ещё
+ * нет.
+ */
+export declare function formatPartsOf(owner: IDateInput): TDateInputPart[];
+/** Ряд частей поля — `__segments` в корне. */
+export declare function rowOf(owner: IDateInput, root: Element): Element | null;
+/** Часть поля, в узле которой лежит `target`; не часть этого поля — `undefined`. */
+export declare function segmentOf(owner: IDateInput, root: Element, target: EventTarget | null): TDateInputSegmentNode | undefined;
+/** Части ряда по порядку документа. */
+export declare function segmentsOf(owner: IDateInput, root: Element): TDateInputSegmentNode[];
+/**
+ * Первая часть поля — узел фокуса DateInput (`focusTarget` плагина действия):
+ * запись `focused = true` ставит фокус на неё, а не на коробку корня и не на
+ * кнопку в слоте `leading`. Первая — по порядку документа: туда же ведёт Tab.
+ * `null` — инстанса или частей в корне нет.
+ */
+export declare function firstSegmentOf(root: Element, ctx: IPluginContext): Element | null;
+/** Узел части по её типу. */
+export declare function segmentElementOf(owner: IDateInput, root: Element, part: TDateFieldPart): Element | undefined;
+/**
+ * Выделение документа в ряду: непустой диапазон, оба конца которого в ряду.
+ * Выделение шире ряда или вне его — не поля: `null`.
+ */
+export declare function rowSelection(row: Element): Range | null;
+/**
+ * Части, у которых выделение задело хотя бы один знак. Край выделения ровно на
+ * границе части её не задевает: протяжка до начала года год не выделила.
+ */
+export declare function touchedSegments(nodes: readonly TDateInputSegmentNode[], range: Range): TDateFieldPart[];
+/**
+ * Текст диапазона — текст его узлов подряд. Не `Selection#toString()`: тот
+ * собирает текст по раскладке, и Chrome ставит перевод строки между
+ * флекс-коробками частей (`12\n.\n05`), а Firefox — нет.
+ */
+export declare function rangeText(range: Range): string;
+/** Выделить весь ряд: диапазон по его содержимому. */
+export declare function selectRow(row: Element): void;
+/** Снять выделение документа, если оно в ряду: правка его уже исполнила. */
+export declare function collapseRowSelection(row: Element): void;

package/dist/custom/date-input/parts.js

@@ -0,0 +1,127 @@
+//#region src/custom/date-input/parts.ts
+/**
+* Узлы поля даты — один поиск на все плагины поля: клавиши, указатель, буфер
+* обмена и сенсорный ввод находят части, ряд и выделение одинаково.
+*
+* Части находят по классам владельца (`classes.resolve`), а не строкой в
+* плагине, и только внутри его корня; тип части — из её `data-type`, который
+* разметке отдало ядро.
+*/
+/**
+* Типы частей — словарём по типу, а не списком: появится у ядра новая часть,
+* и словарь без неё не скомпилируется.
+*/
+var PARTS = {
+	day: true,
+	month: true,
+	year: true,
+	hour: true,
+	minute: true,
+	second: true,
+	dayPeriod: true
+};
+/**
+* Все типы частей поля — в формате и нет: смена вида, точности времени и
+* локали меняет их состав.
+*/
+function allPartTypes() {
+	return Object.keys(PARTS).filter(isFieldPart);
+}
+/**
+* Части формата поля по порядку — выход ядра без разделителей. Не узлы, а
+* значения: по ним плагин пишет в наборы частей и тогда, когда разметки ещё
+* нет.
+*/
+function formatPartsOf(owner) {
+	return owner.segments.filter((segment) => segment.type !== "literal");
+}
+/** Ряд частей поля — `__segments` в корне. */
+function rowOf(owner, root) {
+	return root.querySelector(owner.classes.resolve("__segments", { point: true }));
+}
+/** Часть поля, в узле которой лежит `target`; не часть этого поля — `undefined`. */
+function segmentOf(owner, root, target) {
+	if (!(target instanceof Element)) return void 0;
+	const element = target.closest(owner.classes.resolve("__segment", { point: true }));
+	const part = element?.getAttribute("data-type");
+	if (!element || !root.contains(element) || !isFieldPart(part)) return void 0;
+	return {
+		part,
+		element
+	};
+}
+/** Части ряда по порядку документа. */
+function segmentsOf(owner, root) {
+	return [...root.querySelectorAll(owner.classes.resolve("__segment", { point: true }))].flatMap((element) => {
+		const part = element.getAttribute("data-type");
+		return isFieldPart(part) ? [{
+			part,
+			element
+		}] : [];
+	});
+}
+/**
+* Первая часть поля — узел фокуса DateInput (`focusTarget` плагина действия):
+* запись `focused = true` ставит фокус на неё, а не на коробку корня и не на
+* кнопку в слоте `leading`. Первая — по порядку документа: туда же ведёт Tab.
+* `null` — инстанса или частей в корне нет.
+*/
+function firstSegmentOf(root, ctx) {
+	const owner = ctx.getInstance();
+	return owner ? segmentsOf(owner, root)[0]?.element ?? null : null;
+}
+/** Узел части по её типу. */
+function segmentElementOf(owner, root, part) {
+	return segmentsOf(owner, root).find((node) => node.part === part)?.element;
+}
+/**
+* Выделение документа в ряду: непустой диапазон, оба конца которого в ряду.
+* Выделение шире ряда или вне его — не поля: `null`.
+*/
+function rowSelection(row) {
+	const selection = row.ownerDocument.getSelection();
+	if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
+	const range = selection.getRangeAt(0);
+	return row.contains(range.startContainer) && row.contains(range.endContainer) ? range : null;
+}
+/**
+* Части, у которых выделение задело хотя бы один знак. Край выделения ровно на
+* границе части её не задевает: протяжка до начала года год не выделила.
+*/
+function touchedSegments(nodes, range) {
+	return nodes.filter(({ element }) => touches(range, element)).map(({ part }) => part);
+}
+/**
+* Текст диапазона — текст его узлов подряд. Не `Selection#toString()`: тот
+* собирает текст по раскладке, и Chrome ставит перевод строки между
+* флекс-коробками частей (`12\n.\n05`), а Firefox — нет.
+*/
+function rangeText(range) {
+	return range.cloneContents().textContent ?? "";
+}
+/** Выделить весь ряд: диапазон по его содержимому. */
+function selectRow(row) {
+	const selection = row.ownerDocument.getSelection();
+	const range = row.ownerDocument.createRange();
+	range.selectNodeContents(row);
+	selection?.removeAllRanges();
+	selection?.addRange(range);
+}
+/** Снять выделение документа, если оно в ряду: правка его уже исполнила. */
+function collapseRowSelection(row) {
+	if (rowSelection(row)) row.ownerDocument.getSelection()?.removeAllRanges();
+}
+/** Тип части из `data-type` узла. */
+function isFieldPart(value) {
+	return typeof value === "string" && Object.hasOwn(PARTS, value);
+}
+/** Задело ли выделение знаки узла: пересечение диапазонов не пусто. */
+function touches(range, element) {
+	const overlap = element.ownerDocument.createRange();
+	overlap.selectNodeContents(element);
+	if (range.compareBoundaryPoints(Range.START_TO_START, overlap) > 0) overlap.setStart(range.startContainer, range.startOffset);
+	if (range.compareBoundaryPoints(Range.END_TO_END, overlap) < 0) overlap.setEnd(range.endContainer, range.endOffset);
+	return overlap.toString() !== "";
+}
+//#endregion
+export { allPartTypes, collapseRowSelection, firstSegmentOf, formatPartsOf, rangeText, rowOf, rowSelection, segmentElementOf, segmentOf, segmentsOf, selectRow, touchedSegments };

package/dist/custom/date-input/pointer/index.d.ts

@@ -0,0 +1,2 @@
+export { TDateInputPointerPlugin } from './pointer.plugin';
+export type { TDateInputPointerPluginEvents } from './types';

package/dist/custom/date-input/pointer/pointer.plugin.d.ts

@@ -0,0 +1,51 @@
+import type { IDateInput } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TDateInputPointerPluginEvents } from './types';
+/**
+ * TDateInputPointerPlugin — указатель поля даты: нажатие мимо частей и
+ * контекстное меню.
+ *
+ * **Нажатие мимо частей** — по разделителю или пустому месту поля — отдаёт
+ * фокус ближайшей по горизонтали части: курсор текста обещает это по всему
+ * полю. Только при свёрнутом выделении: протяжку мышью, которая закончилась
+ * мимо частей, нажатие не снимает. `mousedown` плагин не гасит: протяжка
+ * начинается и с пустого места поля.
+ *
+ * **Контекстное меню.** «Вставить» и «Вырезать» браузер показывает только над
+ * редактируемым узлом, а части нередактируемые — так дату выделяет протяжка.
+ * Поэтому на `contextmenu` в ряду ряд на время становится `contenteditable`;
+ * всё, что браузер в нём правил бы сам (`beforeinput`), гасится, а удаление
+ * из меню очищает части, которые задело выделение. Обратно ряд возвращается
+ * после `paste` и `cut` — их исполняет плагин буфера обмена, — на нажатие,
+ * клавишу и уход фокуса. Выделение при переключении остаётся на месте. У поля
+ * только для чтения и выключенного править нечего, и меню остаётся меню
+ * выделения: «Копировать».
+ */
+export declare class TDateInputPointerPlugin extends TBasePlugin<IDateInput, TDateInputPointerPluginEvents> {
+    private _owner;
+    private _root;
+    /** Ряд, который стал редактируемым ради контекстного меню. */
+    private _editableRow;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    /** Корень сменился — слушатели переезжают, ряд перестаёт быть редактируемым. */
+    private _bind;
+    /** Нажатие мимо частей и слотов — фокус ближайшей части. */
+    private readonly _onClick;
+    /**
+     * Меню над рядом — ряд на время редактируемый: в меню появятся «Вставить» и
+     * «Вырезать». Над частью, которую касание уже сделало редактируемой, меню и
+     * так меню правки — ряд не трогается: иначе его правку гасил бы этот плагин,
+     * и ввод экранной клавиатуры после двойного касания или долгого нажатия
+     * пропадал бы до следующего нажатия.
+     */
+    private readonly _onContextMenu;
+    /**
+     * Правка браузера в редактируемом ряду гасится: текст частей пишет ядро.
+     * Удаление из меню очищает задетые части.
+     */
+    private readonly _onBeforeInput;
+    /** Ряд снова нередактируемый: протяжка выделяет дату целиком. */
+    private readonly _restore;
+}

package/dist/custom/date-input/pointer/pointer.plugin.js

@@ -0,0 +1,141 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isFocusableElement } from "../../../utils/isFocusableElement.js";
+import { collapseRowSelection, rowOf, rowSelection, segmentOf, segmentsOf, touchedSegments } from "../parts.js";
+//#region src/custom/date-input/pointer/pointer.plugin.ts
+/** Обёртки слотов — содержимое потребителя: его нажатия поле не трогает. */
+var SLOTS = ["__leading", "__trailing"];
+/**
+* TDateInputPointerPlugin — указатель поля даты: нажатие мимо частей и
+* контекстное меню.
+*
+* **Нажатие мимо частей** — по разделителю или пустому месту поля — отдаёт
+* фокус ближайшей по горизонтали части: курсор текста обещает это по всему
+* полю. Только при свёрнутом выделении: протяжку мышью, которая закончилась
+* мимо частей, нажатие не снимает. `mousedown` плагин не гасит: протяжка
+* начинается и с пустого места поля.
+*
+* **Контекстное меню.** «Вставить» и «Вырезать» браузер показывает только над
+* редактируемым узлом, а части нередактируемые — так дату выделяет протяжка.
+* Поэтому на `contextmenu` в ряду ряд на время становится `contenteditable`;
+* всё, что браузер в нём правил бы сам (`beforeinput`), гасится, а удаление
+* из меню очищает части, которые задело выделение. Обратно ряд возвращается
+* после `paste` и `cut` — их исполняет плагин буфера обмена, — на нажатие,
+* клавишу и уход фокуса. Выделение при переключении остаётся на месте. У поля
+* только для чтения и выключенного править нечего, и меню остаётся меню
+* выделения: «Копировать».
+*/
+var TDateInputPointerPlugin = class extends TBasePlugin {
+	_owner = null;
+	_root = null;
+	/** Ряд, который стал редактируемым ради контекстного меню. */
+	_editableRow = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance() ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => this._bind(element));
+		elementPlugin?.events.on("removed", () => this._bind(null));
+	}
+	destroy() {
+		this._bind(null);
+		this._owner = null;
+		super.destroy();
+	}
+	/** Корень сменился — слушатели переезжают, ряд перестаёт быть редактируемым. */
+	_bind(root) {
+		const previous = this._root;
+		previous?.removeEventListener("click", this._onClick);
+		previous?.removeEventListener("contextmenu", this._onContextMenu);
+		previous?.removeEventListener("beforeinput", this._onBeforeInput);
+		previous?.removeEventListener("pointerdown", this._restore);
+		previous?.removeEventListener("keydown", this._restore);
+		previous?.removeEventListener("focusout", this._restore);
+		previous?.removeEventListener("paste", this._restore);
+		previous?.removeEventListener("cut", this._restore);
+		this._restore();
+		this._root = root;
+		const target = root;
+		target?.addEventListener("click", this._onClick);
+		target?.addEventListener("contextmenu", this._onContextMenu);
+		target?.addEventListener("beforeinput", this._onBeforeInput);
+		target?.addEventListener("pointerdown", this._restore);
+		target?.addEventListener("keydown", this._restore);
+		target?.addEventListener("focusout", this._restore);
+		target?.addEventListener("paste", this._restore);
+		target?.addEventListener("cut", this._restore);
+	}
+	/** Нажатие мимо частей и слотов — фокус ближайшей части. */
+	_onClick = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || owner.disabled || event.defaultPrevented) return;
+		if (segmentOf(owner, root, event.target) || inSlot(owner, root, event.target)) return;
+		const selection = root.ownerDocument.getSelection();
+		if (selection && !selection.isCollapsed) return;
+		const nearest = nearestSegment(segmentsOf(owner, root), event.clientX);
+		if (isFocusableElement(nearest)) nearest.focus();
+	};
+	/**
+	* Меню над рядом — ряд на время редактируемый: в меню появятся «Вставить» и
+	* «Вырезать». Над частью, которую касание уже сделало редактируемой, меню и
+	* так меню правки — ряд не трогается: иначе его правку гасил бы этот плагин,
+	* и ввод экранной клавиатуры после двойного касания или долгого нажатия
+	* пропадал бы до следующего нажатия.
+	*/
+	_onContextMenu = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		const row = owner && root ? rowOf(owner, root) : null;
+		if (!owner || !row || !(event.target instanceof Node) || !row.contains(event.target)) return;
+		if (owner.disabled || owner.readonly) return;
+		if (event.target instanceof HTMLElement && event.target.isContentEditable) return;
+		row.setAttribute("contenteditable", "true");
+		this._editableRow = row;
+	};
+	/**
+	* Правка браузера в редактируемом ряду гасится: текст частей пишет ядро.
+	* Удаление из меню очищает задетые части.
+	*/
+	_onBeforeInput = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		const row = this._editableRow;
+		if (!owner || !root || !row) return;
+		event.preventDefault();
+		if (!event.inputType.startsWith("delete")) return;
+		const range = rowSelection(row);
+		if (range) owner.clearSegments(touchedSegments(segmentsOf(owner, root), range));
+		collapseRowSelection(row);
+		this._restore();
+	};
+	/** Ряд снова нередактируемый: протяжка выделяет дату целиком. */
+	_restore = () => {
+		this._editableRow?.removeAttribute("contenteditable");
+		this._editableRow = null;
+	};
+};
+/** Лежит ли `target` в обёртке слота поля. */
+function inSlot(owner, root, target) {
+	if (!(target instanceof Element)) return false;
+	return SLOTS.some((slot) => {
+		const wrapper = target.closest(owner.classes.resolve(slot, { point: true }));
+		return wrapper !== null && root.contains(wrapper);
+	});
+}
+/** Часть, ближайшая к точке по горизонтали; над частью расстояние — ноль. */
+function nearestSegment(nodes, x) {
+	let nearest;
+	let distance = Number.POSITIVE_INFINITY;
+	for (const { element } of nodes) {
+		const { left, right } = element.getBoundingClientRect();
+		const away = x < left ? left - x : Math.max(x - right, 0);
+		if (away < distance) {
+			nearest = element;
+			distance = away;
+		}
+	}
+	return nearest;
+}
+//#endregion
+export { TDateInputPointerPlugin };

package/dist/custom/date-input/pointer/types.d.ts

@@ -0,0 +1,6 @@
+import type { TPluginEvents } from '../../../base';
+/**
+ * Своих событий у плагина нет: нажатие видно по фокусу части, а правка из
+ * контекстного меню — в частях ядра.
+ */
+export type TDateInputPointerPluginEvents = TPluginEvents;

package/dist/custom/date-input/touch/index.d.ts

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

package/dist/custom/date-input/touch/touch.plugin.d.ts

@@ -0,0 +1,100 @@
+import type { IDateInput } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TDateInputTouchPluginEvents } from './types';
+/**
+ * TDateInputTouchPlugin — сенсорный режим поля даты: на касание части
+ * редактируемые, и дату вводят с экранной клавиатуры.
+ *
+ * На компьютере части нередактируемые — так дату целиком выделяет протяжка
+ * мышью. Но экранная клавиатура открывается только над редактируемым узлом.
+ * Поэтому **режим выбирает нажатие**, а не устройство: палец и перо
+ * (`pointerType`) делают части редактируемыми (`contenteditable`; клавиатура
+ * цифр, у периода суток — букв: его набирают буквой), мышь — снова нет. Смена
+ * вида поля, точности времени и локали меняет состав частей, и наборы
+ * пересчитываются: новым частям — те же атрибуты. На ноутбуке с сенсорным экраном
+ * мышь сохраняет протяжку, а палец получает клавиатуру. Режим меняется на
+ * `pointerdown`, раньше фокуса: фокус браузер переводит после конца касания, а
+ * нажатие мышью начинает протяжку уже по нередактируемым частям. Атрибуты
+ * идут значениями в наборы частей (`segmentSets`), разметку рисует фреймворк;
+ * сервер рисует части нередактируемыми.
+ *
+ * **Текст части пишет ядро.** Правка браузера (`beforeinput`) гасится и
+ * становится командой: вставка — знаки по одному, как клавиши (`typeKey`;
+ * по выделению — вместо задетых частей), стирание назад — цифра
+ * (`eraseDigit`), другое удаление — часть или задетые выделением части. Чего
+ * отменить нельзя — композиции (IME, клавиатуры Android) — браузер пишет в
+ * часть сам; по `compositionend` набранное уходит ядру, а часть получает текст
+ * ядра обратно. Так же — после правки, которую браузер всё же сделал мимо
+ * отмены (SwiftKey стирает и после погашенного Backspace).
+ *
+ * **Сенсорные устройства Apple.** VoiceOver на iOS счётчик (`spinbutton`) не
+ * фокусирует — роль частей там `textbox`; а групп не объявляет — имя поля
+ * входит в имя каждой части: ссылкой на себя и на подпись поля
+ * (`aria-labelledby`), у поля, названного строкой, — строкой («день, Дата
+ * рождения»). Устройство плагин узнаёт после `ready`, у документа корня, и
+ * сервер рисует счётчики.
+ *
+ * Клавиши, которые экранная клавиатура шлёт как клавиши (`keydown` с цифрой),
+ * исполняет плагин клавиатуры, и правки за ними браузер не делает: клавиша
+ * погашена.
+ */
+export declare class TDateInputTouchPlugin extends TBasePlugin<IDateInput, TDateInputTouchPluginEvents> {
+    private _owner;
+    private _root;
+    /** Последнее нажатие на поле — пальцем или пером: части редактируемые */
+    private _touch;
+    /** Сенсорное устройство Apple: роль частей — `textbox`, имя поля — в имени части */
+    private _appleTouch;
+    /** Идёт композиция: её текст в части вернёт `compositionend` */
+    private _composing;
+    install(ctx: IPluginContext): void;
+    /**
+     * Записанное в наборы частей уходит вместе с плагином: наборы — у поля, а
+     * поле переживает монтирование.
+     */
+    destroy(): void;
+    /** Части редактируемые: нажатие пальцем или пером, и поле можно править. */
+    private get _editable();
+    /** Корень сменился — слушатели переезжают; устройство — у документа корня. */
+    private _bind;
+    /** Нажатие на поле выбирает режим: палец и перо — части редактируемые, мышь — нет. */
+    private readonly _onPointerDown;
+    /**
+     * Правка браузера в части гасится и становится командой ядра. Правка
+     * приходит только туда, где можно править, — в части, которые плагин сделал
+     * редактируемыми.
+     */
+    private readonly _onBeforeInput;
+    /**
+     * Правка части — команда ядра. Вставка — знаки по одному, как клавиши, а
+     * если выделение задело части — вместо них. Удаление назад — цифра (с пустой
+     * части ядро уводит фокус на предыдущую), другое удаление — часть; задетые
+     * выделением части — целиком.
+     */
+    private _edit;
+    /**
+     * Браузер поправил текст части мимо отмены — клавиатура не уважает
+     * погашенный `beforeinput`, — и часть получает текст ядра обратно. Пока
+     * идёт композиция, её текст часть показывает: его вернёт `compositionend`.
+     */
+    private readonly _onInput;
+    private readonly _onCompositionStart;
+    /**
+     * Композиция кончилась: набранное — в ядро знаками, как клавиши, а часть
+     * получает текст ядра обратно. Текст композиции браузер писал в часть мимо
+     * фреймворка, и тот его не перерисует, если текст ядра не сменился: набрали
+     * не цифры.
+     */
+    private readonly _onCompositionEnd;
+    /** Атрибуты редактируемости — в наборы частей: части редактируемы на касание. */
+    private readonly _syncEditable;
+    /**
+     * Роль и имя частей на сенсорных устройствах Apple: `textbox` и имя поля в
+     * имени части. Подпись поля по `id` — ссылкой: часть называет себя (её
+     * `aria-label` — имя части) и подпись. Имя поля строкой — строкой, после
+     * имени части. Без своего `id` части сослаться на себя нельзя, и имя
+     * остаётся её собственным. На остальных устройствах набор пуст.
+     */
+    private readonly _syncAppleTouch;
+}