TaskBoard - Slots and Contexts
Reference TaskBoard slot props and context hooks for custom Vue parts.
#Root and Header
TaskBoard.Root provides board context to every child part. TaskBoard.Header is an app-owned toolbar surface for search controls, filters, export buttons, role controls, or create buttons. Header slot props expose undo and redo helpers; query state stays in the app.
#Column and Card Slots
| Surface | Slot or context data |
|---|---|
TaskBoard.Column | Column value, label, column data, item count, collapse state, toggle helper, visible items, and add helper. |
TaskBoard.ColumnHeader | Column data, item count, collapse state, collapse helper, and drag-start helper. |
TaskBoard.ColumnContent | item, column, isSelected, and isDragging. |
TaskBoard.Card and subparts | Task item, column, selection state, and dragging state. |
TaskBoard.DropIndicator | Target column and insertion index while a card is dragged. |
Custom column-header slots stay mounted for both expanded and collapsed state. Use a dedicated control for collapse and stop pointer events on nested controls that should not start column drag from the header surface.
Use TaskBoard.DropIndicator for custom insertion markers. It keeps the marker as a compound part while TaskBoard still owns the drop target calculation.
#Swimlane Slots
| Surface | Slot or context data |
|---|---|
TaskBoard.SwimlaneHeader | Swimlane data, item count, collapse state, and toggle helper. |
TaskBoard.SwimlaneColumnHeader | Column metadata and item count for the swimlane grid header. |
#Overlay Context
TaskBoard does not own the visible context-menu overlay. Set context-menu, listen to @card-context-menu, and render the app's PrimeVue menu, popover, drawer, or custom overlay from the emitted card and column payload. TaskBoard.DragConfirm exposes pending move state plus confirm and cancel helpers.
#Composables
| Composable | Use |
|---|---|
useTaskBoardContext | Full board context for advanced product-owned parts. |
useTaskBoardColumnContext | Column value, count, collapse state, visible items, and add. |
useTaskBoardCardContext | Current card item, column, selected state, and dragging state. |
useTaskBoardSwimlaneHeaderContext | Swimlane data, item count, collapse state, and toggle helper. |
useTaskBoardSelection | Selected ids, selected cards, and selection methods. |
useTaskBoardHistory | Undo, redo, and history state. |
useTaskBoardAccess | Permission flags and column access helpers. |
useTaskBoardWorkflow | WIP and move validation helpers. |
useTaskBoardDrag | Drag state, target state, preview position, and hidden ids. |
Context hooks follow the compound part boundary. useTaskBoardCardContext() belongs inside TaskBoard.Card or its subparts; useTaskBoardColumnContext() belongs inside TaskBoard.Column; useTaskBoardSwimlaneHeaderContext() belongs inside TaskBoard.SwimlaneHeader. Pass { optional: true } when a shared UI component can render both inside and outside a TaskBoard part.