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

package/dist/custom/popover/pointer/pointer.plugin.d.ts

@@ -0,0 +1,35 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TPopoverPointerPluginEvents } from './types';
+/**
+ * TPopoverPointerPlugin — клик по триггеру Popover переключает панель.
+ *
+ * Слушает корень: в нём лежит только триггер (слот `trigger`), поэтому клик
+ * по корню — это клик по триггеру, чем бы потребитель его ни нарисовал. Клик
+ * из Enter и пробела на `<button>` браузер делает сам, так что клавиатура
+ * триггера приходит сюда тем же путём.
+ *
+ * По открытому триггеру клик закрывает панель без мигания: корень — внутри
+ * владельца, и `pointerdown` перед кликом `TDismissPlugin` мимо не считает.
+ * Будь триггер снаружи, нажатие закрыло бы панель, а клик открыл бы снова.
+ *
+ * Панель внутри контейнера (`contained`) не телепортирована и лежит в самом
+ * корне: нажатие в ней всплывает до корня, но это не нажатие по триггеру.
+ * Панель плагин узнаёт у `TDismissPlugin`, по пометке владельцем.
+ *
+ * Внутри ли панели нажатие, решает путь события, а не цель: нажатие может
+ * сменить содержимое панели (выбор года в календаре пересобирает список под
+ * месяцы), и фреймворк перерисует его между обработчиками того же клика. До
+ * корня клик дойдёт с целью, которой в панели уже нет, а путь собран при
+ * отправке и панель в нём остаётся.
+ */
+export declare class TPopoverPointerPlugin extends TBasePlugin<any, TPopoverPointerPluginEvents> {
+    private _owner;
+    private _dismiss;
+    /** Узел нужен только под слушатель клика — отсюда и тип. */
+    private _element;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _unlisten;
+    private readonly _onClick;
+}

package/dist/custom/popover/pointer/pointer.plugin.js

@@ -0,0 +1,65 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { TDismissPlugin } from "../../dismiss/dismiss.plugin.js";
+//#region src/custom/popover/pointer/pointer.plugin.ts
+/**
+* TPopoverPointerPlugin — клик по триггеру Popover переключает панель.
+*
+* Слушает корень: в нём лежит только триггер (слот `trigger`), поэтому клик
+* по корню — это клик по триггеру, чем бы потребитель его ни нарисовал. Клик
+* из Enter и пробела на `<button>` браузер делает сам, так что клавиатура
+* триггера приходит сюда тем же путём.
+*
+* По открытому триггеру клик закрывает панель без мигания: корень — внутри
+* владельца, и `pointerdown` перед кликом `TDismissPlugin` мимо не считает.
+* Будь триггер снаружи, нажатие закрыло бы панель, а клик открыл бы снова.
+*
+* Панель внутри контейнера (`contained`) не телепортирована и лежит в самом
+* корне: нажатие в ней всплывает до корня, но это не нажатие по триггеру.
+* Панель плагин узнаёт у `TDismissPlugin`, по пометке владельцем.
+*
+* Внутри ли панели нажатие, решает путь события, а не цель: нажатие может
+* сменить содержимое панели (выбор года в календаре пересобирает список под
+* месяцы), и фреймворк перерисует его между обработчиками того же клика. До
+* корня клик дойдёт с целью, которой в панели уже нет, а путь собран при
+* отправке и панель в нём остаётся.
+*/
+var TPopoverPointerPlugin = class extends TBasePlugin {
+	_owner = null;
+	_dismiss = null;
+	/** Узел нужен только под слушатель клика — отсюда и тип. */
+	_element = null;
+	install(ctx) {
+		super.install(ctx);
+		this._owner = ctx.getInstance();
+		this._dismiss = ctx.get(TDismissPlugin) ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => {
+			this._element = element;
+			this._element.addEventListener("click", this._onClick);
+		});
+		elementPlugin?.events.on("removed", () => {
+			this._unlisten();
+			this._element = null;
+		});
+	}
+	destroy() {
+		this._unlisten();
+		this._element = null;
+		this._owner = null;
+		this._dismiss = null;
+		super.destroy();
+	}
+	_unlisten() {
+		this._element?.removeEventListener("click", this._onClick);
+	}
+	_onClick = (event) => {
+		const owner = this._owner;
+		const panel = this._dismiss?.findPanel();
+		if (!owner) return;
+		if (panel && event.composedPath().includes(panel)) return;
+		owner.open = !owner.open;
+	};
+};
+//#endregion
+export { TPopoverPointerPlugin };

