chuijs 4.0.2 → 4.0.3

package/framework/components/chui_theme_toggle/theme_toggle.js

@@ -1,8 +1,8 @@
-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");
 
 /**
  * Переключатель темы: светлая, тёмная и системная (набор задаётся опцией `modes`).
@@ -21,18 +21,18 @@ 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;
@@ -43,30 +43,35 @@ class ThemeToggle {
     #unsubscribe = undefined;
     #bound = false;
 
-    constructor(options = {
-        modes: [],
-        labels: {},
-        label: String(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            modes: [],
+            labels: {},
+            label: String(),
+            onChange: 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.#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.setTheme(mode).catch(() => {}),
         });
         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(() => {});
     }
 
     // GET
@@ -155,4 +160,4 @@ class ThemeToggle {
     }
 }
 
-exports.ThemeToggle = ThemeToggle
+exports.ThemeToggle = ThemeToggle;

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/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",
 };
 
 /**
@@ -67,17 +67,19 @@ class Toast {
     #on_dismiss = 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;
@@ -263,7 +265,7 @@ class Toast {
     #onTimeout = () => {
         this.#timer = undefined;
         this.dismiss();
-    }
+    };
 
     #clearTimer() {
         if (this.#timer !== undefined) clearTimeout(this.#timer);
@@ -284,7 +286,7 @@ class Toast {
             clickEvent: () => {
                 if (action.listener !== undefined) action.listener();
                 if (action.close !== false) this.dismiss();
-            }
+            },
         });
         this.#actions.appendChild(button.set());
     }
@@ -347,15 +349,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 +429,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 +457,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 +497,5 @@ class ToastQueue {
     }
 }
 
-exports.ToastQueue = ToastQueue
-exports.Toast = Toast
+exports.ToastQueue = ToastQueue;
+exports.Toast = Toast;

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/tooltip.js

@@ -1,4 +1,4 @@
-const {setStyles, markdownToHtml, htmlToMarkdown, optionOr} = require('../../modules/chui_functions');
+const { setStyles, markdownToHtml, htmlToMarkdown, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Всплывающая подсказка (тултип) к любому элементу.
@@ -24,7 +24,7 @@ class Tooltip {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор между целью и подсказкой, px */
     static GAP = 8;
@@ -45,13 +45,15 @@ class Tooltip {
     // destroy() сделан окончательным: после него инстанс не показывает подсказку и не вешает описания
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        placement: String(),
-        delay: Number()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            markdownText: String(),
+            placement: String(),
+            delay: Number(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Tooltip");
         // Пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
@@ -119,11 +121,15 @@ class Tooltip {
         if (this.#destroyed) return this;
         const element = Tooltip.#resolve(target);
         if (element === undefined || element === null) return this;
-        if (this.#targets.some(entry => entry.element === element)) return this;
+        if (this.#targets.some((entry) => entry.element === element)) return this;
         // Описание вешается на фокусируемый узел: у обёртки-компонента (Button → chui_button)
         // свой aria-describedby скринридеру не достаётся — читают кнопку, а не обёртку
         const described = Tooltip.#describedTarget(element);
-        const entry = {element: element, described: described, describedBy: described.getAttribute("aria-describedby")};
+        const entry = {
+            element: element,
+            described: described,
+            describedBy: described.getAttribute("aria-describedby"),
+        };
         entry.onMouseEnter = () => this.#scheduleShow(element);
         entry.onMouseLeave = (event) => {
             // Переход внутрь цели (к её детям) подсказку не закрывает
@@ -153,7 +159,7 @@ class Tooltip {
 
     detach(target) {
         const element = Tooltip.#resolve(target);
-        const index = this.#targets.findIndex(entry => entry.element === element);
+        const index = this.#targets.findIndex((entry) => entry.element === element);
         if (index === -1) return this;
         const entry = this.#targets[index];
         element.removeEventListener("mouseenter", entry.onMouseEnter);
@@ -170,9 +176,12 @@ class Tooltip {
     // ПОКАЗ / СКРЫТИЕ
     show(target = undefined) {
         if (this.#destroyed || !document.body.contains(this.#tooltip)) return;
-        const element = target === undefined
-            ? (this.#current !== undefined ? this.#current : Tooltip.#resolve((this.#targets[0] || {}).element))
-            : Tooltip.#resolve(target);
+        const element =
+            target === undefined
+                ? this.#current !== undefined
+                    ? this.#current
+                    : Tooltip.#resolve((this.#targets[0] || {}).element)
+                : Tooltip.#resolve(target);
         if (element === undefined || element === null || !document.body.contains(element)) return;
         this.#clearTimer();
         this.#current = element;
@@ -224,7 +233,7 @@ class Tooltip {
         }
         const ids = String(entry.describedBy === null ? "" : entry.describedBy)
             .split(/\s+/)
-            .filter(id => id !== "");
+            .filter((id) => id !== "");
         if (!ids.includes(this.#id)) ids.push(this.#id);
         entry.described.setAttribute("aria-describedby", ids.join(" "));
     }
@@ -265,9 +274,12 @@ class Tooltip {
         let placement = this.#placement;
         // Флип на противоположную сторону, если по выбранной подсказка не помещается
         if (placement === Tooltip.PLACEMENT.TOP && rect.top - height - gap < edge) placement = Tooltip.PLACEMENT.BOTTOM;
-        else if (placement === Tooltip.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge) placement = Tooltip.PLACEMENT.TOP;
-        else if (placement === Tooltip.PLACEMENT.LEFT && rect.left - width - gap < edge) placement = Tooltip.PLACEMENT.RIGHT;
-        else if (placement === Tooltip.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge) placement = Tooltip.PLACEMENT.LEFT;
+        else if (placement === Tooltip.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge)
+            placement = Tooltip.PLACEMENT.TOP;
+        else if (placement === Tooltip.PLACEMENT.LEFT && rect.left - width - gap < edge)
+            placement = Tooltip.PLACEMENT.RIGHT;
+        else if (placement === Tooltip.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge)
+            placement = Tooltip.PLACEMENT.LEFT;
 
         let left, top;
         if (placement === Tooltip.PLACEMENT.LEFT || placement === Tooltip.PLACEMENT.RIGHT) {
@@ -303,10 +315,11 @@ class Tooltip {
     #scheduleShow(element) {
         if (!document.body.contains(element)) return;
         this.#clearTimer();
-        if (this.#delay > 0) this.#timer = setTimeout(() => {
-            this.#timer = undefined;
-            this.show(element);
-        }, this.#delay);
+        if (this.#delay > 0)
+            this.#timer = setTimeout(() => {
+                this.#timer = undefined;
+                this.show(element);
+            }, this.#delay);
         else this.show(element);
     }
 
@@ -317,4 +330,4 @@ class Tooltip {
     }
 }
 
-exports.Tooltip = Tooltip
+exports.Tooltip = Tooltip;

package/framework/components/chui_tour/styles.css

@@ -17,10 +17,15 @@ chui_tour {
 tour_highlight {
     position: absolute;
     border-radius: var(--border_radius);
-    box-shadow: 0 0 0 1px var(--blue_prime_background), 0 0 0 9999px var(--modal_scrim);
+    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;
+    transition:
+        left var(--transition_time) ease,
+        top var(--transition_time) ease,
+        width var(--transition_time) ease,
+        height var(--transition_time) ease;
 }
 
 /* Без затемнения остаётся только рамка подсветки */