import { ColumnConfig as BaseColumnConfig, GridConfig as BaseGridConfig, CellRenderContext, ColumnEditorContext, ColumnFieldKey, EmptyContext, HeaderCellContext, HeaderLabelContext, LoadingContext } from '@toolbox-web/grid'; import { Component, VNode } from 'vue'; /** * Vue render function or component for cell rendering. * * Can be either: * - A render function receiving `CellRenderContext` and returning a `VNode` * - A Vue component (SFC or defineComponent) * * @example * ```ts * import type { CellRenderer, ColumnConfig } from '@toolbox-web/grid-vue'; * import StatusBadge from './StatusBadge.vue'; * * // As render function * const statusRenderer: CellRenderer = (ctx) => * h('span', { class: ctx.value }, ctx.value); * * // As Vue component * const columns: ColumnConfig[] = [ * { field: 'status', renderer: StatusBadge }, * ]; * ``` * @since 0.3.0 */ export type CellRenderer = ((ctx: CellRenderContext) => VNode) | Component; /** * Vue render function or component for cell editing. * * Can be either: * - A render function receiving `ColumnEditorContext` and returning a `VNode` * - A Vue component (SFC or defineComponent) * * @example * ```ts * import type { CellEditor, ColumnConfig } from '@toolbox-web/grid-vue'; * * const statusEditor: CellEditor = (ctx) => * h(StatusSelect, { * modelValue: ctx.value, * 'onUpdate:modelValue': ctx.commit, * }); * ``` * @since 0.3.0 */ export type CellEditor = ((ctx: ColumnEditorContext) => VNode) | Component; /** * Column configuration for Vue applications. * * Extends the base ColumnConfig with `renderer` and `editor` properties * that accept Vue components or render functions. * * @example * ```ts * import type { ColumnConfig } from '@toolbox-web/grid-vue'; * import StatusBadge from './StatusBadge.vue'; * * const columns: ColumnConfig[] = [ * { field: 'name', header: 'Name' }, * { * field: 'status', * header: 'Status', * renderer: StatusBadge, * editor: (ctx) => h(StatusSelect, { * modelValue: ctx.value, * 'onUpdate:modelValue': ctx.commit, * }), * }, * ]; * ``` * @since 0.1.0 */ export interface ColumnConfig> extends Omit, 'renderer' | 'editor' | 'headerRenderer' | 'headerLabelRenderer'> { /** * Vue component or render function for custom cell rendering. * Receives CellRenderContext with value, row, column, and indexes. */ renderer?: CellRenderer; /** * Vue component or render function for custom cell editing. * Receives ColumnEditorContext with value, row, commit, and cancel functions. */ editor?: CellEditor; /** * Vue component or render function for custom header cell rendering. * Receives HeaderCellContext with column, value, sortState, filterActive, and helper functions. */ headerRenderer?: ((ctx: HeaderCellContext) => VNode) | Component; /** * Vue component or render function for custom header label rendering. * Receives HeaderLabelContext with column and value. */ headerLabelRenderer?: ((ctx: HeaderLabelContext) => VNode) | Component; } /** * Grid configuration for Vue applications. * * Extends the base GridConfig with Vue-augmented ColumnConfig support. * * @example * ```ts * import type { GridConfig } from '@toolbox-web/grid-vue'; * import { SelectionPlugin } from '@toolbox-web/grid/all'; * * const config: GridConfig = { * columns: [ * { field: 'name', header: 'Name' }, * { * field: 'department', * header: 'Department', * renderer: (ctx) => h('span', { class: 'badge' }, ctx.value), * }, * ], * plugins: [new SelectionPlugin({ mode: 'row' })], * }; * ``` * @since 0.1.0 */ export interface GridConfig> extends Omit, 'columns' | 'loadingRenderer' | 'emptyRenderer'> { /** * Column definitions with Vue renderer/editor support. */ columns?: ColumnConfig[]; /** * Custom loading renderer - can be: * - A vanilla function `(ctx: LoadingContext) => HTMLElement | string` * - A Vue component with a `size` prop * - A Vue render function `(ctx: LoadingContext) => VNode` */ loadingRenderer?: BaseGridConfig['loadingRenderer'] | ((ctx: LoadingContext) => VNode) | Component; /** * Custom empty-state renderer shown when the grid has no rows and is not * loading. Can be: * - A vanilla function `(ctx: EmptyContext) => HTMLElement | string` * - A Vue component receiving `sourceRowCount` and `filteredOut` props * - A Vue render function `(ctx: EmptyContext) => VNode` * * Set explicitly to `null` to suppress the built-in default message. */ emptyRenderer?: BaseGridConfig['emptyRenderer'] | ((ctx: EmptyContext) => VNode) | Component; } //# sourceMappingURL=vue-column-config.d.ts.map