chuijs 4.0.2 → 4.0.4

package/framework/components/chui_actions_bar/styles.css

@@ -0,0 +1,139 @@
+/* ── ActionsBar — панель действий ───────────────────────────────
+   Что можно сделать с тем, о чём сейчас речь: подпись и ряд кнопок со значками.
+   Панель не полагает, о чём действия: в переписке она встаёт под шапкой разговора,
+   в карточке — над содержимым, и в обоих случаях разделяется волосяной линией снизу. */
+
+chui_actions_bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--control_padding_sm);
+    box-sizing: border-box;
+    width: -webkit-fill-available;
+    padding: var(--control_padding) var(--block_padding);
+    background: var(--element_background_2);
+    border-bottom: 1px solid var(--border_color);
+    font-size: var(--font_labels_size);
+    color: var(--text_color);
+}
+
+actions_bar_title {
+    display: block;
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}
+
+actions_bar_title[hidden] {
+    display: none;
+}
+
+/* Полоса действий внутри панели своей кромки не рисует: панель и полоса — одна поверхность,
+   и вложенная ступень поверхности здесь была бы лишней. Кнопки переносятся по строкам:
+   в узкой колонке длинный ряд не ломает раскладку */
+chui_actions_bar chui_toolbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+
+/* Столбец — вид меню: действия идут друг под другом во всю ширину, как пункты списка */
+chui_actions_bar[data-orientation="vertical"] chui_toolbar {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 2px;
+}
+
+/* Кнопка действия: значок и подпись, одна мера с остальными контролами семьи */
+.actions_bar_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    min-height: var(--control_height);
+    padding: var(--control_padding_sm) 10px;
+    border: none;
+    border-radius: var(--radius_sm);
+    background: transparent;
+    color: var(--text_color);
+    font-family: inherit;
+    font-size: var(--font_labels_size);
+    cursor: pointer;
+}
+
+.actions_bar_button:hover {
+    background: var(--element_background_hover);
+}
+
+/* Нажатие — заливка контрола, как у кнопок панели ввода */
+.actions_bar_button:active:not(:disabled) {
+    background: var(--element_background);
+}
+
+/* Включённый переключатель: «закреплено», «без звука» — состояние видно подложкой */
+.actions_bar_button[data-active="true"] {
+    background: var(--blue_prime_background_tint);
+    color: var(--blue_prime_background);
+}
+
+.actions_bar_button[data-danger="true"] {
+    color: var(--red_prime_background);
+}
+
+/* Пункт меню: подпись слева, счётчик у правого края */
+chui_actions_bar[data-orientation="vertical"] .actions_bar_button {
+    width: -webkit-fill-available;
+    justify-content: flex-start;
+    text-align: start;
+}
+
+chui_actions_bar[data-orientation="vertical"] .actions_bar_button_text {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.actions_bar_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+}
+
+.actions_bar_button_icon {
+    display: flex;
+    align-items: center;
+}
+
+/* Значка нет — узел не занимает зазор строки */
+.actions_bar_button_icon:empty {
+    display: none;
+}
+
+.actions_bar_button chui_icon {
+    color: inherit;
+}
+
+.actions_bar_button_text {
+    white-space: nowrap;
+}
+
+/* Счётчик действия: число показывает плашка, скринридеру оно попадает в имя */
+actions_bar_badge {
+    box-sizing: border-box;
+    min-width: 16px;
+    padding-inline: 4px;
+    border-radius: var(--radius_pill);
+    background: var(--red_prime_background);
+    color: var(--text_color_hover);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+}
+
+actions_bar_badge[hidden] {
+    display: none;
+}

