chuijs 4.0.2 → 4.0.3

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

@@ -9,7 +9,7 @@ chui_text_input {
     flex-direction: column;
     width: var(--control_width);
     height: max-content;
-    margin: var(--margin)
+    margin: var(--margin);
 }
 
 chui_text_main {
@@ -42,8 +42,8 @@ chui_text_main {
     width: max-content;
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 error_message_text {
@@ -52,8 +52,8 @@ error_message_text {
     width: max-content;
     margin: var(--margin) var(--margin) 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--red_prime_background)
+    font-weight: 500;
+    color: var(--red_prime_background);
 }
 
 .error_border {
@@ -85,6 +85,6 @@ error_message_text {
     width: max-content;
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}

package/framework/components/chui_inputs/chui_text/text.js

@@ -1,48 +1,53 @@
 //version: 1.0.0
-const {Animation} = require('../../../modules/chui_animations/animations');
+const { Animation } = require("../../../modules/chui_animations/animations");
 
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class TextInput {
-    #chui_text_main = document.createElement('chui_text_main');
-    #chui_text_input = document.createElement('chui_text_input');
+    #chui_text_main = document.createElement("chui_text_main");
+    #chui_text_input = document.createElement("chui_text_input");
     #id = require("randomstring").generate();
     #title = String();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
+    #input = document.createElement("input");
+    #label = document.createElement("label");
     #error_message_text = document.createElement("error_message_text");
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean(),
-        value: String(),
-        disableFocus: Boolean(),
-        inputListener: () => {},
-        focusListener: () => {},
-        blurListener: () => {}
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TextInput');
-        this.#input.type = 'text';
-        this.#input.className = 'text_input';
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+            value: String(),
+            disableFocus: Boolean(),
+            inputListener: () => {},
+            focusListener: () => {},
+            blurListener: () => {},
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TextInput");
+        this.#input.type = "text";
+        this.#input.className = "text_input";
         this.#input.id = this.#id;
 
         //Options
-        if (options.inputListener !== undefined) this.#input.addEventListener('input', options.inputListener);
-        if (options.focusListener !== undefined) this.#input.addEventListener('focus', options.focusListener);
-        if (options.blurListener !== undefined) this.#input.addEventListener('blur', options.blurListener);
+        if (options.inputListener !== undefined) this.#input.addEventListener("input", options.inputListener);
+        if (options.focusListener !== undefined) this.#input.addEventListener("focus", options.focusListener);
+        if (options.blurListener !== undefined) this.#input.addEventListener("blur", options.blurListener);
         if (options.name !== undefined) this.#input.name = options.name;
         if (options.value !== undefined) this.#input.value = options.value;
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация и показ ошибки: правила из options (required/min/max/pattern/…)
         Validate.installField(this, options, this.#chui_text_main, this.#error_message_text, () => this.#input.value);
-        if (options.disableFocus !== undefined) this.#input.addEventListener("mousedown", () => { return false });
+        if (options.disableFocus !== undefined)
+            this.#input.addEventListener("mousedown", () => {
+                return false;
+            });
         if (options.title !== undefined) {
             this.#title = options.title;
             this.#label.innerText = options.title;
-            this.#label.className = 'input_label';
-            this.#label.setAttribute('for', this.#id);
+            this.#label.className = "input_label";
+            this.#label.setAttribute("for", this.#id);
             this.#chui_text_input.appendChild(this.#label);
         }
         if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
@@ -60,31 +65,47 @@ class TextInput {
         this.#input.addEventListener("input", () => {
             this.clearError();
             new Animation(this.#error_message_text).fadeOut();
-        })
+        });
+    }
+    addInputListener(listener = () => {}) {
+        this.#input.addEventListener("input", listener);
+    }
+    addFocusListener(listener = () => {}) {
+        this.#input.addEventListener("focus", listener);
+    }
+    addBlurListener(listener = () => {}) {
+        this.#input.addEventListener("blur", listener);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(text = String()) {
+        this.#input.value = text;
     }
-    addInputListener(listener = () => {}) { this.#input.addEventListener('input', listener); }
-    addFocusListener(listener = () => {}) { this.#input.addEventListener('focus', listener); }
-    addBlurListener(listener = () => {}) { this.#input.addEventListener('blur', listener); }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#input.value; }
-    setValue(text = String()) { this.#input.value = text; }
     setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
+        this.#input.disabled = boolean;
         if (boolean) {
-            this.#chui_text_main.classList.add("chui_text_main_disabled")
-            this.#input.className = "text_input_disabled"
-            this.#label.className = "input_label_disabled"
+            this.#chui_text_main.classList.add("chui_text_main_disabled");
+            this.#input.className = "text_input_disabled";
+            this.#label.className = "input_label_disabled";
         } else {
-            this.#chui_text_main.classList.remove("chui_text_main_disabled")
-            this.#input.className = "text_input"
-            this.#label.className = "input_label"
+            this.#chui_text_main.classList.remove("chui_text_main_disabled");
+            this.#input.className = "text_input";
+            this.#label.className = "input_label";
         }
     }
     setErrorMessage(message = String()) {
         this.setError(message);
     }
-    set() { return this.#chui_text_input; }
+    set() {
+        return this.#chui_text_input;
+    }
 }
 
-exports.TextInput = TextInput
+exports.TextInput = TextInput;

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

@@ -13,7 +13,7 @@ chui_area_input {
 }
 
 .resize_off {
-    resize: none
+    resize: none;
 }
 
 .area_input {
@@ -32,8 +32,8 @@ chui_area_input {
     width: max-content;
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 /* DISABLED STYLES */
@@ -55,6 +55,6 @@ chui_area_input {
     width: max-content;
     margin: 0 0 var(--margin);
     font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}

package/framework/components/chui_inputs/chui_text_area/text_area.js

@@ -1,29 +1,42 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class TextArea {
     #id = require("randomstring").generate();
-    #chui_text_input = document.createElement('chui_area_input');
-    #text_area = document.createElement('textarea');
-    #label = document.createElement('label');
+    #chui_text_input = document.createElement("chui_area_input");
+    #text_area = document.createElement("textarea");
+    #label = document.createElement("label");
     #title = undefined;
-    constructor(options = {
-        name: String(), title: String(), placeholder: String(),
-        width: String(), height: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TextArea');
-        this.#text_area.classList.add('area_input', 'resize_off');
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            height: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_TextArea");
+        this.#text_area.classList.add("area_input", "resize_off");
         this.#text_area.id = this.#id;
         if (options.name !== undefined) this.#text_area.name = options.name;
         if (options.required !== undefined) this.#text_area.required = options.required;
         // Валидация и показ ошибки: правила из options. Текст ошибки — в корень поля
         // (под областью ввода), а рамку получает само поле: иначе узел с текстом попал бы
         // внутрь `<textarea>` и читался бы как его содержимое
-        Validate.installField(this, options, this.#chui_text_input, undefined, () => this.#text_area.value, this.#text_area);
+        Validate.installField(
+            this,
+            options,
+            this.#chui_text_input,
+            undefined,
+            () => this.#text_area.value,
+            this.#text_area
+        );
         if (options.title !== undefined) {
             this.#title = options.title;
             this.#label.innerText = options.title;
-            this.#label.classList.add('textarea_label')
-            this.#label.setAttribute('for', this.#id);
+            this.#label.classList.add("textarea_label");
+            this.#label.setAttribute("for", this.#id);
             this.#chui_text_input.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#text_area.placeholder = options.placeholder;
@@ -34,25 +47,35 @@ class TextArea {
         // а на `blur` снимал весь атрибут `style`
         this.#chui_text_input.appendChild(this.#text_area);
     }
-    getName() { return this.#text_area.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#text_area.value; }
-    setValue(text = String()) { this.#text_area.value = text; }
+    getName() {
+        return this.#text_area.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#text_area.value;
+    }
+    setValue(text = String()) {
+        this.#text_area.value = text;
+    }
     setDisabled(boolean = Boolean()) {
-        this.#text_area.disabled = boolean
+        this.#text_area.disabled = boolean;
         if (boolean) {
-            this.#text_area.classList.remove("area_input")
-            this.#text_area.classList.add("area_input_disabled")
-            this.#label.classList.remove("textarea_label")
-            this.#label.classList.add("textarea_label_disabled")
+            this.#text_area.classList.remove("area_input");
+            this.#text_area.classList.add("area_input_disabled");
+            this.#label.classList.remove("textarea_label");
+            this.#label.classList.add("textarea_label_disabled");
         } else {
-            this.#text_area.classList.add("area_input")
-            this.#text_area.classList.remove("area_input_disabled")
-            this.#label.classList.add("textarea_label")
-            this.#label.classList.remove("textarea_label_disabled")
+            this.#text_area.classList.add("area_input");
+            this.#text_area.classList.remove("area_input_disabled");
+            this.#label.classList.add("textarea_label");
+            this.#label.classList.remove("textarea_label_disabled");
         }
     }
-    set() { return this.#chui_text_input; }
+    set() {
+        return this.#chui_text_input;
+    }
 }
 
-exports.TextArea = TextArea
+exports.TextArea = TextArea;

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

@@ -45,7 +45,7 @@ time_main_block {
 }
 
 /* Индикатор часов — системный: время выбирают в своей панели, поэтому он скрыт (свой значок есть) */
-chui_time_input input[type=time]::-webkit-calendar-picker-indicator {
+chui_time_input input[type="time"]::-webkit-calendar-picker-indicator {
     display: none;
 }
 
@@ -59,7 +59,8 @@ input.time_input {
     width: 96px;
     height: 100%;
     margin: 0;
-    padding-block: 0 0; padding-inline: 10px 4px;
+    padding-block: 0 0;
+    padding-inline: 10px 4px;
     border: none;
     background: transparent;
     color: var(--text_color);
@@ -85,7 +86,8 @@ input.time_input:disabled {
     box-sizing: border-box;
     height: 100%;
     margin: 0;
-    padding-block: 0 0; padding-inline: 2px 8px;
+    padding-block: 0 0;
+    padding-inline: 2px 8px;
     border: none;
     border-radius: var(--radius_sm);
     background: transparent;

package/framework/components/chui_inputs/chui_time/time.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr, dropdownPlacement} = require('../../../modules/chui_functions');
-const {Icon, Icons} = require('../../chui_icons/icons');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr, dropdownPlacement } = require("../../../modules/chui_functions");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Формат значения поля: 24-часовое «ЧЧ:ММ» — так же, как отдаёт нативный input[type=time]
 const TIME_PATTERN = "^([01][0-9]|2[0-3]):[0-5][0-9]$";
@@ -60,19 +60,21 @@ class TimeInput {
         if (!this.#block.contains(event.target)) this.#closeDropdown();
     };
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: String(),
-        step: Number(),
-        min: String(),
-        max: String(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: String(),
+            step: Number(),
+            min: String(),
+            max: String(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_TimeInput");
         TimeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_time_input_${TimeInput.#counter}` : options.id;
@@ -145,15 +147,22 @@ class TimeInput {
                 if (custom !== undefined && custom !== null && custom !== true) return custom;
                 const parsed = TimeInput.parse(value);
                 if (parsed === undefined) return undefined;
-                if (this.#min !== undefined && parsed < this.#min) return I18n.t("time.min", {min: this.#min});
-                if (this.#max !== undefined && parsed > this.#max) return I18n.t("time.max", {max: this.#max});
+                if (this.#min !== undefined && parsed < this.#min) return I18n.t("time.min", { min: this.#min });
+                if (this.#max !== undefined && parsed > this.#max) return I18n.t("time.max", { max: this.#max });
                 return undefined;
             };
         }
-        Validate.installField(this, rules, this.#root, undefined, () => (this.#input.value === undefined ? "" : this.#input.value), this.#block);
+        Validate.installField(
+            this,
+            rules,
+            this.#root,
+            undefined,
+            () => (this.#input.value === undefined ? "" : this.#input.value),
+            this.#block
+        );
         if (options.value !== undefined) this.setValue(options.value);
         this.setDisabled(options.disabled === true);
-        window.addEventListener('click', this.#window_click_event);
+        window.addEventListener("click", this.#window_click_event);
     }
 
     // GET
@@ -378,8 +387,10 @@ class TimeInput {
         const selected = TimeInput.parse(this.getValue());
         const hours = selected === undefined ? undefined : selected.slice(0, 2);
         const minutes = selected === undefined ? undefined : selected.slice(3, 5);
-        for (const option of this.#visibleOptions(this.#hours)) this.#markSelected(option, option.dataset.value === hours);
-        for (const option of this.#visibleOptions(this.#minutes)) this.#markSelected(option, option.dataset.value === minutes);
+        for (const option of this.#visibleOptions(this.#hours))
+            this.#markSelected(option, option.dataset.value === hours);
+        for (const option of this.#visibleOptions(this.#minutes))
+            this.#markSelected(option, option.dataset.value === minutes);
     }
 
     #markSelected(option = new HTMLElement(), selected = Boolean()) {
@@ -390,8 +401,8 @@ class TimeInput {
 
     #pick(unit = String(), text = String()) {
         const current = TimeInput.parse(this.getValue());
-        const hours = unit === "hours" ? text : (current === undefined ? "00" : current.slice(0, 2));
-        const minutes = unit === "minutes" ? text : (current === undefined ? "00" : current.slice(3, 5));
+        const hours = unit === "hours" ? text : current === undefined ? "00" : current.slice(0, 2);
+        const minutes = unit === "minutes" ? text : current === undefined ? "00" : current.slice(3, 5);
         this.#input.value = `${hours}:${minutes}`;
         this.#changed();
     }
@@ -539,9 +550,9 @@ class TimeInput {
 
     /** Полное удаление: панель и слушатель окна */
     destroy() {
-        window.removeEventListener('click', this.#window_click_event);
+        window.removeEventListener("click", this.#window_click_event);
         this.#closeDropdown();
     }
 }
 
-exports.TimeInput = TimeInput
+exports.TimeInput = TimeInput;

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

@@ -44,7 +44,7 @@
    белой: один и тот же тумблер менял цвет детали */
 .slider:before {
     position: absolute;
-    content: '';
+    content: "";
     height: 15px;
     width: 15px;
     inset-inline-start: 5px;
@@ -57,7 +57,7 @@
 
 input:checked + .slider:before {
     position: absolute;
-    content: '';
+    content: "";
     height: 15px;
     width: 15px;
     inset-inline-start: 5px;
@@ -110,4 +110,4 @@ input:checked + .slider:before {
 /* Включённый, но выключенный — цвет выделения тоже приглушается */
 .switch.switch_disabled input:checked + .slider {
     background: var(--element_background_disabled);
-}
+}

package/framework/components/chui_inputs/chui_toggle/toggle.js

@@ -1,17 +1,17 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class Toggle {
-    #Toggle = document.createElement('label');
-    #toggle_span = document.createElement('span');
-    #toggle_input = document.createElement('input');
+    #Toggle = document.createElement("label");
+    #toggle_span = document.createElement("span");
+    #toggle_input = document.createElement("input");
     #label = undefined;
-    constructor(options = {label: String(), name: String(), value: Boolean(), disabled: Boolean()}) {
+    constructor(options = { label: String(), name: String(), value: Boolean(), disabled: Boolean() }) {
         // Валидация: required для переключателя — «должен быть включён»
         Validate.installField(this, options, this.#Toggle, undefined, () => this.#toggle_input.checked);
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Toggle")
-        this.#Toggle.className = 'switch';
-        this.#toggle_input.type = 'checkbox';
-        this.#toggle_span.className = 'slider round';
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Toggle");
+        this.#Toggle.className = "switch";
+        this.#toggle_input.type = "checkbox";
+        this.#toggle_span.className = "slider round";
         if (options.name !== undefined) this.#toggle_input.name = options.name;
         // В разметке переключателя нет текста, поэтому подпись уходит в aria-label
         this.setLabel(options.label);
@@ -21,10 +21,10 @@ class Toggle {
         if (options.disabled !== undefined) this.setDisabled(options.disabled === true);
     }
     setMargin(pos = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
-        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top
-        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom
-        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left
-        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right
+        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top;
+        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom;
+        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left;
+        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right;
     }
     setId(id) {
         this.#Toggle.id = id;
@@ -50,8 +50,8 @@ class Toggle {
         this.#Toggle.classList.toggle("switch_disabled", boolean);
         return this;
     }
-    addChangeListener (listener) {
-        this.#toggle_input.addEventListener('change', listener);
+    addChangeListener(listener) {
+        this.#toggle_input.addEventListener("change", listener);
     }
     getValue() {
         return this.#toggle_input.checked;
@@ -64,4 +64,4 @@ class Toggle {
     }
 }
 
-exports.Toggle = Toggle
+exports.Toggle = Toggle;