@quandis/qbo4.ui 4.0.1-CI-20241028-221206 → 4.0.1-CI-20241029-174756

package/src/qbo/qbo-menu.js

@@ -0,0 +1,169 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 {
+    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) => {
+            event.preventDefault();
+            if (!this.expanded) {
+                this.expanded = true;
+                this.positionContextMenu(event);
+            }
+        };
+        this.hideContextMenu = (event) => {
+            if (this.expanded && !this.shadowRoot?.contains(event.target) && !this.contains(event.target)) {
+                this.expanded = false;
+            }
+        };
+    }
+    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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        switch (this.type) {
+            case 'context':
+                document.addEventListener('click', this.hideContextMenu);
+                this.contextParent?.addEventListener('contextmenu', this.showContextMenu);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        switch (this.type) {
+            case 'context':
+                this.contextParent?.removeEventListener('contextmenu', this.showContextMenu);
+                document.removeEventListener('click', this.hideContextMenu);
+                break;
+        }
+    }
+    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';
+    }
+    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>` : ''}`;
+    }
+    side() {
+        return html `<nav class="qbo-menu side ${this.expanded ? 'expanded' : ''}">
+    <slot name="toggle" @click=${this.toggleSidebar}><button class="toggle-btn" >☰</button></slot>
+    <slot></slot>
+</nav>`;
+    }
+    render() {
+        switch (this.type) {
+            case 'side': return this.side();
+            case 'context': return this.context();
+        }
+    }
+    xrender() {
+        // Only render sidebar layout if type is "side"
+        return html `
+            ${this.type === 'side'
+            ? html `
+                      <nav class="sidebar ${this.expanded ? 'expanded' : ''}">
+                          <button class="toggle-btn" @click=${this.toggleSidebar}>☰</button>
+                          <ul class="nav flex-column mt-3">
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-house-door"></i>
+                                      <span class="sidebar-label">Home</span>
+                                  </a>
+                              </li>
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-gear"></i>
+                                      <span class="sidebar-label">Settings</span>
+                                  </a>
+                              </li>
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-person"></i>
+                                      <span class="sidebar-label">Profile</span>
+                                  </a>
+                              </li>
+                          </ul>
+                      </nav>
+                  `
+            : null}
+        `;
+    }
+};
+__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);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMenu.prototype, "target", void 0);
+QboMenu = __decorate([
+    customElement('qbo-menu')
+], QboMenu);
+export { QboMenu };

package/src/qbo/qbo-menu.ts

@@ -0,0 +1,168 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { qboui } from './styles.js';
+
+@customElement('qbo-menu')
+export class QboMenu extends LitElement {
+
+    @property({ type: String })
+    type: string = 'side';
+
+    @property({ type: Boolean })
+    expanded: boolean = false;
+
+    static styles = [qboui, css`
+        :host {
+            display: block;
+        }
+
+        .toggle-btn {
+            width: 100%;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            text-align: left;
+        }
+    `];
+
+    private toggleSidebar() {
+        this.expanded = !this.expanded;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        switch (this.type) {
+            case 'context':
+                document.addEventListener('click', this.hideContextMenu);
+                this.contextParent?.addEventListener('contextmenu', this.showContextMenu);
+                break;
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        switch (this.type) {
+            case 'context':
+                this.contextParent?.removeEventListener('contextmenu', this.showContextMenu);
+                document.removeEventListener('click', this.hideContextMenu);
+                break;
+        }
+    }
+
+    /* Css Selector for the HTMLElement that the context menu applies to. */
+    @property({ type: String })
+    target = '';
+
+    private showContextMenu = (event: Event) => {
+        event.preventDefault();
+        if (!this.expanded) {
+            this.expanded = true;
+            this.positionContextMenu(event as MouseEvent);
+        }
+    }
+
+    private hideContextMenu = (event: Event) => {
+        if (this.expanded && !this.shadowRoot?.contains(event.target as Node) && !this.contains(event.target as Node)) {
+            this.expanded = false;
+        }
+    }
+
+    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;
+        }
+    }
+
+    context() {
+        return html`${this.expanded ? html`<slot></slot>` : ''}`;
+    }
+
+    side() {
+        return html`<nav class="qbo-menu side ${this.expanded ? 'expanded' : ''}">
+    <slot name="toggle" @click=${this.toggleSidebar}><button class="toggle-btn" >☰</button></slot>
+    <slot></slot>
+</nav>`
+    }
+
+    render() {
+        switch (this.type) {
+            case 'side': return this.side();
+            case 'context': return this.context();
+        }
+    }
+
+    xrender() {
+        // Only render sidebar layout if type is "side"
+        return html`
+            ${this.type === 'side'
+                ? html`
+                      <nav class="sidebar ${this.expanded ? 'expanded' : ''}">
+                          <button class="toggle-btn" @click=${this.toggleSidebar}>☰</button>
+                          <ul class="nav flex-column mt-3">
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-house-door"></i>
+                                      <span class="sidebar-label">Home</span>
+                                  </a>
+                              </li>
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-gear"></i>
+                                      <span class="sidebar-label">Settings</span>
+                                  </a>
+                              </li>
+                              <li class="nav-item">
+                                  <a href="#" class="nav-link">
+                                      <i class="bi bi-person"></i>
+                                      <span class="sidebar-label">Profile</span>
+                                  </a>
+                              </li>
+                          </ul>
+                      </nav>
+                  `
+                : null}
+        `;
+    }
+}