chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_masked/masked.js

@@ -151,16 +151,16 @@ class MaskedInput {
     #error = document.createElement("chui_error_message");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #mask = "";
     #rendered = "";
-    #placeholder_text = "";
-    #placeholder_default = false;
+    #placeholderText = "";
+    #placeholderDefault = false;
     #disabled = false;
-    #read_only = false;
+    #readOnly = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
     constructor(
         options = {
@@ -182,8 +182,8 @@ class MaskedInput {
         MaskedInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_masked_input_${MaskedInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         this.#mask = options.mask === undefined ? MaskedInput.MASKS.PHONE : String(options.mask);
         this.#root.id = this.#id;
         this.#label.className = "masked_label";
@@ -211,13 +211,13 @@ class MaskedInput {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#label.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("forms.maskedLabel") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("forms.maskedLabel") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         this.setPlaceholder(
             options.placeholder === undefined ? MaskedInput.placeholderText(this.#mask) : options.placeholder
         );
         // Флаг ставим после `setPlaceholder`: он же отмечает образец как заданный вручную
-        this.#placeholder_default = options.placeholder === undefined;
+        this.#placeholderDefault = options.placeholder === undefined;
         // Текст «неверный формат» у маски значит «поле не дозаполнено» — так и говорим
         const messages = Object.assign({ pattern: I18n.t("forms.maskedIncomplete") }, options.messages);
         Validate.installField(
@@ -247,12 +247,12 @@ class MaskedInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя поля, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     getMask() {
@@ -275,7 +275,7 @@ class MaskedInput {
     }
 
     getPlaceholder() {
-        return this.#placeholder_text;
+        return this.#placeholderText;
     }
 
     getDisabled() {
@@ -283,7 +283,7 @@ class MaskedInput {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     // SET
@@ -302,7 +302,7 @@ class MaskedInput {
 
     /** Подпись над полем; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -319,8 +319,8 @@ class MaskedInput {
 
     /** Имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
-        if (this.#title_text === undefined || this.#title_text === "") {
+        this.#labelText = text;
+        if (this.#titleText === undefined || this.#titleText === "") {
             if (text === undefined) this.#input.removeAttribute("aria-label");
             else this.#input.setAttribute("aria-label", String(text));
         }
@@ -342,9 +342,9 @@ class MaskedInput {
     }
 
     setPlaceholder(text = String()) {
-        this.#placeholder_text = text === undefined ? "" : String(text);
-        this.#placeholder_default = false;
-        this.#input.placeholder = this.#placeholder_text;
+        this.#placeholderText = text === undefined ? "" : String(text);
+        this.#placeholderDefault = false;
+        this.#input.placeholder = this.#placeholderText;
         return this;
     }
 
@@ -358,10 +358,10 @@ class MaskedInput {
         const rules = this.getRules === undefined ? undefined : this.getRules();
         if (rules !== undefined) rules.pattern = MaskedInput.maskPattern(this.#mask);
         // Своя подсказка-образец остаётся, а вид маски по умолчанию пересобирается
-        if (this.#placeholder_default) {
-            this.#placeholder_text = MaskedInput.placeholderText(this.#mask);
-            this.#input.placeholder = this.#placeholder_text;
-            this.#placeholder_default = true;
+        if (this.#placeholderDefault) {
+            this.#placeholderText = MaskedInput.placeholderText(this.#mask);
+            this.#input.placeholder = this.#placeholderText;
+            this.#placeholderDefault = true;
         }
         return this;
     }
@@ -391,10 +391,10 @@ class MaskedInput {
     }
 
     /** Режим показа: значение видно, но поле не принимает нажатия */
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("masked_readonly", this.#read_only);
-        this.#input.readOnly = this.#read_only;
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("masked_readonly", this.#readOnly);
+        this.#input.readOnly = this.#readOnly;
         return this;
     }
 
@@ -424,8 +424,8 @@ class MaskedInput {
 
     // === ВНУТРЕННЕЕ ===
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("forms.maskedLabel");
     }
 
@@ -476,7 +476,7 @@ class MaskedInput {
 
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#rendered, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#rendered, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#rendered, this);
     }
 
     #announce(text = String()) {
@@ -489,36 +489,36 @@ class MaskedInput {
      * и раскладываем по позициям маски заново.
      */
     #onInput = () => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         const next = this.#input.value;
         const previous = this.#rendered;
         let start = 0;
         while (start < previous.length && start < next.length && previous[start] === next[start]) start += 1;
-        let previous_end = previous.length;
-        let next_end = next.length;
-        while (previous_end > start && next_end > start && previous[previous_end - 1] === next[next_end - 1]) {
-            previous_end -= 1;
-            next_end -= 1;
+        let previousEnd = previous.length;
+        let nextEnd = next.length;
+        while (previousEnd > start && nextEnd > start && previous[previousEnd - 1] === next[nextEnd - 1]) {
+            previousEnd -= 1;
+            nextEnd -= 1;
         }
-        const inserted_text = next.slice(start, next_end);
+        const insertedText = next.slice(start, nextEnd);
         const data = MaskedInput.#collect(this.#mask, previous, 0);
         const before = MaskedInput.#placeholders(this.#mask, start);
-        const removed = MaskedInput.#placeholders(this.#mask, previous_end) - before;
-        const inserted = MaskedInput.#collect(this.#mask, inserted_text, start);
+        const removed = MaskedInput.#placeholders(this.#mask, previousEnd) - before;
+        const inserted = MaskedInput.#collect(this.#mask, insertedText, start);
         const list = data.slice(0, before).concat(inserted, data.slice(before + removed));
         const value = MaskedInput.#format(this.#mask, list);
-        const complete_before = this.isComplete();
+        const completeBefore = this.isComplete();
         const changed = this.#apply(value);
         const caret = this.#caretAfter(value, before + inserted.length);
         this.#input.setSelectionRange(caret, caret);
         // Отклонённый символ и заполненная маска иначе не заметны: поле просто ничего не делает.
         // Литералы самой маски («-», «(») за отказ не считаем — их место в шаблоне.
-        const junk = [...inserted_text].filter(
+        const junk = [...insertedText].filter(
             (symbol) => symbol !== "" && !this.#accepts(symbol) && !this.#mask.includes(symbol)
         );
         if (junk.length > 0) {
             this.#announce(I18n.t("forms.maskedAllowedOnly", { value: this.#allowedText() }));
-        } else if (!complete_before && this.isComplete()) {
+        } else if (!completeBefore && this.isComplete()) {
             this.#announce(I18n.t("forms.maskedComplete"));
         } else if (this.#status.innerText !== "") {
             this.#announce("");
@@ -531,7 +531,7 @@ class MaskedInput {
     // Backspace снимает ближайший значимый символ слева, Delete — справа (как в тексте).
     // Иначе каретка сразу за литералом удаляла бы символ справа от себя.
     #onKeyDown = (event) => {
-        if (this.#disabled || this.#read_only) return;
+        if (this.#disabled || this.#readOnly) return;
         if (event.key !== "Backspace" && event.key !== "Delete") return;
         const caret = this.#input.selectionStart;
         if (caret === null || caret !== this.#input.selectionEnd) return;

package/framework/components/chui_inputs/chui_masked/styles.css

@@ -5,18 +5,18 @@ chui_masked_input {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     width: var(--control_width);
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .masked_label {
     display: block;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -33,9 +33,9 @@ chui_masked_input {
     width: -webkit-fill-available;
     min-height: var(--control_height);
     margin: 0;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
 }

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

@@ -59,10 +59,10 @@ class Mention {
     #multiline = false;
     #placeholder = "";
     #name = undefined;
-    #label_text = undefined;
-    #hint_text = undefined;
+    #labelText = undefined;
+    #hintText = undefined;
     #disabled = false;
-    #change_listeners = [];
+    #changeListeners = [];
 
     constructor(
         options = {
@@ -85,8 +85,8 @@ class Mention {
     ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Mention");
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#hint_text = options.hint;
+        this.#labelText = options.label;
+        this.#hintText = options.hint;
         this.#placeholder = options.placeholder === undefined ? "" : options.placeholder;
         this.#multiline = options.multiline === true;
         if (options.trigger !== undefined) this.#trigger = options.trigger;
@@ -114,7 +114,7 @@ class Mention {
         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.#hintText === undefined ? I18n.t("forms.mentionHint", { trigger: this.#trigger }) : this.#hintText;
         this.#input.setAttribute("aria-describedby", this.#hint.id);
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
@@ -222,7 +222,7 @@ class Mention {
     }
     setTrigger(trigger = String()) {
         this.#trigger = trigger;
-        if (this.#hint_text === undefined)
+        if (this.#hintText === undefined)
             this.#hint.innerText = I18n.t("forms.mentionHint", { trigger: this.#trigger });
         this.#setDropdown(false);
         return this;
@@ -233,7 +233,7 @@ class Mention {
         return this;
     }
     setHint(text = String()) {
-        this.#hint_text = text;
+        this.#hintText = text;
         this.#hint.innerText = text;
         this.#hint.style.display = String(text).trim() === "" ? "none" : "";
         return this;
@@ -250,7 +250,7 @@ class Mention {
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
     set() {
@@ -279,8 +279,8 @@ class Mention {
         return { start: index, query: query };
     }
     #syncFieldAria() {
-        const has_title = this.#label !== undefined && this.#label.innerText !== "";
-        if (has_title) {
+        const hasTitle = this.#label !== undefined && this.#label.innerText !== "";
+        if (hasTitle) {
             this.#input.setAttribute("aria-labelledby", this.#label.id);
             this.#input.removeAttribute("aria-label");
             return;
@@ -288,7 +288,7 @@ class Mention {
         this.#input.removeAttribute("aria-labelledby");
         this.#input.setAttribute(
             "aria-label",
-            this.#label_text === undefined ? I18n.t("forms.mentionLabel") : this.#label_text
+            this.#labelText === undefined ? I18n.t("forms.mentionLabel") : this.#labelText
         );
     }
     /** Пересобрать подсказки по тексту до каретки и открыть список, если есть совпадения */
@@ -365,7 +365,7 @@ class Mention {
     }
     #emit() {
         const text = this.getValue();
-        for (const listener of [...this.#change_listeners]) listener(text);
+        for (const listener of [...this.#changeListeners]) listener(text);
     }
 
     // === ОБРАБОТЧИКИ ===

package/framework/components/chui_inputs/chui_mention/styles.css

@@ -5,11 +5,11 @@ chui_mention {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: flex;
     flex-direction: column;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     width: var(--control_width);
     font-size: var(--font_default_size);
     color: var(--text_color);
@@ -18,7 +18,7 @@ chui_mention {
 .mention_label {
     height: max-content;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -31,7 +31,7 @@ mention_field {
     flex-direction: column;
     height: max-content;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -41,10 +41,10 @@ mention_field {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: transparent;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     font-size: var(--font_default_size);
     font-family: inherit;
@@ -74,7 +74,7 @@ mention_dropdown {
     backdrop-filter: var(--global_blur);
     -webkit-backdrop-filter: var(--global_blur);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     box-shadow: var(--box_shadow_main);
     /* Прокрутка списка подсказок; `overflow: overlay` удалён в Chromium 122 */
     overflow: hidden auto;
@@ -87,6 +87,12 @@ mention_dropdown[hidden] {
     display: none;
 }
 
+/* Появление списка подсказок: общий кадр панели, он же проигрывается заново при снятии
+   `hidden`. Прежде список появлялся без движения вовсе */
+mention_dropdown {
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
 .mention_option {
     display: flex;
     flex-direction: row;
@@ -132,7 +138,7 @@ mention_dropdown[hidden] {
 
 .mention_hint {
     display: block;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color_disabled);
     font-size: var(--font_labels_size);
 }