package/dist/custom/popover/pointer/types.d.ts

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

package/dist/custom/radio-group/checked/checked.plugin.d.ts

@@ -0,0 +1,45 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+/**
+ * TRadioGroupCheckedPlugin — отметка полей группы по модели после выбора
+ * пользователя.
+ *
+ * Браузер отмечает нажатое радио и снимает отметку с соседа ещё до клика, а
+ * коллекция вправе выбор не принять: его отменил подписчик
+ * `item:activate:before`. Модель тогда не сменилась, и разметка поля не
+ * перерисует: и Vue, и React пишут `checked` в узел только на смену своего
+ * значения. Без этой записи на экране осталось бы отмеченным нажатое радио,
+ * а в модели — прежнее или ничего, и повторный клик по нажатому не выбрал бы
+ * ничего: отмеченному радио браузер `change` не шлёт.
+ *
+ * Поэтому после каждого `change` в группе плагин пишет `checked` каждому радио
+ * коллекции — по его активности. Плагин группы, а не радио: соседу, с которого
+ * браузер снял отметку, `change` не приходит, и вернуть её может только тот,
+ * кто видит все радио. Слушатель — на корне, в фазе всплытия: выбор
+ * пользователя коллекции отдаёт разметка радио — Vue на `change` самого поля,
+ * React ещё на `click`, — и до корня `change` доходит, когда модель уже
+ * решила.
+ *
+ * Пишется и отметка, совпавшая с узлом. React узнаёт отметку поля только по
+ * записи свойства и по ней решает, сменил ли клик отметку, прежде чем отдать
+ * `onChange` (см. `NativeInput` адаптера React). А нажатому радио отметку
+ * снимает и браузер — когда плагин возвращает её соседу, стоящему раньше:
+ * узел уже совпал с моделью, но React помнит отметку, увиденную на клике, и
+ * без записи повторный клик по этому радио `onChange` не дал бы.
+ *
+ * Радио — из коллекции группы (`engine:bound`), его узел — у реестра узлов
+ * (`TCollectionElements`), поле — по общему правилу полей (`fieldOf`) в
+ * узле. Радио без узла пропускается: поля, которое надо вернуть, у него нет.
+ */
+export declare class TRadioGroupCheckedPlugin extends TBasePlugin {
+    /** Корень группы: на нём слушатель. */
+    private _root;
+    private _elements;
+    private _engine;
+    install(ctx: IPluginContext): void;
+    destroy(): void;
+    private _attach;
+    private _detach;
+    /** Каждое поле группы — по активности его радио в коллекции. */
+    private readonly _onChange;
+}

package/dist/custom/radio-group/checked/checked.plugin.js

@@ -0,0 +1,81 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TCollectionBundlesPlugin } from "../../collection/bundles.plugin.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { TCollectionElements } from "../../collection/collection-elements.plugin.js";
+import { fieldOf } from "../../input/field.js";
+//#region src/custom/radio-group/checked/checked.plugin.ts
+/**
+* TRadioGroupCheckedPlugin — отметка полей группы по модели после выбора
+* пользователя.
+*
+* Браузер отмечает нажатое радио и снимает отметку с соседа ещё до клика, а
+* коллекция вправе выбор не принять: его отменил подписчик
+* `item:activate:before`. Модель тогда не сменилась, и разметка поля не
+* перерисует: и Vue, и React пишут `checked` в узел только на смену своего
+* значения. Без этой записи на экране осталось бы отмеченным нажатое радио,
+* а в модели — прежнее или ничего, и повторный клик по нажатому не выбрал бы
+* ничего: отмеченному радио браузер `change` не шлёт.
+*
+* Поэтому после каждого `change` в группе плагин пишет `checked` каждому радио
+* коллекции — по его активности. Плагин группы, а не радио: соседу, с которого
+* браузер снял отметку, `change` не приходит, и вернуть её может только тот,
+* кто видит все радио. Слушатель — на корне, в фазе всплытия: выбор
+* пользователя коллекции отдаёт разметка радио — Vue на `change` самого поля,
+* React ещё на `click`, — и до корня `change` доходит, когда модель уже
+* решила.
+*
+* Пишется и отметка, совпавшая с узлом. React узнаёт отметку поля только по
+* записи свойства и по ней решает, сменил ли клик отметку, прежде чем отдать
+* `onChange` (см. `NativeInput` адаптера React). А нажатому радио отметку
+* снимает и браузер — когда плагин возвращает её соседу, стоящему раньше:
+* узел уже совпал с моделью, но React помнит отметку, увиденную на клике, и
+* без записи повторный клик по этому радио `onChange` не дал бы.
+*
+* Радио — из коллекции группы (`engine:bound`), его узел — у реестра узлов
+* (`TCollectionElements`), поле — по общему правилу полей (`fieldOf`) в
+* узле. Радио без узла пропускается: поля, которое надо вернуть, у него нет.
+*/
+var TRadioGroupCheckedPlugin = class extends TBasePlugin {
+	/** Корень группы: на нём слушатель. */
+	_root = null;
+	_elements = null;
+	_engine = null;
+	install(ctx) {
+		super.install(ctx);
+		this._elements = ctx.get(TCollectionElements) ?? null;
+		const elementPlugin = ctx.get(TElementPlugin);
+		elementPlugin?.events.on("ready", (element) => this._attach(element));
+		elementPlugin?.events.on("removed", () => this._detach());
+		ctx.get(TCollectionBundlesPlugin)?.events.on("engine:bound", (engine) => {
+			this._engine = engine;
+		});
+	}
+	destroy() {
+		this._detach();
+		this._elements = null;
+		this._engine = null;
+		super.destroy();
+	}
+	_attach(root) {
+		this._detach();
+		this._root = root;
+		root.addEventListener("change", this._onChange);
+	}
+	_detach() {
+		this._root?.removeEventListener("change", this._onChange);
+		this._root = null;
+	}
+	/** Каждое поле группы — по активности его радио в коллекции. */
+	_onChange = () => {
+		const engine = this._engine;
+		if (!engine) return;
+		const activation = engine.extensions.activation;
+		for (const item of engine.extensions.batch.items) {
+			const element = this._elements?.getElementByItem(item);
+			const field = element ? fieldOf(element) : null;
+			if (field instanceof HTMLInputElement) field.checked = activation.isActive(item);
+		}
+	};
+};
+//#endregion
+export { TRadioGroupCheckedPlugin };

package/dist/custom/radio-group/checked/index.d.ts

@@ -0,0 +1 @@
+export * from './checked.plugin';

package/dist/custom/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './name';
+export * from './checked';
+export { radioStopOf } from './stop';

package/dist/custom/radio-group/name/index.d.ts

@@ -0,0 +1 @@
+export * from './name.plugin';

package/dist/custom/radio-group/name/name.plugin.d.ts

@@ -0,0 +1,21 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+/**
+ * TRadioGroupNamePlugin — общий `name` радио группы.
+ *
+ * Без общего `name` браузер не соберёт нативные радио в группу: не будет ни
+ * стрелок, ни одной остановки Tab, ни снятия отметки с соседа. Поэтому имя —
+ * механизм документа, а не значение группы: ядро держит только `name`, который
+ * задал потребитель (он же уходит в форму), а раздаёт имя радио этот плагин.
+ * Группе без своего имени он даёт `id` её монтирования (`createId`): он один на
+ * сервере и в браузере, и две безымянные группы на странице не сольются.
+ *
+ * Радио плагин узнаёт из коллекции группы (`engine:bound`) и пишет имя каждому:
+ * сразу, на смену состава (`change:items`) и на смену имени группы
+ * (`change:name`). Запись того же имени радио гасит сам. Движок привязывается
+ * при сборке, до первой отрисовки, — радио из данных получают имя уже в
+ * серверной разметке.
+ */
+export declare class TRadioGroupNamePlugin extends TBasePlugin {
+    install(ctx: IPluginContext): void;
+}

