chuijs 4.0.2 → 4.0.4

package/framework/components/chui_split_button/split_button.js

@@ -1,7 +1,7 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {MenuKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { MenuKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 const SPLIT_MENU_GAP = 4;
 const SPLIT_MENU_EDGE = 8;
@@ -50,19 +50,21 @@ class SplitButton {
     #title = "";
     #icon = undefined;
     #disabled = false;
-    #is_open = false;
+    #isOpen = false;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        icon: String(),
-        reverse: Boolean(),
-        disabled: Boolean(),
-        label: String(),
-        clickEvent: undefined,
-        items: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            icon: String(),
+            reverse: Boolean(),
+            disabled: Boolean(),
+            label: String(),
+            clickEvent: undefined,
+            items: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_SplitButton");
         SplitButton.#counter += 1;
         this.#id = options.id === undefined ? `chui_split_button_${SplitButton.#counter}` : options.id;
@@ -72,10 +74,10 @@ class SplitButton {
         this.#caret.type = "button";
         this.#caret.className = "split_button_caret";
         this.#caret.setAttribute("aria-label", I18n.t("navigation.moreActions"));
-        const caret_glyph = new Icon(Icons.NAVIGATION.EXPAND_MORE, SplitButton.ICON_SIZE).set();
+        const caretGlyph = new Icon(Icons.NAVIGATION.EXPAND_MORE, SplitButton.ICON_SIZE).set();
         // Каретка — украшение: имя даёт aria-label кнопки
-        caret_glyph.setAttribute("aria-hidden", "true");
-        this.#caret.appendChild(caret_glyph);
+        caretGlyph.setAttribute("aria-hidden", "true");
+        this.#caret.appendChild(caretGlyph);
         this.#caret.setAttribute("aria-haspopup", "menu");
         this.#caret.setAttribute("aria-controls", `${this.#id}_menu`);
         this.#menu.id = `${this.#id}_menu`;
@@ -91,7 +93,7 @@ class SplitButton {
         this.#keyboard = new MenuKeyboard(this.#menu, {
             itemSelector: "button",
             onEscape: () => this.close(),
-            trigger: this.#caret
+            trigger: this.#caret,
         });
         this.#keyboard.setExpanded(false);
         this.#caret.addEventListener("click", this.#onCaretClick);
@@ -125,7 +127,7 @@ class SplitButton {
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     getDisabled() {
@@ -183,7 +185,9 @@ class SplitButton {
     }
 
     /** Пункт меню: заголовок, значок, горячая клавиша и обработчик */
-    static Item(options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: undefined }) {
+    static Item(
+        options = { title: String(), icon: String(), shortcut: String(), disabled: Boolean(), clickEvent: undefined }
+    ) {
         return Object.assign({ type: "item" }, options);
     }
 
@@ -193,11 +197,12 @@ class SplitButton {
 
     // ОТКРЫТИЕ МЕНЮ
     open() {
-        if (this.#destroyed || this.#is_open || this.#disabled) return this;
-        this.#is_open = true;
+        if (this.#destroyed || this.#isOpen || this.#disabled) return this;
+        this.#isOpen = true;
         // Показ меню — классом: базовое `display: none` и вид задаёт CSS
         this.#menu.classList.add("split_button_menu_open");
         this.#positionMenu();
+        this.#menu.classList.remove("split_button_menu_leaving");
         this.#caret.classList.add("split_button_caret_active");
         window.addEventListener("click", this.#onWindowClick);
         window.addEventListener("resize", this.#onWindowChange);
@@ -208,9 +213,9 @@ class SplitButton {
     }
 
     close() {
-        if (!this.#is_open) return this;
-        this.#is_open = false;
-        this.#menu.classList.remove("split_button_menu_open");
+        if (!this.#isOpen) return this;
+        this.#isOpen = false;
+        this.#hideMenu();
         this.#caret.classList.remove("split_button_caret_active");
         window.removeEventListener("click", this.#onWindowClick);
         window.removeEventListener("resize", this.#onWindowChange);
@@ -219,6 +224,23 @@ class SplitButton {
         return this;
     }
 
+    /**
+     * Уход меню идёт движением: класс показа снимается по концу кадра, поэтому меню не
+     * пропадает рывком. Открытие за время ухода отменяет снятие — иначе меню погасло бы
+     * уже открытым.
+     */
+    #hideMenu() {
+        this.#menu.classList.add("split_button_menu_leaving");
+        const done = (event) => {
+            if (event.target !== this.#menu) return;
+            this.#menu.removeEventListener("animationend", done);
+            if (this.#menu.classList.contains("split_button_menu_leaving") === false) return;
+            this.#menu.classList.remove("split_button_menu_leaving");
+            this.#menu.classList.remove("split_button_menu_open");
+        };
+        this.#menu.addEventListener("animationend", done);
+    }
+
     destroy() {
         if (this.#destroyed) return this;
         this.#destroyed = true;
@@ -301,7 +323,8 @@ class SplitButton {
     #positionMenu() {
         const button = this.#caret.getBoundingClientRect();
         let left = button.right - this.#menu.offsetWidth;
-        if (left + this.#menu.offsetWidth > window.innerWidth - SPLIT_MENU_EDGE) left = window.innerWidth - SPLIT_MENU_EDGE - this.#menu.offsetWidth;
+        if (left + this.#menu.offsetWidth > window.innerWidth - SPLIT_MENU_EDGE)
+            left = window.innerWidth - SPLIT_MENU_EDGE - this.#menu.offsetWidth;
         if (left < SPLIT_MENU_EDGE) left = SPLIT_MENU_EDGE;
         this.#menu.style.left = `${Math.round(left)}px`;
         this.#menu.style.top = `${Math.round(button.bottom + SPLIT_MENU_GAP)}px`;
@@ -313,16 +336,16 @@ class SplitButton {
     };
 
     #onCaretClick = () => {
-        if (this.#is_open) this.close();
+        if (this.#isOpen) this.close();
         else this.open();
     };
 
     #onWindowChange = () => {
-        if (!this.#is_open) return;
+        if (!this.#isOpen) return;
         this.#positionMenu();
     };
 
     static ICON_SIZE = "16px";
 }
 
-exports.SplitButton = SplitButton
+exports.SplitButton = SplitButton;

package/framework/components/chui_split_button/styles.css

@@ -6,9 +6,9 @@ chui_split_button {
     align-items: stretch;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border: 1px solid var(--button_border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     overflow: hidden;
     background: var(--button_background);
     color: var(--text_color);
@@ -25,7 +25,7 @@ chui_split_button {
     /* Компактный шаг и зазор — как у Button: 5px по вертикали дают
        те же 29px высоты контрола */
     gap: var(--control_padding);
-    padding: var(--main_padding_sm);
+    padding: var(--block_padding_sm);
     border: none;
     background: transparent;
     color: inherit;
@@ -91,7 +91,7 @@ chui_split_button:not(.split_button_disabled):hover {
    правилом, а половинка кнопки, сжимающаяся отдельно, читалась бы поломкой */
 chui_split_button:not(.split_button_disabled):has(.split_button_main:active, .split_button_caret:active) {
     border-color: var(--button_border_color_hover);
-    transform: scale(.97);
+    transform: scale(0.97);
 }
 
 /* Нажатие — акцент, как у Button: обе половины отвечают одинаково */
@@ -143,7 +143,7 @@ chui_split_menu {
     padding: 6px;
     gap: 2px;
     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);
@@ -152,9 +152,25 @@ chui_split_menu {
 }
 
 /* Показ меню: базовое состояние — `display: none` выше. Класс ставит компонент при
-   открытии (прежде показ задавал JS инлайном, дублируя это правило) */
+   открытии (прежде показ задавал JS инлайном, дублируя это правило), а появление ведёт
+   общий кадр панели: прежде меню возникало готовым, кадр был только у ухода */
 chui_split_menu.split_button_menu_open {
     display: flex;
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
+/* Уход меню: оно гаснет и сходит вверх, а класс показа снимается по концу кадра.
+   Оба класса названы намеренно: показ задан селектором с элементом, и короткое
+   `.split_button_menu_leaving` проиграло бы ему по специфичности — кадр ухода не
+   проиграл бы вовсе, `animationend` не пришёл бы, и меню осталось бы открытым
+   навсегда (`close()` уже снял `#is_open`, поэтому каретка читалась бы закрытой) */
+/* Уход меню: оно гаснет и сходит вверх, а класс показа снимается по концу кадра.
+   Оба класса названы намеренно: показ задан селектором с элементом, и короткое
+   `.split_button_menu_leaving` проиграло бы ему по специфичности — кадр ухода не
+   проиграл бы вовсе, `animationend` не пришёл бы, и меню осталось бы открытым
+   навсегда (сторож — `test/chui_motion.test.js`) */
+chui_split_menu.split_button_menu_open.split_button_menu_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
 }
 
 .split_menu_item {

package/framework/components/chui_splitter/splitter.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Разделитель панелей: несколько областей и перетаскиваемые границы между ними.
@@ -31,7 +31,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Splitter {
     static DIRECTION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static DEFAULT_SIZE = 6;
     static DEFAULT_STEP = 2;
@@ -48,26 +48,28 @@ class Splitter {
     #disabled = false;
     #label = I18n.t("a11y.resizePanel");
     #step = Splitter.DEFAULT_STEP;
-    #on_resize = undefined;
-    #on_resize_end = undefined;
-    #on_reset = undefined;
+    #onResize = undefined;
+    #onResizeEnd = undefined;
+    #onReset = undefined;
     #dragging = undefined;
 
-    constructor(options = {
-        id: String(),
-        direction: String(),
-        sizes: [],
-        min: undefined,
-        panes: [],
-        width: String(),
-        height: String(),
-        disabled: Boolean(),
-        label: String(),
-        step: Number(),
-        onResize: undefined,
-        onResizeEnd: undefined,
-        onReset: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            direction: String(),
+            sizes: [],
+            min: undefined,
+            panes: [],
+            width: String(),
+            height: String(),
+            disabled: Boolean(),
+            label: String(),
+            step: Number(),
+            onResize: undefined,
+            onResizeEnd: undefined,
+            onReset: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Splitter");
         Splitter.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе вызов без аргументов
@@ -75,11 +77,11 @@ class Splitter {
         this.#id = optionOr(options.id, `chui_splitter_${Splitter.#counter}`);
         this.#root.id = this.#id;
         this.#direction = options.direction === undefined ? Splitter.DIRECTION.HORIZONTAL : options.direction;
-        this.#min = options.min === undefined ? [] : (Array.isArray(options.min) ? options.min : [options.min]);
+        this.#min = options.min === undefined ? [] : Array.isArray(options.min) ? options.min : [options.min];
         this.#step = options.step === undefined ? Splitter.DEFAULT_STEP : options.step;
-        this.#on_resize = options.onResize;
-        this.#on_resize_end = options.onResizeEnd;
-        this.#on_reset = options.onReset;
+        this.#onResize = options.onResize;
+        this.#onResizeEnd = options.onResizeEnd;
+        this.#onReset = options.onReset;
         this.#root.dataset.direction = this.#direction;
         this.setLabel(optionOr(options.label, this.#label));
         if (options.width !== undefined) this.setWidth(options.width);
@@ -200,7 +202,7 @@ class Splitter {
         const values = sizes.map((size) => Number(size)).map((size) => (Number.isFinite(size) && size > 0 ? size : 1));
         const count = this.#panes.length;
         if (count === 0) return this;
-        let next = values.slice(0, count);
+        const next = values.slice(0, count);
         while (next.length < count) next.push(1);
         const sum = next.reduce((total, size) => total + size, 0);
         this.#sizes = sum === 0 ? this.#equalSizes() : next.map((size) => (size / sum) * 100);
@@ -287,13 +289,16 @@ class Splitter {
             const side = this.#isHorizontal()
                 ? [I18n.t("a11y.sideLeft"), I18n.t("a11y.sideRight")]
                 : [I18n.t("a11y.sideTop"), I18n.t("a11y.sideBottom")];
-            handle.setAttribute("aria-valuetext", I18n.t("a11y.splitterValue", {
-                first: side[0],
-                firstPercent: Math.round(first),
-                second: side[1].toLowerCase(),
-                secondPercent: Math.round(second),
-                total: Math.round(total)
-            }));
+            handle.setAttribute(
+                "aria-valuetext",
+                I18n.t("a11y.splitterValue", {
+                    first: side[0],
+                    firstPercent: Math.round(first),
+                    second: side[1].toLowerCase(),
+                    secondPercent: Math.round(second),
+                    total: Math.round(total),
+                })
+            );
         });
     }
 
@@ -307,13 +312,15 @@ class Splitter {
         const position = clientPosition - start;
         const before = this.#panes[index];
         const after = this.#panes[index + 1];
-        const beforeStart = this.#isHorizontal() ? before.getBoundingClientRect().left - start : before.getBoundingClientRect().top - start;
+        const beforeStart = this.#isHorizontal()
+            ? before.getBoundingClientRect().left - start
+            : before.getBoundingClientRect().top - start;
         const pairSize = this.#paneSize(before) + this.#paneSize(after);
         if (pairSize === 0) return undefined;
         const pairShare = this.#sizes[index] + this.#sizes[index + 1];
         const minBefore = Math.min(this.getMin(index), pairSize);
         const minAfter = Math.min(this.getMin(index + 1), pairSize - minBefore);
-        let beforePx = Math.max(minBefore, Math.min(position - beforeStart, pairSize - minAfter));
+        const beforePx = Math.max(minBefore, Math.min(position - beforeStart, pairSize - minAfter));
         const beforeShare = (beforePx / pairSize) * pairShare;
         const next = [...this.#sizes];
         next[index] = beforeShare;
@@ -346,15 +353,15 @@ class Splitter {
     }
 
     #emitResize() {
-        if (this.#on_resize !== undefined) this.#on_resize(this.getSizes());
+        if (this.#onResize !== undefined) this.#onResize(this.getSizes());
     }
 
     #emitResizeEnd() {
-        if (this.#on_resize_end !== undefined) this.#on_resize_end(this.getSizes());
+        if (this.#onResizeEnd !== undefined) this.#onResizeEnd(this.getSizes());
     }
 
     #emitReset() {
-        if (this.#on_reset !== undefined) this.#on_reset(this.getSizes());
+        if (this.#onReset !== undefined) this.#onReset(this.getSizes());
         this.#emitResizeEnd();
     }
 
@@ -428,4 +435,4 @@ class Splitter {
     };
 }
 
-exports.Splitter = Splitter
+exports.Splitter = Splitter;

package/framework/components/chui_splitter/styles.css

@@ -3,9 +3,9 @@ chui_splitter {
     display: grid;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow: hidden;
 }