chuijs 4.0.3 → 4.0.4

package/framework/components/chui_drawer/drawer.js

@@ -43,11 +43,13 @@ class Drawer {
     #width = undefined;
     #height = undefined;
     #closable = true;
-    #close_outside_click = false;
-    #header_built = false;
-    #footer_built = false;
+    #closeOutsideClick = false;
+    #headerBuilt = false;
+    #footerBuilt = false;
+    // Место, откуда слой открыли: туда он вернётся после ухода
+    #origin = undefined;
     // Имя слоя берётся из узла заголовка — тогда setTitle() ничего не переключает
-    #labelled_by_title = false;
+    #labelledByTitle = false;
     #a11y = undefined;
     isOpen = false;
 
@@ -68,7 +70,7 @@ class Drawer {
         this.#id = options.id === undefined ? require("randomstring").generate() : options.id;
         this.#drawer.id = this.#id;
         this.#closable = options.closable === undefined ? true : options.closable;
-        this.#close_outside_click = options.closeOutSideClick === true;
+        this.#closeOutsideClick = options.closeOutSideClick === true;
         this.#width = options.width;
         this.#height = options.height;
         this.#panel.appendChild(this.#body);
@@ -82,12 +84,12 @@ class Drawer {
         // Пустая заготовка `title: String()` из описания опций заголовком не считается: иначе
         // слой ссылался бы на пустой узел и оставался без имени
         const title = optionOr(options.title, undefined);
-        this.#labelled_by_title = title !== undefined;
+        this.#labelledByTitle = title !== undefined;
         if (title !== undefined) this.setTitle(title);
         this.#a11y = new OverlayA11y(this.#drawer, {
             role: "dialog",
-            labelNode: this.#labelled_by_title ? this.#title : undefined,
-            label: this.#labelled_by_title ? undefined : optionOr(options.label, I18n.t("feedback.drawer")),
+            labelNode: this.#labelledByTitle ? this.#title : undefined,
+            label: this.#labelledByTitle ? undefined : optionOr(options.label, I18n.t("feedback.drawer")),
             onEscape: () => this.close(),
         });
         if (this.#closable) this.#addCloseButton();
@@ -123,7 +125,7 @@ class Drawer {
         if (this.#title.parentElement === null) this.#header.prepend(this.#title);
         this.#title.innerText = title;
         // Слой строился без заголовка: имя задавалось через aria-label — обновляем его
-        if (!this.#labelled_by_title) {
+        if (!this.#labelledByTitle) {
             this.#a11y.setLabel(title);
             return this;
         }
@@ -187,7 +189,14 @@ class Drawer {
     open() {
         if (this.isOpen) return this;
         this.isOpen = true;
+        // Занавес ставится в body — рядом с шапкой и остальными слоями окна. У него
+        // `backdrop-filter` и `z-index`, а внутри карточки Chromium собирает такой слой
+        // отдельной поверхностью и рисует её под слоями из body: шапка приложения срезала
+        // верх панели вместе с заголовком и кнопкой закрытия
+        this.#origin = this.#drawer.parentElement;
+        if (this.#drawer.parentElement !== document.body) document.body.appendChild(this.#drawer);
         this.#panel.style.animationName = `drawer_${this.#side}_in`;
+        this.#panel.dataset.motion = "enter";
         new Animation(this.#drawer).fadeIn();
         this.#a11y.open();
         return this;
@@ -204,6 +213,7 @@ class Drawer {
         this.isOpen = false;
         this.#a11y.close();
         this.#panel.style.animationName = `drawer_${this.#side}_out`;
+        this.#panel.dataset.motion = "exit";
         new Animation(this.#drawer).fadeOut();
         return this;
     }
@@ -223,14 +233,14 @@ class Drawer {
     }
 
     #ensureHeader() {
-        if (this.#header_built) return;
-        this.#header_built = true;
+        if (this.#headerBuilt) return;
+        this.#headerBuilt = true;
         this.#panel.prepend(this.#header);
     }
 
     #ensureFooter() {
-        if (this.#footer_built) return;
-        this.#footer_built = true;
+        if (this.#footerBuilt) return;
+        this.#footerBuilt = true;
         this.#panel.appendChild(this.#footer);
     }
 
@@ -261,7 +271,7 @@ class Drawer {
 
     // Клик по занавесу (но не по панели) закрывает панель, если это разрешено опцией
     #onDrawerClick = (event) => {
-        if (!this.#close_outside_click || event.target !== this.#drawer) return;
+        if (!this.#closeOutsideClick || event.target !== this.#drawer) return;
         this.close();
     };
 
@@ -270,7 +280,20 @@ class Drawer {
     #onPanelAnimationEnd = (event) => {
         if (event.target !== this.#panel) return;
         this.#panel.style.animationName = "";
+        if (this.isOpen) return;
+        // Уход доигран: слой возвращается туда, откуда открывался. Кадр откладывается на
+        // следующий кадр — перенос узла в момент `animationend` перезапустил бы уход
+        requestAnimationFrame(() => this.#returnHome());
     };
+
+    /** Вернуть слой на прежнее место, если оно ещё в документе */
+    #returnHome() {
+        if (this.isOpen) return;
+        const origin = this.#origin;
+        if (origin === undefined || origin === null || origin === document.body) return;
+        if (origin.isConnected === false) return;
+        origin.appendChild(this.#drawer);
+    }
 }
 
 exports.Drawer = Drawer;

package/framework/components/chui_drawer/styles.css

@@ -25,6 +25,20 @@ drawer_panel {
     backdrop-filter: var(--global_blur);
 }
 
+/* Крупная поверхность выезжает медленнее базового движения, а уходит быстро: вид движения
+   ставит drawer.js, а длительность и кривая — здесь, иначе панель догоняла бы мелкие всплытия */
+drawer_panel[data-motion="enter"] {
+    animation-duration: var(--motion_slow);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
+drawer_panel[data-motion="exit"] {
+    animation-duration: var(--motion_fast);
+    animation-timing-function: var(--motion_ease);
+    animation-fill-mode: both;
+}
+
 /* Сторона панели. Радиус только на внутренних углах — панель «выходит» из-за края окна */
 chui_drawer[data-side="right"] > drawer_panel {
     inset-inline-end: 0;
@@ -132,7 +146,7 @@ drawer_header {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: var(--margin);
+    gap: var(--block_margin);
     padding: var(--control_padding);
     border-bottom: 1px solid var(--border_color);
 }
@@ -142,7 +156,7 @@ drawer_title {
     flex: 1;
     font-size: var(--font_default_size);
     font-weight: 500;
-    padding: var(--margin);
+    padding: var(--block_margin);
     text-align: start;
 }
 
@@ -171,7 +185,7 @@ drawer_close:focus-visible {
 drawer_body {
     display: flex;
     flex-direction: column;
-    gap: var(--margin);
+    gap: var(--block_margin);
     flex: 1;
     padding: var(--control_padding);
     overflow: auto;
@@ -182,7 +196,7 @@ drawer_footer {
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--margin);
+    gap: var(--block_margin);
     padding: var(--control_padding);
     border-top: 1px solid var(--border_color);
 }

package/framework/components/chui_drop_zone/drop_zone.js

@@ -44,8 +44,8 @@ class DropZone {
     #label = undefined;
     // Глубина входа: dragenter/dragleave приходят с дочерних узлов и гасили бы подсветку
     #depth = 0;
-    #on_drop = undefined;
-    #on_files = undefined;
+    #onDrop = undefined;
+    #onFiles = undefined;
     #files = [];
 
     constructor(
@@ -68,8 +68,8 @@ class DropZone {
         this.#root.id = this.#id;
         this.#accept = options.accept === undefined || options.accept.length === 0 ? undefined : options.accept;
         this.#multiple = options.multiple !== false;
-        this.#on_drop = options.onDrop;
-        this.#on_files = options.onFiles;
+        this.#onDrop = options.onDrop;
+        this.#onFiles = options.onFiles;
         // Пустая опция — «не задана»: `#applyLabel` тогда берёт подпись из заголовка
         this.#label = optionOr(options.label, undefined);
         this.#root.setAttribute("role", "button");
@@ -238,7 +238,7 @@ class DropZone {
                     ? ""
                     : I18n.t("forms.dropZoneAccepted", { count: this.#files.length })
                 : I18n.t("forms.dropZoneRejected", { count: rejected });
-        if (this.#on_files !== undefined) this.#on_files(this.getFiles());
+        if (this.#onFiles !== undefined) this.#onFiles(this.getFiles());
         return rejected;
     }
 
@@ -255,7 +255,7 @@ class DropZone {
     }
 
     #emit(payload = Object()) {
-        if (this.#on_drop !== undefined) this.#on_drop(payload);
+        if (this.#onDrop !== undefined) this.#onDrop(payload);
     }
 
     #setActive(active = Boolean()) {

package/framework/components/chui_drop_zone/styles.css

@@ -7,18 +7,18 @@ chui_drop_zone {
     gap: 6px;
     box-sizing: border-box;
     padding: 20px;
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: -webkit-fill-available;
     text-align: center;
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px dashed var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     cursor: pointer;
     outline: none;
-    /* Свой переход не нужен: фон и рамку анимирует общее правило `* { transition }`,
-       а своё время (0.15s) расходилось с --transition_time */
+    /* Свой переход не нужен: фон и рамку ведёт общее правило `* { transition }` одним
+       видом движения — своё время ломало бы общий ритм */
 }
 
 chui_drop_zone:focus-visible {
@@ -27,10 +27,14 @@ chui_drop_zone:focus-visible {
 }
 
 chui_drop_zone.drop_zone_active {
-    background: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
     border-color: var(--blue_prime_background);
     border-style: solid;
     color: var(--text_color_hover);
+    /* Приём файла читается подъёмом: зона идёт навстречу перетаскиваемому, а не только
+       меняет цвет — это ответ на жест, а не смена состояния */
+    transform: scale(1.01);
+    box-shadow: var(--box_shadow_drop);
 }
 
 chui_drop_zone.drop_zone_disabled {
@@ -60,7 +64,7 @@ drop_zone_description {
 }
 
 chui_drop_zone.drop_zone_active drop_zone_description {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 /* Скрытие идёт атрибутом hidden: авторский display перебил бы UA-правило [hidden] */

package/framework/components/chui_fieldset/fieldset.js

@@ -1,5 +1,5 @@
 class FieldSet {
-    #chui_fieldset = document.createElement("chui_fieldset");
+    #chuiFieldset = document.createElement("chui_fieldset");
     #fieldset = document.createElement("fieldset");
     #legend = document.createElement("legend");
     constructor(
@@ -28,7 +28,7 @@ class FieldSet {
         // Установка стилей
         if (options.style !== undefined) {
             // Размер
-            if (options.style.width !== undefined) this.#chui_fieldset.style.width = options.style.width;
+            if (options.style.width !== undefined) this.#chuiFieldset.style.width = options.style.width;
             if (options.style.height !== undefined) this.#fieldset.style.height = options.style.height;
             // Расположение
             if (options.style.direction !== undefined) this.#fieldset.style.flexDirection = options.style.direction;
@@ -38,9 +38,9 @@ class FieldSet {
         }
         //
         this.#fieldset.appendChild(this.#legend);
-        this.#chui_fieldset.appendChild(this.#fieldset);
+        this.#chuiFieldset.appendChild(this.#fieldset);
         if (Array.isArray(options.components) && options.components.length !== 0) {
-            for (let component of options.components) this.#fieldset.appendChild(component.set());
+            for (const component of options.components) this.#fieldset.appendChild(component.set());
         }
     }
     getId() {
@@ -53,10 +53,10 @@ class FieldSet {
         return (this.#legend.innerText = text);
     }
     add(...components) {
-        for (let component of components) this.#fieldset.appendChild(component.set());
+        for (const component of components) this.#fieldset.appendChild(component.set());
     }
     set() {
-        return this.#chui_fieldset;
+        return this.#chuiFieldset;
     }
 }
 

package/framework/components/chui_fieldset/styles.css

@@ -1,15 +1,15 @@
 chui_fieldset {
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
+    border-radius: var(--radius_sm);
+    margin: var(--block_margin);
 }
 
 fieldset {
     height: -webkit-fill-available;
     width: -webkit-fill-available;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     padding: 0 10px 10px;
     display: flex;
 }
@@ -22,6 +22,6 @@ legend {
     font-size: var(--font_default_size);
     font-weight: 500;
     border: none;
-    border-radius: var(--border_radius);
-    margin-inline-start: var(--margin);
+    border-radius: var(--radius_sm);
+    margin-inline-start: var(--block_margin);
 }