chuijs 4.0.2 → 4.0.4

package/framework/components/chui_banner/styles.css

@@ -0,0 +1,170 @@
+/* Баннер: карточка-объявление с кромкой (значок или фото), текстом и действиями.
+   Материал — как у карточки и `Alert`: своя подложка и волосяная рамка. Отдельных цветов
+   у компонента нет: состояние несут плашка значка, фото и кнопки. */
+
+chui_banner {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    /* Компонент сам задаёт ширину: в flex-колонке с `align-items: flex-start` карточка
+       без ширины получила бы `max-content` и вылезла за содержимое */
+    width: -webkit-fill-available;
+    box-sizing: border-box;
+    padding: 12px 14px;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    background: var(--element_background_2);
+    color: var(--text_color);
+    font-size: var(--font_default_size);
+    text-align: start;
+    /* Появление: карточка встаёт на место — общий кадр из global_style.css */
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: карточка гаснет и сходит вверх, узел убирается по концу кадра */
+.banner_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+/* Крупный баннер — карточка: кромка сверху во всю ширину, текст и действия под ней */
+chui_banner[data-size="m"] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    /* Кромка касается краёв карточки: свои отступы у неё снизу, у текста — по бокам */
+    padding: 0 0 12px;
+}
+
+banner_media {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Кромка со значком — квадрат со строку текста (29 px у поля + воздух): в обоих
+       размерах она одного роста, а крупный вид с фотографией перекрывает этот размер ниже */
+    width: 44px;
+    height: 44px;
+    overflow: hidden;
+    border-radius: var(--radius_sm);
+    background: var(--element_background);
+    color: var(--blue_prime_background);
+}
+
+chui_banner[data-mode="tint"] banner_media {
+    background: var(--blue_prime_background_tint);
+}
+
+/* Фото — состояние `image`: кромка тянется во всю ширину карточки */
+chui_banner[data-mode="image"][data-size="m"] banner_media {
+    width: -webkit-fill-available;
+    height: 140px;
+    border-radius: var(--radius_md) var(--radius_md) 0 0;
+}
+
+/* Плашка со значком в крупном баннере остаётся плашкой: без картинки полоса во всю ширину
+   была бы пустой — объявление читалось бы полем без содержимого */
+chui_banner[data-mode="tint"][data-size="m"] banner_media {
+    align-self: flex-start;
+    margin: 12px 14px 0;
+}
+
+banner_media img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+banner_content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* В крупном баннере текст отходит от краёв карточки: кромка их уже заняла */
+chui_banner[data-size="m"] banner_content {
+    padding-inline: 14px;
+}
+
+banner_title {
+    font-weight: 600;
+    color: var(--text_color);
+    word-break: break-word;
+}
+
+banner_subtitle {
+    color: var(--text_color_disabled);
+    font-size: var(--font_labels_size);
+    word-break: break-word;
+}
+
+banner_text {
+    color: var(--text_color);
+    word-break: break-word;
+}
+
+banner_text p {
+    margin: 0;
+}
+
+banner_actions {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Пустой блок действий места не занимает */
+banner_actions:empty {
+    display: none;
+}
+
+chui_banner[data-size="m"] banner_actions {
+    padding-inline: 14px;
+}
+
+/* Закрытие — круглая кнопка в углу карточки: в крупном баннере она лежит поверх кромки,
+   поэтому фон у неё есть всегда, иначе значок терялся бы на снимке */
+.banner_close {
+    position: absolute;
+    top: 8px;
+    inset-inline-end: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius_circle);
+    background: var(--element_background);
+    color: var(--text_color_disabled);
+}
+
+.banner_close:hover {
+    background: var(--element_background_hover);
+    color: var(--text_color);
+}
+
+.banner_close chui_icon {
+    color: inherit;
+}
+
+/* В строке (размер `s`) кнопке хватает места в ряду: поверх кромки она не лежит */
+chui_banner[data-size="s"] .banner_close {
+    position: static;
+    flex: none;
+    background: transparent;
+}
+
+chui_banner[data-size="s"] .banner_close:hover {
+    background: var(--element_background_hover);
+}

