chuijs 4.0.2 → 4.0.3

package/framework/components/chui_inputs/chui_mention/mention.js

@@ -1,8 +1,8 @@
-const {setStyles, dropdownPlacement} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {ComboboxKeyboard} = require('../../../modules/chui_a11y/chui_a11y');
-const {Icon} = require('../../chui_icons/icons');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, dropdownPlacement } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon } = require("../../chui_icons/icons");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /** Сколько подсказок показывать за раз */
 const DEFAULT_LIMIT = 6;
@@ -51,7 +51,7 @@ class Mention {
     #dropdown = document.createElement("mention_dropdown");
     #hint = document.createElement("mention_hint");
     // Объявление для скринридера: класс общей утилиты скрытия (по нему его узнают стенды)
-    #status = Object.assign(document.createElement("chui_visually_hidden"), {className: "chui_visually_hidden"});
+    #status = Object.assign(document.createElement("chui_visually_hidden"), { className: "chui_visually_hidden" });
     #a11y = undefined;
     #items = [];
     #trigger = "@";
@@ -64,12 +64,25 @@ class Mention {
     #disabled = false;
     #change_listeners = [];
 
-    constructor(options = {
-        name: String(), title: String(), label: String(), hint: String(), placeholder: String(),
-        width: String(), multiline: Boolean(), rows: Number(), items: [], trigger: String(),
-        limit: Number(), disabled: Boolean(), value: String(),
-        required: Boolean(), changeListener: undefined
-    }) {
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            placeholder: String(),
+            width: String(),
+            multiline: Boolean(),
+            rows: Number(),
+            items: [],
+            trigger: String(),
+            limit: Number(),
+            disabled: Boolean(),
+            value: String(),
+            required: Boolean(),
+            changeListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Mention");
         this.#name = options.name;
         this.#label_text = options.label;
@@ -100,7 +113,8 @@ class Mention {
         this.#dropdown.setAttribute("aria-label", I18n.t("forms.mentionOptions"));
         this.#hint.id = `${this.#id}_hint`;
         this.#hint.className = "mention_hint";
-        this.#hint.innerText = this.#hint_text === undefined ? I18n.t("forms.mentionHint", {trigger: this.#trigger}) : this.#hint_text;
+        this.#hint.innerText =
+            this.#hint_text === undefined ? I18n.t("forms.mentionHint", { trigger: this.#trigger }) : this.#hint_text;
         this.#input.setAttribute("aria-describedby", this.#hint.id);
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
@@ -115,7 +129,7 @@ class Mention {
             dropdown: this.#dropdown,
             optionSelector: ".mention_option",
             onEscape: () => this.#setDropdown(false),
-            onOpen: () => this.#syncDropdown()
+            onOpen: () => this.#syncDropdown(),
         });
         this.#input.addEventListener("input", this.#onInput);
         this.#input.addEventListener("keyup", this.#onCaretMove);
@@ -133,15 +147,31 @@ class Mention {
     }
 
     // GET
-    getId() { return this.#id; }
-    getName() { return this.#name; }
-    getTitle() { return this.#label === undefined ? undefined : this.#label.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getName() {
+        return this.#name;
+    }
+    getTitle() {
+        return this.#label === undefined ? undefined : this.#label.innerText;
+    }
     /** Текст поля целиком — упоминания остаются в нём как набранные */
-    getValue() { return this.#input.value; }
-    getItems() { return [...this.#items]; }
-    getTrigger() { return this.#trigger; }
-    isDisabled() { return this.#disabled; }
-    getInput() { return this.#input; }
+    getValue() {
+        return this.#input.value;
+    }
+    getItems() {
+        return [...this.#items];
+    }
+    getTrigger() {
+        return this.#trigger;
+    }
+    isDisabled() {
+        return this.#disabled;
+    }
+    getInput() {
+        return this.#input;
+    }
 
     /**
      * Упоминания по текущему тексту: для каждого пункта ищется `триггер + подпись`.
@@ -154,7 +184,11 @@ class Mention {
             const token = this.#trigger + String(item.title);
             let index = text.indexOf(token);
             while (index !== -1) {
-                found.push({title: item.title, value: item.value === undefined ? item.title : item.value, index: index});
+                found.push({
+                    title: item.title,
+                    value: item.value === undefined ? item.title : item.value,
+                    index: index,
+                });
                 index = text.indexOf(token, index + token.length);
             }
         }
@@ -188,7 +222,8 @@ class Mention {
     }
     setTrigger(trigger = String()) {
         this.#trigger = trigger;
-        if (this.#hint_text === undefined) this.#hint.innerText = I18n.t("forms.mentionHint", {trigger: this.#trigger});
+        if (this.#hint_text === undefined)
+            this.#hint.innerText = I18n.t("forms.mentionHint", { trigger: this.#trigger });
         this.#setDropdown(false);
         return this;
     }
@@ -218,7 +253,9 @@ class Mention {
         this.#change_listeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === ВНУТРЕННЕЕ ===
     #caret() {
@@ -239,7 +276,7 @@ class Mention {
         if (/\s/.test(query)) return undefined;
         const before = index === 0 ? "" : text[index - 1];
         if (before !== "" && BEFORE_TRIGGER.test(before) === false) return undefined;
-        return {start: index, query: query};
+        return { start: index, query: query };
     }
     #syncFieldAria() {
         const has_title = this.#label !== undefined && this.#label.innerText !== "";
@@ -249,7 +286,10 @@ class Mention {
             return;
         }
         this.#input.removeAttribute("aria-labelledby");
-        this.#input.setAttribute("aria-label", this.#label_text === undefined ? I18n.t("forms.mentionLabel") : this.#label_text);
+        this.#input.setAttribute(
+            "aria-label",
+            this.#label_text === undefined ? I18n.t("forms.mentionLabel") : this.#label_text
+        );
     }
     /** Пересобрать подсказки по тексту до каретки и открыть список, если есть совпадения */
     #syncDropdown() {
@@ -314,7 +354,7 @@ class Mention {
         this.#input.value = value.slice(0, token.start) + inserted + value.slice(caret);
         this.#setCaret(token.start + inserted.length);
         this.#setDropdown(false);
-        this.#announce(I18n.t("forms.mentionInserted", {value: item.title}));
+        this.#announce(I18n.t("forms.mentionInserted", { value: item.title }));
         this.#emit();
         this.#input.focus();
         return true;
@@ -335,7 +375,14 @@ class Mention {
     };
     /** Каретка переехала (стрелки, щелчок, Home/End) — упоминание под ней могло измениться */
     #onCaretMove = (event) => {
-        if (event.type === "keyup" && event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") return;
+        if (
+            event.type === "keyup" &&
+            event.key !== "ArrowLeft" &&
+            event.key !== "ArrowRight" &&
+            event.key !== "Home" &&
+            event.key !== "End"
+        )
+            return;
         if (document.activeElement !== this.#input) return;
         this.#syncDropdown();
     };
@@ -348,4 +395,4 @@ class Mention {
     };
 }
 
-exports.Mention = Mention
+exports.Mention = Mention;