chuijs 4.0.2 → 4.0.4

package/framework/components/chui_theme_toggle/theme_toggle.js

@@ -1,8 +1,9 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {optionOr} = require("../../modules/chui_functions");
-const {SegmentedControl} = require("../chui_segmented_control/segmented_control");
-const {Desktop} = require("../../modules/chui_services/desktop");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr } = require("../../modules/chui_functions");
+const { SegmentedControl } = require("../chui_segmented_control/segmented_control");
+const { Desktop } = require("../../modules/chui_services/desktop");
+const { reportError } = require("../../modules/chui_logger/chui_logger");
 
 /**
  * Переключатель темы: светлая, тёмная и системная (набор задаётся опцией `modes`).
@@ -21,52 +22,60 @@ class ThemeToggle {
     static MODE = {
         LIGHT: "light",
         DARK: "dark",
-        SYSTEM: "system"
+        SYSTEM: "system",
     };
     // Ключи подписей режимов; сам текст берётся лениво — язык может смениться между запусками
     static #DEFAULT_LABEL_KEYS = {
         light: "graphics.themeLight",
         dark: "graphics.themeDark",
-        system: "graphics.themeSystem"
+        system: "graphics.themeSystem",
     };
     static #ICONS = {
         light: "LIGHT_MODE",
         dark: "DARK_MODE",
-        system: "BRIGHTNESS_AUTO"
+        system: "BRIGHTNESS_AUTO",
     };
 
     #control = undefined;
     #modes = [ThemeToggle.MODE.LIGHT, ThemeToggle.MODE.DARK, ThemeToggle.MODE.SYSTEM];
     #labels = {};
-    #on_change = undefined;
+    #onChange = undefined;
+    #onError = undefined;
     #source = undefined;
     #unsubscribe = undefined;
     #bound = false;
 
-    constructor(options = {
-        modes: [],
-        labels: {},
-        label: String(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            modes: [],
+            labels: {},
+            label: String(),
+            onChange: undefined,
+            onError: undefined,
+        }
+    ) {
         if (Array.isArray(options.modes) && options.modes.length > 0) this.#modes = options.modes;
         this.#labels = options.labels === undefined ? {} : options.labels;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
+        this.#onError = options.onError;
         this.#control = new SegmentedControl({
             id: options.id,
             label: optionOr(options.label, I18n.t("graphics.settingsAppearance")),
-            options: this.#modes.map((mode) => ({value: mode, title: this.#title(mode), icon: this.#icon(mode)})),
+            options: this.#modes.map((mode) => ({ value: mode, title: this.#title(mode), icon: this.#icon(mode) })),
             // Нажатие в переключателе — это выбор темы, а не просто новая подсветка
-            onChange: (mode) => this.setTheme(mode).catch(() => {})
+            onChange: (mode) => this.#applyTheme(mode),
         });
         this.#bound = true;
         // Смена темы системой не проходит через переключатель — вид обновляем подпиской
         this.#unsubscribe = Desktop.theme.onChange((theme) => this.#syncView(theme));
-        Desktop.theme.get().then((state) => {
-            if (!this.#bound) return;
-            this.#source = state.source;
-            this.#syncView(state.theme);
-        }).catch(() => {});
+        Desktop.theme
+            .get()
+            .then((state) => {
+                if (!this.#bound) return;
+                this.#source = state.source;
+                this.#syncView(state.theme);
+            })
+            .catch((error) => reportError(error, this.#onError));
     }
 
     // GET
@@ -110,7 +119,7 @@ class ThemeToggle {
             if (!this.#bound) return state;
             this.#source = state.source;
             this.#syncView(state.theme);
-            if (this.#on_change !== undefined) this.#on_change(state.source, state);
+            if (this.#onChange !== undefined) this.#onChange(state.source, state);
             return state;
         });
     }
@@ -131,6 +140,18 @@ class ThemeToggle {
     }
 
     // === ВНУТРЕННЕЕ ===
+    /**
+     * Выбор темы из переключателя. Тема не применилась — сообщаем об ошибке и возвращаем отметку
+     * к прежнему источнику: переключатель уже успел показать новый режим, и без отката вид врал бы
+     * (отмена идёт тихо, `setValue(..., true)`, поэтому `onChange` не вызывается заново).
+     */
+    #applyTheme(mode = String()) {
+        this.setTheme(mode).catch((error) => {
+            this.#syncView(undefined);
+            reportError(error, this.#onError);
+        });
+    }
+
     #title(mode = String()) {
         if (this.#labels[mode] !== undefined) return this.#labels[mode];
         const key = ThemeToggle.#DEFAULT_LABEL_KEYS[mode];
@@ -155,4 +176,4 @@ class ThemeToggle {
     }
 }
 