package/dist/custom/radio-group/name/name.plugin.js

@@ -0,0 +1,39 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TCollectionBundlesPlugin } from "../../collection/bundles.plugin.js";
+//#region src/custom/radio-group/name/name.plugin.ts
+/**
+* TRadioGroupNamePlugin — общий `name` радио группы.
+*
+* Без общего `name` браузер не соберёт нативные радио в группу: не будет ни
+* стрелок, ни одной остановки Tab, ни снятия отметки с соседа. Поэтому имя —
+* механизм документа, а не значение группы: ядро держит только `name`, который
+* задал потребитель (он же уходит в форму), а раздаёт имя радио этот плагин.
+* Группе без своего имени он даёт `id` её монтирования (`createId`): он один на
+* сервере и в браузере, и две безымянные группы на странице не сольются.
+*
+* Радио плагин узнаёт из коллекции группы (`engine:bound`) и пишет имя каждому:
+* сразу, на смену состава (`change:items`) и на смену имени группы
+* (`change:name`). Запись того же имени радио гасит сам. Движок привязывается
+* при сборке, до первой отрисовки, — радио из данных получают имя уже в
+* серверной разметке.
+*/
+var TRadioGroupNamePlugin = class extends TBasePlugin {
+	install(ctx) {
+		super.install(ctx);
+		const group = ctx.getInstance();
+		if (!group) return;
+		const unnamed = ctx.createId("group");
+		const name = (item) => {
+			item.name = group.name || unnamed;
+		};
+		ctx.get(TCollectionBundlesPlugin)?.events.on("engine:bound", (engine) => {
+			const radios = engine.extensions.batch;
+			const nameAll = () => radios.items.forEach(name);
+			nameAll();
+			this._listenTo(engine.extensions.plain.events, "change:items", nameAll);
+			this._listenTo(group.events, "change:name", nameAll);
+		});
+	}
+};
+//#endregion
+export { TRadioGroupNamePlugin };

package/dist/custom/radio-group/stop.d.ts

@@ -0,0 +1,17 @@
+import type { IPluginContext } from '../../base';
+/**
+ * Остановка группы радио — узел фокуса RadioGroup (`focusTarget` плагина
+ * действия): поле отмеченного радио, а без отметки — первого, на которое можно
+ * перейти. Туда же ведёт Tab: остановку группы по общему `name` выбирает
+ * браузер, и она одна.
+ *
+ * Отмеченное радио берётся по модели — активному в коллекции, — а не по
+ * `checked` поля: в такте смены значения разметка ещё старая, и фокус ушёл бы
+ * на прежнее радио. Отмеченное выключено или скрыто — фокус оно не примет, и
+ * остановка — первое, на которое можно перейти, как у табов. Поле — правилом
+ * узла фокуса радио (`fieldOf`), по узлу радио из реестра узлов коллекции.
+ *
+ * `null` — радио, на которые можно перейти, нет, или узла радио нет в
+ * документе.
+ */
+export declare function radioStopOf(_root: Element, ctx: IPluginContext): Element | null;

package/dist/custom/radio-group/stop.js

