chuijs 4.0.2 → 4.0.4

package/framework/components/chui_link/styles.css

@@ -3,17 +3,24 @@
     align-items: center;
     gap: 5px;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--link_color);
     font-size: var(--font_default_size);
-    text-decoration: none;
+    /* Подчёркивание есть всегда, а видно становится на наведении: так строка не дёргает вёрстку
+       и не меняет высоту. Свой список перехода заменяет общее правило `*` целиком, поэтому
+       в нём перечислены все свойства ссылки: подчёркивание, цвет и притухание на нажатии */
+    text-decoration: underline transparent;
+    transition:
+        color var(--motion_fast) var(--motion_ease),
+        opacity var(--motion_fast) var(--motion_ease),
+        text-decoration-color var(--motion_fast) var(--motion_ease);
     cursor: pointer;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     outline: none;
 }
 
 .chui_link:hover {
-    text-decoration: underline;
+    text-decoration-color: currentColor;
 }
 
 /* Нажатие: ссылка притухает на мгновение — заливка и белый текст ссылке неуместны */

package/framework/components/chui_list/list.js

@@ -1,7 +1,7 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
-const {Icon} = require("../chui_icons/icons");
-const {makeKeyboardButton, RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
+const { makeKeyboardButton, RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Список: строки с подписью, пояснением, значком и хвостовым значением.
@@ -22,8 +22,8 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
  * new List({ selectable: true, label: 'Сортировка', items: ['Имя', 'Дата', 'Размер'] });
  * ```
  *
-* Слушателей вне своих узлов нет, поэтому `destroy()` не нужен.
-*/
+ * Слушателей вне своих узлов нет, поэтому `destroy()` не нужен.
+ */
 class List {
     static #counter = 0;
 
@@ -33,18 +33,20 @@ class List {
     #rows = [];
     #selectable = false;
     #selected = -1;
-    #on_select = undefined;
+    #onSelect = undefined;
     #listeners = [];
     #roving = undefined;
 
-    constructor(options = {
-        id: String(),
-        label: String(),
-        selectable: Boolean(),
-        items: [],
-        onSelect: undefined,
-        changeEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            label: String(),
+            selectable: Boolean(),
+            items: [],
+            onSelect: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_List");
         List.#counter += 1;
         this.#id = options.id === undefined ? `chui_list_${List.#counter}` : options.id;
@@ -52,10 +54,10 @@ class List {
         this.#selectable = options.selectable === true;
         this.#root.setAttribute("role", this.#selectable ? "listbox" : "list");
         this.#root.setAttribute("aria-label", optionOr(options.label, I18n.t("common.list")));
-        this.#on_select = options.onSelect;
+        this.#onSelect = options.onSelect;
         if (options.changeEvent !== undefined) this.addChangeListener(options.changeEvent);
         // Клавиатура списка выборов: одна остановка Tab на список
-        if (this.#selectable) this.#roving = new RovingKeyboard(this.#root, {itemSelector: "chui_list_item"});
+        if (this.#selectable) this.#roving = new RovingKeyboard(this.#root, { itemSelector: "chui_list_item" });
         this.setItems(options.items);
     }
 
@@ -132,7 +134,7 @@ class List {
     #notify() {
         const item = this.#selected === -1 ? undefined : this.#items[this.#selected];
         for (const listener of [...this.#listeners]) listener(item, this.#selected, this);
-        if (this.#on_select !== undefined) this.#on_select(item, this.#selected, this);
+        if (this.#onSelect !== undefined) this.#onSelect(item, this.#selected, this);
     }
 
     #render() {
@@ -157,15 +159,15 @@ class List {
 
     #applySelection() {
         this.#rows.forEach((row, index) => {
-            const is_selected = this.#selectable && index === this.#selected;
-            row.classList.toggle("list_item_active", is_selected);
-            if (this.#selectable) row.setAttribute("aria-selected", is_selected ? "true" : "false");
+            const isSelected = this.#selectable && index === this.#selected;
+            row.classList.toggle("list_item_active", isSelected);
+            if (this.#selectable) row.setAttribute("aria-selected", isSelected ? "true" : "false");
         });
     }
 
     static #toItem(item) {
         if (item instanceof ListItem) return item;
-        return new ListItem(typeof item === "string" ? {title: item} : item);
+        return new ListItem(typeof item === "string" ? { title: item } : item);
     }
 }
 
@@ -183,21 +185,23 @@ class ListItem {
     #title = document.createElement("chui_list_item_title");
     #subtitle = document.createElement("chui_list_item_subtitle");
     #meta = document.createElement("chui_list_item_meta");
-    #click_event = undefined;
+    #clickEvent = undefined;
     #disabled = false;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        subtitle: String(),
-        icon: String(),
-        meta: String(),
-        disabled: Boolean(),
-        clickEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            subtitle: String(),
+            icon: String(),
+            meta: String(),
+            disabled: Boolean(),
+            clickEvent: undefined,
+        }
+    ) {
         ListItem.#counter += 1;
         this.#root.id = options.id === undefined ? `chui_list_item_${ListItem.#counter}` : options.id;
-        this.#click_event = options.clickEvent;
+        this.#clickEvent = options.clickEvent;
         this.#content.appendChild(this.#title);
         this.#content.appendChild(this.#subtitle);
         this.#root.appendChild(this.#content);
@@ -278,7 +282,7 @@ class ListItem {
 
     /** Свой обработчик нажатия: строка получает настоящий `<button>` */
     setClickEvent(listener = undefined) {
-        this.#click_event = listener;
+        this.#clickEvent = listener;
         this.#applyClickable();
         return this;
     }
@@ -290,7 +294,7 @@ class ListItem {
 
     // === ВНУТРЕННЕЕ ===
     #applyClickable() {
-        if (this.#click_event === undefined) {
+        if (this.#clickEvent === undefined) {
             if (this.#button !== undefined) {
                 this.#button.remove();
                 this.#button = undefined;
@@ -310,7 +314,7 @@ class ListItem {
         this.#root.appendChild(this.#button);
         this.#button.addEventListener("click", () => {
             if (this.#disabled) return;
-            this.#click_event();
+            this.#clickEvent();
         });
         this.setDisabled(this.#disabled);
     }
@@ -318,5 +322,5 @@ class ListItem {
     static ICON_SIZE = "18px";
 }
 
-exports.List = List
-exports.ListItem = ListItem
+exports.List = List;
+exports.ListItem = ListItem;

package/framework/components/chui_list/styles.css

@@ -4,9 +4,9 @@ chui_list {
     flex-direction: column;
     box-sizing: border-box;
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background_2);
     overflow: hidden;
     color: var(--text_color);
@@ -98,7 +98,8 @@ chui_list_item:has(.list_item_button):active {
     color: var(--text_color_hover);
 }
 
-.list_item_button:focus-visible, chui_list_item:focus-visible {
+.list_item_button:focus-visible,
+chui_list_item:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }