# GridAdapter

> _Since v0.3.0_

Framework adapter that enables Vue 3 component integration
with the grid's light DOM configuration API.

## Usage

The adapter is automatically registered when using the TbwGrid component.
For advanced use cases, you can manually register:

```ts
import { GridElement } from '@toolbox-web/grid';
import { GridAdapter } from '@toolbox-web/grid-vue';

// One-time registration
GridElement.registerAdapter(new GridAdapter());
```

## Declarative usage with TbwGrid:

```vue
<TbwGrid :rows="data" :grid-config="config">
  <TbwGridColumn field="status">
    <template #cell="{ value, row }">
      <StatusBadge :value="value" />
    </template>
  </TbwGridColumn>
</TbwGrid>
```

## Methods

### processGridConfig()

Processes a Vue grid configuration, converting Vue component references
and VNode-returning render functions to DOM-returning functions.

This is idempotent — already-processed configs pass through safely.

```ts
processGridConfig(config: GridConfig<TRow>): GridConfig<TRow>
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `config` | <code><a href="/grid/vue/api/types/gridconfig/">GridConfig</a>&lt;TRow&gt;</code> | Vue grid config with possible component/VNode references |

#### Returns

`GridConfig<TRow>` - Processed config with DOM-returning functions

***

### processConfig()

FrameworkAdapter.processConfig implementation.
Called automatically by the grid's `set gridConfig` setter.

```ts
processConfig(config: GridConfig<TRow>): GridConfig<TRow>
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `config` | <code><a href="/grid/vue/api/types/gridconfig/">GridConfig</a>&lt;TRow&gt;</code> |  |

***

### processTypeDefaults()

Processes typeDefaults, converting Vue component/VNode references
to DOM-returning functions.

```ts
processTypeDefaults(typeDefaults: Record<string, TypeDefault<TRow>>): Record<string, BaseTypeDefault<TRow>>
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `typeDefaults` | <code>Record&lt;string, <a href="/grid/vue/api/types/typedefault/">TypeDefault</a>&lt;TRow&gt;&gt;</code> | Vue type defaults with possible component references |

#### Returns

`Record<string, BaseTypeDefault<TRow>>` - Processed TypeDefault record

***

### processColumn()

Processes a single column configuration, converting Vue component references
and VNode-returning render functions to DOM-returning functions.

```ts
processColumn(column: ColumnConfig<TRow>): ColumnConfig<TRow>
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `column` | <code><a href="/grid/vue/api/types/columnconfig/">ColumnConfig</a>&lt;TRow&gt;</code> | Vue column config |

#### Returns

`ColumnConfig<TRow>` - Processed ColumnConfig with DOM-returning functions

***

### setTypeDefaults()

Sets the type defaults map for this adapter.
Called by TbwGrid when it receives type defaults from context.

```ts
setTypeDefaults(defaults: TypeDefaultsMap | null): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `defaults` | <code><a href="/grid/vue/api/types/typedefaultsmap/">TypeDefaultsMap</a> &#124; unknown</code> |  |

***

### canHandle()

Determines if this adapter can handle the given element.
Checks if a renderer or editor is registered for this element.

```ts
canHandle(element: HTMLElement): boolean
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### createRenderer()

Creates a view renderer function that renders a Vue component
and returns its container DOM element.

```ts
createRenderer(element: HTMLElement): ColumnViewRenderer<TRow, TValue> | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### createEditor()

Creates an editor spec that renders a Vue component for cell editing.
Returns a function that creates the editor DOM element.

```ts
createEditor(element: HTMLElement): ColumnEditorSpec<TRow, TValue> | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### createHeaderRenderer()

Creates a DOM-returning header renderer for a `<tbw-grid-column>`
element that has registered a slot-based renderer via `#header`.
Returns undefined when no slot was registered, letting the grid
fall back to its built-in header.

Reuses the same teleport/VNode infrastructure as the config-path
`headerRenderer` wrapper.

