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

package/dist/custom/textarea/autoresize/autoresize.plugin.js

@@ -0,0 +1,176 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { fieldOf } from "../../input/field.js";
+import { frameDebounce } from "@soxa-ui/core";
+//#region src/custom/textarea/autoresize/autoresize.plugin.ts
+/** Число из вычисленного стиля в px; не число (`normal`) — 0. */
+var px = (value) => parseFloat(value) || 0;
+/**
+* Запомнить прокрутку предков поля перед замером; вернуть её — функция,
+* которую отдаёт вызов.
+*
+* Замер на миг сжимает поле до `rows`, и всё, что под ним, становится
+* короче. Прокрутку, упёртую в конец, браузер при этом прижимает к новому
+* концу, и после замера поле вставало на место, а страница уезжала вверх —
+* на каждую клавишу в поле у низа страницы. Chromium возвращает её сам
+* привязкой прокрутки (`overflow-anchor`), но без привязки — её выключило
+* приложение или её нет у браузера — страница уезжала бы. Сдвиги предков,
+* которые не изменились, возврат не трогает.
+*/
+function holdScroll(field) {
+	const held = [];
+	for (let node = field.parentElement; node; node = node.parentElement) if (node.scrollTop !== 0) held.push([node, node.scrollTop]);
+	return () => {
+		for (const [node, top] of held) if (node.scrollTop !== top) node.scrollTo({
+			top,
+			behavior: "instant"
+		});
+	};
+}
+/**
+* TTextareaAutoresizePlugin — высота многострочного поля по содержимому: от
+* `rows` до `maxRows` строк.
+*
+* Нативная `<textarea>` не растёт, поэтому авторост — флаг `autoresize`, а
+* пока он выключен, плагин поле не трогает: высоту дают `rows` и ручка.
+* Свойства лежат на инстансе (`ITextarea`), плагин их читает — так же, как
+* `TListHeightPlugin` читает `maxRows` списка: свойство — ядру, применение —
+* плагину.
+*
+* Высота — инлайновый `height` самой `<textarea>` (корень растёт за ней сам:
+* в нём ещё счётчик), в единицах её `box-sizing`. Строку меряет вычисленный
+* интерлиньяж поля, к строкам добавляются его поля и рамка по оси блока, а
+* высоту текста отдаёт `scrollHeight` — на миг сжатого до `rows` поля без
+* прокрутки: так текст переносится по всей ширине, как после замера.
+* Прокрутку предков, которую сжатие могло сбить, замер возвращает. Пока
+* потолок не набран, прокрутки у поля нет (`overflow-y: hidden`): иначе под
+* курсором мелькала бы полоса, которой вот-вот не станет. На потолке плагин
+* этот запрет снимает, и поле прокручивается. Ручку (`resize: none`) плагин
+* гасит на всё время автороста: высоту ведёт он. Выключили авторост — стили
+* снимает, чужих не трогает. Перехода у высоты нет: поле растёт вместе с
+* набором.
+*
+* **Ввод пользователя — синхронно**, в слушателе `input` поля: значение в
+* узле уже новое, и высота встаёт до отрисовки. Остальное — значение из кода,
+* `rows`, `maxRows`, `autoresize`, `size`, ширина поля и подгруженный шрифт
+* (текст переносится иначе) — **кадром**: значение из кода фреймворк пишет в
+* узел позже, чем ядро о нём сообщает, а размер меняет поля и кегль через
+* класс. Ширину сообщает `ResizeObserver` — плагину важна только она: высоту
+* поля меняет он сам.
+*
+* **Кадр — только при узле**: между `ready` и `removed` своего
+* `TElementPlugin`. Сборка идёт и на сервере, и значение там меняется, а узла
+* и `requestAnimationFrame` нет. Что сменилось до узла, применяет `ready` —
+* сразу.
+*/
+var TTextareaAutoresizePlugin = class extends TBasePlugin {
+	_owner = null;
+	/** Поле — `<textarea>` корня, пока узел корня объявлен */
+	_field = null;
+	_observer = null;
+	/** Ширина поля, о которой уже знает плагин: высоту меняет он сам */
+	_width = void 0;
+	/** Стили поля писал плагин: при выключении автороста есть что снять */
+	_applied = false;
+	/** Замер в следующем кадре; прежний отложенный отменяется. */
+	_fitNextFrame;
+	_onInput = () => this._fit();
+	_onFonts = () => this._schedule();
+	constructor() {
+		super();
+		this._fitNextFrame = frameDebounce(() => this._fit());
+	}
+	install(ctx, options) {
+		super.install(ctx, options);
+		const owner = ctx.getInstance();
+		if (!owner) return;
+		this._owner = owner;
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (root) => this._attach(root));
+		element?.events.on("removed", () => this._detach());
+		const schedule = () => this._schedule();
+		this._listenTo(owner.events, "change:value", schedule);
+		this._listenTo(owner.events, "change:rows", schedule);
+		this._listenTo(owner.events, "change:maxRows", schedule);
+		this._listenTo(owner.events, "change:autoresize", schedule);
+		this._listenTo(owner.events, "change:size", schedule);
+	}
+	destroy() {
+		this._detach();
+		this._owner = null;
+		super.destroy();
+	}
+	_attach(root) {
+		this._detach();
+		const field = fieldOf(root);
+		if (!(field instanceof HTMLTextAreaElement)) return;
+		this._field = field;
+		field.addEventListener("input", this._onInput);
+		field.ownerDocument.fonts?.addEventListener("loadingdone", this._onFonts);
+		this._observer = new ResizeObserver((entries) => this._resized(entries));
+		this._observer.observe(field, { box: "border-box" });
+		this._fit();
+	}
+	_detach() {
+		const field = this._field;
+		field?.removeEventListener("input", this._onInput);
+		field?.ownerDocument.fonts?.removeEventListener("loadingdone", this._onFonts);
+		this._observer?.disconnect();
+		this._observer = null;
+		this._field = null;
+		this._width = void 0;
+		this._applied = false;
+	}
+	/** Наблюдатель сообщил размер поля: замер нужен, только если сменилась ширина. */
+	_resized(entries) {
+		const size = entries.at(-1)?.borderBoxSize?.at(0);
+		if (!size || size.inlineSize === this._width) return;
+		this._width = size.inlineSize;
+		this._schedule();
+	}
+	/**
+	* Замерить кадром позже — пока у плагина есть поле. Без узла повод ничего
+	* не планирует: всё, что сменилось до узла, применит `ready`.
+	*/
+	_schedule() {
+		if (this._field) this._fitNextFrame();
+	}
+	/** Высота поля по тексту — или снять стили, если авторост выключен. */
+	_fit() {
+		const field = this._field;
+		const owner = this._owner;
+		if (!field || !owner) return;
+		if (!owner.autoresize) {
+			this._release(field);
+			return;
+		}
+		const restore = holdScroll(field);
+		const style = getComputedStyle(field);
+		field.style.overflowY = "hidden";
+		field.style.height = "auto";
+		const padding = px(style.paddingTop) + px(style.paddingBottom);
+		const border = px(style.borderTopWidth) + px(style.borderBottomWidth);
+		const line = px(style.lineHeight) || (field.clientHeight - padding) / field.rows;
+		const frame = style.boxSizing === "border-box" ? padding + border : 0;
+		const rows = Math.max(1, owner.rows);
+		const min = rows * line + frame;
+		const max = owner.maxRows > 0 ? Math.max(rows, owner.maxRows) * line + frame : Infinity;
+		const content = field.scrollHeight - padding + frame;
+		const overflows = content - max >= 1;
+		field.style.height = `${Math.min(Math.max(content, min), max)}px`;
+		field.style.overflowY = overflows ? "" : "hidden";
+		field.style.resize = "none";
+		this._applied = true;
+		restore();
+	}
+	/** Авторост выключен — снять то, что писал плагин; без его стилей — ничего. */
+	_release(field) {
+		if (!this._applied) return;
+		field.style.height = "";
+		field.style.overflowY = "";
+		field.style.resize = "";
+		this._applied = false;
+	}
+};
+//#endregion
+export { TTextareaAutoresizePlugin };

