@chromvoid/uikit 0.1.0

package/dist/components/cv-table-row.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export type CVTableRowSlotchangeEvent = CustomEvent<null>;
+export interface CVTableRowEventMap {
+    'cv-table-row-slotchange': CVTableRowSlotchangeEvent;
+}
+export declare class CVTableRow extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        index: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    index: number;
+    selected: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-table-row.js

@@ -0,0 +1,45 @@
+import { LitElement, css, html } from 'lit';
+export class CVTableRow extends LitElement {
+    static elementName = 'cv-table-row';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            index: { type: Number, reflect: true },
+            selected: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.index = 0;
+        this.selected = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: table-row;
+      }
+
+      :host([selected]) {
+        background: var(
+          --cv-table-row-selected-background,
+          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 12%, transparent)
+        );
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleSlotChange() {
+        this.dispatchEvent(new CustomEvent('cv-table-row-slotchange', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+}

package/dist/components/cv-table.d.ts

@@ -0,0 +1,147 @@
+import { type TableSortDirection } from '@chromvoid/headless-ui/table';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVTableEventDetail {
+    sortColumnId: string | null;
+    sortDirection: TableSortDirection;
+}
+export interface CVTableSelectionChangeDetail {
+    selectedRowIds: string[];
+    selectable: 'single' | 'multi' | undefined;
+}
+export interface CVTableFocusChangeDetail {
+    rowIndex: number | null;
+    columnIndex: number | null;
+}
+export type CVTableInputEvent = CustomEvent<CVTableEventDetail>;
+export type CVTableChangeEvent = CustomEvent<CVTableEventDetail>;
+export type CVTableSelectionChangeEvent = CustomEvent<CVTableSelectionChangeDetail>;
+export type CVTableFocusChangeEvent = CustomEvent<CVTableFocusChangeDetail>;
+export interface CVTableEventMap {
+    'cv-input': CVTableInputEvent;
+    'cv-change': CVTableChangeEvent;
+    'cv-selection-change': CVTableSelectionChangeEvent;
+    'cv-focus-change': CVTableFocusChangeEvent;
+}
+export declare class CVTable extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        sortColumn: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        sortDirection: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        totalColumnCount: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        totalRowCount: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        selectable: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        stickyHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        striped: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        bordered: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pageSize: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    sortColumn: string;
+    sortDirection: TableSortDirection;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    totalColumnCount: number;
+    totalRowCount: number;
+    selectable: 'single' | 'multi' | undefined;
+    interactive: boolean;
+    stickyHeader: boolean;
+    striped: boolean;
+    compact: boolean;
+    bordered: boolean;
+    pageSize: number;
+    private readonly idBase;
+    private columnRecords;
+    private rowRecords;
+    private columnListeners;
+    private rowListeners;
+    private model;
+    private prevFocusedRowIndex;
+    private prevFocusedColumnIndex;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private normalizeSortDirection;
+    private resolveIndex;
+    private resolveSpan;
+    private getColumnElements;
+    private getRowElements;
+    private getCellElements;
+    private ensureColumnValue;
+    private ensureRowValue;
+    private resolveCellColumnId;
+    private captureSortState;
+    private rebuildModelFromSlot;
+    private detachColumnListeners;
+    private attachColumnListeners;
+    private detachRowListeners;
+    private attachRowListeners;
+    private handleRowClick;
+    private dispatchSelectionChange;
+    private dispatchFocusChange;
+    private handleGridKeyDown;
+    private syncControlledValuesFromModel;
+    private syncElementsFromModel;
+    private dispatchInput;
+    private dispatchChange;
+    private applySortInteraction;
+    private nextSortDirection;
+    private handleColumnClick;
+    private handleColumnKeyDown;
+    private handleColumnsSlotChange;
+    private handleRowsSlotChange;
+    private handleRowSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}