chuijs 4.0.2 → 4.0.4

package/framework/components/chui_tree_table/tree_table.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");
 
 /** Служебные ключи строки: всё остальное — значения колонок */
 const SERVICE_KEYS = ["id", "children", "expanded", "disabled", "selected"];
@@ -50,13 +50,13 @@ const SERVICE_KEYS = ["id", "children", "expanded", "disabled", "selected"];
  */
 class TreeTable {
     static #counter = 0;
-    static #row_counter = 0;
+    static #rowCounter = 0;
 
     #root = document.createElement("chui_tree_table");
     #label = document.createElement("tree_table_label");
     #grid = document.createElement("tree_table_grid");
     #head = document.createElement("tree_table_head");
-    #head_row = document.createElement("tree_table_head_row");
+    #headRow = document.createElement("tree_table_head_row");
     #body = document.createElement("tree_table_body");
     #empty = document.createElement("tree_table_empty");
     #status = document.createElement("tree_table_status");
@@ -68,39 +68,41 @@ class TreeTable {
     #filter = "";
     #selectable = false;
     #id = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #indent = 18;
-    #empty_text = undefined;
-    #on_select = undefined;
-    #on_toggle = undefined;
+    #emptyText = undefined;
+    #onSelect = undefined;
+    #onToggle = undefined;
     #listeners = [];
     // Строка, которая держит остановку обхода, и строка под фокусом до перерисовки
-    #active_id = undefined;
-    #focus_id = undefined;
-    #visible_count = 0;
-
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        columns: Array(),
-        rows: Array(),
-        expanded: Array(),
-        selectable: Boolean(),
-        indent: Number(),
-        height: String(),
-        emptyText: String(),
-        onSelect: undefined,
-        onToggle: undefined,
-        changeEvent: undefined
-    }) {
+    #activeId = undefined;
+    #focusId = undefined;
+    #visibleCount = 0;
+
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            columns: Array(),
+            rows: Array(),
+            expanded: Array(),
+            selectable: Boolean(),
+            indent: Number(),
+            height: String(),
+            emptyText: String(),
+            onSelect: undefined,
+            onToggle: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_TreeTable");
         TreeTable.#counter += 1;
         this.#id = options.id === undefined ? `chui_tree_table_${TreeTable.#counter}` : options.id;
         this.#root.id = this.#id;
-        this.#on_select = options.onSelect;
-        this.#on_toggle = options.onToggle;
+        this.#onSelect = options.onSelect;
+        this.#onToggle = options.onToggle;
         this.#selectable = options.selectable === true;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         this.#label.className = "tree_table_label";
@@ -109,23 +111,23 @@ class TreeTable {
         this.#grid.setAttribute("role", "treegrid");
         this.#head.className = "tree_table_head";
         this.#head.setAttribute("role", "rowgroup");
-        this.#head_row.className = "tree_table_head_row";
-        this.#head_row.setAttribute("role", "row");
+        this.#headRow.className = "tree_table_head_row";
+        this.#headRow.setAttribute("role", "row");
         this.#body.className = "tree_table_body";
         this.#body.setAttribute("role", "rowgroup");
         this.#empty.className = "tree_table_empty";
         this.#status.className = "tree_table_status chui_visually_hidden";
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#head.appendChild(this.#head_row);
+        this.#head.appendChild(this.#headRow);
         this.#grid.appendChild(this.#head);
         this.#grid.appendChild(this.#body);
         this.#root.appendChild(this.#label);
         this.#root.appendChild(this.#grid);
         this.#root.appendChild(this.#empty);
         this.#root.appendChild(this.#status);
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("common.nothingFound");
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("common.nothingFound");
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
         this.setLabel(optionOr(options.label, I18n.t("treeTable.label")));
@@ -148,12 +150,12 @@ class TreeTable {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя таблицы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Колонки: копии описаний */
@@ -215,7 +217,7 @@ class TreeTable {
 
     /** Подпись над таблицей; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -230,7 +232,7 @@ class TreeTable {
 
     /** Имя таблицы, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -335,7 +337,8 @@ class TreeTable {
     setFilter(text = String()) {
         this.#filter = text === undefined ? "" : String(text);
         this.#render();
-        if (this.#filter !== "") this.#announce(I18n.t("treeTable.shownRows", {shown: this.#visible_count, total: this.#index.size}));
+        if (this.#filter !== "")
+            this.#announce(I18n.t("treeTable.shownRows", { shown: this.#visibleCount, total: this.#index.size }));
         return this;
     }
 
@@ -369,7 +372,10 @@ class TreeTable {
         const target = id === undefined ? undefined : String(id);
         const list = this.#body.querySelectorAll("tree_table_row");
         if (list.length === 0) return this;
-        const row = target === undefined ? list[0] : this.#body.querySelector(`tree_table_row[data-id="${CSS.escape(target)}"]`);
+        const row =
+            target === undefined
+                ? list[0]
+                : this.#body.querySelector(`tree_table_row[data-id="${CSS.escape(target)}"]`);
         if (row === null) return this;
         this.#focusRow(row.dataset.id);
         return this;
@@ -385,9 +391,9 @@ class TreeTable {
         const source = row === undefined || row === null ? {} : row;
         const values = {};
         for (const key of Object.keys(source)) if (!SERVICE_KEYS.includes(key)) values[key] = source[key];
-        TreeTable.#row_counter += 1;
+        TreeTable.#rowCounter += 1;
         return {
-            id: source.id === undefined ? `tree_table_row_${TreeTable.#row_counter}` : String(source.id),
+            id: source.id === undefined ? `tree_table_row_${TreeTable.#rowCounter}` : String(source.id),
             values: values,
             disabled: source.disabled === true,
             default_expanded: source.expanded === true,
@@ -396,7 +402,7 @@ class TreeTable {
     }
 
     #describe(node) {
-        const descriptor = {id: node.id};
+        const descriptor = { id: node.id };
         for (const key of Object.keys(node.values)) descriptor[key] = node.values[key];
         descriptor.expanded = node.children.length > 0 && this.#expanded.has(node.id);
         descriptor.disabled = node.disabled;
@@ -440,14 +446,14 @@ class TreeTable {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("treeTable.label");
     }
 
     // Имя сетки: видимая подпись — через aria-labelledby, скрытая — через aria-label
     #syncLabel() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#grid.setAttribute("aria-labelledby", this.#label.id);
             this.#grid.removeAttribute("aria-label");
             return;
@@ -463,7 +469,7 @@ class TreeTable {
         const walk = (nodes, level) => {
             for (const node of nodes) {
                 if (filter !== "" && !this.#matchesTree(node, filter)) continue;
-                list.push({node: node, level: level});
+                list.push({ node: node, level: level });
                 if (!this.#isOpen(node, filter)) continue;
                 walk(node.children, level + 1);
             }
@@ -485,15 +491,19 @@ class TreeTable {
     }
 
     #matchesRow(node, filter) {
-        return this.#columns.some((column) => String(node.values[column.key] === undefined ? "" : node.values[column.key]).toLowerCase().includes(filter));
+        return this.#columns.some((column) =>
+            String(node.values[column.key] === undefined ? "" : node.values[column.key])
+                .toLowerCase()
+                .includes(filter)
+        );
     }
 
     #render() {
         // Строки пересобираются, а фокус живёт на строке: запоминаем её до перерисовки
         const active = document.activeElement;
         const focused = active === null || !this.#grid.contains(active) ? null : active.closest("tree_table_row");
-        if (focused !== null) this.#focus_id = focused.dataset.id;
-        this.#head_row.innerHTML = "";
+        if (focused !== null) this.#focusId = focused.dataset.id;
+        this.#headRow.innerHTML = "";
         this.#body.innerHTML = "";
         for (const column of this.#columns) {
             const cell = document.createElement("tree_table_head_cell");
@@ -501,14 +511,14 @@ class TreeTable {
             if (column.align === "end") cell.classList.add("tree_table_cell_end");
             cell.setAttribute("role", "columnheader");
             cell.innerText = column.title;
-            this.#head_row.appendChild(cell);
+            this.#headRow.appendChild(cell);
         }
         this.#head.hidden = this.#columns.length === 0;
         const visible = this.#flatten();
-        this.#visible_count = visible.length;
+        this.#visibleCount = visible.length;
         for (const entry of visible) this.#body.appendChild(this.#rowNode(entry));
         this.#empty.hidden = visible.length > 0;
-        this.#empty.innerText = this.#empty_text;
+        this.#empty.innerText = this.#emptyText;
         this.#applyStop();
         return this;
     }
@@ -550,7 +560,10 @@ class TreeTable {
             toggle.className = "tree_table_toggle";
             // Стрелка не отдельная остановка обхода: у таблицы одна остановка на строку
             toggle.setAttribute("tabindex", "-1");
-            toggle.setAttribute("aria-label", I18n.t(open ? "a11y.collapseNode" : "a11y.expandNode", {name: this.#titleOf(node)}));
+            toggle.setAttribute(
+                "aria-label",
+                I18n.t(open ? "a11y.collapseNode" : "a11y.expandNode", { name: this.#titleOf(node) })
+            );
             toggle.dataset.id = node.id;
             const glyph = new Icon(Icons.NAVIGATION.CHEVRON_RIGHT, "18px").set();
             glyph.setAttribute("aria-hidden", "true");
@@ -581,14 +594,14 @@ class TreeTable {
         const list = [...this.#body.querySelectorAll("tree_table_row")];
         if (list.length === 0) return;
         const stop =
-            list.find((row) => row.dataset.id === this.#active_id) ??
-            list.find((row) => row.dataset.id === this.#focus_id) ??
+            list.find((row) => row.dataset.id === this.#activeId) ??
+            list.find((row) => row.dataset.id === this.#focusId) ??
             list[0];
-        this.#active_id = stop.dataset.id;
+        this.#activeId = stop.dataset.id;
         for (const row of list) row.setAttribute("tabindex", row === stop ? "0" : "-1");
         // Фокус возвращаем только если он был в таблице: иначе перерисовка его бы украла
-        if (this.#focus_id !== undefined && stop.dataset.id === this.#focus_id) {
-            this.#focus_id = undefined;
+        if (this.#focusId !== undefined && stop.dataset.id === this.#focusId) {
+            this.#focusId = undefined;
             stop.focus();
         }
     }
@@ -596,7 +609,7 @@ class TreeTable {
     #focusRow(id = String()) {
         const row = this.#body.querySelector(`tree_table_row[data-id="${CSS.escape(id)}"]`);
         if (row === null) return;
-        this.#active_id = id;
+        this.#activeId = id;
         for (const other of this.#body.querySelectorAll("tree_table_row")) {
             other.setAttribute("tabindex", other === row ? "0" : "-1");
         }
@@ -611,10 +624,12 @@ class TreeTable {
         else this.#expanded.delete(id);
         this.#render();
         if (silent) return this;
-        this.#announce(value
-            ? I18n.t("treeTable.expanded", {name: this.#titleOf(node), count: node.children.length})
-            : I18n.t("treeTable.collapsed", {name: this.#titleOf(node)}));
-        if (this.#on_toggle !== undefined) this.#on_toggle(this.#describe(node), value, this);
+        this.#announce(
+            value
+                ? I18n.t("treeTable.expanded", { name: this.#titleOf(node), count: node.children.length })
+                : I18n.t("treeTable.collapsed", { name: this.#titleOf(node) })
+        );
+        if (this.#onToggle !== undefined) this.#onToggle(this.#describe(node), value, this);
         return this;
     }
 
@@ -633,7 +648,7 @@ class TreeTable {
         const node = this.#selected === undefined ? undefined : this.#index.get(this.#selected);
         const row = node === undefined ? undefined : this.#describe(node);
         for (const listener of [...this.#listeners]) listener(row, this);
-        if (this.#on_select !== undefined) this.#on_select(row, this);
+        if (this.#onSelect !== undefined) this.#onSelect(row, this);
     }
 
     #announce(text = String()) {
@@ -688,7 +703,7 @@ class TreeTable {
         const list = this.#body.querySelectorAll("tree_table_row");
         if (list.length === 0) return;
         // Нажатия на самой стрелке (настоящая кнопка) не перехватываем
-        const from_button = event.target instanceof Element && event.target.closest("button") !== null;
+        const fromButton = event.target instanceof Element && event.target.closest("button") !== null;
         const row = this.#currentRow(event.target instanceof Element ? event.target : undefined);
         const id = row === null ? undefined : row.dataset.id;
         const node = id === undefined ? undefined : this.#index.get(id);
@@ -710,14 +725,14 @@ class TreeTable {
                 this.#focusRow(list[list.length - 1].dataset.id);
                 return;
             case "ArrowRight": {
-                if (from_button || node === undefined || node.children.length === 0) return;
+                if (fromButton || node === undefined || node.children.length === 0) return;
                 event.preventDefault();
                 if (!this.#expanded.has(id) && this.#filter === "") this.expand(id);
                 else this.#step(row, 1);
                 return;
             }
             case "ArrowLeft": {
-                if (from_button || node === undefined) return;
+                if (fromButton || node === undefined) return;
                 event.preventDefault();
                 if (node.children.length > 0 && this.#expanded.has(id)) {
                     this.collapse(id);
@@ -728,13 +743,13 @@ class TreeTable {
                 return;
             }
             case "Enter": {
-                if (from_button || node === undefined || node.children.length === 0) return;
+                if (fromButton || node === undefined || node.children.length === 0) return;
                 event.preventDefault();
                 this.toggle(id);
                 return;
             }
             case " ": {
-                if (from_button || node === undefined) return;
+                if (fromButton || node === undefined) return;
                 event.preventDefault();
                 if (this.#selectable) this.#select(id);
                 else if (node.children.length > 0) this.toggle(id);
@@ -746,5 +761,4 @@ class TreeTable {
     };
 }
 
-exports.TreeTable = TreeTable
-
+exports.TreeTable = TreeTable;

package/framework/components/chui_tree_view/styles.css

@@ -7,9 +7,9 @@ chui_tree_view {
     height: max-content;
     font-size: var(--font_default_size);
     border: 1px solid var(--border_color);
-    margin: var(--margin);
+    margin: var(--block_margin);
     padding: 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     box-sizing: border-box;
 }
@@ -31,7 +31,9 @@ tree_view_button {
     flex-direction: row;
     gap: 6px;
     width: -webkit-fill-available;
-    min-height: 32px;
+    /* Высота строки — одна на вёрстку и на арифметику распорок: в переменном режиме
+       её пишет код после замера, 32px — значение до замера */
+    min-height: var(--tree_view_row_height, 32px);
     box-sizing: border-box;
     /* 4px панели + 9px строки = 13px — тот же отступ текста, что у ячеек таблиц и сетки */
     padding: 4px 9px;
@@ -66,7 +68,7 @@ tree_view_button_arrow {
 tree_view_button_arrow chui_icon {
     font-size: var(--header_icon_size);
     color: inherit;
-    transition: transform var(--transition_time) ease;
+    transition: transform var(--motion_fast) var(--motion_ease);
 }
 
 /* Стрелка: свёрнутый узел смотрит вправо, раскрытый — вниз */
@@ -81,13 +83,14 @@ tree_view_button[aria-expanded="true"] tree_view_button_arrow chui_icon {
 tree_view_panel {
     display: block;
     width: -webkit-fill-available;
-    padding-block: 0 0; padding-inline: 18px 0;
+    padding-block: 0 0;
+    padding-inline: 18px 0;
     overflow: hidden;
     max-height: 0;
     position: relative;
     color: var(--text_color);
     border: none;
-    transition: max-height var(--transition_time) ease;
+    transition: max-height var(--motion_base) var(--motion_ease);
 }
 
 /* Направляющая уровня: показывает, что вложенные строки относятся к раскрытому узлу */
@@ -115,7 +118,8 @@ tree_view_button:hover {
 }
 
 tree_view_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 tree_view_button:focus-visible {
@@ -168,7 +172,7 @@ tree_view_button.tree_view_button_drop_after {
 }
 
 tree_view_button.tree_view_button_drop_inside {
-    background: var(--blue_prime_background_trans);
+    background: var(--blue_prime_background_tint_strong);
     color: var(--text_color_hover);
 }
 
@@ -182,8 +186,8 @@ tree_view_panel.tree_view_search_hidden {
 
 /* Совпадение подсвечивается спокойным акцентом: акцент зарезервирован за выбором */
 tree_view_button.tree_view_button_match {
-    background: var(--blue_prime_background_trans);
-    border-radius: var(--border_radius);
+    background: var(--blue_prime_background_tint_strong);
+    border-radius: var(--radius_sm);
 }
 
 /* === Отложенная отрисовка (опция deferRender) ===