chuijs 4.0.2 → 4.0.4

package/framework/components/chui_data_grid/styles.css

@@ -3,7 +3,7 @@ chui_data_grid {
     flex-direction: column;
     /* fill-available учитывает собственный margin, 100% — нет */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     /* Локальные поверхности сетки: систему токенов не трогаем, но полный
        `--element_background` давал плотный серый блок, поэтому тело — только часть
@@ -14,7 +14,8 @@ chui_data_grid {
        серого: так полоса шапки читается, но не превращается в яркую ленту */
     --data_grid_surface: color-mix(in srgb, var(--element_background) 60%, transparent);
     --data_grid_body: linear-gradient(var(--data_grid_surface), var(--data_grid_surface)), var(--element_background_2);
-    --data_grid_head: linear-gradient(var(--element_background), var(--element_background)),
+    --data_grid_head:
+        linear-gradient(var(--element_background), var(--element_background)),
         linear-gradient(var(--data_grid_surface), var(--data_grid_surface)), var(--element_background_2);
     /* Выделение — мягкая тонировка акцента: плотный токен (0.26 в тёмной схеме) читался
        тяжёлым синим блоком во всю строку */
@@ -56,9 +57,10 @@ data_grid_error {
     box-sizing: border-box;
     width: 100%;
     margin-bottom: 6px;
-    padding-block: 6px 6px; padding-inline: 12px 12px;
-    border: 1px solid var(--badge_error_back);
-    border-radius: var(--border_radius);
+    padding-block: 6px 6px;
+    padding-inline: 12px 12px;
+    border: 1px solid var(--badge_error_background);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     font-size: var(--font_default_size);
 }
@@ -97,24 +99,23 @@ data_grid_head data_grid_cell.data_grid_cell_pinned {
 
 data_grid_cell.data_grid_cell_pinned_last {
     border-inline-end: 1px solid var(--border_color);
-    /* Тень закреплённой колонки направленная (вбок), поэтому своего токена у неё нет:
-       общие тени накрывают элемент со всех сторон. Разлёт больше, процент меньше —
-       чтобы край колонки читался мягкой границей, а не линией. */
-    box-shadow: 2px 0 8px rgb(0 0 0 / 6%);
+    /* Тень закреплённой колонки — общий ключ: она направленная, вбок, а общие тени
+       накрывают элемент со всех сторон. Разлёт больше, процент меньше — чтобы край
+       колонки читался мягкой границей, а не линией */
+    box-shadow: var(--box_shadow_edge);
 }
 
 /* Наведение на строку: у закреплённой ячейки свой непрозрачный фон, поэтому заливку
    строки она перекрывает — плотность поднимаем её же слоями */
 chui_data_grid data_grid_body data_grid_row:hover data_grid_cell.data_grid_cell_pinned {
-    background: linear-gradient(var(--element_background_hover), var(--element_background_hover)),
-        var(--data_grid_body);
+    background:
+        linear-gradient(var(--element_background_hover), var(--element_background_hover)), var(--data_grid_body);
 }
 
 chui_data_grid data_grid_row[aria-selected="true"] data_grid_cell.data_grid_cell_pinned {
     /* Тонировка выделения поверх непрозрачной поверхности — закреплённая ячейка и в выделенной
        строке не просвечивает прокрученным содержимым */
-    background: linear-gradient(var(--data_grid_selection), var(--data_grid_selection)),
-        var(--data_grid_body);
+    background: linear-gradient(var(--data_grid_selection), var(--data_grid_selection)), var(--data_grid_body);
 }
 
 /* Полоса выделения — на первой ячейке: закреплённая ячейка перекрывает фон строки,
@@ -130,7 +131,7 @@ data_grid_head {
     box-sizing: border-box;
     border: 1px solid var(--border_color);
     border-bottom: none;
-    border-radius: var(--border_radius) var(--border_radius) 0 0;
+    border-radius: var(--radius_sm) var(--radius_sm) 0 0;
     /* Шапка — на один шаг плотнее тела и остаётся отличима от карточки. Слои непрозрачные:
        закреплённые ячейки шапки перекрывают уезжающие под них колонки */
     background: var(--data_grid_head);
@@ -322,7 +323,7 @@ data_grid_body {
     height: 340px;
     margin: 0;
     border: 1px solid var(--border_color);
-    border-radius: 0 0 var(--border_radius) var(--border_radius);
+    border-radius: 0 0 var(--radius_sm) var(--radius_sm);
     /* Спокойная нейтральная поверхность тела: у строки своего фона нет,
        поэтому цвет строк даёт именно она */
     background: var(--data_grid_surface);
@@ -337,7 +338,7 @@ data_grid_spacer {
 
 data_grid_body_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
 }
@@ -350,7 +351,7 @@ data_grid_body_empty[hidden] {
    когда пользователь долистал до конца уже загруженного */
 data_grid_body_loader {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     text-align: center;
     color: var(--text_color_disabled);
     border-top: 1px solid var(--border_color);
@@ -419,12 +420,13 @@ data_grid_cell.data_grid_cell_editing {
     min-width: 0;
     min-height: var(--control_height);
     box-sizing: border-box;
-    /* Отступ снимаем: у своих редакторов-компонентов он свой (`margin: var(--margin)`),
+    /* Отступ снимаем: у своих редакторов-компонентов он свой (`margin: var(--block_margin)`),
        и поле съезжало в ячейке */
     margin: 0;
-    padding-block: 0 0; padding-inline: 8px 8px;
+    padding-block: 0 0;
+    padding-inline: 8px 8px;
     border: 1px solid var(--blue_prime_background);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     /* Приподнятая непрозрачная поверхность — та же, что у полей фреймворка: непрозрачная,
        чтобы в выделенной строке поле не заливалось тонировкой, и светлее тела, чтобы поле
        читалось как поле, а не как дыра в строке */
@@ -443,7 +445,7 @@ data_grid_cell.data_grid_cell_editing_select {
     padding: 0 4px;
 }
 
-/* Корень Select — целый компонент: у него свой внешний отступ (`margin: var(--margin)`)
+/* Корень Select — целый компонент: у него свой внешний отступ (`margin: var(--block_margin)`)
    и ширина контрола (`width: var(--control_width)`). Внутри ячейки это лишнее: из-за отступа
    ячейка вырастала до 29 + 12 = 41 px и перекрывала соседей, а поле сужалось и съезжало
    вправо. Растягиваем поле на ячейку и снимаем отступ */
@@ -467,7 +469,7 @@ data_grid_row:has(data_grid_cell.data_grid_cell_editing) {
 }
 
 /* Крутилка числа — системная: значение правят клавишами, поэтому вид у поля свой */
-input[type=number].data_grid_editor::-webkit-inner-spin-button {
+input[type="number"].data_grid_editor::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
 

package/framework/components/chui_descriptions/descriptions.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");
 
 /**
  * Список свойств: пары «подпись — значение» одной таблицей — для панели свойств, карточки
@@ -34,11 +34,11 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Descriptions {
     static LAYOUT = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static SIZE = {
         DEFAULT: "default",
-        SMALL: "small"
+        SMALL: "small",
     };
     static #counter = 0;
     static #MAX_COLUMNS = 4;
@@ -52,11 +52,18 @@ class Descriptions {
     #columns = 1;
     #bordered = false;
 
-    constructor(options = {
-        id: String(), title: String(), items: [],
-        columns: Number(), bordered: Boolean(),
-        layout: String(), size: String(), label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            items: [],
+            columns: Number(),
+            bordered: Boolean(),
+            layout: String(),
+            size: String(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Descriptions");
         Descriptions.#counter += 1;
         this.#id = optionOr(options.id, `chui_descriptions_${Descriptions.#counter}`);
@@ -93,7 +100,7 @@ class Descriptions {
         return this.#entries.map((entry) => ({
             label: entry.label,
             value: entry.value,
-            span: Math.min(entry.span, this.#columns)
+            span: Math.min(entry.span, this.#columns),
         }));
     }
 
@@ -149,14 +156,16 @@ class Descriptions {
 
     /** Раскладка пары: подпись слева от значения или над ним */
     setLayout(layout = String()) {
-        const known = layout === Descriptions.LAYOUT.VERTICAL ? Descriptions.LAYOUT.VERTICAL : Descriptions.LAYOUT.HORIZONTAL;
+        const known =
+            layout === Descriptions.LAYOUT.VERTICAL ? Descriptions.LAYOUT.VERTICAL : Descriptions.LAYOUT.HORIZONTAL;
         this.#root.dataset.layout = known;
         return this;
     }
 
     /** Размер строк: `Descriptions.SIZE.{DEFAULT, SMALL}` */
     setSize(size = String()) {
-        this.#root.dataset.size = size === Descriptions.SIZE.SMALL ? Descriptions.SIZE.SMALL : Descriptions.SIZE.DEFAULT;
+        this.#root.dataset.size =
+            size === Descriptions.SIZE.SMALL ? Descriptions.SIZE.SMALL : Descriptions.SIZE.DEFAULT;
         return this;
     }
 
@@ -197,10 +206,18 @@ class Descriptions {
     #push(item = undefined) {
         if (item === undefined || item === null) return;
         const label = item.label === undefined ? "" : String(item.label);
-        const span = Number.isFinite(Number(item.span)) && Math.floor(Number(item.span)) >= 1
-            ? Math.floor(Number(item.span))
-            : 1;
-        this.#entries.push({label: label, value: item.value, span: span, node: undefined, term: undefined, value_node: undefined});
+        const span =
+            Number.isFinite(Number(item.span)) && Math.floor(Number(item.span)) >= 1
+                ? Math.floor(Number(item.span))
+                : 1;
+        this.#entries.push({
+            label: label,
+            value: item.value,
+            span: span,
+            node: undefined,
+            term: undefined,
+            value_node: undefined,
+        });
     }
 
     #render() {
@@ -250,4 +267,4 @@ class Descriptions {
     }
 }
 
-exports.Descriptions = Descriptions
+exports.Descriptions = Descriptions;

package/framework/components/chui_descriptions/styles.css

@@ -8,7 +8,7 @@ chui_descriptions {
     /* Компонент сам задаёт ширину: в flex-колонке с align-items: flex-start
        блок без ширины получил бы max-content и вылез за карточку */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     --descriptions_columns: 1;
     color: var(--text_color);
     font-size: var(--font_default_size);

package/framework/components/chui_details/details.js

@@ -1,31 +1,37 @@
-const {Icon, Icons} = require("../chui_icons/icons");
+const { Icon, Icons } = require("../chui_icons/icons");
 
-const {makeKeyboardButton} = require("../../modules/chui_a11y/chui_a11y");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
 
 /** Идентификаторы для aria-controls у раскрывающихся панелей */
-let disclosure_panel_counter = 0;
+let disclosurePanelCounter = 0;
 
 class Details {
     #name = require("randomstring").generate();
-    #chui_details = document.createElement(`chui_details`);
+    #chuiDetails = document.createElement(`chui_details`);
     //
-    #ab = document.createElement('details_button')
-    #bt = document.createElement('details_button_text')
-    #barrow = document.createElement('details_button_arrow')
+    #ab = document.createElement("details_button");
+    #bt = document.createElement("details_button_text");
+    #barrow = document.createElement("details_button_arrow");
     //
-    #ap = document.createElement('details_panel')
-    #html = document.createElement('details_panel_html')
+    #ap = document.createElement("details_panel");
+    #html = document.createElement("details_panel_html");
     #direction;
     #wrap;
     #align;
     #justify;
     #width;
-    constructor(options = {
-        title: String(), contenteditable: Boolean(),
-        direction: String(), wrap: String(), align: String(),
-        justify: String(), width: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Details');
+    constructor(
+        options = {
+            title: String(),
+            contenteditable: Boolean(),
+            direction: String(),
+            wrap: String(),
+            align: String(),
+            justify: String(),
+            width: String(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Details");
         this.#direction = options.direction;
         this.#wrap = options.wrap;
         this.#align = options.align;
@@ -33,39 +39,39 @@ class Details {
         this.#width = options.width;
         // Заготовка опции (`Boolean()`) равносильна незаданной: без проверки в разметке оставался
         // `contenteditable="undefined"` — посторонний атрибут на каждой панели
-        if (options.contenteditable !== undefined) this.#html.setAttribute('contenteditable', options.contenteditable);
+        if (options.contenteditable !== undefined) this.#html.setAttribute("contenteditable", options.contenteditable);
 
         if (this.#direction !== undefined) this.#html.style.flexDirection = this.#direction;
         if (this.#wrap !== undefined) this.#html.style.flexWrap = this.#wrap;
         if (this.#align !== undefined) this.#html.style.alignItems = this.#align;
         if (this.#justify !== undefined) this.#html.style.justifyContent = this.#justify;
         if (this.#width !== undefined) {
-            this.#chui_details.style.width = this.#width;
+            this.#chuiDetails.style.width = this.#width;
             this.#ab.style.width = this.#width;
             this.#ap.style.width = this.#width;
             this.#html.style.width = this.#width;
         }
 
-        this.#ab.setAttribute('name', this.#name)
+        this.#ab.setAttribute("name", this.#name);
         // Пустая заготовка (`title: String()` в описании опций) — это «заголовка нет»,
         // а не текст «undefined» в кнопке раскрытия
         this.#bt.innerText = options.title === undefined || options.title === null ? "" : String(options.title);
         this.#barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        this.#ab.appendChild(this.#bt)
-        this.#ab.appendChild(this.#barrow)
-        this.#ap.appendChild(this.#html)
-        this.#chui_details.appendChild(this.#ab)
-        this.#chui_details.appendChild(this.#ap)
+        this.#ab.appendChild(this.#bt);
+        this.#ab.appendChild(this.#barrow);
+        this.#ap.appendChild(this.#html);
+        this.#chuiDetails.appendChild(this.#ab);
+        this.#chuiDetails.appendChild(this.#ap);
 
         //ФУНКЦИИ
-        let test = this.#chui_details.children;
+        const test = this.#chuiDetails.children;
         let i;
         for (i = 0; i < test.length; i++) {
-            let elem = test[i];
-            if (elem.tagName === 'DETAILS_BUTTON') {
-                let panel = elem.nextElementSibling;
+            const elem = test[i];
+            if (elem.tagName === "DETAILS_BUTTON") {
+                const panel = elem.nextElementSibling;
                 // Доступность: кнопка раскрытия — role=button с состоянием, панель — отдельный регион
-                panel.id = "chui_details_panel_" + (disclosure_panel_counter += 1);
+                panel.id = "chui_details_panel_" + (disclosurePanelCounter += 1);
                 panel.setAttribute("role", "region");
                 elem.setAttribute("aria-controls", panel.id);
                 elem.setAttribute("aria-expanded", "false");
@@ -73,9 +79,9 @@ class Details {
                 // Tab и в дереве доступности — поэтому свёрнутая панель помечается инерт
                 panel.inert = true;
                 makeKeyboardButton(elem);
-                elem.addEventListener('click', () => {
-                    elem.classList.toggle('details_active')
-                    let panel = elem.nextElementSibling;
+                elem.addEventListener("click", () => {
+                    elem.classList.toggle("details_active");
+                    const panel = elem.nextElementSibling;
                     // Стрелка и углы кнопки зависят от `aria-expanded` — их ведёт CSS,
                     // а инлайном остаётся только измеренная высота панели
                     if (panel.style.maxHeight) {
@@ -85,19 +91,19 @@ class Details {
                         panel.inert = false;
                         panel.style.maxHeight = panel.scrollHeight + "px";
                     }
-                    elem.setAttribute("aria-expanded", elem.classList.contains('details_active') ? "true" : "false");
-                })
+                    elem.setAttribute("aria-expanded", elem.classList.contains("details_active") ? "true" : "false");
+                });
             }
         }
     }
     add(...components) {
-        for (let component of components) {
+        for (const component of components) {
             this.#html.appendChild(component.set());
         }
     }
     set() {
-        return this.#chui_details;
+        return this.#chuiDetails;
     }
 }
 
-exports.Details = Details
+exports.Details = Details;

package/framework/components/chui_details/styles.css

@@ -5,10 +5,10 @@ chui_details {
     /* Ширина по умолчанию — по колонке: с `max-content` заголовок сжимался в плашку
        по тексту и блок читался незаконченным (опция `width` перекрывает это значение) */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
-    font-weight:400;
-    border-radius: var(--border_radius);
+    font-weight: 400;
+    border-radius: var(--radius_sm);
     border: none;
 }
 
@@ -21,14 +21,14 @@ details_button_arrow {
 details_button {
     background: var(--element_background);
     cursor: pointer;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     font-size: var(--font_default_size);
     width: -webkit-fill-available;
     text-align: start;
     outline: none;
     display: flex;
     align-items: center;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--text_color);
     border: none;
 }
@@ -40,19 +40,19 @@ details_panel {
     overflow: hidden;
     width: -webkit-fill-available;
     max-height: 0;
-    border-end-end-radius: var(--border_radius);
-    border-end-start-radius: var(--border_radius);
+    border-end-end-radius: var(--radius_sm);
+    border-end-start-radius: var(--radius_sm);
     color: var(--text_color);
     border: none;
     /* Раскрытие идёт по `max-height`, которое считает JS: без перехода панель
        раскрывалась рывком */
-    transition: max-height var(--transition_time) var(--ease_out);
+    transition: max-height var(--motion_base) var(--motion_ease);
 }
 
 details_panel_html {
     padding: 8px 0;
     width: -webkit-fill-available;
-    display: flex
+    display: flex;
 }
 
 details_button:hover {
@@ -60,7 +60,8 @@ details_button:hover {
 }
 
 details_button:active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
 }
 
 details_button:hover details_button_text {
@@ -98,4 +99,4 @@ details_button[aria-expanded="true"] details_button_arrow chui_icon {
 
 details_button[aria-expanded="false"] details_button_arrow chui_icon {
     transform: rotate(0deg);
-}
+}