chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_combo_box/combo_box.js

@@ -1,122 +1,132 @@
-const { Animation } = require('../../../modules/chui_animations/animations');
-const { dropdownPlacement } = require('../../../modules/chui_functions');
-const { Icon, Icons } = require('../../chui_icons/icons');
-const { ComboboxKeyboard } = require('../../../modules/chui_a11y/chui_a11y');
+const { Animation } = require("../../../modules/chui_animations/animations");
+const { dropdownPlacement } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
 
 const OPTION_ROW_HEIGHT = 33;
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class ComboBox {
     #id = require("randomstring").generate();
-    #id_cb = require("randomstring").generate();
-    #ComboBox_main = document.createElement('chui_combobox');
-    #ComboBox_second = document.createElement('combobox');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
-    #button_open = document.createElement('combo_button_open');
-    #button_open_disabled = document.createElement('combo_button_open');
-    #dropdown = document.createElement('combobox_dropdown');
-    #dropdown_height = "max-content";
+    #idCb = require("randomstring").generate();
+    #ComboBoxMain = document.createElement("chui_combobox");
+    #ComboBoxSecond = document.createElement("combobox");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
+    #buttonOpen = document.createElement("combo_button_open");
+    #buttonOpenDisabled = document.createElement("combo_button_open");
+    #dropdown = document.createElement("combobox_dropdown");
+    #dropdownHeight = "max-content";
     #a11y = undefined;
-    #window_click_bound = false;
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean(),
-        optionsLen: String(),
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ComboBox');
+    #windowClickBound = false;
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+            optionsLen: String(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_ComboBox");
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#ComboBox_main.style.width = options.width;
+        if (options.width !== undefined) this.#ComboBoxMain.style.width = options.width;
         if (options.title !== undefined) {
-            this.#label.classList.add('combobox_label')
+            this.#label.classList.add("combobox_label");
             this.#label.innerText = options.title;
-            this.#label.setAttribute('for', this.#id_cb);
-            this.#ComboBox_main.appendChild(this.#label);
+            this.#label.setAttribute("for", this.#idCb);
+            this.#ComboBoxMain.appendChild(this.#label);
         }
         if (options.optionsLen !== undefined) {
-            this.#dropdown_height = (OPTION_ROW_HEIGHT * options.optionsLen) + "px";
+            this.#dropdownHeight = OPTION_ROW_HEIGHT * options.optionsLen + "px";
         }
-        this.#dropdown.style.height = this.#dropdown_height;
+        this.#dropdown.style.height = this.#dropdownHeight;
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: для списка required означает «есть выбранный вариант»
-        Validate.installField(this, options, this.#ComboBox_second, undefined, () => this.getValue());
-        this.#input.setAttribute('id', this.#id_cb);
-        this.#input.classList.add('combobox_input');
-        this.#input.type = 'text';
+        Validate.installField(this, options, this.#ComboBoxSecond, undefined, () => this.getValue());
+        this.#input.setAttribute("id", this.#idCb);
+        this.#input.classList.add("combobox_input");
+        this.#input.type = "text";
         // Рамку и подпись активного поля держит общее правило темы (`combobox:focus-within`
         // в global_style.css): индайновые состояние и цвет подписи перебивали тему
         // и расходились с остальными полями
-        this.#button_open.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--blue_prime_background)").getHTML();
-        this.#button_open_disabled.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--text_color_disabled)").getHTML();
+        this.#buttonOpen.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--blue_prime_background)"
+        ).getHTML();
+        this.#buttonOpenDisabled.innerHTML = new Icon(
+            Icons.HARDWARE.KEYBOARD_ARROW_DOWN,
+            undefined,
+            "var(--text_color_disabled)"
+        ).getHTML();
         // Курсор выключенного поля даёт `.combobox_disabled`: `cursor` наследуется
-        this.#dropdown.setAttribute('id', this.#id);
-        this.#ComboBox_second.appendChild(this.#input)
-        this.#ComboBox_second.appendChild(this.#button_open)
-        this.#ComboBox_second.appendChild(this.#dropdown)
+        this.#dropdown.setAttribute("id", this.#id);
+        this.#ComboBoxSecond.appendChild(this.#input);
+        this.#ComboBoxSecond.appendChild(this.#buttonOpen);
+        this.#ComboBoxSecond.appendChild(this.#dropdown);
         //LISTENERS
-        this.#input.addEventListener('focus', () => {
-            this.#button_open.style.transform = 'rotate(180deg)'
-            this.#dropdown.style.height = this.#dropdown_height
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#button_open.style.transform = 'rotate(0deg)'
-            this.#dropdown.style.height = this.#dropdown_height
-        })
-        this.#ComboBox_second.addEventListener('click', (event) => {
+        this.#input.addEventListener("focus", () => {
+            this.#buttonOpen.style.transform = "rotate(180deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
+        });
+        this.#input.addEventListener("blur", () => {
+            this.#buttonOpen.style.transform = "rotate(0deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
+        });
+        this.#ComboBoxSecond.addEventListener("click", (event) => {
             if (!this.#input.disabled) {
-                if (event.target.parentNode === this.#ComboBox_second) {
-                    this.#input.focus()
-                    this.#openDropdown()
+                if (event.target.parentNode === this.#ComboBoxSecond) {
+                    this.#input.focus();
+                    this.#openDropdown();
                 }
             }
         });
 
