chuijs 4.0.1 → 4.0.3

package/framework/components/chui_radio_group/radio_group.js

@@ -1,5 +1,5 @@
-const {RadioButton} = require("../chui_inputs/chui_radio_button/radio_button");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
+const { RadioButton } = require("../chui_inputs/chui_radio_button/radio_button");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
 
 /**
  * Группа радиокнопок из массива опций.
@@ -16,8 +16,8 @@ class RadioGroup {
     static #FOCUSABLE = "input[type=radio]:not([disabled])";
     #id = require("randomstring").generate();
     #name = require("randomstring").generate();
-    #RadioGroup = document.createElement('chui_radio_group');
-    #groupForm = document.createElement('form');
+    #RadioGroup = document.createElement("chui_radio_group");
+    #groupForm = document.createElement("form");
     #options = [];
     #label = undefined;
     #disabled = false;
@@ -27,23 +27,25 @@ class RadioGroup {
     #align = undefined;
     #justify = undefined;
     #width = undefined;
-    constructor(options = {
-        styles: {
-            direction: undefined,
-            wrap: undefined,
-            align: undefined,
-            justify: undefined,
-            width: undefined
-        },
-        label: String(),
-        name: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup")
+    constructor(
+        options = {
+            styles: {
+                direction: undefined,
+                wrap: undefined,
+                align: undefined,
+                justify: undefined,
+                width: undefined,
+            },
+            label: String(),
+            name: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup");
         // Правила (required/pattern/validate/…) читает общий модуль: группа — такое же поле, как input
         Validate.installField(this, options, this.#RadioGroup, undefined, () => this.getValue());
         // styles может не прийти вовсе: раньше обращение к options.styles.direction падало
         const styles = options.styles === undefined ? {} : options.styles;
-        this.#groupForm.classList.add('radioGroupForm')
+        this.#groupForm.classList.add("radioGroupForm");
         this.#direction = styles.direction;
         this.#wrap = styles.wrap;
         this.#align = styles.align;
@@ -63,11 +65,15 @@ class RadioGroup {
         this.#RadioGroup.setAttribute("role", "radiogroup");
         if (Validate.rulesFrom(options).required === true) this.#RadioGroup.setAttribute("aria-required", "true");
         this.setLabel(options.label);
-        this.#RadioGroup.appendChild(this.#groupForm)
+        this.#RadioGroup.appendChild(this.#groupForm);
     }
     /** Имя группы: общее `name` всех флажков */
-    getName() { return this.#name; }
-    getLabel() { return this.#label; }
+    getName() {
+        return this.#name;
+    }
+    getLabel() {
+        return this.#label;
+    }
     setLabel(text = String()) {
         this.#label = text === undefined || text === "" ? undefined : text;
         if (this.#label === undefined) this.#RadioGroup.removeAttribute("aria-label");
@@ -75,7 +81,9 @@ class RadioGroup {
         return this;
     }
     /** Описания добавленных вариантов (копии) */
-    getOptions() { return this.#options.map((option) => ({...option})); }
+    getOptions() {
+        return this.#options.map((option) => ({ ...option }));
+    }
     addOptions(options = [{ name: String(), value: String(), disabled: Boolean(), checked: Boolean() }]) {
         for (const option of options) {
             const radio = new RadioButton({
@@ -83,16 +91,16 @@ class RadioGroup {
                 stringValue: option.value,
                 name: this.#name,
                 value: option.checked === true,
-                width: option.width
+                width: option.width,
             });
             if (option.disabled === true) radio.setDisabled(true);
             this.#groupForm.appendChild(radio.set());
-            this.#options.push({name: option.name, value: option.value, disabled: option.disabled === true});
+            this.#options.push({ name: option.name, value: option.value, disabled: option.disabled === true });
         }
         return this;
     }
     addChangeListener(listener = () => {}) {
-        this.#groupForm.addEventListener("change", listener)
+        this.#groupForm.addEventListener("change", listener);
         return this;
     }
     /** Выбранное значение или `undefined`, если не выбрано ничего */
@@ -115,7 +123,9 @@ class RadioGroup {
         for (const input of this.#groupForm.querySelectorAll("input[type=radio]")) input.checked = false;
         return this;
     }
-    getDisabled() { return this.#disabled; }
+    getDisabled() {
+        return this.#disabled;
+    }
     setDisabled(boolean = Boolean()) {
         this.#disabled = boolean === true;
         // Индивидуальный запрет варианта не снимается: группа лишь добавляет свой
@@ -142,4 +152,4 @@ class RadioGroup {
     }
 }
 
-exports.RadioGroup = RadioGroup
+exports.RadioGroup = RadioGroup;

package/framework/components/chui_radio_group/styles.css

@@ -13,4 +13,4 @@ chui_radio_group.radio_group_disabled {
 /* Общий класс ошибки полей: рамка не должна липнуть к флажкам */
 chui_radio_group.error_border {
     border-radius: var(--border_radius);
-}
+}

package/framework/components/chui_result/result.js

@@ -1,13 +1,13 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Значок состояния — та же семья, что у Alert, Toast и Notification */
 const STYLE_ICONS = {
     result_info: Icons.ACTIONS.INFO,
     result_success: Icons.ACTIONS.CHECK_CIRCLE,
     result_warning: Icons.ALERT.WARNING,
-    result_error: Icons.ALERT.ERROR
+    result_error: Icons.ALERT.ERROR,
 };
 
 /**
@@ -39,11 +39,11 @@ class Result {
         INFO: "result_info",
         SUCCESS: "result_success",
         WARNING: "result_warning",
-        ERROR: "result_error"
+        ERROR: "result_error",
     };
     static SIZE = {
         DEFAULT: "default",
-        COMPACT: "compact"
+        COMPACT: "compact",
     };
     static #counter = 0;
 
@@ -53,7 +53,7 @@ class Result {
             result_info: I18n.t("feedback.resultInfo"),
             result_success: I18n.t("feedback.resultSuccess"),
             result_warning: I18n.t("feedback.resultWarning"),
-            result_error: I18n.t("feedback.resultError")
+            result_error: I18n.t("feedback.resultError"),
         };
     }
 
@@ -68,11 +68,18 @@ class Result {
     #title_hidden = false;
     #icon_custom = undefined;
 
-    constructor(options = {
-        id: String(), style: String(), icon: undefined,
-        title: undefined, description: String(),
-        actions: [], label: String(), size: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            style: String(),
+            icon: undefined,
+            title: undefined,
+            description: String(),
+            actions: [],
+            label: String(),
+            size: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Result");
         Result.#counter += 1;
         this.#id = optionOr(options.id, `chui_result_${Result.#counter}`);
@@ -156,9 +163,12 @@ class Result {
             this.#renderStyleIcon();
             return this;
         }
-        this.#icon_custom = typeof icon === "string"
-            ? new Icon(icon, "36px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        this.#icon_custom =
+            typeof icon === "string"
+                ? new Icon(icon, "36px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         this.#icon.innerHTML = "";
         this.#icon.appendChild(this.#icon_custom);
         return this;
@@ -224,4 +234,4 @@ class Result {
     }
 }
 
-exports.Result = Result
+exports.Result = Result;

package/framework/components/chui_scheduler/scheduler.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Расписание: сетка времени по дням с событиями.
@@ -36,7 +36,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Scheduler {
     static VIEW = {
         DAY: "day",
-        WEEK: "week"
+        WEEK: "week",
     };
     static DEFAULT_HOUR_HEIGHT = 48;
     static DEFAULT_SLOT_MINUTES = 30;
@@ -67,22 +67,24 @@ class Scheduler {
     #on_slot_click = undefined;
     #on_period_change = undefined;
 
-    constructor(options = {
-        id: String(),
-        date: undefined,
-        view: String(),
-        events: [],
-        startHour: Number(),
-        endHour: Number(),
-        slotMinutes: Number(),
-        hourHeight: Number(),
-        firstDay: Number(),
-        height: String(),
-        label: String(),
-        onEventClick: undefined,
-        onSlotClick: undefined,
-        onPeriodChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            date: undefined,
+            view: String(),
+            events: [],
+            startHour: Number(),
+            endHour: Number(),
+            slotMinutes: Number(),
+            hourHeight: Number(),
+            firstDay: Number(),
+            height: String(),
+            label: String(),
+            onEventClick: undefined,
+            onSlotClick: undefined,
+            onPeriodChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Scheduler");
         Scheduler.#counter += 1;
         this.#id = options.id === undefined ? `chui_scheduler_${Scheduler.#counter}` : options.id;
@@ -129,7 +131,7 @@ class Scheduler {
     /** Начало и конец показанного периода (включительно) */
     getRange() {
         const days = this.#dayDates();
-        return {from: days[0], to: days[days.length - 1]};
+        return { from: days[0], to: days[days.length - 1] };
     }
 
     getEvents() {
@@ -250,7 +252,11 @@ class Scheduler {
     }
 
     static #sameDay(left = new Date(), right = new Date()) {
-        return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+        return (
+            left.getFullYear() === right.getFullYear() &&
+            left.getMonth() === right.getMonth() &&
+            left.getDate() === right.getDate()
+        );
     }
 
     static #eventDate(event = Object(), key = "start") {
@@ -268,7 +274,7 @@ class Scheduler {
     #dayDates() {
         const start = this.#startOfPeriod();
         const count = this.#view === Scheduler.VIEW.DAY ? 1 : 7;
-        return Array.from({length: count}, (_, index) => {
+        return Array.from({ length: count }, (_, index) => {
             const day = new Date(start);
             day.setDate(start.getDate() + index);
             return day;
@@ -318,7 +324,7 @@ class Scheduler {
             from = Math.max(from, dayStart);
             to = Math.min(to, dayEnd);
             if (to <= from) continue;
-            items.push({event: event, index: this.#events.indexOf(event), start: from, end: to, lane: 0, lanes: 1});
+            items.push({ event: event, index: this.#events.indexOf(event), start: from, end: to, lane: 0, lanes: 1 });
         }
         items.sort((left, right) => left.start - right.start || left.end - right.end);
         // Кластеры пересекающихся событий и дорожки внутри них
@@ -375,7 +381,10 @@ class Scheduler {
         const views = document.createElement("scheduler_views");
         views.setAttribute("role", "group");
         views.setAttribute("aria-label", I18n.t("scheduler.view"));
-        for (const [view, label] of [[Scheduler.VIEW.DAY, I18n.t("scheduler.day")], [Scheduler.VIEW.WEEK, I18n.t("scheduler.week")]]) {
+        for (const [view, label] of [
+            [Scheduler.VIEW.DAY, I18n.t("scheduler.day")],
+            [Scheduler.VIEW.WEEK, I18n.t("scheduler.week")],
+        ]) {
             const button = document.createElement("button");
             button.type = "button";
             button.className = "scheduler_view";
@@ -396,9 +405,16 @@ class Scheduler {
         const days = this.#dayDates();
         const today = new Date();
         this.#title.innerText = this.#periodTitle(days);
-        for (const [view, button] of this.#view_buttons) button.setAttribute("aria-pressed", view === this.#view ? "true" : "false");
-        this.#prev_button.setAttribute("aria-label", this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.previousDay") : I18n.t("scheduler.previousWeek"));
-        this.#next_button.setAttribute("aria-label", this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.nextDay") : I18n.t("scheduler.nextWeek"));
+        for (const [view, button] of this.#view_buttons)
+            button.setAttribute("aria-pressed", view === this.#view ? "true" : "false");
+        this.#prev_button.setAttribute(
+            "aria-label",
+            this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.previousDay") : I18n.t("scheduler.previousWeek")
+        );
+        this.#next_button.setAttribute(
+            "aria-label",
+            this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.nextDay") : I18n.t("scheduler.nextWeek")
+        );
         // Заголовки дней лежат вне области прокрутки и повторяют колонки сетки; ширина
         // вертикальной полосы прокрутки компенсируется, иначе заголовки уехали бы вправо
         const scrollbar = Math.max(0, this.#scroll.offsetWidth - this.#scroll.clientWidth);
@@ -412,7 +428,7 @@ class Scheduler {
             const head = document.createElement("scheduler_day_head");
             if (Scheduler.#sameDay(day, today)) head.classList.add("scheduler_today_head");
             const name = document.createElement("scheduler_day_name");
-            name.innerText = day.toLocaleString(I18n.getLocale(), {weekday: "short"}).toUpperCase();
+            name.innerText = day.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase();
             const number = document.createElement("scheduler_day_number");
             number.innerText = String(day.getDate());
             head.appendChild(name);
@@ -486,20 +502,25 @@ class Scheduler {
     }
 
     static #dayText(day = new Date()) {
-        return day.toLocaleString(I18n.getLocale(), {weekday: "long", day: "numeric", month: "long"});
+        return day.toLocaleString(I18n.getLocale(), { weekday: "long", day: "numeric", month: "long" });
     }
 
     #periodTitle(days = []) {
         const first = days[0];
         const last = days[days.length - 1];
         if (this.#view === Scheduler.VIEW.DAY) {
-            return first.toLocaleString(I18n.getLocale(), {weekday: "long", day: "numeric", month: "long", year: "numeric"});
+            return first.toLocaleString(I18n.getLocale(), {
+                weekday: "long",
+                day: "numeric",
+                month: "long",
+                year: "numeric",
+            });
         }
         // Дата с числом даёт месяц в родительном падеже, поэтому диапазон собирается из дня
         // и полной даты конца периода, а не из отдельного названия месяца
-        const until = last.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long", year: "numeric"});
+        const until = last.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long", year: "numeric" });
         if (first.getMonth() === last.getMonth()) return `${first.getDate()} – ${until}`;
-        const from = first.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
+        const from = first.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
         return `${from} – ${until}`;
     }
 
@@ -523,7 +544,8 @@ class Scheduler {
         const eventNode = target.closest(".scheduler_event");
         if (eventNode !== null) {
             const found = this.#events[Number(eventNode.dataset.index)];
-            if (this.#on_event_click !== undefined) this.#on_event_click(found === undefined ? undefined : found, eventNode);
+            if (this.#on_event_click !== undefined)
+                this.#on_event_click(found === undefined ? undefined : found, eventNode);
             return;
         }
         const dayNode = target.closest("scheduler_day");
@@ -534,7 +556,7 @@ class Scheduler {
             const minutes = Math.round(raw / this.#slot_minutes) * this.#slot_minutes;
             const date = this.#dayDates().find((day) => Scheduler.#key(day) === dayNode.dataset.day);
             if (date !== undefined && this.#on_slot_click !== undefined) {
-                this.#on_slot_click({date: date, minutes: minutes, time: Scheduler.#timeText(minutes)});
+                this.#on_slot_click({ date: date, minutes: minutes, time: Scheduler.#timeText(minutes) });
             }
         }
     };
@@ -563,4 +585,4 @@ class Scheduler {
     }
 }
 
-exports.Scheduler = Scheduler
+exports.Scheduler = Scheduler;

package/framework/components/chui_scheduler/styles.css

@@ -52,7 +52,10 @@ button.scheduler_view[aria-pressed="true"] {
     color: var(--text_color_hover);
 }
 
-button.scheduler_nav:focus-visible, button.scheduler_today:focus-visible, button.scheduler_view:focus-visible, button.scheduler_event:focus-visible {
+button.scheduler_nav:focus-visible,
+button.scheduler_today:focus-visible,
+button.scheduler_view:focus-visible,
+button.scheduler_event:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -119,7 +122,8 @@ scheduler_times {
 scheduler_hour {
     display: block;
     box-sizing: border-box;
-    padding-block: 2px 0; padding-inline: 0 6px;
+    padding-block: 2px 0;
+    padding-inline: 0 6px;
     text-align: end;
     color: var(--text_color_disabled);
     font-size: 0.85em;

package/framework/components/chui_segmented_control/segmented_control.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /**
  * Сегментированный переключатель: один выбор из небольшого набора равнозначных вариантов
@@ -35,7 +35,7 @@ const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
 class SegmentedControl {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -51,16 +51,18 @@ class SegmentedControl {
     #on_change = undefined;
     #activate_on_focus = false;
 
-    constructor(options = {
-        id: String(),
-        options: [],
-        value: String(),
-        label: String(),
-        size: String(),
-        stretch: Boolean(),
-        activateOnFocus: Boolean(),
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            options: [],
+            value: String(),
+            label: String(),
+            size: String(),
+            stretch: Boolean(),
+            activateOnFocus: Boolean(),
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_SegmentedControl");
         SegmentedControl.#counter += 1;
         this.#id = options.id === undefined ? `chui_segmented_control_${SegmentedControl.#counter}` : options.id;
@@ -94,7 +96,7 @@ class SegmentedControl {
     getOptions() {
         return this.#order.map((value) => {
             const record = this.#options.get(value);
-            return {value: record.value, title: record.title};
+            return { value: record.value, title: record.title };
         });
     }
 
@@ -125,7 +127,8 @@ class SegmentedControl {
 
     /** Размер вариантов: `SegmentedControl.SIZE.{SMALL, DEFAULT}` */
     setSize(size = String()) {
-        this.#root.dataset.size = size === SegmentedControl.SIZE.SMALL ? SegmentedControl.SIZE.SMALL : SegmentedControl.SIZE.DEFAULT;
+        this.#root.dataset.size =
+            size === SegmentedControl.SIZE.SMALL ? SegmentedControl.SIZE.SMALL : SegmentedControl.SIZE.DEFAULT;
         return this;
     }
 
@@ -154,7 +157,7 @@ class SegmentedControl {
     }
 
     /** Добавить вариант: `{value, title, icon, disabled}` */
-    addOption(option = {value: String(), title: String(), icon: undefined, disabled: Boolean()}) {
+    addOption(option = { value: String(), title: String(), icon: undefined, disabled: Boolean() }) {
         this.#root.appendChild(this.#createOption(option));
         this.#sync();
         return this;
@@ -174,7 +177,8 @@ class SegmentedControl {
         this.#value = undefined;
         this.#active = undefined;
         for (const option of list) this.#root.appendChild(this.#createOption(option));
-        if (previous !== undefined && this.#options.has(previous) && !this.#disabled.has(previous)) this.#value = previous;
+        if (previous !== undefined && this.#options.has(previous) && !this.#disabled.has(previous))
+            this.#value = previous;
         this.#sync();
         return this;
     }
@@ -229,11 +233,12 @@ class SegmentedControl {
         makeKeyboardButton(node, "radio");
         node.setAttribute("aria-checked", "false");
         node.dataset.value = value;
-        if (option.icon !== undefined && option.icon !== null) node.insertAdjacentHTML("afterbegin", option.icon.getHTML());
+        if (option.icon !== undefined && option.icon !== null)
+            node.insertAdjacentHTML("afterbegin", option.icon.getHTML());
         const title = document.createElement("segmented_title");
         title.innerText = option.title === undefined ? value : String(option.title);
         node.appendChild(title);
-        this.#options.set(value, {value: value, title: title.innerText, node: node});
+        this.#options.set(value, { value: value, title: title.innerText, node: node });
         this.#order.push(value);
         // Запрет мог быть выставлен программно (setDisabled) и остаться после пересборки набора
         if (option.disabled === true || this.#disabled.has(value)) this.setDisabled(value, true);
@@ -294,10 +299,11 @@ class SegmentedControl {
         let next;
         if (event.key === "Home") next = 0;
         else if (event.key === "End") next = available.length - 1;
-        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (current - 1 + available.length) % available.length;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp")
+            next = (current - 1 + available.length) % available.length;
         else next = (current + 1) % available.length;
         this.#focus(available[next]);
     };
 }
 
-exports.SegmentedControl = SegmentedControl
+exports.SegmentedControl = SegmentedControl;