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

package/dist/custom/menu/popover-item-keyboard/keyboard.plugin.js

@@ -0,0 +1,79 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { rowIn } from "../../list/row.js";
+import { TMenuPopoverItemFocusPlugin } from "../popover-item-focus/focus.plugin.js";
+//#region src/custom/menu/popover-item-keyboard/keyboard.plugin.ts
+/**
+* TMenuPopoverItemKeyboardPlugin — клавиатура строки пункта меню с панелью
+* (`Menu.PopoverItem`, APG Menu: пункт со всплывающим окном).
+*
+* Стрелка к концу строки (в RTL ←) открывает панель, как у подменю, и
+* гасится: меню над пунктом погашенную клавишу не трогает
+* (`TMenuNavigationPlugin`). Фокус в панель уводит модель фокуса пункта — и
+* после клавиши, и после клика. Панель уже открыта — её открыл указатель, и
+* фокус остался на строке, — та же стрелка ведёт фокус в неё: модель фокуса
+* пункта, взятая при установке (`focusPanel`). Так в открытую наведением
+* панель с клавиатуры ведёт не только Tab, но и стрелка, как в подменю.
+* Enter и пробел своих правил не требуют: строка — `Button` на `div`, и клик
+* из них делает её `TActionPlugin`, а клик строки открывает панель —
+* открытую не закрывает и фокус не двигает.
+*
+* Строка лежит в корне пункта, поэтому клавиши слушает корень, — и только со
+* строки: клавиши содержимого слотов строки им и принадлежат. Сторона строки
+* — по направлению письма меню, в котором стоит пункт.
+*
+* Выключенный пункт панель не открывает. Подсвеченным он не бывает, и фокуса
+* на его строке с клавиатуры нет, — проверка на случай фокуса, который
+* поставили кликом.
+*/
+var TMenuPopoverItemKeyboardPlugin = class extends TBasePlugin {
+	_item = null;
+	/** Модель фокуса пункта: ведёт фокус в уже открытую панель. */
+	_focus = null;
+	/** Корень пункта — узел пункта в меню; строка лежит в нём. */
+	_root = null;
+	/** Тот же корень — под слушатель клавиш. */
+	_target = null;
+	install(ctx, options) {
+		super.install(ctx, options);
+		this._item = ctx.getInstance() ?? null;
+		this._focus = ctx.get(TMenuPopoverItemFocusPlugin) ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => this._listen(element));
+		elementPlugin?.events.on("removed", () => this._unlisten());
+	}
+	destroy() {
+		this._unlisten();
+		this._item = null;
+		this._focus = null;
+		super.destroy();
+	}
+	_listen(element) {
+		this._unlisten();
+		const target = element;
+		this._root = element;
+		this._target = target;
+		target.addEventListener("keydown", this._onKeyDown);
+	}
+	_unlisten() {
+		this._target?.removeEventListener("keydown", this._onKeyDown);
+		this._target = null;
+		this._root = null;
+	}
+	/** Стрелка к концу строки на строке пункта — открыть панель, а открытую — фокус в неё. */
+	_onKeyDown = (e) => {
+		const root = this._root;
+		const item = this._item;
+		if (!root || !item || item.disabled || e.defaultPrevented) return;
+		if (e.target !== rowIn(root) || e.key !== this._toEnd(root)) return;
+		e.preventDefault();
+		if (item.open) this._focus?.focusPanel();
+		else item.open = true;
+	};
+	/** Стрелка к концу строки — по направлению строки пункта. */
+	_toEnd(root) {
+		return getComputedStyle(root).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	}
+};
+//#endregion
+export { TMenuPopoverItemKeyboardPlugin };

package/dist/custom/menu/popover-item-keyboard/types.d.ts

@@ -0,0 +1,2 @@
+import type { TPluginEvents } from '../../../base';
+export type TMenuPopoverItemKeyboardPluginEvents = TPluginEvents;

package/dist/custom/menu/popup-ids/ids.plugin.d.ts

