@quandis/qbo4.ui 4.0.1-CI-20241113-192850 → 4.0.1-CI-20241113-211132

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241113-192850",
+  "version": "4.0.1-CI-20241113-211132",
   "workspaces": [
     "code"
   ],

package/scss/qbo.scss

@@ -4,14 +4,15 @@
     --qbo-border-color: #999;
     --qbo-border-radius: 4px;
     --qbo-background-color: #ffffff;
-    --qbo-padding-horizontal: 0rem;
-    --qbo-padding-vertical: 0rem;
+    --qbo-padding-horizontal: 0.75rem;
+    --qbo-padding-vertical: 0.375rem;
     --qbo-padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
     --qbo-margin: 0.5rem;
     --qbo-margin-horizontal: 0.5rem;
     --qbo-margin-vertical: 0.5rem;
     --qbo-focus-border-color: #80bdff;
     --qbo-focus-box-shadow: rgba(0, 123, 255, 0.25);
+    --qbo-line-height: var(--qbo-line-height);
 
     --qbo-button-bg: #007bff;
     --qbo-button-border: #007bff;
@@ -92,43 +93,6 @@
     gap: var(--qbo-margin);
 }
 
-/* Default column styling */
-.qbo-card {
-    @extend .qbo-col;
-    border: 1px solid var(--qbo-border-color);
-    border-radius: var(--qbo-border-radius);
-    box-shadow: 2px 2px 3px var(--qbo-border-color);
-    padding: .5em;
-    overflow: auto;
-}
-
-.qbo-card-bottom {
-    margin-bottom: .5em;
-}
-
-.qbo-card-left {
-    margin-left: .5em;
-}
-
-.qbo-card-right {
-    margin-right: .5em;
-}
-
-.qbo-card-top {
-    margin-top: .5em;
-}
-
-svg {
-    height: 1rem;
-    width: 1rem;
-}
-
-.qbo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--qbo-margin);
-}
-
 /* Default column styling */
 .qbo-col {
     flex: 1 0 0;
@@ -136,12 +100,6 @@ svg {
     box-sizing: border-box;
 }
 
-.qbo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
-}
-
 .qbo-col-1 {
     flex: 0 0 calc(8.33% - (var(--qbo-margin) / 2));
     max-width: calc(8.33% - (var(--qbo-margin) / 2));
@@ -202,10 +160,33 @@ svg {
     max-width: calc(100% - (var(--qbo-margin) / 2));
 }
 
+/* Default column styling */
+.qbo-card {
+    @extend .qbo-col;
+    border: 1px solid var(--qbo-border-color);
+    border-radius: var(--qbo-border-radius);
+    box-shadow: 2px 2px 3px var(--qbo-border-color);
+    padding: .5em;
+    overflow: auto;
+}
+
+.qbo-card-left {
+    margin-left: .5em;
+}
+
+.qbo-card-right {
+    margin-right: .5em;
+}
+
+svg {
+    height: 1rem;
+    width: 1rem;
+}
+
 /* Form */
 .qbo-form {
     margin: 0 auto;
-    padding: var(--qbo-padding);
+    padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
 }
 
 .qbo-form label {
@@ -230,7 +211,7 @@ svg {
 .qbo-form textarea {
     width: 100%;
     box-sizing: border-box;
-    padding: var(--qbo-padding);
+    padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
     font-size: 1rem;
     line-height: 1;
     color: var(--qbo-color);
@@ -330,9 +311,9 @@ button,
     background-color: var(--qbo-background-color);
     border: 1px solid var(--qbo-border-color);
     border-radius: var(--qbo-border-radius);
-    padding: var(--qbo-padding);
+    padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
     font-size: 1rem;
-    line-height: 1.5;
+    line-height: var(--qbo-line-height);
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
@@ -348,7 +329,7 @@ button:focus,
 .qbo-button:focus {
     background-color: var(--qbo-border-color);
     text-decoration: none;
-    line-height: 1.5;
+    line-height: var(--qbo-line-height);
     border-radius: var(--qbo-border-radius);
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -406,87 +387,6 @@ button:disabled,
     background-position: left center;
 }
 
-/* Grid */
-.qbo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--qbo-margin);
-}
-
-/* Default column styling */
-.qbo-col {
-    flex: 1 0 0;
-    min-width: calc(8.33% - (var(--qbo-margin) / 2));
-    max-width: 100%;
-    box-sizing: border-box;
-}
-
-.qbo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
-}
-
-.qbo-col-1 {
-    flex: 0 0 calc(8.33% - (var(--qbo-margin) / 2));
-    max-width: calc(8.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-2 {
-    flex: 0 0 calc(16.66% - (var(--qbo-margin) / 2));
-    max-width: calc(16.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-3 {
-    flex: 0 0 calc(25% - (var(--qbo-margin) / 2));
-    max-width: calc(25% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-4 {
-    flex: 0 0 calc(33.33% - (var(--qbo-margin) / 2));
-    max-width: calc(33.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-5 {
-    flex: 0 0 calc(41.66% - (var(--qbo-margin) / 2));
-    max-width: calc(41.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-6 {
-    flex: 0 0 calc(50% - (var(--qbo-margin) / 2));
-    max-width: calc(50% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-7 {
-    flex: 0 0 calc(58.33% - (var(--qbo-margin) / 2));
-    max-width: calc(58.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-8 {
-    flex: 0 0 calc(66.66% - (var(--qbo-margin) / 2));
-    max-width: calc(66.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-9 {
-    flex: 0 0 calc(75% - (var(--qbo-margin) / 2));
-    max-width: calc(75% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-10 {
-    flex: 0 0 calc(83.33% - (var(--qbo-margin) / 2));
-    max-width: calc(83.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-11 {
-    flex: 0 0 calc(91.66% - (var(--qbo-margin) / 2));
-    max-width: calc(91.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-12 {
-    flex: 0 0 calc(100% - (var(--qbo-margin) / 2));
-    max-width: calc(100% - (var(--qbo-margin) / 2));
-}
-
 /* Menu */
 nav {
     --qbo-background-color: var(--qbo-nav-background-color, black);
@@ -507,7 +407,7 @@ nav {
             border: 1px solid var(--qbo-nav-background-color, black);
             cursor: pointer;
             display: inline-block;
-            line-height: 1.5;
+            line-height: var(--qbo-line-height);
             padding: 5px;
 
             & svg {
@@ -560,35 +460,35 @@ menu.qbo-toolbar {
     flex-direction: row;
     margin-right: var(--qbo-margin);
 
-    li {
+    > li {
         display: inline-block;
         margin-right: 0;
         color: var(--qbo-color);
         background-color: var(--qbo-background-color);
         border: 1px solid var(--qbo-border-color);
-        padding: var(--qbo-padding);
-        line-height: 1.5;
+        padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+        line-height: var(--qbo-line-height);
         cursor: pointer;
         border-radius: 0;
         transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
         text-decoration: none;
     }
 
-    li:first-child {
+    > li:first-child {
         border-top-left-radius: var(--qbo-border-radius);
         border-bottom-left-radius: var(--qbo-border-radius);
     }
 
-    li:last-child {
+    > li:last-child {
         border-top-right-radius: var(--qbo-border-radius);
         border-bottom-right-radius: var(--qbo-border-radius);
     }
 
-    li:hover,
-    li:focus {
+    > li:hover,
+    > li:focus {
         background-color: var(--qbo-border-color);
         text-decoration: none;
-        line-height: 1.5;
+        line-height: var(--qbo-line-height);
         transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
     }
 }
@@ -618,7 +518,7 @@ qbo-menu {
         border: 1px solid var(--qbo-border-color);
         border-radius: var(--qbo-border-radius);
         box-sizing: border-box;
-        height: 0;
+        height: auto;
         list-style-type: none;
         margin: 0;
         padding-left: 0;
@@ -629,6 +529,18 @@ qbo-menu {
     *[data-mega].open,
     aside.open,
     menu.open {
+        visibility: visible;
+    }
+
+    *[data-mega],
+    aside {
+        width: 0;
+        margin: var(--qbo-margin);
+        padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+        padding-bottom: .6em;
+        overflow-y: scroll;
+        top: 53px !important;
+        width: 100%;
         background-color: #f0f0f0;
         border: 0;
         border-radius: 0;
@@ -639,9 +551,6 @@ qbo-menu {
         left: 0px;
         margin: 0;
         overflow-y: auto;
-        top: 53px !important;
-        visibility: visible;
-        width: 100%;
 
         > h1 {
             color: var(--qbo-color);
@@ -656,19 +565,11 @@ qbo-menu {
         }
     }
 
-    *[data-mega],
-    aside {
-        width: 0;
-        margin: var(--qbo-margin);
-        padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
-        padding-bottom: .6em;
-        overflow-y: scroll;
-    }
     /* Dropdown item styling for each li element */
     li {
         display: list-item !important;
-        padding: var(--qbo-padding, 0.5rem 1rem);
-        line-height: 1.5;
+        padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+        line-height: var(--qbo-line-height);
         text-align: left;
         white-space: nowrap;
         cursor: pointer;

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

@@ -2,9 +2,9 @@ import { LitElement, PropertyValues } from "lit";
 import { Placement } from "@floating-ui/dom";
 export declare class QboMenu extends LitElement {
     placement: Placement;
+    type: string;
+    target: string | null;
     private isOpen;
-    private slotElement;
-    private menuSlotElement;
     private triggerButton;
     private menuContainer;
     private middleware;
@@ -14,6 +14,7 @@ export declare class QboMenu extends LitElement {
     handleMenuOpen: (event: Event) => void;
     handleOutsideClick: (event: Event) => void;
     firstUpdated(changes: PropertyValues): void;
+    showContextMenu: (event: Event) => void;
     toggleMenu: (event: Event) => void;
     closeMenu(): void;
     private updateMenuPosition;

package/src/qbo/qbo-menu.js

@@ -8,13 +8,15 @@ 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 { property, query, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { computePosition, shift, flip } from "@floating-ui/dom";
 export class QboMenu extends LitElement {
     constructor() {
         super(...arguments);
         // Define the placement property with type `string`
         this.placement = "bottom-start";
+        this.type = "dropdown";
+        this.target = null;
         // Internal state to control menu visibility
         this.isOpen = false;
         this.middleware = [flip(), shift()];
@@ -27,50 +29,65 @@ export class QboMenu extends LitElement {
             }
         };
         this.handleOutsideClick = (event) => {
-            const customEvent = event;
-            const target = customEvent.target;
-            if (target !== this && !this.contains(target)) {
+            const target = event.target;
+            const path = event.composedPath();
+            if (!path.includes(this)) {
                 this.closeMenu();
             }
         };
+        this.showContextMenu = (event) => {
+            const clickEvent = event;
+            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);
+        };
         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 },
-                        }));
-                    }
-                }
+            //event.preventDefault();
+            //event.stopPropagation();
+            const target = event.target;
+            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 },
+                }));
             }
         };
     }
     static { this.styles = css ``; }
     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);
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
@@ -82,17 +99,38 @@ export class QboMenu extends LitElement {
             this.querySelector("*[data-content]") ||
                 this.querySelector("aside") ||
                 this.querySelector("menu");
-        if (this.triggerButton != null)
-            this.triggerButton.addEventListener("click", this.toggleMenu);
+        if (this.type === "context") {
+            if (this.target) {
+                this.triggerButton =
+                    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;
+            }
+            this.triggerButton.addEventListener("contextmenu", this.showContextMenu);
+        }
+        else {
+            if (this.triggerButton != null)
+                this.triggerButton.addEventListener("click", this.toggleMenu);
+        }
     }
     closeMenu() {
         this.isOpen = false;
         this.menuContainer.classList.remove("open");
     }
-    async updateMenuPosition() {
-        const { x, y } = await computePosition(this.triggerButton, this.menuContainer, {
+    async updateMenuPosition(source) {
+        console.log(source, typeof source);
+        const { x, y } = await computePosition(source, this.menuContainer, {
             placement: this.placement,
             middleware: this.middleware,
+            strategy: 'fixed'
         });
         Object.assign(this.menuContainer.style, {
             left: `${x}px`,
@@ -107,17 +145,17 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], QboMenu.prototype, "placement", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboMenu.prototype, "type", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboMenu.prototype, "target", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], 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);