chuijs 4.0.2 → 4.0.3

package/framework/components/chui_statistic/statistic.js

@@ -1,12 +1,12 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Значок направления изменения — один на строку тренда */
 const TREND_ICONS = {
     up: Icons.ACTIONS.TRENDING_UP,
     down: Icons.ACTIONS.TRENDING_DOWN,
-    flat: Icons.ACTIONS.TRENDING_FLAT
+    flat: Icons.ACTIONS.TRENDING_FLAT,
 };
 
 /**
@@ -40,19 +40,19 @@ class Statistic {
     static SIZE = {
         SMALL: "small",
         DEFAULT: "default",
-        LARGE: "large"
+        LARGE: "large",
     };
     static STYLE = {
         DEFAULT: "statistic_default",
         ACCENT: "statistic_accent",
         SUCCESS: "statistic_success",
         WARNING: "statistic_warning",
-        ERROR: "statistic_error"
+        ERROR: "statistic_error",
     };
     static TREND = {
         UP: "up",
         DOWN: "down",
-        FLAT: "flat"
+        FLAT: "flat",
     };
     static #counter = 0;
     static #DEFAULT_DURATION = 600;
@@ -85,12 +85,24 @@ class Statistic {
     #style = Statistic.STYLE.DEFAULT;
     #animation_id = undefined;
 
-    constructor(options = {
-        id: String(), title: String(), value: Number(),
-        prefix: String(), suffix: String(), precision: Number(), format: undefined,
-        trend: undefined, icon: undefined, size: String(), style: String(),
-        animated: Boolean(), duration: Number(), label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            value: Number(),
+            prefix: String(),
+            suffix: String(),
+            precision: Number(),
+            format: undefined,
+            trend: undefined,
+            icon: undefined,
+            size: String(),
+            style: String(),
+            animated: Boolean(),
+            duration: Number(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Statistic");
         Statistic.#counter += 1;
         this.#id = optionOr(options.id, `chui_statistic_${Statistic.#counter}`);
@@ -173,7 +185,7 @@ class Statistic {
     }
 
     getTrend() {
-        return this.#trend === undefined ? undefined : {...this.#trend};
+        return this.#trend === undefined ? undefined : { ...this.#trend };
     }
 
     getStyle() {
@@ -294,7 +306,7 @@ class Statistic {
             precision: trend.precision === undefined ? 0 : trend.precision,
             label: optionOr(trend.label, ""),
             text: trend.text === undefined ? undefined : String(trend.text),
-            style: trend.style
+            style: trend.style,
         };
         this.#syncTrend();
         return this;
@@ -312,9 +324,12 @@ class Statistic {
             this.#icon.hidden = true;
             return this;
         }
-        this.#icon_node = typeof icon === "string"
-            ? new Icon(icon, "16px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        this.#icon_node =
+            typeof icon === "string"
+                ? new Icon(icon, "16px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         this.#icon.innerHTML = "";
         this.#icon.appendChild(this.#icon_node);
         this.#icon.hidden = false;
@@ -363,18 +378,24 @@ class Statistic {
     }
 
     static #reducedMotion() {
-        return typeof window !== "undefined" && typeof window.matchMedia === "function" &&
-            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        return (
+            typeof window !== "undefined" &&
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        );
     }
 
     /** Форматтер по языку интерфейса: разряды и запятая разбираются по локали */
     static #formatter(locale = "ru", precision = 0) {
         const key = `${locale}|${precision}`;
         if (!Statistic.#formatters.has(key)) {
-            Statistic.#formatters.set(key, new Intl.NumberFormat(locale, {
-                minimumFractionDigits: precision,
-                maximumFractionDigits: precision
-            }));
+            Statistic.#formatters.set(
+                key,
+                new Intl.NumberFormat(locale, {
+                    minimumFractionDigits: precision,
+                    maximumFractionDigits: precision,
+                })
+            );
         }
         return Statistic.#formatters.get(key);
     }
@@ -431,31 +452,37 @@ class Statistic {
             return;
         }
         const direction = trend.direction;
-        const sign = direction === Statistic.TREND.UP ? "+" : (direction === Statistic.TREND.DOWN ? "−" : "");
-        const number = trend.text === undefined
-            ? `${sign}${this.#formatNumber(trend.value === undefined ? 0 : trend.value, trend.precision)}${trend.suffix}`
-            : trend.text;
+        const sign = direction === Statistic.TREND.UP ? "+" : direction === Statistic.TREND.DOWN ? "−" : "";
+        const number =
+            trend.text === undefined
+                ? `${sign}${this.#formatNumber(trend.value === undefined ? 0 : trend.value, trend.precision)}${trend.suffix}`
+                : trend.text;
         this.#trend_value.innerText = number;
         this.#trend_label.innerText = trend.label;
         this.#trend_label.hidden = trend.label === "";
-        this.#trend_icon.innerHTML = new Icon(TREND_ICONS[direction] === undefined ? TREND_ICONS.flat : TREND_ICONS[direction], "14px").getHTML();
+        this.#trend_icon.innerHTML = new Icon(
+            TREND_ICONS[direction] === undefined ? TREND_ICONS.flat : TREND_ICONS[direction],
+            "14px"
+        ).getHTML();
         this.#trend_node.dataset.direction = direction;
         if (trend.style === undefined) this.#trend_node.removeAttribute("data-style");
         else this.#trend_node.dataset.style = trend.style;
         // Направление читается словами: стрелка-глиф скрыта от скринридера
-        const phrase = direction === Statistic.TREND.UP
-            ? I18n.t("data.statisticTrendUp", {value: number})
-            : (direction === Statistic.TREND.DOWN
-                ? I18n.t("data.statisticTrendDown", {value: number})
-                : I18n.t("data.statisticTrendFlat"));
+        const phrase =
+            direction === Statistic.TREND.UP
+                ? I18n.t("data.statisticTrendUp", { value: number })
+                : direction === Statistic.TREND.DOWN
+                  ? I18n.t("data.statisticTrendDown", { value: number })
+                  : I18n.t("data.statisticTrendFlat");
         this.#trend_node.setAttribute("aria-label", trend.label === "" ? phrase : `${phrase} ${trend.label}`);
     }
 
     #announce() {
         const title = this.#title_value === undefined ? "" : this.#title_value;
-        this.#status.innerText = title === ""
-            ? this.getDisplayValue()
-            : I18n.t("data.statisticAnnounce", {title: title, value: this.getDisplayValue()});
+        this.#status.innerText =
+            title === ""
+                ? this.getDisplayValue()
+                : I18n.t("data.statisticAnnounce", { title: title, value: this.getDisplayValue() });
     }
 
     #syncAria() {
@@ -464,4 +491,4 @@ class Statistic {
     }
 }
 
-exports.Statistic = Statistic
+exports.Statistic = Statistic;

