chuijs 4.0.2 → 4.0.4

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

@@ -4,13 +4,13 @@ chui_multicombobox {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     position: relative;
     display: flex;
     flex-direction: column;
     height: max-content;
-    margin: var(--margin);
-    width: var(--control_width)
+    margin: var(--block_margin);
+    width: var(--control_width);
 }
 
 multicombobox {
@@ -23,7 +23,7 @@ multicombobox {
     min-height: var(--control_height);
     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);
     background: var(--element_background);
@@ -48,7 +48,8 @@ multicombobox_options {
     flex: 1 1 40px;
     min-width: 40px;
     margin: 0;
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 6px 0;
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 6px 0;
     background: transparent;
     color: var(--text_color);
     border: none;
@@ -66,7 +67,7 @@ multicombobox_dropdown {
     position: absolute;
     display: none;
     height: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Зазор под полем — как у остальных списков (см. chui_chips/styles.css): прежде
        отступ задавался числом в JS и был зашит под высоту прежнего поля 35 px */
     top: calc(100% + 4px);
@@ -88,15 +89,15 @@ multicombobox_dropdown {
     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);
 }
 
 multicombo_button_open {
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--blue_prime_background);
     justify-content: center;
     align-items: center;
@@ -120,13 +121,19 @@ multicombo_button_open {
 .multi_combobox_option {
     display: flex;
     flex-direction: row;
+    /* Строка занимает всю ширину списка: секция держит `align-items: flex-start` (иначе
+       подпись группы растягивалась и наследовала центрирование, см. `.multi_combobox_section`),
+       а от этого выравнивания строка сжималась до содержимого — подсветка под курсором шла
+       прямоугольником вокруг флажка, а не строкой (замер: 53px против 288px у списка).
+       У Select и ComboBox строка растянута — здесь то же поведение */
+    align-self: stretch;
     /* Строка не сжимается при ограниченной высоте слоя (см. `selectbox_option`) */
     flex: none;
     /* Тот же шаг строки, что у опций Select и ComboBox (замер: 27px), — прежде строка была
        33px из-за отступов чекбокса, и список читался рыхлым против соседних компонентов */
     padding: var(--control_padding) 6px;
     gap: 10px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     /* Подпись и чекбокс идут от левого края: центрирование строки было лишним */
     align-items: center;
@@ -158,7 +165,8 @@ multicombo_button_open {
     flex: 1 1 40px;
     min-width: 40px;
     margin: 0;
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 10px 0;
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 10px 0;
     border: none;
     box-shadow: none;
     font-size: var(--font_default_size);
@@ -168,10 +176,10 @@ multicombo_button_open {
     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);
 }
 
 multicombobox_option_added_main {

package/framework/components/chui_inputs/chui_number/number.js

@@ -1,74 +1,74 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-const {makeKeyboardButton} = require('../../../modules/chui_a11y/chui_a11y');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { makeKeyboardButton } = require("../../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class NumberInput {
-    #chui_number_input = document.createElement('chui_number_input');
-    #number_main = document.createElement("number_main");
-    #number_button_minus = document.createElement("number_button_minus");
-    #number_button_plus = document.createElement("number_button_plus");
-    #number_button_minus_disabled = document.createElement("number_button_minus");
-    #number_button_plus_disabled = document.createElement("number_button_plus");
+    #chuiNumberInput = document.createElement("chui_number_input");
+    #numberMain = document.createElement("number_main");
+    #numberButtonMinus = document.createElement("number_button_minus");
+    #numberButtonPlus = document.createElement("number_button_plus");
+    #numberButtonMinusDisabled = document.createElement("number_button_minus");
+    #numberButtonPlusDisabled = document.createElement("number_button_plus");
     #title = undefined;
     #id = require("randomstring").generate();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
+    #input = document.createElement("input");
+    #label = document.createElement("label");
     constructor(options = { name: String(), title: String(), required: Boolean(), width: String() }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_NumberInput');
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_NumberInput");
         this.#title = options.title;
 
         // Кнопки «плюс» и «минус» — у правого и левого края поля (позицию держит CSS)
-        this.#number_button_plus.className = 'number_buttons number_buttons_plus';
-        this.#number_button_plus.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--blue_prime_background)");
-        this.#number_button_minus.className = 'number_buttons number_buttons_minus';
-        this.#number_button_minus.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--blue_prime_background)");
+        this.#numberButtonPlus.className = "number_buttons number_buttons_plus";
+        this.#numberButtonPlus.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--blue_prime_background)");
+        this.#numberButtonMinus.className = "number_buttons number_buttons_minus";
+        this.#numberButtonMinus.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--blue_prime_background)");
         // Кнопки — не нативные: делаем их доступными с клавиатуры и даём имена (глиф в дерево доступности не идёт)
-        makeKeyboardButton(this.#number_button_minus);
-        makeKeyboardButton(this.#number_button_plus);
-        this.#number_button_minus.setAttribute("aria-label", I18n.t("forms.numberDecrease"));
-        this.#number_button_plus.setAttribute("aria-label", I18n.t("forms.numberIncrease"));
+        makeKeyboardButton(this.#numberButtonMinus);
+        makeKeyboardButton(this.#numberButtonPlus);
+        this.#numberButtonMinus.setAttribute("aria-label", I18n.t("forms.numberDecrease"));
+        this.#numberButtonPlus.setAttribute("aria-label", I18n.t("forms.numberIncrease"));
 
         // Выключенные кнопки: только вид, действий нет — скринридеру их не отдаём.
         // Курсор берётся наследованием от корня `.number_main_disabled`
-        this.#number_button_plus_disabled.className = 'number_buttons number_buttons_plus';
-        this.#number_button_plus_disabled.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--text_color_disabled)");
-        this.#number_button_plus_disabled.setAttribute("aria-hidden", "true");
-        this.#number_button_minus_disabled.className = 'number_buttons number_buttons_minus';
-        this.#number_button_minus_disabled.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--text_color_disabled)");
-        this.#number_button_minus_disabled.setAttribute("aria-hidden", "true");
+        this.#numberButtonPlusDisabled.className = "number_buttons number_buttons_plus";
+        this.#numberButtonPlusDisabled.innerHTML = this.#iconHTML(Icons.CONTENT.ADD, "var(--text_color_disabled)");
+        this.#numberButtonPlusDisabled.setAttribute("aria-hidden", "true");
+        this.#numberButtonMinusDisabled.className = "number_buttons number_buttons_minus";
+        this.#numberButtonMinusDisabled.innerHTML = this.#iconHTML(Icons.CONTENT.REMOVE, "var(--text_color_disabled)");
+        this.#numberButtonMinusDisabled.setAttribute("aria-hidden", "true");
         //
 
-        this.#input.type = 'number';
-        this.#input.className = 'number_input';
-        this.#input.value = '0';
+        this.#input.type = "number";
+        this.#input.className = "number_input";
+        this.#input.value = "0";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация и показ ошибки: min/max/required и другие правила из options
-        Validate.installField(this, options, this.#number_main, undefined, () => this.#input.value);
+        Validate.installField(this, options, this.#numberMain, undefined, () => this.#input.value);
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.classList.add('number_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_number_input.appendChild(this.#label);
+            this.#label.classList.add("number_label");
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiNumberInput.appendChild(this.#label);
         }
-        if (options.width !== undefined) this.#chui_number_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiNumberInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`number_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
 
-        this.#number_main.appendChild(this.#number_button_minus);
-        this.#number_main.appendChild(this.#input);
-        this.#number_main.appendChild(this.#number_button_plus);
-        this.#chui_number_input.appendChild(this.#number_main);
+        this.#numberMain.appendChild(this.#numberButtonMinus);
+        this.#numberMain.appendChild(this.#input);
+        this.#numberMain.appendChild(this.#numberButtonPlus);
+        this.#chuiNumberInput.appendChild(this.#numberMain);
 
-        this.#number_button_plus.addEventListener('mousedown', (event) => {
+        this.#numberButtonPlus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
-        this.#number_button_minus.addEventListener('mousedown', (event) => {
+        this.#numberButtonMinus.addEventListener("mousedown", (event) => {
             event.preventDefault();
             return false;
         });
@@ -76,50 +76,64 @@ class NumberInput {
         // Клавиатура: фокус остаётся на кнопке (можно нажимать подряд), мышь — уводит в поле
         // Свои кнопки меняют значение программно, поэтому событие шлём сами: иначе о правке
         // не узнали бы ни слушатели, ни составные компоненты
-        this.#number_button_plus.addEventListener('click', (event) => {
+        this.#numberButtonPlus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
-            this.#input.value++
-            this.#input.dispatchEvent(new Event("change", {bubbles: true}));
+            this.#input.value++;
+            this.#input.dispatchEvent(new Event("change", { bubbles: true }));
         });
-        this.#number_button_minus.addEventListener('click', (event) => {
+        this.#numberButtonMinus.addEventListener("click", (event) => {
             if (event.detail > 0) this.#input.focus();
-            this.#input.value--
-            this.#input.dispatchEvent(new Event("change", {bubbles: true}));
+            this.#input.value--;
+            this.#input.dispatchEvent(new Event("change", { bubbles: true }));
         });
     }
-    addInputListener(listener = () => {}) { this.#input.addEventListener("input", listener); }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener("change", listener); }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
+    addInputListener(listener = () => {}) {
+        this.#input.addEventListener("input", listener);
+    }
+    addChangeListener(listener = () => {}) {
+        this.#input.addEventListener("change", listener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
     /** HTML глифа: иконка-лигатура не должна попадать в дерево доступности */
     #iconHTML(icon = String(), color = String()) {
         const glyph = new Icon(icon, undefined, color);
         glyph.set().setAttribute("aria-hidden", "true");
         return glyph.getHTML();
     }
-    getValue() { return this.#input.value; }
-    setValue(num = Number()) { this.#input.value = num; }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(num = Number()) {
+        this.#input.value = num;
+    }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#number_main.classList.add("number_main_disabled")
-            this.#input.className = "number_input_disabled"
-            this.#label.className = "number_label_disabled"
-            this.#number_button_minus.remove();
-            this.#number_button_plus.remove();
-            this.#number_main.appendChild(this.#number_button_minus_disabled);
-            this.#number_main.appendChild(this.#number_button_plus_disabled);
+            this.#numberMain.classList.add("number_main_disabled");
+            this.#input.className = "number_input_disabled";
+            this.#label.className = "number_label_disabled";
+            this.#numberButtonMinus.remove();
+            this.#numberButtonPlus.remove();
+            this.#numberMain.appendChild(this.#numberButtonMinusDisabled);
+            this.#numberMain.appendChild(this.#numberButtonPlusDisabled);
         } else {
-            this.#number_main.classList.remove("number_main_disabled")
-            this.#input.className = "number_input"
-            this.#label.className = "number_label"
-            this.#number_button_minus_disabled.remove();
-            this.#number_button_plus_disabled.remove();
-            this.#number_main.appendChild(this.#number_button_minus);
-            this.#number_main.appendChild(this.#number_button_plus);
+            this.#numberMain.classList.remove("number_main_disabled");
+            this.#input.className = "number_input";
+            this.#label.className = "number_label";
+            this.#numberButtonMinusDisabled.remove();
+            this.#numberButtonPlusDisabled.remove();
+            this.#numberMain.appendChild(this.#numberButtonMinus);
+            this.#numberMain.appendChild(this.#numberButtonPlus);
         }
     }
-    set() { return this.#chui_number_input; }
+    set() {
+        return this.#chuiNumberInput;
+    }
 }
 
-exports.NumberInput = NumberInput
+exports.NumberInput = NumberInput;

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

@@ -4,12 +4,12 @@ chui_number_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);
 }
 
 number_main {
@@ -17,7 +17,7 @@ number_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     align-items: center;
     position: relative;
     padding: var(--control_padding) 43px;
@@ -47,15 +47,15 @@ number_main {
 }
 
 .number_buttons:focus-visible {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
 
 /* Крутилка числа — системная: значение правят свои кнопки «плюс»/«минус». Правило только
    для своего поля, иначе оно скрывало бы чужие нативные поля во всём приложении */
-chui_number_input input[type=number]::-webkit-inner-spin-button {
-    -webkit-appearance: none
+chui_number_input input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
 }
 
 .number_input {
@@ -72,10 +72,10 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
 .number_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);
 }
 
 /* DISABLED STYLES */
@@ -89,10 +89,10 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
     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);
 }
 
 .number_input_disabled {
@@ -105,4 +105,4 @@ chui_number_input input[type=number]::-webkit-inner-spin-button {
     text-align: center;
     border: none;
     font-size: var(--font_default_size);
-}
+}