package/framework/components/chui_breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon, Icons} = require("../chui_icons/icons");
-const {Link} = require("../chui_link/link");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { Link } = require("../chui_link/link");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Навигационная цепочка: путь от корня к текущему месту с переходом по звеньям.
@@ -25,7 +25,7 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
 class Breadcrumb {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -34,12 +34,14 @@ class Breadcrumb {
     #items = [];
     #id = undefined;
 
-    constructor(options = {
-        id: String(),
-        items: [],
-        size: String(),
-        label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            items: [],
+            size: String(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Breadcrumb");
         Breadcrumb.#counter += 1;
         this.#id = options.id === undefined ? `chui_breadcrumb_${Breadcrumb.#counter}` : options.id;
@@ -121,7 +123,7 @@ class Breadcrumb {
             node.appendChild(text);
             return node;
         }
-        const link = new Link({text: item.title, href: item.href, clickEvent: item.clickEvent, icon: item.icon});
+        const link = new Link({ text: item.title, href: item.href, clickEvent: item.clickEvent, icon: item.icon });
         node.appendChild(link.set());
         return node;
     }
@@ -140,4 +142,4 @@ class Breadcrumb {
     static ICON_SIZE = "14px";
 }
 
-exports.Breadcrumb = Breadcrumb
+exports.Breadcrumb = Breadcrumb;

package/framework/components/chui_breadcrumb/styles.css

@@ -3,7 +3,7 @@ chui_breadcrumb {
     display: block;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }

package/framework/components/chui_button/button.js

@@ -1,80 +1,96 @@
-const {Icon} = require("../chui_icons/icons");
+const { Icon } = require("../chui_icons/icons");
 
 class Button {
-    #chui_button = document.createElement('chui_button');
-    #button = document.createElement('button');
-    #button_text = document.createElement('button_text');
-    #button_icon = document.createElement('button_icon');
-    #label_text = undefined;
-    constructor(options = { reverse: Boolean(), title: String(), icon: undefined, label: String(), disabled: Boolean(), clickEvent: () => {} }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Button")
+    #chuiButton = document.createElement("chui_button");
+    #button = document.createElement("button");
+    #buttonText = document.createElement("button_text");
+    #buttonIcon = document.createElement("button_icon");
+    #labelText = undefined;
+    constructor(
+        options = {
+            reverse: Boolean(),
+            title: String(),
+            icon: undefined,
+            label: String(),
+            disabled: Boolean(),
+            clickEvent: () => {},
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Button");
 
-        this.#button.className = "chui_button"
-        this.#button_text.className = "chui_button_text"
+        this.#button.className = "chui_button";
+        this.#buttonText.className = "chui_button_text";
         // Иконка декоративна: иначе её глиф-имя («print», «delete»…) попадает в имя кнопки
-        this.#button_icon.setAttribute("aria-hidden", "true");
+        this.#buttonIcon.setAttribute("aria-hidden", "true");
 
-        if (options.title !== undefined) this.#button_text.innerText = options.title;
-        if (options.icon !== undefined) this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+        if (options.title !== undefined) this.#buttonText.innerText = options.title;
+        if (options.icon !== undefined)
+            this.#buttonIcon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
 
         if (options.title !== undefined && options.icon === undefined) {
-            this.#button.appendChild(this.#button_text);
+            this.#button.appendChild(this.#buttonText);
         } else if (options.title === undefined && options.icon !== undefined) {
             // Квадратный отступ для кнопки только со значком: признак читает CSS
             this.#button.dataset.icon_only = "true";
-            this.#button.appendChild(this.#button_icon);
+            this.#button.appendChild(this.#buttonIcon);
         } else {
             // Порядок детей задаёт `reverse`, а зазор между значком и подписью —
             // `gap` в CSS: инлайновые отступы здесь больше не нужны
             if (options.reverse) {
-                this.#button.appendChild(this.#button_icon);
-                this.#button.appendChild(this.#button_text);
+                this.#button.appendChild(this.#buttonIcon);
+                this.#button.appendChild(this.#buttonText);
             } else {
-                this.#button.appendChild(this.#button_text);
-                this.#button.appendChild(this.#button_icon);
+                this.#button.appendChild(this.#buttonText);
+                this.#button.appendChild(this.#buttonIcon);
             }
         }
 
-        if (options.clickEvent !== undefined) this.#button.addEventListener('click', options.clickEvent);
-        this.#button.addEventListener("mousedown", () => {
-            return false
-        })
-        this.#chui_button.appendChild(this.#button)
+        if (options.clickEvent !== undefined) this.#button.addEventListener("click", options.clickEvent);
+        this.#chuiButton.appendChild(this.#button);
         // Доступное имя кнопки без надписи: значок декоративен (`aria-hidden`) и имени не даёт,
         // поэтому кнопка только со значком оставалась бы без имени
         if (options.label !== undefined) this.setLabel(options.label);
         // `disabled` в опциях — то же, что setDisabled(true): без этого опция молча терялась
         if (options.disabled === true) this.setDisabled(true);
     }
-    getText() { return this.#button_text.innerText; }
+    getText() {
+        return this.#buttonText.innerText;
+    }
     /** Новый текст. Пишем в `button_text`, а не в саму кнопку: запись в кнопку целиком
      *  затирала бы и значок, и его разметку (`aria-hidden`), а `getText()` читал бы старый узел */
     setText(text = String()) {
-        this.#button_text.innerText = text;
+        this.#buttonText.innerText = text;
         // Пустой узел в разметку не дописываем: кнопке только со значком он ничего не даёт
-        if (String(text) !== "" && !this.#button.contains(this.#button_text)) this.#button.appendChild(this.#button_text);
+        if (String(text) !== "" && !this.#button.contains(this.#buttonText)) this.#button.appendChild(this.#buttonText);
         this.#syncLabel();
         return this;
     }
-    getLabel() { return this.#label_text; }
+    getLabel() {
+        return this.#labelText;
+    }
     /** Доступное имя кнопки без видимой надписи; `undefined` его убирает.
      *  Пока надпись есть, имя даёт она сама — `aria-label` тогда не ставится и не подменяет её */
     setLabel(label = undefined) {
-        this.#label_text = label;
+        this.#labelText = label;
         this.#syncLabel();
         return this;
     }
     /** Имя кнопки: из видимой надписи, а если её нет — из `label` */
     #syncLabel() {
-        const hasText = this.#button.contains(this.#button_text) && this.#button_text.innerText.trim() !== "";
-        if (hasText || this.#label_text === undefined || this.#label_text === "") this.#button.removeAttribute("aria-label");
-        else this.#button.setAttribute("aria-label", String(this.#label_text));
+        const hasText = this.#button.contains(this.#buttonText) && this.#buttonText.innerText.trim() !== "";
+        if (hasText || this.#labelText === undefined || this.#labelText === "")
+            this.#button.removeAttribute("aria-label");
+        else this.#button.setAttribute("aria-label", String(this.#labelText));
+    }
+    addClickListener(listener = () => {}) {
+        this.#button.addEventListener("click", listener);
     }
-    addClickListener(listener = () => {}) { this.#button.addEventListener('click', listener); }
     setDisabled(boolean = Boolean()) {
-        this.#button.disabled = boolean
+        this.#button.disabled = boolean;
+    }
+    set() {
+        return this.#chuiButton;
     }
-    set() { return this.#chui_button; }
 }
 
-exports.Button = Button
+exports.Button = Button;

package/framework/components/chui_button/styles.css

@@ -2,19 +2,19 @@ chui_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
+    border-radius: var(--radius_sm);
+    margin: var(--block_margin);
 }
 
 .chui_button {
     cursor: pointer;
     height: max-content;
     width: max-content;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Компактный шаг: 5px по вертикали дают 29px (значок 17 + отступы 10 + черта 2) —
-       как у кнопок шапки (30px). Прежде стояло --main_padding (8px 13px), и кнопка
+       как у кнопок шапки (30px). Прежде стояло --block_padding (8px 13px), и кнопка
        выходила 35px, то есть ростом с поле ввода — самый крупный контроль в вёрстке. */
-    padding: var(--main_padding_sm);
+    padding: var(--block_padding_sm);
     /* Зазор вместо `margin-left`, который ставил JS: отступ между значком и подписью
        держит flex-контейнер, поэтому он не зависит от порядка детей (включая `reverse`). */
     gap: var(--control_padding);
@@ -45,7 +45,7 @@ chui_button {
     background: var(--blue_prime_background);
     border-color: var(--button_border_color_hover);
     /* Лёгкая усадка: нажатие читается даже тогда, когда заливка уже акцентная */
-    transform: scale(.97);
+    transform: scale(0.97);
 }
 
 .chui_button_text {
@@ -97,4 +97,4 @@ chui_button {
 
 .chui_button:disabled:hover button_icon chui_icon {
     color: var(--text_color_disabled);
-}
+}

package/framework/components/chui_calendar/calendar.js

@@ -1,4 +1,4 @@
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Calendar {
     constructor(year, month) {
@@ -11,14 +11,16 @@ class Calendar {
             new Array(7),
             new Array(7),
             new Array(7),
-            new Array(7)
+            new Array(7),
         ];
 
         // Названия дней недели берёт локаль текущего языка (воскресенье — 0):
         // семь подряд идущих дней месяца покрывают все дни недели
         for (let day = 0; day < 7; day++) {
             const sample = new Date(this.year, this.month, day + 1);
-            this.calendar[0][sample.getDay()] = sample.toLocaleString(I18n.getLocale(), { weekday: 'short' }).toUpperCase();
+            this.calendar[0][sample.getDay()] = sample
+                .toLocaleString(I18n.getLocale(), { weekday: "short" })
+                .toUpperCase();
         }
 
         this.list = [];
@@ -35,19 +37,19 @@ class Calendar {
             second: 'numeric'
         };*/
         while (this.date.getMonth() === this.month) {
-            let dayToPush = this.date;
-            let days = [];
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {day: 'numeric'}));
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {weekday: 'short'}).toUpperCase());
-            days.push(dayToPush.toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase());
+            const dayToPush = this.date;
+            const days = [];
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { day: "numeric" }));
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase());
+            days.push(dayToPush.toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase());
             this.date.setDate(this.date.getDate() + 1);
-            this.list.push(days)
+            this.list.push(days);
         }
         let index = 1;
-        for (let day of this.list) {
-            for (let name_day of this.calendar[0]) {
-                let indexz = this.calendar[0].indexOf(name_day);
-                if (day[1].includes(name_day)) {
+        for (const day of this.list) {
+            for (const nameDay of this.calendar[0]) {
+                const indexz = this.calendar[0].indexOf(nameDay);
+                if (day[1].includes(nameDay)) {
                     this.calendar[index][indexz] = day[0];
                     if (indexz === 6) {
                         index++;
@@ -60,10 +62,10 @@ class Calendar {
         return new Date();
     }
     getMonthName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), {month: 'long'}).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { month: "long" }).toUpperCase();
     }
     getDayName() {
-        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: 'long' }).toUpperCase();
+        return new Date(this.year, this.month).toLocaleString(I18n.getLocale(), { weekday: "long" }).toUpperCase();
     }
     getDate() {
         return new Date(this.year, this.month).getDate();
@@ -79,4 +81,4 @@ class Calendar {
     }
 }
 
-exports.Calendar = Calendar
+exports.Calendar = Calendar;

package/framework/components/chui_card/card.js

@@ -1,50 +1,66 @@
-const {Icon} = require("../chui_icons/icons");
-const {optionOr} = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { optionOr } = require("../../modules/chui_functions");
 
 class Card {
-    #chui_card = document.createElement("chui_card");
+    #chuiCard = document.createElement("chui_card");
     #head;
     #icon;
     #titles;
     #title;
     #description;
     #body = document.createElement("card_body");
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        icon: String(),
-        width: String(),
-        height: String(),
-        style: String(),
-        components: []
-    }) {
-        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", 'chUiJS_Card');
-        if (options.id !== undefined) this.#chui_card.id = options.id;
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            icon: String(),
+            width: String(),
+            height: String(),
+            style: String(),
+            components: [],
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Card");
+        if (options.id !== undefined) this.#chuiCard.id = options.id;
         const style = optionOr(options.style, undefined);
-        if (style !== undefined) this.#chui_card.classList.add(style);
-        if (options.width !== undefined) this.#chui_card.style.width = options.width;
-        if (options.height !== undefined) this.#chui_card.style.height = options.height;
-        this.#chui_card.appendChild(this.#body);
+        if (style !== undefined) this.#chuiCard.classList.add(style);
+        if (options.width !== undefined) this.#chuiCard.style.width = options.width;
+        if (options.height !== undefined) this.#chuiCard.style.height = options.height;
+        this.#chuiCard.appendChild(this.#body);
         if (options.icon !== undefined) this.setIcon(options.icon);
         if (options.title !== undefined) this.setTitle(options.title);
         if (options.description !== undefined) this.setDescription(options.description);
         if (options.components !== undefined) this.add(...options.components);
     }
     // GET
-    getId() { return this.#chui_card.id; }
-    getTitle() { return this.#title === undefined ? "" : this.#title.innerText; }
-    getDescription() { return this.#description === undefined ? "" : this.#description.innerText; }
-    getBody() { return this.#body; }
+    getId() {
+        return this.#chuiCard.id;
+    }
+    getTitle() {
+        return this.#title === undefined ? "" : this.#title.innerText;
+    }
+    getDescription() {
+        return this.#description === undefined ? "" : this.#description.innerText;
+    }
+    getBody() {
+        return this.#body;
+    }
     // SET
-    setId(id = String()) { this.#chui_card.id = id; }
+    setId(id = String()) {
+        this.#chuiCard.id = id;
+    }
     // Пустая строка — «не задана»: `classList.add("")` бросает исключение
     setStyle(style = String()) {
         const known = optionOr(style, undefined);
-        if (known !== undefined) this.#chui_card.classList.add(known);
+        if (known !== undefined) this.#chuiCard.classList.add(known);
+    }
+    setWidth(width = String()) {
+        this.#chuiCard.style.width = width;
+    }
+    setHeight(height = String()) {
+        this.#chuiCard.style.height = height;
     }
-    setWidth(width = String()) { this.#chui_card.style.width = width; }
-    setHeight(height = String()) { this.#chui_card.style.height = height; }
     setIcon(icon = String()) {
         if (this.#icon === undefined) {
             this.#icon = document.createElement("card_icon");
@@ -68,14 +84,16 @@ class Card {
     }
     // FUNCTIONS
     add(...components) {
-        for (let component of components) this.#body.appendChild(component.set());
+        for (const component of components) this.#body.appendChild(component.set());
+    }
+    clear() {
+        this.#body.innerHTML = "";
     }
-    clear() { this.#body.innerHTML = ""; }
     // Шапка создаётся при первом обращении и всегда стоит выше тела
     #headNode() {
         if (this.#head === undefined) {
             this.#head = document.createElement("card_head");
-            this.#chui_card.prepend(this.#head);
+            this.#chuiCard.prepend(this.#head);
         }
         return this.#head;
     }
@@ -87,7 +105,9 @@ class Card {
         return this.#titles;
     }
     // RENDER
-    set() { return this.#chui_card; }
+    set() {
+        return this.#chuiCard;
+    }
 }
 
-exports.Card = Card
+exports.Card = Card;