```ts
createHeaderRenderer(element: HTMLElement): (ctx: HeaderCellContext<TRow>) => HTMLElement | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### createHeaderLabelRenderer()

Creates a DOM-returning header *label* renderer for a `<tbw-grid-column>`
element that has registered a slot-based renderer via `#headerLabel`.
Returns undefined when no slot was registered.

```ts
createHeaderLabelRenderer(element: HTMLElement): (ctx: HeaderLabelContext<TRow>) => HTMLElement | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### parseDetailElement()

Framework adapter hook called by MasterDetailPlugin during attach().
Implementation is installed by `@toolbox-web/grid-vue/features/master-detail`
via `registerDetailRendererBridge`. Returns undefined if the
master-detail feature has not been imported, or if no TbwGridDetailPanel
was registered for this grid.

```ts
parseDetailElement(detailElement: Element): (row: TRow, rowIndex: number) => HTMLElement | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `detailElement` | <code>Element</code> |  |

***

### parseResponsiveCardElement()

Framework adapter hook called by ResponsivePlugin during attach().
Implementation is installed by `@toolbox-web/grid-vue/features/responsive`
via `registerResponsiveCardRendererBridge`. Returns undefined if
the responsive feature has not been imported, or if no TbwGridResponsiveCard
was registered for this grid.

```ts
parseResponsiveCardElement(cardElement: Element): (row: TRow, rowIndex: number) => HTMLElement | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `cardElement` | <code>Element</code> |  |

***

### createToolPanelRenderer()

Framework adapter hook called by the grid core when a `<tbw-grid-tool-panel>`
needs a renderer. Returns a function that renders Vue tool panel content
into the shell's accordion container.

Uses a wrapper-detach pattern for the cleanup callback: the cleanup
synchronously removes a wrapper div from the container, so the shell's
subsequent `contentArea.innerHTML = ''` (during accordion collapse) sees
an empty container and cannot disturb Vue's still-attached teleport
children. Vue then unmounts asynchronously on the next microtask
against the orphaned wrapper without throwing `NotFoundError`.

```ts
createToolPanelRenderer(element: HTMLElement): (container: HTMLElement) => void | () => void | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `element` | <code>HTMLElement</code> |  |

***

### getTypeDefault()

Gets type-level defaults from the type defaults map.

This enables application-wide type defaults configured via GridTypeProvider.
The returned TypeDefault contains renderer/editor functions that render
Vue components into the grid's cells.

```ts
getTypeDefault(type: string, _gridEl: HTMLElement): TypeDefault<TRow> | undefined
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `type` | <code>string</code> |  |
| `_gridEl` | <code>HTMLElement</code> |  |

***

### cleanup()

Cleanup all teleport entries.

```ts
cleanup(): void
```

***

### unmount()

Unmount a specific container (e.g., detail panel, tool panel).
Currently a no-op for teleport-based rendering — the TeleportManager's
prune pass handles disconnected containers automatically.

```ts
unmount(_container: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `_container` | <code>HTMLElement</code> |  |

***

### releaseCell()

Called when a cell's content is about to be wiped.
Destroys editor teleports whose container is inside the cell.

```ts
releaseCell(cellEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `cellEl` | <code>HTMLElement</code> |  |

***

### beginBatch()

Open a teardown batch. No-op for the Vue adapter — teleport removals
are already coalesced into a single reactive `Map` swap per microtask
by the TeleportManager (see `teleport-manager.ts`). Implemented for
FrameworkAdapter parity so grid core's bulk-teardown wrappers
work uniformly across adapters.

```ts
beginBatch(_gridEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `_gridEl` | <code>HTMLElement</code> |  |

***

### endBatch()

Close a teardown batch opened by beginBatch. No-op for Vue —
see beginBatch.

```ts
endBatch(_gridEl: HTMLElement): void
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `_gridEl` | <code>HTMLElement</code> |  |

***