chuijs 4.0.2 → 4.0.3

package/framework/components/chui_notification/notification_update.js

@@ -1,10 +1,10 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {Spinner} = require("../chui_spinner/spinner");
-const {setStyles, getTime, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {Icons} = require("../chui_icons/icons");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { Spinner } = require("../chui_spinner/spinner");
+const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { Icons } = require("../chui_icons/icons");
 // Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate} = require("./status_plate");
+const { createStatusPlate } = require("./status_plate");
 
 class UpdateNotification {
     #id = require("randomstring").generate();
@@ -17,8 +17,10 @@ class UpdateNotification {
     #update_notification_body = document.createElement("update_notification_body");
     #update_notification_text = document.createElement("update_notification_text");
     constructor(options = { title: String(), text: String(), spinner: Boolean() }) {
-        setStyles(__dirname + "/styles_update.css", 'chUiJS_UpdateNotification');
+        setStyles(__dirname + "/styles_update.css", "chUiJS_UpdateNotification");
         this.#update_notification.id = this.#id;
+        // Карточка обновления живёт в ящике и меняется на месте — объявляем вежливо
+        this.#update_notification.setAttribute("role", "status");
         // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
         const title = optionOr(options.title, undefined);
         const text = optionOr(options.text, undefined);
@@ -36,10 +38,10 @@ class UpdateNotification {
         }
         this.#update_notification_date.innerHTML = getTime();
         //
-        this.#update_notification_header.appendChild(this.#update_notification_title)
-        this.#update_notification_header.appendChild(this.#update_notification_date)
+        this.#update_notification_header.appendChild(this.#update_notification_title);
+        this.#update_notification_header.appendChild(this.#update_notification_date);
         //
-        this.#update_notification_content.appendChild(this.#update_notification_header)
+        this.#update_notification_content.appendChild(this.#update_notification_header);
         // Значок и спиннер делят одно место — плашку слева: карточка остаётся ровной,
         // а текст не отъезжает вбок под вращающимся кольцом
         this.#update_notification_icon = createStatusPlate(undefined, Icons.NOTIFICATION.SYSTEM_UPDATE);
@@ -50,17 +52,22 @@ class UpdateNotification {
             this.#update_notification_icon.innerHTML = "";
             this.#update_notification_icon.appendChild(new Spinner(Spinner.SIZE.V_SMALL, "0").set());
         }
-        this.#update_notification_body.appendChild(this.#update_notification_text)
-        this.#update_notification_content.appendChild(this.#update_notification_body)
-        this.#update_notification.appendChild(this.#update_notification_icon)
-        this.#update_notification.appendChild(this.#update_notification_content)
+        this.#update_notification_body.appendChild(this.#update_notification_text);
+        this.#update_notification_content.appendChild(this.#update_notification_body);
+        this.#update_notification.appendChild(this.#update_notification_icon);
+        this.#update_notification.appendChild(this.#update_notification_content);
     }
     show(showOnSystem = Boolean()) {
         const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#update_notification);
         panel.appendChild(this.#update_notification);
         new Animation(this.#update_notification).slideRightIn();
         //notification.addEventListener("click", () => this.hide(notification));
-        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#update_notification_title.innerText, this.#update_notification_text.innerText);
+        if (showOnSystem)
+            require("electron").ipcRenderer.send(
+                "show_system_notification",
+                this.#update_notification_title.innerText,
+                this.#update_notification_text.innerText
+            );
     }
     hide() {
         const notification = this.#update_notification;
@@ -76,4 +83,4 @@ class UpdateNotification {
     }
 }
 
-exports.UpdateNotification = UpdateNotification
+exports.UpdateNotification = UpdateNotification;

package/framework/components/chui_notification/status_plate.js

@@ -1,5 +1,5 @@
-const {setStyles} = require('../../modules/chui_functions');
-const {Icon, Icons} = require("../chui_icons/icons");
+const { setStyles } = require("../../modules/chui_functions");
+const { Icon, Icons } = require("../chui_icons/icons");
 
 /**
  * Плашка значка состояния: одно решение на всё семейство карточек уведомлений —

package/framework/components/chui_notification/styles_download.css

@@ -96,4 +96,4 @@ download_notification_text {
 
 download_notification_text p {
     margin: 0;
-}
+}

package/framework/components/chui_notification/styles_update.css

@@ -82,4 +82,4 @@ update_notification_text {
 
 update_notification_text p {
     margin: 0;
-}
+}

package/framework/components/chui_org_chart/org_chart.js

@@ -1,8 +1,8 @@
-const { setStyles } = require('../../modules/chui_functions');
-const { Avatar } = require('../chui_avatar/avatar');
-const { makeKeyboardButton } = require('../../modules/chui_a11y/chui_a11y');
-const { Icon, Icons } = require('../chui_icons/icons');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles } = require("../../modules/chui_functions");
+const { Avatar } = require("../chui_avatar/avatar");
+const { makeKeyboardButton } = require("../../modules/chui_a11y/chui_a11y");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Схема подчинения: карточки людей по уровням и связи «руководитель — подчинённый».
@@ -55,7 +55,7 @@ class OrgChart {
     static STYLE = {
         DEFAULT: "default",
         ACCENT: "accent",
-        MUTED: "muted"
+        MUTED: "muted",
     };
     static DEFAULT_NODE_WIDTH = 176;
     static DEFAULT_NODE_HEIGHT = 64;
@@ -86,11 +86,22 @@ class OrgChart {
     #on_node_click = undefined;
     #click_listeners = [];
 
-    constructor(options = {
-        id: String(), title: String(), label: String(), data: undefined, height: String(),
-        nodeWidth: Number(), nodeHeight: Number(), gapX: Number(), gapY: Number(),
-        collapsible: Boolean(), emptyText: String(), onNodeClick: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            title: String(),
+            label: String(),
+            data: undefined,
+            height: String(),
+            nodeWidth: Number(),
+            nodeHeight: Number(),
+            gapX: Number(),
+            gapY: Number(),
+            collapsible: Boolean(),
+            emptyText: String(),
+            onNodeClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "ChUiJS_OrgChart");
         OrgChart.#counter += 1;
         this.#id = options.id === undefined ? `chui_org_chart_${OrgChart.#counter}` : options.id;
@@ -98,8 +109,10 @@ class OrgChart {
         this.#label = options.label;
         this.#empty_text = options.emptyText;
         this.#on_node_click = options.onNodeClick;
-        if (options.nodeWidth !== undefined) this.#node_width = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
-        if (options.nodeHeight !== undefined) this.#node_height = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
+        if (options.nodeWidth !== undefined)
+            this.#node_width = Math.max(80, Number(options.nodeWidth) || OrgChart.DEFAULT_NODE_WIDTH);
+        if (options.nodeHeight !== undefined)
+            this.#node_height = Math.max(40, Number(options.nodeHeight) || OrgChart.DEFAULT_NODE_HEIGHT);
         if (options.gapX !== undefined) this.#gap_x = Number(options.gapX);
         if (options.gapY !== undefined) this.#gap_y = Number(options.gapY);
         if (options.collapsible !== undefined) this.#collapsible = options.collapsible !== false;
@@ -136,12 +149,22 @@ class OrgChart {
     }
 
     // GET
-    getId() { return this.#id; }
-    getTitle() { return this.#title.innerText; }
+    getId() {
+        return this.#id;
+    }
+    getTitle() {
+        return this.#title.innerText;
+    }
     /** Данные как передали: те же узлы (правьте их и зовите `setData()`) */
-    getData() { return this.#roots.length === 1 ? this.#roots[0] : [...this.#roots]; }
-    getSelected() { return this.#selected; }
-    getCanvas() { return this.#canvas; }
+    getData() {
+        return this.#roots.length === 1 ? this.#roots[0] : [...this.#roots];
+    }
+    getSelected() {
+        return this.#selected;
+    }
+    getCanvas() {
+        return this.#canvas;
+    }
     /** Видимые узлы по порядку обхода: `{id, title, position, level, expanded, hasChildren}` */
     getItems() {
         return this.#rows.map((row) => ({
@@ -150,7 +173,7 @@ class OrgChart {
             position: row.node.position,
             level: row.level,
             expanded: row.expanded,
-            hasChildren: row.children.length > 0
+            hasChildren: row.children.length > 0,
         }));
     }
     getNode(id = String()) {
@@ -181,7 +204,7 @@ class OrgChart {
     }
     /** Данные: один корень или массив корней; состояние свёрнутых веток сбрасывается */
     setData(data = undefined) {
-        const roots = data === undefined || data === null ? [] : (Array.isArray(data) ? data : [data]);
+        const roots = data === undefined || data === null ? [] : Array.isArray(data) ? data : [data];
         this.#roots = roots.filter((node) => node !== undefined && node !== null);
         this.#expanded = new Map();
         for (const node of this.#collect(this.#roots)) {
@@ -212,9 +235,11 @@ class OrgChart {
         this.#expanded.set(String(id), want);
         this.#render();
         const count = this.#descendants(node);
-        this.#announce(want
-            ? I18n.t("data.orgChartExpanded", {name: this.#nameOf(node), count: count})
-            : I18n.t("data.orgChartCollapsed", {name: this.#nameOf(node), count: count}));
+        this.#announce(
+            want
+                ? I18n.t("data.orgChartExpanded", { name: this.#nameOf(node), count: count })
+                : I18n.t("data.orgChartCollapsed", { name: this.#nameOf(node), count: count })
+        );
         return this;
     }
     expandAll() {
@@ -231,7 +256,9 @@ class OrgChart {
         this.#click_listeners.push(listener);
         return this;
     }
-    set() { return this.#root; }
+    set() {
+        return this.#root;
+    }
 
     // === РАСКЛАДКА ===
     /** Все узлы дерева в порядке обхода (включая скрытые ветки) */
@@ -243,7 +270,9 @@ class OrgChart {
         return found;
     }
     #childrenOf(node = {}) {
-        return Array.isArray(node.children) ? node.children.filter((child) => child !== undefined && child !== null) : [];
+        return Array.isArray(node.children)
+            ? node.children.filter((child) => child !== undefined && child !== null)
+            : [];
     }
     /** Ветка раскрыта: у несворачиваемой схемы всегда, иначе явное состояние или `collapsed` из данных */
     #isExpanded(node = {}) {
@@ -261,7 +290,13 @@ class OrgChart {
         let slot = 0;
         const walk = (node, level, parent) => {
             const children = this.#isExpanded(node) ? this.#childrenOf(node) : [];
-            const row = {node: node, level: level, parent: parent, children: this.#childrenOf(node), expanded: this.#isExpanded(node)};
+            const row = {
+                node: node,
+                level: level,
+                parent: parent,
+                children: this.#childrenOf(node),
+                expanded: this.#isExpanded(node),
+            };
             rows.push(row);
             if (children.length === 0) {
                 row.slot = slot + 0.5;
@@ -274,7 +309,7 @@ class OrgChart {
             return row;
         };
         for (const root of this.#roots) walk(root, 0, undefined);
-        return {rows: rows, slots: Math.max(1, slot)};
+        return { rows: rows, slots: Math.max(1, slot) };
     }
     #rowOf(id = undefined) {
         if (id === undefined || id === null) return undefined;
@@ -367,7 +402,7 @@ class OrgChart {
     }
     /** Координаты узла в той же системе, что у связей: `x` — процент, `y` — пиксели */
     #positionOf(row, step = this.#node_height + this.#gap_y) {
-        return {x: (row.slot / this.#slots) * 100, y: row.level * step};
+        return { x: (row.slot / this.#slots) * 100, y: row.level * step };
     }
     #renderNode(row, step = Number()) {
         const position = this.#positionOf(row, step);
@@ -378,7 +413,8 @@ class OrgChart {
         node.setAttribute("aria-level", String(row.level + 1));
         node.setAttribute("aria-selected", String(row.node.id) === String(this.#selected) ? "true" : "false");
         // Про раскрытие говорит только сворачиваемая схема: у несворачиваемой подчинённые всегда видны
-        if (row.children.length > 0 && this.#collapsible) node.setAttribute("aria-expanded", row.expanded ? "true" : "false");
+        if (row.children.length > 0 && this.#collapsible)
+            node.setAttribute("aria-expanded", row.expanded ? "true" : "false");
         // Остановку Tab расставит `#applyStop`, а `makeKeyboardButton` заполняет `tabindex`
         // только если атрибута нет — поэтому он задаётся заранее
         node.setAttribute("tabindex", "-1");
@@ -388,9 +424,9 @@ class OrgChart {
         if (row.node.avatar !== undefined) {
             const avatar = new Avatar({
                 name: row.node.title,
-                image: typeof row.node.avatar === "object" ? row.node.avatar : {path: row.node.avatar},
+                image: typeof row.node.avatar === "object" ? row.node.avatar : { path: row.node.avatar },
                 size: Avatar.SIZE.SMALL,
-                decorative: true
+                decorative: true,
             });
             node.appendChild(avatar.set());
         }
@@ -414,7 +450,7 @@ class OrgChart {
         if (row.children.length > 0) {
             const count = document.createElement("chui_visually_hidden");
             count.classList.add("chui_visually_hidden");
-            count.innerText = I18n.t("data.orgChartReports", {count: row.children.length});
+            count.innerText = I18n.t("data.orgChartReports", { count: row.children.length });
             content.appendChild(count);
         }
         node.appendChild(content);
@@ -423,7 +459,10 @@ class OrgChart {
             toggle.dataset.expanded = row.expanded ? "true" : "false";
             toggle.dataset.id = String(row.node.id);
             toggle.setAttribute("aria-hidden", "true");
-            toggle.innerHTML = new Icon(row.expanded ? Icons.NAVIGATION.EXPAND_LESS : Icons.NAVIGATION.EXPAND_MORE, "14px").getHTML();
+            toggle.innerHTML = new Icon(
+                row.expanded ? Icons.NAVIGATION.EXPAND_LESS : Icons.NAVIGATION.EXPAND_MORE,
+                "14px"
+            ).getHTML();
             node.appendChild(toggle);
         }
         this.#canvas.appendChild(node);
@@ -539,7 +578,7 @@ class OrgChart {
     };
 }
 
-exports.OrgChart = OrgChart
+exports.OrgChart = OrgChart;
 
 // Описание узла собирает фабрика — как у ContextMenu и SplitButton
-OrgChart.Node = (options = {}) => Object.assign({style: OrgChart.STYLE.DEFAULT}, options);
+OrgChart.Node = (options = {}) => Object.assign({ style: OrgChart.STYLE.DEFAULT }, options);

package/framework/components/chui_pagination/pagination.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");
 
 /**
  * Постраничная навигация: номера страниц, «…» на пропусках и кнопки перехода.
@@ -25,7 +25,7 @@ const {I18n} = require("../../modules/chui_i18n/chui_i18n");
 class Pagination {
     static SIZE = {
         SMALL: "small",
-        DEFAULT: "default"
+        DEFAULT: "default",
     };
     static #counter = 0;
 
@@ -40,18 +40,20 @@ class Pagination {
     #listeners = [];
     #on_change = undefined;
 
-    constructor(options = {
-        id: String(),
-        pages: Number(),
-        page: Number(),
-        siblings: Number(),
-        edges: Number(),
-        jump: Boolean(),
-        size: String(),
-        label: String(),
-        onChange: undefined,
-        changeEvent: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            pages: Number(),
+            page: Number(),
+            siblings: Number(),
+            edges: Number(),
+            jump: Boolean(),
+            size: String(),
+            label: String(),
+            onChange: undefined,
+            changeEvent: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Pagination");
         Pagination.#counter += 1;
         this.#id = options.id === undefined ? `chui_pagination_${Pagination.#counter}` : options.id;
@@ -182,11 +184,13 @@ class Pagination {
         for (let index = this.#page - siblings; index <= this.#page + siblings; index++) {
             if (index >= 1 && index <= this.#pages) numbers.add(index);
         }
-        const sorted = [...numbers].filter((number) => number >= 1 && number <= this.#pages).sort((first, second) => first - second);
+        const sorted = [...numbers]
+            .filter((number) => number >= 1 && number <= this.#pages)
+            .sort((first, second) => first - second);
         const items = [];
         let previous = 0;
         for (const number of sorted) {
-            if (previous !== 0 && number - previous > 1) items.push({gap: true});
+            if (previous !== 0 && number - previous > 1) items.push({ gap: true });
             items.push(number);
             previous = number;
         }
@@ -196,8 +200,23 @@ class Pagination {
     #render() {
         const focused = this.#focusedControl();
         this.#list.innerHTML = "";
-        if (this.#jump) this.#list.appendChild(this.#arrowButton("first", I18n.t("navigation.firstPage"), Icons.NAVIGATION.FIRST_PAGE, this.#page === 1));
-        this.#list.appendChild(this.#arrowButton("prev", I18n.t("navigation.previousPage"), Icons.NAVIGATION.CHEVRON_LEFT, this.#page === 1));
+        if (this.#jump)
+            this.#list.appendChild(
+                this.#arrowButton(
+                    "first",
+                    I18n.t("navigation.firstPage"),
+                    Icons.NAVIGATION.FIRST_PAGE,
+                    this.#page === 1
+                )
+            );
+        this.#list.appendChild(
+            this.#arrowButton(
+                "prev",
+                I18n.t("navigation.previousPage"),
+                Icons.NAVIGATION.CHEVRON_LEFT,
+                this.#page === 1
+            )
+        );
         for (const item of this.#window()) {
             if (item.gap === true) {
                 const gap = document.createElement("chui_pagination_gap");
@@ -209,8 +228,23 @@ class Pagination {
             }
             this.#list.appendChild(this.#pageButton(item));
         }
-        this.#list.appendChild(this.#arrowButton("next", I18n.t("navigation.nextPage"), Icons.NAVIGATION.CHEVRON_RIGHT, this.#page === this.#pages));
-        if (this.#jump) this.#list.appendChild(this.#arrowButton("last", I18n.t("navigation.lastPage"), Icons.NAVIGATION.LAST_PAGE, this.#page === this.#pages));
+        this.#list.appendChild(
+            this.#arrowButton(
+                "next",
+                I18n.t("navigation.nextPage"),
+                Icons.NAVIGATION.CHEVRON_RIGHT,
+                this.#page === this.#pages
+            )
+        );
+        if (this.#jump)
+            this.#list.appendChild(
+                this.#arrowButton(
+                    "last",
+                    I18n.t("navigation.lastPage"),
+                    Icons.NAVIGATION.LAST_PAGE,
+                    this.#page === this.#pages
+                )
+            );
         this.#restoreFocus(focused);
     }
 
@@ -257,14 +291,15 @@ class Pagination {
     #focusedControl() {
         const active = document.activeElement;
         if (active === null || active === undefined || !this.#list.contains(active)) return undefined;
-        return {role: active.dataset.role, page: active.dataset.page};
+        return { role: active.dataset.role, page: active.dataset.page };
     }
 
     #restoreFocus(control) {
         if (control === undefined || control.role === undefined) return;
-        const selector = control.role === "page"
-            ? `button[data-role="page"][data-page="${control.page}"]`
-            : `button[data-role="${control.role}"]`;
+        const selector =
+            control.role === "page"
+                ? `button[data-role="page"][data-page="${control.page}"]`
+                : `button[data-role="${control.role}"]`;
         const node = this.#list.querySelector(selector);
         // Номер мог уехать в «…» — тогда фокус остаётся там, где окажется ближайший контрол
         if (node !== null) node.focus();
@@ -282,4 +317,4 @@ class Pagination {
     static ICON_SIZE = "16px";
 }
 
-exports.Pagination = Pagination
+exports.Pagination = Pagination;

package/framework/components/chui_paragraph/paragraph.js

@@ -1,7 +1,7 @@
 class Paragraph {
     #Paragraph = document.createElement(`p`);
     constructor(text = String()) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Paragraph');
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Paragraph");
         this.#Paragraph.innerText = text;
     }
     setText(text = String()) {
@@ -12,4 +12,4 @@ class Paragraph {
     }
 }
 
-exports.Paragraph = Paragraph
+exports.Paragraph = Paragraph;

package/framework/components/chui_paragraph/styles.css

@@ -8,4 +8,4 @@ p {
     color: var(--text_color);
     margin: var(--margin);
     font-size: var(--font_default_size);
-}
+}

package/framework/components/chui_popover/popover.js

@@ -1,4 +1,4 @@
-const {setStyles, optionOr} = require("../../modules/chui_functions");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
 
 /**
  * Поповер: панель у триггера с произвольным содержимым.
@@ -34,7 +34,7 @@ class Popover {
         TOP: "top",
         BOTTOM: "bottom",
         LEFT: "left",
-        RIGHT: "right"
+        RIGHT: "right",
     };
     /** Зазор между триггером и панелью, px */
     static GAP = 8;
@@ -54,17 +54,19 @@ class Popover {
     #close_on_outside = true;
     #destroyed = false;
 
-    constructor(options = {
-        id: String(),
-        trigger: undefined,
-        content: undefined,
-        title: String(),
-        placement: String(),
-        label: String(),
-        onOpen: undefined,
-        onClose: undefined,
-        closeOnOutsideClick: Boolean()
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            trigger: undefined,
+            content: undefined,
+            title: String(),
+            placement: String(),
+            label: String(),
+            onOpen: undefined,
+            onClose: undefined,
+            closeOnOutsideClick: Boolean(),
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Popover");
         Popover.#counter += 1;
         // Заготовка опции (`String()`) равносильна отсутствующей: иначе слой без аргументов
@@ -120,7 +122,8 @@ class Popover {
         if (this.#header.id === "") this.#header.id = `${this.#id}_title`;
         // Заголовок служит именем слоя, пока не задан свой label и пока он не пуст
         const has_title = this.#header.innerText.trim() !== "";
-        if (has_title && this.#panel.getAttribute("aria-label") === null) this.#panel.setAttribute("aria-labelledby", this.#header.id);
+        if (has_title && this.#panel.getAttribute("aria-label") === null)
+            this.#panel.setAttribute("aria-labelledby", this.#header.id);
         else this.#panel.removeAttribute("aria-labelledby");
         return this;
     }
@@ -242,24 +245,42 @@ class Popover {
     // Панель ставится по выбранной стороне; если не влезает — на противоположную, затем в окно
     #place() {
         const trigger = this.#trigger;
-        const rect = trigger === undefined
-            ? {top: window.innerHeight / 2, bottom: window.innerHeight / 2, left: window.innerWidth / 2, right: window.innerWidth / 2, width: 0, height: 0}
-            : trigger.getBoundingClientRect();
+        const rect =
+            trigger === undefined
+                ? {
+                      top: window.innerHeight / 2,
+                      bottom: window.innerHeight / 2,
+                      left: window.innerWidth / 2,
+                      right: window.innerWidth / 2,
+                      width: 0,
+                      height: 0,
+                  }
+                : trigger.getBoundingClientRect();
         const width = this.#panel.offsetWidth;
         const height = this.#panel.offsetHeight;
         const gap = Popover.GAP;
         const edge = Popover.EDGE;
         let placement = this.#placement;
-        if (placement === Popover.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge) placement = Popover.PLACEMENT.TOP;
-        else if (placement === Popover.PLACEMENT.TOP && rect.top - height - gap < edge) placement = Popover.PLACEMENT.BOTTOM;
-        else if (placement === Popover.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge) placement = Popover.PLACEMENT.LEFT;
-        else if (placement === Popover.PLACEMENT.LEFT && rect.left - width - gap < edge) placement = Popover.PLACEMENT.RIGHT;
-        let left = placement === Popover.PLACEMENT.LEFT ? rect.left - width - gap
-            : placement === Popover.PLACEMENT.RIGHT ? rect.right + gap
-                : rect.left;
-        let top = placement === Popover.PLACEMENT.TOP ? rect.top - height - gap
-            : placement === Popover.PLACEMENT.BOTTOM ? rect.bottom + gap
-                : rect.top;
+        if (placement === Popover.PLACEMENT.BOTTOM && rect.bottom + height + gap > window.innerHeight - edge)
+            placement = Popover.PLACEMENT.TOP;
+        else if (placement === Popover.PLACEMENT.TOP && rect.top - height - gap < edge)
+            placement = Popover.PLACEMENT.BOTTOM;
+        else if (placement === Popover.PLACEMENT.RIGHT && rect.right + width + gap > window.innerWidth - edge)
+            placement = Popover.PLACEMENT.LEFT;
+        else if (placement === Popover.PLACEMENT.LEFT && rect.left - width - gap < edge)
+            placement = Popover.PLACEMENT.RIGHT;
+        let left =
+            placement === Popover.PLACEMENT.LEFT
+                ? rect.left - width - gap
+                : placement === Popover.PLACEMENT.RIGHT
+                  ? rect.right + gap
+                  : rect.left;
+        let top =
+            placement === Popover.PLACEMENT.TOP
+                ? rect.top - height - gap
+                : placement === Popover.PLACEMENT.BOTTOM
+                  ? rect.bottom + gap
+                  : rect.top;
         left = Math.max(edge, Math.min(left, window.innerWidth - width - edge));
         top = Math.max(edge, Math.min(top, window.innerHeight - height - edge));
         this.#panel.dataset.placement = placement;
@@ -314,4 +335,4 @@ class Popover {
     }
 }
 
-exports.Popover = Popover
+exports.Popover = Popover;