chuijs 4.0.2 → 4.0.3

package/framework/components/chui_popups/popups.js

@@ -1,66 +1,77 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {PasswordInput} = require("../chui_inputs/chui_password/password");
-const {TextInput} = require("../chui_inputs/chui_text/text");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {optionOr} = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { PasswordInput } = require("../chui_inputs/chui_password/password");
+const { TextInput } = require("../chui_inputs/chui_text/text");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { optionOr } = require("../../modules/chui_functions");
 
 class Popup {
     constructor() {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Popups');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Popups");
     }
-    alert(options = {title: String(), message: String()}) {
+    alert(options = { title: String(), message: String() }) {
         new PopupAlert(options);
     }
-    async confirm(options = {
-        title: String(), message: String(), okText: String(), cancelText: String(),
-    }) {
+    async confirm(
+        options = {
+            title: String(),
+            message: String(),
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
         try {
             return await new PopupConfirm(options);
         } catch (err) {
             return err;
         }
     }
-    async prompt(options = {
-        title: String(), message: String(),
-        inputs: {
-            text: {
-                placeholder: String(), errorMessage: String()
-            },
-            password: {
-                placeholder: String(), errorMessage: String()
+    async prompt(
+        options = {
+            title: String(),
+            message: String(),
+            inputs: {
+                text: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
+                password: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
             },
-        },
-        okText: String(), cancelText: String()
-    }) {
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
         try {
             return await new PopupPrompt(options);
         } catch (err) {
             // Причину не теряем: она нужна вызывающему коду для диагностики
-            throw new Error(err instanceof Error ? err.message : String(err), {cause: err})
+            throw new Error(err instanceof Error ? err.message : String(err), { cause: err });
         }
     }
 }
 
-exports.Popup = Popup
+exports.Popup = Popup;
 
 class PopupAlert {
     #id = require("randomstring").generate();
     #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
+    #popup_content = document.createElement("popup_content");
+    #popup_body = document.createElement("popup_body");
+    #popup_buttons = document.createElement("popup_buttons");
     #button_OK = document.createElement("popup_button_ok");
 
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
+    #popup_title = document.createElement("popup_title");
+    #popup_message = document.createElement("popup_message");
     #a11y = undefined;
-    constructor(options = {title: String(), message: String()}) {
-        this.#chui_popup.id = this.#id
+    constructor(options = { title: String(), message: String() }) {
+        this.#chui_popup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popup_content.appendChild(this.#popup_body);
+        this.#popup_content.appendChild(this.#popup_buttons);
+        this.#chui_popup.appendChild(this.#popup_content);
 
         this.#popup_title.innerText = options.title;
         this.#popup_message.innerText = options.message;
@@ -70,25 +81,27 @@ class PopupAlert {
 
         // СОБЫТИЯ
         this.#button_OK.innerText = I18n.t("common.ok");
-        makeKeyboardButton(this.#button_OK)
-        this.#button_OK.addEventListener("click", () => this.#dismiss())
+        makeKeyboardButton(this.#button_OK);
+        this.#button_OK.addEventListener("click", () => this.#dismiss());
         this.#popup_buttons.appendChild(this.#button_OK);
 
         //
-        document.body.appendChild(this.#chui_popup)
+        document.body.appendChild(this.#chui_popup);
         // Доступность: alertdialog, имя из заголовка, описание из сообщения, Esc закрывает
         this.#a11y = new OverlayA11y(this.#chui_popup, {
-            role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-            onEscape: () => this.#dismiss()
+            role: "alertdialog",
+            labelNode: this.#popup_title,
+            describedBy: this.#popup_message,
+            onEscape: () => this.#dismiss(),
         });
         new Animation(this.#chui_popup).fadeIn();
         new Animation(this.#chui_popup.firstChild).scaleIn();
-        this.#a11y.open()
+        this.#a11y.open();
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
         if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
+        this.#a11y.close();
         new Animation(this.#chui_popup.firstChild).scaleOut();
         new Animation(this.#chui_popup).fadeOutAndRemove();
     }
@@ -97,24 +110,28 @@ class PopupAlert {
 class PopupConfirm {
     #id = require("randomstring").generate();
     #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
-    #button_accept = document.createElement("popup_button_accept")
-    #button_cancel = document.createElement("popup_button_cancel")
-
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
+    #popup_content = document.createElement("popup_content");
+    #popup_body = document.createElement("popup_body");
+    #popup_buttons = document.createElement("popup_buttons");
+    #button_accept = document.createElement("popup_button_accept");
+    #button_cancel = document.createElement("popup_button_cancel");
+
+    #popup_title = document.createElement("popup_title");
+    #popup_message = document.createElement("popup_message");
     #a11y = undefined;
-    constructor(options = {
-        title: String(), message: String(),
-        okText: String(), cancelText: String(),
-    }) {
-        this.#chui_popup.id = this.#id
+    constructor(
+        options = {
+            title: String(),
+            message: String(),
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
+        this.#chui_popup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popup_content.appendChild(this.#popup_body);
+        this.#popup_content.appendChild(this.#popup_buttons);
+        this.#chui_popup.appendChild(this.#popup_content);
 
         this.#popup_title.innerText = options.title;
         this.#popup_message.innerText = options.message;
@@ -126,37 +143,39 @@ class PopupConfirm {
         this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
         this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel)
-        makeKeyboardButton(this.#button_accept)
+        makeKeyboardButton(this.#button_cancel);
+        makeKeyboardButton(this.#button_accept);
         this.#popup_buttons.appendChild(this.#button_cancel);
         this.#popup_buttons.appendChild(this.#button_accept);
 
         return new Promise((resolve) => {
             this.#button_cancel.addEventListener("click", () => {
-                this.#dismiss()
+                this.#dismiss();
                 resolve(false);
-            })
+            });
 
             this.#button_accept.addEventListener("click", () => {
-                this.#dismiss()
+                this.#dismiss();
                 resolve(true);
             });
 
-            document.body.appendChild(this.#chui_popup)
+            document.body.appendChild(this.#chui_popup);
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус остаётся в диалоге
             this.#a11y = new OverlayA11y(this.#chui_popup, {
-                role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click()
+                role: "alertdialog",
+                labelNode: this.#popup_title,
+                describedBy: this.#popup_message,
+                onEscape: () => this.#button_cancel.click(),
             });
             new Animation(this.#chui_popup).fadeIn();
             new Animation(this.#chui_popup.firstChild).scaleIn();
-            this.#a11y.open()
-        })
+            this.#a11y.open();
+        });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
         if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
+        this.#a11y.close();
         new Animation(this.#chui_popup.firstChild).scaleOut();
         new Animation(this.#chui_popup).fadeOutAndRemove();
     }
@@ -165,38 +184,42 @@ class PopupConfirm {
 class PopupPrompt {
     #id = require("randomstring").generate();
     #chui_popup = document.createElement(`chui_popup`);
-    #popup_content = document.createElement('popup_content');
-    #popup_body = document.createElement("popup_body")
-    #popup_buttons = document.createElement('popup_buttons');
-    #button_accept = document.createElement("popup_button_accept")
-    #button_cancel = document.createElement("popup_button_cancel")
+    #popup_content = document.createElement("popup_content");
+    #popup_body = document.createElement("popup_body");
+    #popup_buttons = document.createElement("popup_buttons");
+    #button_accept = document.createElement("popup_button_accept");
+    #button_cancel = document.createElement("popup_button_cancel");
 
-    #popup_title = document.createElement("popup_title")
-    #popup_message = document.createElement("popup_message")
+    #popup_title = document.createElement("popup_title");
+    #popup_message = document.createElement("popup_message");
 
     #input_text = undefined;
     #input_pass = undefined;
     #a11y = undefined;
 
-    constructor(options = {
-        title: String(), message: String(),
-        inputs: {
-            text: {
-                placeholder: String(),
-                errorMessage: String()
+    constructor(
+        options = {
+            title: String(),
+            message: String(),
+            inputs: {
+                text: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
+                password: {
+                    placeholder: String(),
+                    errorMessage: String(),
+                },
             },
-            password: {
-                placeholder: String(),
-                errorMessage: String()
-            },
-        },
-        okText: String(), cancelText: String()
-    }) {
-        this.#chui_popup.id = this.#id
+            okText: String(),
+            cancelText: String(),
+        }
+    ) {
+        this.#chui_popup.id = this.#id;
         //ADDS
-        this.#popup_content.appendChild(this.#popup_body)
-        this.#popup_content.appendChild(this.#popup_buttons)
-        this.#chui_popup.appendChild(this.#popup_content)
+        this.#popup_content.appendChild(this.#popup_body);
+        this.#popup_content.appendChild(this.#popup_buttons);
+        this.#chui_popup.appendChild(this.#popup_content);
 
         this.#popup_title.innerText = options.title;
         this.#popup_message.innerText = options.message;
@@ -209,12 +232,18 @@ class PopupPrompt {
         }
 
         if (options.inputs.text !== undefined) {
-            this.#input_text = new TextInput({ placeholder: options.inputs.text.placeholder, width: "-webkit-fill-available" })
+            this.#input_text = new TextInput({
+                placeholder: options.inputs.text.placeholder,
+                width: "-webkit-fill-available",
+            });
             this.#popup_body.appendChild(this.#input_text.set());
         }
 
         if (options.inputs.password !== undefined) {
-            this.#input_pass = new PasswordInput({ placeholder: options.inputs.password.placeholder, width: "-webkit-fill-available" })
+            this.#input_pass = new PasswordInput({
+                placeholder: options.inputs.password.placeholder,
+                width: "-webkit-fill-available",
+            });
             this.#popup_body.appendChild(this.#input_pass.set());
         }
 
@@ -222,19 +251,17 @@ class PopupPrompt {
         this.#button_cancel.innerText = optionOr(options.cancelText, I18n.t("common.cancel"));
         this.#button_accept.innerText = optionOr(options.okText, I18n.t("common.ok"));
 
-        makeKeyboardButton(this.#button_cancel)
-        makeKeyboardButton(this.#button_accept)
+        makeKeyboardButton(this.#button_cancel);
+        makeKeyboardButton(this.#button_accept);
         this.#popup_buttons.appendChild(this.#button_cancel);
         this.#popup_buttons.appendChild(this.#button_accept);
 
         return new Promise((resolve) => {
-
-
             this.#button_cancel.addEventListener("click", () => {
-                this.#dismiss()
+                this.#dismiss();
                 // Отмена тоже закрывает промис — иначе `await new Popup().prompt(...)` висел навсегда
                 resolve(undefined);
-            })
+            });
 
             this.#button_accept.addEventListener("click", () => {
                 let close = false;
@@ -265,27 +292,29 @@ class PopupPrompt {
                     if (password === "") this.#input_pass.setErrorMessage(options.inputs.password.errorMessage);
                 }
                 if (close) {
-                    this.#dismiss()
+                    this.#dismiss();
                 }
-            })
+            });
 
             document.body.appendChild(this.#chui_popup);
 
             // Доступность: имя из заголовка, описание из сообщения, Esc = отмена, фокус уходит в первое поле
             this.#a11y = new OverlayA11y(this.#chui_popup, {
-                role: "alertdialog", labelNode: this.#popup_title, describedBy: this.#popup_message,
-                onEscape: () => this.#button_cancel.click()
+                role: "alertdialog",
+                labelNode: this.#popup_title,
+                describedBy: this.#popup_message,
+                onEscape: () => this.#button_cancel.click(),
             });
             new Animation(this.#chui_popup).fadeIn();
             new Animation(this.#chui_popup.firstChild).scaleIn();
-            this.#a11y.open()
-        })
+            this.#a11y.open();
+        });
     }
     #dismiss() {
         // Попап мог быть уже убран (повторный Esc или клик) — тогда закрывать нечего
         if (!document.contains(this.#chui_popup)) return;
-        this.#a11y.close()
+        this.#a11y.close();
         new Animation(this.#chui_popup.firstChild).scaleOut();
         new Animation(this.#chui_popup).fadeOutAndRemove();
     }
-}
+}

package/framework/components/chui_popups/styles.css

@@ -119,5 +119,5 @@ popup_button_cancel:active {
     border: 1px solid var(--button_border_color_hover);
     color: var(--text_color_hover);
     /* Лёгкая усадка: нажатие читается даже там, где заливка уже акцентная */
-    transform: scale(.97);
-}
+    transform: scale(0.97);
+}

package/framework/components/chui_print_button/print_button.js

@@ -1,7 +1,7 @@
-const {Button} = require('../chui_button/button');
-const {Icons} = require('../chui_icons/icons');
-const {Desktop} = require('../../modules/chui_services/desktop');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Button } = require("../chui_button/button");
+const { Icons } = require("../chui_icons/icons");
+const { Desktop } = require("../../modules/chui_services/desktop");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Кнопка печати: печатает страницу целиком, готовый HTML или элемент с его стилями.
@@ -22,7 +22,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class PrintButton {
     static MODE = {
         PRINT: "print",
-        PDF: "pdf"
+        PDF: "pdf",
     };
 
     #button = undefined;
@@ -34,17 +34,19 @@ class PrintButton {
     #document_title = undefined;
     #on_result = undefined;
 
-    constructor(options = {
-        title: String(),
-        mode: String(),
-        target: undefined,
-        html: undefined,
-        options: {},
-        fileName: String(),
-        documentTitle: String(),
-        icon: undefined,
-        onResult: undefined
-    }) {
+    constructor(
+        options = {
+            title: String(),
+            mode: String(),
+            target: undefined,
+            html: undefined,
+            options: {},
+            fileName: String(),
+            documentTitle: String(),
+            icon: undefined,
+            onResult: undefined,
+        }
+    ) {
         this.#mode = options.mode === undefined ? PrintButton.MODE.PRINT : options.mode;
         this.#target = options.target;
         this.#html = options.html;
@@ -53,11 +55,16 @@ class PrintButton {
         this.#document_title = options.documentTitle;
         this.#on_result = options.onResult;
         this.#button = new Button({
-            title: options.title === undefined ? (this.#mode === PrintButton.MODE.PDF ? I18n.t("graphics.printSavePdf") : I18n.t("graphics.print")) : options.title,
+            title:
+                options.title === undefined
+                    ? this.#mode === PrintButton.MODE.PDF
+                        ? I18n.t("graphics.printSavePdf")
+                        : I18n.t("graphics.print")
+                    : options.title,
             icon: options.icon === undefined ? Icons.ACTIONS.PRINT : options.icon,
             clickEvent: () => {
                 this.print().catch(() => {});
-            }
+            },
         });
     }
 
@@ -99,11 +106,14 @@ class PrintButton {
     /** Запустить печать или сохранение PDF; возвращает результат сервиса */
     print() {
         const html = this.#buildHtml();
-        const options = {...this.#options};
+        const options = { ...this.#options };
         if (this.#file_name !== undefined) options.fileName = this.#file_name;
-        const request = this.#mode === PrintButton.MODE.PDF
-            ? Desktop.print.pdf(html === undefined ? document.documentElement.outerHTML : html, options)
-            : (html === undefined ? Desktop.print.page(options) : Desktop.print.html(html, options));
+        const request =
+            this.#mode === PrintButton.MODE.PDF
+                ? Desktop.print.pdf(html === undefined ? document.documentElement.outerHTML : html, options)
+                : html === undefined
+                  ? Desktop.print.page(options)
+                  : Desktop.print.html(html, options);
         return request.then((result) => {
             if (this.#on_result !== undefined) this.#on_result(result);
             return result;
@@ -127,4 +137,4 @@ class PrintButton {
     }
 }
 
-exports.PrintButton = PrintButton
+exports.PrintButton = PrintButton;

package/framework/components/chui_progress_bar/progress_bar.js

@@ -13,25 +13,25 @@ class ProgressBar {
     #id = require("randomstring").generate();
     #ProgressBar = document.createElement(`progress`);
     #main = document.createElement("progress_block");
-    #progress_count = document.createElement('progress_count');
-    #progress_text = document.createElement('progress_text');
+    #progress_count = document.createElement("progress_count");
+    #progress_text = document.createElement("progress_text");
     #label = undefined;
     constructor(options = { max: Number(), label: String() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ProgressBar');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_ProgressBar");
         // Роль дублирует нативную у <progress>, но делает разметку явной для тестов и стендов
         this.#ProgressBar.setAttribute("role", "progressbar");
         if (options.max !== undefined) this.setMax(options.max);
         this.#ProgressBar.id = this.#id;
-        this.#progress_count.setAttribute('for', this.#id);
-        this.#progress_text.setAttribute('for', this.#id);
+        this.#progress_count.setAttribute("for", this.#id);
+        this.#progress_text.setAttribute("for", this.#id);
         // Подписи рядом с полосой — внешний вид: значение объявляет сама полоса
-        this.#progress_count.setAttribute('aria-hidden', 'true');
-        this.#progress_text.setAttribute('aria-hidden', 'true');
+        this.#progress_count.setAttribute("aria-hidden", "true");
+        this.#progress_text.setAttribute("aria-hidden", "true");
         // Вид подписей полностью в CSS: прежде отступы, ширина и выравнивание
         // задавались отсюда инлайново и расходились с темой
-        this.#main.appendChild(this.#progress_count)
-        this.#main.appendChild(this.#ProgressBar)
-        this.#main.appendChild(this.#progress_text)
+        this.#main.appendChild(this.#progress_count);
+        this.#main.appendChild(this.#ProgressBar);
+        this.#main.appendChild(this.#progress_text);
         this.setLabel(options.label);
     }
     #clamp(value) {
@@ -40,10 +40,16 @@ class ProgressBar {
         if (Number.isNaN(number) || Number.isNaN(max) || max <= 0) return 0;
         return Math.min(Math.max(number, 0), max);
     }
-    getValue() { return Number(this.#ProgressBar.value); }
-    getMax() { return Number(this.#ProgressBar.max); }
+    getValue() {
+        return Number(this.#ProgressBar.value);
+    }
+    getMax() {
+        return Number(this.#ProgressBar.max);
+    }
     /** Имя полосы для скринридера */
-    getLabel() { return this.#label; }
+    getLabel() {
+        return this.#label;
+    }
     setLabel(text = String()) {
         this.#label = text === undefined || text === "" ? undefined : text;
         if (this.#label === undefined) this.#ProgressBar.removeAttribute("aria-label");
@@ -76,7 +82,9 @@ class ProgressBar {
         else this.#ProgressBar.setAttribute("aria-valuetext", String(text));
         return this;
     }
-    set() { return this.#main; }
+    set() {
+        return this.#main;
+    }
 }
 
-exports.ProgressBar = ProgressBar
+exports.ProgressBar = ProgressBar;

package/framework/components/chui_progress_bar/styles.css

@@ -9,7 +9,7 @@ progress_block {
     color: var(--text_color_disabled);
     /* Подписи стоят по левому краю полосы: центрирование расходилось с полосой */
     text-align: start;
-    font-weight: 500
+    font-weight: 500;
 }
 
 progress {
@@ -53,4 +53,4 @@ progress_count + progress {
 
 progress + progress_text {
     margin-block-start: 4px;
-}
+}

package/framework/components/chui_progress_ring/progress_ring.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");
 
 /**
  * Круговой индикатор прогресса: кольцо с процентом внутри.
@@ -44,18 +44,20 @@ class ProgressRing {
     #label = undefined;
     #format = undefined;
 
-    constructor(options = {
-        id: String(),
-        value: Number(),
-        max: Number(),
-        size: Number(),
-        thickness: Number(),
-        showValue: Boolean(),
-        indeterminate: Boolean(),
-        label: String(),
-        color: String(),
-        format: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            value: Number(),
+            max: Number(),
+            size: Number(),
+            thickness: Number(),
+            showValue: Boolean(),
+            indeterminate: Boolean(),
+            label: String(),
+            color: String(),
+            format: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ProgressRing");
         ProgressRing.#counter += 1;
         this.#id = options.id === undefined ? `chui_progress_ring_${ProgressRing.#counter}` : options.id;
@@ -244,4 +246,4 @@ class ProgressRing {
     }
 }
 
-exports.ProgressRing = ProgressRing
+exports.ProgressRing = ProgressRing;