chuijs 4.0.1 → 4.0.3

package/framework/components/chui_divider/divider.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Разделитель: тонкая линия между блоками, при необходимости с подписью.
@@ -19,7 +19,7 @@ const {setStyles, optionOr} = require('../../modules/chui_functions');
 class Divider {
     static ORIENTATION = {
         HORIZONTAL: "horizontal",
-        VERTICAL: "vertical"
+        VERTICAL: "vertical",
     };
     static #counter = 0;
 
@@ -30,13 +30,15 @@ class Divider {
     #text = undefined;
     #id = undefined;
 
-    constructor(options = {
-        id: String(),
-        text: String(),
-        orientation: String(),
-        margin: Object(),
-        width: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            text: String(),
+            orientation: String(),
+            margin: Object(),
+            width: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Divider");
         Divider.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: без этого вызов `new Divider()`
@@ -103,7 +105,7 @@ class Divider {
     }
 
     /** Отступы со всех сторон: {top, bottom, left, right} — как у `Toggle.setMargin()` */
-    setMargin(margin = {top: undefined, bottom: undefined, left: undefined, right: undefined}) {
+    setMargin(margin = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
         if (margin.top !== undefined) this.#root.style.marginTop = margin.top;
         if (margin.bottom !== undefined) this.#root.style.marginBottom = margin.bottom;
         if (margin.left !== undefined) this.#root.style.marginLeft = margin.left;
@@ -123,4 +125,4 @@ class Divider {
     }
 }
 
-exports.Divider = Divider
+exports.Divider = Divider;

package/framework/components/chui_drawer/drawer.js

@@ -1,8 +1,8 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y, makeKeyboardButton} = require('../../modules/chui_a11y/chui_a11y');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y, makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Боковая панель (drawer), выезжающая с одной из сторон окна.
@@ -24,7 +24,7 @@ class Drawer {
         LEFT: "left",
         RIGHT: "right",
         TOP: "top",
-        BOTTOM: "bottom"
+        BOTTOM: "bottom",
     };
     static DEFAULT_WIDTH = "360px";
     static DEFAULT_HEIGHT = "280px";
@@ -51,17 +51,19 @@ class Drawer {
     #a11y = undefined;
     isOpen = false;
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        label: String(),
-        side: String(),
-        width: String(),
-        height: String(),
-        closable: Boolean(),
-        closeOutSideClick: Boolean(),
-        components: []
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            side: String(),
+            width: String(),
+            height: String(),
+            closable: Boolean(),
+            closeOutSideClick: Boolean(),
+            components: [],
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Drawer");
         this.#id = options.id === undefined ? require("randomstring").generate() : options.id;
         this.#drawer.id = this.#id;
@@ -86,7 +88,7 @@ class Drawer {
             role: "dialog",
             labelNode: this.#labelled_by_title ? this.#title : undefined,
             label: this.#labelled_by_title ? undefined : optionOr(options.label, I18n.t("feedback.drawer")),
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
         if (this.#closable) this.#addCloseButton();
         if (options.components !== undefined) this.addToBody(...options.components);
@@ -249,26 +251,26 @@ class Drawer {
     // Размер панели зависит от стороны: слева/справа — ширина, сверху/снизу — высота
     #applySize() {
         const vertical = this.#side === Drawer.SIDE.LEFT || this.#side === Drawer.SIDE.RIGHT;
-        this.#panel.style.width = vertical
-            ? (this.#width === undefined ? Drawer.DEFAULT_WIDTH : this.#width)
-            : "100%";
+        this.#panel.style.width = vertical ? (this.#width === undefined ? Drawer.DEFAULT_WIDTH : this.#width) : "100%";
         this.#panel.style.height = vertical
             ? "100%"
-            : (this.#height === undefined ? Drawer.DEFAULT_HEIGHT : this.#height);
+            : this.#height === undefined
+              ? Drawer.DEFAULT_HEIGHT
+              : this.#height;
     }
 
     // Клик по занавесу (но не по панели) закрывает панель, если это разрешено опцией
     #onDrawerClick = (event) => {
         if (!this.#close_outside_click || event.target !== this.#drawer) return;
         this.close();
-    }
+    };
 
     // После проигрывания анимации имя снимается: иначе следующий показ не проиграется заново.
     // animationend всплывает, поэтому чужие анимации (спиннер внутри панели) пропускаем.
     #onPanelAnimationEnd = (event) => {
         if (event.target !== this.#panel) return;
         this.#panel.style.animationName = "";
-    }
+    };
 }
 
-exports.Drawer = Drawer
+exports.Drawer = Drawer;

package/framework/components/chui_drop_zone/drop_zone.js

@@ -1,6 +1,6 @@
-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");
 
 /**
  * Зона приёма перетаскивания: файлы из системы, текст и ссылки.
@@ -48,18 +48,20 @@ class DropZone {
     #on_files = undefined;
     #files = [];
 
-    constructor(options = {
-        id: String(),
-        title: String(),
-        description: String(),
-        icon: undefined,
-        accept: [],
-        multiple: Boolean(),
-        disabled: Boolean(),
-        label: String(),
-        onDrop: undefined,
-        onFiles: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            description: String(),
+            icon: undefined,
+            accept: [],
+            multiple: Boolean(),
+            disabled: Boolean(),
+            label: String(),
+            onDrop: undefined,
+            onFiles: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_DropZone");
         DropZone.#counter += 1;
         this.#id = options.id === undefined ? `chui_drop_zone_${DropZone.#counter}` : options.id;
@@ -155,7 +157,12 @@ class DropZone {
             this.#icon.hidden = true;
             return this;
         }
-        const node = typeof icon === "string" ? new Icon(icon, "28px").set() : (typeof icon.set === "function" ? icon.set() : icon);
+        const node =
+            typeof icon === "string"
+                ? new Icon(icon, "28px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         node.setAttribute("aria-hidden", "true");
         this.#icon.appendChild(node);
         this.#icon.hidden = false;
@@ -225,9 +232,12 @@ class DropZone {
         const rejected = files.length - accepted.length;
         this.#files = this.#multiple ? accepted : accepted.slice(0, 1);
         this.#input.value = "";
-        this.#status.innerText = rejected === 0
-            ? (this.#files.length === 0 ? "" : I18n.t("forms.dropZoneAccepted", {count: this.#files.length}))
-            : I18n.t("forms.dropZoneRejected", {count: rejected});
+        this.#status.innerText =
+            rejected === 0
+                ? this.#files.length === 0
+                    ? ""
+                    : I18n.t("forms.dropZoneAccepted", { count: this.#files.length })
+                : I18n.t("forms.dropZoneRejected", { count: rejected });
         if (this.#on_files !== undefined) this.#on_files(this.getFiles());
         return rejected;
     }
@@ -240,7 +250,7 @@ class DropZone {
             paths: files.map((file) => file.path).filter((path) => path !== undefined),
             text: text === undefined || text === "" ? undefined : text,
             url: url === undefined || url === "" ? undefined : url,
-            dataTransfer: dataTransfer
+            dataTransfer: dataTransfer,
         };
     }
 
@@ -309,4 +319,4 @@ class DropZone {
     };
 }
 
-exports.DropZone = DropZone
+exports.DropZone = DropZone;

package/framework/components/chui_empty_state/empty_state.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {Icon} = require('../chui_icons/icons');
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon } = require("../chui_icons/icons");
 
 /**
  * Пустое состояние: заглушка для списка, таблицы или раздела без данных.
@@ -35,15 +35,17 @@ class EmptyState {
     #id = undefined;
     #compact = false;
 
-    constructor(options = {
-        id: String(),
-        icon: undefined,
-        title: String(),
-        description: String(),
-        actions: [],
-        compact: Boolean(),
-        label: String()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            icon: undefined,
+            title: String(),
+            description: String(),
+            actions: [],
+            compact: Boolean(),
+            label: String(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_EmptyState");
         EmptyState.#counter += 1;
         this.#id = options.id === undefined ? `chui_empty_state_${EmptyState.#counter}` : options.id;
@@ -113,9 +115,12 @@ class EmptyState {
             this.#toggle(this.#icon, false);
             return this;
         }
-        const node = typeof icon === "string"
-            ? new Icon(icon, "32px").set()
-            : (typeof icon.set === "function" ? icon.set() : icon);
+        const node =
+            typeof icon === "string"
+                ? new Icon(icon, "32px").set()
+                : typeof icon.set === "function"
+                  ? icon.set()
+                  : icon;
         node.setAttribute("aria-hidden", "true");
         this.#icon.appendChild(node);
         this.#toggle(this.#icon, true);
@@ -158,4 +163,4 @@ class EmptyState {
     }
 }
 
-exports.EmptyState = EmptyState
+exports.EmptyState = EmptyState;

package/framework/components/chui_fieldset/fieldset.js

@@ -1,18 +1,25 @@
 class FieldSet {
-    #chui_fieldset = document.createElement('chui_fieldset');
-    #fieldset = document.createElement("fieldset")
-    #legend = document.createElement("legend")
-    constructor(options = {
-        id: String(), name: String(), title: String(),
-        style: {
-            width: String(), height: String(),
-            direction: String(), wrap: String(),
-            align: String(), justify: String(),
-        },
-        components: []
-    }) {
-        const {setStyles, optionOr} = require('../../modules/chui_functions');
-        setStyles(__dirname + "/styles.css", 'chUiJS_FieldSet');
+    #chui_fieldset = document.createElement("chui_fieldset");
+    #fieldset = document.createElement("fieldset");
+    #legend = document.createElement("legend");
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            style: {
+                width: String(),
+                height: String(),
+                direction: String(),
+                wrap: String(),
+                align: String(),
+                justify: String(),
+            },
+            components: [],
+        }
+    ) {
+        const { setStyles, optionOr } = require("../../modules/chui_functions");
+        setStyles(__dirname + "/styles.css", "chUiJS_FieldSet");
         if (options.id !== undefined) this.#fieldset.id = options.id;
         if (options.name !== undefined) this.#fieldset.name = options.name;
         // Подпись и набор компонентов приходят опциями: частичный объект опций не должен ронять сборку
@@ -36,11 +43,21 @@ class FieldSet {
             for (let component of options.components) this.#fieldset.appendChild(component.set());
         }
     }
-    getId() { return this.#fieldset.id; }
-    getLegend() { return this.#legend.innerText; }
-    setLegend(text = String()) { return this.#legend.innerText = text; }
-    add(...components) { for (let component of components) this.#fieldset.appendChild(component.set()); }
-    set() { return this.#chui_fieldset; }
+    getId() {
+        return this.#fieldset.id;
+    }
+    getLegend() {
+        return this.#legend.innerText;
+    }
+    setLegend(text = String()) {
+        return (this.#legend.innerText = text);
+    }
+    add(...components) {
+        for (let component of components) this.#fieldset.appendChild(component.set());
+    }
+    set() {
+        return this.#chui_fieldset;
+    }
 }
 
-exports.FieldSet = FieldSet
+exports.FieldSet = FieldSet;

package/framework/components/chui_fieldset/styles.css

@@ -24,4 +24,4 @@ legend {
     border: none;
     border-radius: var(--border_radius);
     margin-inline-start: var(--margin);
-}
+}