-        this.#input.addEventListener('input', (event) => {
-            let dropdown = this.#dropdown;
-            let query = event.target.value.toLowerCase();
-            for (let option of dropdown.childNodes) {
+        this.#input.addEventListener("input", (event) => {
+            const dropdown = this.#dropdown;
+            const query = event.target.value.toLowerCase();
+            for (const option of dropdown.childNodes) {
                 if (typeof option.getAttribute !== "function") continue;
-                let title = option.getAttribute('option_title');
+                const title = option.getAttribute("option_title");
                 if (title === null) continue;
                 if (!title.toLowerCase().includes(query)) {
-                    option.style.display = 'none'
-                    dropdown.style.height = 'max-content'
+                    option.style.display = "none";
+                    dropdown.style.height = "max-content";
                 } else {
-                    option.style.display = 'block'
-                    dropdown.style.height = this.#dropdown_height
+                    option.style.display = "block";
+                    dropdown.style.height = this.#dropdownHeight;
                 }
             }
             this.#a11y.refresh();
         });
-        this.#ComboBox_main.appendChild(this.#ComboBox_second)
+        this.#ComboBoxMain.appendChild(this.#ComboBoxSecond);
         // Клавиатура и aria: фокус в поле, стрелки/Home/End/Enter по опциям, Escape закрывает
         this.#a11y = new ComboboxKeyboard(this.#input, {
             dropdown: this.#dropdown,
             optionSelector: "combobox_option",
             onEscape: () => this.#closeDropdown(),
-            onOpen: () => this.#openDropdown()
+            onOpen: () => this.#openDropdown(),
         });
     }
     #openDropdown() {
-        new Animation(this.#dropdown).fadeIn();
+        new Animation(this.#dropdown).panelIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         this.#a11y.setExpanded(true);
-        if (!this.#window_click_bound) {
-            this.#window_click_bound = true;
-            window.addEventListener('click', this.#window_click_event);
+        if (!this.#windowClickBound) {
+            this.#windowClickBound = true;
+            window.addEventListener("click", this.#windowClickEvent);
         }
     }
     #closeDropdown() {
         // Снимаем слушатель только если он был повешен
-        if (this.#window_click_bound) {
-            this.#window_click_bound = false;
-            window.removeEventListener('click', this.#window_click_event);
+        if (this.#windowClickBound) {
+            this.#windowClickBound = false;
+            window.removeEventListener("click", this.#windowClickEvent);
         }
         new Animation(this.#dropdown).fadeOut();
         if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
@@ -127,54 +137,58 @@ class ComboBox {
         this.#a11y.destroy();
     }
     addValueChangeListener(listener = () => {}) {
-        this.#ComboBox_main.addEventListener("chui_combo_option_changed", listener)
+        this.#ComboBoxMain.addEventListener("chui_combo_option_changed", listener);
     }
     addOptions(...options) {
-        for (let opt of options) {
-            let option = document.createElement(`combobox_option`);
+        for (const opt of options) {
+            const option = document.createElement(`combobox_option`);
             option.innerHTML = opt.title;
-            option.setAttribute('option_title', opt.title);
-            option.setAttribute('option_value', opt.value);
-            option.addEventListener('click', () => {
+            option.setAttribute("option_title", opt.title);
+            option.setAttribute("option_value", opt.value);
+            option.addEventListener("click", () => {
                 const eventAwesome = new CustomEvent("chui_combo_option_changed", {
                     detail: {
-                        title: option.getAttribute('option_title'),
-                        value: option.getAttribute('option_value')
+                        title: option.getAttribute("option_title"),
+                        value: option.getAttribute("option_value"),
                     },
                 });
-                this.#ComboBox_main.dispatchEvent(eventAwesome)
-                this.#input.value = option.getAttribute('option_title');
-                this.#ComboBox_main.setAttribute("option_title", option.getAttribute('option_title'));
-                this.#ComboBox_main.setAttribute("option_value", option.getAttribute('option_value'));
+                this.#ComboBoxMain.dispatchEvent(eventAwesome);
+                this.#input.value = option.getAttribute("option_title");
+                this.#ComboBoxMain.setAttribute("option_title", option.getAttribute("option_title"));
+                this.#ComboBoxMain.setAttribute("option_value", option.getAttribute("option_value"));
                 this.#markSelected(option);
             });
             this.#dropdown.appendChild(option);
         }
         this.#a11y.refresh();
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#ComboBox_main.getAttribute("option_value"); }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#ComboBoxMain.getAttribute("option_value");
+    }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#ComboBox_second.classList.add("combobox_disabled")
-            this.#input.className = "combobox_input_disabled"
-            this.#label.className = "combobox_label_disabled"
-            this.#button_open.remove();
-            this.#ComboBox_second.appendChild(this.#button_open_disabled);
+            this.#ComboBoxSecond.classList.add("combobox_disabled");
+            this.#input.className = "combobox_input_disabled";
+            this.#label.className = "combobox_label_disabled";
+            this.#buttonOpen.remove();
+            this.#ComboBoxSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#ComboBox_second.classList.remove("combobox_disabled")
-            this.#input.className = "combobox_input"
-            this.#label.className = "combobox_label"
-            this.#button_open_disabled.remove();
-            this.#ComboBox_second.appendChild(this.#button_open);
+            this.#ComboBoxSecond.classList.remove("combobox_disabled");
+            this.#input.className = "combobox_input";
+            this.#label.className = "combobox_label";
+            this.#buttonOpenDisabled.remove();
+            this.#ComboBoxSecond.appendChild(this.#buttonOpen);
         }
     }
     clear() {
-        this.#ComboBox_main.removeAttribute("option_title");
-        this.#ComboBox_main.removeAttribute("option_value");
-        this.#input.value = ""
-        this.#markSelected(undefined)
+        this.#ComboBoxMain.removeAttribute("option_title");
+        this.#ComboBoxMain.removeAttribute("option_value");
+        this.#input.value = "";
+        this.#markSelected(undefined);
     }
     /**
      * Метка выбранного варианта (`data_selected`) — её читает CSS. Отдельный атрибут, не
@@ -186,25 +200,29 @@ class ComboBox {
             else delete item.dataset.selected;
         }
     }
-    #window_click_event = (event) => {
-        if (event.target.parentNode !== this.#ComboBox_second) this.#closeDropdown();
-    }
+    #windowClickEvent = (event) => {
+        if (event.target.parentNode !== this.#ComboBoxSecond) this.#closeDropdown();
+    };
     #setDropdownDirection() {
-        const placement = dropdownPlacement(this.#dropdown, this.#ComboBox_second);
+        const placement = dropdownPlacement(this.#dropdown, this.#ComboBoxSecond);
         // Зазор до поля держит CSS (`top: calc(100% + 4px)`), вверх — то же число через `bottom`
-        this.#dropdown.style.top = placement.up ? 'auto' : '';
-        this.#dropdown.style.bottom = placement.up ? 'calc(100% + 4px)' : '';
+        this.#dropdown.style.top = placement.up ? "auto" : "";
+        this.#dropdown.style.bottom = placement.up ? "calc(100% + 4px)" : "";
         // Слой не вылезает за видимую часть контейнера: лишнее уходит в прокрутку списка
         if (placement.maxHeight > 0) this.#dropdown.style.maxHeight = `${placement.maxHeight}px`;
-        else this.#dropdown.style.removeProperty('max-height');
+        else this.#dropdown.style.removeProperty("max-height");
+    }
+    set() {
+        return this.#ComboBoxMain;
     }
-    set() { return this.#ComboBox_main; }
 }
 
 function setOptionDisplay(element) {
     // Скрытый фильтром вариант показывается снятием инлайнового `display`:
     // базовый вид строки (блок) задаёт CSS
-    for (let option of element.childNodes) { option.style.removeProperty("display"); }
+    for (const option of element.childNodes) {
+        option.style.removeProperty("display");
+    }
 }
 
-exports.ComboBox = ComboBox
+exports.ComboBox = ComboBox;

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

@@ -4,20 +4,20 @@ chui_combobox {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --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);
-    width: var(--control_width)
+    margin: var(--block_margin);
+    width: var(--control_width);
 }
 
 combobox {
     position: relative;
-    display:flex;
+    display: flex;
     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);
@@ -27,8 +27,9 @@ combobox {
 .combobox_input {
     width: 100%;
     margin: 0;
-    /* Отступ текста 11px — как у остальных полей (`--main_padding_sm`), было число 10px */
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 11px 0;
+    /* Отступ текста 11px — как у остальных полей (`--block_padding_sm`), было число 10px */
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 11px 0;
     background: transparent;
     color: var(--text_color);
     border: none;
@@ -50,10 +51,10 @@ combobox_dropdown {
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     -webkit-backdrop-filter: var(--global_blur);
-    position:absolute;
-    display:none;
+    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;
@@ -68,16 +69,16 @@ combobox_dropdown {
 .combobox_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);
 }
 
 combo_button_open {
     cursor: pointer;
-    padding: var(--main_padding);
-    color: var(--blue_prime_background)
+    padding: var(--block_padding);
+    color: var(--blue_prime_background);
 }
 
 combobox_option {
@@ -90,7 +91,7 @@ combobox_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;
@@ -130,7 +131,8 @@ combobox_option:active {
     text-align: start;
     width: 100%;
     margin: 0;
-    padding-block: var(--control_padding) var(--control_padding); padding-inline: 11px 0;
+    padding-block: var(--control_padding) var(--control_padding);
+    padding-inline: 11px 0;
     border: none;
     box-shadow: none;
     font-size: var(--font_default_size);
@@ -140,8 +142,8 @@ combobox_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)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}