chuijs 4.0.3 → 4.0.4

package/framework/components/chui_org_chart/org_chart.js

@@ -74,17 +74,17 @@ class OrgChart {
     #roots = [];
     #rows = [];
     #slots = 1;
-    #node_width = OrgChart.DEFAULT_NODE_WIDTH;
-    #node_height = OrgChart.DEFAULT_NODE_HEIGHT;
-    #gap_x = OrgChart.DEFAULT_GAP_X;
-    #gap_y = OrgChart.DEFAULT_GAP_Y;
+    #nodeWidth = OrgChart.DEFAULT_NODE_WIDTH;
+    #nodeHeight = OrgChart.DEFAULT_NODE_HEIGHT;
+    #gapX = OrgChart.DEFAULT_GAP_X;
+    #gapY = OrgChart.DEFAULT_GAP_Y;
     #collapsible = true;
-    #empty_text = undefined;
+    #emptyText = undefined;
     #label = undefined;
     #selected = undefined;
     #expanded = new Map();
-    #on_node_click = undefined;
-    #click_listeners = [];
+    #onNodeClick = undefined;
+    #clickListeners = [];
 
     constructor(
         options = {
@@ -107,19 +107,19 @@ class OrgChart {
         this.#id = options.id === undefined ? `chui_org_chart_${OrgChart.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#label = options.label;
-        this.#empty_text = options.emptyText;
-        this.#on_node_click = options.onNodeClick;
+        this.#emptyText = options.emptyText;
+        this.#onNodeClick = options.onNodeClick;
         if (options.nodeWidth !== undefined)
-            this.#node_width = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
+            this.#nodeWidth = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
         if (options.nodeHeight !== undefined)
-            this.#node_height = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
-        if (options.gapX !== undefined) this.#gap_x = Number(options.gapX);
-        if (options.gapY !== undefined) this.#gap_y = Number(options.gapY);
+            this.#nodeHeight = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
+        if (options.gapX !== undefined) this.#gapX = Number(options.gapX);
+        if (options.gapY !== undefined) this.#gapY = Number(options.gapY);
         if (options.collapsible !== undefined) this.#collapsible = options.collapsible !== false;
         // Размер карточки читают и полотно, и поле прокрутки (отступ по краям), поэтому
         // переменные живут на корне, а не на полотне
-        this.#root.style.setProperty("--org_chart_node_width", `${this.#node_width}px`);
-        this.#root.style.setProperty("--org_chart_node_height", `${this.#node_height}px`);
+        this.#root.style.setProperty("--org_chart_node_width", `${this.#nodeWidth}px`);
+        this.#root.style.setProperty("--org_chart_node_height", `${this.#nodeHeight}px`);
         if (options.height !== undefined) this.#root.style.setProperty("--org_chart_height", options.height);
 
         this.#title.id = `${this.#id}_title`;
@@ -132,7 +132,7 @@ class OrgChart {
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#empty.innerText = this.#empty_text === undefined ? I18n.t("data.orgChartEmpty") : this.#empty_text;
+        this.#empty.innerText = this.#emptyText === undefined ? I18n.t("data.orgChartEmpty") : this.#emptyText;
 
         this.#canvas.appendChild(this.#links);
         this.#viewport.appendChild(this.#canvas);
@@ -198,7 +198,7 @@ class OrgChart {
         return this;
     }
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
@@ -253,7 +253,7 @@ class OrgChart {
         return this;
     }
     addNodeClickListener(listener = () => {}) {
-        this.#click_listeners.push(listener);
+        this.#clickListeners.push(listener);
         return this;
     }
     set() {
@@ -368,10 +368,10 @@ class OrgChart {
         this.#rows = projected.rows;
         this.#slots = projected.slots;
         this.#nodes().forEach((node) => node.remove());
-        const step = this.#node_height + this.#gap_y;
+        const step = this.#nodeHeight + this.#gapY;
         const levels = this.#rows.reduce((max, row) => Math.max(max, row.level + 1), 0);
-        const height = Math.max(this.#node_height, levels * step - this.#gap_y);
-        const width = Math.max(this.#slots * (this.#node_width + this.#gap_x), 1);
+        const height = Math.max(this.#nodeHeight, levels * step - this.#gapY);
+        const width = Math.max(this.#slots * (this.#nodeWidth + this.#gapX), 1);
         this.#canvas.style.width = `${width}px`;
         this.#canvas.style.height = `${height}px`;
         // Система координат связей: 0…100 по ширине полотна и пиксели по высоте —
@@ -401,7 +401,7 @@ class OrgChart {
         return undefined;
     }
     /** Координаты узла в той же системе, что у связей: `x` — процент, `y` — пиксели */
-    #positionOf(row, step = this.#node_height + this.#gap_y) {
+    #positionOf(row, step = this.#nodeHeight + this.#gapY) {
         return { x: (row.slot / this.#slots) * 100, y: row.level * step };
     }
     #renderNode(row, step = Number()) {
@@ -437,9 +437,9 @@ class OrgChart {
         title.title = title.innerText;
         content.appendChild(title);
         if (row.node.position !== undefined) {
-            const position_text = document.createElement("org_chart_node_position");
-            position_text.innerText = String(row.node.position);
-            content.appendChild(position_text);
+            const positionText = document.createElement("org_chart_node_position");
+            positionText.innerText = String(row.node.position);
+            content.appendChild(positionText);
         }
         if (row.node.description !== undefined) {
             const description = document.createElement("org_chart_node_description");
@@ -478,8 +478,8 @@ class OrgChart {
             const from = this.#positionOf(row.parent, step);
             const to = this.#positionOf(row, step);
             const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            const middle = (from.y + this.#node_height + to.y) / 2;
-            path.setAttribute("d", `M ${from.x} ${from.y + this.#node_height} V ${middle} H ${to.x} V ${to.y}`);
+            const middle = (from.y + this.#nodeHeight + to.y) / 2;
+            path.setAttribute("d", `M ${from.x} ${from.y + this.#nodeHeight} V ${middle} H ${to.x} V ${to.y}`);
             path.setAttribute("class", "org_chart_link");
             path.setAttribute("vector-effect", "non-scaling-stroke");
             this.#links.appendChild(path);
@@ -511,8 +511,8 @@ class OrgChart {
     }
     #emit(row) {
         if (row === undefined) return;
-        for (const listener of [...this.#click_listeners]) listener(row.node);
-        if (this.#on_node_click !== undefined) this.#on_node_click(row.node);
+        for (const listener of [...this.#clickListeners]) listener(row.node);
+        if (this.#onNodeClick !== undefined) this.#onNodeClick(row.node);
     }
     #announce(text = String()) {
         this.#status.innerText = "";

package/framework/components/chui_org_chart/styles.css

@@ -11,7 +11,7 @@ chui_org_chart {
     width: -webkit-fill-available;
     max-width: 100%;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     text-align: start;
@@ -184,7 +184,7 @@ org_chart_node chui_avatar {
 
 org_chart_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--text_color_disabled);
     text-align: center;
 }

package/framework/components/chui_pagination/pagination.js

@@ -38,7 +38,7 @@ class Pagination {
     #edges = 1;
     #jump = true;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -67,7 +67,7 @@ class Pagination {
         if (options.jump !== undefined) this.#jump = options.jump === true;
         this.#pages = Pagination.#count(options.pages, 1);
         this.#page = Pagination.#clamp(Pagination.#count(options.page, 1), this.#pages);
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         this.#root.appendChild(this.#list);
         this.#render();
@@ -165,7 +165,7 @@ class Pagination {
     // === ВНУТРЕННЕЕ ===
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#page, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#page, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#page, this);
     }
 
     // Номера страниц с пропусками: `{gap: true}` — место для «…»

package/framework/components/chui_pagination/styles.css

@@ -3,7 +3,7 @@ chui_pagination {
     display: inline-flex;
     width: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }

package/framework/components/chui_paragraph/styles.css

@@ -1,11 +1,11 @@
 p {
     height: max-content;
     /* Ширина абзаца — по контейнеру: с max-content длинный текст не переносился,
-       а вместе с margin: var(--margin) абзац ещё и смещался вправо за край родителя */
+       а вместе с margin: var(--block_margin) абзац ещё и смещался вправо за край родителя */
     width: -webkit-fill-available;
     /* Слово шире строки (ссылка, длинное имя) разрывается, а не вылезает за абзац */
     overflow-wrap: break-word;
     color: var(--text_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
 }

package/framework/components/chui_popover/popover.js

@@ -1,4 +1,5 @@
 const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Animation } = require("../../modules/chui_animations/animations");
 
 /**
  * Поповер: панель у триггера с произвольным содержимым.
@@ -48,10 +49,10 @@ class Popover {
     #id = undefined;
     #trigger = undefined;
     #placement = Popover.PLACEMENT.BOTTOM;
-    #is_open = false;
-    #on_open = undefined;
-    #on_close = undefined;
-    #close_on_outside = true;
+    #isOpen = false;
+    #onOpen = undefined;
+    #onClose = undefined;
+    #closeOnOutside = true;
     #destroyed = false;
 
     constructor(
@@ -78,9 +79,9 @@ class Popover {
         this.#panel.setAttribute("tabindex", "-1");
         if (options.label !== undefined) this.setLabel(options.label);
         if (options.placement !== undefined) this.#placement = Popover.#normalize(options.placement);
-        this.#on_open = options.onOpen;
-        this.#on_close = options.onClose;
-        if (options.closeOnOutsideClick !== undefined) this.#close_on_outside = options.closeOnOutsideClick !== false;
+        this.#onOpen = options.onOpen;
+        this.#onClose = options.onClose;
+        if (options.closeOnOutsideClick !== undefined) this.#closeOnOutside = options.closeOnOutsideClick !== false;
         this.#panel.appendChild(this.#header);
         this.#panel.appendChild(this.#body);
         if (options.title !== undefined) this.setTitle(options.title);
@@ -98,7 +99,7 @@ class Popover {
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     getTitle() {
@@ -121,8 +122,8 @@ class Popover {
         this.#header.innerText = text === undefined ? "" : String(text);
         if (this.#header.id === "") this.#header.id = `${this.#id}_title`;
         // Заголовок служит именем слоя, пока не задан свой label и пока он не пуст
-        const has_title = this.#header.innerText.trim() !== "";
-        if (has_title && this.#panel.getAttribute("aria-label") === null)
+        const hasTitle = this.#header.innerText.trim() !== "";
+        if (hasTitle && this.#panel.getAttribute("aria-label") === null)
             this.#panel.setAttribute("aria-labelledby", this.#header.id);
         else this.#panel.removeAttribute("aria-labelledby");
         return this;
@@ -142,7 +143,7 @@ class Popover {
 
     setPlacement(placement = String()) {
         this.#placement = Popover.#normalize(placement);
-        if (this.#is_open) this.#place();
+        if (this.#isOpen) this.#place();
         return this;
     }
 
@@ -183,41 +184,46 @@ class Popover {
 
     // ПОКАЗ / СКРЫТИЕ
     open() {
-        if (this.#destroyed || this.#is_open) return this;
+        if (this.#destroyed || this.#isOpen) return this;
         if (this.#trigger !== undefined && !document.body.contains(this.#trigger)) return this;
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#panel.style.visibility = "hidden";
         this.#panel.style.display = "flex";
         this.#place();
         this.#panel.style.visibility = "visible";
+        // Кадр — после расстановки: её мереет `getBoundingClientRect`, а он считает
+        // по анимированному состоянию
+        new Animation(this.#panel).panelIn();
         if (this.#trigger !== undefined) this.#trigger.setAttribute("aria-expanded", "true");
-        if (this.#close_on_outside) window.addEventListener("click", this.#onWindowClick);
+        if (this.#closeOnOutside) window.addEventListener("click", this.#onWindowClick);
         window.addEventListener("resize", this.#onWindowChange);
         window.addEventListener("scroll", this.#onWindowChange, true);
         this.#focusInside();
-        if (this.#on_open !== undefined) this.#on_open(this);
+        if (this.#onOpen !== undefined) this.#onOpen(this);
         return this;
     }
 
     close() {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         // Проверяем до скрытия: `display: none` уводит фокус в body, и «был ли он внутри» уже не узнать
-        const focus_inside = this.#panel.contains(document.activeElement);
-        this.#is_open = false;
+        const focusInside = this.#panel.contains(document.activeElement);
+        this.#isOpen = false;
         window.removeEventListener("click", this.#onWindowClick);
         window.removeEventListener("resize", this.#onWindowChange);
         window.removeEventListener("scroll", this.#onWindowChange, true);
-        this.#panel.style.display = "none";
+        // Уход — кадром: панель гаснет и сходит вверх, а `display` снимает драйвер по концу
+        // кадра. Прежде панель пропадала рывком
+        new Animation(this.#panel).fadeOut();
         if (this.#trigger !== undefined) {
             this.#trigger.setAttribute("aria-expanded", "false");
-            if (focus_inside) this.#trigger.focus();
+            if (focusInside) this.#trigger.focus();
         }
-        if (this.#on_close !== undefined) this.#on_close(this);
+        if (this.#onClose !== undefined) this.#onClose(this);
         return this;
     }
 
     toggle() {
-        return this.#is_open ? this.close() : this.open();
+        return this.#isOpen ? this.close() : this.open();
     }
 
     destroy() {
@@ -310,7 +316,7 @@ class Popover {
     };
 
     #onWindowChange = () => {
-        if (!this.#is_open) return;
+        if (!this.#isOpen) return;
         this.#place();
     };
 

package/framework/components/chui_popover/styles.css

@@ -11,7 +11,7 @@ chui_popover {
     padding: 12px;
     gap: 10px;
     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);