@quandis/qbo4.ui 4.0.1-CI-20241107-011209 → 4.0.1-CI-20241108-204652

package/src/qbo/qbo-menu.js

@@ -7,144 +7,117 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { qboui } from './styles.js';
-let QboMenu = class QboMenu extends LitElement {
+import { LitElement, html, css } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { computePosition, shift, flip } from "@floating-ui/dom";
+export class QboMenu extends LitElement {
     constructor() {
         super(...arguments);
-        this.type = 'side';
-        this.expanded = false;
-        /* Css Selector for the HTMLElement that the context menu applies to. */
-        this.target = '';
-        this.showContextMenu = (event) => {
+        // Define the placement property with type `string`
+        this.placement = "bottom-start";
+        // Internal state to control menu visibility
+        this.isOpen = false;
+        this.middleware = [flip(), shift()];
+        this.handleMenuOpen = (event) => {
             event.preventDefault();
-            if (!this.expanded) {
-                this.expanded = true;
-                this.positionContextMenu(event);
+            event.stopPropagation();
+            const customEvent = event;
+            if (customEvent.detail.menu !== this && this.isOpen) {
+                this.closeMenu();
             }
         };
-        this.hideContextMenu = (event) => {
-            if (this.expanded && !this.shadowRoot?.contains(event.target) && !this.contains(event.target)) {
-                this.expanded = false;
+        this.handleOutsideClick = (event) => {
+            const customEvent = event;
+            const target = customEvent.target;
+            if (target !== this && !this.contains(target)) {
+                this.closeMenu();
             }
         };
-        this.toggleSideMenu = (event) => {
-            const target = event.target;
-            if (target?.closest('menu') == null) {
-                this.expanded = !this.expanded;
-                this.classList.toggle('expanded', this.expanded);
+        this.toggleMenu = (event) => {
+            if (event.target instanceof HTMLElement
+                || event.target instanceof SVGElement
+                || event.target instanceof SVGUseElement) {
+                let toggleMenu = true;
+                let parent = event.target.parentElement;
+                while (toggleMenu && parent) {
+                    if (parent instanceof HTMLElement && parent.tagName.toLowerCase() == 'aside')
+                        toggleMenu = false;
+                    else
+                        parent = parent.parentElement;
+                }
+                if (toggleMenu) {
+                    this.isOpen = !this.isOpen;
+                    this.menuContainer.classList.toggle("open", this.isOpen);
+                    if (this.isOpen) {
+                        this.updateMenuPosition();
+                        document.dispatchEvent(new CustomEvent("qbo-menu-open", {
+                            bubbles: true,
+                            composed: true,
+                            detail: { menu: this },
+                        }));
+                    }
+                }
             }
         };
     }
-    static { this.styles = [qboui, css `
-        :host {
-            display: block;
-        }
-
-        .toggle-btn {
-            width: 100%;
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-            text-align: left;
-        }
-    `]; }
-    toggleSidebar() {
-        this.expanded = !this.expanded;
-    }
+    static { this.styles = css ``; }
     connectedCallback() {
         super.connectedCallback();
-        switch (this.type) {
-            case 'context':
-                document.addEventListener('click', this.hideContextMenu);
-                this.contextParent?.addEventListener('contextmenu', this.showContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.addEventListener('click', this.toggleSideMenu);
-                break;
-        }
+        // document.addEventListener("click", this.handleOutsideClick.bind);
+        document.addEventListener("qbo-menu-open", this.handleMenuOpen.bind(this));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        switch (this.type) {
-            case 'context':
-                this.contextParent?.removeEventListener('contextmenu', this.showContextMenu);
-                document.removeEventListener('click', this.hideContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.removeEventListener('click', this.toggleSideMenu);
-                break;
-        }
-    }
-    xcreateRenderRoot() {
-        return this; // : super.createRenderRoot();
+        // document.removeEventListener("click", this.handleOutsideClick);
+        document.removeEventListener("qbo-menu-open", this.handleMenuOpen);
+        this.triggerButton.removeEventListener("click", this.toggleMenu);
     }
-    async positionContextMenu(event) {
-        event.preventDefault();
-        this.expanded = true;
-        await this.updateComplete;
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const menuWidth = this.offsetWidth || 0;
-        const menuHeight = this.offsetHeight || 0;
-        // Calculate adjusted x and y positions
-        let x = event.clientX;
-        let y = event.clientY;
-        if (x + menuWidth > viewportWidth) {
-            x = viewportWidth - menuWidth;
-        }
-        if (y + menuHeight > viewportHeight) {
-            y = viewportHeight - menuHeight;
-        }
-        console.log(`mouse event: ${event.clientX} x ${event.clientY} ; ${x} x ${y}`);
-        this.style.left = x + 'px';
-        this.style.top = y + 'px';
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.triggerButton =
+            this.querySelector("*[data-trigger]") ||
+                this.querySelector("button") ||
+                this.parentElement;
+        this.menuContainer =
+            this.querySelector("*[data-content]") ||
+                this.querySelector("aside") ||
+                this.querySelector("menu");
+        if (this.triggerButton != null)
+            this.triggerButton.addEventListener("click", this.toggleMenu);
     }
-    get contextParent() {
-        if (this.target) {
-            return (this.closest(this.target) ||
-                (() => {
-                    const rootNode = this.getRootNode();
-                    if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-                        return rootNode.querySelector(this.target);
-                    }
-                    return null;
-                })() ||
-                document.querySelector(this.target) ||
-                document);
-        }
-        else {
-            return this.parentElement;
-        }
-    }
-    context() {
-        return html `${this.expanded ? html `<slot></slot>` : ''}`;
+    closeMenu() {
+        this.isOpen = false;
+        this.menuContainer.classList.remove("open");
     }
-    side() {
-        return html `<slot></slot>`;
+    async updateMenuPosition() {
+        const { x, y } = await computePosition(this.triggerButton, this.menuContainer, {
+            placement: this.placement,
+            middleware: this.middleware,
+        });
+        Object.assign(this.menuContainer.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
     render() {
-        switch (this.type) {
-            case 'side': return this.side();
-            case 'context': return this.context();
-        }
+        return html `<slot></slot>`;
     }
-};
+}
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], QboMenu.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], QboMenu.prototype, "expanded", void 0);
+], QboMenu.prototype, "placement", void 0);
 __decorate([
-    property({ type: String }),
+    state(),
     __metadata("design:type", Object)
-], QboMenu.prototype, "target", void 0);
-QboMenu = __decorate([
-    customElement('qbo-menu')
-], QboMenu);
-export { QboMenu };
+], QboMenu.prototype, "isOpen", void 0);
+__decorate([
+    query("slot"),
+    __metadata("design:type", HTMLSlotElement)
+], QboMenu.prototype, "slotElement", void 0);
+__decorate([
+    query('slot[name="menu"]'),
+    __metadata("design:type", HTMLSlotElement)
+], QboMenu.prototype, "menuSlotElement", void 0);
+if (!customElements.get("qbo-menu"))
+    customElements.define("qbo-menu", QboMenu);

package/src/qbo/qbo-menu.ts

@@ -1,151 +1,126 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { qboui } from './styles.js';
+import { LitElement, PropertyValues, html, css, PropertyValueMap } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { computePosition, Placement, shift, flip } from "@floating-ui/dom";
 
-@customElement('qbo-menu')
 export class QboMenu extends LitElement {
-
+    // Define the placement property with type `string`
     @property({ type: String })
-    type: string = 'side';
+    placement: Placement = "bottom-start";
 
-    @property({ type: Boolean })
-    expanded: boolean = false;
+    // Internal state to control menu visibility
+    @state() private isOpen = false;
 
-    static styles = [qboui, css`
-        :host {
-            display: block;
-        }
+    // Query to find the trigger button and menu container in the shadow DOM
+    @query("slot") private slotElement!: HTMLSlotElement;
+    @query('slot[name="menu"]') private menuSlotElement!: HTMLSlotElement;
 
-        .toggle-btn {
-            width: 100%;
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-            text-align: left;
-        }
-    `];
+    private triggerButton!: HTMLElement;
+    private menuContainer!: HTMLElement;
+    private middleware = [flip(), shift()];
 
-    private toggleSidebar() {
-        this.expanded = !this.expanded;
-    }
+    static styles = css``;
 
     connectedCallback() {
         super.connectedCallback();
-        switch (this.type) {
-            case 'context':
-                document.addEventListener('click', this.hideContextMenu);
-                this.contextParent?.addEventListener('contextmenu', this.showContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.addEventListener('click', this.toggleSideMenu);
-                break;
-        }
+        // document.addEventListener("click", this.handleOutsideClick.bind);
+        document.addEventListener("qbo-menu-open", this.handleMenuOpen.bind(this));
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
-        switch (this.type) {
-            case 'context':
-                this.contextParent?.removeEventListener('contextmenu', this.showContextMenu);
-                document.removeEventListener('click', this.hideContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.removeEventListener('click', this.toggleSideMenu);
-                break;
-        }
+        // document.removeEventListener("click", this.handleOutsideClick);
+        document.removeEventListener("qbo-menu-open", this.handleMenuOpen);
+        this.triggerButton.removeEventListener("click", this.toggleMenu);
     }
 
-    /* Css Selector for the HTMLElement that the context menu applies to. */
-    @property({ type: String })
-    target = '';
-
-    xcreateRenderRoot() {
-        return this; // : super.createRenderRoot();
-    }
-
-    private showContextMenu = (event: Event) => {
+    handleMenuOpen = (event: Event) => {
         event.preventDefault();
-        if (!this.expanded) {
-            this.expanded = true;
-            this.positionContextMenu(event as MouseEvent);
+        event.stopPropagation();
+        const customEvent = event as CustomEvent;
+        if (customEvent.detail.menu !== this && this.isOpen) {
+            this.closeMenu();
         }
-    }
+    };
 
-    private hideContextMenu = (event: Event) => {
-        if (this.expanded && !this.shadowRoot?.contains(event.target as Node) && !this.contains(event.target as Node)) {
-            this.expanded = false;
+    handleOutsideClick = (event: Event) => {
+        const customEvent = event as PointerEvent;
+        const target = customEvent.target as HTMLElement;
+        if (target !== this && !this.contains(target)) {
+            this.closeMenu();
         }
+    };
+
+    firstUpdated(changes: PropertyValues) {
+        super.firstUpdated(changes);
+
+        this.triggerButton =
+            this.querySelector("*[data-trigger]") ||
+            (this.querySelector("button") as HTMLElement) ||
+            this.parentElement;
+        this.menuContainer =
+            this.querySelector("*[data-content]") ||
+            this.querySelector("aside") ||
+            (this.querySelector("menu") as HTMLElement);
+
+        if (this.triggerButton != null)
+            this.triggerButton.addEventListener("click", this.toggleMenu);
     }
 
-    private async positionContextMenu(event: MouseEvent) {
-        event.preventDefault();
-        this.expanded = true;
-        await this.updateComplete;
-
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        const menuWidth = this.offsetWidth || 0;
-        const menuHeight = this.offsetHeight || 0;
-
-        // Calculate adjusted x and y positions
-        let x = event.clientX;
-        let y = event.clientY;
-
-        if (x + menuWidth > viewportWidth) {
-            x = viewportWidth - menuWidth;
-        }
-
-        if (y + menuHeight > viewportHeight) {
-            y = viewportHeight - menuHeight;
-        }
-        console.log(`mouse event: ${event.clientX} x ${event.clientY} ; ${x} x ${y}`)
-
-        this.style.left = x + 'px';
-        this.style.top = y + 'px';
-    }
-
-    get contextParent(): HTMLElement | Document | null {
-        if (this.target) {
-            return (
-                this.closest(this.target) as HTMLElement ||
-                (() => {
-                    const rootNode = this.getRootNode();
-                    if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-                        return rootNode.querySelector(this.target);
-                    }
-                    return null;
-                })() ||
-                document.querySelector(this.target) ||
-                document
-            );
-        } else {
-            return this.parentElement;
+    toggleMenu = (event: Event) => {
+        if (event.target instanceof HTMLElement
+            || event.target instanceof SVGElement
+            || event.target instanceof SVGUseElement) {
+            let toggleMenu = true;
+            let parent = event.target.parentElement;
+            while (toggleMenu && parent) {
+                if (parent instanceof HTMLElement && parent.tagName.toLowerCase() == 'aside')
+                    toggleMenu = false;
+                else
+                    parent = parent.parentElement;
+            }
+
+            if (toggleMenu) {
+                this.isOpen = !this.isOpen;
+                this.menuContainer.classList.toggle("open", this.isOpen);
+
+                if (this.isOpen) {
+                    this.updateMenuPosition();
+                    document.dispatchEvent(
+                        new CustomEvent("qbo-menu-open", {
+                            bubbles: true,
+                            composed: true,
+                            detail: { menu: this },
+                        })
+                    );
+                }
+            }
         }
-    }
+    };
 
-    context() {
-        return html`${this.expanded ? html`<slot></slot>` : ''}`;
+    closeMenu() {
+        this.isOpen = false;
+        this.menuContainer.classList.remove("open");
     }
 
-    toggleSideMenu = (event: Event) => {
-        const target = event.target as HTMLElement;
-        if (target?.closest('menu') == null) {
-            this.expanded = !this.expanded;
-            this.classList.toggle('expanded', this.expanded);
-        }
-    }
-
-    side() {
-        return html`<slot></slot>`
-
+    private async updateMenuPosition() {
+        const { x, y } = await computePosition(
+            this.triggerButton,
+            this.menuContainer,
+            {
+                placement: this.placement as Placement | undefined,
+                middleware: this.middleware,
+            }
+        );
+
+        Object.assign(this.menuContainer.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
 
     render() {
-        switch (this.type) {
-            case 'side': return this.side();
-            case 'context': return this.context();
-        }
+        return html`<slot></slot>`;
     }
 }
+
+if (!customElements.get("qbo-menu")) customElements.define("qbo-menu", QboMenu);

package/src/qbo/qbo-popover.d.ts

@@ -1,21 +1,17 @@
-import { PropertyValues } from 'lit';
-import { QboFormElement } from './qbo-form-element.js';
-export declare class QboPopover extends QboFormElement {
-    contentAtt: string;
-    contentStyle: string;
-    containerAtt: string;
-    containerValue: string;
-    defaultContent: string;
-    htmlAtt: string;
-    htmlValue: string;
-    placementAtt: string;
-    placementValue: string;
+import { LitElement, PropertyValues } from "lit";
+import { Placement } from "@floating-ui/dom";
+export declare class QboPopover extends LitElement {
+    placement: Placement;
     selector: string;
-    toggleAtt: string;
-    toggleValue: string;
-    renderInHost: boolean;
-    createRenderRoot(): HTMLElement | DocumentFragment;
+    private isOpen;
+    private triggerElement;
+    private middleware;
+    private setPosition;
     connectedCallback(): void;
-    firstUpdated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    firstUpdated(changes: PropertyValues): void;
+    handleMenuOpen: (event: Event) => void;
+    toggleMenu: (event: Event) => void;
+    closeMenu(): void;
     render(): import("lit-html").TemplateResult<1>;
 }