@@ -0,0 +1,27 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+/**
+ * TMenuPopupIdsPlugin — связка «пункт ↔ его панель» в документе: у пункта с
+ * подменю (APG Menu) и у пункта с панелью (APG: пункт со всплывающим окном).
+ *
+ * Обе стороны ссылаются друг на друга: у строки пункта — `id` и
+ * `aria-controls` на панель (`aria` пункта, его разметка раскладывает на
+ * строку), у панели — `id` и `aria-labelledby` на строку (`panelAria`). Имя
+ * панели — текст пункта: скринридер объявляет «Поделиться, меню» и «Срок,
+ * диалог». Пишутся обе стороны здесь: формула одна на обе — и на оба вида
+ * пункта, чья панель меню или диалог.
+ *
+ * `id` строки, заданный приложением (`TIdPlugin` пункта), главнее: он и
+ * встаёт на строку, и на него ссылается панель. Сменили — плагин
+ * переписывает обе стороны ссылки на строку, сняли — снова `id` от
+ * монтирования. У панели `id` приложения нет, её `id` — формула.
+ *
+ * Без него — `id` от монтирования (`createId`), а не от экземпляра: он нужен
+ * только документу, и на сервере и в браузере обязан совпасть. Пишется при
+ * установке, синхронно, — связка есть уже в первой (и серверной) отрисовке.
+ * Ссылки стоят и у закрытой панели: панель всегда в документе, закрытие её
+ * только прячет.
+ */
+export declare class TMenuPopupIdsPlugin extends TBasePlugin {
+    install(ctx: IPluginContext): void;
+}

package/dist/custom/menu/popup-ids/ids.plugin.js

@@ -0,0 +1,47 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TIdPlugin } from "../../id/id.plugin.js";
+//#region src/custom/menu/popup-ids/ids.plugin.ts
+/**
+* TMenuPopupIdsPlugin — связка «пункт ↔ его панель» в документе: у пункта с
+* подменю (APG Menu) и у пункта с панелью (APG: пункт со всплывающим окном).
+*
+* Обе стороны ссылаются друг на друга: у строки пункта — `id` и
+* `aria-controls` на панель (`aria` пункта, его разметка раскладывает на
+* строку), у панели — `id` и `aria-labelledby` на строку (`panelAria`). Имя
+* панели — текст пункта: скринридер объявляет «Поделиться, меню» и «Срок,
+* диалог». Пишутся обе стороны здесь: формула одна на обе — и на оба вида
+* пункта, чья панель меню или диалог.
+*
+* `id` строки, заданный приложением (`TIdPlugin` пункта), главнее: он и
+* встаёт на строку, и на него ссылается панель. Сменили — плагин
+* переписывает обе стороны ссылки на строку, сняли — снова `id` от
+* монтирования. У панели `id` приложения нет, её `id` — формула.
+*
+* Без него — `id` от монтирования (`createId`), а не от экземпляра: он нужен
+* только документу, и на сервере и в браузере обязан совпасть. Пишется при
+* установке, синхронно, — связка есть уже в первой (и серверной) отрисовке.
+* Ссылки стоят и у закрытой панели: панель всегда в документе, закрытие её
+* только прячет.
+*/
+var TMenuPopupIdsPlugin = class extends TBasePlugin {
+	install(ctx) {
+		super.install(ctx);
+		const item = ctx.getInstance();
+		if (!item) return;
+		const idPlugin = ctx.get(TIdPlugin);
+		const mountId = ctx.createId("row");
+		const panelId = ctx.createId("panel");
+		/** Обе стороны ссылки на строку: её `id` и `aria-labelledby` панели. */
+		const linkRow = () => {
+			const rowId = idPlugin?.id ?? mountId;
+			item.aria.add("id", rowId);
+			item.panelAria.add("aria-labelledby", rowId);
+		};
+		item.panelAria.add("id", panelId);
+		linkRow();
+		item.aria.add("aria-controls", panelId);
+		idPlugin?.events.on("change:id", linkRow);
+	}
+};
+//#endregion
+export { TMenuPopupIdsPlugin };

package/dist/custom/menu/popup-ids/index.d.ts

@@ -0,0 +1 @@
+export { TMenuPopupIdsPlugin } from './ids.plugin';

