chuijs 4.0.2 → 4.0.3

package/framework/components/chui_label/label.js

@@ -1,17 +1,19 @@
-const {setStyles, htmlToMarkdown, markdownToHtml, optionOr} = require('../../modules/chui_functions');
+const { setStyles, htmlToMarkdown, markdownToHtml, optionOr } = require("../../modules/chui_functions");
 
 class Label {
     #chui_label = document.createElement(`chui_label`);
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        textAlign: String(),
-        wordBreak: String(),
-        width: String(),
-        fontSize: String(),
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Label');
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            markdownText: String(),
+            textAlign: String(),
+            wordBreak: String(),
+            width: String(),
+            fontSize: String(),
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_Label");
         // Стили текста лейбла: пустая заготовка опции равносильна отсутствующей
         const text = optionOr(options.text, undefined);
         const markdown_text = optionOr(options.markdownText, undefined);
@@ -54,4 +56,4 @@ class Label {
     }
 }
 
-exports.Label = Label
+exports.Label = Label;

package/framework/components/chui_label/styles.css

@@ -3,10 +3,10 @@ chui_label {
     width: max-content;
     margin: var(--margin);
     font-size: var(--font_default_size);
-    font-weight:500;
+    font-weight: 500;
     color: var(--text_color);
 }
 
 chui_label p {
     margin: 0;
-}
+}

package/framework/components/chui_link/link.js

