chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_slider/slider.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../../modules/chui_functions");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 /**
  * Ползунок: одно значение или диапазон (`range: true`).
@@ -28,14 +28,14 @@ class Slider {
     #root = document.createElement("chui_slider");
     #header = document.createElement("slider_header");
     #title = document.createElement("slider_title");
-    #value_text = document.createElement("slider_value");
+    #valueLabel = document.createElement("slider_value");
     #field = document.createElement("slider_field");
     #track = document.createElement("slider_track");
     #fill = document.createElement("slider_fill");
     #thumbs = [];
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
+    #titleText = undefined;
     #label = undefined;
     #min = 0;
     #max = 100;
@@ -44,27 +44,29 @@ class Slider {
     #values = [0];
     #disabled = false;
     #format = undefined;
-    #change_listeners = [];
-    #input_listeners = [];
+    #changeListeners = [];
+    #inputListeners = [];
     #dragging = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        min: Number(),
-        max: Number(),
-        step: Number(),
-        value: undefined,
-        range: Boolean(),
-        disabled: Boolean(),
-        width: String(),
-        showValue: Boolean(),
-        format: undefined,
-        changeListener: undefined,
-        inputListener: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            min: Number(),
+            max: Number(),
+            step: Number(),
+            value: undefined,
+            range: Boolean(),
+            disabled: Boolean(),
+            width: String(),
+            showValue: Boolean(),
+            format: undefined,
+            changeListener: undefined,
+            inputListener: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Slider");
         Slider.#counter += 1;
         this.#id = options.id === undefined ? `chui_slider_${Slider.#counter}` : options.id;
@@ -86,16 +88,14 @@ class Slider {
         }
         this.#track.addEventListener("pointerdown", this.#onTrackPointerDown);
         this.#header.appendChild(this.#title);
-        this.#header.appendChild(this.#value_text);
+        this.#header.appendChild(this.#valueLabel);
         this.#root.appendChild(this.#header);
         this.#root.appendChild(this.#field);
 
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#header.hidden = true;
-        if (options.showValue === false) this.#value_text.hidden = true;
-        this.setValue(options.value === undefined
-            ? (this.#range ? [this.#min, this.#max] : this.#min)
-            : options.value);
+        if (options.showValue === false) this.#valueLabel.hidden = true;
+        this.setValue(options.value === undefined ? (this.#range ? [this.#min, this.#max] : this.#min) : options.value);
         if (options.disabled === true) this.setDisabled(true);
         if (options.width !== undefined) this.setWidth(options.width);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
@@ -153,7 +153,7 @@ class Slider {
     }
 
     setTitle(text = String()) {
-        this.#title_text = text;
+        this.#titleText = text;
         this.#title.innerText = text;
         this.#header.hidden = false;
         this.#render();
@@ -189,7 +189,7 @@ class Slider {
 
     /** Показывать ли читаемое значение рядом с заголовком */
     setShowValue(show = Boolean()) {
-        this.#value_text.hidden = show === false;
+        this.#valueLabel.hidden = show === false;
         return this;
     }
 
@@ -223,13 +223,13 @@ class Slider {
     // ПОДПИСКИ
     /** Вызов на отпускание бегунка, клик по дорожке и ход с клавиатуры */
     addChangeListener(listener = () => {}) {
-        this.#change_listeners.push(listener);
+        this.#changeListeners.push(listener);
         return this;
     }
 
     /** Вызов на каждое изменение во время перетаскивания */
     addInputListener(listener = () => {}) {
-        this.#input_listeners.push(listener);
+        this.#inputListeners.push(listener);
         return this;
     }
 
@@ -279,9 +279,12 @@ class Slider {
     }
 
     #thumbLabel(index = Number()) {
-        const base = this.#label === undefined
-            ? (this.#title_text === undefined ? I18n.t("forms.sliderValue") : this.#title_text)
-            : this.#label;
+        const base =
+            this.#label === undefined
+                ? this.#titleText === undefined
+                    ? I18n.t("forms.sliderValue")
+                    : this.#titleText
+                : this.#label;
         if (!this.#range) return base;
         return `${base}: ${index === 0 ? I18n.t("forms.sliderMin") : I18n.t("forms.sliderMax")}`;
     }
@@ -306,7 +309,7 @@ class Slider {
             if (this.#disabled) thumb.setAttribute("aria-disabled", "true");
             else thumb.removeAttribute("aria-disabled");
         });
-        this.#value_text.innerText = this.#range
+        this.#valueLabel.innerText = this.#range
             ? `${this.#valueText(low)} – ${this.#valueText(high)}`
             : this.#valueText(low);
     }
@@ -324,7 +327,7 @@ class Slider {
     }
 
     #emit(type = String()) {
-        const listeners = type === "input" ? this.#input_listeners : this.#change_listeners;
+        const listeners = type === "input" ? this.#inputListeners : this.#changeListeners;
         const value = this.getValue();
         for (const listener of [...listeners]) listener(value);
     }
@@ -422,4 +425,4 @@ class Slider {
     };
 }
 
-exports.Slider = Slider
+exports.Slider = Slider;

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

@@ -4,12 +4,12 @@ chui_slider {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     /* fill-available учитывает собственный margin, 100% — нет: слайдер уезжал
        вправо и вылезал за родителя на 6px */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
@@ -76,15 +76,17 @@ slider_thumb {
     /* Кружок целиком — 20px: рамка 2px прибавляется к 16px, а не входит в них, поэтому
        половина равна 10px. С прежними -8px бегунок стоял на 2px ниже дорожки
        и на 2px правее своего значения */
-    margin-block: -10px 0; margin-inline: -10px 0;
+    margin-block: -10px 0;
+    margin-inline: -10px 0;
     border-radius: var(--radius_circle);
     background: var(--blue_prime_background);
     border: 2px solid var(--main_background);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
+    box-shadow: var(--box_shadow_control);
     cursor: pointer;
     outline: none;
     touch-action: none;
-    transition: transform var(--transition_time);
+    /* Ползунок растёт на наведении и захвате: отклик с лёгким перелётом, а не линейный рост */
+    transition: transform var(--motion_base) var(--motion_spring);
 }
 
 slider_thumb:hover,

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

@@ -4,12 +4,12 @@ chui_text_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);
 }
 
 chui_text_main {
@@ -17,12 +17,12 @@ chui_text_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     align-items: center;
     position: relative;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
 }
 
@@ -40,20 +40,20 @@ chui_text_main {
 .input_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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 error_message_text {
     display: none;
     height: max-content;
     width: max-content;
-    margin: var(--margin) var(--margin) 0 var(--margin);
+    margin: var(--block_margin) var(--block_margin) 0 var(--block_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 {
@@ -83,8 +83,8 @@ error_message_text {
     cursor: not-allowed;
     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_disabled)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}

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

@@ -1,90 +1,107 @@
 //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');
+    #chuiTextMain = document.createElement("chui_text_main");
+    #chuiTextInput = document.createElement("chui_text_input");
     #id = require("randomstring").generate();
     #title = String();
-    #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';
+    #input = document.createElement("input");
+    #label = document.createElement("label");
+    #errorMessageText = 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";
         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 });
+        Validate.installField(this, options, this.#chuiTextMain, this.#errorMessageText, () => this.#input.value);
         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.#chui_text_input.appendChild(this.#label);
+            this.#label.className = "input_label";
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiTextInput.appendChild(this.#label);
         }
-        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiTextInput.style.width = options.width;
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
         // Опция `disableFocus`: поле не подсвечивается фокусом. Класс читает тема
         // (`field_no_focus` рядом с общим правилом полей), а не сам компонент
-        if (options.disableFocus) this.#chui_text_main.classList.add("field_no_focus");
+        if (options.disableFocus) this.#chuiTextMain.classList.add("field_no_focus");
         // Рамку с кольцом при фокусе и подсказку при наведении рисует общее правило темы
         // (`chui_text_main:hover`, `:focus-within` в global_style.css), а не компонент:
         // прежде он ставил то же самое инлайном, а на `blur` снимал весь атрибут `style`
-        this.#chui_text_main.appendChild(this.#input);
-        this.#chui_text_input.appendChild(this.#chui_text_main);
+        this.#chuiTextMain.appendChild(this.#input);
+        this.#chuiTextInput.appendChild(this.#chuiTextMain);
 
         //
         this.#input.addEventListener("input", () => {
             this.clearError();
-            new Animation(this.#error_message_text).fadeOut();
-        })
+            new Animation(this.#errorMessageText).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.#chuiTextMain.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.#chuiTextMain.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.#chuiTextInput;
+    }
 }
 
-exports.TextInput = TextInput
+exports.TextInput = TextInput;

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

@@ -4,23 +4,23 @@ chui_area_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);
 }
 
 .resize_off {
-    resize: none
+    resize: none;
 }
 
 .area_input {
     height: inherit;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     color: var(--text_color);
     background: var(--element_background);
@@ -30,10 +30,10 @@ chui_area_input {
 .textarea_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)
+    font-weight: 500;
+    color: var(--text_color);
 }
 
 /* DISABLED STYLES */
@@ -41,8 +41,8 @@ chui_area_input {
     cursor: not-allowed;
     height: inherit;
     width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
+    border-radius: var(--radius_sm);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     color: var(--text_color_disabled);
     background: var(--element_background_disabled);
@@ -53,8 +53,8 @@ chui_area_input {
     cursor: not-allowed;
     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_disabled)
-}
+    font-weight: 500;
+    color: var(--text_color_disabled);
+}

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

@@ -1,58 +1,81 @@
-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');
+    #chuiTextInput = document.createElement("chui_area_input");
+    #textArea = 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');
-        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;
+    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.#textArea.classList.add("area_input", "resize_off");
+        this.#textArea.id = this.#id;
+        if (options.name !== undefined) this.#textArea.name = options.name;
+        if (options.required !== undefined) this.#textArea.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.#chuiTextInput,
+            undefined,
+            () => this.#textArea.value,
+            this.#textArea
+        );
         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.#chui_text_input.appendChild(this.#label);
+            this.#label.classList.add("textarea_label");
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiTextInput.appendChild(this.#label);
         }
-        if (options.placeholder !== undefined) this.#text_area.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
-        if (options.height !== undefined) this.#chui_text_input.style.height = options.height;
+        if (options.placeholder !== undefined) this.#textArea.placeholder = options.placeholder;
+        if (options.width !== undefined) this.#chuiTextInput.style.width = options.width;
+        if (options.height !== undefined) this.#chuiTextInput.style.height = options.height;
         // Рамку с кольцом при фокусе рисует общее правило темы (`.area_input:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
-        this.#chui_text_input.appendChild(this.#text_area);
+        this.#chuiTextInput.appendChild(this.#textArea);
+    }
+    getName() {
+        return this.#textArea.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#textArea.value;
+    }
+    setValue(text = String()) {
+        this.#textArea.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.#textArea.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.#textArea.classList.remove("area_input");
+            this.#textArea.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.#textArea.classList.add("area_input");
+            this.#textArea.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.#chuiTextInput;
+    }
 }
 
-exports.TextArea = TextArea
+exports.TextArea = TextArea;