chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_radio_button/radio_button.js

@@ -1,28 +1,30 @@
 class RadioButton {
     #id = require("randomstring").generate();
-    #radioButton = document.createElement('radiobutton');
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = {
-        name: String(),
-        title: String(),
-        stringValue: String(),
-        value: Boolean(),
-        required: Boolean(),
-        width: String()
-    }) {
-        const {setStyles, optionOr} = require('../../../modules/chui_functions');
-        setStyles(__dirname + "/styles.css", 'chUiJS_RadioButton');
-        this.#radioButton.style.getPropertyValue('display')
-        this.#input.classList.add('radiobutton');
-        this.#input.type = 'radio';
-        this.#input.classList.add('radiobutton_input');
+    #radioButton = document.createElement("radiobutton");
+    #input = document.createElement("input");
+    #label = document.createElement("label");
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            stringValue: String(),
+            value: Boolean(),
+            required: Boolean(),
+            width: String(),
+        }
+    ) {
+        const { setStyles, optionOr } = require("../../../modules/chui_functions");
+        setStyles(__dirname + "/styles.css", "chUiJS_RadioButton");
+        this.#radioButton.style.getPropertyValue("display");
+        this.#input.classList.add("radiobutton");
+        this.#input.type = "radio";
+        this.#input.classList.add("radiobutton_input");
         this.#input.id = this.#id;
         // Пустая заготовка опции равносильна отсутствующей: иначе в value и подписи попадало «undefined»
         this.#input.value = optionOr(options.stringValue, "");
         if (optionOr(options.title, undefined) !== undefined) this.#label.innerText = options.title;
-        this.#label.setAttribute('for', this.#id);
-        this.#label.classList.add('labelr')
+        this.#label.setAttribute("for", this.#id);
+        this.#label.classList.add("labelr");
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.value !== undefined) this.#input.checked = options.value;
         if (options.required !== undefined) this.#input.required = options.required;
@@ -33,11 +35,21 @@ class RadioButton {
             }
         }
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.checked; }
-    setValue(value = Boolean()) { this.#input.checked = value; }
-    addChangeListener(listener) { this.#input.addEventListener('change', listener); }
-    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#input.checked;
+    }
+    setValue(value = Boolean()) {
+        this.#input.checked = value;
+    }
+    addChangeListener(listener) {
+        this.#input.addEventListener("change", listener);
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean;
+    }
     set() {
         this.#radioButton.appendChild(this.#input);
         this.#radioButton.appendChild(this.#label);
@@ -45,4 +57,4 @@ class RadioButton {
     }
 }
 
-exports.RadioButton = RadioButton
+exports.RadioButton = RadioButton;

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

@@ -4,59 +4,59 @@ radiobutton {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     align-items: center;
     justify-content: flex-start;
     /* Тот же шаг шрифта, что у CheckBox: квадратик и кружок должны быть одного размера */
     font-size: var(--font_default_size);
-    margin: var(--margin);
-    width: max-content
+    margin: var(--block_margin);
+    width: max-content;
 }
 
 .radiobutton {
     position: absolute;
     z-index: -1;
-    opacity: 0
+    opacity: 0;
 }
 
-.radiobutton+label {
+.radiobutton + label {
     display: inline-flex;
     align-items: center;
-    color:var(--text_color)
+    color: var(--text_color);
 }
 
-.radiobutton+label::before {
+.radiobutton + label::before {
     font-size: var(--font_default_size);
-    content: '';
+    content: "";
     display: flex;
     width: 1.2em;
     height: 1.2em;
     flex-shrink: 0;
-    flex-grow:0;
-    border-radius:50%;
-    margin-inline-end:10px;
-    align-items:center;
-    justify-content:center;
+    flex-grow: 0;
+    border-radius: 50%;
+    margin-inline-end: 10px;
+    align-items: center;
+    justify-content: center;
     color: transparent;
     background: var(--element_background);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.radiobutton:not(:disabled):not(:checked)+label:hover::before {
+.radiobutton:not(:disabled):not(:checked) + label:hover::before {
     background: var(--element_background_hover);
 }
-.radiobutton:not(:disabled):active+label::before {
+.radiobutton:not(:disabled):active + label::before {
     background: radial-gradient(circle, var(--text_color_hover) 22%, var(--blue_prime_background) 22%);
 }
 
-.radiobutton:focus-visible+label::before {
+.radiobutton:focus-visible + label::before {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
 
-.radiobutton:checked+label::before {
+.radiobutton:checked + label::before {
     background: radial-gradient(circle, var(--text_color_hover) 22%, var(--blue_prime_background) 22%);
     border: none;
     box-shadow: 0 0 1px 0 var(--blue_prime_background);
@@ -64,24 +64,24 @@ radiobutton {
 
 .labelr {
     cursor: pointer;
-    font-size: var(--font_default_size)
+    font-size: var(--font_default_size);
 }
 
-.radiobutton:disabled+label {
+.radiobutton:disabled + label {
     cursor: not-allowed;
     color: var(--text_color_disabled);
 }
 
-.radiobutton:disabled:not(:checked)+label::before {
+.radiobutton:disabled:not(:checked) + label::before {
     cursor: not-allowed;
     background: var(--element_background_disabled);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.radiobutton:disabled:checked+label::before {
+.radiobutton:disabled:checked + label::before {
     cursor: not-allowed;
     background: radial-gradient(circle, var(--text_color_disabled) 22%, var(--element_background_disabled) 22%);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
-}
+}

package/framework/components/chui_inputs/chui_rating/rating.js

@@ -1,7 +1,7 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Оценка звёздами: поле ввода от 0 до `max`.
@@ -36,7 +36,7 @@ const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
 class Rating {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -44,38 +44,40 @@ class Rating {
     #title = document.createElement("rating_title");
     #row = document.createElement("rating_row");
     #track = document.createElement("rating_track");
-    #value_text = document.createElement("rating_value");
+    #valueText = document.createElement("rating_value");
     #id = undefined;
     #name = undefined;
     #label = undefined;
-    #title_text = undefined;
+    #titleText = undefined;
     #max = 5;
     #value = 0;
-    #read_only = false;
+    #readOnly = false;
     #disabled = false;
     #size = Rating.SIZE.DEFAULT;
     #icon = Icons.TOGGLE.STAR;
-    #icon_empty = Icons.TOGGLE.STAR_BORDER;
+    #iconEmpty = Icons.TOGGLE.STAR_BORDER;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
     #dragging = false;
     #moved = false;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: Number(),
-        max: Number(),
-        readOnly: Boolean(),
-        disabled: Boolean(),
-        size: String(),
-        icon: String(),
-        iconEmpty: String(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: Number(),
+            max: Number(),
+            readOnly: Boolean(),
+            disabled: Boolean(),
+            size: String(),
+            icon: String(),
+            iconEmpty: String(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Rating");
         Rating.#counter += 1;
         this.#id = options.id === undefined ? `chui_rating_${Rating.#counter}` : options.id;
@@ -83,14 +85,14 @@ class Rating {
         this.#name = options.name;
         this.#label = options.label;
         if (options.icon !== undefined) this.#icon = options.icon;
-        if (options.iconEmpty !== undefined) this.#icon_empty = options.iconEmpty;
+        if (options.iconEmpty !== undefined) this.#iconEmpty = options.iconEmpty;
         this.#max = Rating.#maxCount(options.max);
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#row.className = "rating_row";
-        this.#value_text.className = "rating_value";
+        this.#valueText.className = "rating_value";
         // Текст значения дублирует aria-valuetext, поэтому от скринридера он скрыт
-        this.#value_text.setAttribute("aria-hidden", "true");
+        this.#valueText.setAttribute("aria-hidden", "true");
         this.#track.className = "rating_track";
         this.#track.addEventListener("keydown", this.#onKeyDown);
         this.#track.addEventListener("pointerdown", this.#onPointerDown);
@@ -98,7 +100,7 @@ class Rating {
         this.#track.addEventListener("pointerup", this.#onPointerUp);
         this.#track.addEventListener("pointercancel", this.#onPointerUp);
         this.#row.appendChild(this.#track);
-        this.#row.appendChild(this.#value_text);
+        this.#row.appendChild(this.#valueText);
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#row);
         if (options.title !== undefined) this.setTitle(options.title);
@@ -107,15 +109,15 @@ class Rating {
         // Валидация: пустая оценка — это 0, поэтому required означает «оценку поставили»
         Validate.installField(this, options, this.#root, undefined, () => this.#rawValue(), this.#row);
         // Поле — не нативный контрол: aria-invalid ставится своему узлу, а не input
-        const base_set_error = this.setError;
+        const baseSetError = this.setError;
         this.setError = (message = String()) => {
-            base_set_error(message);
+            baseSetError(message);
             this.#track.setAttribute("aria-invalid", "true");
             return this;
         };
-        const base_clear_error = this.clearError;
+        const baseClearError = this.clearError;
         this.clearError = () => {
-            base_clear_error();
+            baseClearError();
             this.#track.removeAttribute("aria-invalid");
             return this;
         };
@@ -135,7 +137,7 @@ class Rating {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Оценка (0 — не поставлена) */
@@ -150,7 +152,9 @@ class Rating {
 
     /** Читаемое значение: «4 из 5» или «Нет оценки» */
     getValueText() {
-        return this.#value === 0 ? I18n.t("forms.ratingNone") : I18n.t("forms.ratingOf", {value: this.#value, max: this.#max});
+        return this.#value === 0
+            ? I18n.t("forms.ratingNone")
+            : I18n.t("forms.ratingOf", { value: this.#value, max: this.#max });
     }
 
     getDisabled() {
@@ -158,7 +162,7 @@ class Rating {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -175,7 +179,7 @@ class Rating {
 
     /** Подпись над звёздами; `setTitle(undefined)` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -221,9 +225,9 @@ class Rating {
     }
 
     /** Режим показа: звёзды видны, но не принимают фокус и клики */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("rating_readonly", this.#read_only);
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("rating_readonly", this.#readOnly);
         this.#render();
         return this;
     }
@@ -244,7 +248,7 @@ class Rating {
 
     /** Фокус на поле: `Form` зовёт это при ошибке валидации */
     focus() {
-        if (!this.#read_only && !this.#disabled) this.#track.focus();
+        if (!this.#readOnly && !this.#disabled) this.#track.focus();
         return this;
     }
 
@@ -261,14 +265,14 @@ class Rating {
 
     #accessibleName() {
         if (this.#label !== undefined && this.#label !== "") return this.#label;
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
         return I18n.t("forms.ratingLabel");
     }
 
     #render() {
         // Режим показа: не поле, а картинка с готовым значением
         this.#track.innerHTML = "";
-        if (this.#read_only) {
+        if (this.#readOnly) {
             this.#track.removeAttribute("tabindex");
             this.#track.removeAttribute("aria-valuemin");
             this.#track.removeAttribute("aria-valuemax");
@@ -291,12 +295,12 @@ class Rating {
         for (let index = 1; index <= this.#max; index++) {
             const star = document.createElement("rating_star");
             star.className = index <= this.#value ? "rating_star rating_star_filled" : "rating_star";
-            const glyph = new Icon(index <= this.#value ? this.#icon : this.#icon_empty, this.#iconSize()).set();
+            const glyph = new Icon(index <= this.#value ? this.#icon : this.#iconEmpty, this.#iconSize()).set();
             glyph.setAttribute("aria-hidden", "true");
             star.appendChild(glyph);
             this.#track.appendChild(star);
         }
-        this.#value_text.innerText = this.getValueText();
+        this.#valueText.innerText = this.getValueText();
     }
 
     #iconSize() {
@@ -312,11 +316,11 @@ class Rating {
 
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#value, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#value, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#value, this);
     }
 
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         let next = this.#value;
         switch (event.key) {
             case "ArrowRight":
@@ -354,7 +358,7 @@ class Rating {
     };
 
     #onPointerDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         event.preventDefault();
         this.#dragging = true;
         this.#moved = false;
@@ -417,4 +421,4 @@ class Rating {
     static SMALL_ICON_SIZE = "14px";
 }
 
-exports.Rating = Rating
+exports.Rating = Rating;

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

@@ -5,10 +5,10 @@ chui_rating {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -16,7 +16,7 @@ chui_rating {
 rating_title {
     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;