chuijs 4.0.2 → 4.0.4

package/framework/components/chui_inputs/chui_date_range/date_range.js

@@ -1,8 +1,8 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {DateInput} = require('../chui_date/date');
-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 } = require("../../../modules/chui_functions");
+const { DateInput } = require("../chui_date/date");
+const { Icon, Icons } = require("../../chui_icons/icons");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Значение пары для правил — «начало..конец»: так его видит `validate()`
 const RANGE_PATTERN = "^[0-9]{4}-[0-9]{2}-[0-9]{2}\\.\\.[0-9]{4}-[0-9]{2}-[0-9]{2}$";
@@ -47,42 +47,49 @@ class DateRangeInput {
     #end = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
-    #ordering_message = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
+    #orderingMessage = undefined;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        startTitle: String(),
-        endTitle: String(),
-        separator: undefined,
-        value: undefined,
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            startTitle: String(),
+            endTitle: String(),
+            separator: undefined,
+            value: undefined,
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_DateRangeInput");
         DateRangeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_date_range_input_${DateRangeInput.#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;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
-        if (options.messages !== undefined && options.messages.validate !== undefined) this.#ordering_message = String(options.messages.validate);
+        if (options.messages !== undefined && options.messages.validate !== undefined)
+            this.#orderingMessage = String(options.messages.validate);
         // Общий текст берётся из словаря: своё сообщение поля важнее перевода
-        if (this.#ordering_message === undefined) this.#ordering_message = I18n.t("dateRange.wrongOrder");
+        if (this.#orderingMessage === undefined) this.#orderingMessage = I18n.t("dateRange.wrongOrder");
         this.#root.id = this.#id;
         this.#label.className = "date_range_label";
         this.#row.className = "date_range_row";
         this.#row.setAttribute("role", "group");
-        this.#start = new DateInput({title: options.startTitle === undefined ? I18n.t("dateRange.start") : options.startTitle});
-        this.#end = new DateInput({title: options.endTitle === undefined ? I18n.t("dateRange.end") : options.endTitle});
+        this.#start = new DateInput({
+            title: options.startTitle === undefined ? I18n.t("dateRange.start") : options.startTitle,
+        });
+        this.#end = new DateInput({
+            title: options.endTitle === undefined ? I18n.t("dateRange.end") : options.endTitle,
+        });
         this.#separator.className = "date_range_separator";
         this.#separator.setAttribute("aria-hidden", "true");
         const glyph = new Icon(options.separator === undefined ? Icons.NAVIGATION.EAST : options.separator).set();
