chuijs 4.0.2 → 4.0.4

package/framework/components/chui_query_builder/styles.css

@@ -6,14 +6,14 @@ chui_query_builder {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
 }
 
 .query_builder_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-family: system-ui, sans-serif;
     font-size: var(--font_labels_size);
@@ -43,7 +43,7 @@ chui_query_builder {
     width: -webkit-fill-available;
     padding: 8px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     margin-inline-start: calc(var(--query_builder_depth, 0) * 14px);
 }
@@ -97,7 +97,7 @@ chui_query_builder {
 }
 
 /* Контролы условия — готовые поля фреймворка (Select, TextInput, NumberInput, DateInput).
-   Их вид (35 px, --border_radius, hairline, фокус и запрет) держит сам компонент,
+   Их вид (35 px, --radius_sm, hairline, фокус и запрет) держит сам компонент,
    а строка условия задаёт только долю ширины и нулевой отступ. */
 .query_builder_field,
 .query_builder_operator,

package/framework/components/chui_radio_group/radio_group.js

@@ -1,5 +1,5 @@
-const {RadioButton} = require("../chui_inputs/chui_radio_button/radio_button");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
+const { RadioButton } = require("../chui_inputs/chui_radio_button/radio_button");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
 
 /**
  * Группа радиокнопок из массива опций.
@@ -16,8 +16,8 @@ class RadioGroup {
     static #FOCUSABLE = "input[type=radio]:not([disabled])";
     #id = require("randomstring").generate();
     #name = require("randomstring").generate();
-    #RadioGroup = document.createElement('chui_radio_group');
-    #groupForm = document.createElement('form');
+    #RadioGroup = document.createElement("chui_radio_group");
+    #groupForm = document.createElement("form");
     #options = [];
     #label = undefined;
     #disabled = false;
@@ -27,23 +27,25 @@ class RadioGroup {
     #align = undefined;
     #justify = undefined;
     #width = undefined;
-    constructor(options = {
-        styles: {
-            direction: undefined,
-            wrap: undefined,
-            align: undefined,
-            justify: undefined,
-            width: undefined
-        },
-        label: String(),
-        name: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup")
+    constructor(
+        options = {
+            styles: {
+                direction: undefined,
+                wrap: undefined,
+                align: undefined,
+                justify: undefined,
+                width: undefined,
+            },
+            label: String(),
+            name: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup");
         // Правила (required/pattern/validate/…) читает общий модуль: группа — такое же поле, как input
         Validate.installField(this, options, this.#RadioGroup, undefined, () => this.getValue());
         // styles может не прийти вовсе: раньше обращение к options.styles.direction падало
         const styles = options.styles === undefined ? {} : options.styles;
-        this.#groupForm.classList.add('radioGroupForm')
+        this.#groupForm.classList.add("radioGroupForm");
         this.#direction = styles.direction;
         this.#wrap = styles.wrap;
         this.#align = styles.align;
@@ -63,11 +65,15 @@ class RadioGroup {
         this.#RadioGroup.setAttribute("role", "radiogroup");
         if (Validate.rulesFrom(options).required === true) this.#RadioGroup.setAttribute("aria-required", "true");
         this.setLabel(options.label);
-        this.#RadioGroup.appendChild(this.#groupForm)
+        this.#RadioGroup.appendChild(this.#groupForm);
     }
     /** Имя группы: общее `name` всех флажков */