package/dist/custom/menu/submenu-focus/focus.plugin.d.ts

@@ -0,0 +1,53 @@
+import type { IPluginContext } from '../../../base';
+import { TOverlayFocusPlugin } from '../../overlay/focus';
+import type { IOverlayOpenOptions } from '../../overlay/types';
+import type { TMenuSubmenuFocusPluginEvents } from './types';
+/**
+ * TMenuSubmenuFocusPlugin — модель фокуса подменю: уровня меню, открытого со
+ * строки пункта (APG Menu).
+ *
+ * Общее у оверлеев — запомнить, откуда открыли, увести фокус в панель кадром
+ * позже, вернуть его при закрытии, закрыться по Escape и погасить его, —
+ * лежит в `TOverlayFocusPlugin`. Открывают подменю со строки пункта, поэтому
+ * запомнена и возвращается фокусу она. Своё у подменю:
+ *
+ * - **куда при открытии.** Открыли клавишей — подсвечен первый пункт
+ *   (`TMenuSubmenuKeyboardPlugin`), и фокус встаёт на его строку. Открыли
+ *   указателем — наведением или нажатием строки — фокус остаётся на строке:
+ *   в панель он входит указателем, а клавишами — стрелкой к концу строки;
+ * - **закрыть уровень.** Escape — один уровень: подменю закрывается, фокус
+ *   возвращается на его строку, меню над ним открыто. Клавишу гасит
+ *   `preventDefault`, и меню над подменю её пропускает, как слои Select в
+ *   поповере;
+ * - **возвращать ли фокус.** Только когда фокус ещё в подменю или нигде
+ *   (`holdsFocus`): подменю, закрытое вместе с меню (выбор пункта), не тянет
+ *   его на строку спрятанной панели — меню уже вернуло его на триггер.
+ *   Нажатие и уход фокуса мимо фокус не возвращают, как у Popover:
+ *   пользователь уже там, куда нажал или навёл;
+ * - **Tab.** Закрывает все меню (APG) и ведёт к остановке за корнем меню, а
+ *   корня подменю не знает. Поэтому подменю сообщает о Tab меню над собой
+ *   (`tab`), а то — дальше, до корня (`TMenuFocusPlugin`): тот закрывается и
+ *   ведёт фокус, как Tab из своей панели. Так же доходит Tab из слоёв под
+ *   подменю — его подменю и панелей его пунктов. Подписка — через реестр
+ *   наборов коллекции (`listenNestedTabs`).
+ */
+export declare class TMenuSubmenuFocusPlugin extends TOverlayFocusPlugin<TMenuSubmenuFocusPluginEvents> {
+    private _navigation;
+    install(ctx: IPluginContext, options?: IOverlayOpenOptions): void;
+    destroy(): void;
+    /** Фокус при открытии — строке подсвеченного пункта, без подсветки остаётся на строке. */
+    protected _focusCandidates(_panel: Element): readonly Element[];
+    /** Запомненного элемента нет — фокус на строку пункта. */
+    protected _returnCandidates(root: Element): readonly Element[];
+    /** Возвращать фокус, только пока он в подменю или нигде. */
+    protected _returnsFocus(root: Element): boolean;
+    /** Tab в подменю — меню над ним: куда вести фокус, решает корень. */
+    protected _onTab(event: KeyboardEvent): void;
+}
+/**
+ * Слушать Tab вложенных слоёв этого меню — подменю и панелей пунктов с
+ * панелью: их модели фокуса сообщают о нём событием (`tab`), а их наборы
+ * лежат в реестре коллекции. Подписка — прямым `on`: шина плагина элемента
+ * умирает вместе с его набором.
+ */
+export declare function listenNestedTabs(ctx: IPluginContext, onTab: (event: KeyboardEvent) => void): void;

package/dist/custom/menu/submenu-focus/focus.plugin.js

