chuijs 4.0.2 → 4.0.3

package/framework/components/chui_file_explorer/file_explorer.js

@@ -1,17 +1,17 @@
 const fs = require("fs");
 const node_path = require("path");
-const {setStyles, formatBytes, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {Breadcrumb} = require("../chui_breadcrumb/breadcrumb");
-const {RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, formatBytes, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Breadcrumb } = require("../chui_breadcrumb/breadcrumb");
+const { RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Вид записи: папка или файл */
-const TYPE = {FOLDER: "folder", FILE: "file"};
+const TYPE = { FOLDER: "folder", FILE: "file" };
 /** Колонка сортировки */
-const SORT = {NAME: "name", SIZE: "size", MODIFIED: "modified"};
+const SORT = { NAME: "name", SIZE: "size", MODIFIED: "modified" };
 /** Направление сортировки */
-const DIRECTION = {ASC: "asc", DESC: "desc"};
+const DIRECTION = { ASC: "asc", DESC: "desc" };
 
 /** Значок по расширению: одна таблица на все виды файлов */
 const ICON_BY_EXTENSION = {
@@ -20,7 +20,7 @@ const ICON_BY_EXTENSION = {
     audio: "mp3 wav ogg flac m4a aac",
     video: "mp4 mkv avi webm mov",
     text: "md txt rtf pdf doc docx odt",
-    code: "js mjs ts tsx jsx json css html htm php py rb java c cpp h sh sql yml yaml"
+    code: "js mjs ts tsx jsx json css html htm php py rb java c cpp h sh sql yml yaml",
 };
 
 /**
@@ -93,7 +93,7 @@ class FileExplorer {
     #selected = new Set();
     #anchor = undefined;
     #filter = "";
-    #sort = {key: SORT.NAME, direction: DIRECTION.ASC};
+    #sort = { key: SORT.NAME, direction: DIRECTION.ASC };
     #show_hidden = false;
     #loading = false;
     #load_token = 0;
@@ -112,26 +112,28 @@ class FileExplorer {
     #on_select = undefined;
     #roving = undefined;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        path: String(),
-        root: String(),
-        provider: undefined,
-        filter: String(),
-        sort: Object(),
-        showHidden: Boolean,
-        selectable: Boolean,
-        showSize: Boolean,
-        showModified: Boolean,
-        height: String(),
-        emptyText: String(),
-        errorText: String(),
-        onOpen: undefined,
-        onSelect: undefined,
-        changeListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            path: String(),
+            root: String(),
+            provider: undefined,
+            filter: String(),
+            sort: Object(),
+            showHidden: Boolean,
+            selectable: Boolean,
+            showSize: Boolean,
+            showModified: Boolean,
+            height: String(),
+            emptyText: String(),
+            errorText: String(),
+            onOpen: undefined,
+            onSelect: undefined,
+            changeListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_FileExplorer");
         FileExplorer.#counter += 1;
         this.#id = options.id === undefined ? `chui_file_explorer_${FileExplorer.#counter}` : options.id;
@@ -169,7 +171,7 @@ class FileExplorer {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#buildHead();
-        this.#path_bar = new Breadcrumb({label: I18n.t("fileExplorer.path")});
+        this.#path_bar = new Breadcrumb({ label: I18n.t("fileExplorer.path") });
         this.#path_bar.set().classList.add("file_explorer_path");
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#head);
@@ -204,7 +206,7 @@ class FileExplorer {
     /** Провайдер по умолчанию: настоящая файловая система */
     static localProvider() {
         return (path) => {
-            const list = fs.readdirSync(String(path), {withFileTypes: true});
+            const list = fs.readdirSync(String(path), { withFileTypes: true });
             return list.map((entry) => {
                 const full = node_path.join(String(path), entry.name);
                 let size;
@@ -224,7 +226,7 @@ class FileExplorer {
                     type: entry.isDirectory() ? TYPE.FOLDER : TYPE.FILE,
                     size: size,
                     modified: modified,
-                    hidden: entry.name.startsWith(".")
+                    hidden: entry.name.startsWith("."),
                 };
             });
         };
@@ -282,7 +284,7 @@ class FileExplorer {
     }
 
     getSort() {
-        return {key: this.#sort.key, direction: this.#sort.direction};
+        return { key: this.#sort.key, direction: this.#sort.direction };
     }
 
     isShowHidden() {
@@ -309,12 +311,12 @@ class FileExplorer {
     getErrorText() {
         if (this.#error_object === undefined) return "";
         const message = this.#error_object instanceof Error ? this.#error_object.message : String(this.#error_object);
-        return I18n.t("fileExplorer.readFailed", {message: message});
+        return I18n.t("fileExplorer.readFailed", { message: message });
     }
 
     /** История переходов и место в ней — для кнопок «назад/вперёд» */
     getHistory() {
-        return {paths: [...this.#history], index: this.#history_index};
+        return { paths: [...this.#history], index: this.#history_index };
     }
 
     canGoBack() {
@@ -407,7 +409,10 @@ class FileExplorer {
     setShowHidden(shown = Boolean()) {
         this.#show_hidden = shown === true;
         this.#hidden.setAttribute("aria-pressed", this.#show_hidden ? "true" : "false");
-        this.#hidden.setAttribute("aria-label", this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden"));
+        this.#hidden.setAttribute(
+            "aria-label",
+            this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
+        );
         this.#render();
         this.#announceState();
         return this;
@@ -416,7 +421,9 @@ class FileExplorer {
     setSelected(paths = Array(), silent = false) {
         if (!this.#selectable) return this;
         const allowed = new Set(this.#entries.map((entry) => entry.path));
-        this.#selected = new Set((Array.isArray(paths) ? paths : []).map((path) => String(path)).filter((path) => allowed.has(path)));
+        this.#selected = new Set(
+            (Array.isArray(paths) ? paths : []).map((path) => String(path)).filter((path) => allowed.has(path))
+        );
         this.#anchor = this.#selected.size === 0 ? undefined : [...this.#selected][this.#selected.size - 1];
         this.#applySelection();
         if (silent === false) this.#notifySelect();
@@ -431,7 +438,7 @@ class FileExplorer {
     open(entry = Object()) {
         if (entry === undefined || entry === null) return this;
         if (entry.type === TYPE.FOLDER) return this.go(entry.path);
-        this.#announce(I18n.t("fileExplorer.openedFile", {name: entry.name}));
+        this.#announce(I18n.t("fileExplorer.openedFile", { name: entry.name }));
         if (this.#on_open !== undefined) this.#on_open(Object.assign({}, entry), this);
         return this;
     }
@@ -443,13 +450,13 @@ class FileExplorer {
     }
 
     /** Загрузка папки: промис разрешается, когда данные пришли (устаревший ответ отбрасывается) */
-    async load(path = String(), options = {history: true, keepSelection: false}) {
+    async load(path = String(), options = { history: true, keepSelection: false }) {
         const target = path === undefined || path === null || path === "" ? this.#path : String(path);
         const token = this.#load_token + 1;
         this.#load_token = token;
         this.#loading = true;
         this.#grid.setAttribute("aria-busy", "true");
-        this.#status.innerText = I18n.t("fileExplorer.loading", {target: target});
+        this.#status.innerText = I18n.t("fileExplorer.loading", { target: target });
         let list;
         try {
             list = await Promise.resolve(this.#provider(target));
@@ -460,7 +467,9 @@ class FileExplorer {
             this.#error_object = error;
             this.#path = target;
             this.#render();
-            this.#announce(I18n.t("fileExplorer.readFailed", {message: error instanceof Error ? error.message : String(error)}));
+            this.#announce(
+                I18n.t("fileExplorer.readFailed", { message: error instanceof Error ? error.message : String(error) })
+            );
             return this;
         }
         if (token !== this.#load_token) return this;
@@ -481,13 +490,13 @@ class FileExplorer {
     back() {
         if (!this.canGoBack()) return this;
         this.#history_index -= 1;
-        return this.load(this.#history[this.#history_index], {history: false});
+        return this.load(this.#history[this.#history_index], { history: false });
     }
 
     forward() {
         if (!this.canGoForward()) return this;
         this.#history_index += 1;
-        return this.load(this.#history[this.#history_index], {history: false});
+        return this.load(this.#history[this.#history_index], { history: false });
     }
 
     /** На уровень выше; выше корня не поднимаемся */
@@ -498,7 +507,7 @@ class FileExplorer {
 
     /** Перечитать текущую папку, сохранив выбор */
     refresh() {
-        return this.load(this.#path, {history: false, keepSelection: true});
+        return this.load(this.#path, { history: false, keepSelection: true });
     }
 
     /** Фокус на запись по пути (или на первую видимую) */
@@ -526,7 +535,8 @@ class FileExplorer {
     static #normalize(list = Array(), path = String()) {
         const source = Array.isArray(list) ? list : [];
         return source.map((item, index) => {
-            const entry = typeof item === "string" ? {name: item} : (item === null || typeof item !== "object" ? {} : item);
+            const entry =
+                typeof item === "string" ? { name: item } : item === null || typeof item !== "object" ? {} : item;
             const name = entry.name === undefined ? String(index) : String(entry.name);
             return {
                 name: name,
@@ -535,7 +545,7 @@ class FileExplorer {
                 size: entry.size === undefined ? undefined : Number(entry.size),
                 modified: entry.modified === undefined ? undefined : entry.modified,
                 hidden: entry.hidden === undefined ? name.startsWith(".") : entry.hidden === true,
-                icon: entry.icon
+                icon: entry.icon,
             };
         });
     }
@@ -590,7 +600,8 @@ class FileExplorer {
     #compare(a = Object(), b = Object()) {
         const direction = this.#sort.direction === DIRECTION.DESC ? -1 : 1;
         if (a.type !== b.type) return a.type === TYPE.FOLDER ? -1 : 1;
-        if (this.#sort.key === SORT.NAME) return direction * a.name.localeCompare(b.name, "ru", {numeric: true, sensitivity: "base"});
+        if (this.#sort.key === SORT.NAME)
+            return direction * a.name.localeCompare(b.name, "ru", { numeric: true, sensitivity: "base" });
         const value = (entry) => {
             if (this.#sort.key === SORT.SIZE) return entry.size === undefined ? undefined : Number(entry.size);
             if (entry.modified === undefined || entry.modified === null) return undefined;
@@ -599,7 +610,8 @@ class FileExplorer {
         };
         const left = value(a);
         const right = value(b);
-        if (left === undefined && right === undefined) return direction * a.name.localeCompare(b.name, "ru", {numeric: true});
+        if (left === undefined && right === undefined)
+            return direction * a.name.localeCompare(b.name, "ru", { numeric: true });
         if (left === undefined) return 1;
         if (right === undefined) return -1;
         return direction * (left - right);
@@ -607,16 +619,29 @@ class FileExplorer {
 
     #visibleEntries() {
         const filter = this.#filter.trim().toLowerCase();
-        const list = this.#entries.filter((entry) => (this.#show_hidden || entry.hidden !== true) &&
-            (filter === "" || entry.name.toLowerCase().includes(filter)));
+        const list = this.#entries.filter(
+            (entry) =>
+                (this.#show_hidden || entry.hidden !== true) &&
+                (filter === "" || entry.name.toLowerCase().includes(filter))
+        );
         return list.sort((a, b) => this.#compare(a, b));
     }
 
     #buildHead() {
-        this.#actions.appendChild(this.#navButton(this.#back, Icons.NAVIGATION.ARROW_BACK, I18n.t("a11y.previous"), () => this.back()));
-        this.#actions.appendChild(this.#navButton(this.#forward, Icons.NAVIGATION.ARROW_FORWARD, I18n.t("a11y.next"), () => this.forward()));
-        this.#actions.appendChild(this.#navButton(this.#up, Icons.NAVIGATION.ARROW_UPWARD, I18n.t("fileExplorer.up"), () => this.up()));
-        this.#actions.appendChild(this.#navButton(this.#refresh, Icons.NAVIGATION.REFRESH, I18n.t("fileExplorer.refresh"), () => this.refresh()));
+        this.#actions.appendChild(
+            this.#navButton(this.#back, Icons.NAVIGATION.ARROW_BACK, I18n.t("a11y.previous"), () => this.back())
+        );
+        this.#actions.appendChild(
+            this.#navButton(this.#forward, Icons.NAVIGATION.ARROW_FORWARD, I18n.t("a11y.next"), () => this.forward())
+        );
+        this.#actions.appendChild(
+            this.#navButton(this.#up, Icons.NAVIGATION.ARROW_UPWARD, I18n.t("fileExplorer.up"), () => this.up())
+        );
+        this.#actions.appendChild(
+            this.#navButton(this.#refresh, Icons.NAVIGATION.REFRESH, I18n.t("fileExplorer.refresh"), () =>
+                this.refresh()
+            )
+        );
         this.#head.appendChild(this.#actions);
         this.#search.className = "file_explorer_search";
         this.#search.type = "search";
@@ -645,14 +670,20 @@ class FileExplorer {
         this.#hidden.className = "file_explorer_hidden";
         this.#hidden.type = "button";
         this.#hidden.setAttribute("aria-pressed", this.#show_hidden ? "true" : "false");
-        this.#hidden.setAttribute("aria-label", this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden"));
-        const glyph = new Icon(this.#show_hidden ? Icons.ACTIONS.VISIBILITY : Icons.ACTIONS.VISIBILITY_OFF, "18px").set();
+        this.#hidden.setAttribute(
+            "aria-label",
+            this.#show_hidden ? I18n.t("fileExplorer.hideHidden") : I18n.t("fileExplorer.showHidden")
+        );
+        const glyph = new Icon(
+            this.#show_hidden ? Icons.ACTIONS.VISIBILITY : Icons.ACTIONS.VISIBILITY_OFF,
+            "18px"
+        ).set();
         glyph.setAttribute("aria-hidden", "true");
         this.#hidden.appendChild(glyph);
         this.#hidden.addEventListener("click", () => this.setShowHidden(!this.#show_hidden));
         this.#head.appendChild(this.#hidden);
         // У панели одна остановка обхода: по кнопкам ходят стрелки/Home/End
-        this.#roving = new RovingKeyboard(this.#actions, {itemSelector: "button"});
+        this.#roving = new RovingKeyboard(this.#actions, { itemSelector: "button" });
         return this;
     }
 
@@ -672,27 +703,40 @@ class FileExplorer {
         const cell = document.createElement("file_explorer_head_cell");
         cell.className = "file_explorer_head_cell";
         cell.setAttribute("role", "columnheader");
-        cell.setAttribute("aria-sort", this.#sort.key === key
-            ? (this.#sort.direction === DIRECTION.DESC ? "descending" : "ascending")
-            : "none");
+        cell.setAttribute(
+            "aria-sort",
+            this.#sort.key === key ? (this.#sort.direction === DIRECTION.DESC ? "descending" : "ascending") : "none"
+        );
         const button = document.createElement("button");
         button.type = "button";
         button.className = "file_explorer_sort";
-        button.setAttribute("aria-label", I18n.t("fileExplorer.sortBy", {title: title}));
+        button.setAttribute("aria-label", I18n.t("fileExplorer.sortBy", { title: title }));
         const text = document.createElement("file_explorer_sort_title");
         text.innerText = title;
         button.appendChild(text);
         if (this.#sort.key === key) {
-            const glyph = new Icon(this.#sort.direction === DIRECTION.DESC ? Icons.NAVIGATION.ARROW_DOWNWARD : Icons.NAVIGATION.ARROW_UPWARD, "16px").set();
+            const glyph = new Icon(
+                this.#sort.direction === DIRECTION.DESC
+                    ? Icons.NAVIGATION.ARROW_DOWNWARD
+                    : Icons.NAVIGATION.ARROW_UPWARD,
+                "16px"
+            ).set();
             glyph.setAttribute("aria-hidden", "true");
             button.appendChild(glyph);
         }
         button.addEventListener("click", () => {
             // Повторный клик по активной колонке переворачивает порядок: «без сортировки»
             // у списка файлов смысла не имеет, поэтому цикла из трёх состояний здесь нет
-            if (this.#sort.key === key) this.setSort(key, this.#sort.direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC);
+            if (this.#sort.key === key)
+                this.setSort(key, this.#sort.direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC);
             else this.setSort(key, DIRECTION.ASC);
-            this.#announce(I18n.t("fileExplorer.sorted", {title: title, direction: this.#sort.direction === DIRECTION.ASC ? I18n.t("data.ascending") : I18n.t("data.descending")}));
+            this.#announce(
+                I18n.t("fileExplorer.sorted", {
+                    title: title,
+                    direction:
+                        this.#sort.direction === DIRECTION.ASC ? I18n.t("data.ascending") : I18n.t("data.descending"),
+                })
+            );
         });
         cell.appendChild(button);
         return cell;
@@ -713,9 +757,12 @@ class FileExplorer {
             return cell;
         }
         cell.classList.add("file_explorer_cell_meta");
-        cell.innerText = key === SORT.SIZE
-            ? (entry.size === undefined ? "" : formatBytes(entry.size))
-            : FileExplorer.#dateText(entry.modified);
+        cell.innerText =
+            key === SORT.SIZE
+                ? entry.size === undefined
+                    ? ""
+                    : formatBytes(entry.size)
+                : FileExplorer.#dateText(entry.modified);
         return cell;
     }
 
@@ -737,13 +784,17 @@ class FileExplorer {
     #render() {
         // Строки пересобираются, а фокус живёт на строке: запоминаем её до перерисовки
         const active = document.activeElement;
-        const focused = active === null || active === undefined || !this.#grid.contains(active) ? null : active.closest("file_explorer_row");
+        const focused =
+            active === null || active === undefined || !this.#grid.contains(active)
+                ? null
+                : active.closest("file_explorer_row");
         if (focused !== null) this.#focus_path = focused.dataset.path;
         this.#head_row.innerHTML = "";
         this.#body.innerHTML = "";
         this.#head_row.appendChild(this.#sortButton(SORT.NAME, I18n.t("fileExplorer.columnName")));
         if (this.#show_size) this.#head_row.appendChild(this.#sortButton(SORT.SIZE, I18n.t("fileExplorer.columnSize")));
-        if (this.#show_modified) this.#head_row.appendChild(this.#sortButton(SORT.MODIFIED, I18n.t("fileExplorer.columnModified")));
+        if (this.#show_modified)
+            this.#head_row.appendChild(this.#sortButton(SORT.MODIFIED, I18n.t("fileExplorer.columnModified")));
         // Ширины колонок задаёт компонент: сетка шапки и сетка строк обязаны совпасть,
         // а какие колонки показаны, знает только он
         const columns = ["minmax(0, 1fr)"];
@@ -757,7 +808,12 @@ class FileExplorer {
         this.#empty.innerText = this.isFiltered() ? I18n.t("common.nothingFound") : this.#empty_text;
         this.#error.hidden = this.#error_object === undefined;
         this.#error.innerText = this.getErrorText();
-        this.#grid.setAttribute("aria-label", I18n.t("fileExplorer.gridLabel", {path: this.#path === "" ? I18n.t("fileExplorer.noFolderInline") : this.#path}));
+        this.#grid.setAttribute(
+            "aria-label",
+            I18n.t("fileExplorer.gridLabel", {
+                path: this.#path === "" ? I18n.t("fileExplorer.noFolderInline") : this.#path,
+            })
+        );
         this.#grid.setAttribute("aria-rowcount", String(visible.length + 1));
         this.#grid.setAttribute("aria-busy", this.#loading ? "true" : "false");
         this.#back.disabled = !this.canGoBack();
@@ -772,31 +828,35 @@ class FileExplorer {
 
     #renderPath() {
         const items = this.#pathItems();
-        this.#path_bar.setItems(items.map((item, index) => (index === items.length - 1
-            ? {title: item.title}
-            : {title: item.title, clickEvent: () => this.go(item.path)})));
+        this.#path_bar.setItems(
+            items.map((item, index) =>
+                index === items.length - 1
+                    ? { title: item.title }
+                    : { title: item.title, clickEvent: () => this.go(item.path) }
+            )
+        );
         return this;
     }
 
     /** Звенья пути: с корнем оставляем только путь от него */
     #pathItems() {
         const full = String(this.#path);
-        if (full === "") return [{title: I18n.t("fileExplorer.noFolder"), path: ""}];
+        if (full === "") return [{ title: I18n.t("fileExplorer.noFolder"), path: "" }];
         const root = this.#root_path === undefined ? undefined : String(this.#root_path).replace(/[\\/]+$/, "");
         const items = [];
-        if (full.startsWith("/")) items.push({title: "/", path: "/"});
-        else if (/^[A-Za-z]:/.test(full)) items.push({title: `${full.slice(0, 2)}/`, path: `${full.slice(0, 2)}/`});
+        if (full.startsWith("/")) items.push({ title: "/", path: "/" });
+        else if (/^[A-Za-z]:/.test(full)) items.push({ title: `${full.slice(0, 2)}/`, path: `${full.slice(0, 2)}/` });
         const base = items.length > 0 ? items[0].path : "";
         const rest = full.slice(base.length).replace(/^[\\/]+/, "");
         let current = base;
         for (const part of rest.split(/[\\/]+/).filter((piece) => piece !== "")) {
-            current = current === "" ? part : (current.endsWith("/") ? `${current}${part}` : `${current}/${part}`);
-            items.push({title: part, path: current});
+            current = current === "" ? part : current.endsWith("/") ? `${current}${part}` : `${current}/${part}`;
+            items.push({ title: part, path: current });
         }
-        if (items.length === 0) items.push({title: full, path: full});
+        if (items.length === 0) items.push({ title: full, path: full });
         if (root !== undefined && root !== "") {
             const index = items.findIndex((item) => item.path === root);
-            if (index > 0) return [{title: items[index].title, path: root}].concat(items.slice(index + 1));
+            if (index > 0) return [{ title: items[index].title, path: root }].concat(items.slice(index + 1));
         }
         return items;
     }
@@ -839,7 +899,10 @@ class FileExplorer {
     }
 
     #currentRow(target = undefined) {
-        const row = target === undefined || target === null || typeof target.closest !== "function" ? null : target.closest("file_explorer_row");
+        const row =
+            target === undefined || target === null || typeof target.closest !== "function"
+                ? null
+                : target.closest("file_explorer_row");
         if (row !== null) return row;
         return this.#body.querySelector('file_explorer_row[tabindex="0"]');
     }
@@ -891,7 +954,11 @@ class FileExplorer {
 
     #notifySelect() {
         const entries = this.getSelected();
-        this.#announce(entries.length === 0 ? I18n.t("fileExplorer.selectionCleared") : I18n.t("fileExplorer.selectedCount", {count: entries.length}));
+        this.#announce(
+            entries.length === 0
+                ? I18n.t("fileExplorer.selectionCleared")
+                : I18n.t("fileExplorer.selectedCount", { count: entries.length })
+        );
         for (const listener of [...this.#listeners]) listener(entries, this);
         if (this.#on_select !== undefined) this.#on_select(entries, this);
         return this;
@@ -906,10 +973,14 @@ class FileExplorer {
         const visible = this.#visibleEntries().length;
         const total = this.#entries.filter((entry) => this.#show_hidden || entry.hidden !== true).length;
         if (this.isFiltered()) {
-            this.#status.innerText = visible === 0 ? I18n.t("common.nothingFound") : I18n.t("fileExplorer.foundCount", {found: visible, total: total});
+            this.#status.innerText =
+                visible === 0
+                    ? I18n.t("common.nothingFound")
+                    : I18n.t("fileExplorer.foundCount", { found: visible, total: total });
             return this;
         }
-        this.#status.innerText = visible === 0 ? this.#empty_text : I18n.t("fileExplorer.entriesCount", {count: visible});
+        this.#status.innerText =
+            visible === 0 ? this.#empty_text : I18n.t("fileExplorer.entriesCount", { count: visible });
         return this;
     }
 
@@ -1034,4 +1105,4 @@ class FileExplorer {
     };
 }
 
-exports.FileExplorer = FileExplorer
+exports.FileExplorer = FileExplorer;

package/framework/components/chui_file_explorer/styles.css

@@ -108,7 +108,8 @@ chui_file_explorer {
     height: var(--control_height);
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё */
-    padding-block: 0 0; padding-inline: 12px 40px;
+    padding-block: 0 0;
+    padding-inline: 12px 40px;
     border: 1px solid var(--border_color);
     border-radius: var(--border_radius);
     background: var(--element_background);

package/framework/components/chui_form/form.js

@@ -1,20 +1,22 @@
-const {Button} = require("../chui_button/button");
+const { Button } = require("../chui_button/button");
 
 class Form {
     #id = require("randomstring").generate();
-    #chui_form_main = document.createElement("chui_form_main")
-    #form = document.createElement("form")
+    #chui_form_main = document.createElement("chui_form_main");
+    #form = document.createElement("form");
     #components = [];
     #submit_event = undefined;
     #validate_on_submit = true;
-    constructor(options = {
-        action: String(),
-        method: String(),
-        components: [],
-        submitEvent: () => {},
-        validateOnSubmit: Boolean()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Forms');
+    constructor(
+        options = {
+            action: String(),
+            method: String(),
+            components: [],
+            submitEvent: () => {},
+            validateOnSubmit: Boolean(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Forms");
         this.#chui_form_main.id = this.#id;
         this.#chui_form_main.appendChild(this.#form);
 
@@ -43,7 +45,7 @@ class Form {
             }
         }
         if (this.#submit_event !== undefined) this.#submit_event(event, this.getValues(), this);
-    }
+    };
     /** Проверить все поля формы: сами ошибки выставляются в поля */
     validate() {
         this.clearErrors();
@@ -54,7 +56,11 @@ class Form {
             const result = field.validate();
             if (!result.valid) {
                 if (typeof field.setError === "function") field.setError(result.message);
-                errors.push({ name: typeof field.getName === "function" ? field.getName() : undefined, message: result.message, rule: result.rule });
+                errors.push({
+                    name: typeof field.getName === "function" ? field.getName() : undefined,
+                    message: result.message,
+                    rule: result.rule,
+                });
                 if (first === undefined && typeof field.focus === "function") first = field;
             }
         }
@@ -111,9 +117,13 @@ class Form {
         return this;
     }
     //addSubmitEvent(listener = () => {}) { this.#form.addEventListener("submit", listener); }
-    set() { return this.#chui_form_main }
-    static SubmitButton(title = String()) { return new SubmitButton(title); }
-    static METHOD = { GET: "GET", POST: "POST" }
+    set() {
+        return this.#chui_form_main;
+    }
+    static SubmitButton(title = String()) {
+        return new SubmitButton(title);
+    }
+    static METHOD = { GET: "GET", POST: "POST" };
 }
 
 /**
@@ -127,9 +137,11 @@ class Form {
 class SubmitButton {
     #button = undefined;
     constructor(title = String()) {
-        this.#button = new Button({title: title});
+        this.#button = new Button({ title: title });
+    }
+    set() {
+        return this.#button.set();
     }
-    set() { return this.#button.set(); }
 }
 
-exports.Form = Form
+exports.Form = Form;

package/framework/components/chui_form/styles.css

@@ -3,4 +3,4 @@ chui_form_main {
 }
 
 /* Своих правил для кнопки отправки нет: `SubmitButton` — это `Button`, у него вид
-   и состояния из framework/components/chui_button/styles.css */
+   и состояния из framework/components/chui_button/styles.css */