-exports.ThemeToggle = ThemeToggle
+exports.ThemeToggle = ThemeToggle;

package/framework/components/chui_timeline/styles.css

@@ -2,7 +2,7 @@
 chui_timeline {
     display: block;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -24,6 +24,8 @@ chui_timeline[data-size="small"] {
     grid-template-rows: 1fr auto 1fr;
     align-items: stretch;
     column-gap: 12px;
+    /* Событие ленты встаёт на место: кадр общий — см. `chui_appear_up` в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
 }
 
 .timeline_marker {

package/framework/components/chui_timeline/timeline.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {Icon} = require("../chui_icons/icons");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Icon } = require("../chui_icons/icons");
 
 /**
  * Лента событий: что случилось и когда.
@@ -29,7 +29,7 @@ class Timeline {
         DEFAULT: "default",
         SUCCESS: "success",
         WARNING: "warning",
-        ERROR: "error"
+        ERROR: "error",
     };
     static #counter = 0;
 
@@ -39,12 +39,14 @@ class Timeline {
     #items = [];
     #label = undefined;
 
-    constructor(options = {
-        id: String(),
-        items: [],
-        label: String(),
-        size: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            items: [],
+            label: String(),
+            size: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Timeline");
         Timeline.#counter += 1;
         this.#id = options.id === undefined ? `chui_timeline_${Timeline.#counter}` : options.id;
@@ -215,9 +217,9 @@ class Timeline {
 
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static ICON_SIZE = "16px";
 }
 
-exports.Timeline = Timeline
+exports.Timeline = Timeline;

package/framework/components/chui_toast_queue/styles.css

@@ -4,31 +4,31 @@ chui_toast_queue {
     z-index: 1002;
     display: flex;
     flex-direction: column;
-    gap: var(--margin);
-    max-width: calc(100% - (var(--margin) * 2));
+    gap: var(--block_margin);
+    max-width: calc(100% - (var(--block_margin) * 2));
     pointer-events: none;
 }
 
 chui_toast_queue[data-position="bottom_right"] {
-    inset-inline-end: var(--margin);
-    bottom: var(--margin);
+    inset-inline-end: var(--block_margin);
+    bottom: var(--block_margin);
 }
 
 chui_toast_queue[data-position="bottom_left"] {
-    inset-inline-start: var(--margin);
-    bottom: var(--margin);
+    inset-inline-start: var(--block_margin);
+    bottom: var(--block_margin);
 }
 
 /* Сверху новые тосты растут к углу — порядок обратный (column-reverse) */
 chui_toast_queue[data-position="top_right"] {
-    inset-inline-end: var(--margin);
-    top: var(--margin);
+    inset-inline-end: var(--block_margin);
+    top: var(--block_margin);
     flex-direction: column-reverse;
 }
 
 chui_toast_queue[data-position="top_left"] {
-    inset-inline-start: var(--margin);
-    top: var(--margin);
+    inset-inline-start: var(--block_margin);
+    top: var(--block_margin);
     flex-direction: column-reverse;
 }
 
@@ -88,7 +88,7 @@ toast_actions {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--margin);
+    gap: var(--block_margin);
     flex-shrink: 0;
 }
 

package/framework/components/chui_toast_queue/toast_queue.js

@@ -1,32 +1,32 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {Button} = require('../chui_button/button');
-const {setStyles, markdownToHtml, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Button } = require("../chui_button/button");
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 // Плашка значка — общая с карточками уведомлений: одна фигура и одни цвета статуса
-const {createStatusPlate, setStatusPlate} = require("../chui_notification/status_plate");
+const { createStatusPlate, setStatusPlate } = require("../chui_notification/status_plate");
 
 /** Стили тостов. `ERROR` объявляется скринридером сразу (`role="alert"`), остальные — вежливо (`role="status"`). */
 const STYLE = {
     INFO: "toast_info",
     SUCCESS: "toast_success",
     WARNING: "toast_warning",
-    ERROR: "toast_error"
+    ERROR: "toast_error",
 };
 /** Угол окна, в котором растёт стопка тостов */
 const POSITION = {
     TOP_LEFT: "top_left",
     TOP_RIGHT: "top_right",
     BOTTOM_LEFT: "bottom_left",
-    BOTTOM_RIGHT: "bottom_right"
+    BOTTOM_RIGHT: "bottom_right",
 };
 /** Ключ статуса для общей плашки значка: глифы и цвета те же, что у карточек уведомлений */
 const PLATE_STATUS = {
     [STYLE.INFO]: undefined,
     [STYLE.SUCCESS]: "success",
     [STYLE.WARNING]: "warning",
-    [STYLE.ERROR]: "error"
+    [STYLE.ERROR]: "error",
 };
 
 /**
@@ -46,8 +46,8 @@ class Toast {
 
     #id = undefined;
     #toast = document.createElement("chui_toast");
-    #icon_box = undefined;
-    #icon_custom = undefined;
+    #iconBox = undefined;
+    #iconCustom = undefined;
     #body = document.createElement("toast_body");
     #title = document.createElement("toast_title");
     #text = document.createElement("toast_text");
@@ -57,27 +57,29 @@ class Toast {
     #style = STYLE.INFO;
     #duration = 0;
     #closable = true;
-    #title_used = false;
-    #text_used = false;
+    #titleUsed = false;
+    #textUsed = false;
     //
     #timer = undefined;
     #deadline = 0;
     #remaining = 0;
     #dismissed = false;
-    #on_dismiss = undefined;
+    #onDismiss = undefined;
     #listeners = [];
 
-    constructor(options = {
-        id: String(),
-        style: String(),
-        title: String(),
-        text: String(),
-        markdownText: String(),
-        duration: Number(),
-        closable: Boolean(),
-        icon: String(),
-        action: { title: String(), listener: undefined, close: Boolean() }
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            style: String(),
+            title: String(),
+            text: String(),
+            markdownText: String(),
+            duration: Number(),
+            closable: Boolean(),
+            icon: String(),
+            action: { title: String(), listener: undefined, close: Boolean() },
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ToastQueue");
         Toast.#counter += 1;
         this.#id = options.id === undefined ? `chui_toast_${Toast.#counter}` : options.id;
@@ -89,32 +91,32 @@ class Toast {
         // Пустая заготовка опции равносильна отсутствующей — пустого узла не появляется
         const title = optionOr(options.title, undefined);
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
+        const markdownText = optionOr(options.markdownText, undefined);
         if (title !== undefined) {
-            this.#title_used = true;
+            this.#titleUsed = true;
             this.#title.innerText = title;
             this.#body.appendChild(this.#title);
         }
-        if (text !== undefined && markdown_text !== undefined) {
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         }
         if (text !== undefined) {
-            this.#text_used = true;
+            this.#textUsed = true;
             this.#text.innerText = text;
             this.#body.appendChild(this.#text);
         }
-        if (markdown_text !== undefined) {
-            this.#text_used = true;
-            this.#text.innerHTML = markdownToHtml(markdown_text);
+        if (markdownText !== undefined) {
+            this.#textUsed = true;
+            this.#text.innerHTML = markdownToHtml(markdownText);
             this.#body.appendChild(this.#text);
         }
         const icon = options.icon;
         // Пустая опция icon отключает иконку (в том числе иконку стиля) — пустой бокс не ставим.
         // Плашка общая с карточками уведомлений: цвет статуса и фигура — одни на всех
         if (icon !== "") {
-            this.#icon_custom = icon;
-            this.#icon_box = createStatusPlate(PLATE_STATUS[this.#style], icon);
-            this.#toast.appendChild(this.#icon_box);
+            this.#iconCustom = icon;
+            this.#iconBox = createStatusPlate(PLATE_STATUS[this.#style], icon);
+            this.#toast.appendChild(this.#iconBox);
         }
         this.#toast.appendChild(this.#body);
         if (options.action !== undefined) this.#addAction(options.action);
@@ -129,11 +131,11 @@ class Toast {
     }
 
     getTitle() {
-        return this.#title_used ? this.#title.innerText : "";
+        return this.#titleUsed ? this.#title.innerText : "";
     }
 
     getText() {
-        return this.#text_used ? this.#text.innerText : "";
+        return this.#textUsed ? this.#text.innerText : "";
     }
 
     getStyle() {
@@ -156,8 +158,8 @@ class Toast {
     }
 
     setTitle(title = String()) {
-        if (!this.#title_used) {
-            this.#title_used = true;
+        if (!this.#titleUsed) {
+            this.#titleUsed = true;
             this.#body.prepend(this.#title);
         }
         this.#title.innerText = title;
@@ -165,8 +167,8 @@ class Toast {
     }
 
     setText(text = String()) {
-        if (!this.#text_used) {
-            this.#text_used = true;
+        if (!this.#textUsed) {
+            this.#textUsed = true;
             this.#body.appendChild(this.#text);
         }
         this.#text.innerText = text;
@@ -177,7 +179,7 @@ class Toast {
         this.#style = style;
         for (const value of Object.values(STYLE)) this.#toast.classList.toggle(value, value === style);
         // Плашка перекрашивается вместе со стилем, а свой значок остаётся собой
-        if (this.#icon_box !== undefined) setStatusPlate(this.#icon_box, PLATE_STATUS[style], this.#icon_custom);
+        if (this.#iconBox !== undefined) setStatusPlate(this.#iconBox, PLATE_STATUS[style], this.#iconCustom);
         // Ошибку объявляем сразу, остальное — вежливо
         this.#toast.setAttribute("role", style === STYLE.ERROR ? "alert" : "status");
         return this;
@@ -191,7 +193,7 @@ class Toast {
 
     /** Колбэк «тост убран» — очередь снимает его со своего учёта */
     onDismiss(listener = () => {}) {
-        this.#on_dismiss = listener;
+        this.#onDismiss = listener;
         return this;
     }
 
@@ -234,7 +236,10 @@ class Toast {
         this.#clearTimer();
         this.#notifyDismiss();
         // Анимация уходa сработает только при заданном animationName — ставим его, если тост не показывали
-        if (this.#toast.style.animationName === "") this.#toast.style.animationName = "fade-in";
+        if (this.#toast.style.animationName === "") {
+            this.#toast.style.animationName = "fade-in";
+            this.#toast.dataset.motion = "enter";
+        }
         new Animation(this.#toast).fadeOutAndRemove();
         return this;
     }
@@ -263,7 +268,7 @@ class Toast {
     #onTimeout = () => {
         this.#timer = undefined;
         this.dismiss();
-    }
+    };
 
     #clearTimer() {
         if (this.#timer !== undefined) clearTimeout(this.#timer);
@@ -272,9 +277,9 @@ class Toast {
     }
 
     #notifyDismiss() {
-        if (this.#on_dismiss === undefined) return;
-        const listener = this.#on_dismiss;
-        this.#on_dismiss = undefined;
+        if (this.#onDismiss === undefined) return;
+        const listener = this.#onDismiss;
+        this.#onDismiss = undefined;
         listener(this);
     }
 
@@ -284,7 +289,7 @@ class Toast {
             clickEvent: () => {
                 if (action.listener !== undefined) action.listener();
                 if (action.close !== false) this.dismiss();
-            }
+            },
         });
         this.#actions.appendChild(button.set());
     }
@@ -347,15 +352,17 @@ class ToastQueue {
     #duration = ToastQueue.DEFAULT_DURATION;
     #closable = true;
 
-    constructor(options = {
-        id: String(),
-        position: String(),
-        max: Number(),
-        duration: Number(),
-        width: String(),
-        closable: Boolean(),
-        label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            position: String(),
+            max: Number(),
+            duration: Number(),
+            width: String(),
+            closable: Boolean(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ToastQueue");
         ToastQueue.#counter += 1;
         this.#id = options.id === undefined ? `chui_toast_queue_${ToastQueue.#counter}` : options.id;
@@ -425,20 +432,22 @@ class ToastQueue {
 
     // ОЧЕРЕДЬ
     /** Добавить тост: title, text, markdownText, style, duration, closable, icon, action, id */
-    push(options = {
-        title: String(),
-        text: String(),
-        markdownText: String(),
-        style: String(),
-        duration: Number(),
-        closable: Boolean(),
-        icon: String(),
-        action: { title: String(), listener: undefined, close: Boolean() }
-    }) {
+    push(
+        options = {
+            title: String(),
+            text: String(),
+            markdownText: String(),
+            style: String(),
+            duration: Number(),
+            closable: Boolean(),
+            icon: String(),
+            action: { title: String(), listener: undefined, close: Boolean() },
+        }
+    ) {
         const toast = new Toast({
             ...options,
             duration: options.duration === undefined ? this.#duration : options.duration,
-            closable: options.closable === undefined ? this.#closable : options.closable
+            closable: options.closable === undefined ? this.#closable : options.closable,
         });
         toast.onDismiss(() => this.#forget(toast));
         this.#toasts.push(toast);
@@ -451,7 +460,7 @@ class ToastQueue {
 
     /** Убрать тост по объекту или по id (без id — ничего не делает) */
     dismiss(target) {
-        const toast = typeof target === "string" ? this.#toasts.find(item => item.getId() === target) : target;
+        const toast = typeof target === "string" ? this.#toasts.find((item) => item.getId() === target) : target;
         if (toast === undefined || toast === null) return this;
         toast.dismiss();
         return this;
@@ -491,5 +500,5 @@ class ToastQueue {
     }
 }
 
-exports.ToastQueue = ToastQueue
-exports.Toast = Toast
+exports.ToastQueue = ToastQueue;
+exports.Toast = Toast;

package/framework/components/chui_toolbar/styles.css

@@ -6,10 +6,10 @@ chui_toolbar {
     box-sizing: border-box;
     width: max-content;
     max-width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     padding: 3px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow-x: auto;
 }

package/framework/components/chui_toolbar/toolbar.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {A11Y_FOCUSABLE_SELECTOR} = require('../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { A11Y_FOCUSABLE_SELECTOR } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Панель инструментов: ряд кнопок и контролов с одним «стопом» клавиатуры.
@@ -26,7 +26,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Toolbar {
     static ORIENTATION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static #counter = 0;
 
@@ -35,12 +35,14 @@ class Toolbar {
     #orientation = Toolbar.ORIENTATION.HORIZONTAL;
     #label = I18n.t("navigation.toolbar");
 
-    constructor(options = {
-        id: String(),
-        orientation: String(),
-        label: String(),
-        items: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            orientation: String(),
+            label: String(),
+            items: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Toolbar");
         Toolbar.#counter += 1;
         this.#id = options.id === undefined ? `chui_toolbar_${Toolbar.#counter}` : options.id;
@@ -80,7 +82,10 @@ class Toolbar {
     }
 
     setOrientation(orientation = String()) {
-        this.#orientation = orientation === Toolbar.ORIENTATION.VERTICAL ? Toolbar.ORIENTATION.VERTICAL : Toolbar.ORIENTATION.HORIZONTAL;
+        this.#orientation =
+            orientation === Toolbar.ORIENTATION.VERTICAL
+                ? Toolbar.ORIENTATION.VERTICAL
+                : Toolbar.ORIENTATION.HORIZONTAL;
         this.#root.dataset.orientation = this.#orientation;
         this.#root.setAttribute("aria-orientation", this.#orientation);
         return this;
@@ -129,7 +134,9 @@ class Toolbar {
         const forward = this.#orientation === Toolbar.ORIENTATION.VERTICAL ? "ArrowDown" : "ArrowRight";
         if (![backward, forward, "Home", "End"].includes(event.key)) return;
         const items = this.#focusable();
-        const current = items.findIndex((node) => node === document.activeElement || node.contains(document.activeElement));
+        const current = items.findIndex(
+            (node) => node === document.activeElement || node.contains(document.activeElement)
+        );
         if (current === -1) return;
         event.preventDefault();
         if (event.key === "Home") items[0].focus();
@@ -142,4 +149,4 @@ class Toolbar {
     };
 }
 
-exports.Toolbar = Toolbar
+exports.Toolbar = Toolbar;

package/framework/components/chui_tooltip/styles.css

@@ -11,7 +11,7 @@ chui_tooltip {
     width: max-content;
     padding: var(--control_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     -webkit-backdrop-filter: var(--global_blur);
@@ -22,7 +22,7 @@ chui_tooltip {
     line-height: 1.35;
     text-align: start;
     pointer-events: none;
-    animation: chui_tooltip_fade_in 120ms ease-out;
+    animation: chui_tooltip_fade_in var(--motion_fast) var(--motion_ease);
 }
 
 chui_tooltip p {