@@ -102,21 +109,25 @@ class DateRangeInput {
         this.#root.appendChild(this.#label);
         this.#root.appendChild(this.#row);
         this.#root.appendChild(this.#status);
-        this.setLabel(options.label === undefined
-            ? (options.title === undefined ? I18n.t("dateRange.label") : options.title)
-            : options.label);
+        this.setLabel(
+            options.label === undefined
+                ? options.title === undefined
+                    ? I18n.t("dateRange.label")
+                    : options.title
+                : options.label
+        );
         const rules = Validate.rulesFrom(options);
         // У поля даты min/max — это не границы Validate, а порядок пары
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = RANGE_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         rules.validate = (value) => {
-            const custom = own_validate === undefined ? undefined : own_validate(value);
+            const custom = ownValidate === undefined ? undefined : ownValidate(value);
             if (custom !== undefined && custom !== null && custom !== true) return custom;
             const [start, end] = String(value).split("..");
             if (start === undefined || end === undefined || start === "" || end === "") return undefined;
-            if (end < start) return this.#ordering_message;
+            if (end < start) return this.#orderingMessage;
             return undefined;
         };
         Validate.installField(this, rules, this.#root, undefined, () => this.#rawValue(), this.#row);
@@ -134,17 +145,17 @@ class DateRangeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Период: строки «ГГГГ-ММ-ДД», пустая строка — дата не выбрана */
     getValue() {
-        return {start: this.#start.getValue(), end: this.#end.getValue()};
+        return { start: this.#start.getValue(), end: this.#end.getValue() };
     }
 
     getStart() {
@@ -161,8 +172,8 @@ class DateRangeInput {
         const start = DateRangeInput.#display(value.start);
         const end = DateRangeInput.#display(value.end);
         if (start === "" && end === "") return I18n.t("dateRange.empty");
-        if (start === "") return I18n.t("dateRange.to", {end: end});
-        if (end === "") return I18n.t("dateRange.from", {start: start});
+        if (start === "") return I18n.t("dateRange.to", { end: end });
+        if (end === "") return I18n.t("dateRange.from", { start: start });
         return `${start} — ${end}`;
     }
 
@@ -184,7 +195,7 @@ class DateRangeInput {
 
     /** Подпись над парой полей; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -197,7 +208,7 @@ class DateRangeInput {
 
     /** Доступное имя группы; `undefined` убирает его */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         if (text === undefined) this.#row.removeAttribute("aria-label");
         else this.#row.setAttribute("aria-label", String(text));
         return this;
@@ -215,7 +226,7 @@ class DateRangeInput {
             this.#syncLimits();
             return this;
         }
-        const pair = Array.isArray(value) ? {start: value[0], end: value[1]} : value;
+        const pair = Array.isArray(value) ? { start: value[0], end: value[1] } : value;
         const start = DateRangeInput.#parseDate(pair.start);
         const end = DateRangeInput.#parseDate(pair.end);
         if (start === undefined || end === undefined) {
@@ -285,13 +296,13 @@ class DateRangeInput {
      * так что перевёрнутый период не пройдёт проверку и без нативной границы.
      */
     #syncLimits() {
-        const start_input = this.#start.set().querySelector("input.date_input");
-        const end_input = this.#end.set().querySelector("input.date_input");
-        if (start_input === null || end_input === null) return;
-        start_input.removeAttribute("max");
+        const startInput = this.#start.set().querySelector("input.date_input");
+        const endInput = this.#end.set().querySelector("input.date_input");
+        if (startInput === null || endInput === null) return;
+        startInput.removeAttribute("max");
         const value = this.getValue();
-        if (value.start === "") end_input.removeAttribute("min");
-        else end_input.min = value.start;
+        if (value.start === "") endInput.removeAttribute("min");
+        else endInput.min = value.start;
     }
 
     #changed() {
@@ -299,7 +310,7 @@ class DateRangeInput {
         this.#status.innerText = this.getValueText();
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     static #parseDate(value = undefined) {
@@ -319,4 +330,4 @@ class DateRangeInput {
     }
 }
 
-exports.DateRangeInput = DateRangeInput
+exports.DateRangeInput = DateRangeInput;

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

@@ -5,18 +5,18 @@ chui_date_range_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: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .date_range_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;

package/framework/components/chui_inputs/chui_datetime/datetime.js

@@ -1,8 +1,8 @@
-const {setStyles} = require('../../../modules/chui_functions');
-const {DateInput} = require('../chui_date/date');
-const {TimeInput} = require('../chui_time/time');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../../modules/chui_functions");
+const { DateInput } = require("../chui_date/date");
+const { TimeInput } = require("../chui_time/time");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
 
 // Значение поля — «ГГГГ-ММ-ДДTЧЧ:ММ»: тот же вид, что у нативного datetime-local,
 // и такой же однозначный для сравнений (ширина всех частей постоянная)
@@ -43,44 +43,48 @@ class DateTimeInput {
     #time = undefined;
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #min = undefined;
     #max = undefined;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
+    #onChange = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        dateTitle: String(),
-        timeTitle: String(),
-        value: undefined,
-        step: Number(),
-        min: String(),
-        max: String(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            dateTitle: String(),
+            timeTitle: String(),
+            value: undefined,
+            step: Number(),
+            min: String(),
+            max: String(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_DateTimeInput");
         DateTimeInput.#counter += 1;
         this.#id = options.id === undefined ? `chui_datetime_input_${DateTimeInput.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
+        this.#labelText = options.label;
         this.#min = DateTimeInput.#parseMoment(options.min);
         this.#max = DateTimeInput.#parseMoment(options.max);
-        this.#on_change = options.onChange;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         this.#root.id = this.#id;
         this.#label.className = "datetime_label";
         this.#row.className = "datetime_row";
         // Группа: у пары полей должно быть общее имя, иначе они читаются как два отдельных поля
         this.#row.setAttribute("role", "group");
-        this.#date = new DateInput({title: options.dateTitle === undefined ? I18n.t("date.label") : options.dateTitle});
+        this.#date = new DateInput({
+            title: options.dateTitle === undefined ? I18n.t("date.label") : options.dateTitle,
+        });
         this.#time = new TimeInput({
             title: options.timeTitle === undefined ? I18n.t("time.label") : options.timeTitle,
             step: options.step,
@@ -93,21 +97,25 @@ class DateTimeInput {
         else this.#label.hidden = true;
         this.#root.appendChild(this.#label);
         this.#root.appendChild(this.#row);
-        this.setLabel(options.label === undefined
-            ? (options.title === undefined ? I18n.t("dateTime.label") : options.title)
-            : options.label);
+        this.setLabel(
+            options.label === undefined
+                ? options.title === undefined
+                    ? I18n.t("dateTime.label")
+                    : options.title
+                : options.label
+        );
         // `min`/`max` как числа здесь не работают: у поля времени это окно, а не границы Validate
         const rules = Validate.rulesFrom(options);
         delete rules.min;
         delete rules.max;
         if (rules.pattern === undefined) rules.pattern = MOMENT_PATTERN;
-        const own_validate = options.validate;
+        const ownValidate = options.validate;
         rules.validate = (value) => {
-            const custom = own_validate === undefined ? undefined : own_validate(value);
+            const custom = ownValidate === undefined ? undefined : ownValidate(value);
             if (custom !== undefined && custom !== null && custom !== true) return custom;
             const moment = String(value);
-            if (this.#min !== undefined && moment < this.#min) return I18n.t("dateTime.min", {min: this.#min});
-            if (this.#max !== undefined && moment > this.#max) return I18n.t("dateTime.max", {max: this.#max});
+            if (this.#min !== undefined && moment < this.#min) return I18n.t("dateTime.min", { min: this.#min });
+            if (this.#max !== undefined && moment > this.#max) return I18n.t("dateTime.max", { max: this.#max });
             return undefined;
         };
         Validate.installField(this, rules, this.#root, undefined, () => this.#rawValue(), this.#row);
@@ -125,12 +133,12 @@ class DateTimeInput {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя группы, заданное в `label` */
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Момент «ГГГГ-ММ-ДДTЧЧ:ММ»; пустая строка — заполнена не вся пара */
@@ -180,7 +188,7 @@ class DateTimeInput {
 
     /** Подпись над парой полей; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.hidden = true;
             this.#label.innerText = "";
@@ -193,7 +201,7 @@ class DateTimeInput {
 
     /** Доступное имя группы; `undefined` убирает его */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         if (text === undefined) this.#row.removeAttribute("aria-label");
         else this.#row.setAttribute("aria-label", String(text));
         return this;
@@ -272,7 +280,7 @@ class DateTimeInput {
     #changed() {
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
     }
 
     static #parseMoment(value = undefined) {
@@ -292,4 +300,4 @@ class DateTimeInput {
     }
 }
 
-exports.DateTimeInput = DateTimeInput
+exports.DateTimeInput = DateTimeInput;

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

@@ -5,18 +5,18 @@ chui_datetime_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: max-content;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .datetime_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;

package/framework/components/chui_inputs/chui_email/email.js

@@ -1,60 +1,72 @@
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class EmailInput {
     #id = require("randomstring").generate();
-    #chui_email_input = document.createElement('chui_email_input');
-    #chui_email_main = document.createElement('chui_email_main');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
+    #chuiEmailInput = document.createElement("chui_email_input");
+    #chuiEmailMain = document.createElement("chui_email_main");
+    #label = document.createElement("label");
+    #input = document.createElement("input");
     #title = undefined;
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_EmailInput');
+    constructor(
+        options = {
+            name: String(),
+            title: String(),
+            placeholder: String(),
+            width: String(),
+            required: Boolean(),
+        }
+    ) {
+        require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_EmailInput");
         this.#title = options.title;
-        this.#input.type = 'email';
-        this.#input.className = 'email_input'
+        this.#input.type = "email";
+        this.#input.className = "email_input";
         this.#input.id = this.#id;
         if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.pattern = '^([a-zA-Z0-9_.+-])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$'
+        this.#input.pattern = "^([a-zA-Z0-9_.+-])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$";
         if (options.required !== undefined) this.#input.required = options.required;
         // Валидация: email-формат проверяется правилом type: 'email'
-        Validate.installField(this, options, this.#chui_email_main, undefined, () => this.#input.value);
+        Validate.installField(this, options, this.#chuiEmailMain, undefined, () => this.#input.value);
         if (options.title !== undefined) {
             this.#label.innerText = options.title;
-            this.#label.classList.add('email_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_email_input.appendChild(this.#label);
+            this.#label.classList.add("email_label");
+            this.#label.setAttribute("for", this.#id);
+            this.#chuiEmailInput.appendChild(this.#label);
         }
         if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_email_input.style.width = options.width;
+        if (options.width !== undefined) this.#chuiEmailInput.style.width = options.width;
         // Рамку с кольцом при фокусе рисует общее правило темы (`chui_email_main:hover`,
         // `:focus-within`), а не компонент: прежде он ставил то же самое инлайном,
         // а на `blur` снимал весь атрибут `style`
-        this.#chui_email_main.appendChild(this.#input);
-        this.#chui_email_input.appendChild(this.#chui_email_main);
+        this.#chuiEmailMain.appendChild(this.#input);
+        this.#chuiEmailInput.appendChild(this.#chuiEmailMain);
+    }
+    getName() {
+        return this.#input.name;
+    }
+    getTitle() {
+        return this.#title;
+    }
+    getValue() {
+        return this.#input.value;
+    }
+    setValue(text = String()) {
+        this.#input.value = text;
     }
-    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_email_main.classList.add("chui_email_main_disabled")
-            this.#input.className = "email_input_disabled"
-            this.#label.className = "email_label_disabled"
+            this.#chuiEmailMain.classList.add("chui_email_main_disabled");
+            this.#input.className = "email_input_disabled";
+            this.#label.className = "email_label_disabled";
         } else {
-            this.#chui_email_main.classList.remove("chui_email_main_disabled")
-            this.#input.className = "email_input"
-            this.#label.className = "email_label"
+            this.#chuiEmailMain.classList.remove("chui_email_main_disabled");
+            this.#input.className = "email_input";
+            this.#label.className = "email_label";
         }
     }
-    set() { return this.#chui_email_input; }
+    set() {
+        return this.#chuiEmailInput;
+    }
 }
 
-exports.EmailInput = EmailInput
+exports.EmailInput = EmailInput;

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

@@ -4,12 +4,12 @@ chui_email_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_email_main {
@@ -17,11 +17,11 @@ chui_email_main {
     width: -webkit-fill-available;
     height: max-content;
     margin: 0;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     align-items: center;
     position: relative;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     background: var(--element_background);
     border: 1px solid var(--border_color);
 }
@@ -40,10 +40,10 @@ chui_email_main {
 .email_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 */
@@ -63,14 +63,14 @@ chui_email_main {
     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);
 }
 
 .chui_email_main_disabled {
     cursor: not-allowed;
     background: var(--element_background_disabled);
     border: 1px solid var(--border_color);
-}
+}