chuijs 4.0.1 → 4.0.3

package/framework/components/chui_command_palette/command_palette.js

@@ -1,8 +1,8 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y, ComboboxKeyboard} = require('../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y, ComboboxKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Командная строка (command palette): нечёткий поиск по списку команд и запуск
@@ -32,14 +32,22 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class CommandPalette {
     static #counter = 0;
     // Значения берутся лениво: язык может быть задан до сборки интерфейса, но уже после загрузки модуля
-    static get DEFAULT_LABEL() { return I18n.t("navigation.commandPalette"); }
-    static get DEFAULT_PLACEHOLDER() { return I18n.t("navigation.commandPlaceholder"); }
-    static get DEFAULT_EMPTY_TEXT() { return I18n.t("common.nothingFound"); }
+    static get DEFAULT_LABEL() {
+        return I18n.t("navigation.commandPalette");
+    }
+    static get DEFAULT_PLACEHOLDER() {
+        return I18n.t("navigation.commandPlaceholder");
+    }
+    static get DEFAULT_EMPTY_TEXT() {
+        return I18n.t("common.nothingFound");
+    }
     /** Сколько последних запущенных команд показывать отдельной группой */
     static MAX_RECENT = 4;
     /** По умолчанию показываем не больше столько совпадений */
     static DEFAULT_LIMIT = 50;
-    static get RECENT_GROUP() { return I18n.t("navigation.recentGroup"); }
+    static get RECENT_GROUP() {
+        return I18n.t("navigation.recentGroup");
+    }
 
     #id = undefined;
     // Занавес на всё окно: он же элемент слоя для OverlayA11y
@@ -71,18 +79,20 @@ class CommandPalette {
     #hotkey_handler = undefined;
     isOpen = false;
 
-    constructor(options = {
-        id: String(),
-        label: String(),
-        placeholder: String(),
-        emptyText: String(),
-        commands: [],
-        limit: Number(),
-        recent: Boolean(),
-        closeOnRun: Boolean(),
-        hotkey: String(),
-        onRun: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            label: String(),
+            placeholder: String(),
+            emptyText: String(),
+            commands: [],
+            limit: Number(),
+            recent: Boolean(),
+            closeOnRun: Boolean(),
+            hotkey: String(),
+            onRun: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_CommandPalette");
         CommandPalette.#counter += 1;
         // Пустая строка означает «не задана» — как у остальных опций-имён: иначе id слоя
@@ -90,7 +100,8 @@ class CommandPalette {
         this.#id = optionOr(options.id, `chui_command_palette_${CommandPalette.#counter}`);
         this.#palette.id = this.#id;
         this.#label = optionOr(options.label, CommandPalette.DEFAULT_LABEL);
-        this.#placeholder = options.placeholder === undefined ? CommandPalette.DEFAULT_PLACEHOLDER : options.placeholder;
+        this.#placeholder =
+            options.placeholder === undefined ? CommandPalette.DEFAULT_PLACEHOLDER : options.placeholder;
         this.#empty_text = options.emptyText === undefined ? CommandPalette.DEFAULT_EMPTY_TEXT : options.emptyText;
         this.#limit = options.limit === undefined ? CommandPalette.DEFAULT_LIMIT : options.limit;
         this.#recent_enabled = options.recent === undefined ? true : options.recent;
@@ -118,13 +129,13 @@ class CommandPalette {
         this.#a11y = new OverlayA11y(this.#palette, {
             role: "dialog",
             label: this.#label,
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         // Клавиатурный слой списка: стрелки, Home/End, Enter по активной команде
         this.#keyboard = new ComboboxKeyboard(this.#input, {
             dropdown: this.#list,
             optionSelector: "command_palette_option",
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         // Enter до выбора стрелками запускает первую найденную команду
         this.#input.addEventListener("keydown", this.#onInputKeyDown);
@@ -340,7 +351,7 @@ class CommandPalette {
             icon: command.icon,
             keywords: command.keywords,
             shortcut: command.shortcut,
-            run: command.run
+            run: command.run,
         };
     }
 
@@ -358,7 +369,7 @@ class CommandPalette {
             // `id` часто латинский — по нему удобно искать в русском интерфейсе («graphs»)
             [command.id, 2],
             [command.subtitle, 1],
-            [command.group, 1]
+            [command.group, 1],
         ];
         let best = -1;
         for (const [value, weight] of fields) {
@@ -380,7 +391,11 @@ class CommandPalette {
         for (const char of needle) {
             const found = haystack.indexOf(char, position);
             if (found === -1) return -1;
-            const at_word_start = found === 0 || haystack[found - 1] === " " || haystack[found - 1] === "-" || haystack[found - 1] === "/";
+            const at_word_start =
+                found === 0 ||
+                haystack[found - 1] === " " ||
+                haystack[found - 1] === "-" ||
+                haystack[found - 1] === "/";
             score += found === previous + 1 ? 6 : 1;
             if (at_word_start) score += 4;
             previous = found;
@@ -390,7 +405,11 @@ class CommandPalette {
     }
 
     static #isHotkey(event = Object(), hotkey = String()) {
-        const parts = hotkey.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+        const parts = hotkey
+            .toLowerCase()
+            .split("+")
+            .map((part) => part.trim())
+            .filter(Boolean);
         if (parts.length === 0) return false;
         const key = parts[parts.length - 1];
         const mod = parts.includes("mod") || parts.includes("ctrl") || parts.includes("cmd") || parts.includes("meta");
@@ -417,12 +436,12 @@ class CommandPalette {
         }
         let result = [...groups].map(([name, commands]) => ({
             name: name,
-            commands: commands.slice().sort((left, right) => scores.get(right) - scores.get(left))
+            commands: commands.slice().sort((left, right) => scores.get(right) - scores.get(left)),
         }));
         // «Недавние» показываем только на пустом запросе: иначе они мешают релевантности
         if (this.#recent_enabled && query.trim() === "" && this.#recent.length > 0) {
             const recent = this.#recent.map((id) => this.getCommand(id)).filter((command) => command !== undefined);
-            if (recent.length > 0) result = [{name: CommandPalette.RECENT_GROUP, commands: recent}, ...result];
+            if (recent.length > 0) result = [{ name: CommandPalette.RECENT_GROUP, commands: recent }, ...result];
         }
         return result;
     }
@@ -456,11 +475,12 @@ class CommandPalette {
         // Пустой список убираем совсем: иначе он делит высоту с надписью и та съезжает вниз
         this.#list.hidden = found === 0;
         // Скрытый live-регион: скринридер слышит, сколько команд нашлось
-        this.#status.innerText = found === 0
-            ? this.#empty_text
-            : (query.trim() === ""
-                ? I18n.t("navigation.commandsFound", {count: found})
-                : I18n.t("navigation.commandsFoundFor", {count: found, query: query.trim()}));
+        this.#status.innerText =
+            found === 0
+                ? this.#empty_text
+                : query.trim() === ""
+                  ? I18n.t("navigation.commandsFound", { count: found })
+                  : I18n.t("navigation.commandsFoundFor", { count: found, query: query.trim() });
         this.#keyboard.refresh();
         return this;
     }
@@ -495,7 +515,10 @@ class CommandPalette {
 
     #run(command = Object()) {
         if (this.#recent_enabled) {
-            this.#recent = [command.id, ...this.#recent.filter((id) => id !== command.id)].slice(0, CommandPalette.MAX_RECENT);
+            this.#recent = [command.id, ...this.#recent.filter((id) => id !== command.id)].slice(
+                0,
+                CommandPalette.MAX_RECENT
+            );
         }
         // Слой закрывается до запуска: команда может открыть свой диалог, и фокус
         // вернётся на элемент, который открывал палитру, а не в закрывающуюся панель
@@ -532,4 +555,4 @@ class CommandPalette {
     };
 }
 
-exports.CommandPalette = CommandPalette
+exports.CommandPalette = CommandPalette;

package/framework/components/chui_console/console.js

@@ -1,9 +1,9 @@
 class Console {
     #chui_console = document.createElement(`chui_console`);
     constructor(options = { width: String(), height: String(), label: String() }) {
-        const {setStyles, optionOr} = require('../../modules/chui_functions');
-        const {I18n} = require('../../modules/chui_i18n/chui_i18n');
-        setStyles(__dirname + "/styles.css", 'chUiJS_console');
+        const { setStyles, optionOr } = require("../../modules/chui_functions");
+        const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+        setStyles(__dirname + "/styles.css", "chUiJS_console");
         // Журнал — не только картинка: строки добавляются одна за другой, поэтому у области
         // есть роль и имя, а скринридер объявляет дописанное (было безымянное полотно)
         this.#chui_console.setAttribute("role", "log");
@@ -18,11 +18,11 @@ class Console {
     addText(text = String()) {
         const chui_console_text = document.createElement(`chui_console_text`);
         chui_console_text.innerText = text;
-        this.#chui_console.appendChild(chui_console_text)
+        this.#chui_console.appendChild(chui_console_text);
     }
     set() {
         return this.#chui_console;
     }
 }
 
-exports.Console = Console
+exports.Console = Console;

package/framework/components/chui_console/styles.css

@@ -29,4 +29,4 @@ chui_console_text {
     padding: var(--control_padding);
     text-align: start;
     user-select: text;
-}
+}

package/framework/components/chui_content_block/content_block.js

@@ -1,17 +1,19 @@
-const {Animation} = require("../../modules/chui_animations/animations");
+const { Animation } = require("../../modules/chui_animations/animations");
 
 class ContentBlock {
     #body = document.createElement(`contentblock`);
     #disableMarginChild = false;
-    constructor(options = {
-        display: String(),
-        direction: String(),
-        wrap: String(),
-        align: String(),
-        justify: String(),
-        disableMarginChild: Boolean(),
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ContentBlock');
+    constructor(
+        options = {
+            display: String(),
+            direction: String(),
+            wrap: String(),
+            align: String(),
+            justify: String(),
+            disableMarginChild: Boolean(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_ContentBlock");
         if (options.display !== undefined) this.#body.style.display = options.display;
         if (options.direction !== undefined) this.#body.style.flexDirection = options.direction;
         if (options.wrap !== undefined) this.#body.style.flexWrap = options.wrap;
@@ -31,20 +33,32 @@ class ContentBlock {
     }
     add(...components) {
         for (let component of components) {
-            new Animation(component.set()).fadeIn()
-            this.#body.appendChild(component.set())
+            new Animation(component.set()).fadeIn();
+            this.#body.appendChild(component.set());
         }
     }
-    clear() { this.#body.innerHTML = ''; }
+    clear() {
+        this.#body.innerHTML = "";
+    }
     // SETS
     setAutoOverflow(boolean = Boolean(false)) {
         this.#body.classList.toggle("contentblock_auto_overflow", boolean === true);
     }
-    setContentEditable(boolean= Boolean(false)) { this.#body.setAttribute('contenteditable', boolean); }
-    setWidth(width = String()) { this.#body.style.width = width; }
-    setHeight(height = String()) { this.#body.style.height = height; }
-    setPadding(value = String()) { this.#body.style.padding = value; }
-    set() { return this.#body; }
+    setContentEditable(boolean = Boolean(false)) {
+        this.#body.setAttribute("contenteditable", boolean);
+    }
+    setWidth(width = String()) {
+        this.#body.style.width = width;
+    }
+    setHeight(height = String()) {
+        this.#body.style.height = height;
+    }
+    setPadding(value = String()) {
+        this.#body.style.padding = value;
+    }
+    set() {
+        return this.#body;
+    }
 }
 
-exports.ContentBlock = ContentBlock
+exports.ContentBlock = ContentBlock;

package/framework/components/chui_content_block/styles.css

@@ -1,5 +1,5 @@
 contentblock {
-    display: flex
+    display: flex;
 }
 
 /* Опция `disableMarginChild`: внешние отступы детей снимает CSS, а не обход детей в JS
@@ -11,4 +11,4 @@ contentblock.contentblock_no_margin > * {
 /* `setAutoOverflow(true)` */
 contentblock.contentblock_auto_overflow {
     overflow: auto;
-}
+}

package/framework/components/chui_context_menu/context_menu.js

@@ -25,7 +25,7 @@ class ContextMenu {
             itemSelector: "context_menu_item",
             submenuSelector: "context_menu_submenu",
             onSubmenuOpen: (row) => this.#openSubMenu(row),
-            onEscape: () => this.hide()
+            onEscape: () => this.hide(),
         });
         document.body.appendChild(this.#menu);
     }
@@ -87,7 +87,7 @@ class ContextMenu {
                     onSubmenuOpen: (inner_row) => this.#openSubMenu(inner_row),
                     onEscape: () => this.#closeSubMenu(row),
                     submenu: true,
-                    trigger: row
+                    trigger: row,
                 });
                 row.addEventListener("mouseenter", () => this.#openSubMenu(row));
                 row.addEventListener("mouseleave", () => this.#closeSubMenu(row));
@@ -250,8 +250,13 @@ class ContextMenu {
      */
     #restoreFocus() {
         const target = this.#return_focus;
-        if (target !== undefined && target !== null && document.body.contains(target) &&
-            typeof target.matches === "function" && target.matches(A11Y_FOCUSABLE_SELECTOR)) {
+        if (
+            target !== undefined &&
+            target !== null &&
+            document.body.contains(target) &&
+            typeof target.matches === "function" &&
+            target.matches(A11Y_FOCUSABLE_SELECTOR)
+        ) {
             target.focus();
             return;
         }

package/framework/components/chui_custom_element/custom_element.js

@@ -1,32 +1,39 @@
 class CustomElement {
-    #chui_custom_element = undefined
-    constructor(options = {
-        tag: String(), id: String(), className: String(), pathToCSS: String()
-    }) {
-        const {setStyles, optionOr} = require('../../modules/chui_functions');
+    #chui_custom_element = undefined;
+    constructor(
+        options = {
+            tag: String(),
+            id: String(),
+            className: String(),
+            pathToCSS: String(),
+        }
+    ) {
+        const { setStyles, optionOr } = require("../../modules/chui_functions");
         // Пустая заготовка опции равносильна отсутствующей: `createElement("")` падал TypeError
         const tag = optionOr(options.tag, undefined);
-        if (tag === undefined) throw new Error("Не установлен тэг элемента")
+        if (tag === undefined) throw new Error("Не установлен тэг элемента");
         this.#chui_custom_element = document.createElement(tag);
         const id = optionOr(options.id, undefined);
-        if (id === undefined) throw new Error("Не установлен идентификатор элемента")
+        if (id === undefined) throw new Error("Не установлен идентификатор элемента");
         // Файл стилей — необязательная опция: пустой путь читался как файл и падал ENOENT
         const path_to_css = optionOr(options.pathToCSS, undefined);
-        if (path_to_css !== undefined) setStyles(path_to_css, `chUiJS_CustomElement_${id}`)
-        this.#chui_custom_element.id = id
+        if (path_to_css !== undefined) setStyles(path_to_css, `chUiJS_CustomElement_${id}`);
+        this.#chui_custom_element.id = id;
         const class_name = optionOr(options.className, undefined);
-        if (class_name !== undefined) this.#chui_custom_element.className = class_name
+        if (class_name !== undefined) this.#chui_custom_element.className = class_name;
     }
     addEventListener(type = String(), listener = () => {}) {
-        this.#chui_custom_element.addEventListener(type, listener)
+        this.#chui_custom_element.addEventListener(type, listener);
     }
     innerText(innerText = String()) {
-        this.#chui_custom_element.innerText = innerText
+        this.#chui_custom_element.innerText = innerText;
     }
     innerHTML(innerHTML = String()) {
-        this.#chui_custom_element.innerHTML = innerHTML
+        this.#chui_custom_element.innerHTML = innerHTML;
+    }
+    set() {
+        return this.#chui_custom_element;
     }
-    set() { return this.#chui_custom_element }
 }
 
-exports.CustomElement = CustomElement
+exports.CustomElement = CustomElement;