chuijs 4.0.2 → 4.0.4

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;
@@ -62,16 +62,16 @@ class Statistic {
     #root = document.createElement("chui_statistic");
     #head = document.createElement("statistic_head");
     #icon = document.createElement("statistic_icon");
-    #icon_node = undefined;
+    #iconNode = undefined;
     #title = document.createElement("statistic_title");
-    #value_node = document.createElement("statistic_value");
-    #trend_node = document.createElement("statistic_trend");
-    #trend_icon = document.createElement("statistic_trend_icon");
-    #trend_value = document.createElement("statistic_trend_value");
-    #trend_label = document.createElement("statistic_trend_label");
+    #valueNode = document.createElement("statistic_value");
+    #trendNode = document.createElement("statistic_trend");
+    #trendIcon = document.createElement("statistic_trend_icon");
+    #trendValue = document.createElement("statistic_trend_value");
+    #trendLabel = document.createElement("statistic_trend_label");
     #status = document.createElement("statistic_status");
     #id = undefined;
-    #title_value = undefined;
+    #titleValue = undefined;
     #label = undefined;
     #value = 0;
     #displayed = 0;
@@ -83,14 +83,26 @@ class Statistic {
     #animated = false;
     #duration = Statistic.#DEFAULT_DURATION;
     #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()
-    }) {
+    #animationId = 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(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Statistic");
         Statistic.#counter += 1;
         this.#id = optionOr(options.id, `chui_statistic_${Statistic.#counter}`);
@@ -103,15 +115,15 @@ class Statistic {
         this.#icon.setAttribute("aria-hidden", "true");
         // Плашка значка создаётся всегда, но без опции icon её не видно
         this.#icon.hidden = true;
-        this.#trend_icon.setAttribute("aria-hidden", "true");
+        this.#trendIcon.setAttribute("aria-hidden", "true");
         this.#head.appendChild(this.#icon);
         this.#head.appendChild(this.#title);
         this.#root.appendChild(this.#head);
-        this.#root.appendChild(this.#value_node);
-        this.#trend_node.appendChild(this.#trend_icon);
-        this.#trend_node.appendChild(this.#trend_value);
-        this.#trend_node.appendChild(this.#trend_label);
-        this.#root.appendChild(this.#trend_node);
+        this.#root.appendChild(this.#valueNode);
+        this.#trendNode.appendChild(this.#trendIcon);
+        this.#trendNode.appendChild(this.#trendValue);
+        this.#trendNode.appendChild(this.#trendLabel);
+        this.#root.appendChild(this.#trendNode);
         this.#root.appendChild(this.#status);
         this.setStyle(optionOr(options.style, Statistic.STYLE.DEFAULT));
         this.setSize(optionOr(options.size, Statistic.SIZE.DEFAULT));
@@ -138,7 +150,7 @@ class Statistic {
 
     /** Подпись такая, какой её задали: вразрядку её рисует CSS, а не значение */
     getTitle() {
-        return this.#title_value;
+        return this.#titleValue;
     }
 
     /** Значение (цель анимации) */
@@ -153,7 +165,7 @@ class Statistic {
 
     /** Строка значения вместе с префиксом и суффиксом — то, что видно на экране */
     getDisplayValue() {
-        return this.#value_node.innerText;
+        return this.#valueNode.innerText;
     }
 
     getPrefix() {
@@ -173,7 +185,7 @@ class Statistic {
     }
 
     getTrend() {
-        return this.#trend === undefined ? undefined : {...this.#trend};
+        return this.#trend === undefined ? undefined : { ...this.#trend };
     }
 
     getStyle() {
@@ -197,7 +209,7 @@ class Statistic {
     }
 
     isAnimating() {
-        return this.#animation_id !== undefined;
+        return this.#animationId !== undefined;
     }
 
     // SET
@@ -209,9 +221,9 @@ class Statistic {
 
     /** Подпись показателя; пустая убирает её */
     setTitle(text = String()) {
-        this.#title_value = String(text);
-        this.#title.innerText = this.#title_value;
-        this.#title.hidden = this.#title_value === "";
+        this.#titleValue = String(text);
+        this.#title.innerText = this.#titleValue;
+        this.#title.hidden = this.#titleValue === "";
         this.#syncAria();
         return this;
     }
@@ -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;
@@ -307,16 +319,19 @@ class Statistic {
     /** Значок показателя (имя из `Icons`, `Icon`, компонент или узел); `undefined` убирает его */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null || icon === "") {
-            this.#icon_node = undefined;
+            this.#iconNode = undefined;
             this.#icon.innerHTML = "";
             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.#iconNode =
+            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.appendChild(this.#iconNode);
         this.#icon.hidden = false;
         return this;
     }
@@ -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);
     }
@@ -385,9 +406,9 @@ class Statistic {
     }
 
     #cancel() {
-        if (this.#animation_id === undefined) return;
-        cancelAnimationFrame(this.#animation_id);
-        this.#animation_id = undefined;
+        if (this.#animationId === undefined) return;
+        cancelAnimationFrame(this.#animationId);
+        this.#animationId = undefined;
     }
 
     /** Ease-out: счётчик быстро разгоняется и мягко доезжает до цели */
@@ -399,14 +420,14 @@ class Statistic {
             const eased = 1 - Math.pow(1 - progress, 3);
             this.#applyValue(from + (target - from) * eased);
             if (progress < 1) {
-                this.#animation_id = requestAnimationFrame(step);
+                this.#animationId = requestAnimationFrame(step);
                 return;
             }
-            this.#animation_id = undefined;
+            this.#animationId = undefined;
             this.#applyValue(target);
             if (silent !== true) this.#announce();
         };
-        this.#animation_id = requestAnimationFrame(step);
+        this.#animationId = requestAnimationFrame(step);
     }
 
     #applyValue(value = Number()) {
@@ -415,53 +436,59 @@ class Statistic {
     }
 
     #renderValue() {
-        this.#value_node.innerText = `${this.#prefix}${this.#formatNumber(this.#displayed)}${this.#suffix}`;
+        this.#valueNode.innerText = `${this.#prefix}${this.#formatNumber(this.#displayed)}${this.#suffix}`;
     }
 
     #syncTrend() {
         const trend = this.#trend;
-        this.#trend_node.hidden = trend === undefined;
+        this.#trendNode.hidden = trend === undefined;
         if (trend === undefined) {
-            this.#trend_node.removeAttribute("aria-label");
-            this.#trend_value.innerText = "";
-            this.#trend_label.innerText = "";
-            this.#trend_icon.innerHTML = "";
-            this.#trend_node.removeAttribute("data-direction");
-            this.#trend_node.removeAttribute("data-style");
+            this.#trendNode.removeAttribute("aria-label");
+            this.#trendValue.innerText = "";
+            this.#trendLabel.innerText = "";
+            this.#trendIcon.innerHTML = "";
+            this.#trendNode.removeAttribute("data-direction");
+            this.#trendNode.removeAttribute("data-style");
             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;
-        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_node.dataset.direction = direction;
-        if (trend.style === undefined) this.#trend_node.removeAttribute("data-style");
-        else this.#trend_node.dataset.style = trend.style;
+        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.#trendValue.innerText = number;
+        this.#trendLabel.innerText = trend.label;
+        this.#trendLabel.hidden = trend.label === "";
+        this.#trendIcon.innerHTML = new Icon(
+            TREND_ICONS[direction] === undefined ? TREND_ICONS.flat : TREND_ICONS[direction],
+            "14px"
+        ).getHTML();
+        this.#trendNode.dataset.direction = direction;
+        if (trend.style === undefined) this.#trendNode.removeAttribute("data-style");
+        else this.#trendNode.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"));
-        this.#trend_node.setAttribute("aria-label", trend.label === "" ? phrase : `${phrase} ${trend.label}`);
+        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.#trendNode.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()});
+        const title = this.#titleValue === undefined ? "" : this.#titleValue;
+        this.#status.innerText =
+            title === ""
+                ? this.getDisplayValue()
+                : I18n.t("data.statisticAnnounce", { title: title, value: this.getDisplayValue() });
     }
 
     #syncAria() {
-        const name = optionOr(this.#label, optionOr(this.#title_value, I18n.t("data.statistic")));
+        const name = optionOr(this.#label, optionOr(this.#titleValue, I18n.t("data.statistic")));
         this.#root.setAttribute("aria-label", name);
     }
 }
 
-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_status_bar/styles.css

@@ -6,13 +6,13 @@ chui_status_bar {
     gap: 10px;
     box-sizing: border-box;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     padding: 4px 10px;
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 status_bar_section {