chuijs 4.0.3 → 4.0.4

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

@@ -44,20 +44,20 @@ 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;
 
@@ -85,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);
@@ -100,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);
@@ -109,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;
         };
@@ -137,7 +137,7 @@ class Rating {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Оценка (0 — не поставлена) */
@@ -162,7 +162,7 @@ class Rating {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -179,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 = "";
@@ -225,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;
     }
@@ -248,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;
     }
 
@@ -265,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");
@@ -295,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() {
@@ -316,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":
@@ -358,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;

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;

package/framework/components/chui_inputs/chui_select_box/select_box.js

@@ -7,16 +7,16 @@ const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class Select {
     #id = require("randomstring").generate();
-    #id_sb = require("randomstring").generate();
-    #Select_main = document.createElement("chui_selectbox");
-    #Select_second = document.createElement("selectbox");
+    #idSb = require("randomstring").generate();
+    #SelectMain = document.createElement("chui_selectbox");
+    #SelectSecond = document.createElement("selectbox");
     #label = document.createElement("label");
     #input = document.createElement("input");
-    #button_open = document.createElement("select_button_open");
-    #button_open_disabled = document.createElement("select_button_open");
-    #disabled_trigger = false;
+    #buttonOpen = document.createElement("select_button_open");
+    #buttonOpenDisabled = document.createElement("select_button_open");
+    #disabledTrigger = false;
     // Признак «вариант только что выбран мышью» — см. обработчик клика по полю
-    #chosen_by_mouse = false;
+    #chosenByMouse = false;
     #dropdown = document.createElement("selectbox_dropdown");
     #a11y = undefined;
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
@@ -24,8 +24,8 @@ class Select {
     // `selectbox`: слой списка накрывает своё же поле, поэтому у настоящего щелчка по полю
     // цель `mouseup` — слой, а `click` схлопывается до `<selectbox>` и прежняя проверка
     // «цель — не ребёнок selectbox» принимала его за клик снаружи (список закрывался сразу)
-    #window_click_event = (event) => {
-        if (!this.#Select_main.contains(event.target)) this.#closeDropdown();
+    #windowClickEvent = (event) => {
+        if (!this.#SelectMain.contains(event.target)) this.#closeDropdown();
     };
     constructor(
         options = {
@@ -37,51 +37,51 @@ class Select {
         }
     ) {
         require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Select");
-        if (options.width !== undefined) this.#Select_main.style.width = options.width;
+        if (options.width !== undefined) this.#SelectMain.style.width = options.width;
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
         if (options.title !== undefined) {
             this.#label.classList.add("select_label");
             this.#label.innerText = options.title;
-            this.#label.setAttribute("for", this.#id_sb);
-            this.#Select_main.appendChild(this.#label);
+            this.#label.setAttribute("for", this.#idSb);
+            this.#SelectMain.appendChild(this.#label);
         }
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: для списка required означает «есть выбранный вариант»
-        Validate.installField(this, options, this.#Select_second, undefined, () => this.getValue());
-        this.#input.setAttribute("id", this.#id_sb);
+        Validate.installField(this, options, this.#SelectSecond, undefined, () => this.getValue());
+        this.#input.setAttribute("id", this.#idSb);
         this.#input.classList.add("selectbox_input");
         this.#input.type = "text";
         if (options.name !== undefined) this.#input.name = options.name;
         this.#input.readOnly = true;
-        this.#button_open.innerHTML = new Icon(
+        this.#buttonOpen.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--blue_prime_background)"
         ).getHTML();
-        this.#button_open_disabled.innerHTML = new Icon(
+        this.#buttonOpenDisabled.innerHTML = new Icon(
             Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
             undefined,
             "var(--text_color_disabled)"
         ).getHTML();
         // Курсор выключенного поля даёт `.selectbox_disabled`: `cursor` наследуется
         this.#dropdown.setAttribute("id", this.#id);
-        this.#Select_second.appendChild(this.#input);
-        this.#Select_second.appendChild(this.#button_open);
-        this.#Select_second.appendChild(this.#dropdown);
+        this.#SelectSecond.appendChild(this.#input);
+        this.#SelectSecond.appendChild(this.#buttonOpen);
+        this.#SelectSecond.appendChild(this.#dropdown);
         //LISTENERS
         this.#input.addEventListener("focus", () => this.#openDropdown());
         this.#input.addEventListener("blur", () => this.#closeDropdown());
-        this.#Select_second.addEventListener("click", (event) => {
+        this.#SelectSecond.addEventListener("click", (event) => {
             // Клик по полю или стрелке открывает список сам. Одного `focus` мало:
             // если фокус уже в поле (повторный клик, диалог поставил фокус первым),
             // событие `focus` не придёт и список не раскроется
             const target = event.target;
             if (!(target instanceof Element)) return;
-            if (target !== this.#input && !this.#button_open.contains(target)) return;
+            if (target !== this.#input && !this.#buttonOpen.contains(target)) return;
             // Выбор варианта мышью закрывает список на `mousedown` варианта, а `mouseup`
             // приходит уже по полю — без этой проверки щелчок по варианту раскрывал список заново
-            if (this.#chosen_by_mouse) {
-                this.#chosen_by_mouse = false;
+            if (this.#chosenByMouse) {
+                this.#chosenByMouse = false;
                 return;
             }
             this.#input.focus();
@@ -90,10 +90,10 @@ class Select {
         // Слой списка не забирает фокус: клик по его отступу не должен закрывать список
         // (иначе поле теряло бы фокус на пустом месте слоя)
         this.#dropdown.addEventListener("mousedown", (event) => event.preventDefault());
-        window.addEventListener("click", this.#window_click_event);
+        window.addEventListener("click", this.#windowClickEvent);
         this.#input.addEventListener("input", (event) => {
-            let dropdown = this.#dropdown;
-            for (let option of dropdown.childNodes) {
+            const dropdown = this.#dropdown;
+            for (const option of dropdown.childNodes) {
                 if (!option.getAttribute("option_value").includes(event.target.value)) {
                     option.style.display = "none";
                 } else {
@@ -102,7 +102,7 @@ class Select {
             }
             this.#a11y.refresh();
         });
-        this.#Select_main.appendChild(this.#Select_second);
+        this.#SelectMain.appendChild(this.#SelectSecond);
         // Клавиатура и aria: фокус в поле, стрелки/Home/End/Enter по опциям, Escape закрывает
         this.#a11y = new ComboboxKeyboard(this.#input, {
             dropdown: this.#dropdown,
@@ -112,9 +112,9 @@ class Select {
         });
     }
     #openDropdown() {
-        if (this.#disabled_trigger) return;
+        if (this.#disabledTrigger) return;
         this.#setOpenState(true);
-        new Animation(this.#dropdown).fadeIn();
+        new Animation(this.#dropdown).panelIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         this.#a11y.setExpanded(true);
@@ -126,7 +126,7 @@ class Select {
     }
     /** Полное удаление: снять слушатели окна и клавиатурный слой */
     destroy() {
-        window.removeEventListener("click", this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
         this.#a11y.destroy();
         this.#closeDropdown();
     }
@@ -138,7 +138,7 @@ class Select {
 
     /** Значение выбранной опции; пустая строка — опция не выбрана */
     getSelectedValue() {
-        const value = this.#Select_main.getAttribute("option_value");
+        const value = this.#SelectMain.getAttribute("option_value");
         return value === null ? "" : value;
     }
 
@@ -168,8 +168,8 @@ class Select {
     clear() {
         this.#closeDropdown();
         this.#input.value = "";
-        this.#Select_main.removeAttribute("option_title");
-        this.#Select_main.removeAttribute("option_value");
+        this.#SelectMain.removeAttribute("option_title");
+        this.#SelectMain.removeAttribute("option_value");
         this.#markSelected(undefined);
         return this;
     }
@@ -200,14 +200,14 @@ class Select {
         const title = option.getAttribute("option_title");
         const value = option.getAttribute("option_value");
         this.#input.value = title;
-        this.#Select_main.setAttribute("option_title", title);
-        this.#Select_main.setAttribute("option_value", value);
+        this.#SelectMain.setAttribute("option_title", title);
+        this.#SelectMain.setAttribute("option_value", value);
         this.#markSelected(option);
         if (silent) return;
         // Выбор варианта закрывает список: клику по опции это уже не поручить —
         // click схлопывается до общего предка (mousedown был в поле, mouseup — в слое)
         this.#closeDropdown();
-        this.#Select_main.dispatchEvent(
+        this.#SelectMain.dispatchEvent(
             new CustomEvent("chui_select_option_changed", {
                 detail: {
                     title: title,
@@ -226,7 +226,7 @@ class Select {
         option.addEventListener("mousedown", (event) => {
             event.preventDefault();
             // Признак «выбрано мышью»: гасит повторное раскрытие списка на `mouseup` по полю
-            this.#chosen_by_mouse = true;
+            this.#chosenByMouse = true;
             this.#applyOption(option, false);
         });
         option.addEventListener("click", (event) => {
@@ -235,7 +235,7 @@ class Select {
         });
     }
     addOption(title, value) {
-        let option = document.createElement(`selectbox_option`);
+        const option = document.createElement(`selectbox_option`);
         option.innerHTML = title;
         option.setAttribute("option_title", title);
         option.setAttribute("option_value", value);
@@ -244,8 +244,8 @@ class Select {
         this.#a11y.refresh();
     }
     addOptions(...options) {
-        for (let opt of options) {
-            let option = document.createElement(`selectbox_option`);
+        for (const opt of options) {
+            const option = document.createElement(`selectbox_option`);
             option.innerHTML = opt.title;
             option.setAttribute("option_title", opt.title);
             option.setAttribute("option_value", opt.value);
@@ -263,14 +263,14 @@ class Select {
      */
     setDefaultOption(object = Object()) {
         const wanted = object !== null && typeof object === "object" ? object.value : object;
-        let opt = this.#dropdown.getElementsByTagName("selectbox_option");
+        const opt = this.#dropdown.getElementsByTagName("selectbox_option");
         for (let i = 0; i < opt.length; i++) {
-            let test = opt.item(i);
+            const test = opt.item(i);
             if (test.getAttribute("option_value") === String(wanted)) test.click();
         }
     }
     addValueChangeListener(listener = () => {}) {
-        this.#Select_main.addEventListener("chui_select_option_changed", listener);
+        this.#SelectMain.addEventListener("chui_select_option_changed", listener);
     }
     getName() {
         return this.#input.name;
@@ -279,31 +279,31 @@ class Select {
         return this.#input.value;
     }
     setDisabled(boolean = Boolean()) {
-        this.#disabled_trigger = boolean;
+        this.#disabledTrigger = boolean;
         if (boolean) {
             this.#setOpenState(false);
             if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
-            this.#Select_second.classList.add("selectbox_disabled");
+            this.#SelectSecond.classList.add("selectbox_disabled");
             this.#input.className = "selectbox_input_disabled";
             this.#label.className = "select_label_disabled";
-            this.#button_open.remove();
-            this.#Select_second.appendChild(this.#button_open_disabled);
+            this.#buttonOpen.remove();
+            this.#SelectSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#Select_second.classList.remove("selectbox_disabled");
+            this.#SelectSecond.classList.remove("selectbox_disabled");
             this.#input.className = "selectbox_input";
             this.#label.className = "select_label";
-            this.#button_open_disabled.remove();
-            this.#Select_second.appendChild(this.#button_open);
+            this.#buttonOpenDisabled.remove();
+            this.#SelectSecond.appendChild(this.#buttonOpen);
         }
     }
     #setOpenState(opened = Boolean()) {
         // Рамку активного поля держит общее правило темы (`selectbox:focus-within`
         // в global_style.css, вместе с кольцом), а не индайн компонента: индайновая рамка
         // перебивала тему и мешала централизации состояний
-        this.#button_open.style.transform = opened ? "rotate(180deg)" : "rotate(0deg)";
+        this.#buttonOpen.style.transform = opened ? "rotate(180deg)" : "rotate(0deg)";
     }
     #setDropdownDirection() {
-        const placement = dropdownPlacement(this.#dropdown, this.#Select_second);
+        const placement = dropdownPlacement(this.#dropdown, this.#SelectSecond);
         // Зазор до поля держит CSS (`top: calc(100% + 4px)`), вверх — то же число через `bottom`:
         // так список отстоит от поля на один зазор в обе стороны (вверх - `bottom`)
         this.#dropdown.style.top = placement.up ? "auto" : "";
@@ -313,14 +313,14 @@ class Select {
         else this.#dropdown.style.removeProperty("max-height");
     }
     set() {
-        return this.#Select_main;
+        return this.#SelectMain;
     }
 }
 
 function setOptionDisplay(element = new HTMLElement()) {
     // Скрытый фильтром вариант показывается снятием инлайнового `display`:
     // базовый вид строки (блок) задаёт CSS, а не этот обход
-    for (let option of element.childNodes) {
+    for (const option of element.childNodes) {
         option.style.removeProperty("display");
     }
 }

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

@@ -4,11 +4,11 @@ chui_selectbox {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: var(--control_width);
 }
 
@@ -18,7 +18,7 @@ selectbox {
     outline: none;
     height: max-content;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 0;
     font-size: var(--font_default_size);
     color: var(--text_color);
@@ -32,7 +32,7 @@ selectbox {
     display: block;
     outline: none;
     margin: 0;
-    padding: var(--control_padding) 0 var(--main_padding);
+    padding: var(--control_padding) 0 var(--block_padding);
     background: transparent;
     color: var(--text_color);
     text-align: start;
@@ -62,7 +62,7 @@ selectbox_dropdown {
     position: absolute;
     display: none;
     height: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: var(--control_padding);
     font-size: var(--font_default_size);
     flex-direction: column;
@@ -76,7 +76,7 @@ selectbox_dropdown {
 select_button_open {
     cursor: pointer;
     outline: none;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
 }
 
 selectbox_option {
@@ -92,7 +92,7 @@ selectbox_option {
     text-align: start;
     /* 5px отступа слоя + 6px строки = 11px — ровно отступ текста в самом поле */
     padding: var(--control_padding) 6px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     /* Подпись держит одну строку (как у чипсов): длинный вариант усекается, а не растит список */
     white-space: nowrap;
@@ -122,7 +122,7 @@ selectbox_option:active {
 .select_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);
@@ -139,7 +139,7 @@ selectbox_option:active {
     cursor: not-allowed;
     width: 100%;
     margin: 0;
-    padding: var(--control_padding) 0 var(--main_padding);
+    padding: var(--control_padding) 0 var(--block_padding);
     background: transparent;
     color: var(--text_color_disabled);
     text-align: start;
@@ -160,7 +160,7 @@ selectbox_option:active {
     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);