package/framework/components/chui_affix/affix.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr, scrollParent} = require('../../modules/chui_functions');
+const { setStyles, optionOr, scrollParent } = require("../../modules/chui_functions");
 
 /**
  * Раздел с закреплённой панелью: панель остаётся на виду, пока её раздел на экране.
@@ -42,11 +42,16 @@ class Affix {
     #observer = undefined;
     #pending = undefined;
     #destroyed = false;
-    #on_change = undefined;
-
-    constructor(options = {
-        id: String(), offset: Number(), target: undefined, onChange: undefined
-    }) {
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            offset: Number(),
+            target: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Affix");
         Affix.#counter += 1;
         this.#id = optionOr(options.id, `chui_affix_${Affix.#counter}`);
@@ -58,7 +63,7 @@ class Affix {
         this.#root.appendChild(this.#body);
         this.#root.appendChild(this.#content);
         this.#target = options.target;
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         this.setOffset(options.offset === undefined ? 0 : options.offset);
         this.#observe();
     }
@@ -118,7 +123,7 @@ class Affix {
     }
 
     setOnChange(listener = undefined) {
-        this.#on_change = listener;
+        this.#onChange = listener;
         return this;
     }
 
@@ -204,7 +209,7 @@ class Affix {
             root: root,
             // Сторож уходит из области прокрутки ровно тогда, когда панель дошла до отступа
             rootMargin: `-${this.#offset}px 0px 0px 0px`,
-            threshold: 0
+            threshold: 0,
         });
         this.#observer.observe(this.#sentinel);
         // Наблюдатель отвечает асинхронно: до первого ответа закрепления нет,
@@ -223,8 +228,8 @@ class Affix {
         this.#fixed = fixed;
         this.#root.dataset.fixed = fixed ? "true" : "false";
         this.#root.classList.toggle("affix_fixed", fixed);
-        if (typeof this.#on_change === "function") this.#on_change(fixed, this);
+        if (typeof this.#onChange === "function") this.#onChange(fixed, this);
     }
 }
 
-exports.Affix = Affix
+exports.Affix = Affix;

package/framework/components/chui_affix/styles.css

@@ -23,6 +23,11 @@ affix_body {
     inset-block-start: var(--affix_offset);
     z-index: 5;
     box-sizing: border-box;
+    /* Закрепление включает радиус и тень сразу: если тень гаснет плавно, а радиус щёлкает,
+       переход читается рваным. Свой список потому и перечисляет оба свойства */
+    transition:
+        border-radius var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 affix_content {

package/framework/components/chui_alert/alert.js

@@ -1,8 +1,8 @@
-const {setStyles, markdownToHtml, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 // Плашка значка — общая с уведомлениями: одна фигура и одни цвета состояния
-const {setStatusPlate} = require("../chui_notification/status_plate");
+const { setStatusPlate } = require("../chui_notification/status_plate");
 
 /**
  * Сообщение в потоке страницы: подсказка, предупреждение или ошибка прямо в разметке, а не
@@ -34,7 +34,7 @@ class Alert {
         INFO: "alert_info",
         SUCCESS: "alert_success",
         WARNING: "alert_warning",
-        ERROR: "alert_error"
+        ERROR: "alert_error",
     };
     static #counter = 0;
 
@@ -48,14 +48,22 @@ class Alert {
     #id = undefined;
     #style = Alert.STYLE.INFO;
     #dismissed = false;
-    #custom_icon = false;
-
-    constructor(options = {
-        id: String(), title: String(), markdownTitle: String(),
-        text: String(), markdownText: String(),
-        style: String(), icon: undefined, dismissible: Boolean(),
-        actions: [], margin: Object()
-    }) {
+    #customIcon = false;
+
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            markdownTitle: String(),
+            text: String(),
+            markdownText: String(),
+            style: String(),
+            icon: undefined,
+            dismissible: Boolean(),
+            actions: [],
+            margin: Object(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Alert");
         Alert.#counter += 1;
         this.#id = options.id === undefined ? `chui_alert_${Alert.#counter}` : options.id;
@@ -119,14 +127,15 @@ class Alert {
         this.#root.setAttribute("aria-live", assertive ? "assertive" : "polite");
         // Цвет и глиф плашки выбирает общий помощник семьи — по ключу стиля (`alert_error` → `error`).
         // Своя иконка (`setIcon`) важнее статусного глифа и остаётся собой
-        if (this.#custom_icon === false) setStatusPlate(this.#icon, typeof style === "string" ? style.replace("alert_", "") : undefined);
+        if (this.#customIcon === false)
+            setStatusPlate(this.#icon, typeof style === "string" ? style.replace("alert_", "") : undefined);
         return this;
     }
 
     /** Своя иконка вместо значка состояния (экземпляр `Icon` или готовый узел); цвет статуса остаётся */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null) return this;
-        this.#custom_icon = true;
+        this.#customIcon = true;
         this.#icon.innerHTML = "";
         this.#icon.appendChild(icon instanceof Element ? icon : icon.set());
         return this;
@@ -216,7 +225,7 @@ class Alert {
     }
 
     /** Отступы сообщения: {top, bottom, left, right} — как у `Divider.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;
@@ -224,11 +233,17 @@ class Alert {
         return this;
     }
 
-    /** Убрать сообщение из документа */
+    /** Убрать сообщение из документа: уход идёт движением, узел убирается по концу кадра */
     dismiss() {
         if (this.#dismissed) return this;
         this.#dismissed = true;
-        this.#root.remove();
+        this.#root.classList.add("alert_leaving");
+        const remove = (event) => {
+            if (event.target !== this.#root) return;
+            this.#root.removeEventListener("animationend", remove);
+            this.#root.remove();
+        };
+        this.#root.addEventListener("animationend", remove);
         return this;
     }
 
@@ -238,4 +253,4 @@ class Alert {
     }
 }
 
-exports.Alert = Alert
+exports.Alert = Alert;

package/framework/components/chui_alert/styles.css

@@ -18,6 +18,13 @@ chui_alert {
     color: var(--text_color);
     font-size: var(--font_default_size);
     text-align: start;
+    /* Появление: сообщение встаёт на место — общий кадр из global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: сообщение гаснет и сходит вверх, узел убирается по концу кадра */
+.alert_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 alert_content {

package/framework/components/chui_avatar/avatar.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Аватар: изображение пользователя или его инициалы, при необходимости со значком состояния.
@@ -22,34 +22,34 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Avatar {
     static SHAPE = {
         CIRCLE: "circle",
-        SQUARE: "square"
+        SQUARE: "square",
     };
     static SIZE = {
         SMALL: "28px",
         DEFAULT: "40px",
         LARGE: "56px",
-        BIG: "72px"
+        BIG: "72px",
     };
     static STATUS = {
         ONLINE: "online",
         OFFLINE: "offline",
         BUSY: "busy",
-        AWAY: "away"
+        AWAY: "away",
     };
     static get STATUS_LABEL() {
         return {
             online: I18n.t("feedback.statusOnline"),
             offline: I18n.t("feedback.statusOffline"),
             busy: I18n.t("feedback.statusBusy"),
-            away: I18n.t("feedback.statusAway")
+            away: I18n.t("feedback.statusAway"),
         };
     }
     static #counter = 0;
 
     #root = document.createElement("chui_avatar");
     #image = document.createElement("img");
-    #initials_node = document.createElement("avatar_initials");
-    #status_node = document.createElement("avatar_status");
+    #initialsNode = document.createElement("avatar_initials");
+    #statusNode = document.createElement("avatar_status");
     #id = undefined;
     #name = undefined;
     #initials = undefined;
@@ -57,20 +57,22 @@ class Avatar {
     #status = undefined;
     #shape = Avatar.SHAPE.CIRCLE;
     #decorative = false;
-    #click_listeners = [];
+    #clickListeners = [];
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        initials: String(),
-        image: Object(),
-        size: String(),
-        shape: String(),
-        status: String(),
-        label: String(),
-        decorative: Boolean(),
-        clickListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            initials: String(),
+            image: Object(),
+            size: String(),
+            shape: String(),
+            status: String(),
+            label: String(),
+            decorative: Boolean(),
+            clickListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Avatar");
         Avatar.#counter += 1;
         this.#id = options.id === undefined ? `chui_avatar_${Avatar.#counter}` : options.id;
@@ -82,9 +84,9 @@ class Avatar {
         this.#image.setAttribute("alt", "");
         this.#image.setAttribute("aria-hidden", "true");
         this.#root.appendChild(this.#image);
-        this.#root.appendChild(this.#initials_node);
-        this.#root.appendChild(this.#status_node);
-        this.#status_node.setAttribute("aria-hidden", "true");
+        this.#root.appendChild(this.#initialsNode);
+        this.#root.appendChild(this.#statusNode);
+        this.#statusNode.setAttribute("aria-hidden", "true");
         this.setSize(options.size === undefined ? Avatar.SIZE.DEFAULT : options.size);
         this.setShape(options.shape === undefined ? Avatar.SHAPE.CIRCLE : options.shape);
         this.#renderInitials();
@@ -104,7 +106,7 @@ class Avatar {
     }
 
     getInitials() {
-        return this.#initials_node.innerText;
+        return this.#initialsNode.innerText;
     }
 
     getImageSource() {
@@ -178,9 +180,9 @@ class Avatar {
     /** Значок состояния; `undefined` убирает его и слово из доступного имени */
     setStatus(status = undefined) {
         this.#status = status;
-        this.#status_node.hidden = status === undefined;
-        if (status !== undefined) this.#status_node.dataset.status = status;
-        else this.#status_node.removeAttribute("data-status");
+        this.#statusNode.hidden = status === undefined;
+        if (status !== undefined) this.#statusNode.dataset.status = status;
+        else this.#statusNode.removeAttribute("data-status");
         this.#syncAria();
         return this;
     }
@@ -200,7 +202,7 @@ class Avatar {
     }
 
     addClickListener(listener = () => {}) {
-        this.#click_listeners.push(listener);
+        this.#clickListeners.push(listener);
         return this;
     }
 
@@ -242,7 +244,7 @@ class Avatar {
     }
 
     #renderInitials() {
-        this.#initials_node.innerText = this.#deriveInitials();
+        this.#initialsNode.innerText = this.#deriveInitials();
         this.#syncAria();
     }
 
@@ -255,16 +257,15 @@ class Avatar {
         }
         this.#root.removeAttribute("aria-hidden");
         this.#root.setAttribute("role", "img");
-        const base = this.#label === undefined
-            ? (this.#name === undefined ? this.#deriveInitials() : this.#name)
-            : this.#label;
+        const base =
+            this.#label === undefined ? (this.#name === undefined ? this.#deriveInitials() : this.#name) : this.#label;
         const status = this.#status === undefined ? undefined : Avatar.STATUS_LABEL[this.#status];
         this.#root.setAttribute("aria-label", status === undefined ? base : `${base}, ${status}`);
     }
 
     #onClick = (event) => {
-        for (const listener of [...this.#click_listeners]) listener(event);
+        for (const listener of [...this.#clickListeners]) listener(event);
     };
 }
 
-exports.Avatar = Avatar
+exports.Avatar = Avatar;

package/framework/components/chui_avatar/styles.css

@@ -20,7 +20,7 @@ chui_avatar[data-shape="circle"] {
 }
 
 chui_avatar[data-shape="square"] {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 chui_avatar img {

package/framework/components/chui_avatar_group/avatar_group.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {Avatar} = require('../chui_avatar/avatar');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
-const {makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /**
  * Группа аватаров: несколько участников в ряд с нахлёстом и счётчиком скрытых.
@@ -45,24 +45,26 @@ class AvatarGroup {
     #size = Avatar.SIZE.DEFAULT;
     #shape = undefined;
     #extra = undefined;
-    #extra_listener = undefined;
+    #extraListener = undefined;
     #label = undefined;
 
-    constructor(options = {
-        id: String(),
-        avatars: [],
-        max: Number(),
-        size: String(),
-        shape: String(),
-        label: String(),
-        extraClickListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            avatars: [],
+            max: Number(),
+            size: String(),
+            shape: String(),
+            label: String(),
+            extraClickListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_AvatarGroup");
         AvatarGroup.#counter += 1;
         this.#id = optionOr(options.id, `chui_avatar_group_${AvatarGroup.#counter}`);
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#extra_listener = options.extraClickListener;
+        this.#extraListener = options.extraClickListener;
         this.setSize(optionOr(options.size, Avatar.SIZE.DEFAULT));
         if (options.shape !== undefined) this.#shape = options.shape;
         if (options.max !== undefined) this.setMax(options.max);
@@ -187,13 +189,13 @@ class AvatarGroup {
     #push(item = undefined) {
         if (item === undefined || item === null) return;
         if (item instanceof Element) {
-            this.#entries.push({node: item, avatar: undefined});
+            this.#entries.push({ node: item, avatar: undefined });
             return;
         }
         const avatar = item instanceof Avatar ? item : new Avatar(item);
         if (this.#size !== undefined) avatar.setSize(this.#size);
         if (this.#shape !== undefined) avatar.setShape(this.#shape);
-        this.#entries.push({node: avatar.set(), avatar: avatar});
+        this.#entries.push({ node: avatar.set(), avatar: avatar });
     }
 
     #sync() {
@@ -213,24 +215,24 @@ class AvatarGroup {
         const extra = document.createElement("avatar_group_extra");
         extra.className = "avatar_group_extra";
         extra.innerText = `+${hidden}`;
-        if (this.#extra_listener === undefined) {
+        if (this.#extraListener === undefined) {
             extra.setAttribute("role", "img");
-            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupMore", {count: hidden}));
+            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupMore", { count: hidden }));
         } else {
             // Кнопка: Enter/Space посылает click, поэтому обработчик один
             extra.classList.add("avatar_group_extra_button");
-            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupShowAll", {count: hidden}));
+            extra.setAttribute("aria-label", I18n.t("feedback.avatarGroupShowAll", { count: hidden }));
             makeKeyboardButton(extra);
-            extra.addEventListener("click", (event) => this.#extra_listener(event, hidden, this));
+            extra.addEventListener("click", (event) => this.#extraListener(event, hidden, this));
         }
         this.#extra = extra;
         this.#root.appendChild(extra);
     }
 
     #syncAria() {
-        const name = optionOr(this.#label, I18n.t("feedback.avatarGroupCount", {count: this.#entries.length}));
+        const name = optionOr(this.#label, I18n.t("feedback.avatarGroupCount", { count: this.#entries.length }));
         this.#root.setAttribute("aria-label", name);
     }
 }
 
-exports.AvatarGroup = AvatarGroup
+exports.AvatarGroup = AvatarGroup;

package/framework/components/chui_avatar_group/styles.css

@@ -7,7 +7,7 @@ chui_avatar_group {
     flex-wrap: nowrap;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     --avatar_size: 40px;
     --avatar_group_ring: var(--element_background_2);
 }