Element: #760 Leads pipeline (display/kanban) What it shows: A three-stage leads pipeline board: status-coloured columns that scroll on their own, cards that move between columns by drag, keyboard or a Move to menu, and a New column that loads more pages. When to use: CRM pipelines, ticket boards and any stage board whose columns are ordered by the server and keep loading as you scroll. Spec: - ` l.id} {onmove} {onloadmore} label="Leads pipeline">` inside `
` with `{#snippet card(lead)}` for the card content - `.kb-demo { display: flex; height: 28rem; }` is the board-height parent - Each column is `{ id: 'new', label: 'New', color: 'var(--ca-info-main)', total: 24, hasMore: true, items`; the New column has 24 loaded-on-demand leads - `onmove` receives `{ card, from, to }`; the default whole-column drop makes the target index 0, so the handler prepends the card with `dst.items = [card, ...dst.items]` - `onloadmore` sets `col.loadingMore` to show skeleton cards, then appends the next page - `{#snippet empty(column, { canMove })}` fills the empty Won column Names: Kanban board | Pipeline board | Quadro de funil | Tablero de embudo Tags: kanban, board, pipeline, crm, drag, columns, infinite-scroll, mobile Needs: @codeatlasdev/ui@4.6.0 Components: Kanban Live demo: https://ui.codeatlas.com.br/docs/display/kanban#leads-pipeline
l.id} {onmove} {onloadmore} label="Leads pipeline"> {#snippet card(lead)} {lead.name} {lead.company} {/snippet} {#snippet empty(column, { canMove })} {canMove ? `Drop a lead here to win it` : `Nothing in ${column.label}`} {/snippet}