chuijs 4.0.2 → 4.0.4

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,20 +32,28 @@ 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
     #palette = document.createElement("chui_command_palette");
     #panel = document.createElement("command_palette_panel");
-    #input_box = document.createElement("command_palette_input");
+    #inputBox = document.createElement("command_palette_input");
     #input = document.createElement("input");
     // Область результатов: список и надпись «ничего не найдено» в одной рамке
     // (надпись центрируется в ней по вертикали, а высота панели не прыгает)
@@ -62,27 +70,29 @@ class CommandPalette {
     #query = "";
     #label = CommandPalette.DEFAULT_LABEL;
     #placeholder = CommandPalette.DEFAULT_PLACEHOLDER;
-    #empty_text = CommandPalette.DEFAULT_EMPTY_TEXT;
+    #emptyText = CommandPalette.DEFAULT_EMPTY_TEXT;
     #limit = CommandPalette.DEFAULT_LIMIT;
-    #recent_enabled = true;
-    #close_on_run = true;
-    #on_run = undefined;
+    #recentEnabled = true;
+    #closeOnRun = true;
+    #onRun = undefined;
     #hotkey = undefined;
-    #hotkey_handler = undefined;
+    #hotkeyHandler = 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,26 +100,27 @@ 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.#empty_text = options.emptyText === undefined ? CommandPalette.DEFAULT_EMPTY_TEXT : options.emptyText;
+        this.#placeholder =
+            options.placeholder === undefined ? CommandPalette.DEFAULT_PLACEHOLDER : options.placeholder;
+        this.#emptyText = 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;
-        this.#close_on_run = options.closeOnRun === undefined ? true : options.closeOnRun;
-        this.#on_run = options.onRun;
+        this.#recentEnabled = options.recent === undefined ? true : options.recent;
+        this.#closeOnRun = options.closeOnRun === undefined ? true : options.closeOnRun;
+        this.#onRun = options.onRun;
         // Поле поиска
         this.#list.id = `${this.#id}_list`;
         this.#input.type = "text";
         this.#input.setAttribute("autocomplete", "off");
         this.#input.placeholder = this.#placeholder;
         this.#input.id = `${this.#id}_input`;
-        this.#input_box.appendChild(new Icon(Icons.ACTIONS.SEARCH, "18px", "var(--text_color_disabled)").set());
-        this.#input_box.appendChild(this.#input);
-        this.#empty.innerText = this.#empty_text;
+        this.#inputBox.appendChild(new Icon(Icons.ACTIONS.SEARCH, "18px", "var(--text_color_disabled)").set());
+        this.#inputBox.appendChild(this.#input);
+        this.#empty.innerText = this.#emptyText;
         this.#empty.hidden = true;
         this.#status.classList.add("chui_visually_hidden");
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
-        this.#panel.appendChild(this.#input_box);
+        this.#panel.appendChild(this.#inputBox);
         this.#results.appendChild(this.#list);
         this.#results.appendChild(this.#empty);
         this.#results.appendChild(this.#status);
@@ -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);
@@ -148,7 +159,7 @@ class CommandPalette {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     getQuery() {
@@ -202,7 +213,7 @@ class CommandPalette {
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text;
+        this.#emptyText = text;
         this.#empty.innerText = text;
         return this;
     }
@@ -263,7 +274,7 @@ class CommandPalette {
         this.#query = "";
         this.#input.value = "";
         this.#apply("");
-        new Animation(this.#palette).fadeIn();
+        new Animation(this.#palette).panelIn();
         this.#a11y.open();
         this.#keyboard.setExpanded(true);
         this.#input.focus();
@@ -290,19 +301,19 @@ class CommandPalette {
     installHotkey(hotkey = String()) {
         this.uninstallHotkey();
         this.#hotkey = hotkey;
-        this.#hotkey_handler = (event) => {
+        this.#hotkeyHandler = (event) => {
             if (!CommandPalette.#isHotkey(event, this.#hotkey)) return;
             event.preventDefault();
             this.openAndClose();
         };
-        document.addEventListener("keydown", this.#hotkey_handler, true);
+        document.addEventListener("keydown", this.#hotkeyHandler, true);
         return this;
     }
 
     uninstallHotkey() {
-        if (this.#hotkey_handler !== undefined) {
-            document.removeEventListener("keydown", this.#hotkey_handler, true);
-            this.#hotkey_handler = undefined;
+        if (this.#hotkeyHandler !== undefined) {
+            document.removeEventListener("keydown", this.#hotkeyHandler, true);
+            this.#hotkeyHandler = undefined;
         }
         this.#hotkey = undefined;
         return this;
@@ -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,9 +391,13 @@ 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 atWordStart =
+                found === 0 ||
+                haystack[found - 1] === " " ||
+                haystack[found - 1] === "-" ||
+                haystack[found - 1] === "/";
             score += found === previous + 1 ? 6 : 1;
-            if (at_word_start) score += 4;
+            if (atWordStart) score += 4;
             previous = found;
             position = found + 1;
         }
@@ -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) {
+        if (this.#recentEnabled && 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.#emptyText
+                : query.trim() === ""
+                  ? I18n.t("navigation.commandsFound", { count: found })
+                  : I18n.t("navigation.commandsFoundFor", { count: found, query: query.trim() });
         this.#keyboard.refresh();
         return this;
     }
@@ -494,14 +514,17 @@ 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);
+        if (this.#recentEnabled) {
+            this.#recent = [command.id, ...this.#recent.filter((id) => id !== command.id)].slice(
+                0,
+                CommandPalette.MAX_RECENT
+            );
         }
         // Слой закрывается до запуска: команда может открыть свой диалог, и фокус
         // вернётся на элемент, который открывал палитру, а не в закрывающуюся панель
-        if (this.#close_on_run) this.close();
+        if (this.#closeOnRun) this.close();
         if (typeof command.run === "function") command.run(command);
-        if (this.#on_run !== undefined) this.#on_run(command, this);
+        if (this.#onRun !== undefined) this.#onRun(command, this);
     }
 
     #commandFromEvent(event = Object()) {
@@ -532,4 +555,4 @@ class CommandPalette {
     };
 }
 
-exports.CommandPalette = CommandPalette
+exports.CommandPalette = CommandPalette;

package/framework/components/chui_command_palette/styles.css

@@ -28,8 +28,8 @@ command_palette_input {
     display: flex;
     align-items: center;
     gap: 8px;
-    /* Строка поиска — хром панели, а не контрол: шаг `--main_padding`, а не `--main_padding_sm` */
-    padding: var(--main_padding);
+    /* Строка поиска — хром панели, а не контрол: шаг `--block_padding`, а не `--block_padding_sm` */
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -89,7 +89,7 @@ command_palette_option {
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     cursor: default;
 }
@@ -135,7 +135,7 @@ command_palette_option_subtitle {
 }
 
 command_palette_option.chui_a11y_active command_palette_option_subtitle {
-    color: var(--text_color_hover_disable);
+    color: var(--text_color_hover_disabled);
 }
 
 command_palette_shortcut {
@@ -150,7 +150,7 @@ command_palette_empty {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
 }

package/framework/components/chui_console/console.js

@@ -1,28 +1,28 @@
 class Console {
-    #chui_console = document.createElement(`chui_console`);
+    #chuiConsole = 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");
-        this.#chui_console.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.console")));
+        this.#chuiConsole.setAttribute("role", "log");
+        this.#chuiConsole.setAttribute("aria-label", optionOr(options.label, I18n.t("feedback.console")));
         // Пустая заготовка опции равносильна отсутствующей: `String()` в описании опций
         // доезжала до стилей, и размер молча оставался пустым
         const width = optionOr(options.width, undefined);
         const height = optionOr(options.height, undefined);
-        this.#chui_console.style.width = width === undefined ? "max-content" : width;
-        this.#chui_console.style.height = height === undefined ? "max-content" : height;
+        this.#chuiConsole.style.width = width === undefined ? "max-content" : width;
+        this.#chuiConsole.style.height = height === undefined ? "max-content" : height;
     }
     addText(text = String()) {
-        const chui_console_text = document.createElement(`chui_console_text`);
-        chui_console_text.innerText = text;
-        this.#chui_console.appendChild(chui_console_text)
+        const chuiConsoleText = document.createElement(`chui_console_text`);
+        chuiConsoleText.innerText = text;
+        this.#chuiConsole.appendChild(chuiConsoleText);
     }
     set() {
-        return this.#chui_console;
+        return this.#chuiConsole;
     }
 }
 
-exports.Console = Console
+exports.Console = Console;

package/framework/components/chui_console/styles.css

@@ -1,7 +1,7 @@
 chui_console {
     height: max-content;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     font-weight: 500;
     color: var(--text_color);
@@ -11,7 +11,7 @@ chui_console {
     user-select: text;
     border: 1px solid var(--border_color);
     padding: var(--control_padding);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 
     display: flex;
     flex-direction: column;
@@ -26,7 +26,10 @@ chui_console_text {
     width: -webkit-fill-available;
     white-space: break-spaces;
     word-wrap: break-word;
+    /* Новая строка журнала встаёт на место: кадр общий — см. `chui_appear_up`
+       в global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
     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;
@@ -21,7 +23,7 @@ class ContentBlock {
         if (this.#disableMarginChild) this.disableMarginChild();
     }
     remove(...components) {
-        for (let component of components) new Animation(component.set()).fadeOutAndRemove();
+        for (const component of components) new Animation(component.set()).fadeOutAndRemove();
     }
     // FUNCTIONS
     disableMarginChild() {
@@ -30,21 +32,33 @@ class ContentBlock {
         this.#body.classList.add("contentblock_no_margin");
     }
     add(...components) {
-        for (let component of components) {
-            new Animation(component.set()).fadeIn()
-            this.#body.appendChild(component.set())
+        for (const component of components) {
+            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;
-}
+}