@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,90 @@
+import { LitElement, css, html } from 'lit';
+export class CVTreegridRow extends LitElement {
+    static elementName = 'cv-treegrid-row';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            index: { type: Number, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            expanded: { type: Boolean, reflect: true },
+            branch: { type: Boolean, reflect: true },
+            level: { type: Number, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.index = 0;
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+        this.expanded = false;
+        this.branch = false;
+        this.level = 1;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        --cv-treegrid-child-indent: var(--cv-treegrid-child-indent, 14px);
+        outline: none;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      :host(:focus-visible) [part='row'] {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: -2px;
+      }
+
+      :host([active]) [part='row'],
+      :host([selected]) [part='row'] {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 18%, transparent);
+      }
+
+      :host([disabled]) [part='row'],
+      :host([disabled]) [part='children'] {
+        opacity: 0.55;
+      }
+
+      [part='row'] {
+        display: grid;
+        grid-template-columns: repeat(var(--cv-treegrid-column-count, 1), minmax(0, 1fr));
+        align-items: center;
+        min-block-size: 32px;
+        padding-inline: var(--cv-space-2, 8px);
+        padding-inline-start: calc(var(--cv-treegrid-child-indent) * max(var(--cv-treegrid-level, 1) - 1, 0));
+      }
+
+      [part='children'][hidden] {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleSlotChange() {
+        this.dispatchEvent(new CustomEvent('cv-treegrid-row-slotchange', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        this.style.setProperty('--cv-treegrid-level', String(this.level || 1));
+        return html `
+      <div part="row">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+      <div part="children" ?hidden=${!this.expanded}>
+        <slot name="children" @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,96 @@
+import { type TreegridCellId, type TreegridSelectionMode } from '@chromvoid/headless-ui/treegrid';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVTreegridEventDetail {
+    value: string | null;
+    activeCell: TreegridCellId | null;
+    selectedValues: string[];
+    expandedValues: string[];
+}
+export declare class CVTreegrid extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        selectedValues: {
+            attribute: boolean;
+        };
+        expandedValues: {
+            attribute: boolean;
+        };
+        selectionMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    selectedValues: string[];
+    expandedValues: string[];
+    selectionMode: TreegridSelectionMode;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    private readonly idBase;
+    private columnRecords;
+    private rowRecords;
+    private cellRecords;
+    private columnById;
+    private rowById;
+    private cellListeners;
+    private model;
+    private _programmaticChange;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getColumnElements;
+    private getRowElements;
+    private getCellElements;
+    private resolveIndex;
+    private ensureColumnValue;
+    private ensureRowValue;
+    private resolveCellColumn;
+    private parseCellValue;
+    private cellIdToString;
+    private normalizeRowIds;
+    private normalizeExpandedValues;
+    private captureSnapshot;
+    private rebuildModelFromSlot;
+    private parseColumns;
+    private parseRows;
+    private normalizeActiveCell;
+    private cellKey;
+    private detachCellListeners;
+    private attachCellListeners;
+    private getVisibleRowIds;
+    private syncElementsFromModel;
+    private syncControlledValuesFromModel;
+    private getEventDetail;
+    private dispatchInput;
+    private dispatchChange;
+    private applyInteractionResult;
+    private setActiveCell;
+    private focusActiveCell;
+    private selectRowFromActive;
+    private setSelectedRows;
+    private setExpandedRows;
+    private handleCellFocus;
+    private handleCellPointer;
+    private setActiveCellFromRecord;
+    private handleTreegridKeyDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}