chuijs 4.0.3 → 4.0.4

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

@@ -4,11 +4,11 @@ chui_chips {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     /* fill-available учитывает собственный margin, 100% — нет */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
@@ -16,7 +16,7 @@ chui_chips {
 chips_title {
     display: block;
     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);
@@ -37,7 +37,7 @@ chips_field {
     height: var(--control_height);
     padding: 3px 6px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     cursor: text;
 }
@@ -193,7 +193,7 @@ chips_dropdown {
     overflow: hidden auto;
     padding: var(--control_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     box-shadow: var(--box_shadow_drop);
@@ -204,6 +204,29 @@ chips_dropdown[hidden] {
     display: none;
 }
 
+/* Уход метки: она гаснет и сжимается, а из строки убирается по концу кадра */
+.chips_item_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+/* Появление списка подсказок: общий кадр панели — он же проигрывается заново при снятии
+   `hidden`. Прежде список брал только общий кадр строки на быстром времени, и открытие
+   читалось рывком рядом с остальными дропдаунами */
+chips_dropdown {
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
+/* Появление метки: она встаёт на место, а не возникает рывком. Класс снимается по концу
+   кадра, поэтому пересборка списка метки не переигрывает */
+.chips_item_appearing {
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: список гаснет и сходит вверх, `hidden` возвращается по концу кадра */
+.chips_dropdown_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
 .chips_option {
     padding: 6px 8px;
     border-radius: var(--radius_sm);

package/framework/components/chui_inputs/chui_color_picker/color_picker.js

@@ -1,6 +1,7 @@
 const { setStyles, optionOr } = require("../../../modules/chui_functions");
 const { Validate } = require("../../../modules/chui_validate/chui_validate");
 const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
+const { paletteColor } = require("../../../modules/chui_palette/palette");
 
 // Формат, который принимает и поле, и разбор значения: три или шесть знаков после «#»
 const HEX_PATTERN = "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
@@ -41,7 +42,11 @@ const HEX_PATTERN = "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
  * Слушателей и таймеров вне своих узлов нет, поэтому `destroy()` не нужен.
  */
 class ColorPicker {
-    static PALETTE = ["#ff3b30", "#ff9500", "#ffcc00", "#34c759", "#007aff", "#5856d6", "#af52de", "#8e8e93"];
+    /* Готовые цвета — из общей палитры (светлая колонка: набор предлагается человеку,
+       а не подстраивается под схему окна) */
+    static PALETTE = ["red", "orange", "yellow", "green", "blue", "indigo", "purple", "gray"].map((name) =>
+        paletteColor(name, { scheme: "light" })
+    );
     static #counter = 0;
 
     #root = document.createElement("chui_color_picker");
@@ -55,15 +60,15 @@ class ColorPicker {
     #id = undefined;
     #name = undefined;
     #label = undefined;
-    #title_text = undefined;
+    #titleText = undefined;
     #value = ColorPicker.PALETTE[4];
     #initial = ColorPicker.PALETTE[4];
     #items = [];
     #buttons = [];
-    #show_input = true;
+    #showInput = true;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -85,8 +90,8 @@ class ColorPicker {
         this.#root.id = this.#id;
         this.#name = options.name;
         this.#label = options.label;
-        this.#show_input = options.showInput !== false;
-        this.#on_change = options.onChange;
+        this.#showInput = options.showInput !== false;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         // Явно переданный цвет разбирается сразу: молча подменять его дефолтным нельзя,
         // а пустая заготовка `value: String()` из описания опций означает «цвет не задан»
@@ -104,7 +109,7 @@ class ColorPicker {
         this.#swatch.addEventListener("input", this.#onSwatchInput);
         this.#swatch.addEventListener("change", this.#onSwatchChange);
         this.#row.appendChild(this.#swatch);
-        if (this.#show_input) {
+        if (this.#showInput) {
             this.#field.className = "color_picker_field";
             this.#hex.type = "text";
             this.#hex.className = "color_picker_hex";
@@ -137,7 +142,7 @@ class ColorPicker {
             this.#root,
             undefined,
             () => this.#validateValue(),
-            this.#show_input ? this.#field : this.#row
+            this.#showInput ? this.#field : this.#row
         );
         this.setPresets(options.presets === undefined ? ColorPicker.PALETTE : options.presets);
         this.setDisabled(options.disabled === true);
@@ -154,7 +159,7 @@ class ColorPicker {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя образца, заданное в `label` */
@@ -205,7 +210,7 @@ class ColorPicker {
 
     /** Подпись над контролом; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -221,9 +226,9 @@ class ColorPicker {
         this.#label = text;
         if (text === undefined) this.#swatch.removeAttribute("aria-label");
         else this.#swatch.setAttribute("aria-label", String(text));
-        const hex_label =
+        const hexLabel =
             text === undefined ? I18n.t("forms.colorPickerHex") : I18n.t("forms.colorPickerHexOf", { label: text });
-        this.#hex.setAttribute("aria-label", hex_label);
+        this.#hex.setAttribute("aria-label", hexLabel);
         return this;
     }
 
@@ -287,7 +292,7 @@ class ColorPicker {
     /** Фокус на поле HEX (или на образец, если поля нет): `Form` зовёт это при ошибке */
     focus() {
         if (this.#disabled) return this;
-        if (this.#show_input) this.#hex.focus();
+        if (this.#showInput) this.#hex.focus();
         else this.#swatch.focus();
         return this;
     }
@@ -300,7 +305,7 @@ class ColorPicker {
     // === ВНУТРЕННЕЕ ===
     // Что проверяют правила: текст поля (то, что ввёл человек), иначе — само значение
     #validateValue() {
-        if (!this.#show_input) return this.#value;
+        if (!this.#showInput) return this.#value;
         return this.#hex.value === undefined ? "" : this.#hex.value;
     }
 
@@ -359,7 +364,7 @@ class ColorPicker {
 
     #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);
     }
 
     // Системная палитра шлёт input на каждое движение, change — когда цвет выбран

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

@@ -5,11 +5,11 @@ chui_color_picker {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -17,7 +17,7 @@ chui_color_picker {
 .color_picker_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;
@@ -41,7 +41,7 @@ chui_color_picker {
     height: var(--control_height);
     padding: 0;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     cursor: pointer;
     -webkit-appearance: none;
@@ -54,7 +54,7 @@ chui_color_picker {
 
 .color_picker_swatch::-webkit-color-swatch {
     border: none;
-    border-radius: calc(var(--border_radius) - 1px);
+    border-radius: calc(var(--radius_sm) - 1px);
 }
 
 .color_picker_swatch:focus-visible {
@@ -74,9 +74,9 @@ chui_color_picker {
     box-sizing: border-box;
     min-width: 104px;
     height: var(--control_height);
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }
 

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

@@ -9,17 +9,17 @@ 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");
+    #idCb = require("randomstring").generate();
+    #ComboBoxMain = document.createElement("chui_combobox");
+    #ComboBoxSecond = 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");
+    #buttonOpen = document.createElement("combo_button_open");
+    #buttonOpenDisabled = document.createElement("combo_button_open");
     #dropdown = document.createElement("combobox_dropdown");
-    #dropdown_height = "max-content";
+    #dropdownHeight = "max-content";
     #a11y = undefined;
-    #window_click_bound = false;
+    #windowClickBound = false;
     constructor(
         options = {
             name: String(),
@@ -32,54 +32,54 @@ class ComboBox {
     ) {
         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.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);
+        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(
+        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();
         // Курсор выключенного поля даёт `.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.#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.#buttonOpen.style.transform = "rotate(180deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
         });
         this.#input.addEventListener("blur", () => {
-            this.#button_open.style.transform = "rotate(0deg)";
-            this.#dropdown.style.height = this.#dropdown_height;
+            this.#buttonOpen.style.transform = "rotate(0deg)";
+            this.#dropdown.style.height = this.#dropdownHeight;
         });
-        this.#ComboBox_second.addEventListener("click", (event) => {
+        this.#ComboBoxSecond.addEventListener("click", (event) => {
             if (!this.#input.disabled) {
-                if (event.target.parentNode === this.#ComboBox_second) {
+                if (event.target.parentNode === this.#ComboBoxSecond) {
                     this.#input.focus();
                     this.#openDropdown();
                 }
@@ -87,23 +87,23 @@ class ComboBox {
         });
 
         this.#input.addEventListener("input", (event) => {
-            let dropdown = this.#dropdown;
-            let query = event.target.value.toLowerCase();
-            for (let option of dropdown.childNodes) {
+            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";
                 } else {
                     option.style.display = "block";
-                    dropdown.style.height = this.#dropdown_height;
+                    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,
@@ -113,20 +113,20 @@ class ComboBox {
         });
     }
     #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);
@@ -137,11 +137,11 @@ 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);
@@ -152,10 +152,10 @@ class ComboBox {
                         value: option.getAttribute("option_value"),
                     },
                 });
-                this.#ComboBox_main.dispatchEvent(eventAwesome);
+                this.#ComboBoxMain.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.setAttribute("option_title", option.getAttribute("option_title"));
+                this.#ComboBoxMain.setAttribute("option_value", option.getAttribute("option_value"));
                 this.#markSelected(option);
             });
             this.#dropdown.appendChild(option);
@@ -166,27 +166,27 @@ class ComboBox {
         return this.#input.name;
     }
     getValue() {
-        return this.#ComboBox_main.getAttribute("option_value");
+        return this.#ComboBoxMain.getAttribute("option_value");
     }
     setDisabled(boolean = Boolean()) {
         this.#input.disabled = boolean;
         if (boolean) {
-            this.#ComboBox_second.classList.add("combobox_disabled");
+            this.#ComboBoxSecond.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.#buttonOpen.remove();
+            this.#ComboBoxSecond.appendChild(this.#buttonOpenDisabled);
         } else {
-            this.#ComboBox_second.classList.remove("combobox_disabled");
+            this.#ComboBoxSecond.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.#buttonOpenDisabled.remove();
+            this.#ComboBoxSecond.appendChild(this.#buttonOpen);
         }
     }
     clear() {
-        this.#ComboBox_main.removeAttribute("option_title");
-        this.#ComboBox_main.removeAttribute("option_value");
+        this.#ComboBoxMain.removeAttribute("option_title");
+        this.#ComboBoxMain.removeAttribute("option_value");
         this.#input.value = "";
         this.#markSelected(undefined);
     }
@@ -200,11 +200,11 @@ 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)" : "";
@@ -213,14 +213,14 @@ class ComboBox {
         else this.#dropdown.style.removeProperty("max-height");
     }
     set() {
-        return this.#ComboBox_main;
+        return this.#ComboBoxMain;
     }
 }
 
 function setOptionDisplay(element) {
     // Скрытый фильтром вариант показывается снятием инлайнового `display`:
     // базовый вид строки (блок) задаёт CSS
-    for (let option of element.childNodes) {
+    for (const option of element.childNodes) {
         option.style.removeProperty("display");
     }
 }

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

@@ -4,11 +4,11 @@ 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);
+    margin: var(--block_margin);
     width: var(--control_width);
 }
 
@@ -17,7 +17,7 @@ combobox {
     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,7 +27,7 @@ combobox {
 .combobox_input {
     width: 100%;
     margin: 0;
-    /* Отступ текста 11px — как у остальных полей (`--main_padding_sm`), было число 10px */
+    /* Отступ текста 11px — как у остальных полей (`--block_padding_sm`), было число 10px */
     padding-block: var(--control_padding) var(--control_padding);
     padding-inline: 11px 0;
     background: transparent;
@@ -54,7 +54,7 @@ combobox_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;
@@ -69,7 +69,7 @@ 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);
@@ -77,7 +77,7 @@ combobox_dropdown {
 
 combo_button_open {
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--blue_prime_background);
 }
 
@@ -91,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;
@@ -142,7 +142,7 @@ 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);