@deepfuture/dui-components 0.0.1

package/data-table/data-table.js

@@ -0,0 +1,416 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/data-table */
+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;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+// ── Events ─────────────────────────────────────────────────────────────
+export const sortChangeEvent = customEvent("sort-change", {
+    bubbles: true,
+    composed: true,
+});
+export const pageChangeEvent = customEvent("page-change", {
+    bubbles: true,
+    composed: true,
+});
+// ── Inline SVG sort icons ──────────────────────────────────────────────
+const chevronUpDown = html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m7 15 5 5 5-5" />
+  <path d="m7 9 5-5 5 5" />
+</svg>`;
+const chevronUp = html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m18 15-6-6-6 6" />
+</svg>`;
+const chevronDown = html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m6 9 6 6 6-6" />
+</svg>`;
+// ── Pure helpers ────────────────────────────────────────────────────────
+function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (typeof a === "string" && typeof b === "string")
+        return a.localeCompare(b);
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b));
+}
+function sortData(data, sort) {
+    if (!sort)
+        return [...data];
+    const { column, direction } = sort;
+    const multiplier = direction === "asc" ? 1 : -1;
+    return [...data].sort((a, b) => multiplier * compareValues(a[column], b[column]));
+}
+function paginateData(data, page, pageSize) {
+    const start = (page - 1) * pageSize;
+    return data.slice(start, start + pageSize);
+}
+// ── Styles ─────────────────────────────────────────────────────────────
+const hostStyles = css `
+  :host {
+    display: block;
+  }
+`;
+const componentStyles = css `
+  .DataTable {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .TableWindow {
+    overflow: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    min-width: 100%;
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  th {
+    text-align: left;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  th[aria-sort] {
+    cursor: pointer;
+  }
+
+  .HeaderContent {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .SortIcon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  tbody tr {
+    transition-property: background, filter, transform;
+  }
+
+  .Pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .PageInfo {
+    display: flex;
+    align-items: center;
+  }
+
+  .PageControls {
+    display: flex;
+    align-items: center;
+  }
+
+  .PageButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+  }
+
+  .PageButton:disabled {
+    cursor: not-allowed;
+  }
+`;
+// ── Component ──────────────────────────────────────────────────────────
+/**
+ * `<dui-data-table>` — A sortable, paginated data table.
+ *
+ * Accepts column definitions and row data, with optional sorting and
+ * pagination. Cells can be customized via column `render` functions.
+ *
+ * @fires sort-change - Fired when a sortable column header is clicked. Detail: SortState
+ * @fires page-change - Fired when the page changes. Detail: PageState
+ */
+export class DuiDataTable extends LitElement {
+    static { this.tagName = "dui-data-table"; }
+    static { this.styles = [base, hostStyles, componentStyles]; }
+    #columns_accessor_storage = [];
+    /** Column definitions describing each visible column. */
+    get columns() { return this.#columns_accessor_storage; }
+    set columns(value) { this.#columns_accessor_storage = value; }
+    #data_accessor_storage = [];
+    /** The full data array. Sorting and pagination are applied internally. */
+    get data() { return this.#data_accessor_storage; }
+    set data(value) { this.#data_accessor_storage = value; }
+    #pageSize_accessor_storage = 10;
+    /** Number of rows per page. Set to 0 to disable pagination. */
+    get pageSize() { return this.#pageSize_accessor_storage; }
+    set pageSize(value) { this.#pageSize_accessor_storage = value; }
+    #rowKey_accessor_storage = undefined;
+    /** Key function to derive a unique identifier from each row. */
+    get rowKey() { return this.#rowKey_accessor_storage; }
+    set rowKey(value) { this.#rowKey_accessor_storage = value; }
+    #emptyText_accessor_storage = "No results.";
+    /** Text shown when the data array is empty. */
+    get emptyText() { return this.#emptyText_accessor_storage; }
+    set emptyText(value) { this.#emptyText_accessor_storage = value; }
+    #sort_accessor_storage = null;
+    get #sort() { return this.#sort_accessor_storage; }
+    set #sort(value) { this.#sort_accessor_storage = value; }
+    #page_accessor_storage = 1;
+    get #page() { return this.#page_accessor_storage; }
+    set #page(value) { this.#page_accessor_storage = value; }
+    #displayRows_accessor_storage = [];
+    get #displayRows() { return this.#displayRows_accessor_storage; }
+    set #displayRows(value) { this.#displayRows_accessor_storage = value; }
+    // ── Lifecycle ──────────────────────────────────────────────────────
+    willUpdate(changed) {
+        // Recompute display rows when data, sort, page, or pageSize change.
+        if (changed.has("data") ||
+            changed.has("pageSize") ||
+            changed.has("#sort") ||
+            changed.has("#page")) {
+            // Reset page when data changes.
+            if (changed.has("data")) {
+                this.#page = 1;
+            }
+            const sorted = sortData(this.data, this.#sort);
+            if (this.pageSize > 0) {
+                this.#displayRows = paginateData(sorted, this.#page, this.pageSize);
+            }
+            else {
+                this.#displayRows = sorted;
+            }
+        }
+    }
+    // ── Computed ───────────────────────────────────────────────────────
+    get #totalPages() {
+        if (this.pageSize <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(this.data.length / this.pageSize));
+    }
+    get #pageState() {
+        return {
+            page: this.#page,
+            pageSize: this.pageSize,
+            totalRows: this.data.length,
+            totalPages: this.#totalPages,
+        };
+    }
+    // ── Sort handling ─────────────────────────────────────────────────
+    #handleSort(column) {
+        if (this.#sort?.column === column) {
+            if (this.#sort.direction === "asc") {
+                this.#sort = { column, direction: "desc" };
+            }
+            else {
+                // desc → clear
+                this.#sort = null;
+            }
+        }
+        else {
+            this.#sort = { column, direction: "asc" };
+        }
+        this.#page = 1;
+        this.dispatchEvent(sortChangeEvent(this.#sort));
+    }
+    // ── Pagination handling ───────────────────────────────────────────
+    #goToPage(page) {
+        this.#page = Math.max(1, Math.min(page, this.#totalPages));
+        this.dispatchEvent(pageChangeEvent(this.#pageState));
+    }
+    // ── Render ────────────────────────────────────────────────────────
+    #renderSortIcon(column) {
+        if (!column.sortable)
+            return nothing;
+        if (this.#sort?.column === column.key) {
+            return html `<span class="SortIcon"
+        >${this.#sort.direction === "asc" ? chevronUp : chevronDown}</span
+      >`;
+        }
+        return html `<span class="SortIcon">${chevronUpDown}</span>`;
+    }
+    #renderHeader() {
+        return html `
+      <thead>
+        <tr>
+          ${this.columns.map((col) => {
+            const style = col.width ? { width: col.width } : {};
+            const sortAttr = col.sortable
+                ? this.#sort?.column === col.key
+                    ? this.#sort.direction === "asc"
+                        ? "ascending"
+                        : "descending"
+                    : "none"
+                : undefined;
+            return html `
+              <th
+                style=${styleMap(style)}
+                aria-sort=${sortAttr ?? nothing}
+                @click=${col.sortable
+                ? () => this.#handleSort(col.key)
+                : nothing}
+              >
+                <span class="HeaderContent">
+                  ${col.header} ${this.#renderSortIcon(col)}
+                </span>
+              </th>
+            `;
+        })}
+        </tr>
+      </thead>
+    `;
+    }
+    #renderBody() {
+        if (this.#displayRows.length === 0) {
+            return html `
+        <tbody>
+          <tr class="EmptyRow">
+            <td colspan=${this.columns.length}>${this.emptyText}</td>
+          </tr>
+        </tbody>
+      `;
+        }
+        const keyFn = this.rowKey
+            ? (row, index) => this.rowKey(row)
+            : (_row, index) => index;
+        return html `
+      <tbody>
+        ${repeat(this.#displayRows, keyFn, (row) => html `
+            <tr>
+              ${this.columns.map((col) => {
+            const value = row[col.key];
+            const content = col.render
+                ? col.render(value, row)
+                : (value ?? "");
+            return html `<td>${content}</td>`;
+        })}
+            </tr>
+          `)}
+      </tbody>
+    `;
+    }
+    #renderPagination() {
+        if (this.pageSize <= 0 || this.data.length === 0)
+            return nothing;
+        const start = (this.#page - 1) * this.pageSize + 1;
+        const end = Math.min(this.#page * this.pageSize, this.data.length);
+        const isFirst = this.#page === 1;
+        const isLast = this.#page === this.#totalPages;
+        return html `
+      <div class="Pagination" part="pagination">
+        <div class="PageInfo">
+          <span>${start}-${end} of ${this.data.length}</span>
+        </div>
+        <div class="PageControls">
+          <button
+            class="PageButton"
+            ?disabled=${isFirst}
+            @click=${() => this.#goToPage(1)}
+            aria-label="First page"
+          >
+            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></dui-icon>
+          </button>
+          <button
+            class="PageButton"
+            ?disabled=${isFirst}
+            @click=${() => this.#goToPage(this.#page - 1)}
+            aria-label="Previous page"
+          >
+            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></dui-icon>
+          </button>
+          <button
+            class="PageButton"
+            ?disabled=${isLast}
+            @click=${() => this.#goToPage(this.#page + 1)}
+            aria-label="Next page"
+          >
+            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></dui-icon>
+          </button>
+          <button
+            class="PageButton"
+            ?disabled=${isLast}
+            @click=${() => this.#goToPage(this.#totalPages)}
+            aria-label="Last page"
+          >
+            <dui-icon style="--icon-size: var(--font-size-sm)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg></dui-icon>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="DataTable" part="root">
+        <div class="TableWindow" part="table-window">
+          <table part="table">
+            ${this.#renderHeader()} ${this.#renderBody()}
+          </table>
+        </div>
+        ${this.#renderPagination()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], DuiDataTable.prototype, "columns", null);
+__decorate([
+    property({ attribute: false })
+], DuiDataTable.prototype, "data", null);
+__decorate([
+    property({ type: Number, attribute: "page-size" })
+], DuiDataTable.prototype, "pageSize", null);
+__decorate([
+    property({ attribute: false })
+], DuiDataTable.prototype, "rowKey", null);
+__decorate([
+    property({ attribute: "empty-text" })
+], DuiDataTable.prototype, "emptyText", null);

package/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiDataTable } from "./data-table.js";
+export type { ColumnDef, SortDirection, SortState, PageState } from "./data-table.js";

package/data-table/index.js

@@ -0,0 +1 @@
+export { DuiDataTable } from "./data-table.js";

package/data-table/register.d.ts

@@ -0,0 +1 @@
+export {};

package/data-table/register.js

@@ -0,0 +1,4 @@
+import { DuiDataTable } from "./data-table.js";
+if (!customElements.get(DuiDataTable.tagName)) {
+    customElements.define(DuiDataTable.tagName, DuiDataTable);
+}

package/dialog/dialog-close.d.ts

@@ -0,0 +1,15 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-dialog-close>` — A close button wrapper for the dialog.
+ *
+ * Wraps slotted content and closes the dialog on click.
+ *
+ * @slot - Content that closes the dialog (usually a button).
+ */
+export declare class DuiDialogClose extends LitElement {
+    #private;
+    static tagName: "dui-dialog-close";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/dialog/dialog-close.js

@@ -0,0 +1,35 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { dialogContext } from "./dialog-context.js";
+const hostStyles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-dialog-close>` — A close button wrapper for the dialog.
+ *
+ * Wraps slotted content and closes the dialog on click.
+ *
+ * @slot - Content that closes the dialog (usually a button).
+ */
+export class DuiDialogClose extends LitElement {
+    static { this.tagName = "dui-dialog-close"; }
+    static { this.styles = [base, hostStyles]; }
+    #ctx = new ContextConsumer(this, {
+        context: dialogContext,
+        subscribe: true,
+    });
+    #handleClick = () => {
+        this.#ctx.value?.closeDialog();
+    };
+    render() {
+        return html `
+      <span @click="${this.#handleClick}">
+        <slot></slot>
+      </span>
+    `;
+    }
+}

package/dialog/dialog-context.d.ts

@@ -0,0 +1,13 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+export type DialogContext = {
+    readonly open: boolean;
+    readonly dialogId: string;
+    readonly triggerId: string;
+    readonly titleId: string;
+    readonly descriptionId: string;
+    readonly openDialog: () => void;
+    readonly closeDialog: () => void;
+};
+export declare const dialogContext: {
+    __context__: DialogContext;
+};

package/dialog/dialog-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { createContext } from "@lit/context";
+export const dialogContext = createContext(Symbol("dui-dialog"));

package/dialog/dialog-popup.d.ts

@@ -0,0 +1,36 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/dialog */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+/**
+ * `<dui-dialog-popup>` — The popup overlay for the dialog.
+ *
+ * Renders a backdrop and a centered dialog popup with focus trapping.
+ * Handles open/close animations via `data-starting-style` / `data-ending-style`.
+ * Closes on backdrop click (unlike `<dui-alert-dialog-popup>`).
+ *
+ * Title and description are provided via named slots and rendered as
+ * semantic `<h2>` and `<p>` elements with ARIA linkage.
+ *
+ * @slot title - Title text for the dialog (rendered as `<h2>`).
+ * @slot description - Description text for the dialog (rendered as `<p>`).
+ * @slot - Default slot for dialog content (actions, form fields, etc.).
+ * @csspart backdrop - The overlay backdrop behind the dialog.
+ * @csspart popup - The dialog popup container.
+ * @csspart title - The heading element wrapping the title slot.
+ * @csspart description - The paragraph element wrapping the description slot.
+ */
+export declare class DuiDialogPopup extends LitElement {
+    #private;
+    static tagName: "dui-dialog-popup";
+    static styles: import("lit").CSSResult[];
+    /** Keep the popup in the DOM when closed. */
+    accessor keepMounted: boolean;
+    /** CSS selector within the popup to focus when the dialog opens. */
+    accessor initialFocus: string | undefined;
+    /** CSS selector in the document to focus when the dialog closes. */
+    accessor finalFocus: string | undefined;
+    /** Width of the popup (CSS value, e.g. "32rem" or "600px"). Defaults to 24rem. */
+    accessor width: string | undefined;
+    updated(): void;
+    willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}