chuijs 4.0.1 → 4.0.3

package/framework/components/chui_icons/styles.css

@@ -1,5 +1,5 @@
 chui_icon {
-    font-family: 'chui_mir';
+    font-family: "chui_mir";
     font-weight: normal;
     font-style: normal;
     font-size: var(--header_icon_size);
@@ -11,4 +11,4 @@ chui_icon {
     color: var(--text_color);
     pointer-events: none;
     transition: all var(--transition_time);
-}
+}

package/framework/components/chui_inputs/chui_check_box/check_box.js

@@ -1,32 +1,44 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class CheckBox {
     #id = require("randomstring").generate();
-    #checkBox = document.createElement('checkbox');
-    #input = document.createElement('input');
-    #label = document.createElement('label');
+    #checkBox = document.createElement("checkbox");
+    #input = document.createElement("input");
+    #label = document.createElement("label");
     constructor(options = { name: String(), title: String(), required: Boolean(), changeListener: () => {} }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Checkbox');
-        this.#input.classList.add('checkbox');
-        this.#input.type = 'checkbox';
-        this.#input.classList.add('checkbox_input');
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Checkbox");
+        this.#input.classList.add("checkbox");
+        this.#input.type = "checkbox";
+        this.#input.classList.add("checkbox_input");
         this.#input.id = this.#id;
-        this.#label.setAttribute('for', this.#id);
-        this.#label.classList.add('labelz')
+        this.#label.setAttribute("for", this.#id);
+        this.#label.classList.add("labelz");
         // Установка опций
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.title !== undefined) this.#label.innerText = options.title;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: required для флажка — «должен быть отмечен»
         Validate.installField(this, options, this.#checkBox, undefined, () => this.#input.checked);
-        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
-    }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.checked; }
-    getTitle() { return this.#label.innerText; }
-    setValue(value = Boolean()) { this.#input.checked = value; }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
-    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
+        if (options.changeListener !== undefined) this.#input.addEventListener("change", options.changeListener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getValue() {
+        return this.#input.checked;
+    }
+    getTitle() {
+        return this.#label.innerText;
+    }
+    setValue(value = Boolean()) {
+        this.#input.checked = value;
+    }
+    addChangeListener(listener = () => {}) {
+        this.#input.addEventListener("change", listener);
+    }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean;
+    }
     set() {
         this.#checkBox.appendChild(this.#input);
         this.#checkBox.appendChild(this.#label);
@@ -34,4 +46,4 @@ class CheckBox {
     }
 }
 
-exports.CheckBox = CheckBox
+exports.CheckBox = CheckBox;

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

@@ -10,24 +10,24 @@ checkbox {
     justify-content: center;
     font-size: var(--font_default_size);
     margin: var(--margin);
-    width: max-content
+    width: max-content;
 }
 
 .checkbox {
     position: absolute;
     z-index: -1;
-    opacity: 0
+    opacity: 0;
 }
 
