chuijs 4.0.3 → 4.0.4

package/framework/components/chui_tree_table/tree_table.js

@@ -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,17 +68,17 @@ 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;
+    #activeId = undefined;
+    #focusId = undefined;
+    #visibleCount = 0;
 
     constructor(
         options = {
@@ -101,8 +101,8 @@ class 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";
@@ -111,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")));
@@ -150,12 +150,12 @@ class TreeTable {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя таблицы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Колонки: копии описаний */
@@ -217,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 = "";
@@ -232,7 +232,7 @@ class TreeTable {
 
     /** Имя таблицы, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -338,7 +338,7 @@ class TreeTable {
         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 }));
+            this.#announce(I18n.t("treeTable.shownRows", { shown: this.#visibleCount, total: this.#index.size }));
         return this;
     }
 
@@ -391,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,
@@ -446,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;
@@ -502,8 +502,8 @@ class TreeTable {
         // Строки пересобираются, а фокус живёт на строке: запоминаем её до перерисовки
         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");
@@ -511,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;
     }
@@ -594,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();
         }
     }
@@ -609,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");
         }
@@ -629,7 +629,7 @@ class TreeTable {
                 ? 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);
+        if (this.#onToggle !== undefined) this.#onToggle(this.#describe(node), value, this);
         return this;
     }
 
@@ -648,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()) {
@@ -703,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);
@@ -725,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);
@@ -743,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);

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);
 }
 
 /* Стрелка: свёрнутый узел смотрит вправо, раскрытый — вниз */
@@ -88,7 +90,7 @@ tree_view_panel {
     position: relative;
     color: var(--text_color);
     border: none;
-    transition: max-height var(--transition_time) ease;
+    transition: max-height var(--motion_base) var(--motion_ease);
 }
 
 /* Направляющая уровня: показывает, что вложенные строки относятся к раскрытому узлу */
@@ -170,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);
 }
 
@@ -184,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) ===