chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_otp/otp.js

@@ -1,7 +1,7 @@
-const {setStyles} = require("../../../modules/chui_functions");
-const {Validate} = require("../../../modules/chui_validate/chui_validate");
-const {RovingKeyboard} = require("../../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { RovingKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Поле одноразового кода: несколько клеток по одному символу.
@@ -88,42 +88,44 @@ class OtpInput {
     #roving = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #length = 6;
     #type = OtpInput.TYPES.NUMERIC;
     #value = "";
     #obscure = false;
     #disabled = false;
-    #read_only = false;
+    #readOnly = false;
     #listeners = [];
-    #complete_listeners = [];
-    #on_change = undefined;
-    #on_complete = undefined;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        length: Number(),
-        type: String(),
-        value: String(),
-        obscure: Boolean(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        changeListener: undefined,
-        onChange: undefined,
-        onComplete: undefined
-    }) {
+    #completeListeners = [];
+    #onChange = undefined;
+    #onComplete = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            length: Number(),
+            type: String(),
+            value: String(),
+            obscure: Boolean(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+            onComplete: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_OtpInput");
         OtpInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_otp_input_${OtpInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
-        this.#on_complete = options.onComplete;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
+        this.#onComplete = options.onComplete;
         this.#length = OtpInput.#toLength(options.length);
         this.#type = OtpInput.#toType(options.type);
         this.#root.id = this.#id;
@@ -144,16 +146,23 @@ class OtpInput {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("forms.otpLabel") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("forms.otpLabel") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         this.#build();
-        this.#roving = new RovingKeyboard(this.#row, {itemSelector: ".otp_cell"});
+        this.#roving = new RovingKeyboard(this.#row, { itemSelector: ".otp_cell" });
         // «Неверный формат» у кода значит «код не до конца» — так и говорим
-        const messages = Object.assign({pattern: I18n.t("forms.otpIncomplete")}, options.messages);
-        Validate.installField(this, Object.assign({}, options, {
-            pattern: OtpInput.pattern(this.#type, this.#length),
-            messages: messages,
-        }), this.#root, this.#error, () => this.#value, this.#row);
+        const messages = Object.assign({ pattern: I18n.t("forms.otpIncomplete") }, options.messages);
+        Validate.installField(
+            this,
+            Object.assign({}, options, {
+                pattern: OtpInput.pattern(this.#type, this.#length),
+                messages: messages,
+            }),
+            this.#root,
+            this.#error,
+            () => this.#value,
+            this.#row
+        );
         if (options.value !== undefined && options.value !== "") this.setValue(options.value);
         this.setObscure(options.obscure === true);
         this.setReadOnly(options.readOnly === true);
@@ -172,12 +181,12 @@ class OtpInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     getLength() {
@@ -212,7 +221,7 @@ class OtpInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -229,7 +238,7 @@ class OtpInput {
 
     /** Подпись над клетками; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -246,8 +255,8 @@ class OtpInput {
 
     /** Имя группы, когда подписи в разметке нет */
     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.#row.removeAttribute("aria-label");
             else this.#row.setAttribute("aria-label", String(text));
         }
@@ -319,10 +328,10 @@ class OtpInput {
     }
 
     /** Режим показа: код видно и можно скопировать, но клетки не принимают нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("otp_readonly", this.#read_only);
-        for (const cell of this.#cells) cell.readOnly = this.#read_only;
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("otp_readonly", this.#readOnly);
+        for (const cell of this.#cells) cell.readOnly = this.#readOnly;
         return this;
     }
 
@@ -342,7 +351,7 @@ class OtpInput {
 
     /** Слушатель заполненного кода: `(value, otpInput) => {}` */
     addCompleteListener(listener = () => {}) {
-        this.#complete_listeners.push(listener);
+        this.#completeListeners.push(listener);
         return this;
     }
 
@@ -373,8 +382,8 @@ class OtpInput {
     }
 
     #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.otpLabel");
     }
 
@@ -406,7 +415,7 @@ class OtpInput {
             cell.setAttribute("autocomplete", "one-time-code");
             cell.setAttribute("autocapitalize", "off");
             cell.setAttribute("spellcheck", "false");
-            cell.setAttribute("aria-label", I18n.t("forms.otpCell", {index: index + 1, total: this.#length}));
+            cell.setAttribute("aria-label", I18n.t("forms.otpCell", { index: index + 1, total: this.#length }));
             cell.setAttribute("tabindex", index === 0 ? "0" : "-1");
             cell.addEventListener("input", this.#onInput);
             cell.addEventListener("keydown", this.#onKeyDown);
@@ -422,7 +431,7 @@ class OtpInput {
         this.#value = this.#cells.map((cell) => cell.value).join("");
         if (this.#roving !== undefined) this.#roving.refresh();
         if (this.#obscure) this.#root.classList.add("otp_obscured");
-        if (this.#read_only) for (const cell of this.#cells) cell.readOnly = true;
+        if (this.#readOnly) for (const cell of this.#cells) cell.readOnly = true;
         if (this.#disabled) for (const cell of this.#cells) cell.disabled = true;
         return this;
     }
@@ -445,16 +454,16 @@ class OtpInput {
     #collect(notify = false) {
         const value = this.#cells.map((cell) => cell.value).join("");
         const changed = value !== this.#value;
-        const complete_before = this.#value.length === this.#length && this.#value !== "";
+        const completeBefore = this.#value.length === this.#length && this.#value !== "";
         this.#value = value;
         this.#announce();
         if (!changed || !notify) return this;
         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);
         const complete = this.isComplete();
-        if (complete && !complete_before) {
-            for (const listener of [...this.#complete_listeners]) listener(value, this);
-            if (this.#on_complete !== undefined) this.#on_complete(value, this);
+        if (complete && !completeBefore) {
+            for (const listener of [...this.#completeListeners]) listener(value, this);
+            if (this.#onComplete !== undefined) this.#onComplete(value, this);
         }
         return this;
     }
@@ -462,7 +471,7 @@ class OtpInput {
     #announce() {
         if (this.#value.length === 0) this.#status.innerText = "";
         else if (this.isComplete()) this.#status.innerText = I18n.t("forms.otpComplete");
-        else this.#status.innerText = I18n.t("forms.otpEntered", {entered: this.#value.length, total: this.#length});
+        else this.#status.innerText = I18n.t("forms.otpEntered", { entered: this.#value.length, total: this.#length });
     }
 
     // Раскладывает символы по клеткам от `start`; если места не хватает — с начала
@@ -489,7 +498,7 @@ class OtpInput {
     }
 
     #onInput = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const cell = event.target;
         const index = this.#cells.indexOf(cell);
         if (index === -1) return;
@@ -522,7 +531,7 @@ class OtpInput {
     };
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const cell = event.target;
         const index = this.#cells.indexOf(cell);
         if (index === -1) return;
@@ -548,11 +557,11 @@ class OtpInput {
     };
 
     #onPaste = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         event.preventDefault();
         const text = event.clipboardData === null ? "" : event.clipboardData.getData("text");
         this.#fill(text, this.#cells.indexOf(event.target));
     };
 }
 
-exports.OtpInput = OtpInput
+exports.OtpInput = OtpInput;

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

@@ -5,18 +5,18 @@ chui_otp_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);
 }
 
 .otp_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;
@@ -39,7 +39,7 @@ chui_otp_input {
     margin: 0;
     padding: 0;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-size: 18px;
@@ -62,7 +62,7 @@ chui_otp_input {
     border: none;
     outline: 1px solid var(--red_prime_background);
     outline-offset: 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 .otp_disabled .otp_cell {

package/framework/components/chui_inputs/chui_password/password.js

@@ -1,87 +1,101 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {Animation} = require("../../../modules/chui_animations/animations");
-const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
-const {makeKeyboardButton} = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Animation } = require("../../../modules/chui_animations/animations");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../../modules/chui_a11y/chui_a11y");
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class PasswordInput {
     #id = require("randomstring").generate();
-    #password_main = document.createElement('password_main');
-    #see_pass_button = document.createElement('see_pass_button');
-    #see_pass_button_disabled = document.createElement('see_pass_button');
-    #chui_password_input = document.createElement('chui_password_input');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
+    #passwordMain = document.createElement("password_main");
+    #seePassButton = document.createElement("see_pass_button");
+    #seePassButtonDisabled = document.createElement("see_pass_button");
+    #chuiPasswordInput = document.createElement("chui_password_input");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
     #title = undefined;
-    #error_message_password = document.createElement("error_message_password");
-    constructor(options = {
-        name: String(), title: String(), placeholder: String(), width: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_PasswordInput');
+    #errorMessagePassword = document.createElement("error_message_password");
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_PasswordInput");
         this.#title = options.title;
-        this.#input.type = 'password';
+        this.#input.type = "password";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.className = 'password_input';
+        this.#input.className = "password_input";
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: тот же контракт validate/setError/clearError, своё сообщение под полем
-        Validate.installField(this, options, this.#password_main, this.#error_message_password, () => this.#input.value);
+        Validate.installField(this, options, this.#passwordMain, this.#errorMessagePassword, () => this.#input.value);
         // Кнопка показа пароля — не значок, а кнопка: роль, остановка обхода и Enter/Space
-        makeKeyboardButton(this.#see_pass_button);
+        makeKeyboardButton(this.#seePassButton);
         // У выключенного поля кнопка декоративна: фокус в неё не попадает
-        this.#see_pass_button_disabled.setAttribute("aria-hidden", "true");
-        this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
-        this.#setSeeGlyph(this.#see_pass_button_disabled, Icons.ACTIONS.VISIBILITY, "var(--text_color_disabled)");
+        this.#seePassButtonDisabled.setAttribute("aria-hidden", "true");
+        this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
+        this.#setSeeGlyph(this.#seePassButtonDisabled, Icons.ACTIONS.VISIBILITY, "var(--text_color_disabled)");
         // Курсор выключенного поля даёт его контейнер (`.password_main_disabled`),
         // курсор наследуется и на кнопку
         this.#syncSeeLabel();
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.classList.add('password_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_password_input.appendChild(this.#label);
+            this.#label.classList.add("password_label");
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiPasswordInput.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_password_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiPasswordInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`password_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
 
-        this.#see_pass_button.addEventListener('mousedown', (event) => {
+        this.#seePassButton.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
 
-        this.#password_main.appendChild(this.#input);
-        this.#password_main.appendChild(this.#see_pass_button);
-        this.#see_pass_button.addEventListener('click', () => this.#showPassword());
-        this.#chui_password_input.appendChild(this.#password_main);
+        this.#passwordMain.appendChild(this.#input);
+        this.#passwordMain.appendChild(this.#seePassButton);
+        this.#seePassButton.addEventListener("click", () => this.#showPassword());
+        this.#chuiPasswordInput.appendChild(this.#passwordMain);
 
         //
         this.#input.addEventListener("input", () => {
             this.clearError();
-            new Animation(this.#error_message_password).fadeOut();
-        })
+            new Animation(this.#errorMessagePassword).fadeOut();
+        });
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(text = String()) {
+        this.#input.value = text;
     }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#input.value; }
-    setValue(text = String()) { this.#input.value = text; }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#password_main.classList.add("password_main_disabled")
-            this.#input.className = "password_input_disabled"
-            this.#label.className = "password_label_disabled"
-            this.#see_pass_button.remove();
-            this.#password_main.appendChild(this.#see_pass_button_disabled);
+            this.#passwordMain.classList.add("password_main_disabled");
+            this.#input.className = "password_input_disabled";
+            this.#label.className = "password_label_disabled";
+            this.#seePassButton.remove();
+            this.#passwordMain.appendChild(this.#seePassButtonDisabled);
         } else {
-            this.#password_main.classList.remove("password_main_disabled")
-            this.#input.className = "password_input"
-            this.#label.className = "password_label"
-            this.#see_pass_button_disabled.remove();
-            this.#password_main.appendChild(this.#see_pass_button);
+            this.#passwordMain.classList.remove("password_main_disabled");
+            this.#input.className = "password_input";
+            this.#label.className = "password_label";
+            this.#seePassButtonDisabled.remove();
+            this.#passwordMain.appendChild(this.#seePassButton);
         }
     }
     setErrorMessage(message = String()) {
@@ -89,9 +103,11 @@ class PasswordInput {
         // Своя отрисовка оставляла ошибку только глазами — скринридер о ней не знал
         this.setError(message);
         // У поля сообщение скрыто по умолчанию (`display: none`) — показываем анимацией
-        new Animation(this.#error_message_password).fadeIn();
+        new Animation(this.#errorMessagePassword).fadeIn();
+    }
+    set() {
+        return this.#chuiPasswordInput;
     }
-    set() { return this.#chui_password_input; }
     /** Значок кнопки: узел помечается скрытым — имя кнопки даёт `aria-label`, а не лигатура */
     #setSeeGlyph(button = new HTMLElement(), icon = String(), color = String()) {
         const glyph = new Icon(icon, undefined, color).set();
@@ -103,20 +119,20 @@ class PasswordInput {
     #syncSeeLabel() {
         const shown = this.#input.type === "text";
         const label = I18n.t(shown ? "forms.passwordHide" : "forms.passwordShow");
-        this.#see_pass_button.setAttribute("aria-label", label);
-        this.#see_pass_button.setAttribute("title", label);
+        this.#seePassButton.setAttribute("aria-label", label);
+        this.#seePassButton.setAttribute("title", label);
     }
     #showPassword() {
         this.#input.focus();
         if (this.#input.type === "password") {
-            this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY_OFF, "var(--blue_prime_background)");
+            this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY_OFF, "var(--blue_prime_background)");
             this.#input.type = "text";
         } else {
-            this.#setSeeGlyph(this.#see_pass_button, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
+            this.#setSeeGlyph(this.#seePassButton, Icons.ACTIONS.VISIBILITY, "var(--blue_prime_background)");
             this.#input.type = "password";
         }
         this.#syncSeeLabel();
     }
 }
 
-exports.PasswordInput = PasswordInput
+exports.PasswordInput = PasswordInput;

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

@@ -4,12 +4,12 @@ chui_password_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);
 }
 
 password_main {
@@ -17,11 +17,11 @@ password_main {
     outline: none;
     width: -webkit-fill-available;
     height: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     font-size: var(--font_default_size);
     color: var(--text_color);
     position: relative;
-    padding: var(--control_padding) 43px var(--main_padding);
+    padding: var(--control_padding) 43px var(--block_padding);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -48,16 +48,16 @@ see_pass_button {
     margin: 0;
     display: inline-flex;
     justify-content: center;
-    align-items: center
+    align-items: center;
 }
 
 .password_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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 .error_border {
@@ -68,10 +68,10 @@ error_message_password {
     display: none;
     height: max-content;
     width: max-content;
-    margin: var(--margin) var(--margin) 0 var(--margin);
+    margin: var(--block_margin) var(--block_margin) 0 var(--block_margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--red_prime_background)
+    font-weight: 500;
+    color: var(--red_prime_background);
 }
 
 /* DISABLED STYLES */
@@ -85,10 +85,10 @@ error_message_password {
     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)
+    font-weight: 500;
+    color: var(--text_color_disabled);
 }
 
 .password_input_disabled {
@@ -101,4 +101,4 @@ error_message_password {
     text-align: start;
     border: none;
     font-size: var(--font_default_size);
-}
+}