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

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-microphone.js

@@ -7,13 +7,12 @@ 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);
 };
-var QboMicrophone_1;
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 /**
   * Collect text input from the user.
   */
-let QboMicrophone = class QboMicrophone extends LitElement {
+export class QboMicrophone extends LitElement {
     constructor() {
         super(...arguments);
         this.renderInHost = true;
@@ -27,7 +26,6 @@ let QboMicrophone = class QboMicrophone extends LitElement {
         this.target = null;
         this.listening = false;
     }
-    static { QboMicrophone_1 = this; }
     static { this.activeInstance = null; }
     connectedCallback() {
         super.connectedCallback();
@@ -93,7 +91,7 @@ let QboMicrophone = class QboMicrophone extends LitElement {
     }
     start() {
         this.listening = true;
-        QboMicrophone_1.activeInstance = this;
+        QboMicrophone.activeInstance = this;
         if (this.activeClass)
             this.classList.add(this.activeClass);
         console.log('listening');
@@ -101,7 +99,7 @@ let QboMicrophone = class QboMicrophone extends LitElement {
     }
     stop(e) {
         this.listening = false;
-        QboMicrophone_1.activeInstance = null;
+        QboMicrophone.activeInstance = null;
         if (this.activeClass)
             this.classList.remove(this.activeClass);
         console.log('stopped listening');
@@ -114,7 +112,7 @@ let QboMicrophone = class QboMicrophone extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -143,7 +141,5 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboMicrophone.prototype, "activeClass", void 0);
-QboMicrophone = QboMicrophone_1 = __decorate([
-    customElement('qbo-microphone')
-], QboMicrophone);
-export { QboMicrophone };
+if (!customElements.get('qbo-microphone'))
+    customElements.define('qbo-microphone', QboMicrophone);

package/src/qbo/qbo-microphone.ts

@@ -11,7 +11,6 @@ declare global {
 /**
   * Collect text input from the user.
   */
-@customElement('qbo-microphone')
 export class QboMicrophone extends LitElement
 {
     static activeInstance: QboMicrophone | null = null;
@@ -135,3 +134,6 @@ export class QboMicrophone extends LitElement
         return html`<slot></slot>`;
     }
 }
+
+if (!customElements.get('qbo-microphone'))
+    customElements.define('qbo-microphone', QboMicrophone)

package/src/qbo/qbo-paginate.js

@@ -8,9 +8,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { qboui } from './styles.js';
-let QboPaginate = class QboPaginate extends LitElement {
+export class QboPaginate extends LitElement {
     constructor() {
         super(...arguments);
         this.display = 25;
@@ -104,7 +104,7 @@ let QboPaginate = class QboPaginate extends LitElement {
         </ul>
       </nav>`;
     }
-};
+}
 __decorate([
     property({ type: Number }),
     __metadata("design:type", Object)
@@ -133,7 +133,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboPaginate.prototype, "editSize", void 0);
-QboPaginate = __decorate([
-    customElement('qbo-paginate')
-], QboPaginate);
-export { QboPaginate };
+if (!customElements.get('qbo-paginate'))
+    customElements.define('qbo-paginate', QboPaginate);

package/src/qbo/qbo-paginate.ts

@@ -2,7 +2,6 @@
 import { customElement, property } from 'lit/decorators.js';
 import { qboui } from './styles.js';
 
-@customElement('qbo-paginate')
 export class QboPaginate extends LitElement {
     @property({ type: Number })
     display = 25;
@@ -120,3 +119,6 @@ export class QboPaginate extends LitElement {
     }
 
 }
+
+if (!customElements.get('qbo-paginate'))
+    customElements.define('qbo-paginate', QboPaginate)

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>;
 }

package/src/qbo/qbo-popover.js

@@ -7,102 +7,89 @@ 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 { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { Popover } from 'bootstrap';
-import { QboFormElement } from './qbo-form-element.js';
-let QboPopover = class QboPopover extends QboFormElement {
+import { LitElement, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { computePosition, shift, flip } from "@floating-ui/dom";
+export class QboPopover extends LitElement {
     constructor() {
         super(...arguments);
-        this.contentAtt = 'data-bs-content';
-        this.contentStyle = 'none';
-        this.containerAtt = 'data-bs-container';
-        this.containerValue = 'body';
-        this.defaultContent = 'No content provided';
-        this.htmlAtt = 'data-bs-html';
-        this.htmlValue = 'true';
-        this.placementAtt = 'data-bs-placement';
-        this.placementValue = 'left';
-        this.selector = '*[slot=content]';
-        this.toggleAtt = 'data-bs-toggle';
-        this.toggleValue = 'popover';
-        this.renderInHost = true;
+        this.placement = "bottom";
+        this.selector = '*[data-popover-trigger]';
+        // Internal state to control menu visibility
+        this.isOpen = false;
+        this.middleware = [flip(), shift()];
+        this.handleMenuOpen = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.detail.menu !== this && this.isOpen)
+                this.closeMenu();
+        };
+        this.toggleMenu = (event) => {
+            this.isOpen = !this.isOpen;
+            this.classList.toggle("open", this.isOpen);
+            if (this.isOpen) {
+                this.setPosition();
+                document.dispatchEvent(new CustomEvent("qbo-popover-open", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { menu: this },
+                }));
+            }
+        };
     }
-    createRenderRoot() {
-        return this.renderInHost ? this : super.createRenderRoot();
+    async setPosition() {
+        const { x, y } = await computePosition(this.triggerElement, this, {
+            placement: this.placement,
+            middleware: this.middleware,
+        });
+        Object.assign(this.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute(this.toggleAtt, this.toggleValue);
-        this.setAttribute(this.placementAtt, this.placementValue);
-        this.setAttribute(this.containerAtt, this.containerValue);
-        this.setAttribute(this.htmlAtt, this.htmlValue);
+        document.addEventListener("qbo-popover-open", this.handleMenuOpen);
     }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        const content = this.querySelector(this.selector);
-        if (content instanceof HTMLElement)
-            content.style.display = this.contentStyle;
-        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
-        new Popover(this);
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("qbo-popover-open", this.handleMenuOpen);
+        if (this.triggerElement != null) {
+            this.triggerElement.removeEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.removeEventListener("mouseout", this.toggleMenu);
+        }
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.triggerElement =
+            this.parentElement?.querySelector(this.selector) ||
+                this.shadowRoot?.querySelector(this.selector) ||
+                document.querySelector(this.selector) ||
+                this.parentElement;
+        if (this.triggerElement != null) {
+            this.triggerElement.addEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.addEventListener("mouseout", this.toggleMenu);
+        }
+    }
+    closeMenu() {
+        this.isOpen = false;
+        this.classList.remove("open");
     }
     render() {
         return html `<slot></slot>`;
     }
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "contentAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "contentStyle", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "containerAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "containerValue", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "defaultContent", void 0);
+}
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "htmlAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "htmlValue", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "placementAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "placementValue", void 0);
+    __metadata("design:type", String)
+], QboPopover.prototype, "placement", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboPopover.prototype, "selector", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "toggleAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "toggleValue", void 0);
-__decorate([
-    property({ type: Boolean }),
+    state(),
     __metadata("design:type", Object)
-], QboPopover.prototype, "renderInHost", void 0);
-QboPopover = __decorate([
-    customElement('qbo-popover')
-], QboPopover);
-export { QboPopover };
+], QboPopover.prototype, "isOpen", void 0);
+if (!customElements.get('qbo-popover'))
+    customElements.define('qbo-popover', QboPopover);