chuijs 4.0.2 → 4.0.4

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

@@ -5,18 +5,18 @@ chui_time_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: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 time_input_label {
     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;
@@ -39,13 +39,13 @@ time_main_block {
     width: max-content;
     height: var(--control_height);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
 }
 
 /* Индикатор часов — системный: время выбирают в своей панели, поэтому он скрыт (свой значок есть) */
-chui_time_input input[type=time]::-webkit-calendar-picker-indicator {
+chui_time_input input[type="time"]::-webkit-calendar-picker-indicator {
     display: none;
 }
 
@@ -59,7 +59,8 @@ input.time_input {
     width: 96px;
     height: 100%;
     margin: 0;
-    padding-block: 0 0; padding-inline: 10px 4px;
+    padding-block: 0 0;
+    padding-inline: 10px 4px;
     border: none;
     background: transparent;
     color: var(--text_color);
@@ -85,7 +86,8 @@ input.time_input:disabled {
     box-sizing: border-box;
     height: 100%;
     margin: 0;
-    padding-block: 0 0; padding-inline: 2px 8px;
+    padding-block: 0 0;
+    padding-inline: 2px 8px;
     border: none;
     border-radius: var(--radius_sm);
     background: transparent;
@@ -132,7 +134,7 @@ input.time_input:disabled {
        в прокрутку панели — иначе колонки часов и минут обрезались бы краем окна */
     overflow: hidden auto;
     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);
     -webkit-backdrop-filter: var(--global_blur);
@@ -142,18 +144,14 @@ input.time_input:disabled {
 
 .time_dropdown_shown {
     display: flex;
-    animation: time_dropdown_in var(--transition_time) ease-out;
-}
-
-@keyframes time_dropdown_in {
-    from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
+    /* Панель открывается общим кадром: свой у неё был тот же по смыслу (прозрачность и подъём),
+       но без роста, а кривая шла торможением вместо отклика */
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
+/* Уход панели: она гаснет и сходит вверх, а класс показа снимается по концу кадра */
+.time_dropdown_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 .time_list {

package/framework/components/chui_inputs/chui_time/time.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr, dropdownPlacement} = require('../../../modules/chui_functions');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr, dropdownPlacement } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Формат значения поля: 24-часовое «ЧЧ:ММ» — так же, как отдаёт нативный input[type=time]
 const TIME_PATTERN = "^([01][0-9]|2[0-3]):[0-5][0-9]$";
@@ -47,38 +47,40 @@ class TimeInput {
     #minutes = document.createElement("time_list");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #step = 5;
     #min = undefined;
     #max = undefined;
     #disabled = false;
-    #is_open = false;
+    #isOpen = false;
     #listeners = [];
-    #on_change = undefined;
-    #window_click_event = (event) => {
+    #onChange = undefined;
+    #windowClickEvent = (event) => {
         if (!this.#block.contains(event.target)) this.#closeDropdown();
     };
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: String(),
-        step: Number(),
-        min: String(),
-        max: String(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: String(),
+            step: Number(),
+            min: String(),
+            max: String(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_TimeInput");
         TimeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_time_input_${TimeInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#input.type = "time";
@@ -114,7 +116,7 @@ class TimeInput {
         this.#open.appendChild(glyph);
         this.#open.addEventListener("click", () => {
             if (this.#input.disabled) return;
-            if (this.#is_open) this.#closeDropdown();
+            if (this.#isOpen) this.#closeDropdown();
             else this.#openDropdown();
         });
         this.#label.className = "time_input_label";
@@ -138,22 +140,29 @@ class TimeInput {
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = TIME_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         if (this.#min !== undefined || this.#max !== undefined) {
             rules.validate = (value) => {
-                const custom = own_validate === undefined ? undefined : own_validate(value);
+                const custom = ownValidate === undefined ? undefined : ownValidate(value);
                 if (custom !== undefined && custom !== null && custom !== true) return custom;
                 const parsed = TimeInput.parse(value);
                 if (parsed === undefined) return undefined;
-                if (this.#min !== undefined && parsed < this.#min) return I18n.t("time.min", {min: this.#min});
-                if (this.#max !== undefined && parsed > this.#max) return I18n.t("time.max", {max: this.#max});
+                if (this.#min !== undefined && parsed < this.#min) return I18n.t("time.min", { min: this.#min });
+                if (this.#max !== undefined && parsed > this.#max) return I18n.t("time.max", { max: this.#max });
                 return undefined;
             };
         }
-        Validate.installField(this, rules, this.#root, undefined, () => (this.#input.value === undefined ? "" : this.#input.value), this.#block);
+        Validate.installField(
+            this,
+            rules,
+            this.#root,
+            undefined,
+            () => (this.#input.value === undefined ? "" : this.#input.value),
+            this.#block
+        );
         if (options.value !== undefined) this.setValue(options.value);
         this.setDisabled(options.disabled === true);
-        window.addEventListener('click', this.#window_click_event);
+        window.addEventListener("click", this.#windowClickEvent);
     }
 
     // GET
@@ -166,7 +175,7 @@ class TimeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Значение в виде «ЧЧ:ММ»; пустая строка — время не задано */
@@ -192,7 +201,7 @@ class TimeInput {
     }
 
     isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     /**
@@ -236,7 +245,7 @@ class TimeInput {
 
     /** Подпись над полем; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -255,8 +264,8 @@ class TimeInput {
 
     /** Доступное имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#input.removeAttribute("aria-label");
             else this.#input.setAttribute("aria-label", String(text));
         }
@@ -342,8 +351,8 @@ class TimeInput {
 
     // === ПАНЕЛЬ ===
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("time.label");
     }
 
@@ -378,8 +387,10 @@ class TimeInput {
         const selected = TimeInput.parse(this.getValue());
         const hours = selected === undefined ? undefined : selected.slice(0, 2);
         const minutes = selected === undefined ? undefined : selected.slice(3, 5);
-        for (const option of this.#visibleOptions(this.#hours)) this.#markSelected(option, option.dataset.value === hours);
-        for (const option of this.#visibleOptions(this.#minutes)) this.#markSelected(option, option.dataset.value === minutes);
+        for (const option of this.#visibleOptions(this.#hours))
+            this.#markSelected(option, option.dataset.value === hours);
+        for (const option of this.#visibleOptions(this.#minutes))
+            this.#markSelected(option, option.dataset.value === minutes);
     }
 
     #markSelected(option = new HTMLElement(), selected = Boolean()) {
@@ -390,8 +401,8 @@ class TimeInput {
 
     #pick(unit = String(), text = String()) {
         const current = TimeInput.parse(this.getValue());
-        const hours = unit === "hours" ? text : (current === undefined ? "00" : current.slice(0, 2));
-        const minutes = unit === "minutes" ? text : (current === undefined ? "00" : current.slice(3, 5));
+        const hours = unit === "hours" ? text : current === undefined ? "00" : current.slice(0, 2);
+        const minutes = unit === "minutes" ? text : current === undefined ? "00" : current.slice(3, 5);
         this.#input.value = `${hours}:${minutes}`;
         this.#changed();
     }
@@ -414,11 +425,12 @@ class TimeInput {
 
     #openDropdown() {
         this.#renderOptions();
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#input.setAttribute("aria-expanded", "true");
         // Показ — классом, а не общей `Animation`: её `animationend` снимает `display`,
         // и панель, открытая поверх незавершённого закрытия, гасла бы сама.
         // Класс назван иначе, чем у каретки: одно имя давало бы панели стили кнопки
+        this.#dropdown.classList.remove("time_dropdown_leaving");
         this.#dropdown.classList.add("time_dropdown_shown");
         this.#placeDropdown();
         this.#focusSelected("hours");
@@ -437,10 +449,20 @@ class TimeInput {
     }
 
     #closeDropdown() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
         this.#input.setAttribute("aria-expanded", "false");
-        this.#dropdown.classList.remove("time_dropdown_shown");
+        // Уход идёт движением: класс показа снимается по концу кадра, а незавершённый уход
+        // отменяется при открытии — иначе панель погасла бы уже открытой
+        this.#dropdown.classList.add("time_dropdown_leaving");
+        const done = (event) => {
+            if (event.target !== this.#dropdown) return;
+            this.#dropdown.removeEventListener("animationend", done);
+            if (this.#dropdown.classList.contains("time_dropdown_leaving") === false) return;
+            this.#dropdown.classList.remove("time_dropdown_leaving");
+            this.#dropdown.classList.remove("time_dropdown_shown");
+        };
+        this.#dropdown.addEventListener("animationend", done);
     }
 
     #changed() {
@@ -448,7 +470,7 @@ class TimeInput {
         this.#markOptions();
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     #moveOption(delta = Number()) {
@@ -539,9 +561,9 @@ class TimeInput {
 
     /** Полное удаление: панель и слушатель окна */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#windowClickEvent);
         this.#closeDropdown();
     }
 }
 
-exports.TimeInput = TimeInput
+exports.TimeInput = TimeInput;

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

@@ -3,7 +3,7 @@
     width: 50px;
     height: 25px;
     border-radius: var(--radius_pill);
-    margin: var(--margin);
+    margin: var(--block_margin);
     background: var(--element_background);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
@@ -44,20 +44,27 @@
    белой: один и тот же тумблер менял цвет детали */
 .slider:before {
     position: absolute;
-    content: '';
+    content: "";
     height: 15px;
     width: 15px;
     inset-inline-start: 5px;
     bottom: 5px;
     border-radius: var(--radius_circle);
     background-color: var(--text_color_hover);
-    /* Тень как у бегунка ползунка: поднятая белая деталь на дорожке */
-    box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
+    /* Тень как у бегунка ползунка: поднятая белая деталь на дорожке — общий ключ
+       контролов */
+    box-shadow: var(--box_shadow_control);
+    /* Ручка едет пружиной: лёгкий перелёт читается как щелчок переключателя.
+       Свой список перехода заменяет общий, поэтому цвет и тень перечислены рядом */
+    transition:
+        transform var(--motion_base) var(--motion_spring),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 input:checked + .slider:before {
     position: absolute;
-    content: '';
+    content: "";
     height: 15px;
     width: 15px;
     inset-inline-start: 5px;
@@ -110,4 +117,4 @@ input:checked + .slider:before {
 /* Включённый, но выключенный — цвет выделения тоже приглушается */
 .switch.switch_disabled input:checked + .slider {
     background: var(--element_background_disabled);
-}
+}

package/framework/components/chui_inputs/chui_toggle/toggle.js

@@ -1,36 +1,36 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class Toggle {
-    #Toggle = document.createElement('label');
-    #toggle_span = document.createElement('span');
-    #toggle_input = document.createElement('input');
+    #Toggle = document.createElement("label");
+    #toggleSpan = document.createElement("span");
+    #toggleInput = document.createElement("input");
     #label = undefined;
-    constructor(options = {label: String(), name: String(), value: Boolean(), disabled: Boolean()}) {
+    constructor(options = { label: String(), name: String(), value: Boolean(), disabled: Boolean() }) {
         // Валидация: required для переключателя — «должен быть включён»
-        Validate.installField(this, options, this.#Toggle, undefined, () => this.#toggle_input.checked);
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Toggle")
-        this.#Toggle.className = 'switch';
-        this.#toggle_input.type = 'checkbox';
-        this.#toggle_span.className = 'slider round';
-        if (options.name !== undefined) this.#toggle_input.name = options.name;
+        Validate.installField(this, options, this.#Toggle, undefined, () => this.#toggleInput.checked);
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Toggle");
+        this.#Toggle.className = "switch";
+        this.#toggleInput.type = "checkbox";
+        this.#toggleSpan.className = "slider round";
+        if (options.name !== undefined) this.#toggleInput.name = options.name;
         // В разметке переключателя нет текста, поэтому подпись уходит в aria-label
         this.setLabel(options.label);
-        this.#Toggle.appendChild(this.#toggle_input);
-        this.#Toggle.appendChild(this.#toggle_span);
+        this.#Toggle.appendChild(this.#toggleInput);
+        this.#Toggle.appendChild(this.#toggleSpan);
         if (options.value !== undefined) this.setValue(options.value === true);
         if (options.disabled !== undefined) this.setDisabled(options.disabled === true);
     }
     setMargin(pos = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
-        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top
-        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom
-        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left
-        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right
+        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top;
+        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom;
+        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left;
+        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right;
     }
     setId(id) {
         this.#Toggle.id = id;
     }
     getName() {
-        return this.#toggle_input.name;
+        return this.#toggleInput.name;
     }
     /** Подпись для скринридера: в самой разметке переключателя текста нет */
     getLabel() {
@@ -38,30 +38,30 @@ class Toggle {
     }
     setLabel(label = String()) {
         this.#label = label === undefined || label === "" ? undefined : label;
-        if (this.#label === undefined) this.#toggle_input.removeAttribute("aria-label");
-        else this.#toggle_input.setAttribute("aria-label", this.#label);
+        if (this.#label === undefined) this.#toggleInput.removeAttribute("aria-label");
+        else this.#toggleInput.setAttribute("aria-label", this.#label);
         return this;
     }
     getDisabled() {
-        return this.#toggle_input.disabled;
+        return this.#toggleInput.disabled;
     }
     setDisabled(boolean = Boolean()) {
-        this.#toggle_input.disabled = boolean;
+        this.#toggleInput.disabled = boolean;
         this.#Toggle.classList.toggle("switch_disabled", boolean);
         return this;
     }
-    addChangeListener (listener) {
-        this.#toggle_input.addEventListener('change', listener);
+    addChangeListener(listener) {
+        this.#toggleInput.addEventListener("change", listener);
     }
     getValue() {
-        return this.#toggle_input.checked;
+        return this.#toggleInput.checked;
     }
     setValue(boolean) {
-        this.#toggle_input.checked = boolean;
+        this.#toggleInput.checked = boolean;
     }
     set() {
         return this.#Toggle;
     }
 }
 
-exports.Toggle = Toggle
+exports.Toggle = Toggle;