dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
88 lines (87 loc) • 2.6 kB
TypeScript
import { RenderCallbackContent } from '../types/cell-content';
/**
* Options for creating a Svelte cell
*/
export interface SvelteCellOptions {
/**
* Svelte component to render (works with both Svelte 4 and 5)
* - Svelte 4: Class-based component (SvelteComponent)
* - Svelte 5: Function-based component (Component)
*/
component: any;
/**
* Props to pass to the component
*/
props?: Record<string, any>;
/**
* Event listeners to attach to the component
* Uses Svelte's event dispatching system ($on for v4, events option for v5)
* @example
* {
* click: (e) => console.log('clicked', e),
* change: (value) => console.log('changed', value)
* }
*/
on?: Record<string, (...args: any[]) => void>;
/**
* Optional context to pass to the component
* Accepts either a Map or a plain object (converted to Map internally)
*/
context?: Map<any, any> | Record<string, any>;
}
/**
* Create a datatable cell that renders a Svelte component
*
* This helper manages the Svelte component lifecycle, mounting and unmounting
* the component when the cell is added/removed from the table.
*
* Supports both Svelte 4 (class-based) and Svelte 5 (function-based) components
* with automatic version detection.
*
* @param options - Svelte cell options
* @returns Render callback content for the datatable
*
* @example
* ```typescript
* import { createSvelteCell } from 'dap-design-system/helpers/svelte'
* import StatusBadge from './StatusBadge.svelte'
*
* const columns = [
* {
* id: 'status',
* header: 'Status',
* cell: (row) => createSvelteCell({
* component: StatusBadge,
* props: {
* status: row.status,
* variant: 'success'
* },
* on: {
* click: () => console.log('Badge clicked')
* }
* })
* }
* ]
* ```
*/
export declare function createSvelteCell(options: SvelteCellOptions): RenderCallbackContent;
export declare function createSvelteCell(component: any, props?: Record<string, any>): RenderCallbackContent;
/**
* Type helper for creating type-safe cell renderers
*
* @example
* ```typescript
* import type { SvelteCellRenderer } from 'dap-design-system/helpers/svelte'
*
* interface User {
* id: number
* status: string
* }
*
* const statusCell: SvelteCellRenderer<User> = (row) => createSvelteCell({
* component: StatusBadge,
* props: { status: row.status }
* })
* ```
*/
export type SvelteCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;