@deepfuture/dui-components 0.0.1

package/command/command.js

@@ -0,0 +1,278 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/command */
+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 } from "lit";
+import { property, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+import { commandContext, } from "./command-context.js";
+import { commandScore } from "./command-score.js";
+export const selectEvent = customEvent("select", {
+    bubbles: true,
+    composed: true,
+});
+export const searchChangeEvent = customEvent("search-change", {
+    bubbles: true,
+    composed: true,
+});
+export const escapeEvent = customEvent("escape", {
+    bubbles: true,
+    composed: true,
+});
+let idCounter = 0;
+const nextId = () => `dui-command-${++idCounter}`;
+const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+`;
+export class DuiCommand extends LitElement {
+    static { this.tagName = "dui-command"; }
+    static { this.styles = [base, styles]; }
+    #loop_accessor_storage = false;
+    /** Whether keyboard navigation wraps from last to first and vice versa. */
+    get loop() { return this.#loop_accessor_storage; }
+    set loop(value) { this.#loop_accessor_storage = value; }
+    #shouldFilter_accessor_storage = true;
+    /** Whether items should be filtered based on search text. */
+    get shouldFilter() { return this.#shouldFilter_accessor_storage; }
+    set shouldFilter(value) { this.#shouldFilter_accessor_storage = value; }
+    #value_accessor_storage = undefined;
+    /** Controlled value — the currently selected item value. */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #filter_accessor_storage = undefined;
+    /** Custom filter function. */
+    get filter() { return this.#filter_accessor_storage; }
+    set filter(value) { this.#filter_accessor_storage = value; }
+    #search_accessor_storage = "";
+    get #search() { return this.#search_accessor_storage; }
+    set #search(value) { this.#search_accessor_storage = value; }
+    #selectedItemId_accessor_storage = undefined;
+    get #selectedItemId() { return this.#selectedItemId_accessor_storage; }
+    set #selectedItemId(value) { this.#selectedItemId_accessor_storage = value; }
+    #items = new Map();
+    #itemOrder = [];
+    #groups = new Set();
+    #scoresMap = new Map();
+    #listId = nextId();
+    #recomputeScores() {
+        this.#scoresMap.clear();
+        for (const [id, entry] of this.#items) {
+            const score = this.filter
+                ? this.filter(entry.value, this.#search, entry.keywords)
+                : commandScore(this.#search, entry.value, entry.textContent, entry.keywords);
+            this.#scoresMap.set(id, score);
+        }
+    }
+    #getScore = (itemId) => {
+        if (!this.shouldFilter)
+            return 1;
+        return this.#scoresMap.get(itemId) ?? 0;
+    };
+    #getVisibleItems() {
+        return this.#itemOrder
+            .map((id) => this.#items.get(id))
+            .filter((entry) => {
+            if (!entry)
+                return false;
+            if (!this.shouldFilter)
+                return true;
+            return (this.#scoresMap.get(entry.id) ?? 0) > 0;
+        });
+    }
+    #getVisibleCount = () => {
+        return this.#getVisibleItems().length;
+    };
+    #getGroupVisibleCount = (groupId) => {
+        return this.#getVisibleItems().filter((e) => e.groupId === groupId).length;
+    };
+    #registerItem = (entry) => {
+        this.#items.set(entry.id, entry);
+        if (!this.#itemOrder.includes(entry.id)) {
+            this.#itemOrder.push(entry.id);
+        }
+        // Recompute scores for new item
+        const score = this.filter
+            ? this.filter(entry.value, this.#search, entry.keywords)
+            : commandScore(this.#search, entry.value, entry.textContent, entry.keywords);
+        this.#scoresMap.set(entry.id, score);
+        // Auto-select first visible item if nothing selected
+        if (!this.#selectedItemId) {
+            const visible = this.#getVisibleItems();
+            if (visible.length > 0 && !visible[0].disabled) {
+                this.#selectedItemId = visible[0].id;
+            }
+        }
+        this.requestUpdate();
+    };
+    #unregisterItem = (id) => {
+        this.#items.delete(id);
+        this.#itemOrder = this.#itemOrder.filter((v) => v !== id);
+        this.#scoresMap.delete(id);
+        this.requestUpdate();
+    };
+    #updateItem = (entry) => {
+        this.#items.set(entry.id, entry);
+        const score = this.filter
+            ? this.filter(entry.value, this.#search, entry.keywords)
+            : commandScore(this.#search, entry.value, entry.textContent, entry.keywords);
+        this.#scoresMap.set(entry.id, score);
+        this.requestUpdate();
+    };
+    #registerGroup = (groupId) => {
+        this.#groups.add(groupId);
+    };
+    #unregisterGroup = (groupId) => {
+        this.#groups.delete(groupId);
+    };
+    #setSearch = (value) => {
+        this.#search = value;
+        this.#recomputeScores();
+        // Select first visible non-disabled item
+        const visible = this.#getVisibleItems();
+        const firstSelectable = visible.find((e) => !e.disabled);
+        this.#selectedItemId = firstSelectable?.id;
+        this.dispatchEvent(searchChangeEvent(value));
+    };
+    #selectItem = (id) => {
+        this.#selectedItemId = id;
+    };
+    #handleItemSelect = (value) => {
+        this.dispatchEvent(selectEvent(value));
+    };
+    #handleKeyDown = (event) => {
+        const visible = this.#getVisibleItems().filter((e) => !e.disabled);
+        if (visible.length === 0)
+            return;
+        const currentIndex = visible.findIndex((e) => e.id === this.#selectedItemId);
+        const selectByIndex = (index) => {
+            const item = visible[index];
+            if (item) {
+                this.#selectedItemId = item.id;
+            }
+        };
+        switch (event.key) {
+            case "ArrowDown":
+            case "n":
+            case "j": {
+                // Ctrl+N and Ctrl+J for down
+                if (event.key !== "ArrowDown" &&
+                    !event.ctrlKey &&
+                    !event.metaKey) {
+                    return;
+                }
+                event.preventDefault();
+                if (currentIndex < visible.length - 1) {
+                    selectByIndex(currentIndex + 1);
+                }
+                else if (this.loop) {
+                    selectByIndex(0);
+                }
+                break;
+            }
+            case "ArrowUp":
+            case "p":
+            case "k": {
+                // Ctrl+P and Ctrl+K for up
+                if (event.key !== "ArrowUp" &&
+                    !event.ctrlKey &&
+                    !event.metaKey) {
+                    return;
+                }
+                event.preventDefault();
+                if (currentIndex > 0) {
+                    selectByIndex(currentIndex - 1);
+                }
+                else if (this.loop) {
+                    selectByIndex(visible.length - 1);
+                }
+                break;
+            }
+            case "Home": {
+                event.preventDefault();
+                selectByIndex(0);
+                break;
+            }
+            case "End": {
+                event.preventDefault();
+                selectByIndex(visible.length - 1);
+                break;
+            }
+            case "Enter": {
+                event.preventDefault();
+                const selected = visible.find((e) => e.id === this.#selectedItemId);
+                if (selected) {
+                    this.#handleItemSelect(selected.value);
+                }
+                break;
+            }
+            case "Escape": {
+                event.preventDefault();
+                this.dispatchEvent(escapeEvent());
+                break;
+            }
+        }
+    };
+    #_ctx_accessor_storage = this.#buildContext();
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            search: this.#search,
+            selectedItemId: this.#selectedItemId,
+            listId: this.#listId,
+            loop: this.loop,
+            shouldFilter: this.shouldFilter,
+            getScore: this.#getScore,
+            getVisibleCount: this.#getVisibleCount,
+            getGroupVisibleCount: this.#getGroupVisibleCount,
+            registerItem: this.#registerItem,
+            unregisterItem: this.#unregisterItem,
+            updateItem: this.#updateItem,
+            registerGroup: this.#registerGroup,
+            unregisterGroup: this.#unregisterGroup,
+            setSearch: this.#setSearch,
+            selectItem: this.#selectItem,
+            handleItemSelect: this.#handleItemSelect,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("keydown", this.#handleKeyDown);
+        this._ctx = this.#buildContext();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("keydown", this.#handleKeyDown);
+    }
+    willUpdate() {
+        this._ctx = this.#buildContext();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], DuiCommand.prototype, "loop", null);
+__decorate([
+    property({ type: Boolean, attribute: "should-filter" })
+], DuiCommand.prototype, "shouldFilter", null);
+__decorate([
+    property({ type: String })
+], DuiCommand.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], DuiCommand.prototype, "filter", null);
+__decorate([
+    provide({ context: commandContext }),
+    state()
+], DuiCommand.prototype, "_ctx", null);

package/command/index.d.ts

@@ -0,0 +1,10 @@
+export { DuiCommand } from "./command.js";
+export { DuiCommandInput } from "./command-input.js";
+export { DuiCommandList } from "./command-list.js";
+export { DuiCommandGroup } from "./command-group.js";
+export { DuiCommandItem } from "./command-item.js";
+export { DuiCommandEmpty } from "./command-empty.js";
+export { DuiCommandSeparator } from "./command-separator.js";
+export { DuiCommandShortcut } from "./command-shortcut.js";
+export type { CommandContext, CommandItemEntry } from "./command-context.js";
+export { commandScore } from "./command-score.js";

package/command/index.js

@@ -0,0 +1,9 @@
+export { DuiCommand } from "./command.js";
+export { DuiCommandInput } from "./command-input.js";
+export { DuiCommandList } from "./command-list.js";
+export { DuiCommandGroup } from "./command-group.js";
+export { DuiCommandItem } from "./command-item.js";
+export { DuiCommandEmpty } from "./command-empty.js";
+export { DuiCommandSeparator } from "./command-separator.js";
+export { DuiCommandShortcut } from "./command-shortcut.js";
+export { commandScore } from "./command-score.js";

package/command/register.d.ts

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

package/command/register.js

@@ -0,0 +1,22 @@
+import { DuiCommand } from "./command.js";
+import { DuiCommandInput } from "./command-input.js";
+import { DuiCommandList } from "./command-list.js";
+import { DuiCommandGroup } from "./command-group.js";
+import { DuiCommandItem } from "./command-item.js";
+import { DuiCommandEmpty } from "./command-empty.js";
+import { DuiCommandSeparator } from "./command-separator.js";
+import { DuiCommandShortcut } from "./command-shortcut.js";
+for (const C of [
+    DuiCommand,
+    DuiCommandInput,
+    DuiCommandList,
+    DuiCommandGroup,
+    DuiCommandItem,
+    DuiCommandEmpty,
+    DuiCommandSeparator,
+    DuiCommandShortcut,
+]) {
+    if (!customElements.get(C.tagName)) {
+        customElements.define(C.tagName, C);
+    }
+}

package/data-table/data-table.d.ts

@@ -0,0 +1,59 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/data-table */
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+export type ColumnDef<T> = {
+    /** Unique key identifying the column (usually a key of T). */
+    key: string;
+    /** Column header label. */
+    header: string;
+    /** Whether this column is sortable. */
+    sortable?: boolean;
+    /** Fixed column width (CSS value). */
+    width?: string;
+    /** Custom render function for cell content. */
+    render?: (value: unknown, row: T) => TemplateResult | string | number;
+};
+export type SortDirection = "asc" | "desc";
+export type SortState = {
+    column: string;
+    direction: SortDirection;
+} | null;
+export type PageState = {
+    page: number;
+    pageSize: number;
+    totalRows: number;
+    totalPages: number;
+};
+export declare const sortChangeEvent: (detail: {
+    column: string;
+    direction: SortDirection;
+}) => CustomEvent<{
+    column: string;
+    direction: SortDirection;
+}>;
+export declare const pageChangeEvent: (detail: PageState) => CustomEvent<PageState>;
+/**
+ * `<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 declare class DuiDataTable<T extends Record<string, unknown> = Record<string, unknown>> extends LitElement {
+    #private;
+    static tagName: "dui-data-table";
+    static styles: import("lit").CSSResult[];
+    /** Column definitions describing each visible column. */
+    accessor columns: ColumnDef<T>[];
+    /** The full data array. Sorting and pagination are applied internally. */
+    accessor data: T[];
+    /** Number of rows per page. Set to 0 to disable pagination. */
+    accessor pageSize: number;
+    /** Key function to derive a unique identifier from each row. */
+    accessor rowKey: ((row: T) => string) | undefined;
+    /** Text shown when the data array is empty. */
+    accessor emptyText: string;
+    willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}