package/framework/components/chui_status_bar/status_bar.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Строка состояния: области слева, по центру и справа.
@@ -23,7 +23,7 @@ class StatusBar {
     static ALIGN = {
         LEFT: "left",
         CENTER: "center",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     static #counter = 0;
 
@@ -34,11 +34,13 @@ class StatusBar {
     #live = true;
     #label = I18n.t("navigation.statusBar");
 
-    constructor(options = {
-        id: String(),
-        label: String(),
-        live: Boolean()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            label: String(),
+            live: Boolean(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_StatusBar");
         StatusBar.#counter += 1;
         this.#id = options.id === undefined ? `chui_status_bar_${StatusBar.#counter}` : options.id;
@@ -146,4 +148,4 @@ class StatusBar {
     }
 }
 
-exports.StatusBar = StatusBar
+exports.StatusBar = StatusBar;

package/framework/components/chui_stepper/stepper.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Шаги процесса: пройденные, текущий и предстоящие.
@@ -26,11 +26,11 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
 class Stepper {
     static ORIENTATION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -45,17 +45,19 @@ class Stepper {
     #listeners = [];
     #on_change = undefined;
 
-    constructor(options = {
-        id: String(),
-        steps: [],
-        active: Number(),
-        orientation: String(),
-        size: String(),
-        clickable: Boolean(),
-        label: String(),
-        onChange: undefined,
-        changeEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            steps: [],
+            active: Number(),
+            orientation: String(),
+            size: String(),
+            clickable: Boolean(),
+            label: String(),
+            onChange: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Stepper");
         Stepper.#counter += 1;
         this.#id = options.id === undefined ? `chui_stepper_${Stepper.#counter}` : options.id;
@@ -149,9 +151,10 @@ class Stepper {
 
     /** Направление шагов: `Stepper.ORIENTATION.{HORIZONTAL, VERTICAL}` */
     setOrientation(orientation = String()) {
-        this.#root.dataset.orientation = orientation === Stepper.ORIENTATION.VERTICAL
-            ? Stepper.ORIENTATION.VERTICAL
-            : Stepper.ORIENTATION.HORIZONTAL;
+        this.#root.dataset.orientation =
+            orientation === Stepper.ORIENTATION.VERTICAL
+                ? Stepper.ORIENTATION.VERTICAL
+                : Stepper.ORIENTATION.HORIZONTAL;
         return this;
     }
 
@@ -203,7 +206,9 @@ class Stepper {
     // Имя маркера: номер шага, название и состояние — иначе глиф читался бы как мусор
     #markerLabel(index = Number()) {
         const title = this.#items[index].title;
-        const head = I18n.t("navigation.stepOf", {index: index + 1, total: this.#items.length}) + (title === undefined ? "" : `: ${title}`);
+        const head =
+            I18n.t("navigation.stepOf", { index: index + 1, total: this.#items.length }) +
+            (title === undefined ? "" : `: ${title}`);
         return `${head} — ${this.#stateWord(index)}`;
     }
 
@@ -292,7 +297,7 @@ class Stepper {
 
     #announce() {
         const title = this.#items[this.#active] === undefined ? undefined : this.#items[this.#active].title;
-        const head = I18n.t("navigation.stepOf", {index: this.#active + 1, total: this.#items.length});
+        const head = I18n.t("navigation.stepOf", { index: this.#active + 1, total: this.#items.length });
         this.#status.innerText = title === undefined ? head : `${head}: ${title}`;
     }
 
@@ -311,4 +316,4 @@ class Stepper {
     static SMALL_ICON_SIZE = "14px";
 }
 
-exports.Stepper = Stepper
+exports.Stepper = Stepper;

package/framework/components/chui_sticky_bar/sticky_bar.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr, scrollParent} = require('../../modules/chui_functions');
+const { setStyles, optionOr, scrollParent } = require("../../modules/chui_functions");
 
 /**
  * Прилипающая полоса: остаётся у верха области прокрутки, пока её содержимое не кончилось.
@@ -50,9 +50,14 @@ class StickyBar {
     #frame = 0;
     #pending = 0;
 
-    constructor(options = {
-        id: String(), offset: Number(), target: undefined, onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            offset: Number(),
+            target: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_StickyBar");
         StickyBar.#counter += 1;
         this.#id = optionOr(options.id, `chui_sticky_bar_${StickyBar.#counter}`);

package/framework/components/chui_sticky_bar/styles.css

@@ -24,7 +24,9 @@ sticky_bar_content {
     padding: 8px 10px;
     border: 1px solid transparent;
     border-radius: var(--radius_md);
-    transition: background-color var(--transition_time) ease, box-shadow var(--transition_time) ease;
+    transition:
+        background-color var(--transition_time) ease,
+        box-shadow var(--transition_time) ease;
 }
 
 /* Закреплённая полоса читается отдельным слоем: материал как у шапки, волосяной край и тень.

package/framework/components/chui_tabs/chui_tabs.js

@@ -1,13 +1,13 @@
-let {Animation} = require('../../modules/chui_animations/animations');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+let { Animation } = require("../../modules/chui_animations/animations");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Идентификаторы вкладок для aria-controls/aria-labelledby */
 let a11y_tab_counter = 0;
 
 class Tab {
-    #tab = document.createElement('tab');
+    #tab = document.createElement("tab");
     #tab_content = [];
     #title = String();
     #closable = false;
@@ -42,7 +42,7 @@ class Tab {
             this.#close = document.createElement("button");
             this.#close.type = "button";
             this.#close.className = "tab_close";
-            this.#close.setAttribute("aria-label", I18n.t("navigation.closeTab", {title: this.#title}));
+            this.#close.setAttribute("aria-label", I18n.t("navigation.closeTab", { title: this.#title }));
             this.#close.setAttribute("title", I18n.t("common.close"));
             this.#close.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "14px").set());
             this.#tab.appendChild(this.#close);
@@ -73,11 +73,11 @@ class Tabs {
     // Вкладка, содержимое которой сейчас в панели: индекс меняется при закрытии соседей
     #rendered = undefined;
     #id_contents = require("randomstring").generate();
-    #tabs = document.createElement('tabs');
+    #tabs = document.createElement("tabs");
     #id_list = require("randomstring").generate();
-    #list = document.createElement('list');
-    #content = document.createElement('content');
-    #status = document.createElement('tabs_status');
+    #list = document.createElement("list");
+    #content = document.createElement("content");
+    #status = document.createElement("tabs_status");
     #on_tab_close = undefined;
     #animationend_event = () => {
         // Следы анимации снимаются точечно: `removeAttribute("style")` снёс бы и чужие
@@ -86,8 +86,10 @@ class Tabs {
         this.#content.style.removeProperty("transition");
         this.#content.style.removeProperty("display");
     };
-    constructor(options = { width: String(), default: Number(), tabs: [], closable: Boolean(), onTabClose: undefined }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Tabs');
+    constructor(
+        options = { width: String(), default: Number(), tabs: [], closable: Boolean(), onTabClose: undefined }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Tabs");
         this.#on_tab_close = options.onTabClose;
         this.#list.id = this.#id_list;
         this.#content.id = this.#id_contents;
@@ -143,10 +145,9 @@ class Tabs {
      * сразу становится активной.
      */
     addTab(tab = undefined, index = undefined) {
-        if (tab === undefined || typeof tab.getTab !== "function") throw new Error("Tabs.addTab(): нужен экземпляр Tab");
-        const at = index === undefined
-            ? this.#items.length
-            : Math.max(0, Math.min(Number(index), this.#items.length));
+        if (tab === undefined || typeof tab.getTab !== "function")
+            throw new Error("Tabs.addTab(): нужен экземпляр Tab");
+        const at = index === undefined ? this.#items.length : Math.max(0, Math.min(Number(index), this.#items.length));
         this.#items.splice(at, 0, tab);
         this.#bindTab(tab, at);
         // Новая вкладка встала не позже активной — активная сдвинулась на место вправо
@@ -175,14 +176,19 @@ class Tabs {
             this.#rendered = undefined;
             this.#content.innerHTML = "";
             this.#content.removeAttribute("aria-labelledby");
-            this.#announce(I18n.t("navigation.tabClosedNothing", {title: tab.getTitle()}));
+            this.#announce(I18n.t("navigation.tabClosedNothing", { title: tab.getTitle() }));
             return this;
         }
         if (closing_rendered) this.#active = Math.min(at, this.#items.length - 1);
         this.#activate(this.#active, closing_rendered);
-        this.#announce(closing_rendered
-            ? I18n.t("navigation.tabClosedOpened", {title: tab.getTitle(), active: this.#items[this.#active].getTitle()})
-            : I18n.t("navigation.tabClosed", {title: tab.getTitle()}));
+        this.#announce(
+            closing_rendered
+                ? I18n.t("navigation.tabClosedOpened", {
+                      title: tab.getTitle(),
+                      active: this.#items[this.#active].getTitle(),
+                  })
+                : I18n.t("navigation.tabClosed", { title: tab.getTitle() })
+        );
         return this;
     }
 
@@ -295,5 +301,5 @@ class Tabs {
     }
 }
 
-exports.Tab = Tab
-exports.Tabs = Tabs
+exports.Tab = Tab;
+exports.Tabs = Tabs;

package/framework/components/chui_tabs/styles.css

@@ -47,12 +47,12 @@ tabs {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: flex-start
+    align-items: flex-start;
 }
 
 content {
     display: flex;
-    flex-direction:column;
+    flex-direction: column;
     width: -webkit-fill-available;
     padding: var(--control_padding);
     border-radius: var(--border_radius);
@@ -96,7 +96,7 @@ tab:has(.tab_close) {
     /* Цвет наследуется от вкладки: крестик не отваливается от подписи, а наглухо
        серый читался в ней случайной точкой */
     color: inherit;
-    opacity: .6;
+    opacity: 0.6;
     cursor: pointer;
 }
 

package/framework/components/chui_text_editor/styles.css

@@ -6,7 +6,7 @@ chui_text_editor_test {
     flex-direction: column;
     width: -webkit-fill-available;
     height: max-content;
-    margin: var(--margin)
+    margin: var(--margin);
 }
 
 chui_text_editor {
@@ -54,7 +54,7 @@ chui_editor_text_input:focus {
 }
 
 chui_editor_text_input div {
-    margin-bottom: 10px
+    margin-bottom: 10px;
 }
 
 .text_editor_label {
@@ -62,12 +62,12 @@ chui_editor_text_input div {
     width: max-content;
     margin: var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 chui_editor_text_input p {
-    margin: 5px 0
+    margin: 5px 0;
 }
 
 p img {
@@ -75,8 +75,8 @@ p img {
     padding: 0;
     width: auto;
     height: auto;
-    border:  2px solid transparent;
-    border-radius: var(--border_radius)
+    border: 2px solid transparent;
+    border-radius: var(--border_radius);
 }
 
 /* Кнопки панели — как действия панели разметки у MarkdownEditor: сторона из токена
@@ -118,7 +118,7 @@ chui_text_editor_select_box {
     flex-direction: column;
     align-items: baseline;
     height: max-content;
-    width: auto
+    width: auto;
 }
 
 text_editor_select_box {
@@ -141,11 +141,12 @@ text_editor_select_box:hover {
 }
 
 .text_editor_selectbox_input {
-    width:100%;
+    width: 100%;
     display: block;
     outline: none;
     margin: 0;
-    padding-block: 6px 6px; padding-inline: 6px 0;
+    padding-block: 6px 6px;
+    padding-inline: 6px 0;
     background: transparent;
     color: var(--text_color);
     text-align: start;
@@ -179,8 +180,8 @@ text_editor_selectbox_dropdown {
     -webkit-backdrop-filter: var(--global_blur);
     color: var(--text_color);
     outline: none;
-    position:absolute;
-    display:none;
+    position: absolute;
+    display: none;
     height: max-content;
     width: max-content;
     border-radius: var(--border_radius);
@@ -208,7 +209,7 @@ text_editor_select_button_open {
 text_editor_selectbox_option {
     text-align: start;
     padding: 6px 12px;
-    border-radius: var(--border_radius)
+    border-radius: var(--border_radius);
 }
 
 /* Заголовок пункта — абзац или заголовок (тег задаёт вызывающий): отступы снимает CSS.
@@ -219,7 +220,7 @@ text_editor_selectbox_option {
 }
 
 text_editor_selectbox_option:hover {
-    background: var(--element_background_hover)
+    background: var(--element_background_hover);
 }
 
 text_editor_selectbox_option:hover font {
@@ -254,24 +255,24 @@ text_editor_block {
 
 .text_editor_table_body {
     border: 1px solid var(--blue_prime_background);
-    width: auto
+    width: auto;
 }
 
 .text_editor_table_row {
     width: auto;
-    display: table-row
+    display: table-row;
 }
 
 .text_editor_table_cell {
     height: max-content;
     width: auto;
     display: table-cell;
-    border: 1px solid var(--blue_prime_background)
+    border: 1px solid var(--blue_prime_background);
 }
 
 pre {
-    font-family: 'chui_mono';
-    font-weight: 400
+    font-family: "chui_mono";
+    font-weight: 400;
 }
 
 /* Нажатие — акцент, как у Button: контрол отвечает на клик ещё до действия */