-    getName() { return this.#name; }
-    getLabel() { return this.#label; }
+    getName() {
+        return this.#name;
+    }
+    getLabel() {
+        return this.#label;
+    }
     setLabel(text = String()) {
         this.#label = text === undefined || text === "" ? undefined : text;
         if (this.#label === undefined) this.#RadioGroup.removeAttribute("aria-label");
@@ -75,7 +81,9 @@ class RadioGroup {
         return this;
     }
     /** Описания добавленных вариантов (копии) */
-    getOptions() { return this.#options.map((option) => ({...option})); }
+    getOptions() {
+        return this.#options.map((option) => ({ ...option }));
+    }
     addOptions(options = [{ name: String(), value: String(), disabled: Boolean(), checked: Boolean() }]) {
         for (const option of options) {
             const radio = new RadioButton({
@@ -83,16 +91,16 @@ class RadioGroup {
                 stringValue: option.value,
                 name: this.#name,
                 value: option.checked === true,
-                width: option.width
+                width: option.width,
             });
             if (option.disabled === true) radio.setDisabled(true);
             this.#groupForm.appendChild(radio.set());
-            this.#options.push({name: option.name, value: option.value, disabled: option.disabled === true});
+            this.#options.push({ name: option.name, value: option.value, disabled: option.disabled === true });
         }
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#groupForm.addEventListener("change", listener)
+        this.#groupForm.addEventListener("change", listener);
         return this;
     }
     /** Выбранное значение или `undefined`, если не выбрано ничего */
@@ -115,7 +123,9 @@ class RadioGroup {
         for (const input of this.#groupForm.querySelectorAll("input[type=radio]")) input.checked = false;
         return this;
     }
-    getDisabled() { return this.#disabled; }
+    getDisabled() {
+        return this.#disabled;
+    }
     setDisabled(boolean = Boolean()) {
         this.#disabled = boolean === true;
         // Индивидуальный запрет варианта не снимается: группа лишь добавляет свой
@@ -142,4 +152,4 @@ class RadioGroup {
     }
 }
 
-exports.RadioGroup = RadioGroup
+exports.RadioGroup = RadioGroup;

package/framework/components/chui_radio_group/styles.css

@@ -12,5 +12,5 @@ chui_radio_group.radio_group_disabled {
 
 /* Общий класс ошибки полей: рамка не должна липнуть к флажкам */
 chui_radio_group.error_border {
-    border-radius: var(--border_radius);
-}
+    border-radius: var(--radius_sm);
+}

package/framework/components/chui_result/result.js

@@ -1,13 +1,13 @@
-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");
 
 /** Значок состояния — та же семья, что у Alert, Toast и Notification */
 const STYLE_ICONS = {
     result_info: Icons.ACTIONS.INFO,
     result_success: Icons.ACTIONS.CHECK_CIRCLE,
     result_warning: Icons.ALERT.WARNING,
-    result_error: Icons.ALERT.ERROR
+    result_error: Icons.ALERT.ERROR,
 };
 
 /**
@@ -39,11 +39,11 @@ class Result {
         INFO: "result_info",
         SUCCESS: "result_success",
         WARNING: "result_warning",
-        ERROR: "result_error"
+        ERROR: "result_error",
     };
     static SIZE = {
         DEFAULT: "default",
-        COMPACT: "compact"
+        COMPACT: "compact",
     };
     static #counter = 0;
 
@@ -53,7 +53,7 @@ class Result {
             result_info: I18n.t("feedback.resultInfo"),
             result_success: I18n.t("feedback.resultSuccess"),
             result_warning: I18n.t("feedback.resultWarning"),
-            result_error: I18n.t("feedback.resultError")
+            result_error: I18n.t("feedback.resultError"),
         };
     }
 
@@ -64,15 +64,22 @@ class Result {
     #actions = document.createElement("result_actions");
     #id = undefined;
     #style = Result.STYLE.INFO;
-    #title_value = undefined;
-    #title_hidden = false;
-    #icon_custom = undefined;
-
-    constructor(options = {
-        id: String(), style: String(), icon: undefined,
-        title: undefined, description: String(),
-        actions: [], label: String(), size: String()
-    }) {
+    #titleValue = undefined;
+    #titleHidden = false;
+    #iconCustom = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            style: String(),
+            icon: undefined,
+            title: undefined,
+            description: String(),
+            actions: [],
+            label: String(),
+            size: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Result");
         Result.#counter += 1;
         this.#id = optionOr(options.id, `chui_result_${Result.#counter}`);
@@ -87,8 +94,8 @@ class Result {
         this.#root.appendChild(this.#actions);
         this.setStyle(optionOr(options.style, Result.STYLE.INFO));
         if (options.icon !== undefined) this.setIcon(options.icon);
-        this.#title_hidden = options.title === null;
-        if (typeof options.title === "string" && options.title !== "") this.#title_value = options.title;
+        this.#titleHidden = options.title === null;
+        if (typeof options.title === "string" && options.title !== "") this.#titleValue = options.title;
         this.#renderTitle();
         this.setDescription(optionOr(options.description, ""));
         this.setSize(optionOr(options.size, Result.SIZE.DEFAULT));
@@ -107,7 +114,7 @@ class Result {
 
     /** Заголовок на экране (`""`, если он убран) */
     getTitle() {
-        return this.#title_hidden ? "" : this.#title.innerText;
+        return this.#titleHidden ? "" : this.#title.innerText;
     }
 
     getDescription() {
@@ -143,7 +150,7 @@ class Result {
         const assertive = known === Result.STYLE.ERROR;
         this.#root.setAttribute("role", assertive ? "alert" : "status");
         this.#root.setAttribute("aria-live", assertive ? "assertive" : "polite");
-        if (this.#icon_custom === undefined) this.#renderStyleIcon();
+        if (this.#iconCustom === undefined) this.#renderStyleIcon();
         // Заголовок не задавали — он тоже описывает состояние
         this.#renderTitle();
         return this;
@@ -152,22 +159,25 @@ class Result {
     /** Свой значок (имя из `Icons`, `Icon`, компонент или узел); `undefined` возвращает значок состояния */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null || icon === "") {
-            this.#icon_custom = undefined;
+            this.#iconCustom = undefined;
             this.#renderStyleIcon();
             return this;
         }
-        this.#icon_custom = typeof icon === "string"
-            ? new Icon(icon, "36px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        this.#iconCustom =
+            typeof icon === "string"
+                ? new Icon(icon, "36px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         this.#icon.innerHTML = "";
-        this.#icon.appendChild(this.#icon_custom);
+        this.#icon.appendChild(this.#iconCustom);
         return this;
     }
 
     /** Заголовок; пустая строка — заголовок состояния, `null` — без заголовка */
     setTitle(text = undefined) {
-        this.#title_hidden = text === null;
-        this.#title_value = typeof text === "string" && text !== "" ? text : undefined;
+        this.#titleHidden = text === null;
+        this.#titleValue = typeof text === "string" && text !== "" ? text : undefined;
         this.#renderTitle();
         return this;
     }
@@ -218,10 +228,10 @@ class Result {
     }
 
     #renderTitle() {
-        const text = this.#title_value === undefined ? Result.TITLE[this.#style] : this.#title_value;
-        this.#title.hidden = this.#title_hidden;
-        this.#title.innerText = this.#title_hidden ? "" : text;
+        const text = this.#titleValue === undefined ? Result.TITLE[this.#style] : this.#titleValue;
+        this.#title.hidden = this.#titleHidden;
+        this.#title.innerText = this.#titleHidden ? "" : text;
     }
 }
 
-exports.Result = Result
+exports.Result = Result;

package/framework/components/chui_result/styles.css

@@ -72,17 +72,17 @@ result_actions:empty {
 
 /* Стили состояния красят плашку значка — заливку блока они не трогают */
 chui_result.result_success result_icon {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 chui_result.result_warning result_icon {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
 chui_result.result_error result_icon {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }