chuijs 4.0.2 → 4.0.4

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

@@ -1,74 +1,87 @@
-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 {Validate} = require('../../../modules/chui_validate/chui_validate');
+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');
-    #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;
+    #idSb = require("randomstring").generate();
+    #SelectMain = document.createElement("chui_selectbox");
+    #SelectSecond = document.createElement("selectbox");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
+    #buttonOpen = document.createElement("select_button_open");
+    #buttonOpenDisabled = document.createElement("select_button_open");
+    #disabledTrigger = false;
     // Признак «вариант только что выбран мышью» — см. обработчик клика по полю
-    #chosen_by_mouse = false;
-    #dropdown = document.createElement('selectbox_dropdown');
+    #chosenByMouse = false;
+    #dropdown = document.createElement("selectbox_dropdown");
     #a11y = undefined;
     // Слушатель окна храним полем, чтобы можно было снять в destroy()
     // Клик вне поля закрывает список. Проверять надо весь контрол целиком, а не только
     // `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 = {
-        name: String(), title: String(), placeholder: String(),
-        width: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Select');
-        if (options.width !== undefined) this.#Select_main.style.width = options.width;
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Select");
+        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.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);
-        this.#input.classList.add('selectbox_input');
-        this.#input.type = 'text';
+        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(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.#input.readOnly = true;
+        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();
         // Курсор выключенного поля даёт `.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.#dropdown.setAttribute("id", this.#id);
+        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.#input.addEventListener("focus", () => this.#openDropdown());
+        this.#input.addEventListener("blur", () => this.#closeDropdown());
+        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();
@@ -76,44 +89,44 @@ class Select {
         });
         // Слой списка не забирает фокус: клик по его отступу не должен закрывать список
         // (иначе поле теряло бы фокус на пустом месте слоя)
