@quandis/qbo4.ui 4.0.1-CI-20241113-174125 → 4.0.1-CI-20241113-205011

package/src/qbo/qbo-menu.ts

@@ -7,13 +7,15 @@ export class QboMenu extends LitElement {
     @property({ type: String })
     placement: Placement = "bottom-start";
 
+    @property()
+    type: string = "dropdown";
+
+    @property()
+    target: string | null = null;
+
     // Internal state to control menu visibility
     @state() private isOpen = false;
 
-    // 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;
-
     private triggerButton!: HTMLElement;
     private menuContainer!: HTMLElement;
     private middleware = [flip(), shift()];
@@ -22,15 +24,20 @@ export class QboMenu extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        // document.addEventListener("click", this.handleOutsideClick.bind);
-        document.addEventListener("qbo-menu-open", this.handleMenuOpen.bind(this));
+        document.addEventListener("click", this.handleOutsideClick);
+        // document.addEventListener("qbo-menu-open", this.handleMenuOpen);
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
-        // document.removeEventListener("click", this.handleOutsideClick);
-        document.removeEventListener("qbo-menu-open", this.handleMenuOpen);
-        this.triggerButton.removeEventListener("click", this.toggleMenu);
+        document.removeEventListener("click", this.handleOutsideClick);
+        // document.removeEventListener("qbo-menu-open", this.handleMenuOpen);
+        if (this.type === "context")
+            this.triggerButton.removeEventListener(
+                "contextmenu",
+                this.showContextMenu
+            );
+        else this.triggerButton.removeEventListener("click", this.toggleMenu);
     }
 
     handleMenuOpen = (event: Event) => {
@@ -43,9 +50,9 @@ export class QboMenu extends LitElement {
     };
 
     handleOutsideClick = (event: Event) => {
-        const customEvent = event as PointerEvent;
-        const target = customEvent.target as HTMLElement;
-        if (target !== this && !this.contains(target)) {
+        const target = event.target as HTMLElement;
+        const path = event.composedPath();
+        if (!path.includes(this)) {
             this.closeMenu();
         }
     };
@@ -62,38 +69,70 @@ export class QboMenu extends LitElement {
             this.querySelector("aside") ||
             (this.querySelector("menu") as HTMLElement);
 
-        if (this.triggerButton != null)
-            this.triggerButton.addEventListener("click", this.toggleMenu);
+        if (this.type === "context") {
+            if (this.target) {
+                this.triggerButton =
+                    (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;
+            }
+            this.triggerButton.addEventListener("contextmenu", this.showContextMenu);
+        } else {
+            if (this.triggerButton != null)
+                this.triggerButton.addEventListener("click", this.toggleMenu);
+        }
     }
 
-    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;
-            }
+    showContextMenu = (event: Event) => {
+        const clickEvent = event as MouseEvent;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOpen = true;
+        this.menuContainer.classList.toggle("open", this.isOpen);
+        const source = {
+            getBoundingClientRect: () => ({
+                x: clickEvent.clientX,
+                y: clickEvent.clientY,
+                width: 0,
+                height: 0,
+                top: clickEvent.clientY,
+                left: clickEvent.clientX,
+                right: clickEvent.clientX,
+                bottom: clickEvent.clientY,
+            }),
+        };
+        this.updateMenuPosition(source);
+    };
 
-            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 },
-                        })
-                    );
-                }
-            }
+    toggleMenu = (event: Event) => {
+        //event.preventDefault();
+        //event.stopPropagation();
+        const target = event.target as HTMLElement;
+        const path = event.composedPath();
+        if (!path.includes(this.triggerButton) || path.includes(this.menuContainer))
+            return;
+        this.isOpen = !this.isOpen;
+        this.menuContainer.classList.toggle("open", this.isOpen);
+
+        if (this.isOpen) {
+            this.updateMenuPosition(this.triggerButton);
+            document.dispatchEvent(
+                new CustomEvent("qbo-menu-open", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { menu: this },
+                })
+            );
         }
     };
 
@@ -102,15 +141,13 @@ export class QboMenu extends LitElement {
         this.menuContainer.classList.remove("open");
     }
 
-    private async updateMenuPosition() {
-        const { x, y } = await computePosition(
-            this.triggerButton,
-            this.menuContainer,
-            {
-                placement: this.placement as Placement | undefined,
-                middleware: this.middleware,
-            }
-        );
+    private async updateMenuPosition(source: any) {
+        console.log(source, typeof source);
+        const { x, y } = await computePosition(source, this.menuContainer, {
+            placement: this.placement as Placement | undefined,
+            middleware: this.middleware,
+            strategy: 'fixed'
+        });
 
         Object.assign(this.menuContainer.style, {
             left: `${x}px`,