chuijs 4.0.3 → 4.0.4

package/framework/components/chui_split_button/split_button.js

@@ -50,7 +50,7 @@ class SplitButton {
     #title = "";
     #icon = undefined;
     #disabled = false;
-    #is_open = false;
+    #isOpen = false;
     #destroyed = false;
 
     constructor(
@@ -74,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`;
@@ -127,7 +127,7 @@ class SplitButton {
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     getDisabled() {
@@ -197,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);
@@ -212,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);
@@ -223,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;
@@ -318,12 +336,12 @@ 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();
     };
 

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;
@@ -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

@@ -48,9 +48,9 @@ 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(
@@ -79,9 +79,9 @@ class Splitter {
         this.#direction = options.direction === undefined ? Splitter.DIRECTION.HORIZONTAL : options.direction;
         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);
@@ -202,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);
@@ -320,7 +320,7 @@ class Splitter {
         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;
@@ -353,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();
     }
 

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;
 }

package/framework/components/chui_statistic/statistic.js

@@ -62,16 +62,16 @@ class Statistic {
     #root = document.createElement("chui_statistic");
     #head = document.createElement("statistic_head");
     #icon = document.createElement("statistic_icon");
-    #icon_node = undefined;
+    #iconNode = undefined;
     #title = document.createElement("statistic_title");
-    #value_node = document.createElement("statistic_value");
-    #trend_node = document.createElement("statistic_trend");
-    #trend_icon = document.createElement("statistic_trend_icon");
-    #trend_value = document.createElement("statistic_trend_value");
-    #trend_label = document.createElement("statistic_trend_label");
+    #valueNode = document.createElement("statistic_value");
+    #trendNode = document.createElement("statistic_trend");
+    #trendIcon = document.createElement("statistic_trend_icon");
+    #trendValue = document.createElement("statistic_trend_value");
+    #trendLabel = document.createElement("statistic_trend_label");
     #status = document.createElement("statistic_status");
     #id = undefined;
-    #title_value = undefined;
+    #titleValue = undefined;
     #label = undefined;
     #value = 0;
     #displayed = 0;
@@ -83,7 +83,7 @@ class Statistic {
     #animated = false;
     #duration = Statistic.#DEFAULT_DURATION;
     #style = Statistic.STYLE.DEFAULT;
-    #animation_id = undefined;
+    #animationId = undefined;
 
     constructor(
         options = {
@@ -115,15 +115,15 @@ class Statistic {
         this.#icon.setAttribute("aria-hidden", "true");
         // Плашка значка создаётся всегда, но без опции icon её не видно
         this.#icon.hidden = true;
-        this.#trend_icon.setAttribute("aria-hidden", "true");
+        this.#trendIcon.setAttribute("aria-hidden", "true");
         this.#head.appendChild(this.#icon);
         this.#head.appendChild(this.#title);
         this.#root.appendChild(this.#head);
-        this.#root.appendChild(this.#value_node);
-        this.#trend_node.appendChild(this.#trend_icon);
-        this.#trend_node.appendChild(this.#trend_value);
-        this.#trend_node.appendChild(this.#trend_label);
-        this.#root.appendChild(this.#trend_node);
+        this.#root.appendChild(this.#valueNode);
+        this.#trendNode.appendChild(this.#trendIcon);
+        this.#trendNode.appendChild(this.#trendValue);
+        this.#trendNode.appendChild(this.#trendLabel);
+        this.#root.appendChild(this.#trendNode);
         this.#root.appendChild(this.#status);
         this.setStyle(optionOr(options.style, Statistic.STYLE.DEFAULT));
         this.setSize(optionOr(options.size, Statistic.SIZE.DEFAULT));
@@ -150,7 +150,7 @@ class Statistic {
 
     /** Подпись такая, какой её задали: вразрядку её рисует CSS, а не значение */
     getTitle() {
-        return this.#title_value;
+        return this.#titleValue;
     }
 
     /** Значение (цель анимации) */
@@ -165,7 +165,7 @@ class Statistic {
 
     /** Строка значения вместе с префиксом и суффиксом — то, что видно на экране */
     getDisplayValue() {
-        return this.#value_node.innerText;
+        return this.#valueNode.innerText;
     }
 
     getPrefix() {
@@ -209,7 +209,7 @@ class Statistic {
     }
 
     isAnimating() {
-        return this.#animation_id !== undefined;
+        return this.#animationId !== undefined;
     }
 
     // SET
@@ -221,9 +221,9 @@ class Statistic {
 
     /** Подпись показателя; пустая убирает её */
     setTitle(text = String()) {
-        this.#title_value = String(text);
-        this.#title.innerText = this.#title_value;
-        this.#title.hidden = this.#title_value === "";
+        this.#titleValue = String(text);
+        this.#title.innerText = this.#titleValue;
+        this.#title.hidden = this.#titleValue === "";
         this.#syncAria();
         return this;
     }
@@ -319,19 +319,19 @@ class Statistic {
     /** Значок показателя (имя из `Icons`, `Icon`, компонент или узел); `undefined` убирает его */
     setIcon(icon = undefined) {
         if (icon === undefined || icon === null || icon === "") {
-            this.#icon_node = undefined;
+            this.#iconNode = undefined;
             this.#icon.innerHTML = "";
             this.#icon.hidden = true;
             return this;
         }
-        this.#icon_node =
+        this.#iconNode =
             typeof icon === "string"
                 ? new Icon(icon, "16px").set()
                 : typeof icon.set === "function"
                   ? icon.set()
                   : icon;
         this.#icon.innerHTML = "";
-        this.#icon.appendChild(this.#icon_node);
+        this.#icon.appendChild(this.#iconNode);
         this.#icon.hidden = false;
         return this;
     }
@@ -406,9 +406,9 @@ class Statistic {
     }
 
     #cancel() {
-        if (this.#animation_id === undefined) return;
-        cancelAnimationFrame(this.#animation_id);
-        this.#animation_id = undefined;
+        if (this.#animationId === undefined) return;
+        cancelAnimationFrame(this.#animationId);
+        this.#animationId = undefined;
     }
 
     /** Ease-out: счётчик быстро разгоняется и мягко доезжает до цели */
@@ -420,14 +420,14 @@ class Statistic {
             const eased = 1 - Math.pow(1 - progress, 3);
             this.#applyValue(from + (target - from) * eased);
             if (progress < 1) {
-                this.#animation_id = requestAnimationFrame(step);
+                this.#animationId = requestAnimationFrame(step);
                 return;
             }
-            this.#animation_id = undefined;
+            this.#animationId = undefined;
             this.#applyValue(target);
             if (silent !== true) this.#announce();
         };
-        this.#animation_id = requestAnimationFrame(step);
+        this.#animationId = requestAnimationFrame(step);
     }
 
     #applyValue(value = Number()) {
@@ -436,19 +436,19 @@ class Statistic {
     }
 
     #renderValue() {
-        this.#value_node.innerText = `${this.#prefix}${this.#formatNumber(this.#displayed)}${this.#suffix}`;
+        this.#valueNode.innerText = `${this.#prefix}${this.#formatNumber(this.#displayed)}${this.#suffix}`;
     }
 
     #syncTrend() {
         const trend = this.#trend;
-        this.#trend_node.hidden = trend === undefined;
+        this.#trendNode.hidden = trend === undefined;
         if (trend === undefined) {
-            this.#trend_node.removeAttribute("aria-label");
-            this.#trend_value.innerText = "";
-            this.#trend_label.innerText = "";
-            this.#trend_icon.innerHTML = "";
-            this.#trend_node.removeAttribute("data-direction");
-            this.#trend_node.removeAttribute("data-style");
+            this.#trendNode.removeAttribute("aria-label");
+            this.#trendValue.innerText = "";
+            this.#trendLabel.innerText = "";
+            this.#trendIcon.innerHTML = "";
+            this.#trendNode.removeAttribute("data-direction");
+            this.#trendNode.removeAttribute("data-style");
             return;
         }
         const direction = trend.direction;
@@ -457,16 +457,16 @@ class Statistic {
             trend.text === undefined
                 ? `${sign}${this.#formatNumber(trend.value === undefined ? 0 : trend.value, trend.precision)}${trend.suffix}`
                 : trend.text;
-        this.#trend_value.innerText = number;
-        this.#trend_label.innerText = trend.label;
-        this.#trend_label.hidden = trend.label === "";
-        this.#trend_icon.innerHTML = new Icon(
+        this.#trendValue.innerText = number;
+        this.#trendLabel.innerText = trend.label;
+        this.#trendLabel.hidden = trend.label === "";
+        this.#trendIcon.innerHTML = new Icon(
             TREND_ICONS[direction] === undefined ? TREND_ICONS.flat : TREND_ICONS[direction],
             "14px"
         ).getHTML();
-        this.#trend_node.dataset.direction = direction;
-        if (trend.style === undefined) this.#trend_node.removeAttribute("data-style");
-        else this.#trend_node.dataset.style = trend.style;
+        this.#trendNode.dataset.direction = direction;
+        if (trend.style === undefined) this.#trendNode.removeAttribute("data-style");
+        else this.#trendNode.dataset.style = trend.style;
         // Направление читается словами: стрелка-глиф скрыта от скринридера
         const phrase =
             direction === Statistic.TREND.UP
@@ -474,11 +474,11 @@ class Statistic {
                 : direction === Statistic.TREND.DOWN
                   ? I18n.t("data.statisticTrendDown", { value: number })
                   : I18n.t("data.statisticTrendFlat");
-        this.#trend_node.setAttribute("aria-label", trend.label === "" ? phrase : `${phrase} ${trend.label}`);
+        this.#trendNode.setAttribute("aria-label", trend.label === "" ? phrase : `${phrase} ${trend.label}`);
     }
 
     #announce() {
-        const title = this.#title_value === undefined ? "" : this.#title_value;
+        const title = this.#titleValue === undefined ? "" : this.#titleValue;
         this.#status.innerText =
             title === ""
                 ? this.getDisplayValue()
@@ -486,7 +486,7 @@ class Statistic {
     }
 
     #syncAria() {
-        const name = optionOr(this.#label, optionOr(this.#title_value, I18n.t("data.statistic")));
+        const name = optionOr(this.#label, optionOr(this.#titleValue, I18n.t("data.statistic")));
         this.#root.setAttribute("aria-label", name);
     }
 }

package/framework/components/chui_status_bar/styles.css

@@ -6,13 +6,13 @@ chui_status_bar {
     gap: 10px;
     box-sizing: border-box;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     padding: 4px 10px;
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 status_bar_section {