-        this.#dropdown.addEventListener('mousedown', (event) => event.preventDefault());
-        window.addEventListener('click', this.#window_click_event);
-        this.#input.addEventListener('input', (event) => {
-            let dropdown = this.#dropdown;
-            for (let option of dropdown.childNodes) {
-                if (!option.getAttribute('option_value').includes(event.target.value)) {
-                    option.style.display = 'none'
+        this.#dropdown.addEventListener("mousedown", (event) => event.preventDefault());
+        window.addEventListener("click", this.#windowClickEvent);
+        this.#input.addEventListener("input", (event) => {
+            const dropdown = this.#dropdown;
+            for (const option of dropdown.childNodes) {
+                if (!option.getAttribute("option_value").includes(event.target.value)) {
+                    option.style.display = "none";
                 } else {
-                    option.style.display = 'block'
+                    option.style.display = "block";
                 }
             }
             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,
             optionSelector: "selectbox_option",
             onEscape: () => this.#closeDropdown(),
-            onOpen: () => this.#openDropdown()
+            onOpen: () => this.#openDropdown(),
         });
     }
     #openDropdown() {
-        if (this.#disabled_trigger) return;
-        this.#setOpenState(true)
-        new Animation(this.#dropdown).fadeIn();
+        if (this.#disabledTrigger) return;
+        this.#setOpenState(true);
+        new Animation(this.#dropdown).panelIn();
         setOptionDisplay(this.#dropdown);
         this.#setDropdownDirection();
         this.#a11y.setExpanded(true);
     }
     #closeDropdown() {
-        this.#setOpenState(false)
+        this.#setOpenState(false);
         new Animation(this.#dropdown).fadeOut();
         if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
     }
     /** Полное удаление: снять слушатели окна и клавиатурный слой */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
         this.#a11y.destroy();
         this.#closeDropdown();
     }
@@ -125,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;
     }
 
@@ -139,7 +152,8 @@ class Select {
     setValue(value = String(), silent = Boolean()) {
         const text = String(value);
         const options = [...this.#dropdown.children];
-        const option = options.find((item) => item.getAttribute("option_value") === text) ??
+        const option =
+            options.find((item) => item.getAttribute("option_value") === text) ??
             options.find((item) => item.getAttribute("option_title") === text);
         if (option === undefined) return this;
         this.#applyOption(option, silent === true);
@@ -154,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;
     }
@@ -183,22 +197,24 @@ class Select {
     }
     /** Выбор опции: подпись и значение идут в поле и в атрибуты корня, затем слушатели */
     #applyOption(option = new HTMLElement(), silent = Boolean()) {
-        const title = option.getAttribute('option_title');
-        const value = option.getAttribute('option_value');
+        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(new CustomEvent("chui_select_option_changed", {
-            detail: {
-                title: title,
-                value: value
-            },
-        }));
+        this.#SelectMain.dispatchEvent(
+            new CustomEvent("chui_select_option_changed", {
+                detail: {
+                    title: title,
+                    value: value,
+                },
+            })
+        );
     }
     /**
      * Выбор опции: подпись и значение идут в поле и в атрибуты корня, затем слушатели.
@@ -207,32 +223,32 @@ class Select {
      * закрывался бы по blur до щелчка, и выбор терялся бы.
      */
     #wireOption(option = new HTMLElement()) {
-        option.addEventListener('mousedown', (event) => {
+        option.addEventListener("mousedown", (event) => {
             event.preventDefault();
             // Признак «выбрано мышью»: гасит повторное раскрытие списка на `mouseup` по полю
-            this.#chosen_by_mouse = true;
+            this.#chosenByMouse = true;
             this.#applyOption(option, false);
         });
-        option.addEventListener('click', (event) => {
+        option.addEventListener("click", (event) => {
             if (event.detail !== 0) return;
             this.#applyOption(option, false);
         });
     }
     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);
+        option.setAttribute("option_title", title);
+        option.setAttribute("option_value", value);
         this.#wireOption(option);
         this.#dropdown.appendChild(option);
         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);
+            option.setAttribute("option_title", opt.title);
+            option.setAttribute("option_value", opt.value);
             this.#wireOption(option);
             this.#dropdown.appendChild(option);
         }
@@ -247,58 +263,66 @@ 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);
-            if (test.getAttribute('option_value') === String(wanted)) test.click()
+            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;
+    }
+    getValue() {
+        return this.#input.value;
     }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.value; }
     setDisabled(boolean = Boolean()) {
-        this.#disabled_trigger = boolean
+        this.#disabledTrigger = boolean;
         if (boolean) {
-            this.#setOpenState(false)
+            this.#setOpenState(false);
             if (this.#a11y !== undefined) this.#a11y.setExpanded(false);
-            this.#Select_second.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.#SelectSecond.classList.add("selectbox_disabled");
+            this.#input.className = "selectbox_input_disabled";
+            this.#label.className = "select_label_disabled";
+            this.#buttonOpen.remove();
+            this.#SelectSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#Select_second.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.#SelectSecond.classList.remove("selectbox_disabled");
+            this.#input.className = "selectbox_input";
+            this.#label.className = "select_label";
+            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' : '';
-        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.#SelectMain;
     }
-    set() { return this.#Select_main; }
 }
 
 function setOptionDisplay(element = new HTMLElement()) {
     // Скрытый фильтром вариант показывается снятием инлайнового `display`:
     // базовый вид строки (блок) задаёт CSS, а не этот обход
-    for (let option of element.childNodes) { option.style.removeProperty("display"); }
+    for (const option of element.childNodes) {
+        option.style.removeProperty("display");
+    }
 }
 
-exports.Select = Select
+exports.Select = Select;

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

@@ -4,21 +4,21 @@ 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);
-    width: var(--control_width)
+    margin: var(--block_margin);
+    width: var(--control_width);
 }
 
 selectbox {
     position: relative;
-    display:flex;
+    display: flex;
     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);
@@ -28,11 +28,11 @@ selectbox {
 
 .selectbox_input {
     cursor: pointer;
-    width:100%;
+    width: 100%;
     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;
@@ -59,10 +59,10 @@ selectbox_dropdown {
     -webkit-backdrop-filter: var(--global_blur);
     color: var(--text_color);
     outline: none;
-    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;
@@ -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,10 +122,10 @@ 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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 /* DISABLED STYLES */
@@ -137,9 +137,9 @@ selectbox_option:active {
 
 .selectbox_input_disabled {
     cursor: not-allowed;
-    width:100%;
+    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,8 +160,8 @@ 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)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}