@glyphtek/unspecd
Version:
A declarative UI framework for building internal tools and dashboards with TypeScript. Create interactive tables, forms, and dashboards using simple specifications.
35 lines • 1.48 kB
TypeScript
/**
* Display Record Component for Unspec'd Framework
*
* This component renders structured data as key-value pairs based on the
* DisplayRecordContent configuration. It handles data fetching, loading states,
* and error scenarios while providing a clean, styled interface.
*/
import type { DisplayRecordContent } from '../dsl-schema.js';
/**
* Renders a display record component that fetches and displays structured data
* as a formatted key-value list. This component handles the complete lifecycle
* from loading to data display or error handling.
*
* @param content - The DisplayRecordContent configuration specifying data source and display fields
* @param specFunctions - Record of functions available from the ToolSpec
* @param targetElement - The HTML element where the component should be rendered
*
* @example
* ```typescript
* const content: DisplayRecordContent = {
* type: 'displayRecord',
* dataLoader: { functionName: 'getUserProfile' },
* displayConfig: {
* fields: [
* { field: 'name', label: 'Full Name' },
* { field: 'email', label: 'Email Address', formatter: 'lowercase' }
* ]
* }
* };
*
* renderDisplayRecordComponent(content, spec.functions, containerElement);
* ```
*/
export declare function renderDisplayRecordComponent(content: DisplayRecordContent, specFunctions: Record<string, (params: any) => Promise<any>>, targetElement: HTMLElement): void;
//# sourceMappingURL=display-record.d.ts.map