@@ -0,0 +1,30 @@
+import { TCollectionElements } from "../collection/collection-elements.plugin.js";
+import { isReachable } from "../collection/reachable.js";
+import { fieldOf } from "../input/field.js";
+import { activationOf, batchOf } from "@soxa-ui/core";
+//#region src/custom/radio-group/stop.ts
+/**
+* Остановка группы радио — узел фокуса RadioGroup (`focusTarget` плагина
+* действия): поле отмеченного радио, а без отметки — первого, на которое можно
+* перейти. Туда же ведёт Tab: остановку группы по общему `name` выбирает
+* браузер, и она одна.
+*
+* Отмеченное радио берётся по модели — активному в коллекции, — а не по
+* `checked` поля: в такте смены значения разметка ещё старая, и фокус ушёл бы
+* на прежнее радио. Отмеченное выключено или скрыто — фокус оно не примет, и
+* остановка — первое, на которое можно перейти, как у табов. Поле — правилом
+* узла фокуса радио (`fieldOf`), по узлу радио из реестра узлов коллекции.
+*
+* `null` — радио, на которые можно перейти, нет, или узла радио нет в
+* документе.
+*/
+function radioStopOf(_root, ctx) {
+	const elements = ctx.get(TCollectionElements) ?? null;
+	const engine = elements?.engine ?? null;
+	const checked = activationOf(engine)?.activeItem;
+	const radio = checked && isReachable(checked) ? checked : batchOf(engine)?.shown.find(isReachable);
+	const node = radio ? elements?.getElementByItem(radio) : null;
+	return node ? fieldOf(node) : null;
+}
+//#endregion
+export { radioStopOf };

package/dist/custom/rating/hover/hover.plugin.d.ts

@@ -0,0 +1,36 @@
+import type { IRating } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TRatingHoverPluginEvents } from './types';
+/**
+ * TRatingHoverPlugin — наведение на оценку: предпросмотр той оценки, которую
+ * поставит нажатие под указателем.
+ *
+ * Операция над DOM — здесь, значение — у владельца. Плагин переводит точку
+ * указателя в долю ряда по коробке дорожки — тем же счётом, что указатель
+ * перетаскивания (`slideDirection`, `fractionAt`): в RTL ряд растёт справа, —
+ * и зовёт `hover` владельца. Какую оценку показать, решает владелец: он
+ * округляет долю к шагу так же, как нажатие, и не показывает предпросмотра,
+ * когда оценку менять нельзя.
+ *
+ * Слушает корень, как указатель перетаскивания: нажатие ловит он же, и
+ * предпросмотр показывает ровно то, что поставит нажатие в этой точке.
+ *
+ * Наведение — не касание: палец над звездой — это уже нажатие, а
+ * предпросмотр после него остался бы висеть. Указатель ушёл с корня или
+ * корня не стало — предпросмотра нет.
+ */
+export declare class TRatingHoverPlugin extends TBasePlugin<IRating, TRatingHoverPluginEvents> {
+    private _owner;
+    private _root;
+    install(ctx: IPluginContext, options?: unknown): void;
+    destroy(): void;
+    private _attach;
+    /**
+     * Снять слушатели — и предпросмотр: у оценки без узла указателя над
+     * звёздами нет, а свой `ctrl` переживает размонтирование.
+     */
+    private _detach;
+    private readonly _onPointerMove;
+    private readonly _onPointerLeave;
+}

package/dist/custom/rating/hover/hover.plugin.js

@@ -0,0 +1,71 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { fractionAt, slideDirection } from "../../slide/direction.js";
+import { trackOf } from "../../slide/parts.js";
+//#region src/custom/rating/hover/hover.plugin.ts
+/**
+* TRatingHoverPlugin — наведение на оценку: предпросмотр той оценки, которую
+* поставит нажатие под указателем.
+*
+* Операция над DOM — здесь, значение — у владельца. Плагин переводит точку
+* указателя в долю ряда по коробке дорожки — тем же счётом, что указатель
+* перетаскивания (`slideDirection`, `fractionAt`): в RTL ряд растёт справа, —
+* и зовёт `hover` владельца. Какую оценку показать, решает владелец: он
+* округляет долю к шагу так же, как нажатие, и не показывает предпросмотра,
+* когда оценку менять нельзя.
+*
+* Слушает корень, как указатель перетаскивания: нажатие ловит он же, и
+* предпросмотр показывает ровно то, что поставит нажатие в этой точке.
+*
+* Наведение — не касание: палец над звездой — это уже нажатие, а
+* предпросмотр после него остался бы висеть. Указатель ушёл с корня или
+* корня не стало — предпросмотра нет.
+*/
+var TRatingHoverPlugin = class extends TBasePlugin {
+	_owner = null;
+	_root = null;
+	install(ctx, options) {
+		super.install(ctx, options);
+		this._owner = ctx.getInstance();
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => this._attach(node));
+		element?.events.on("removed", () => this._detach());
+	}
+	destroy() {
+		this._detach();
+		this._owner = null;
+		super.destroy();
+	}
+	_attach(root) {
+		this._detach();
+		this._root = root;
+		const target = root;
+		target.addEventListener("pointermove", this._onPointerMove);
+		target.addEventListener("pointerleave", this._onPointerLeave);
+	}
+	/**
+	* Снять слушатели — и предпросмотр: у оценки без узла указателя над
+	* звёздами нет, а свой `ctrl` переживает размонтирование.
+	*/
+	_detach() {
+		const target = this._root;
+		if (!target) return;
+		target.removeEventListener("pointermove", this._onPointerMove);
+		target.removeEventListener("pointerleave", this._onPointerLeave);
+		this._root = null;
+		this._owner?.hover(void 0);
+	}
+	_onPointerMove = (event) => {
+		const owner = this._owner;
+		const root = this._root;
+		if (!owner || !root || event.pointerType === "touch") return;
+		const track = trackOf(owner, root);
+		if (!track) return;
+		owner.hover(fractionAt(slideDirection(owner, root), track.getBoundingClientRect(), event));
+	};
+	_onPointerLeave = () => {
+		this._owner?.hover(void 0);
+	};
+};
+//#endregion
+export { TRatingHoverPlugin };

package/dist/custom/rating/hover/index.d.ts

@@ -0,0 +1,2 @@
+export { TRatingHoverPlugin } from './hover.plugin';
+export type { TRatingHoverPluginEvents } from './types';

package/dist/custom/rating/hover/types.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './hover';
+export * from './names';
+export * from './validity';

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

@@ -0,0 +1 @@
+export * from './names.plugin';

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

@@ -0,0 +1,25 @@
+import type { IRating } from '@soxa-ui/core';
+import { TNamesPlugin } from '../../../locale/names.plugin';
+import type { IPluginContext } from '../../../base';
+import type { TTranslations } from '../../../locale/types';
+/**
+ * TRatingNamesPlugin — как звучит оценка: `aria-valuetext` поля от локали,
+ * «4 из 5».
+ *
+ * Число поле объявило бы и само, но без наибольшей оценки скринридер не
+ * скажет, много это или мало. Строка — шаблон локали (`rating.value`), числа
+ * в ней — по тегу локали: «3,5 из 5», а не «3.5 из 5». Звёзд в строке нет:
+ * значок оценки меняет слот.
+ *
+ * Пишет в `aria` владельца — набор поля — при установке, на смену локали, на
+ * смену оценки и числа звёзд. Предпросмотр наведением строку не меняет:
+ * скринридер объявляет значение, а не то, что под указателем.
+ */
+export declare class TRatingNamesPlugin extends TNamesPlugin<IRating> {
+    /** Источник локали набора — за тегом для чисел: строки база отдаёт сама */
+    private _locale;
+    install(ctx: IPluginContext, options?: unknown): void;
+    destroy(): void;
+    protected _name(owner: IRating, translations: TTranslations): void;
+    protected _watch(owner: IRating, name: () => void): void;
+}

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

