chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_datetime/datetime.js

@@ -43,13 +43,13 @@ class DateTimeInput {
     #time = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #min = undefined;
     #max = undefined;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -72,10 +72,10 @@ class DateTimeInput {
         DateTimeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_datetime_input_${DateTimeInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
+        this.#labelText = options.label;
         this.#min = DateTimeInput.#parseMoment(options.min);
         this.#max = DateTimeInput.#parseMoment(options.max);
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#label.className = "datetime_label";
@@ -109,9 +109,9 @@ class DateTimeInput {
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = MOMENT_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         rules.validate = (value) => {
-            const custom = own_validate === undefined ? undefined : own_validate(value);
+            const custom = ownValidate === undefined ? undefined : ownValidate(value);
             if (custom !== undefined && custom !== null && custom !== true) return custom;
             const moment = String(value);
             if (this.#min !== undefined && moment < this.#min) return I18n.t("dateTime.min", { min: this.#min });
@@ -133,12 +133,12 @@ class DateTimeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Момент «ГГГГ-ММ-ДДTЧЧ:ММ»; пустая строка — заполнена не вся пара */
@@ -188,7 +188,7 @@ class DateTimeInput {
 
     /** Подпись над парой полей; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -201,7 +201,7 @@ class DateTimeInput {
 
     /** Доступное имя группы; `undefined` убирает его */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         if (text === undefined) this.#row.removeAttribute("aria-label");
         else this.#row.setAttribute("aria-label", String(text));
         return this;
@@ -280,7 +280,7 @@ class DateTimeInput {
     #changed() {
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     static #parseMoment(value = undefined) {

package/framework/components/chui_inputs/chui_datetime/styles.css

@@ -5,18 +5,18 @@ chui_datetime_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .datetime_label {
     display: block;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;

package/framework/components/chui_inputs/chui_email/email.js

@@ -2,8 +2,8 @@ const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class EmailInput {
     #id = require("randomstring").generate();
-    #chui_email_input = document.createElement("chui_email_input");
-    #chui_email_main = document.createElement("chui_email_main");
+    #chuiEmailInput = document.createElement("chui_email_input");
+    #chuiEmailMain = document.createElement("chui_email_main");
     #label = document.createElement("label");
     #input = document.createElement("input");
     #title = undefined;
@@ -25,20 +25,20 @@ class EmailInput {
         this.#input.pattern = "^([a-zA-Z0-9_.+-])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$";
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: email-формат проверяется правилом type: 'email'
-        Validate.installField(this, options, this.#chui_email_main, undefined, () => this.#input.value);
+        Validate.installField(this, options, this.#chuiEmailMain, undefined, () => this.#input.value);
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
             this.#label.classList.add("email_label");
             this.#label.setAttribute("for", this.#id);
-            this.#chui_email_input.appendChild(this.#label);
+            this.#chuiEmailInput.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_email_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiEmailInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`chui_email_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
-        this.#chui_email_main.appendChild(this.#input);
-        this.#chui_email_input.appendChild(this.#chui_email_main);
+        this.#chuiEmailMain.appendChild(this.#input);
+        this.#chuiEmailInput.appendChild(this.#chuiEmailMain);
     }
     getName() {
         return this.#input.name;
@@ -55,17 +55,17 @@ class EmailInput {
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#chui_email_main.classList.add("chui_email_main_disabled");
+            this.#chuiEmailMain.classList.add("chui_email_main_disabled");
             this.#input.className = "email_input_disabled";
             this.#label.className = "email_label_disabled";
         } else {
-            this.#chui_email_main.classList.remove("chui_email_main_disabled");
+            this.#chuiEmailMain.classList.remove("chui_email_main_disabled");
             this.#input.className = "email_input";
             this.#label.className = "email_label";
         }
     }
     set() {
-        return this.#chui_email_input;
+        return this.#chuiEmailInput;
     }
 }
 

package/framework/components/chui_inputs/chui_email/styles.css

@@ -4,12 +4,12 @@ chui_email_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: var(--control_width);
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_email_main {
@@ -17,11 +17,11 @@ chui_email_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     align-items: center;
     position: relative;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -40,7 +40,7 @@ chui_email_main {
 .email_label {
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -63,7 +63,7 @@ chui_email_main {
     cursor: not-allowed;
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color_disabled);

package/framework/components/chui_inputs/chui_file/file.js

@@ -18,8 +18,8 @@ class AcceptTypes {
 exports.AcceptTypes = AcceptTypes;
 
 class FileInput {
-    #chui_file_main = document.createElement("chui_file_main");
-    #chui_file_input = document.createElement("chui_file_input");
+    #chuiFileMain = document.createElement("chui_file_main");
+    #chuiFileInput = document.createElement("chui_file_input");
     #id = require("randomstring").generate();
     #title = String();
     #input = document.createElement("input");
@@ -58,10 +58,10 @@ class FileInput {
             this.#label.innerText = options.title;
             this.#label.className = "input_label";
             this.#label.setAttribute("for", this.#id);
-            this.#chui_file_input.appendChild(this.#label);
+            this.#chuiFileInput.appendChild(this.#label);
         }
-        this.#chui_file_main.appendChild(this.#input);
-        this.#chui_file_input.appendChild(this.#chui_file_main);
+        this.#chuiFileMain.appendChild(this.#input);
+        this.#chuiFileInput.appendChild(this.#chuiFileMain);
     }
     addChangeListener(listener = () => {}) {
         this.#input.addEventListener("change", listener);
@@ -87,17 +87,17 @@ class FileInput {
     setDisabled(value = Boolean()) {
         this.#input.disabled = value;
         if (value) {
-            this.#chui_file_main.classList.add("chui_file_main_disabled");
+            this.#chuiFileMain.classList.add("chui_file_main_disabled");
             this.#input.className = "file_input_disabled";
             this.#label.className = "input_label_disabled";
         } else {
-            this.#chui_file_main.classList.remove("chui_file_main_disabled");
+            this.#chuiFileMain.classList.remove("chui_file_main_disabled");
             this.#input.className = "file_input";
             this.#label.className = "input_label";
         }
     }
     set() {
-        return this.#chui_file_input;
+        return this.#chuiFileInput;
     }
 }
 

package/framework/components/chui_inputs/chui_file/styles.css

@@ -4,12 +4,12 @@ chui_file_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_file_main {
@@ -17,7 +17,7 @@ chui_file_main {
     width: max-content;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     border: none;
@@ -46,7 +46,7 @@ chui_file_main {
     cursor: not-allowed;
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color_disabled);
@@ -65,7 +65,7 @@ chui_file_main {
 .input_label {
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -75,14 +75,17 @@ input[type="file"]::file-selector-button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     font-weight: 400;
     margin-block: 0 0;
-    margin-inline: 0 var(--margin);
+    margin-inline: 0 var(--block_margin);
     color: var(--text_color);
-    transition: all var(--transition_time);
+    transition:
+        background-color var(--motion_fast) var(--motion_ease),
+        color var(--motion_fast) var(--motion_ease),
+        border-color var(--motion_fast) var(--motion_ease);
     font-family: "chui_I";
     background: var(--button_background);
     border: 1px solid var(--button_border_color);

package/framework/components/chui_inputs/chui_hotkey/hotkey.js

@@ -59,19 +59,19 @@ class HotkeyInput {
     #row = document.createElement("hotkey_row");
     #field = document.createElement("hotkey_field");
     #kbd = undefined;
-    #clear_button = document.createElement("button");
+    #clearButton = document.createElement("button");
     #hint = document.createElement("hotkey_hint");
     #status = document.createElement("hotkey_status");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #value = "";
-    #allow_single = false;
-    #read_only = false;
+    #allowSingle = false;
+    #readOnly = false;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -93,9 +93,9 @@ class HotkeyInput {
         HotkeyInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_hotkey_input_${HotkeyInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#allow_single = options.allowSingle === true;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#allowSingle = options.allowSingle === true;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#label.className = "hotkey_label";
@@ -112,13 +112,13 @@ class HotkeyInput {
         // Клавиши — внешний вид: имя и значение несёт само поле
         keys.setAttribute("aria-hidden", "true");
         this.#field.appendChild(keys);
-        this.#clear_button.type = "button";
-        this.#clear_button.className = "hotkey_clear";
-        this.#clear_button.setAttribute("aria-label", I18n.t("forms.hotkeyClear"));
-        const clear_icon = new Icon(Icons.NAVIGATION.CLOSE).set();
-        clear_icon.setAttribute("aria-hidden", "true");
-        this.#clear_button.appendChild(clear_icon);
-        this.#clear_button.addEventListener("click", () => {
+        this.#clearButton.type = "button";
+        this.#clearButton.className = "hotkey_clear";
+        this.#clearButton.setAttribute("aria-label", I18n.t("forms.hotkeyClear"));
+        const clearIcon = new Icon(Icons.NAVIGATION.CLOSE).set();
+        clearIcon.setAttribute("aria-hidden", "true");
+        this.#clearButton.appendChild(clearIcon);
+        this.#clearButton.addEventListener("click", () => {
             if (this.#disabled) return;
             this.#apply("", true);
             this.#field.focus();
@@ -132,7 +132,7 @@ class HotkeyInput {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#row.appendChild(this.#field);
-        this.#row.appendChild(this.#clear_button);
+        this.#row.appendChild(this.#clearButton);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
         this.#root.appendChild(this.#label);
@@ -164,12 +164,12 @@ class HotkeyInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Сочетание в каноническом виде («Ctrl+Shift+S»); пустая строка — не задано */
@@ -187,11 +187,11 @@ class HotkeyInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     isAllowSingle() {
-        return this.#allow_single;
+        return this.#allowSingle;
     }
 
     /**
@@ -238,7 +238,7 @@ class HotkeyInput {
 
     /** Подпись над полем; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         this.#label.id = `${this.#id}_label`;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
@@ -258,8 +258,8 @@ class HotkeyInput {
 
     /** Доступное имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#field.removeAttribute("aria-label");
             else this.#field.setAttribute("aria-label", String(text));
         }
@@ -298,15 +298,15 @@ class HotkeyInput {
 
     /** Разрешить одиночные клавиши без модификаторов (`F5`, `A`) */
     setAllowSingle(allow = Boolean()) {
-        this.#allow_single = allow === true;
+        this.#allowSingle = allow === true;
         return this;
     }
 
     /** Режим показа: сочетание видно, но поле не принимает фокус и нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("hotkey_readonly", this.#read_only);
-        if (this.#read_only) {
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("hotkey_readonly", this.#readOnly);
+        if (this.#readOnly) {
             this.#field.removeAttribute("tabindex");
             this.#hint.hidden = true;
             this.#field.removeAttribute("aria-describedby");
@@ -330,11 +330,11 @@ class HotkeyInput {
         if (this.#disabled) {
             this.#field.setAttribute("tabindex", "-1");
             this.#field.setAttribute("aria-disabled", "true");
-            this.#clear_button.disabled = true;
+            this.#clearButton.disabled = true;
         } else {
             this.#field.removeAttribute("aria-disabled");
-            this.#clear_button.disabled = false;
-            if (!this.#read_only) this.#field.setAttribute("tabindex", "0");
+            this.#clearButton.disabled = false;
+            if (!this.#readOnly) this.#field.setAttribute("tabindex", "0");
         }
         this.#render();
         return this;
@@ -348,7 +348,7 @@ class HotkeyInput {
 
     /** Фокус на поле: `Form` зовёт это при ошибке валидации */
     focus() {
-        if (!this.#disabled && !this.#read_only) this.#field.focus();
+        if (!this.#disabled && !this.#readOnly) this.#field.focus();
         return this;
     }
 
@@ -359,8 +359,8 @@ class HotkeyInput {
 
     // === ВНУТРЕННЕЕ ===
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("forms.hotkeyLabel");
     }
 
@@ -377,7 +377,7 @@ class HotkeyInput {
                 : I18n.t("forms.hotkeyRecorded", { value: value.split("+").join(" + ") })
         );
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     #render() {
@@ -386,7 +386,7 @@ class HotkeyInput {
         keys.setAttribute("aria-hidden", "true");
         if (this.#value === "") this.#field.removeAttribute("aria-keyshortcuts");
         else this.#field.setAttribute("aria-keyshortcuts", this.#ariaShortcut());
-        this.#clear_button.hidden = this.#value === "" || this.#read_only;
+        this.#clearButton.hidden = this.#value === "" || this.#readOnly;
         this.#field.classList.toggle("hotkey_field_empty", this.#value === "");
     }
 
@@ -402,7 +402,7 @@ class HotkeyInput {
     }
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         // Tab не перехватываем: иначе поле нельзя было бы покинуть
         if (event.key === "Tab") return;
         // Escape, Delete и Backspace снимают сочетание, поэтому связать их нельзя
@@ -426,7 +426,7 @@ class HotkeyInput {
             );
             return;
         }
-        if (modifiers.length === 0 && !this.#allow_single) {
+        if (modifiers.length === 0 && !this.#allowSingle) {
             event.preventDefault();
             this.#announce(I18n.t("forms.hotkeyNeedModifier"));
             return;

package/framework/components/chui_inputs/chui_hotkey/styles.css

@@ -5,20 +5,20 @@ chui_hotkey_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .hotkey_label {
     display: block;
     width: max-content;
-    /* Только нижний отступ: верхний и боковые уже даёт корень поля (--margin), а свой
+    /* Только нижний отступ: верхний и боковые уже даёт корень поля (--block_margin), а свой
        боковой отступ сдвигал подпись вправо от коробки поля */
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -34,7 +34,7 @@ chui_hotkey_input {
     gap: 8px;
 }
 
-/* Поле — та же коробка, что у текстового поля: --control_height, hairline и --border_radius */
+/* Поле — та же коробка, что у текстового поля: --control_height, hairline и --radius_sm */
 .hotkey_field {
     display: flex;
     align-items: center;
@@ -43,7 +43,7 @@ chui_hotkey_input {
     min-height: var(--control_height);
     padding: 3px 10px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     cursor: text;