package/dist/custom/textarea/autoresize/index.d.ts

@@ -0,0 +1,2 @@
+export { TTextareaAutoresizePlugin } from './autoresize.plugin';
+export type { TTextareaAutoresizePluginEvents } from './types';

package/dist/custom/textarea/autoresize/types.d.ts

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

package/dist/custom/textarea/ids/ids.plugin.d.ts

@@ -0,0 +1,26 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+/**
+ * TTextareaIdsPlugin — связка «поле ↔ счётчик символов» Textarea в документе.
+ *
+ * Пока счётчик включён (`counter`), его `id` — в его набор (`counterAria`), а
+ * ссылка на него — в `aria-describedby` поля: скринридер читает «12 / 200»
+ * вместе с полем, на фокусе, а не на каждый символ — живого региона у
+ * счётчика нет. Выключили — сняты оба: счётчика нет в документе, и ссылка
+ * вела бы в пустоту.
+ *
+ * Ссылку плагин пишет не в набор поля сам, а третьим входом его `TAriaPlugin`
+ * (`parts`): `aria-describedby` сливает он — справка поля формы, свои части,
+ * своё `aria_describedBy`, — и второй писатель того же атрибута стёр бы чужое.
+ *
+ * `id` — от монтирования (`createId`), а не от экземпляра: он нужен только
+ * документу, и на сервере и в браузере обязан совпасть. Пишется при
+ * установке, синхронно, и на смену `counter` — связка есть уже в первой (и
+ * серверной) отрисовке.
+ *
+ * Шина поля бывает долговечнее плагина — приложение передаёт свой `ctrl`, —
+ * поэтому подписка через `_listenTo`.
+ */
+export declare class TTextareaIdsPlugin extends TBasePlugin {
+    install(ctx: IPluginContext): void;
+}

package/dist/custom/textarea/ids/ids.plugin.js

@@ -0,0 +1,44 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TAriaPlugin } from "../../component-view/aria.plugin.js";
+//#region src/custom/textarea/ids/ids.plugin.ts
+/** Ссылок на свои части нет: счётчик не рисуется. */
+var NO_PARTS = {};
+/**
+* TTextareaIdsPlugin — связка «поле ↔ счётчик символов» Textarea в документе.
+*
+* Пока счётчик включён (`counter`), его `id` — в его набор (`counterAria`), а
+* ссылка на него — в `aria-describedby` поля: скринридер читает «12 / 200»
+* вместе с полем, на фокусе, а не на каждый символ — живого региона у
+* счётчика нет. Выключили — сняты оба: счётчика нет в документе, и ссылка
+* вела бы в пустоту.
+*
+* Ссылку плагин пишет не в набор поля сам, а третьим входом его `TAriaPlugin`
+* (`parts`): `aria-describedby` сливает он — справка поля формы, свои части,
+* своё `aria_describedBy`, — и второй писатель того же атрибута стёр бы чужое.
+*
+* `id` — от монтирования (`createId`), а не от экземпляра: он нужен только
+* документу, и на сервере и в браузере обязан совпасть. Пишется при
+* установке, синхронно, и на смену `counter` — связка есть уже в первой (и
+* серверной) отрисовке.
+*
+* Шина поля бывает долговечнее плагина — приложение передаёт свой `ctrl`, —
+* поэтому подписка через `_listenTo`.
+*/
+var TTextareaIdsPlugin = class extends TBasePlugin {
+	install(ctx) {
+		super.install(ctx);
+		const textarea = ctx.getInstance();
+		if (!textarea) return;
+		const counterId = ctx.createId("counter");
+		const aria = ctx.get(TAriaPlugin);
+		const link = () => {
+			const shown = textarea.counter;
+			textarea.counterAria.add("id", shown ? counterId : null);
+			if (aria) aria.parts = shown ? { describedBy: counterId } : NO_PARTS;
+		};
+		link();
+		this._listenTo(textarea.events, "change:counter", link);
+	}
+};
+//#endregion
+export { TTextareaIdsPlugin };

package/dist/custom/textarea/ids/index.d.ts

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

package/dist/custom/textarea/index.d.ts

@@ -0,0 +1,3 @@
+export * from './autoresize';
+export * from './ids';
+export * from './names';

package/dist/custom/textarea/names/index.d.ts

@@ -0,0 +1,2 @@
+export { TTextareaNamesPlugin } from './names.plugin';
+export type { TTextareaNamesPluginEvents } from './types';

package/dist/custom/textarea/names/names.plugin.d.ts

@@ -0,0 +1,33 @@
+import type { ITextarea, TEventSink } from '@soxa-ui/core';
+import { TNamesPlugin } from '../../../locale/names.plugin';
+import type { IPluginContext } from '../../../base';
+import type { TTranslations } from '../../../locale/types';
+import type { TTextareaNamesPluginEvents } from './types';
+/**
+ * TTextareaNamesPlugin — текст счётчика символов Textarea от локали: «12 / 200».
+ *
+ * Счётчик рисует библиотека, и его текст — строка языка, как значение оценки
+ * Rating: при пределе `maxlength` — шаблон локали `textarea.counter`, без
+ * предела — одно число. Числа — по тегу локали (`toLocaleString`): «1 234»,
+ * а не «1234», и цифрами языка. Набранное считает ядро (`textLength`) — тем
+ * же счётом, что `data-limit` и браузер у `maxlength`.
+ *
+ * Текст — выходом (`counter`), а не в набор: у счётчика своего экземпляра
+ * нет, его разметку рисует шаблон поля. Пишет при установке, синхронно, —
+ * счётчик есть уже в первой и серверной отрисовке, — и на смену локали,
+ * значения и предела. Живым регионом счётчик не объявляется — тот шумел бы
+ * на каждый символ: поле ссылается на него `aria-describedby`
+ * (`TTextareaIdsPlugin`), и скринридер читает текст на фокусе поля.
+ */
+export declare class TTextareaNamesPlugin extends TNamesPlugin<ITextarea, TTextareaNamesPluginEvents> {
+    /** Источник локали набора — за тегом для чисел: строки база отдаёт сама */
+    private _locale;
+    private _counter;
+    /** Текст счётчика: «12 / 200», без предела — «12». */
+    get counter(): string;
+    protected get _sink(): TEventSink<TTextareaNamesPluginEvents>;
+    install(ctx: IPluginContext, options?: unknown): void;
+    destroy(): void;
+    protected _name(owner: ITextarea, translations: TTranslations): void;
+    protected _watch(owner: ITextarea, name: () => void): void;
+}

package/dist/custom/textarea/names/names.plugin.js

@@ -0,0 +1,65 @@
+import { TNamesPlugin } from "../../../locale/names.plugin.js";
+//#region src/custom/textarea/names/names.plugin.ts
+/**
+* Счётчик с пределом: шаблон из локали, на месте `{count}` — набранное, на
+* месте `{max}` — предел. Порядок у каждого языка свой, поэтому места в
+* шаблоне, а не склейка.
+*/
+function counterText(template, count, max) {
+	return template.split("{count}").join(count).split("{max}").join(max);
+}
+/**
+* TTextareaNamesPlugin — текст счётчика символов Textarea от локали: «12 / 200».
+*
+* Счётчик рисует библиотека, и его текст — строка языка, как значение оценки
+* Rating: при пределе `maxlength` — шаблон локали `textarea.counter`, без
+* предела — одно число. Числа — по тегу локали (`toLocaleString`): «1 234»,
+* а не «1234», и цифрами языка. Набранное считает ядро (`textLength`) — тем
+* же счётом, что `data-limit` и браузер у `maxlength`.
+*
+* Текст — выходом (`counter`), а не в набор: у счётчика своего экземпляра
+* нет, его разметку рисует шаблон поля. Пишет при установке, синхронно, —
+* счётчик есть уже в первой и серверной отрисовке, — и на смену локали,
+* значения и предела. Живым регионом счётчик не объявляется — тот шумел бы
+* на каждый символ: поле ссылается на него `aria-describedby`
+* (`TTextareaIdsPlugin`), и скринридер читает текст на фокусе поля.
+*/
+var TTextareaNamesPlugin = class extends TNamesPlugin {
+	/** Источник локали набора — за тегом для чисел: строки база отдаёт сама */
+	_locale = null;
+	_counter = "";
+	/** Текст счётчика: «12 / 200», без предела — «12». */
+	get counter() {
+		return this._counter;
+	}
+	get _sink() {
+		return this.events;
+	}
+	install(ctx, options) {
+		this._locale = ctx.locale;
+		super.install(ctx, options);
+	}
+	destroy() {
+		this._locale = null;
+		super.destroy();
+	}
+	_name(owner, translations) {
+		const oldCounter = this.counter;
+		const tag = this._locale?.locale.tag;
+		const count = owner.textLength.toLocaleString(tag);
+		const max = owner.maxlength;
+		const counter = max === void 0 ? count : counterText(translations.textarea.counter, count, max.toLocaleString(tag));
+		if (this._counter === counter) return;
+		this._counter = counter;
+		this._sink.emit("change:counter", {
+			newValue: counter,
+			oldValue: oldCounter
+		});
+	}
+	_watch(owner, name) {
+		this._listenTo(owner.events, "change:value", name);
+		this._listenTo(owner.events, "change:maxlength", name);
+	}
+};
+//#endregion
+export { TTextareaNamesPlugin };

package/dist/custom/textarea/names/types.d.ts