@@ -1,6 +1,6 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {Desktop} = require('../../modules/chui_services/desktop');
-const {Icon} = require('../chui_icons/icons');
+const { setStyles } = require("../../modules/chui_functions");
+const { Desktop } = require("../../modules/chui_services/desktop");
+const { Icon } = require("../chui_icons/icons");
 
 /**
  * Ссылка: текст, который открывает адрес во внешнем браузере или вызывает свой обработчик.
@@ -34,18 +34,20 @@ class Link {
     #disabled = false;
     #external = undefined;
 
-    constructor(options = {
-        id: String(),
-        text: String(),
-        href: String(),
-        icon: String(),
-        external: Boolean(),
-        disabled: Boolean(),
-        width: String(),
-        title: String(),
-        clickEvent: undefined,
-        clickListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            href: String(),
+            icon: String(),
+            external: Boolean(),
+            disabled: Boolean(),
+            width: String(),
+            title: String(),
+            clickEvent: undefined,
+            clickListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Link");
         Link.#counter += 1;
         this.#id = options.id === undefined ? `chui_link_${Link.#counter}` : options.id;
@@ -120,9 +122,12 @@ class Link {
         if (this.#icon !== undefined) this.#icon.remove();
         this.#icon = undefined;
         if (icon === undefined) return this;
-        this.#icon = typeof icon === "string"
-            ? new Icon(icon, "14px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        this.#icon =
+            typeof icon === "string"
+                ? new Icon(icon, "14px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         this.#icon.setAttribute("aria-hidden", "true");
         this.#root.appendChild(this.#icon);
         return this;
@@ -192,9 +197,11 @@ class Link {
         // Своё окно Electron для внешней ссылки не открываем: отдаём адрес системе
         event.preventDefault();
         Desktop.shell.openExternal(this.#href).catch((error) => {
-            require('../../modules/chui_logger/chui_logger').Log.error(`Link: не удалось открыть «${this.#href}»: ${error}`);
+            require("../../modules/chui_logger/chui_logger").Log.error(
+                `Link: не удалось открыть «${this.#href}»: ${error}`
+            );
         });
     };
 }
 
-exports.Link = Link
+exports.Link = Link;

package/framework/components/chui_list/list.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon} = require("../chui_icons/icons");
-const {makeKeyboardButton, RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { makeKeyboardButton, RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Список: строки с подписью, пояснением, значком и хвостовым значением.
@@ -22,8 +22,8 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
  * new List({ selectable: true, label: 'Сортировка', items: ['Имя', 'Дата', 'Размер'] });
  * ```
  *
-* Слушателей вне своих узлов нет, поэтому `destroy()` не нужен.
-*/
+ * Слушателей вне своих узлов нет, поэтому `destroy()` не нужен.
+ */
 class List {
     static #counter = 0;
 
@@ -37,14 +37,16 @@ class List {
     #listeners = [];
     #roving = undefined;
 
-    constructor(options = {
-        id: String(),
-        label: String(),
-        selectable: Boolean(),
-        items: [],
-        onSelect: undefined,
-        changeEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            label: String(),
+            selectable: Boolean(),
+            items: [],
+            onSelect: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_List");
         List.#counter += 1;
         this.#id = options.id === undefined ? `chui_list_${List.#counter}` : options.id;
@@ -55,7 +57,7 @@ class List {
         this.#on_select = options.onSelect;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         // Клавиатура списка выборов: одна остановка Tab на список
-        if (this.#selectable) this.#roving = new RovingKeyboard(this.#root, {itemSelector: "chui_list_item"});
+        if (this.#selectable) this.#roving = new RovingKeyboard(this.#root, { itemSelector: "chui_list_item" });
         this.setItems(options.items);
     }
 
@@ -165,7 +167,7 @@ class List {
 
     static #toItem(item) {
         if (item instanceof ListItem) return item;
-        return new ListItem(typeof item === "string" ? {title: item} : item);
+        return new ListItem(typeof item === "string" ? { title: item } : item);
     }
 }
 
@@ -186,15 +188,17 @@ class ListItem {
     #click_event = undefined;
     #disabled = false;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        subtitle: String(),
-        icon: String(),
-        meta: String(),
-        disabled: Boolean(),
-        clickEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            subtitle: String(),
+            icon: String(),
+            meta: String(),
+            disabled: Boolean(),
+            clickEvent: undefined,
+        }
+    ) {
         ListItem.#counter += 1;
         this.#root.id = options.id === undefined ? `chui_list_item_${ListItem.#counter}` : options.id;
         this.#click_event = options.clickEvent;
@@ -318,5 +322,5 @@ class ListItem {
     static ICON_SIZE = "18px";
 }
 
-exports.List = List
-exports.ListItem = ListItem
+exports.List = List;
+exports.ListItem = ListItem;

package/framework/components/chui_list/styles.css

@@ -98,7 +98,8 @@ chui_list_item:has(.list_item_button):active {
     color: var(--text_color_hover);
 }
 
-.list_item_button:focus-visible, chui_list_item:focus-visible {
+.list_item_button:focus-visible,
+chui_list_item:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }

package/framework/components/chui_markdown_editor/markdown_editor.js

@@ -1,32 +1,32 @@
-const {setStyles, markdownToHtml} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, markdownToHtml } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Действия панели разметки: ключ подписи, значок, сочетание и правка */
 const ACTIONS = [
-    {id: "bold", labelKey: "editor.bold", icon: Icons.EDITOR.FORMAT_BOLD, shortcut: "Control+B"},
-    {id: "italic", labelKey: "editor.italic", icon: Icons.EDITOR.FORMAT_ITALIC, shortcut: "Control+I"},
-    {id: "strike", labelKey: "editor.strikethrough", icon: Icons.EDITOR.STRIKETHROUGH_S},
-    {id: "heading", labelKey: "editor.heading", icon: Icons.EDITOR.TITLE},
-    {id: "quote", labelKey: "editor.quote", icon: Icons.EDITOR.FORMAT_QUOTE},
-    {id: "bullets", labelKey: "editor.list", icon: Icons.EDITOR.FORMAT_LIST_BULLETED},
-    {id: "numbers", labelKey: "editor.orderedList", icon: Icons.EDITOR.FORMAT_LIST_NUMBERED},
-    {id: "checklist", labelKey: "editor.checklist", icon: Icons.EDITOR.CHECKLIST},
-    {id: "code", labelKey: "editor.code", icon: Icons.ACTIONS.CODE},
-    {id: "codeblock", labelKey: "editor.codeBlock", icon: Icons.ACTIONS.TERMINAL},
-    {id: "link", labelKey: "editor.link", icon: Icons.EDITOR.INSERT_LINK, shortcut: "Control+K"},
+    { id: "bold", labelKey: "editor.bold", icon: Icons.EDITOR.FORMAT_BOLD, shortcut: "Control+B" },
+    { id: "italic", labelKey: "editor.italic", icon: Icons.EDITOR.FORMAT_ITALIC, shortcut: "Control+I" },
+    { id: "strike", labelKey: "editor.strikethrough", icon: Icons.EDITOR.STRIKETHROUGH_S },
+    { id: "heading", labelKey: "editor.heading", icon: Icons.EDITOR.TITLE },
+    { id: "quote", labelKey: "editor.quote", icon: Icons.EDITOR.FORMAT_QUOTE },
+    { id: "bullets", labelKey: "editor.list", icon: Icons.EDITOR.FORMAT_LIST_BULLETED },
+    { id: "numbers", labelKey: "editor.orderedList", icon: Icons.EDITOR.FORMAT_LIST_NUMBERED },
+    { id: "checklist", labelKey: "editor.checklist", icon: Icons.EDITOR.CHECKLIST },
+    { id: "code", labelKey: "editor.code", icon: Icons.ACTIONS.CODE },
+    { id: "codeblock", labelKey: "editor.codeBlock", icon: Icons.ACTIONS.TERMINAL },
+    { id: "link", labelKey: "editor.link", icon: Icons.EDITOR.INSERT_LINK, shortcut: "Control+K" },
 ];
 
 /** Что делает каждое действие: обёртка вокруг выделения или приставка к строкам */
 const WRAPS = {
-    bold: {before: "**", after: "**", placeholderKey: "editor.placeholderText"},
-    italic: {before: "*", after: "*", placeholderKey: "editor.placeholderText"},
-    strike: {before: "~~", after: "~~", placeholderKey: "editor.placeholderText"},
-    code: {before: "`", after: "`", placeholderKey: "editor.placeholderCode"},
-    codeblock: {before: "```\n", after: "\n```", placeholderKey: "editor.placeholderCode"},
-    link: {before: "[", after: "](url)", placeholderKey: "editor.placeholderText"},
+    bold: { before: "**", after: "**", placeholderKey: "editor.placeholderText" },
+    italic: { before: "*", after: "*", placeholderKey: "editor.placeholderText" },
+    strike: { before: "~~", after: "~~", placeholderKey: "editor.placeholderText" },
+    code: { before: "`", after: "`", placeholderKey: "editor.placeholderCode" },
+    codeblock: { before: "```\n", after: "\n```", placeholderKey: "editor.placeholderCode" },
+    link: { before: "[", after: "](url)", placeholderKey: "editor.placeholderText" },
 };
 
 /**
@@ -95,22 +95,24 @@ class MarkdownEditor {
     #listeners = [];
     #on_change = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        value: String(),
-        rows: Number(),
-        preview: Boolean(),
-        maxLength: Number(),
-        width: String(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            value: String(),
+            rows: Number(),
+            preview: Boolean(),
+            maxLength: Number(),
+            width: String(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_MarkdownEditor");
         MarkdownEditor.#counter += 1;
         this.#id = options.id === undefined ? `chui_markdown_editor_${MarkdownEditor.#counter}` : options.id;
@@ -145,7 +147,7 @@ class MarkdownEditor {
         this.#buildToolbar();
         // Панель — одна остановка обхода: по кнопкам ходят стрелки/Home/End (tabindex переходящий).
         // Слушатели слоя стоят на самой панели, поэтому destroy() за ним не нужен (как у TextEditorPanel)
-        new RovingKeyboard(this.#toolbar, {itemSelector: "button"});
+        new RovingKeyboard(this.#toolbar, { itemSelector: "button" });
         this.#panes.appendChild(this.#textarea);
         this.#panes.appendChild(this.#preview);
         this.#footer.appendChild(this.#count);
@@ -327,7 +329,10 @@ class MarkdownEditor {
         if (this.#preview_on) this.#preview.innerHTML = this.getPreviewHtml();
         if (this.#preview_button !== undefined) {
             this.#preview_button.setAttribute("aria-pressed", this.#preview_on ? "true" : "false");
-            this.#preview_button.setAttribute("aria-label", this.#preview_on ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview"));
+            this.#preview_button.setAttribute(
+                "aria-label",
+                this.#preview_on ? I18n.t("editor.showMarkup") : I18n.t("editor.showPreview")
+            );
         }
         return this;
     }
@@ -409,7 +414,12 @@ class MarkdownEditor {
             button.type = "button";
             button.className = "markdown_editor_action";
             button.dataset.action = action.id;
-            button.setAttribute("aria-label", action.shortcut === undefined ? I18n.t(action.labelKey) : `${I18n.t(action.labelKey)} (${action.shortcut.replace("Control", "Ctrl")})`);
+            button.setAttribute(
+                "aria-label",
+                action.shortcut === undefined
+                    ? I18n.t(action.labelKey)
+                    : `${I18n.t(action.labelKey)} (${action.shortcut.replace("Control", "Ctrl")})`
+            );
             if (action.shortcut !== undefined) button.setAttribute("aria-keyshortcuts", action.shortcut);
             const glyph = new Icon(action.icon, "18px").set();
             glyph.setAttribute("aria-hidden", "true");
@@ -501,7 +511,13 @@ class MarkdownEditor {
         const from = start + before.length;
         const to = from + inner.length;
         // С выделением остаётся выделен весь результат, без него каретка встаёт внутрь разметки
-        return this.#replaceRange(start, end, text, selected === "" && placeholder !== "" ? from : start, selected === "" && placeholder !== "" ? to : start + text.length);
+        return this.#replaceRange(
+            start,
+            end,
+            text,
+            selected === "" && placeholder !== "" ? from : start,
+            selected === "" && placeholder !== "" ? to : start + text.length
+        );
     }
 
     #eachLine(marker = undefined) {
@@ -528,7 +544,7 @@ class MarkdownEditor {
         else if (id === "bullets") this.#eachLine("- ");
         else if (id === "checklist") this.#eachLine("- [ ] ");
         else if (id === "numbers") this.#eachLine((line, index) => `${index + 1}. ${line}`);
-        if (action !== undefined) this.#announce(I18n.t("editor.applied", {action: I18n.t(action.labelKey)}));
+        if (action !== undefined) this.#announce(I18n.t("editor.applied", { action: I18n.t(action.labelKey) }));
         return this;
     }
 
@@ -567,4 +583,4 @@ class MarkdownEditor {
     };
 }
 
-exports.MarkdownEditor = MarkdownEditor
+exports.MarkdownEditor = MarkdownEditor;