TaskBoard - UI Parts

#Usage

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

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

UI parts are normal Vue components rendered inside TaskBoard parts. Copy them into the app, then edit them like project code. The surrounding TaskBoard.Root still owns v-model:tasks, data-key, column-field, selection, drag, collapse, and event payloads; the copied part owns only the visible markup.

#Choose a Layer

Use copied UI parts when the default visual language is close. Use raw slots when the content model is different enough that starting from a copied card would create more code than it saves. In production, teams often start from the copied PrimeOne part, then extract product variants such as compact queue cards or review-dashboard cards.

#Installable Parts

The TaskBoard UI packages include editable parts for:

• basic and advanced card bodies;
• column headers with counts, collapse state, and status accents;
• swimlane row headers;
• swimlane column headers.

After the CLI copies a part, import it from the app-owned location. Slot props are fine for small examples; copied parts can also call context hooks so the parent template stays clean.

<script setup lang="ts">
import { TaskBoard } from '@primeui/vue-taskboard';
import TaskBoardCardUI from '@/components/primeui/taskboard/TaskBoardCardUI.vue';
import TaskBoardColumnHeaderUI from '@/components/primeui/taskboard/TaskBoardColumnHeaderUI.vue';
</script>

<template>
    <TaskBoard.Column value="blocked" label="Blocked">
        <TaskBoard.ColumnHeader>
            <TaskBoardColumnHeaderUI />
        </TaskBoard.ColumnHeader>

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

#App-Owned Boundary

Copied parts may display product fields, badges, avatars, and local controls. They should not calculate drag placement, selection ids, filtered items, collapse state, or workflow validity. Keep those decisions in TaskBoard props, events, composables, and move handlers.

When a copied part needs behavior, read it from the matching context hook. For example, a copied column header can call useTaskBoardColumnContext() and wire its collapse button to toggleCollapse. For right-click menus, listen to @card-context-menu on the root and open the app's menu component from that payload.

#Styling Strategy

PrimeOne parts read @primeui/taskboard-style variables and PrimeUI theme tokens. Tailwind parts keep most styling in utility classes. Both approaches can still use TaskBoard data attributes such as data-column-id, data-task-id, and runtime classes such as p-taskboard-card-selected.

#Visual Parts

The visual parts preview swaps between editable UI-part treatments while the same TaskBoard state, drag, and column behavior remain active. The PrimeOne tab shows the shipped starting point; the other tabs show how an app can keep the engine and replace the visual layer.

#Checklist

• Keep copied parts in app source so product teams can review and change them.
• Read TaskBoard slot props or context hooks inside the copied part; do not fetch task state from global variables inside the visual component.
• Preserve visible selected, dragging, focused, disabled, and filtered states.
• Keep collapse actions wired to TaskBoard helpers and keep right-click menus wired through @card-context-menu.
• Keep copied parts small enough to understand. Move complex app dialogs, menus, and data fetching into app components around TaskBoard events.
• Test light and dark mode if the part ships token-based colors.
• Use Custom Styles when only spacing or color changes; use slots when the markup changes.

#API

Use TaskBoard.ColumnHeader, TaskBoard.ColumnContent, TaskBoard.Card, TaskBoard.SwimlaneHeader, and TaskBoard.SwimlaneColumnHeader with copied UI parts. See Theming for style imports and Slots and Contexts for the payload each part can receive.

#Related Docs

• Compound Components
• Card Slots
• Column Slots
• Data Attributes
• Slots and Contexts
• Theming