@@ -0,0 +1,8 @@
+import type { TValuePayload } from '@soxa-ui/core';
+import type { TPluginEvents } from '../../../base';
+export type TTextareaNamesPluginEvents = TPluginEvents & {
+    /**
+     * change:counter — текст счётчика сменился: набранное, предел или локаль
+     */
+    'change:counter': (payload: TValuePayload<string>) => void;
+};

package/dist/custom/toasts/cascade/cascade.plugin.d.ts

@@ -0,0 +1,81 @@
+import type { IToasts } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TToastsCascadePluginEvents } from './types';
+/**
+ * TToastsCascadePlugin — листание стопки тостов (`layout: 'cascade'`).
+ *
+ * В стопке тосты перекрывают друг друга. Передний — первый по порядку
+ * коллекции, а вывести задний вперёд — перестановка (`plain.move`): своего
+ * состояния «передний» у тоста нет, и экран со скринридером видят один
+ * порядок. Шаг стопки — поворот открытых показанных тостов по кругу:
+ *
+ * - **колесо** над регионом: вниз — передний уходит назад, вверх — задний
+ *   выходит вперёд. Шаг один на жест колеса (`WHEEL_GESTURE_END`), прокрутка
+ *   копится до порога (`WHEEL_STEP`), колесо жеста гасится — страница под
+ *   стопкой не едет. Колесо с Ctrl — масштаб окна, а вбок — не наше;
+ * - **стрелки ↓ и ↑** при фокусе на тосте — то же самое, и фокус переходит на
+ *   новый передний: тот, кого читают, всегда впереди. Стрелки поля ввода и
+ *   списка в своём содержимом тоста не перехватываются, погашенные раньше —
+ *   тоже.
+ *
+ * **Передний для шага — тост под фокусом.** Фокус Tab на заднем тосте выводит
+ * его вперёд темой, по `:focus-within`, без перестановки: перестановка на
+ * фокус ставила бы тост под фокусом первым в документе, и следующий Tab
+ * приходил бы в прежний передний — по кругу, без выхода из региона. Поэтому
+ * шаг считается от того, что видно: тост под фокусом впереди, остальные — за
+ * ним по порядку.
+ *
+ * Закрытые тосты, которые ещё гаснут, в повороте не участвуют и встают за
+ * открытыми; ждущие за пределом видимых не трогаются. Открытых меньше двух —
+ * листать нечего, и колесо со стрелками остаются странице.
+ *
+ * **Фокус после перерисовки.** Переставленный узел браузер переносит в
+ * документе, и фокус с него уходит. Поэтому, если фокус был на тосте, плагин
+ * ставит его новому переднему сразу и ещё раз кадром позже, когда разметка уже
+ * переставлена, — как перестановка колонки Table.
+ *
+ * Без стопки (`list`) плагин ничего не делает: колесо и стрелки остаются
+ * странице. Слушатели висят, пока есть узел региона.
+ */
+export declare class TToastsCascadePlugin extends TBasePlugin<IToasts, TToastsCascadePluginEvents> {
+    private _owner;
+    private _engine;
+    private _elements;
+    /** Узел региона: на нём слушатели колеса и клавиш. */
+    private _region;
+    /** Жест колеса; `null` — колесо стоит. */
+    private _gesture;
+    /** Конец жеста — по тишине колеса. */
+    private _gestureTimer;
+    /** Возврат фокуса после перерисовки. */
+    private _frame;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _attach;
+    private _detach;
+    /** Тосты стоят стопкой. */
+    private get _cascade();
+    private readonly _onWheel;
+    private readonly _onKeyDown;
+    /**
+     * Шаг стопки от тоста `reference` (под фокусом), а без него — от первого
+     * открытого. Новый порядок пишется перестановками одной пачкой: подписчики
+     * получают одно `change:items`. Отдаёт новый передний; листать нечего —
+     * `undefined`.
+     *
+     * Показанные — начало состава: предел видимых (`items:query:before`
+     * расширения `toasts`) берёт первые `max`, поэтому место тоста среди
+     * показанных и есть его индекс в коллекции.
+     */
+    private _step;
+    /** Фокус — переднему, и ещё раз, когда разметка переставлена. */
+    private _focus;
+    /** Открытые показанные тосты — то, что листается. */
+    private _open;
+    /** Открытый показанный тост, чей узел содержит цель. */
+    private _toastOf;
+    private _restartGesture;
+    private _endGesture;
+    private _cancelFrame;
+}