dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
82 lines (81 loc) • 2.16 kB
TypeScript
import { Component, VNode } from 'vue';
import { RenderCallbackContent } from '../types/cell-content';
/**
* Options for creating a Vue cell
*/
export interface VueCellOptions {
/**
* Vue component to render
*/
component: Component;
/**
* Props to pass to the component
*/
props?: Record<string, any>;
/**
* Event listeners to attach to the component
* @example
* {
* onClick: (e) => console.log('clicked', e),
* onUpdate: (value) => console.log('updated', value)
* }
*/
on?: Record<string, (...args: any[]) => void>;
/**
* Children/slots to pass to the component
*/
children?: VNode | VNode[] | string;
}
/**
* Create a datatable cell that renders a Vue component
*
* This helper manages the Vue app lifecycle, mounting and unmounting
* the component when the cell is added/removed from the table.
*
* @param options - Vue cell options
* @returns Render callback content for the datatable
*
* @example
* ```typescript
* import { createVueCell } from 'dap-design-system/helpers/vue'
* import StatusBadge from './StatusBadge.vue'
*
* const columns = [
* {
* id: 'status',
* header: 'Status',
* cell: (row) => createVueCell({
* component: StatusBadge,
* props: {
* status: row.status,
* variant: 'success'
* },
* on: {
* onClick: () => console.log('Badge clicked')
* }
* })
* }
* ]
* ```
*/
export declare function createVueCell(options: VueCellOptions): RenderCallbackContent;
export declare function createVueCell(component: Component, props?: Record<string, any>): RenderCallbackContent;
/**
* Type helper for creating type-safe cell renderers
*
* @example
* ```typescript
* import type { VueCellRenderer } from 'dap-design-system/helpers/vue'
*
* interface User {
* id: number
* status: string
* }
*
* const statusCell: VueCellRenderer<User> = (row) => createVueCell({
* component: StatusBadge,
* props: { status: row.status }
* })
* ```
*/
export type VueCellRenderer<TData = any> = (row: TData) => RenderCallbackContent;