@@ -0,0 +1,84 @@
+import { TCollectionBundlesPlugin } from "../../collection/bundles.plugin.js";
+import { rowIn } from "../../list/row.js";
+import { TDismissPlugin } from "../../dismiss/dismiss.plugin.js";
+import { TOverlayFocusPlugin } from "../../overlay/focus/focus.plugin.js";
+import { TMenuSubmenuKeyboardPlugin } from "../submenu-keyboard/keyboard.plugin.js";
+import { holdsFocus } from "../nested-layer.js";
+import { TMenuPopoverItemFocusPlugin } from "../popover-item-focus/focus.plugin.js";
+//#region src/custom/menu/submenu-focus/focus.plugin.ts
+/**
+* TMenuSubmenuFocusPlugin — модель фокуса подменю: уровня меню, открытого со
+* строки пункта (APG Menu).
+*
+* Общее у оверлеев — запомнить, откуда открыли, увести фокус в панель кадром
+* позже, вернуть его при закрытии, закрыться по Escape и погасить его, —
+* лежит в `TOverlayFocusPlugin`. Открывают подменю со строки пункта, поэтому
+* запомнена и возвращается фокусу она. Своё у подменю:
+*
+* - **куда при открытии.** Открыли клавишей — подсвечен первый пункт
+*   (`TMenuSubmenuKeyboardPlugin`), и фокус встаёт на его строку. Открыли
+*   указателем — наведением или нажатием строки — фокус остаётся на строке:
+*   в панель он входит указателем, а клавишами — стрелкой к концу строки;
+* - **закрыть уровень.** Escape — один уровень: подменю закрывается, фокус
+*   возвращается на его строку, меню над ним открыто. Клавишу гасит
+*   `preventDefault`, и меню над подменю её пропускает, как слои Select в
+*   поповере;
+* - **возвращать ли фокус.** Только когда фокус ещё в подменю или нигде
+*   (`holdsFocus`): подменю, закрытое вместе с меню (выбор пункта), не тянет
+*   его на строку спрятанной панели — меню уже вернуло его на триггер.
+*   Нажатие и уход фокуса мимо фокус не возвращают, как у Popover:
+*   пользователь уже там, куда нажал или навёл;
+* - **Tab.** Закрывает все меню (APG) и ведёт к остановке за корнем меню, а
+*   корня подменю не знает. Поэтому подменю сообщает о Tab меню над собой
+*   (`tab`), а то — дальше, до корня (`TMenuFocusPlugin`): тот закрывается и
+*   ведёт фокус, как Tab из своей панели. Так же доходит Tab из слоёв под
+*   подменю — его подменю и панелей его пунктов. Подписка — через реестр
+*   наборов коллекции (`listenNestedTabs`).
+*/
+var TMenuSubmenuFocusPlugin = class extends TOverlayFocusPlugin {
+	_navigation = null;
+	install(ctx, options) {
+		super.install(ctx, options);
+		this._navigation = ctx.get(TMenuSubmenuKeyboardPlugin) ?? null;
+		ctx.get(TDismissPlugin)?.events.on("dismiss", () => {
+			this._restore = false;
+		});
+		listenNestedTabs(ctx, (event) => this.events.emit("tab", event));
+	}
+	destroy() {
+		this._navigation = null;
+		super.destroy();
+	}
+	/** Фокус при открытии — строке подсвеченного пункта, без подсветки остаётся на строке. */
+	_focusCandidates(_panel) {
+		const row = this._navigation?.highlightedRow;
+		return row ? [row] : [];
+	}
+	/** Запомненного элемента нет — фокус на строку пункта. */
+	_returnCandidates(root) {
+		const row = rowIn(root);
+		return row ? [row] : [];
+	}
+	/** Возвращать фокус, только пока он в подменю или нигде. */
+	_returnsFocus(root) {
+		return holdsFocus(root, this._dismiss);
+	}
+	/** Tab в подменю — меню над ним: куда вести фокус, решает корень. */
+	_onTab(event) {
+		this.events.emit("tab", event);
+	}
+};
+/**
+* Слушать Tab вложенных слоёв этого меню — подменю и панелей пунктов с
+* панелью: их модели фокуса сообщают о нём событием (`tab`), а их наборы
+* лежат в реестре коллекции. Подписка — прямым `on`: шина плагина элемента
+* умирает вместе с его набором.
+*/
+function listenNestedTabs(ctx, onTab) {
+	ctx.get(TCollectionBundlesPlugin)?.events.on("bundle:registered", ({ bundle }) => {
+		bundle.get(TMenuSubmenuFocusPlugin)?.events.on("tab", onTab);
+		bundle.get(TMenuPopoverItemFocusPlugin)?.events.on("tab", onTab);
+	});
+}
+//#endregion
+export { TMenuSubmenuFocusPlugin, listenNestedTabs };