@@ -0,0 +1,45 @@
+import { TNamesPlugin } from "../../../locale/names.plugin.js";
+//#region src/custom/rating/names/names.plugin.ts
+/**
+* Строка значения: шаблон из локали, на месте `{value}` — оценка, на месте
+* `{max}` — наибольшая. Порядок слов у каждого языка свой, поэтому места в
+* шаблоне, а не склейка.
+*/
+function valueText(template, value, max) {
+	return template.split("{value}").join(value).split("{max}").join(max);
+}
+/**
+* TRatingNamesPlugin — как звучит оценка: `aria-valuetext` поля от локали,
+* «4 из 5».
+*
+* Число поле объявило бы и само, но без наибольшей оценки скринридер не
+* скажет, много это или мало. Строка — шаблон локали (`rating.value`), числа
+* в ней — по тегу локали: «3,5 из 5», а не «3.5 из 5». Звёзд в строке нет:
+* значок оценки меняет слот.
+*
+* Пишет в `aria` владельца — набор поля — при установке, на смену локали, на
+* смену оценки и числа звёзд. Предпросмотр наведением строку не меняет:
+* скринридер объявляет значение, а не то, что под указателем.
+*/
+var TRatingNamesPlugin = class extends TNamesPlugin {
+	/** Источник локали набора — за тегом для чисел: строки база отдаёт сама */
+	_locale = null;
+	install(ctx, options) {
+		this._locale = ctx.locale;
+		super.install(ctx, options);
+	}
+	destroy() {
+		this._locale = null;
+		super.destroy();
+	}
+	_name(owner, translations) {
+		const tag = this._locale?.locale.tag;
+		owner.aria.add("aria-valuetext", valueText(translations.rating.value, owner.value.toLocaleString(tag), owner.max.toLocaleString(tag)));
+	}
+	_watch(owner, name) {
+		this._listenTo(owner.events, "change:value", name);
+		this._listenTo(owner.events, "change:max", name);
+	}
+};
+//#endregion
+export { TRatingNamesPlugin };

package/dist/custom/rating/validity/index.d.ts

@@ -0,0 +1,2 @@
+export { TRatingValidityPlugin } from './validity.plugin';
+export type { TRatingValidityPluginEvents } from './types';

package/dist/custom/rating/validity/types.d.ts

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

package/dist/custom/rating/validity/validity.plugin.d.ts

@@ -0,0 +1,48 @@
+import type { IRating } from '@soxa-ui/core';
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { TRatingValidityPluginEvents } from './types';
+/**
+ * TRatingValidityPlugin — обязательная оценка: пока её нет, форма не
+ * отправляется.
+ *
+ * 0 у оценки значит «оценки нет», и обязательная оценка с 0 — то же, что
+ * пустое поле с `required`. Но поле оценки — `input[type=range]`: ни
+ * `required`, ни состояния «пусто» у него нет, у ползунка значение есть
+ * всегда. Поэтому ошибку полю ставит плагин — `setCustomValidity` со строкой
+ * локали `rating.required`, пока оценка обязательна, не только для показа и
+ * равна 0, — и снимает, когда условие ушло. Остальное делает браузер, как с
+ * любым неверным полем: не отправляет форму, ставит фокус на поле и
+ * показывает сообщение, а `disabled` из проверки исключает сам.
+ *
+ * Только для показа (`readonly`) ошибки нет, как у нативного поля `readonly`:
+ * его браузер тоже не проверяет. Свойства «неверно» у ядра нет: когда
+ * показывать ошибку, решает браузер, — до первой отправки нетронутая оценка
+ * не горит, — и тема красит её по `:user-invalid` поля.
+ *
+ * Пересчёт — на появление узла, смену оценки, обязательности, режима только
+ * для показа и локали. Без узла плагин ничего не делает: сборка идёт и на
+ * сервере, а поле, которому ставить ошибку, появится с `ready`. Отпустил узел
+ * или снят сам — ошибку с поля снимает: ставил её он.
+ */
+export declare class TRatingValidityPlugin extends TBasePlugin<IRating, TRatingValidityPluginEvents> {
+    private _owner;
+    /** Источник локали набора — за строкой ошибки на её языке */
+    private _locale;
+    /** Корень оценки, пока узел объявлен: поле плагин находит в нём */
+    private _root;
+    install(ctx: IPluginContext, options?: unknown): void;
+    destroy(): void;
+    private _attach;
+    private _detach;
+    /** Ошибка полю — по текущей оценке; оценки нет только у обязательной. */
+    private _sync;
+    /**
+     * Обязательной оценки нет: она равна 0 и её можно поставить. Только для
+     * показа её не ставят вовсе, и спрашивать её с пользователя нечего.
+     */
+    private _missing;
+    private _message;
+    /** Поле — у единственной ручки оценки, её `input`; узла нет — и поля нет. */
+    private _field;
+}