TaskBoard - Card Slots

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';

<TaskBoard.ColumnContent v-slot="{ item, column }">
    <TaskBoard.Card :item="item" :column="column">
        <WorkflowCard />
    </TaskBoard.Card>
</TaskBoard.ColumnContent>

TaskBoard.ColumnContent supplies the visible item and column so TaskBoard.Card can provide card context. Inside WorkflowCard, call useTaskBoardCardContext() to read the item, column, selected state, and dragging state without forwarding props through every layer. The surrounding root still needs stable v-model:tasks, data-key, and column-field props. TaskBoard keeps the wrapper behavior around the slot: focus, selection, drag start, right-click payloads, data attributes, and keyboard handling.

#Choose a Card Shape

Use custom card markup when the item record has product fields the default UI cannot explain. Use Custom Styles when the default card already has the right content and only spacing, color, or density needs to change. Good card slots do not try to be universal; they make the current product workflow easier to scan.

#Small Override

Keep the interactive card wrapper and draw the visible surface inside it.

<TaskBoard.ColumnContent v-slot="{ item, column }">
    <TaskBoard.Card :item="item" :column="column">
        <SupportCard />
    </TaskBoard.Card>
</TaskBoard.ColumnContent>

<script setup lang="ts">
import { useTaskBoardCardContext } from '@primeui/vue-taskboard';

const card = useTaskBoardCardContext();
</script>

<template>
    <article class="support-card" :data-priority="card.item.value.priority" :data-selected="card.isSelected.value || undefined">
        <strong>{{ card.item.value.title }}</strong>
        <span>{{ card.item.value.owner }}</span>
    </article>
</template>

#Slot Data

The same payload is available through useTaskBoardCardContext() after TaskBoard.Card provides card context. Inline templates can still use slot props; extracted components are cleaner with the context hook.

#Card Subparts

Use card subparts when the card has stable regions that different teams may replace independently.

<TaskBoard.Card :item="item" :column="column">
    <TaskBoard.CardHeader>
        <TaskTitle />
    </TaskBoard.CardHeader>
    <TaskBoard.CardContent>
        <TaskMetadata />
    </TaskBoard.CardContent>
    <TaskBoard.CardFooter>
        <TaskActions />
    </TaskBoard.CardFooter>
</TaskBoard.Card>

#State Hooks

Use p-taskboard-card-selected, p-taskboard-card-dragging, and p-taskboard-card-focused for state styling.

Task wrappers also expose data-task-id. Prefer that attribute for tests and scroll helpers. Keep product-only states on your visible card, such as data-priority, data-risk, or data-owner, so selectors stay readable.

#Editing Boundary

Custom card buttons can open an app-owned dialog, duplicate a task, or call a product action. Persist movement through TaskBoard move and reorder events, not from inside the card body. If the card has its own clickable controls, stop propagation only on those controls so the card wrapper can still handle selection and drag gestures elsewhere.

#Issue Card

The issue-card preview uses a compact triage card with priority, owner, and tags. It is intentionally narrow so dense support or engineering queues can keep many cards visible.

#Delivery Card

The delivery-card preview uses the same slot surface for richer progress, comment, file, and owner metadata. It shows a different card shape without changing TaskBoard movement, selection, focus, or context-menu behavior.

#Checklist

• Keep title or another accessible task label visible in every card shape.
• Preserve selected, dragging, focused, and filtered states in the custom visual.
• Keep the drag handle area clear; avoid placing small buttons over the whole card surface.
• Tune each card shape for one workflow. A triage card, delivery card, and approval card should not all expose the same metadata.
• Use TaskBoard.Card when child subparts need item, column, isSelected, or isDragging.
• Use data-task-id for tests and product data attributes for product-specific styling.
• Test compact cards with long titles and dense columns; truncation should look intentional.

#API

Relevant parts include TaskBoard.ColumnContent, TaskBoard.Card, TaskBoard.CardHeader, TaskBoard.CardContent, and TaskBoard.CardFooter. Use @card-context-menu when the visible card should open an app-owned menu. See Slots and Contexts for payloads and Data Attributes for state selectors.

#Related Docs

• Compound Components
• UI Parts
• Column Slots
• Data Attributes
• Slots and Contexts
• Theming