package/dist/custom/menu/submenu-focus/index.d.ts

@@ -0,0 +1,2 @@
+export { TMenuSubmenuFocusPlugin } from './focus.plugin';
+export type { TMenuSubmenuFocusPluginEvents } from './types';

package/dist/custom/menu/submenu-focus/types.d.ts

@@ -0,0 +1,10 @@
+import type { TPluginEvents } from '../../../base';
+export type TMenuSubmenuFocusPluginEvents = TPluginEvents & {
+    /**
+     * Tab в подменю — в его панели, на его строке или в подменю ниже: меню
+     * закрывается целиком, и фокус уходит, как Tab из панели корня (APG Menu).
+     * Куда — знает только корень, поэтому подменю сообщает о Tab меню над
+     * собой, а корень гасит клавишу, если повёл фокус сам
+     */
+    tab: (event: KeyboardEvent) => void;
+};

package/dist/custom/menu/submenu-keyboard/index.d.ts

@@ -0,0 +1,2 @@
+export { TMenuSubmenuKeyboardPlugin } from './keyboard.plugin';
+export type { TMenuSubmenuKeyboardPluginEvents } from './types';

package/dist/custom/menu/submenu-keyboard/keyboard.plugin.d.ts

@@ -0,0 +1,43 @@
+import type { IPluginContext } from '../../../base';
+import { TMenuNavigationPlugin } from '../navigation';
+import type { TMenuSubmenuKeyboardPluginEvents } from './types';
+/**
+ * TMenuSubmenuKeyboardPlugin — клавиатура пункта с подменю: клавиши его
+ * строки в меню над ним и его собственной панели (APG Menu).
+ *
+ * Панель — общая с меню (`TMenuNavigationPlugin`): фокус идёт за подсветкой,
+ * ↑/↓ по кругу, Home и End, набор по первым буквам. Своё у подменю — две
+ * границы уровня:
+ *
+ * - **открыть** — стрелка к концу строки (в RTL ←), Enter и пробел на строке
+ *   пункта: подменю открывается на первом пункте, и фокус уходит на него.
+ *   Строка лежит в корне пункта, поэтому клавиши слушает корень, — и только
+ *   со строки: клавиши содержимого слотов строки им и принадлежат. Клавиша
+ *   гасится: Enter и пробел иначе нажали бы строку, а клик открыл бы
+ *   подменю ещё раз, без подсветки, — и меню над ним её не трогает
+ *   (`defaultPrevented`): пробел подменю открывает и тогда, когда в меню над
+ *   ним идёт набор по буквам;
+ * - **закрыть** — стрелка к началу строки (в RTL →) в панели подменю: уровень
+ *   закрывается, фокус возвращается на строку пункта (модель фокуса подменю).
+ *   Escape делает то же — его ведёт модель фокуса, как у любого слоя.
+ *
+ * Сторона строки — по направлению письма: у строки — направление меню над
+ * подменю, у панели — своё.
+ *
+ * Выключенный пункт подменю не открывает. Подсвеченным он не бывает, и
+ * фокуса на его строке с клавиатуры нет, — проверка на случай фокуса, который
+ * поставили кликом.
+ */
+export declare class TMenuSubmenuKeyboardPlugin extends TMenuNavigationPlugin<TMenuSubmenuKeyboardPluginEvents> {
+    private _submenu;
+    /** Корень пункта — узел пункта в меню над подменю; строка лежит в нём. */
+    private _root;
+    install(ctx: IPluginContext, options?: unknown): void;
+    destroy(): void;
+    /** Клавиши строки пункта: открыть подменю на первом пункте. */
+    protected onKeyDown(e: KeyboardEvent): void;
+    /** Стрелка к началу строки в панели — закрыть уровень. */
+    protected onPanelKey(e: KeyboardEvent): boolean;
+    /** Стрелка к концу строки — по направлению строки пункта. */
+    private _toEnd;
+}

