chuijs 4.0.3 → 4.0.4

package/framework/components/chui_theme_toggle/theme_toggle.js

@@ -3,6 +3,7 @@ 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`).
@@ -38,7 +39,8 @@ class ThemeToggle {
     #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;
@@ -49,17 +51,19 @@ class ThemeToggle {
             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) })),
             // Нажатие в переключателе — это выбор темы, а не просто новая подсветка
-            onChange: (mode) => this.setTheme(mode).catch(() => {}),
+            onChange: (mode) => this.#applyTheme(mode),
         });
         this.#bound = true;
         // Смена темы системой не проходит через переключатель — вид обновляем подпиской
@@ -71,7 +75,7 @@ class ThemeToggle {
                 this.#source = state.source;
                 this.#syncView(state.theme);
             })
-            .catch(() => {});
+            .catch((error) => reportError(error, this.#onError));
     }
 
     // GET
@@ -115,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;
         });
     }
@@ -136,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];

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_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

@@ -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,14 +57,14 @@ 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(
@@ -91,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);
@@ -131,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() {
@@ -158,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;
@@ -167,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;
@@ -179,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;
@@ -193,7 +193,7 @@ class Toast {
 
     /** Колбэк «тост убран» — очередь снимает его со своего учёта */
     onDismiss(listener = () => {}) {
-        this.#on_dismiss = listener;
+        this.#onDismiss = listener;
         return this;
     }
 
@@ -236,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;
     }
@@ -274,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);
     }
 

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_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 {

package/framework/components/chui_tooltip/tooltip.js

@@ -57,8 +57,8 @@ class Tooltip {
         setStyles(__dirname + "/styles.css", "chUiJS_Tooltip");
         // Пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
-        const markdown_text = optionOr(options.markdownText, undefined);
-        if (text !== undefined && markdown_text !== undefined) {
+        const markdownText = optionOr(options.markdownText, undefined);
+        if (text !== undefined && markdownText !== undefined) {
             throw new Error("Должна быть установлена одна опция text или markdownText");
         }
         Tooltip.#counter += 1;
@@ -70,7 +70,7 @@ class Tooltip {
         this.#tooltip.id = this.#id;
         this.#tooltip.setAttribute("role", "tooltip");
         if (text !== undefined) this.#tooltip.innerText = text;
-        if (markdown_text !== undefined) this.#tooltip.innerHTML = markdownToHtml(markdown_text);
+        if (markdownText !== undefined) this.#tooltip.innerHTML = markdownToHtml(markdownText);
         // Элемент живёт в body: координаты считаются в системе окна (position: fixed),
         // а внутри карточек с backdrop-filter/filter предок стал бы системой отсчёта.
         document.body.appendChild(this.#tooltip);

package/framework/components/chui_tour/styles.css

@@ -16,16 +16,16 @@ chui_tour {
    Тень обрезается слоем, поэтому не вылезает за окно. */
 tour_highlight {
     position: absolute;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     box-shadow:
         0 0 0 1px var(--blue_prime_background),
         0 0 0 9999px var(--modal_scrim);
     pointer-events: none;
     transition:
-        left var(--transition_time) ease,
-        top var(--transition_time) ease,
-        width var(--transition_time) ease,
-        height var(--transition_time) ease;
+        left var(--motion_base) var(--motion_ease),
+        top var(--motion_base) var(--motion_ease),
+        width var(--motion_base) var(--motion_ease),
+        height var(--motion_base) var(--motion_ease);
 }
 
 /* Без затемнения остаётся только рамка подсветки */
@@ -87,7 +87,7 @@ chui_tour tour_counter {
     height: var(--toolbar_control_size);
     margin: 0;
     padding: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--button_background);
     border: 1px solid var(--button_border_color);
     color: var(--text_color);
@@ -120,8 +120,8 @@ chui_tour tour_counter {
 .tour_next:hover {
     /* Главное действие остаётся акцентным и под курсором: фон лишь чуть
        разжижается, текст остаётся белым — иначе тёмное по синему */
-    background: var(--blue_prime_background_trans);
-    border-color: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
+    border-color: var(--blue_prime_background_tint_strong);
     color: var(--text_color_hover);
 }