chuijs 4.0.2 → 4.0.4

package/framework/components/chui_transfer/transfer.js

@@ -1,8 +1,8 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Перенос значений между двумя списками: слева доступное, справа выбранное.
@@ -36,64 +36,67 @@ 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;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        items: Array(),
-        value: Array(),
-        sourceTitle: String(),
-        targetTitle: String(),
-        searchable: Boolean(),
-        disabled: Boolean(),
-        min: Number(),
-        max: Number(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #focusValue = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            items: Array(),
+            value: Array(),
+            sourceTitle: String(),
+            targetTitle: String(),
+            searchable: Boolean(),
+            disabled: Boolean(),
+            min: Number(),
+            max: Number(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_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 = options.sourceTitle === undefined ? I18n.t("transfer.available") : String(options.sourceTitle);
-        this.#target_title = options.targetTitle === undefined ? I18n.t("transfer.chosen") : String(options.targetTitle);
+        this.#sourceTitle =
+            options.sourceTitle === undefined ? I18n.t("transfer.available") : String(options.sourceTitle);
+        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;
@@ -101,27 +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, Transfer.SIDE.TARGET, Icons.NAVIGATION.CHEVRON_RIGHT,
-            I18n.t("transfer.addMarked", {title: this.#target_title}));
-        this.#move_button(this.#arrow_source, Transfer.SIDE.SOURCE, Icons.NAVIGATION.CHEVRON_LEFT,
-            I18n.t("transfer.removeMarked", {title: this.#source_title}));
+        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.#targetTitle })
+        );
+        this.#moveButton(
+            this.#arrowSource,
+            Transfer.SIDE.SOURCE,
+            Icons.NAVIGATION.CHEVRON_LEFT,
+            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;
@@ -135,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);
@@ -161,12 +172,12 @@ class Transfer {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Значения выбранного списка по порядку */
@@ -215,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 = "";
@@ -232,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));
         }
@@ -326,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();
@@ -348,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;
@@ -361,13 +372,14 @@ 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");
     }
 
     static #toItem(item = Object(), index = Number()) {
-        if (typeof item === "string") return {title: item, subtitle: undefined, value: item, disabled: false, chosen: false};
+        if (typeof item === "string")
+            return { title: item, subtitle: undefined, value: item, disabled: false, chosen: false };
         return {
             title: item.title === undefined ? String(index + 1) : String(item.title),
             subtitle: item.subtitle === undefined ? undefined : String(item.subtitle),
@@ -391,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;
@@ -408,14 +420,14 @@ class Transfer {
             search.type = "search";
             search.className = "transfer_search";
             search.placeholder = I18n.t("transfer.search");
-            search.setAttribute("aria-label", I18n.t("transfer.searchIn", {title: title}));
+            search.setAttribute("aria-label", I18n.t("transfer.searchIn", { title: title }));
             // Кнопка очистки — своя: системная кнопка очистки у `input[type=search]` скрыта (см. стили)
             const box = document.createElement("transfer_search_box");
             box.className = "transfer_search_box";
             const clear = document.createElement("button");
             clear.type = "button";
             clear.className = "transfer_search_clear";
-            clear.setAttribute("aria-label", I18n.t("transfer.clearSearchIn", {title: title}));
+            clear.setAttribute("aria-label", I18n.t("transfer.clearSearchIn", { title: title }));
             clear.hidden = true;
             const glyph = new Icon(Icons.NAVIGATION.CLOSE, "16px").set();
             glyph.setAttribute("aria-hidden", "true");
@@ -430,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);
@@ -440,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));
@@ -458,12 +470,12 @@ class Transfer {
             if (!result.valid) return result;
             const count = this.#markedItems().length;
             if (this.#min !== undefined && count < this.#min) {
-                return {valid: false, rule: "min", message: I18n.t("transfer.selectMin", {min: this.#min})};
+                return { valid: false, rule: "min", message: I18n.t("transfer.selectMin", { min: this.#min }) };
             }
             if (this.#max !== undefined && count > this.#max) {
-                return {valid: false, rule: "max", message: I18n.t("transfer.selectMax", {max: this.#max})};
+                return { valid: false, rule: "max", message: I18n.t("transfer.selectMax", { max: this.#max }) };
             }
-            return {valid: true};
+            return { valid: true };
         };
         return this;
     }
@@ -473,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;
     }
 
@@ -535,32 +547,33 @@ class Transfer {
         const empty = document.createElement("transfer_empty");
         // Пояснение, а не пункт списка: иначе listbox получил бы фиктивную опцию
         empty.setAttribute("role", "presentation");
-        empty.innerText = filter === "" ? I18n.t("transfer.emptyList", {title: title}) : I18n.t("common.nothingFound");
+        empty.innerText =
+            filter === "" ? I18n.t("transfer.emptyList", { title: title }) : I18n.t("common.nothingFound");
         list.appendChild(empty);
         return empty;
     }
 
     #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;
@@ -583,7 +596,7 @@ class Transfer {
         if (side === Transfer.SIDE.TARGET && this.#max !== undefined) {
             const room = this.#max - this.#markedItems().length;
             if (moving.length > room) {
-                this.#announce(I18n.t("transfer.maxReached", {max: this.#max}));
+                this.#announce(I18n.t("transfer.maxReached", { max: this.#max }));
                 return;
             }
         }
@@ -594,10 +607,17 @@ 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;
-        this.#announce(I18n.t("transfer.moved", {title: side_title, titles: titles.join(", "), count: this.#markedItems().length, total: this.#items.length}));
+        const sideTitle = side === Transfer.SIDE.TARGET ? this.#targetTitle : this.#sourceTitle;
+        this.#announce(
+            I18n.t("transfer.moved", {
+                title: sideTitle,
+                titles: titles.join(", "),
+                count: this.#markedItems().length,
+                total: this.#items.length,
+            })
+        );
         this.#notify();
         return this;
     }
@@ -608,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"));
@@ -618,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()) {
@@ -651,4 +671,4 @@ class Transfer {
     };
 }
 
-exports.Transfer = Transfer
+exports.Transfer = Transfer;

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 {