package/dist/custom/menu/submenu-keyboard/keyboard.plugin.js

@@ -0,0 +1,74 @@
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { rowIn } from "../../list/row.js";
+import { TMenuNavigationPlugin } from "../navigation/navigation.plugin.js";
+//#region src/custom/menu/submenu-keyboard/keyboard.plugin.ts
+/**
+* TMenuSubmenuKeyboardPlugin — клавиатура пункта с подменю: клавиши его
+* строки в меню над ним и его собственной панели (APG Menu).
+*
+* Панель — общая с меню (`TMenuNavigationPlugin`): фокус идёт за подсветкой,
+* ↑/↓ по кругу, Home и End, набор по первым буквам. Своё у подменю — две
+* границы уровня:
+*
+* - **открыть** — стрелка к концу строки (в RTL ←), Enter и пробел на строке
+*   пункта: подменю открывается на первом пункте, и фокус уходит на него.
+*   Строка лежит в корне пункта, поэтому клавиши слушает корень, — и только
+*   со строки: клавиши содержимого слотов строки им и принадлежат. Клавиша
+*   гасится: Enter и пробел иначе нажали бы строку, а клик открыл бы
+*   подменю ещё раз, без подсветки, — и меню над ним её не трогает
+*   (`defaultPrevented`): пробел подменю открывает и тогда, когда в меню над
+*   ним идёт набор по буквам;
+* - **закрыть** — стрелка к началу строки (в RTL →) в панели подменю: уровень
+*   закрывается, фокус возвращается на строку пункта (модель фокуса подменю).
+*   Escape делает то же — его ведёт модель фокуса, как у любого слоя.
+*
+* Сторона строки — по направлению письма: у строки — направление меню над
+* подменю, у панели — своё.
+*
+* Выключенный пункт подменю не открывает. Подсвеченным он не бывает, и
+* фокуса на его строке с клавиатуры нет, — проверка на случай фокуса, который
+* поставили кликом.
+*/
+var TMenuSubmenuKeyboardPlugin = class extends TMenuNavigationPlugin {
+	_submenu = null;
+	/** Корень пункта — узел пункта в меню над подменю; строка лежит в нём. */
+	_root = null;
+	install(ctx, options) {
+		super.install(ctx, options);
+		this._submenu = ctx.getInstance() ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => {
+			this._root = element;
+		});
+		elementPlugin?.events.on("removed", () => {
+			this._root = null;
+		});
+	}
+	destroy() {
+		this._submenu = null;
+		this._root = null;
+		super.destroy();
+	}
+	/** Клавиши строки пункта: открыть подменю на первом пункте. */
+	onKeyDown(e) {
+		const root = this._root;
+		if (!root || e.target !== rowIn(root) || this._submenu?.disabled) return;
+		if (e.key === "Enter" || e.key === " " || e.key === this._toEnd(root)) {
+			e.preventDefault();
+			this.openAt("first");
+		}
+	}
+	/** Стрелка к началу строки в панели — закрыть уровень. */
+	onPanelKey(e) {
+		const submenu = this._submenu;
+		if (!submenu || e.key !== (this.isRtl() ? "ArrowRight" : "ArrowLeft")) return false;
+		submenu.open = false;
+		return true;
+	}
+	/** Стрелка к концу строки — по направлению строки пункта. */
+	_toEnd(root) {
+		return getComputedStyle(root).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+	}
+};
+//#endregion
+export { TMenuSubmenuKeyboardPlugin };

package/dist/custom/menu/submenu-keyboard/types.d.ts

@@ -0,0 +1,2 @@
+import type { TMenuNavigationPluginEvents } from '../navigation';
+export type TMenuSubmenuKeyboardPluginEvents = TMenuNavigationPluginEvents;

package/dist/custom/number-input/index.d.ts

@@ -0,0 +1,5 @@
+export * from './keyboard';
+export * from './names';
+export * from './stepper';
+export * from './touch';
+export * from './typing';

