chuijs 4.0.2 → 4.0.4

package/framework/components/chui_diff_viewer/styles.css

@@ -7,13 +7,13 @@ chui_diff_viewer {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
-    font-family: 'chui_mono', monospace;
+    font-family: "chui_mono", monospace;
     font-size: var(--font_default_size);
 }
 
@@ -24,7 +24,7 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 .diff_viewer_title {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-family: system-ui, sans-serif;
     font-size: var(--font_labels_size);
@@ -68,17 +68,17 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 }
 
 .diff_viewer_stat_removed {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
     color: var(--badge_error_text);
 }
 
 .diff_viewer_stat_added {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
     color: var(--badge_success_text);
 }
 
 .diff_viewer_stat_changed {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
     color: var(--badge_warning_text);
 }
 
@@ -246,15 +246,15 @@ chui_diff_viewer.diff_viewer_fixed .diff_viewer_body {
 /* Тона строк — те же, что у счётчиков: добавлено, удалено, заменено, без изменений.
    Класс строки собирается из типа модели (insert/delete/replace), поэтому имена совпадают с ним */
 .diff_viewer_row_insert {
-    background: var(--badge_success_back);
+    background: var(--badge_success_background);
 }
 
 .diff_viewer_row_delete {
-    background: var(--badge_error_back);
+    background: var(--badge_error_background);
 }
 
 .diff_viewer_row_replace {
-    background: var(--badge_warning_back);
+    background: var(--badge_warning_background);
 }
 
 .diff_viewer_row_insert .diff_viewer_marker {

package/framework/components/chui_divider/divider.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Разделитель: тонкая линия между блоками, при необходимости с подписью.
@@ -19,24 +19,26 @@ const {setStyles, optionOr} = require('../../modules/chui_functions');
 class Divider {
     static ORIENTATION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static #counter = 0;
 
     #root = document.createElement("chui_divider");
     #line = document.createElement("divider_line");
     // Вторая линия существует ровно тогда, когда есть подпись
-    #line_after = undefined;
+    #lineAfter = undefined;
     #text = undefined;
     #id = undefined;
 
-    constructor(options = {
-        id: String(),
-        text: String(),
-        orientation: String(),
-        margin: Object(),
-        width: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            orientation: String(),
+            margin: Object(),
+            width: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Divider");
         Divider.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: без этого вызов `new Divider()`
@@ -78,17 +80,17 @@ class Divider {
                 this.#text.remove();
                 this.#text = undefined;
             }
-            if (this.#line_after !== undefined) {
-                this.#line_after.remove();
-                this.#line_after = undefined;
+            if (this.#lineAfter !== undefined) {
+                this.#lineAfter.remove();
+                this.#lineAfter = undefined;
             }
             return this;
         }
         if (this.#text === undefined) {
             this.#text = document.createElement("divider_text");
-            this.#line_after = document.createElement("divider_line");
+            this.#lineAfter = document.createElement("divider_line");
             this.#root.appendChild(this.#text);
-            this.#root.appendChild(this.#line_after);
+            this.#root.appendChild(this.#lineAfter);
         }
         this.#text.innerText = text;
         return this;
@@ -103,7 +105,7 @@ class Divider {
     }
 
     /** Отступы со всех сторон: {top, bottom, left, right} — как у `Toggle.setMargin()` */
-    setMargin(margin = {top: undefined, bottom: undefined, left: undefined, right: undefined}) {
+    setMargin(margin = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
         if (margin.top !== undefined) this.#root.style.marginTop = margin.top;
         if (margin.bottom !== undefined) this.#root.style.marginBottom = margin.bottom;
         if (margin.left !== undefined) this.#root.style.marginLeft = margin.left;
@@ -123,4 +125,4 @@ class Divider {
     }
 }
 
-exports.Divider = Divider
+exports.Divider = Divider;

package/framework/components/chui_divider/styles.css

@@ -6,7 +6,7 @@ chui_divider {
     --divider_length: -webkit-fill-available;
     color: var(--text_color_disabled);
     font-size: var(--font_default_size);
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 chui_divider[data-orientation="horizontal"] {
@@ -18,7 +18,7 @@ chui_divider[data-orientation="vertical"] {
     align-self: stretch;
     width: 1px;
     height: var(--divider_length);
-    margin: 0 var(--margin);
+    margin: 0 var(--block_margin);
 }
 
 divider_line {

package/framework/components/chui_drawer/drawer.js

@@ -1,8 +1,8 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Боковая панель (drawer), выезжающая с одной из сторон окна.
@@ -24,7 +24,7 @@ class Drawer {
         LEFT: "left",
         RIGHT: "right",
         TOP: "top",
-        BOTTOM: "bottom"
+        BOTTOM: "bottom",
     };
     static DEFAULT_WIDTH = "360px";
     static DEFAULT_HEIGHT = "280px";
@@ -43,30 +43,34 @@ 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;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        side: String(),
-        width: String(),
-        height: String(),
-        closable: Boolean(),
-        closeOutSideClick: Boolean(),
-        components: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            side: String(),
+            width: String(),
+            height: String(),
+            closable: Boolean(),
+            closeOutSideClick: Boolean(),
+            components: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_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);
@@ -80,13 +84,13 @@ 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")),
-            onEscape: () => this.close()
+            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();
         if (options.components !== undefined) this.addToBody(...options.components);
@@ -121,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;
         }
@@ -185,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;
@@ -202,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;
     }
@@ -221,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);
     }
 
@@ -249,26 +261,39 @@ class Drawer {
     // Размер панели зависит от стороны: слева/справа — ширина, сверху/снизу — высота
     #applySize() {
         const vertical = this.#side === Drawer.SIDE.LEFT || this.#side === Drawer.SIDE.RIGHT;
-        this.#panel.style.width = vertical
-            ? (this.#width === undefined ? Drawer.DEFAULT_WIDTH : this.#width)
-            : "100%";
+        this.#panel.style.width = vertical ? (this.#width === undefined ? Drawer.DEFAULT_WIDTH : this.#width) : "100%";
         this.#panel.style.height = vertical
             ? "100%"
-            : (this.#height === undefined ? Drawer.DEFAULT_HEIGHT : this.#height);
+            : this.#height === undefined
+              ? Drawer.DEFAULT_HEIGHT
+              : this.#height;
     }
 
     // Клик по занавесу (но не по панели) закрывает панель, если это разрешено опцией
     #onDrawerClick = (event) => {
-        if (!this.#close_outside_click || event.target !== this.#drawer) return;
+        if (!this.#closeOutsideClick || event.target !== this.#drawer) return;
         this.close();
-    }
+    };
 
     // После проигрывания анимации имя снимается: иначе следующий показ не проиграется заново.
     // animationend всплывает, поэтому чужие анимации (спиннер внутри панели) пропускаем.
     #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
+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

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Зона приёма перетаскивания: файлы из системы, текст и ссылки.
@@ -44,30 +44,32 @@ class DropZone {
     #label = undefined;
     // Глубина входа: dragenter/dragleave приходят с дочерних узлов и гасили бы подсветку
     #depth = 0;
-    #on_drop = undefined;
-    #on_files = undefined;
+    #onDrop = undefined;
+    #onFiles = undefined;
     #files = [];
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        icon: undefined,
-        accept: [],
-        multiple: Boolean(),
-        disabled: Boolean(),
-        label: String(),
-        onDrop: undefined,
-        onFiles: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            icon: undefined,
+            accept: [],
+            multiple: Boolean(),
+            disabled: Boolean(),
+            label: String(),
+            onDrop: undefined,
+            onFiles: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_DropZone");
         DropZone.#counter += 1;
         this.#id = options.id === undefined ? `chui_drop_zone_${DropZone.#counter}` : options.id;
         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");
@@ -155,7 +157,12 @@ class DropZone {
             this.#icon.hidden = true;
             return this;
         }
-        const node = typeof icon === "string" ? new Icon(icon, "28px").set() : (typeof icon.set === "function" ? icon.set() : icon);
+        const node =
+            typeof icon === "string"
+                ? new Icon(icon, "28px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         node.setAttribute("aria-hidden", "true");
         this.#icon.appendChild(node);
         this.#icon.hidden = false;
@@ -225,10 +232,13 @@ class DropZone {
         const rejected = files.length - accepted.length;
         this.#files = this.#multiple ? accepted : accepted.slice(0, 1);
         this.#input.value = "";
-        this.#status.innerText = rejected === 0
-            ? (this.#files.length === 0 ? "" : I18n.t("forms.dropZoneAccepted", {count: this.#files.length}))
-            : I18n.t("forms.dropZoneRejected", {count: rejected});
-        if (this.#on_files !== undefined) this.#on_files(this.getFiles());
+        this.#status.innerText =
+            rejected === 0
+                ? this.#files.length === 0
+                    ? ""
+                    : I18n.t("forms.dropZoneAccepted", { count: this.#files.length })
+                : I18n.t("forms.dropZoneRejected", { count: rejected });
+        if (this.#onFiles !== undefined) this.#onFiles(this.getFiles());
         return rejected;
     }
 
@@ -240,12 +250,12 @@ class DropZone {
             paths: files.map((file) => file.path).filter((path) => path !== undefined),
             text: text === undefined || text === "" ? undefined : text,
             url: url === undefined || url === "" ? undefined : url,
-            dataTransfer: dataTransfer
+            dataTransfer: dataTransfer,
         };
     }
 
     #emit(payload = Object()) {
-        if (this.#on_drop !== undefined) this.#on_drop(payload);
+        if (this.#onDrop !== undefined) this.#onDrop(payload);
     }
 
     #setActive(active = Boolean()) {
@@ -309,4 +319,4 @@ class DropZone {
     };
 }
 
-exports.DropZone = DropZone
+exports.DropZone = DropZone;

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_empty_state/empty_state.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {Icon} = require('../chui_icons/icons');
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
 
 /**
  * Пустое состояние: заглушка для списка, таблицы или раздела без данных.
@@ -35,15 +35,17 @@ class EmptyState {
     #id = undefined;
     #compact = false;
 
-    constructor(options = {
-        id: String(),
-        icon: undefined,
-        title: String(),
-        description: String(),
-        actions: [],
-        compact: Boolean(),
-        label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            icon: undefined,
+            title: String(),
+            description: String(),
+            actions: [],
+            compact: Boolean(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_EmptyState");
         EmptyState.#counter += 1;
         this.#id = options.id === undefined ? `chui_empty_state_${EmptyState.#counter}` : options.id;
@@ -113,9 +115,12 @@ class EmptyState {
             this.#toggle(this.#icon, false);
             return this;
         }
-        const node = typeof icon === "string"
-            ? new Icon(icon, "32px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        const node =
+            typeof icon === "string"
+                ? new Icon(icon, "32px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         node.setAttribute("aria-hidden", "true");
         this.#icon.appendChild(node);
         this.#toggle(this.#icon, true);
@@ -158,4 +163,4 @@ class EmptyState {
     }
 }
 
-exports.EmptyState = EmptyState
+exports.EmptyState = EmptyState;