@quandis/qbo4.ui 4.0.1-CI-20250107-190636 → 4.0.1-CI-20250108-195954

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20250107-190636",
+  "version": "4.0.1-CI-20250108-195954",
   "workspaces": [
     "code"
   ],
@@ -27,7 +27,7 @@
     "src/"
   ],
   "dependencies": {
-    "@codemirror/commands": "^6.7.1",
+    "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-sql": "^6.8.0",
@@ -55,7 +55,7 @@
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "sass": "^1.83.1",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1",
     "webpack-merge": "^6.0.1"

package/scss/qboui.scss

@@ -1454,31 +1454,34 @@ details {
     display: flex;
     list-style: none;
     padding-left: 0;
-    margin-bottom: 1px;
+    margin-bottom: 1rem;
     border-bottom: 1px solid var(--qbo-border-color);
 }
 
 .qbo-tabs li {
-    margin-bottom: -1px;
-    padding: 0.5rem 1rem;
     border: 1px solid transparent;
     border-top-left-radius: var(--qbo-border-radius);
     border-top-right-radius: var(--qbo-border-radius);
-    color: #007bff;
-    text-decoration: none;
+    color: var(--qbo-h3-card-color);
     cursor: pointer;
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: -1px;
+    max-width: var(--qbo-tab-max-width);
+    overflow: hidden;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .qbo-tabs li:hover {
-    border-color: #e9ecef #e9ecef #dee2e6;
-    color: #0056b3;
-    text-decoration: none;
+    border-color: #81181d #81181d #fff;
+    color: #81181d;
 }
 
 .qbo-tabs li.active {
-    color: var(--qbo-table-header-color);
-    background-color: var(--qbo-table-header-background);
-    border-color: #dee2e6 #dee2e6 #fff;
+    border-color: #999 #999 #fff;
 }
 
 .qbo-tabs li:not(:last-child) {

package/src/qbo/Program.d.ts

@@ -33,9 +33,12 @@ export * from './qbo-popover.js';
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
 export * from './qbo-resize.js';
+export * from './qbo-search.js';
 export * from './qbo-select.js';
 export * from './qbo-selectable.js';
 export * from './qbo-table.js';
+export * from './qbo-table-sort.js';
+export * from './qbo-tabs.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
 export * from './styles.js';

package/src/qbo/Program.js

@@ -22,9 +22,12 @@ export * from './qbo-popover.js';
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
 export * from './qbo-resize.js';
+export * from './qbo-search.js';
 export * from './qbo-select.js';
 export * from './qbo-selectable.js';
 export * from './qbo-table.js';
+export * from './qbo-table-sort.js';
+export * from './qbo-tabs.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
 export * from './styles.js';

package/src/qbo/Program.ts

@@ -39,9 +39,12 @@ export * from './qbo-popover.js'
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
 export * from './qbo-resize.js';
+export * from './qbo-search.js';
 export * from './qbo-select.js';
 export * from './qbo-selectable.js';
 export * from './qbo-table.js';
+export * from './qbo-table-sort.js';
+export * from './qbo-tabs.js';
 export * from './qbo-user-preferences.js';
 export * from './qbo-validate.js';
 export * from './styles.js';

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class QboSearch extends LitElement {
+    payload: Record<string, string>;
+    private expanded;
+    private inputText;
+    private jsonListContainer;
+    private inputContainer;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(): void;
+    private updateFloatingPosition;
+    private handleKeyDown;
+    private handleSearchClick;
+    private updateKey;
+    private updateValue;
+    private deleteKeyValuePair;
+}

package/src/qbo/qbo-search.js

@@ -0,0 +1,199 @@
+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, state, property } from 'lit/decorators.js';
+import { computePosition, autoUpdate } from '@floating-ui/dom';
+let QboSearch = class QboSearch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.payload = {};
+        this.expanded = false;
+        this.inputText = '';
+        this.jsonListContainer = null;
+        this.inputContainer = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      font-family: var(--qbo-font);
+      margin-left: auto;
+      vertical-align: top;
+      float: right;
+      position: relative;
+    }
+    input {
+      border: 1px solid var(--qbo-border-color);
+      border-radius: var(--qbo-border-radius);
+      font-size: 0.9em;
+      line-height: var(--qbo-line-height);
+    }
+    .collapsed {
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      padding: 0.2em 0.5em;
+      cursor: pointer;
+    }
+    .collapsed input {
+      width: 5rem;
+      transition: width 0.3s ease;
+    }
+    .collapsed input:focus {
+      width: 15rem;
+    }
+    .input-container {
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      border: 1px solid #ccc;
+      padding: 0.2em 0.5em;
+      position: relative;
+    }
+    .json-list {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      background: white;
+      border: 1px solid #ccc;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      padding: 0.5em;
+      z-index: 10000;
+    }
+    .json-item {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 0.3em;
+    }
+    .json-item input {
+      flex: 1;
+      padding: 0.3em;
+    }
+    button {
+      padding: 0.3em;
+      font-size: 0.9em;
+    }
+    .search-icon {
+      cursor: pointer;
+      margin-left: 0.5em;
+    }
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+  `; }
+    render() {
+        return html `
+      ${!this.expanded
+            ? html `
+            <div class="collapsed" @click=${() => (this.expanded = true)}>
+              <svg class="qbo-icon" @click=${() => (this.expanded = true)}><use href="/ui/images/qbo-icons.svg#search"></use></svg>
+            </div>
+          `
+            : html `
+            <div class="input-container">
+              <input
+                type="text"
+                placeholder="Enter key:value"
+                .value=${this.inputText}
+                @input=${(e) => (this.inputText = e.target.value)}
+                @keydown=${this.handleKeyDown}
+                @blur=${() => (this.expanded = false)}
+              />
+              <svg class="qbo-icon" @click=${this.handleSearchClick}><use href="/ui/images/qbo-icons.svg#search"></use></svg>
+            </div>
+            <div class="json-list" id="json-list">
+              ${Object.entries(this.payload).map(([key, value]) => html `
+                  <div class="json-item">
+                    <input
+                      type="text"
+                      .value=${key}
+                      @input=${(e) => this.updateKey(e, key)}
+                    />
+                    <input
+                      type="text"
+                      .value=${value}
+                      @input=${(e) => this.updateValue(e, key)}
+                    />
+                    <button @click=${() => this.deleteKeyValuePair(key)}>Delete</button>
+                  </div>
+                `)}
+            </div>
+          `}
+    `;
+    }
+    firstUpdated() {
+        this.updateFloatingPosition();
+    }
+    updated() {
+        this.updateFloatingPosition();
+    }
+    async updateFloatingPosition() {
+        if (this.inputContainer && this.jsonListContainer) {
+            autoUpdate(this.inputContainer, this.jsonListContainer, async () => {
+                const { x, y } = await computePosition(this.inputContainer, this.jsonListContainer, {
+                    middleware: [],
+                });
+                Object.assign(this.jsonListContainer.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        }
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && this.inputText.includes(':')) {
+            const [key, value] = this.inputText.split(':').map(part => part.trim());
+            if (key && value) {
+                this.payload = { ...this.payload, [key]: value };
+                this.inputText = '';
+            }
+        }
+    }
+    handleSearchClick() {
+        this.expanded = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { payload: this.payload },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updateKey(e, oldKey) {
+        const newKey = e.target.value;
+        if (newKey && newKey !== oldKey) {
+            const { [oldKey]: _, ...rest } = this.payload;
+            this.payload = { ...rest, [newKey]: this.payload[oldKey] };
+        }
+    }
+    updateValue(e, key) {
+        this.payload = { ...this.payload, [key]: e.target.value };
+    }
+    deleteKeyValuePair(key) {
+        const { [key]: _, ...rest } = this.payload;
+        this.payload = { ...rest };
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboSearch.prototype, "payload", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], QboSearch.prototype, "expanded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], QboSearch.prototype, "inputText", void 0);
+QboSearch = __decorate([
+    customElement('qbo-search')
+], QboSearch);
+export { QboSearch };
+if (!customElements.get('qbo-search'))
+    customElements.define('qbo-search', QboSearch);

package/src/qbo/qbo-search.ts

@@ -0,0 +1,192 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { computePosition, autoUpdate } from '@floating-ui/dom';
+
+@customElement('qbo-search')
+export class QboSearch extends LitElement {
+    @property({ type: Object })
+    payload: Record<string, string> = {};
+
+    @state()
+    private expanded = false;
+
+    @state()
+    private inputText = '';
+
+    private jsonListContainer: HTMLElement | null = null;
+    private inputContainer: HTMLElement | null = null;
+
+    static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--qbo-font);
+      margin-left: auto;
+      vertical-align: top;
+      float: right;
+      position: relative;
+    }
+    input {
+      border: 1px solid var(--qbo-border-color);
+      border-radius: var(--qbo-border-radius);
+      font-size: 0.9em;
+      line-height: var(--qbo-line-height);
+    }
+    .collapsed {
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      padding: 0.2em 0.5em;
+      cursor: pointer;
+    }
+    .collapsed input {
+      width: 5rem;
+      transition: width 0.3s ease;
+    }
+    .collapsed input:focus {
+      width: 15rem;
+    }
+    .input-container {
+      display: flex;
+      align-items: center;
+      width: fit-content;
+      border: 1px solid #ccc;
+      padding: 0.2em 0.5em;
+      position: relative;
+    }
+    .json-list {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      background: white;
+      border: 1px solid #ccc;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      padding: 0.5em;
+      z-index: 10000;
+    }
+    .json-item {
+      display: flex;
+      gap: 5px;
+      margin-bottom: 0.3em;
+    }
+    .json-item input {
+      flex: 1;
+      padding: 0.3em;
+    }
+    button {
+      padding: 0.3em;
+      font-size: 0.9em;
+    }
+    .search-icon {
+      cursor: pointer;
+      margin-left: 0.5em;
+    }
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+  `;
+
+    render() {
+        return html`
+      ${!this.expanded
+                ? html`
+            <div class="collapsed" @click=${() => (this.expanded = true)}>
+              <svg class="qbo-icon" @click=${() => (this.expanded = true)}><use href="/ui/images/qbo-icons.svg#search"></use></svg>
+            </div>
+          `
+                : html`
+            <div class="input-container">
+              <input
+                type="text"
+                placeholder="Enter key:value"
+                .value=${this.inputText}
+                @input=${(e: Event) => (this.inputText = (e.target as HTMLInputElement).value)}
+                @keydown=${this.handleKeyDown}
+                @blur=${() => (this.expanded = false)}
+              />
+              <svg class="qbo-icon" @click=${this.handleSearchClick}><use href="/ui/images/qbo-icons.svg#search"></use></svg>
+            </div>
+            <div class="json-list" id="json-list">
+              ${Object.entries(this.payload).map(
+                    ([key, value]) => html`
+                  <div class="json-item">
+                    <input
+                      type="text"
+                      .value=${key}
+                      @input=${(e: Event) => this.updateKey(e, key)}
+                    />
+                    <input
+                      type="text"
+                      .value=${value}
+                      @input=${(e: Event) => this.updateValue(e, key)}
+                    />
+                    <button @click=${() => this.deleteKeyValuePair(key)}>Delete</button>
+                  </div>
+                `
+                )}
+            </div>
+          `}
+    `;
+    }
+
+    firstUpdated() {
+        this.updateFloatingPosition();
+    }
+
+    updated() {
+        this.updateFloatingPosition();
+    }
+
+    private async updateFloatingPosition() {
+        if (this.inputContainer && this.jsonListContainer) {
+            autoUpdate(this.inputContainer, this.jsonListContainer, async () => {
+                const { x, y } = await computePosition(this.inputContainer!, this.jsonListContainer!, {
+                    middleware: [],
+                });
+                Object.assign(this.jsonListContainer!.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        }
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+        if (e.key === 'Enter' && this.inputText.includes(':')) {
+            const [key, value] = this.inputText.split(':').map(part => part.trim());
+            if (key && value) {
+                this.payload = { ...this.payload, [key]: value };
+                this.inputText = '';
+            }
+        }
+    }
+
+    private handleSearchClick() {
+        this.expanded = false;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { payload: this.payload },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    private updateKey(e: Event, oldKey: string) {
+        const newKey = (e.target as HTMLInputElement).value;
+        if (newKey && newKey !== oldKey) {
+            const { [oldKey]: _, ...rest } = this.payload;
+            this.payload = { ...rest, [newKey]: this.payload[oldKey] };
+        }
+    }
+
+    private updateValue(e: Event, key: string) {
+        this.payload = { ...this.payload, [key]: (e.target as HTMLInputElement).value };
+    }
+
+    private deleteKeyValuePair(key: string) {
+        const { [key]: _, ...rest } = this.payload;
+        this.payload = { ...rest };
+    }
+}
+
+if (!customElements.get('qbo-search'))
+    customElements.define('qbo-search', QboSearch);

package/src/qbo/qbo-table-sort.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+export declare class QboTableSort extends LitElement {
+    direction: 'asc' | 'desc';
+    selector: string;
+    sortBy: string | null;
+    trigger: 'ctrl' | null;
+    type: 'inline' | 'remote' | 'all';
+    table: HTMLTableElement | null;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    sortInline(column: HTMLTableCellElement): void;
+    sortTable(event: MouseEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo/qbo-table-sort.js

@@ -0,0 +1,102 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+export class QboTableSort extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'desc';
+        this.selector = 'table';
+        this.sortBy = null;
+        /* Trigger for raising the sort event. */
+        this.trigger = null;
+        this.type = 'inline';
+        this.table = null;
+    }
+    firstUpdated() {
+        this.table = this.closest('table');
+        if (this.table == null)
+            return;
+        this.table.addEventListener('click', this.sortTable.bind(this));
+    }
+    disconnectedCallback() {
+        this.table?.removeEventListener('click', this.sortTable.bind(this));
+    }
+    sortInline(column) {
+        const rows = Array.from(this.table.querySelector('tbody').querySelectorAll('tr'));
+        const sortType = column.getAttribute('data-sort') || 'string';
+        rows.sort((rowA, rowB) => {
+            const cellA = rowA.cells[column.cellIndex].getAttribute('data-sort-value')
+                ?? rowA.cells[column.cellIndex].textContent.trim();
+            const cellB = rowB.cells[column.cellIndex].getAttribute('data-sort-value')
+                ?? rowB.cells[column.cellIndex].textContent.trim();
+            switch (sortType) {
+                case 'numeric':
+                    return this.direction === 'asc' ? Number(cellA) - Number(cellB) : Number(cellB) - Number(cellA);
+                case 'date':
+                    return this.direction === 'asc'
+                        ? new Date(cellA).getTime() - new Date(cellB).getTime()
+                        : new Date(cellB).getTime() - new Date(cellA).getTime();
+                case 'string':
+                default:
+                    return this.direction === 'asc'
+                        ? cellA.localeCompare(cellB)
+                        : cellB.localeCompare(cellA);
+            }
+        });
+        rows.forEach(row => this.table.querySelector('tbody').appendChild(row));
+        const headers = this.table.querySelectorAll('th[data-sort]');
+        headers.forEach(th => th.classList.remove('sorted-asc', 'sorted-desc'));
+        column.classList.add(this.direction === 'asc' ? 'sorted-asc' : 'sorted-desc');
+    }
+    sortTable(event) {
+        const target = event.target;
+        const column = target?.closest('th');
+        if (column == null || column.getAttribute('data-sort') == null)
+            return;
+        this.direction = this.direction === 'asc' ? 'desc' : 'asc';
+        this.sortBy = column.getAttribute('data-sort') || column.innerText;
+        let sortType = 'string';
+        if (this.sortBy != null && this.sortBy.indexOf('|')) {
+        }
+        if (this.type !== 'remote')
+            this.sortInline(column);
+        this.dispatchEvent(new CustomEvent('sort', {
+            detail: { sortBy: this.sortBy, direction: this.direction, source: event },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html ``; // The component itself doesn't render anything
+    }
+}
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboTableSort.prototype, "direction", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboTableSort.prototype, "selector", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], QboTableSort.prototype, "sortBy", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboTableSort.prototype, "trigger", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboTableSort.prototype, "type", void 0);
+if (!customElements.get('qbo-table-sort'))
+    customElements.define('qbo-table-sort', QboTableSort);