package/dist/custom/number-input/keyboard/index.d.ts

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

package/dist/custom/number-input/keyboard/keyboard.plugin.d.ts

@@ -0,0 +1,36 @@
+import type { INumberInput } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TNumberInputKeyboardPluginEvents } from './types';
+/**
+ * TNumberInputKeyboardPlugin — клавиши поля числа (APG, Spinbutton): шаг,
+ * крупный шаг и границы.
+ *
+ * - **↑/↓** — шаг (`shift`), с Shift — крупный шаг (`largeStep` шагов);
+ * - **PageUp/PageDown** — крупный шаг;
+ * - **Home/End** — к заданной границе (`moveToEdge`); границы нет — клавиша
+ *   браузера: каретка в начало или конец текста. С Shift — тоже браузера:
+ *   выделение до края;
+ * - **Enter** — конец набора (`commit`), без `preventDefault`: Enter в поле
+ *   формы отправляет её, и значение уходит в форму уже законченным.
+ *
+ * Каждая клавиша шага — законченное действие: шаг и `commit()`. Обработанная
+ * клавиша гасится `preventDefault` — иначе стрелка увела бы каретку, а PageDown
+ * прокрутил бы страницу. У выключенного поля и только для чтения команды
+ * ничего не меняют, а клавиши всё равно гасятся: счётчик своими стрелками
+ * текст не листает.
+ *
+ * Клавиши берутся только с самого ввода, мимо композиции IME и мимо
+ * Alt/Ctrl/Meta — это чужие жесты: Ctrl+Home у браузера, Alt+↓ у оверлеев.
+ */
+export declare class TNumberInputKeyboardPlugin extends TBasePlugin<INumberInput, TNumberInputKeyboardPluginEvents> {
+    private _owner;
+    private _root;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    /** Корень сменился — слушатель переезжает. */
+    private _bind;
+    private readonly _onKeyDown;
+    /** Что клавиша делает с числом; не клавиша поля — `null`, её обработает браузер. */
+    private _actionOf;
+}

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

@@ -0,0 +1,80 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isInputOf } from "../parts.js";
+//#region src/custom/number-input/keyboard/keyboard.plugin.ts
+/** Края клавиш Home и End. Без границы на краю клавиша — каретки. */
+var EDGES = /* @__PURE__ */ new Map([["Home", "start"], ["End", "end"]]);
+/**
+* TNumberInputKeyboardPlugin — клавиши поля числа (APG, Spinbutton): шаг,
+* крупный шаг и границы.
+*
+* - **↑/↓** — шаг (`shift`), с Shift — крупный шаг (`largeStep` шагов);
+* - **PageUp/PageDown** — крупный шаг;
+* - **Home/End** — к заданной границе (`moveToEdge`); границы нет — клавиша
+*   браузера: каретка в начало или конец текста. С Shift — тоже браузера:
+*   выделение до края;
+* - **Enter** — конец набора (`commit`), без `preventDefault`: Enter в поле
+*   формы отправляет её, и значение уходит в форму уже законченным.
+*
+* Каждая клавиша шага — законченное действие: шаг и `commit()`. Обработанная
+* клавиша гасится `preventDefault` — иначе стрелка увела бы каретку, а PageDown
+* прокрутил бы страницу. У выключенного поля и только для чтения команды
+* ничего не меняют, а клавиши всё равно гасятся: счётчик своими стрелками
+* текст не листает.
+*
+* Клавиши берутся только с самого ввода, мимо композиции IME и мимо
+* Alt/Ctrl/Meta — это чужие жесты: Ctrl+Home у браузера, Alt+↓ у оверлеев.
+*/
+var TNumberInputKeyboardPlugin = 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));
+	}
+	destroy() {
+		this._bind(null);
+		this._owner = null;
+		super.destroy();
+	}
+	/** Корень сменился — слушатель переезжает. */
+	_bind(root) {
+		this._root?.removeEventListener("keydown", this._onKeyDown);
+		this._root = root;
+		root?.addEventListener("keydown", this._onKeyDown);
+	}
+	_onKeyDown = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || event.defaultPrevented || event.isComposing) return;
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		if (!isInputOf(owner, root, event.target)) return;
+		if (event.key === "Enter") {
+			owner.commit();
+			return;
+		}
+		const action = this._actionOf(owner, event);
+		if (!action) return;
+		event.preventDefault();
+		action();
+		owner.commit();
+	};
+	/** Что клавиша делает с числом; не клавиша поля — `null`, её обработает браузер. */
+	_actionOf(owner, event) {
+		const large = owner.largeStep;
+		switch (event.key) {
+			case "ArrowUp": return () => owner.shift(event.shiftKey ? large : 1);
+			case "ArrowDown": return () => owner.shift(event.shiftKey ? -large : -1);
+			case "PageUp": return () => owner.shift(large);
+			case "PageDown": return () => owner.shift(-large);
+		}
+		const edge = EDGES.get(event.key);
+		if (edge === void 0 || event.shiftKey) return null;
+		return (edge === "start" ? owner.min : owner.max) === void 0 ? null : () => owner.moveToEdge(edge);
+	}
+};
+//#endregion
+export { TNumberInputKeyboardPlugin };

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

