@ryanhelsing/ry-ui/dist/components/ry-tree.d.ts

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * <ry-tree>
 *
 * Tree view with CSS-only expand/collapse using hidden checkboxes
 * and grid-template-rows animation. Supports drag-and-drop rearranging
 * and JSON serialization.
 *
 * Usage:
 * <ry-tree>
 *   <ry-tree-item label="src" open>
 *     <ry-tree-item label="app" open>
 *       <ry-tree-item label="layout.tsx"></ry-tree-item>
 *     </ry-tree-item>
 *   </ry-tree-item>
 * </ry-tree>
 *
 * Drag and drop:
 * <ry-tree draggable>...</ry-tree>
 *
 * JS uses data-ry-target for queries, CSS uses .ry-tree__* for styling.
 */
import { RyElement } from '../core/ry-element.js';
export interface TreeNode {
    label: string;
    children?: TreeNode[];
    open?: boolean;
    selected?: boolean;
}
export declare class RyTree extends RyElement {
    #private;
    setup(): void;
    /** Serialize the current tree state to JSON. */
    toJSON(): TreeNode[];
    /** Alias for toJSON(). */
    get value(): TreeNode[];
    /** Create a tree element from JSON data. */
    static from(data: TreeNode[]): RyTree;
}
export declare class RyTreeItem extends RyElement {
}
//# sourceMappingURL=ry-tree.d.ts.map