chuijs 4.0.1 → 4.0.3

package/framework/components/chui_tour/tour.js

@@ -1,8 +1,8 @@
-const { setStyles, markdownToHtml, optionOr } = require('../../modules/chui_functions');
-const { OverlayA11y } = require('../../modules/chui_a11y/chui_a11y');
-const { Popover } = require('../chui_popover/popover');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, markdownToHtml, optionOr } = require("../../modules/chui_functions");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { Popover } = require("../chui_popover/popover");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Пошаговое знакомство с интерфейсом: затемнённая подложка с «окном» вокруг цели
@@ -44,7 +44,7 @@ class Tour {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор вокруг подсвеченной цели, px */
     static PADDING = 6;
@@ -55,14 +55,14 @@ class Tour {
         skip: Icons.AUDIO_VIDEO.SKIP_NEXT,
         prev: Icons.NAVIGATION.ARROW_BACK,
         next: Icons.NAVIGATION.ARROW_FORWARD,
-        finish: Icons.ACTIONS.DONE
+        finish: Icons.ACTIONS.DONE,
     };
 
     #id = require("randomstring").generate();
     #layer = document.createElement("chui_tour");
     #highlight = document.createElement("tour_highlight");
     // Объявление для скринридера: узел носит класс общей утилиты скрытия (по нему его узнают стенды)
-    #status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+    #status = Object.assign(document.createElement("chui_visually_hidden"), { className: "chui_visually_hidden" });
     #popover = undefined;
     #head = document.createElement("tour_head");
     #title = document.createElement("tour_title");
@@ -90,11 +90,20 @@ class Tour {
     #on_change = undefined;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(), steps: [], mask: Boolean(), closable: Boolean(), keyboard: Boolean(),
-        scrollIntoView: Boolean(), label: String(),
-        onFinish: undefined, onClose: undefined, onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            steps: [],
+            mask: Boolean(),
+            closable: Boolean(),
+            keyboard: Boolean(),
+            scrollIntoView: Boolean(),
+            label: String(),
+            onFinish: undefined,
+            onClose: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Tour");
         this.#steps = Array.isArray(options.steps) ? options.steps : [];
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе слой без аргументов
@@ -159,7 +168,7 @@ class Tour {
         this.#a11y = new OverlayA11y(this.#layer, {
             role: "dialog",
             describedBy: this.#text,
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         this.#a11y.setLabel(this.#label === undefined ? I18n.t("feedback.tourLabel") : this.#label);
         this.#close_button.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
@@ -173,7 +182,10 @@ class Tour {
     /** Начать знакомство с первого шага; шаги без найденной цели в него не попадают */
     start() {
         if (this.#destroyed || this.#is_open) return this;
-        this.#active = this.#steps.filter((step) => step !== undefined && step !== null && (step.target === undefined || this.#targetOf(step) !== undefined));
+        this.#active = this.#steps.filter(
+            (step) =>
+                step !== undefined && step !== null && (step.target === undefined || this.#targetOf(step) !== undefined)
+        );
         if (this.#active.length === 0) return this;
         this.#index = 0;
         this.#is_open = true;
@@ -223,15 +235,23 @@ class Tour {
         return this.#end(false);
     }
 
-    isOpen() { return this.#is_open; }
+    isOpen() {
+        return this.#is_open;
+    }
     /** Номер текущего шага; вне знакомства — 0 */
-    getIndex() { return this.#index; }
-    getSteps() { return [...this.#steps]; }
+    getIndex() {
+        return this.#index;
+    }
+    getSteps() {
+        return [...this.#steps];
+    }
     setSteps(steps = []) {
         this.#steps = Array.isArray(steps) ? steps : [];
         return this;
     }
-    getId() { return this.#id; }
+    getId() {
+        return this.#id;
+    }
 
     /** Полное удаление: знакомство закрывается без уведомлений, слой и поповер убираются */
     destroy() {
@@ -254,7 +274,9 @@ class Tour {
         return this;
     }
 
-    set() { return this.#layer; }
+    set() {
+        return this.#layer;
+    }
 
     // === ВНУТРЕННЕЕ ===
     /**
@@ -304,7 +326,7 @@ class Tour {
         if (step.markdownText !== undefined) this.#text.innerHTML = markdownToHtml(step.markdownText);
         else if (step.text !== undefined) this.#text.innerText = String(step.text);
         // Счётчик, значки и видимость закрывающих кнопок
-        this.#counter.innerText = I18n.t("feedback.tourStepOf", {index: this.#index + 1, total: this.#active.length});
+        this.#counter.innerText = I18n.t("feedback.tourStepOf", { index: this.#index + 1, total: this.#active.length });
         this.#nameButton(this.#prev_button, "feedback.tourPrev");
         // Последний шаг: «Далее» становится «Готово» — вместе с именем меняется и значок
         this.#nameButton(this.#next_button, last ? "feedback.tourFinish" : "feedback.tourNext");
@@ -317,7 +339,9 @@ class Tour {
             if (this.#layer.contains(previous)) previous.focus();
             else this.#next_button.focus();
         }
-        this.#announce(`${this.#counter.innerText}${this.#title.innerText.trim() === "" ? "" : ". " + this.#title.innerText}`);
+        this.#announce(
+            `${this.#counter.innerText}${this.#title.innerText.trim() === "" ? "" : ". " + this.#title.innerText}`
+        );
         // Цель: подвести в вид, измерить и поставить «окно» с подсказкой
         this.#scrollIntoView(step);
         this.#syncGeometry();
@@ -340,7 +364,12 @@ class Tour {
     #targetOf(step = {}) {
         const target = step.target;
         if (target === undefined || target === null) return undefined;
-        const node = typeof target === "string" ? document.querySelector(target) : (typeof target.set === "function" ? target.set() : target);
+        const node =
+            typeof target === "string"
+                ? document.querySelector(target)
+                : typeof target.set === "function"
+                  ? target.set()
+                  : target;
         return node instanceof Element ? node : undefined;
     }
 
@@ -348,7 +377,7 @@ class Tour {
         if (!this.#scroll_into_view) return;
         const node = this.#targetOf(step);
         if (node === undefined) return;
-        node.scrollIntoView({block: "center", inline: "nearest"});
+        node.scrollIntoView({ block: "center", inline: "nearest" });
     }
 
     /** «Окно» вокруг цели: у шага без цели — точка в центре окна (подсказка встаёт у неё) */
@@ -360,10 +389,15 @@ class Tour {
         let box;
         if (node === undefined) {
             const left = Math.max(0, (window.innerWidth - Tour.WIDTH) / 2);
-            box = {left: left, top: window.innerHeight / 2, width: 0, height: 0};
+            box = { left: left, top: window.innerHeight / 2, width: 0, height: 0 };
         } else {
             const rect = node.getBoundingClientRect();
-            box = {left: rect.left - padding, top: rect.top - padding, width: rect.width + padding * 2, height: rect.height + padding * 2};
+            box = {
+                left: rect.left - padding,
+                top: rect.top - padding,
+                width: rect.width + padding * 2,
+                height: rect.height + padding * 2,
+            };
         }
         this.#highlight.style.left = `${Math.round(box.left)}px`;
         this.#highlight.style.top = `${Math.round(box.top)}px`;
@@ -400,4 +434,4 @@ class Tour {
     };
 }
 
-exports.Tour = Tour
+exports.Tour = Tour;

package/framework/components/chui_transfer/styles.css

@@ -76,7 +76,8 @@ chui_transfer {
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё; слева 11 px — как
        у текстовых полей (--main_padding_sm) */
-    padding-block: 0 0; padding-inline: 11px 30px;
+    padding-block: 0 0;
+    padding-inline: 11px 30px;
     border: 1px solid var(--border_color);
     border-radius: var(--border_radius);
     background: var(--element_background);

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");
 
 /**
  * Перенос значений между двумя списками: слева доступное, справа выбранное.
@@ -68,23 +68,25 @@ class Transfer {
     // Строка, к которой нужно вернуть фокус после перерисовки
     #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
-    }) {
+    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;
@@ -92,8 +94,10 @@ class Transfer {
         this.#label_text = options.label;
         this.#on_change = 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.#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.#min = options.min;
         this.#max = options.max;
         this.#root.id = this.#id;
@@ -101,8 +105,20 @@ 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.#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);
@@ -111,10 +127,18 @@ class Transfer {
         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.#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 })
+        );
         const controls = document.createElement("transfer_controls");
         controls.className = "transfer_controls";
         controls.appendChild(this.#arrow_target);
@@ -143,8 +167,8 @@ class Transfer {
         delete rules_options.max;
         Validate.installField(this, rules_options, 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.#source_roving = new RovingKeyboard(this.#source_list, { itemSelector: ".transfer_item" });
+        this.#target_roving = new RovingKeyboard(this.#target_list, { itemSelector: ".transfer_item" });
         this.setItems(options.items);
         if (options.value !== undefined) this.setValue(options.value);
         this.setDisabled(options.disabled === true);
@@ -367,7 +391,8 @@ class Transfer {
     }
 
     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),
@@ -408,14 +433,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");
@@ -458,12 +483,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;
     }
@@ -535,7 +560,8 @@ 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;
     }
@@ -583,7 +609,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;
             }
         }
@@ -597,7 +623,14 @@ class Transfer {
         this.#focus_value = 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}));
+        this.#announce(
+            I18n.t("transfer.moved", {
+                title: side_title,
+                titles: titles.join(", "),
+                count: this.#markedItems().length,
+                total: this.#items.length,
+            })
+        );
         this.#notify();
         return this;
     }
@@ -651,4 +684,4 @@ class Transfer {
     };
 }
 
-exports.Transfer = Transfer
+exports.Transfer = Transfer;

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"];
@@ -80,21 +80,23 @@ class TreeTable {
     #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
-    }) {
+    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;
@@ -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.#visible_count, 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;
@@ -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;
@@ -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,7 +491,11 @@ 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() {
@@ -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");
@@ -611,9 +624,11 @@ 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)}));
+        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);
         return this;
     }
@@ -746,5 +761,4 @@ class TreeTable {
     };
 }
 
-exports.TreeTable = TreeTable
-
+exports.TreeTable = TreeTable;

package/framework/components/chui_tree_view/styles.css

@@ -81,7 +81,8 @@ 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;
@@ -115,7 +116,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 {