-.checkbox+label {
+.checkbox + label {
     display: inline-flex;
     align-items: center;
-    color:var(--text_color)
+    color: var(--text_color);
 }
 
-.checkbox+label::before {
+.checkbox + label::before {
     font-size: var(--font_default_size);
-    content: '';
+    content: "";
     display: flex;
     width: 1.2em;
     height: 1.2em;
@@ -38,7 +38,7 @@ checkbox {
     align-items: center;
     justify-content: center;
     color: var(--element_background_2);
-    font-family: 'chui_I';
+    font-family: "chui_I";
     background: var(--element_background);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
@@ -47,11 +47,11 @@ checkbox {
     background-size: 50% 50%;
 }
 
-.checkbox:not(:disabled):not(:checked)+label:hover::before {
+.checkbox:not(:disabled):not(:checked) + label:hover::before {
     background: var(--element_background_hover);
 }
 
-.checkbox:disabled:not(:checked)+label::before {
+.checkbox:disabled:not(:checked) + label::before {
     cursor: not-allowed;
     background: var(--element_background_disabled);
     border: none;
@@ -59,7 +59,7 @@ checkbox {
     color: var(--text_color_disabled);
 }
 
-.checkbox:disabled:checked+label::before {
+.checkbox:disabled:checked + label::before {
     cursor: not-allowed;
     color: var(--text_color_disabled);
     background: var(--element_background_disabled);
@@ -67,21 +67,21 @@ checkbox {
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.checkbox:not(:disabled):active+label::before {
+.checkbox:not(:disabled):active + label::before {
     background-color: var(--blue_prime_background);
-    color:var(--text_color_disabled);
+    color: var(--text_color_disabled);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
 }
 
-.checkbox:focus-visible+label::before {
+.checkbox:focus-visible + label::before {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
 
-.checkbox:checked+label::before {
+.checkbox:checked + label::before {
     background-color: var(--blue_prime_background);
-    color:var(--text_color_hover);
+    color: var(--text_color_hover);
     border: none;
     box-shadow: 0 0 1px 0 var(--blue_prime_background);
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
@@ -89,10 +89,10 @@ checkbox {
 
 .labelz {
     cursor: pointer;
-    font-size: var(--font_default_size)
+    font-size: var(--font_default_size);
 }
 
-.checkbox:disabled+label {
+.checkbox:disabled + label {
     cursor: not-allowed;
     color: var(--text_color_disabled);
-}
+}

package/framework/components/chui_inputs/chui_chips/chips.js

@@ -1,8 +1,8 @@
-const {setStyles, dropdownPlacement, optionOr} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {ComboboxKeyboard} = require('../../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, dropdownPlacement, optionOr } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { ComboboxKeyboard } = require("../../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Поле с метками (chips): ввод тегов, почтовых адресов, ключевых слов.
@@ -67,27 +67,29 @@ class Chips {
     #suggestions = [];
     #change_listeners = [];
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        chips: [],
-        suggestions: [],
-        allowCustom: Boolean(),
-        commitOnBlur: Boolean(),
-        maxChips: Number(),
-        unique: Boolean(),
-        disabled: Boolean(),
-        hint: String(),
-        required: Boolean(),
-        min: Number(),
-        max: Number(),
-        messages: Object(),
-        validate: undefined,
-        changeListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            chips: [],
+            suggestions: [],
+            allowCustom: Boolean(),
+            commitOnBlur: Boolean(),
+            maxChips: Number(),
+            unique: Boolean(),
+            disabled: Boolean(),
+            hint: String(),
+            required: Boolean(),
+            min: Number(),
+            max: Number(),
+            messages: Object(),
+            validate: undefined,
+            changeListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Chips");
         Chips.#counter += 1;
         this.#id = options.id === undefined ? `chui_chips_${Chips.#counter}` : options.id;
@@ -117,7 +119,7 @@ class Chips {
             dropdown: this.#dropdown,
             optionSelector: ".chips_option",
             onEscape: () => this.#setDropdown(false),
-            onOpen: () => this.#setDropdown(true)
+            onOpen: () => this.#setDropdown(true),
         });
         this.#input.addEventListener("keydown", this.#onInputKeyDown);
         this.#input.addEventListener("blur", this.#onInputBlur);
@@ -151,9 +153,7 @@ class Chips {
         this.#status.setAttribute("role", "status");
         this.#status.setAttribute("aria-live", "polite");
         this.#hint.classList.add("chui_visually_hidden");
-        this.#hint.innerText = options.hint === undefined
-            ? I18n.t("forms.chipsHint")
-            : options.hint;
+        this.#hint.innerText = options.hint === undefined ? I18n.t("forms.chipsHint") : options.hint;
         this.#root.appendChild(this.#title);
         this.#root.appendChild(this.#field);
         this.#root.appendChild(this.#hint);
@@ -161,7 +161,14 @@ class Chips {
 
         // Правила считают число меток: пустой список — «пустое» значение для required.
         // Рамка ошибки — только у самого поля: корень оборачивает ещё подпись и подсказку
-        Validate.installField(this, options, this.#root, undefined, () => (this.#chips.length === 0 ? "" : String(this.#chips.length)), this.#field);
+        Validate.installField(
+            this,
+            options,
+            this.#root,
+            undefined,
+            () => (this.#chips.length === 0 ? "" : String(this.#chips.length)),
+            this.#field
+        );
         if (options.chips !== undefined) this.setValue(options.chips);
         if (options.disabled === true) this.setDisabled(true);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
@@ -279,7 +286,7 @@ class Chips {
         this.#renderSuggestions();
         this.#syncDisabledState();
         if (this.clearError !== undefined) this.clearError();
-        this.#announce(I18n.t("forms.chipsRemoved", {value: value, count: this.#chips.length}));
+        this.#announce(I18n.t("forms.chipsRemoved", { value: value, count: this.#chips.length }));
         this.#emit();
         return this;
     }
@@ -331,7 +338,7 @@ class Chips {
         this.#syncDisabledState();
         // Метка добавлена — прежняя ошибка (например, «нужен хотя бы один тег») больше не верна
         if (this.clearError !== undefined) this.clearError();
-        this.#announce(I18n.t("forms.chipsAdded", {value: value, count: this.#chips.length}));
+        this.#announce(I18n.t("forms.chipsAdded", { value: value, count: this.#chips.length }));
         return true;
     }
 
@@ -345,7 +352,7 @@ class Chips {
         remove.className = "chips_remove";
         remove.dataset.chip = text;
         // Настоящая кнопка: удаление доступно и мышью, и с клавиатуры, и скринридеру
-        remove.setAttribute("aria-label", I18n.t("forms.chipsRemove", {value: text}));
+        remove.setAttribute("aria-label", I18n.t("forms.chipsRemove", { value: text }));
         remove.setAttribute("title", I18n.t("common.delete"));
         remove.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "12px").set());
         if (this.#disabled) remove.disabled = true;
@@ -376,7 +383,7 @@ class Chips {
         // Не помещается: ищем, сколько меток показать числом, чтобы строка сошлась
         for (let hidden = 1; hidden <= items.length; hidden += 1) {
             this.#more.innerText = `+${hidden}`;
-            this.#more.setAttribute("aria-label", I18n.t("forms.chipsMore", {count: hidden}));
+            this.#more.setAttribute("aria-label", I18n.t("forms.chipsMore", { count: hidden }));
             this.#more.hidden = false;
             const counter = this.#more.getBoundingClientRect().width + gap;
             if (total(items.length - hidden) + counter + reserve <= available) {
@@ -467,7 +474,9 @@ class Chips {
         // Поле ввода остаётся доступным и при достигнутом пределе: иначе нельзя было бы
         // убрать метку с клавиатуры, а причина отказа объясняется в статусе
         this.#input.disabled = this.#disabled;
-        this.#input.placeholder = full ? I18n.t("forms.chipsLimitPlaceholder", {count: this.#max_chips}) : this.#placeholder;
+        this.#input.placeholder = full
+            ? I18n.t("forms.chipsLimitPlaceholder", { count: this.#max_chips })
+            : this.#placeholder;
         for (const button of this.#list.querySelectorAll(".chips_remove")) button.disabled = this.#disabled;
     }
 
@@ -491,11 +500,12 @@ class Chips {
         }
         // Текст не теряем: либо он уже есть, либо метка не из подсказок, либо предел
         if (this.#max_chips !== undefined && this.#chips.length >= this.#max_chips) {
-            this.#announce(I18n.t("forms.chipsLimitReached", {count: this.#max_chips}));
+            this.#announce(I18n.t("forms.chipsLimitReached", { count: this.#max_chips }));
             return;
         }
-        if (this.#unique && this.#chips.includes(value.trim())) this.#announce(I18n.t("forms.chipsDuplicate", {value: value.trim()}));
-        else this.#announce(I18n.t("forms.chipsNotSuggested", {value: value.trim()}));
+        if (this.#unique && this.#chips.includes(value.trim()))
+            this.#announce(I18n.t("forms.chipsDuplicate", { value: value.trim() }));
+        else this.#announce(I18n.t("forms.chipsNotSuggested", { value: value.trim() }));
     }
 
     #onInputInput = () => {
@@ -572,4 +582,4 @@ class Chips {
     };
 }
 
-exports.Chips = Chips
+exports.Chips = Chips;

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

@@ -67,7 +67,8 @@ chips_item {
     box-sizing: border-box;
     flex: none;
     height: 21px;
-    padding-block: 0 0; padding-inline: 8px 2px;
+    padding-block: 0 0;
+    padding-inline: 8px 2px;
     /* Скругление контрола (--radius_sm), как у полей и кнопок: капсула (--radius_pill)
        на невысокой метке читалась отдельным от полей элементом и выглядела тяжёлой.
        Заливка как у выбранных значений MultiComboBox: непрозрачная поверхность читается
@@ -98,7 +99,8 @@ chips_more {
     box-sizing: border-box;
     flex: none;
     height: 21px;
-    padding-block: 0 0; padding-inline: 7px 7px;
+    padding-block: 0 0;
+    padding-inline: 7px 7px;
     border: 1px solid transparent;
     border-radius: var(--radius_sm);
     background: var(--element_background_hover);

package/framework/components/chui_inputs/chui_color_picker/color_picker.js

@@ -1,6 +1,6 @@
-const {setStyles, optionOr} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Формат, который принимает и поле, и разбор значения: три или шесть знаков после «#»
 const HEX_PATTERN = "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
@@ -65,18 +65,20 @@ class ColorPicker {
     #listeners = [];
     #on_change = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: String(),
-        presets: undefined,
-        showInput: Boolean(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: String(),
+            presets: undefined,
+            showInput: Boolean(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ColorPicker");
         ColorPicker.#counter += 1;
         this.#id = options.id === undefined ? `chui_color_picker_${ColorPicker.#counter}` : options.id;
@@ -128,8 +130,15 @@ class ColorPicker {
         else this.#title.hidden = true;
         this.setLabel(optionOr(options.label, I18n.t("forms.colorPickerLabel")));
         // Правила валидации: свой формат можно переопределить опцией pattern
-        const rules = Object.assign({pattern: HEX_PATTERN}, options);
-        Validate.installField(this, rules, this.#root, undefined, () => this.#validateValue(), this.#show_input ? this.#field : this.#row);
+        const rules = Object.assign({ pattern: HEX_PATTERN }, options);
+        Validate.installField(
+            this,
+            rules,
+            this.#root,
+            undefined,
+            () => this.#validateValue(),
+            this.#show_input ? this.#field : this.#row
+        );
         this.setPresets(options.presets === undefined ? ColorPicker.PALETTE : options.presets);
         this.setDisabled(options.disabled === true);
         this.#render();
@@ -212,7 +221,8 @@ class ColorPicker {
         this.#label = text;
         if (text === undefined) this.#swatch.removeAttribute("aria-label");
         else this.#swatch.setAttribute("aria-label", String(text));
-        const hex_label = text === undefined ? I18n.t("forms.colorPickerHex") : I18n.t("forms.colorPickerHexOf", {label: text});
+        const hex_label =
+            text === undefined ? I18n.t("forms.colorPickerHex") : I18n.t("forms.colorPickerHexOf", { label: text });
         this.#hex.setAttribute("aria-label", hex_label);
         return this;
     }
@@ -247,10 +257,12 @@ class ColorPicker {
 
     /** Готовые цвета: строки `#rrggbb` или `{value, title}`; пустой массив убирает палитру */
     setPresets(presets = Array()) {
-        this.#items = (Array.isArray(presets) ? presets : []).map((item) => {
-            if (typeof item === "string") return {value: ColorPicker.parse(item), title: undefined};
-            return {value: ColorPicker.parse(item.value), title: item.title};
-        }).filter((item) => item.value !== undefined);
+        this.#items = (Array.isArray(presets) ? presets : [])
+            .map((item) => {
+                if (typeof item === "string") return { value: ColorPicker.parse(item), title: undefined };
+                return { value: ColorPicker.parse(item.value), title: item.title };
+            })
+            .filter((item) => item.value !== undefined);
         this.#renderPresets();
         this.#render();
         return this;
@@ -330,7 +342,7 @@ class ColorPicker {
         this.#render();
         if (!changed) return;
         // Фокус остаётся на кнопке палитры: о смене цвета сообщает live-регион
-        this.#status.innerText = I18n.t("forms.colorPickerApplied", {value: value});
+        this.#status.innerText = I18n.t("forms.colorPickerApplied", { value: value });
         this.#notify();
     }
 
@@ -372,4 +384,4 @@ class ColorPicker {
     };
 }
 
-exports.ColorPicker = ColorPicker
+exports.ColorPicker = ColorPicker;