@@ -0,0 +1,3 @@
+import type { TPluginEvents } from '../../../base';
+/** Своих событий у плагина нет: шаг виден в значении ядра, его конец — в `commit`. */
+export type TNumberInputKeyboardPluginEvents = TPluginEvents;

package/dist/custom/number-input/names/index.d.ts

@@ -0,0 +1 @@
+export { TNumberInputNamesPlugin } from './names.plugin';

package/dist/custom/number-input/names/names.plugin.d.ts

@@ -0,0 +1,17 @@
+import type { INumberInput } from '@soxa-ui/core';
+import { TClearableNamesPlugin } from '../../clearable/names';
+import type { TTranslations } from '../../../locale/types';
+/**
+ * TNumberInputNamesPlugin — имена кнопок поля числа от локали, вместе с именем
+ * поля: «Увеличить Количество», «Уменьшить Количество», «Очистить Количество».
+ *
+ * Кнопки шага не остановки Tab, но скринридер их находит и жмёт, и на форме с
+ * тремя полями числа шесть одинаковых «Увеличить, кнопка» не различить. Как имя
+ * складывается с именем поля, решают шаблоны локали (`numberInput.increment`,
+ * `numberInput.decrement`). Имя кнопки очистки — как у любого поля
+ * (`TClearableNamesPlugin`): плагин имён у компонента один, и наследник пишет
+ * имена всех его кнопок.
+ */
+export declare class TNumberInputNamesPlugin extends TClearableNamesPlugin<INumberInput> {
+    protected _name(owner: INumberInput, translations: TTranslations): void;
+}

package/dist/custom/number-input/names/names.plugin.js

@@ -0,0 +1,24 @@
+import { formatName } from "../../../locale/locale.js";
+import { TClearableNamesPlugin } from "../../clearable/names/names.plugin.js";
+//#region src/custom/number-input/names/names.plugin.ts
+/**
+* TNumberInputNamesPlugin — имена кнопок поля числа от локали, вместе с именем
+* поля: «Увеличить Количество», «Уменьшить Количество», «Очистить Количество».
+*
+* Кнопки шага не остановки Tab, но скринридер их находит и жмёт, и на форме с
+* тремя полями числа шесть одинаковых «Увеличить, кнопка» не различить. Как имя
+* складывается с именем поля, решают шаблоны локали (`numberInput.increment`,
+* `numberInput.decrement`). Имя кнопки очистки — как у любого поля
+* (`TClearableNamesPlugin`): плагин имён у компонента один, и наследник пишет
+* имена всех его кнопок.
+*/
+var TNumberInputNamesPlugin = class extends TClearableNamesPlugin {
+	_name(owner, translations) {
+		super._name(owner, translations);
+		const { increment, decrement } = translations.numberInput;
+		owner.decrementAria.add("aria-label", formatName(decrement, owner.name));
+		owner.incrementAria.add("aria-label", formatName(increment, owner.name));
+	}
+};
+//#endregion
+export { TNumberInputNamesPlugin };