chuijs 4.0.3 → 4.0.4

package/framework/components/chui_transfer/transfer.js

@@ -36,37 +36,37 @@ class Transfer {
     #root = document.createElement("chui_transfer");
     #label = document.createElement("transfer_label");
     #row = document.createElement("transfer_row");
-    #source_pane = document.createElement("transfer_pane");
-    #target_pane = document.createElement("transfer_pane");
-    #source_head = document.createElement("transfer_head");
-    #target_head = document.createElement("transfer_head");
-    #source_list = document.createElement("transfer_list");
-    #target_list = document.createElement("transfer_list");
-    #source_search = undefined;
-    #target_search = undefined;
-    #arrow_target = document.createElement("button");
-    #arrow_source = document.createElement("button");
+    #sourcePane = document.createElement("transfer_pane");
+    #targetPane = document.createElement("transfer_pane");
+    #sourceHead = document.createElement("transfer_head");
+    #targetHead = document.createElement("transfer_head");
+    #sourceList = document.createElement("transfer_list");
+    #targetList = document.createElement("transfer_list");
+    #sourceSearch = undefined;
+    #targetSearch = undefined;
+    #arrowTarget = document.createElement("button");
+    #arrowSource = document.createElement("button");
     #hint = document.createElement("transfer_hint");
     #status = document.createElement("transfer_status");
     #error = document.createElement("chui_error_message");
-    #source_roving = undefined;
-    #target_roving = undefined;
+    #sourceRoving = undefined;
+    #targetRoving = undefined;
     #items = [];
     #marked = new Set();
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
-    #source_title = undefined;
-    #target_title = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #sourceTitle = undefined;
+    #targetTitle = undefined;
     #searchable = false;
     #disabled = false;
     #min = undefined;
     #max = undefined;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
     // Строка, к которой нужно вернуть фокус после перерисовки
-    #focus_value = undefined;
+    #focusValue = undefined;
 
     constructor(
         options = {
@@ -91,13 +91,12 @@ class Transfer {
         Transfer.#counter += 1;
         this.#id = options.id === undefined ? `chui_transfer_${Transfer.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         this.#searchable = options.searchable === true;
-        this.#source_title =
+        this.#sourceTitle =
             options.sourceTitle === undefined ? I18n.t("transfer.available") : String(options.sourceTitle);
-        this.#target_title =
-            options.targetTitle === undefined ? I18n.t("transfer.chosen") : String(options.targetTitle);
+        this.#targetTitle = options.targetTitle === undefined ? I18n.t("transfer.chosen") : String(options.targetTitle);
         this.#min = options.min;
         this.#max = options.max;
         this.#root.id = this.#id;
@@ -105,47 +104,35 @@ class Transfer {
         this.#label.id = `${this.#id}_label`;
         this.#row.className = "transfer_row";
         this.#row.setAttribute("role", "group");
-        this.#list_pane(
-            this.#source_pane,
-            this.#source_head,
-            this.#source_list,
-            this.#source_title,
-            Transfer.SIDE.SOURCE
-        );
-        this.#list_pane(
-            this.#target_pane,
-            this.#target_head,
-            this.#target_list,
-            this.#target_title,
-            Transfer.SIDE.TARGET
-        );
-        this.#source_list.addEventListener("click", this.#onClick);
-        this.#target_list.addEventListener("click", this.#onClick);
-        this.#source_list.addEventListener("dblclick", this.#onDoubleClick);
-        this.#target_list.addEventListener("dblclick", this.#onDoubleClick);
-        this.#source_list.addEventListener("keydown", this.#onKeyDown);
-        this.#target_list.addEventListener("keydown", this.#onKeyDown);
-        this.#arrow_target.type = "button";
-        this.#arrow_source.type = "button";
-        this.#move_button(
-            this.#arrow_target,
+        this.#listPane(this.#sourcePane, this.#sourceHead, this.#sourceList, this.#sourceTitle, Transfer.SIDE.SOURCE);
+        this.#listPane(this.#targetPane, this.#targetHead, this.#targetList, this.#targetTitle, Transfer.SIDE.TARGET);
+        this.#sourceList.addEventListener("click", this.#onClick);
+        this.#targetList.addEventListener("click", this.#onClick);
+        this.#sourceList.addEventListener("dblclick", this.#onDoubleClick);
+        this.#targetList.addEventListener("dblclick", this.#onDoubleClick);
+        this.#sourceList.addEventListener("keydown", this.#onKeyDown);
+        this.#targetList.addEventListener("keydown", this.#onKeyDown);
+        this.#arrowTarget.type = "button";
+        this.#arrowSource.type = "button";
+        this.#moveButton(
+            this.#arrowTarget,
             Transfer.SIDE.TARGET,
             Icons.NAVIGATION.CHEVRON_RIGHT,
-            I18n.t("transfer.addMarked", { title: this.#target_title })
+            I18n.t("transfer.addMarked", { title: this.#targetTitle })
         );
-        this.#move_button(
-            this.#arrow_source,
+        this.#moveButton(
+            this.#arrowSource,
             Transfer.SIDE.SOURCE,
             Icons.NAVIGATION.CHEVRON_LEFT,
-            I18n.t("transfer.removeMarked", { title: this.#source_title })
+            I18n.t("transfer.removeMarked", { title: this.#sourceTitle })
         );
         const controls = document.createElement("transfer_controls");
         controls.className = "transfer_controls";
-        controls.appendChild(this.#arrow_target);
-        controls.appendChild(this.#arrow_source);
-        this.#row.appendChild(this.#source_pane);
+        controls.appendChild(this.#arrowTarget);
+        controls.appendChild(this.#arrowSource);
+        this.#row.appendChild(this.#sourcePane);
         this.#row.appendChild(controls);
-        this.#row.appendChild(this.#target_pane);
+        this.#row.appendChild(this.#targetPane);
         this.#hint.id = `${this.#id}_hint`;
         this.#hint.className = "transfer_hint";
         this.#hint.hidden = true;
@@ -159,16 +146,16 @@ class Transfer {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("transfer.title") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("transfer.title") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         // Число выбранных значений сравнивается своим правилом, а не строками
-        const rules_options = Object.assign({}, options);
-        delete rules_options.min;
-        delete rules_options.max;
-        Validate.installField(this, rules_options, this.#root, this.#error, () => this.getValue(), this.#row);
+        const rulesOptions = Object.assign({}, options);
+        delete rulesOptions.min;
+        delete rulesOptions.max;
+        Validate.installField(this, rulesOptions, this.#root, this.#error, () => this.getValue(), this.#row);
         this.#installRules();
-        this.#source_roving = new RovingKeyboard(this.#source_list, { itemSelector: ".transfer_item" });
-        this.#target_roving = new RovingKeyboard(this.#target_list, { itemSelector: ".transfer_item" });
+        this.#sourceRoving = new RovingKeyboard(this.#sourceList, { itemSelector: ".transfer_item" });
+        this.#targetRoving = new RovingKeyboard(this.#targetList, { itemSelector: ".transfer_item" });
         this.setItems(options.items);
         if (options.value !== undefined) this.setValue(options.value);
         this.setDisabled(options.disabled === true);
@@ -185,12 +172,12 @@ class Transfer {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Значения выбранного списка по порядку */
@@ -239,7 +226,7 @@ class Transfer {
 
     /** Подпись над списками; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -256,8 +243,8 @@ class Transfer {
 
     /** Имя группы, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#row.removeAttribute("aria-label");
             else this.#row.setAttribute("aria-label", String(text));
         }
@@ -350,13 +337,13 @@ class Transfer {
     setDisabled(disabled = Boolean()) {
         this.#disabled = disabled === true;
         this.#root.classList.toggle("transfer_disabled", this.#disabled);
-        for (const list of [this.#source_list, this.#target_list]) {
+        for (const list of [this.#sourceList, this.#targetList]) {
             if (this.#disabled) list.setAttribute("aria-disabled", "true");
             else list.removeAttribute("aria-disabled");
         }
-        if (this.#source_search !== undefined) {
-            this.#source_search.disabled = this.#disabled;
-            this.#target_search.disabled = this.#disabled;
+        if (this.#sourceSearch !== undefined) {
+            this.#sourceSearch.disabled = this.#disabled;
+            this.#targetSearch.disabled = this.#disabled;
             for (const clear of this.#root.querySelectorAll(".transfer_search_clear")) clear.disabled = this.#disabled;
         }
         this.#render();
@@ -372,7 +359,7 @@ class Transfer {
     /** Фокус на первую строку: `Form` зовёт это при ошибке валидации */
     focus() {
         if (this.#disabled) return this;
-        const list = this.#source_list.querySelector(".transfer_item") === null ? this.#target_list : this.#source_list;
+        const list = this.#sourceList.querySelector(".transfer_item") === null ? this.#targetList : this.#sourceList;
         const row = list.querySelector(".transfer_item");
         if (row !== null) row.focus();
         return this;
@@ -385,8 +372,8 @@ class Transfer {
 
     // === ВНУТРЕННЕЕ ===
     #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("transfer.title");
     }
 
@@ -416,7 +403,7 @@ class Transfer {
     }
 
     // Пара «заголовок + список» одного бока: поиск, список и место под пустое состояние
-    #list_pane(pane = undefined, head = undefined, list = undefined, title = String(), side = String()) {
+    #listPane(pane = undefined, head = undefined, list = undefined, title = String(), side = String()) {
         pane.className = "transfer_pane";
         head.className = "transfer_head";
         head.innerText = title;
@@ -455,8 +442,8 @@ class Transfer {
                 clear.hidden = search.value === "";
                 this.#render();
             });
-            if (side === Transfer.SIDE.SOURCE) this.#source_search = search;
-            else this.#target_search = search;
+            if (side === Transfer.SIDE.SOURCE) this.#sourceSearch = search;
+            else this.#targetSearch = search;
             box.appendChild(search);
             box.appendChild(clear);
             pane.appendChild(box);
@@ -465,7 +452,7 @@ class Transfer {
         return pane;
     }
 
-    #move_button(button = undefined, side = String(), icon = String(), label = String()) {
+    #moveButton(button = undefined, side = String(), icon = String(), label = String()) {
         button.className = "transfer_move";
         button.setAttribute("aria-label", label);
         button.addEventListener("click", () => this.#moveSelected(side));
@@ -498,30 +485,30 @@ class Transfer {
         // запомним строку под фокусом, чтобы вернуть его после перерисовки
         const active = document.activeElement;
         const focused = active === null || !this.#root.contains(active) ? null : active.closest(".transfer_item");
-        if (focused !== null) this.#focus_value = focused.dataset.value;
-        this.#source_list.innerHTML = "";
-        this.#target_list.innerHTML = "";
-        const source_filter = this.#filterOf(this.#source_search);
-        const target_filter = this.#filterOf(this.#target_search);
-        let source_count = 0;
-        let target_count = 0;
+        if (focused !== null) this.#focusValue = focused.dataset.value;
+        this.#sourceList.innerHTML = "";
+        this.#targetList.innerHTML = "";
+        const sourceFilter = this.#filterOf(this.#sourceSearch);
+        const targetFilter = this.#filterOf(this.#targetSearch);
+        let sourceCount = 0;
+        let targetCount = 0;
         for (const item of this.#items) {
-            const list = item.chosen ? this.#target_list : this.#source_list;
-            const filter = item.chosen ? target_filter : source_filter;
-            if (item.chosen) target_count += 1;
-            else source_count += 1;
+            const list = item.chosen ? this.#targetList : this.#sourceList;
+            const filter = item.chosen ? targetFilter : sourceFilter;
+            if (item.chosen) targetCount += 1;
+            else sourceCount += 1;
             if (filter !== "" && !this.#matches(item, filter)) continue;
             list.appendChild(this.#rowNode(item));
         }
-        this.#emptyNode(this.#source_list, this.#source_title, source_filter);
-        this.#emptyNode(this.#target_list, this.#target_title, target_filter);
-        this.#source_head.querySelector("transfer_count").innerText = `(${source_count})`;
-        this.#target_head.querySelector("transfer_count").innerText = `(${target_count})`;
+        this.#emptyNode(this.#sourceList, this.#sourceTitle, sourceFilter);
+        this.#emptyNode(this.#targetList, this.#targetTitle, targetFilter);
+        this.#sourceHead.querySelector("transfer_count").innerText = `(${sourceCount})`;
+        this.#targetHead.querySelector("transfer_count").innerText = `(${targetCount})`;
         this.#applyButtons();
         this.#restoreFocus();
         // Остановка обхода подхватывает уже сфокусированную строку, а без неё — первую видимую
-        if (this.#source_roving !== undefined) this.#source_roving.refresh();
-        if (this.#target_roving !== undefined) this.#target_roving.refresh();
+        if (this.#sourceRoving !== undefined) this.#sourceRoving.refresh();
+        if (this.#targetRoving !== undefined) this.#targetRoving.refresh();
         return this;
     }
 
@@ -568,25 +555,25 @@ class Transfer {
 
     #applyButtons() {
         const marked = this.#selectedValues();
-        const can_add = marked.some((value) => {
+        const canAdd = marked.some((value) => {
             const item = this.#find(value);
             return item !== undefined && !item.chosen && !item.disabled;
         });
-        const can_remove = marked.some((value) => {
+        const canRemove = marked.some((value) => {
             const item = this.#find(value);
             return item !== undefined && item.chosen && !item.disabled;
         });
         const chosen = this.#markedItems().length;
         const room = this.#max === undefined || chosen < this.#max;
-        this.#arrow_target.disabled = this.#disabled || !can_add || !room;
-        this.#arrow_source.disabled = this.#disabled || !can_remove;
+        this.#arrowTarget.disabled = this.#disabled || !canAdd || !room;
+        this.#arrowSource.disabled = this.#disabled || !canRemove;
         return this;
     }
 
     // После перерисовки фокус возвращается на ту же строку, а если её не стало — никуда
     #restoreFocus() {
-        const value = this.#focus_value;
-        this.#focus_value = undefined;
+        const value = this.#focusValue;
+        this.#focusValue = undefined;
         if (value === undefined) return;
         const row = this.#root.querySelector(`.transfer_item[data-value="${CSS.escape(value)}"]`);
         if (row === null) return;
@@ -620,12 +607,12 @@ class Transfer {
             titles.push(item.title);
             this.#marked.delete(value);
         }
-        this.#focus_value = moving[0];
+        this.#focusValue = moving[0];
         this.#render();
-        const side_title = side === Transfer.SIDE.TARGET ? this.#target_title : this.#source_title;
+        const sideTitle = side === Transfer.SIDE.TARGET ? this.#targetTitle : this.#sourceTitle;
         this.#announce(
             I18n.t("transfer.moved", {
-                title: side_title,
+                title: sideTitle,
                 titles: titles.join(", "),
                 count: this.#markedItems().length,
                 total: this.#items.length,
@@ -641,7 +628,7 @@ class Transfer {
         if (item === undefined || item.disabled) return;
         if (this.#marked.has(value)) this.#marked.delete(value);
         else this.#marked.add(value);
-        this.#focus_value = value;
+        this.#focusValue = value;
         this.#render();
         // Об отметке сообщает сам список (aria-selected) — объявляем только снятие последней
         if (this.#marked.size === 0) this.#announce(I18n.t("transfer.nothingMarked"));
@@ -651,7 +638,7 @@ class Transfer {
     #notify() {
         const values = this.getValue();
         for (const listener of [...this.#listeners]) listener(values, this);
-        if (this.#on_change !== undefined) this.#on_change(values, this);
+        if (this.#onChange !== undefined) this.#onChange(values, this);
     }
 
     #announce(text = String()) {

package/framework/components/chui_tree_table/styles.css

@@ -6,14 +6,14 @@ chui_tree_table {
     width: -webkit-fill-available;
     max-width: 100%;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     box-sizing: border-box;
 }
 
 .tree_table_label {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -31,7 +31,7 @@ chui_tree_table {
     max-width: 100%;
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
 }
@@ -129,7 +129,7 @@ tree_table_toggle_spacer {
 .tree_table_toggle chui_icon {
     color: inherit;
     font-size: 18px;
-    transition: transform var(--transition_time) ease;
+    transition: transform var(--motion_fast) var(--motion_ease);
 }
 
 .tree_table_toggle:hover {