PipelineBoard

Horizontal sales pipeline: each stage becomes a KanbanColumn filled with DealCard props. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue
import { UiPipelineBoard } from '@ziyarago/ui/vue'

Drag cards between stages (onMove fires with { id, from, to })

New1
Group of 12
34 000 SAR
Probability20%
TTimurMar 20
Quote sent2
Hajj family 6
58 000 SAR
Probability50%
LLayloMar 18
Corporate Umrah
120 000 SAR
Probability40%
TTimurMar 25
Won0
Vue
<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ id: 'd1', title: 'Group of 12', amount: '34 000 SAR', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'quote', title: 'Quote sent', cards: [{ id: 'd2', title: 'Hajj family 6', amount: '58 000 SAR', probability: 50, owner: 'Laylo', due: 'Mar 18' }, { id: 'd3', title: 'Corporate Umrah', amount: '120 000 SAR', probability: 40, owner: 'Timur', due: 'Mar 25' }] }, { id: 'won', title: 'Won', cards: [] }]"
 />

Empty

Vue
<UiPipelineBoard :stages="[]" />

Three stages

New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Quote sent2
Hajj family 6Quote
58 000 SAR
Probability50%
LLayloMar 18
Corporate UmrahQuote
120 000 SAR
Probability40%
TTimurMar 25
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
Vue
<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'quote', title: 'Quote sent', cards: [{ title: 'Hajj family 6', amount: '58 000 SAR', stage: 'Quote', tone: 'warning', probability: 50, owner: 'Laylo', due: 'Mar 18' }, { title: 'Corporate Umrah', amount: '120 000 SAR', stage: 'Quote', tone: 'warning', probability: 40, owner: 'Timur', due: 'Mar 25' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
 />

Sizes

New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
New1
Group of 12New
34 000 SAR
Probability20%
TTimurMar 20
Won1
Family Umrah x5Won
21 500 SAR
Probability100%
LLayloMar 02
Vue
<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
  size="xs"
 />

<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
  size="sm"
 />

<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
  size="md"
 />

<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
  size="lg"
 />

<UiPipelineBoard
  :stages="[{ id: 'new', title: 'New', cards: [{ title: 'Group of 12', amount: '34 000 SAR', stage: 'New', tone: 'info', probability: 20, owner: 'Timur', due: 'Mar 20' }] }, { id: 'won', title: 'Won', cards: [{ title: 'Family Umrah x5', amount: '21 500 SAR', stage: 'Won', tone: 'success', probability: 100, owner: 'Laylo', due: 'Mar 02' }] }]"
  size="xl"
 />

API reference

Horizontally scrolling kanban pipeline of stage columns filled with DealCards.

Props

PropType and valuesDefaultDescription
stages{ id: string | number; title: string; cards: DealCardProps[] }[]'[]'Columns in order; cards take the DealCard props (title, stage, tone, amount, probability, owner, due). The column count badge is cards.length. Give cards an id so onMove can report which one moved (the index is used otherwise).
sizexssmmdlgxl'md'Scales padding, text and avatars.

Events

Vue: @name. React: onName.

moveCalled with { id, from, to } (card id, source stage id, target stage id) when a card is dropped on another stage. The board does not reorder itself: update stages in your state.

Notes

  • Drag and drop is enabled only when a move handler is passed; without it the board renders and behaves as before.
  • Uses HTML5 drag and drop (mouse and desktop browsers); there is no keyboard alternative, so also offer a stage select on the card if you need one.
  • Cards are fixed to DealCard; for custom cards compose KanbanColumn and KanbanCard.