Kanban

1<script lang="ts">2	import { Kanban, Text, type KanbanColumn, type KanbanMove } from 'omaris';3​4	type Task = { id: string; title: string; owner: string };5​6	let columns = $state<KanbanColumn<Task>[]>([7		{8			id: 'todo',9			title: 'To do',10			items: [11				{ id: 't1', title: 'Rewrite the onboarding email', owner: 'Dara' },12				{ id: 't2', title: 'Audit contrast in dark mode', owner: 'Hana' }13			]14		},15		{16			id: 'doing',17			title: 'In progress',18			tone: 'info',19			limit: 2,20			items: [{ id: 't3', title: 'Keyboard drag for the board', owner: 'Mira' }]21		},22		{23			id: 'done',24			title: 'Done',25			tone: 'success',26			items: [{ id: 't4', title: 'Carousel caption fade', owner: 'Ali' }]27		}28	]);29​30	let last = $state<string | null>(null);31</script>32​33<div class="flex w-full flex-col gap-2">34	<Kanban35		bind:columns36		label={(task) => task.title}37		height="18rem"38		onmove={(move: KanbanMove<Task>) =>39			(last = `${move.item.title}: ${move.from} → ${move.to} @ ${move.toIndex + 1}`)}40	>41		{#snippet card(task: Task)}42			<div class="flex flex-col gap-1">43				<Text variant="body-md">{task.title}</Text>44				<Text variant="label-sm" tone="muted">{task.owner}</Text>45			</div>46		{/snippet}47	</Kanban>48​49	<Text variant="label-sm" tone="muted" data-kanban-readout>50		{last ?? 'Move a card to see the onmove payload.'}51	</Text>52</div>

1<script lang="ts">2	import { Kanban, Text, type KanbanColumn } from 'omaris';3​4	type Ticket = { id: string; title: string; points: number };5​6	let next = 100;7​8	let columns = $state<KanbanColumn<Ticket>[]>([9		{10			id: 'triage',11			title: 'Triage',12			items: [13				{ id: 'k1', title: 'Select clears on blur', points: 2 },14				{ id: 'k2', title: 'Tooltip flips at the edge', points: 1 },15				{ id: 'k3', title: 'Sheet snap points jump', points: 3 }16			]17		},18		{19			id: 'wip',20			title: 'In progress',21			limit: 1,22			items: [23				{ id: 'k4', title: 'Kanban overlap packing', points: 5 },24				{ id: 'k5', title: 'Gauge tick alignment', points: 2 }25			]26		},27		{28			id: 'shipped',29			title: 'Shipped',30			locked: true,31			items: [{ id: 'k6', title: 'Docs demos', points: 8 }]32		}33	]);34​35	function add(columnId: string) {36		columns = columns.map((column) =>37			column.id === columnId38				? {39						...column,40						items: [...column.items, { id: `k${next++}`, title: 'New ticket', points: 1 }]41					}42				: column43		);44	}45</script>46​47<Kanban48	bind:columns49	density="compact"50	columnWidth={220}51	height="18rem"52	addable53	addLabel="Add a ticket"54	onadd={add}55	emptyText="Empty — drop something here"56	class="w-full"57>58	{#snippet card(ticket: Ticket)}59		<div class="flex items-start justify-between gap-2">60			<Text variant="body-sm">{ticket.title}</Text>61			<Text variant="label-sm" tone="muted">{ticket.points}</Text>62		</div>63	{/snippet}64</Kanban>

1<script lang="ts">2	import {3		Avatar,4		Badge,5		Chip,6		IconButton,7		Kanban,8		Menu,9		MenuItem,10		Text,11		type KanbanColumn12	} from 'omaris';13​14	type Priority = 'low' | 'medium' | 'high';15	type Issue = {16		id: string;17		title: string;18		assignee: string;19		labels: string[];20		due: string;21		priority: Priority;22	};23​24	const PRIORITY: Record<Priority, string> = {25		low: 'bg-success',26		medium: 'bg-warning',27		high: 'bg-destructive'28	};29​30	let columns = $state<KanbanColumn<Issue>[]>([31		{32			id: 'backlog',33			title: 'Backlog',34			tone: 'secondary',35			items: [36				{37					id: 'i1',38					title: 'Select clears its value on blur',39					assignee: 'Dara Aziz',40					labels: ['bug'],41					due: 'Fri',42					priority: 'high'43				},44				{45					id: 'i2',46					title: 'Tooltip flips at the viewport edge',47					assignee: 'Hana Karim',48					labels: ['bug', 'a11y'],49					due: 'Mon',50					priority: 'medium'51				}52			]53		},54		{55			id: 'doing',56			title: 'In progress',57			tone: 'info',58			limit: 2,59			items: [60				{61					id: 'i3',62					title: 'Kanban overlap packing',63					assignee: 'Mira Salih',64					labels: ['feature'],65					due: 'Thu',66					priority: 'low'67				}68			]69		},70		{71			id: 'review',72			title: 'In review',73			tone: 'tertiary',74			items: [75				{76					id: 'i4',77					title: 'Gauge tick alignment',78					assignee: 'Ali Hadi',79					labels: ['polish'],80					due: 'Today',81					priority: 'medium'82				}83			]84		}85	]);86​87	function clear(columnId: string) {88		columns = columns.map((column) => (column.id === columnId ? { ...column, items: [] } : column));89	}90</script>91​92<Kanban bind:columns height="20rem" columnWidth={256} class="w-full">93	{#snippet columnActions(column: KanbanColumn<Issue>)}94		<Menu label="{column.title} actions" align="end">95			{#snippet trigger(props)}96				<IconButton size="xs" aria-label="{column.title} actions" {...props}>97					<svg viewBox="0 0 24 24" fill="currentColor">98						<circle cx="12" cy="5" r="1.6" />99						<circle cx="12" cy="12" r="1.6" />100						<circle cx="12" cy="19" r="1.6" />101					</svg>102				</IconButton>103			{/snippet}104			<MenuItem>Rename</MenuItem>105			<MenuItem>Set a limit</MenuItem>106			<MenuItem tone="destructive" onclick={() => clear(column.id)}>Clear column</MenuItem>107		</Menu>108	{/snippet}109​110	{#snippet card(issue: Issue)}111		<div class="flex flex-col gap-2">112			<div class="flex flex-wrap gap-1">113				{#each issue.labels as label (label)}114					<Badge115						size="sm"116						variant="tonal"117						tone={label === 'bug' ? 'destructive' : label === 'a11y' ? 'info' : 'secondary'}118					>119						{label}120					</Badge>121				{/each}122			</div>123			<Text variant="body-md">{issue.title}</Text>124			<div class="flex items-center gap-2">125				<span126					class="size-2 shrink-0 rounded-full {PRIORITY[issue.priority]}"127					role="img"128					aria-label="{issue.priority} priority"129				></span>130				<Chip size="sm" class="pointer-events-none">{issue.due}</Chip>131				<Avatar size="xs" name={issue.assignee} colorize class="ms-auto" />132			</div>133		</div>134	{/snippet}135</Kanban>

1<script lang="ts">2	import { Kanban, Text, latn, type KanbanCardContext, type KanbanColumn } from 'omaris';3​4	type Lead = { id: string; company: string; value: number };5​6	const TINT: Record<string, string> = {7		new: 'bg-primary',8		talking: 'bg-warning',9		won: 'bg-success'10	};11​12	let columns = $state<KanbanColumn<Lead>[]>([13		{ id: 'new', title: 'New', items: [{ id: 'l1', company: 'Karwan Foods', value: 4200 }] },14		{15			id: 'talking',16			title: 'In conversation',17			items: [18				{ id: 'l2', company: 'Zagros Cafe', value: 1800 },19				{ id: 'l3', company: 'Tigris Grill', value: 9600 }20			]21		},22		{ id: 'won', title: 'Won', items: [{ id: 'l4', company: 'Sulay Bakery', value: 3100 }] }23	]);24</script>25​26<Kanban27	bind:columns28	key={(lead) => lead.id}29	height="auto"30	columnWidth="14rem"31	classes={{32		root: 'h-64 rounded-shape-lg bg-surface-container-low p-2',33		column: 'rounded-shape-md bg-surface-container-lowest',34		card: 'rounded-shape-md shadow-1'35	}}36	class="w-full"37>38	{#snippet header(column: KanbanColumn<Lead>)}39		<div class="flex items-center gap-2 px-3 py-2">40			<span class="size-2 rounded-full {TINT[column.id]}" aria-hidden="true"></span>41			<Text variant="title-sm">{column.title}</Text>42			<Text variant="label-sm" tone="muted" class="ms-auto">43				${column.items.reduce((sum, lead) => sum + lead.value, 0).toLocaleString(undefined, latn())}44			</Text>45		</div>46	{/snippet}47​48	{#snippet card(lead: Lead, ctx: KanbanCardContext<Lead>)}49		<div class="flex flex-col gap-1">50			<Text variant="body-md">{lead.company}</Text>51			<Text variant="label-sm" tone={ctx.dragging ? 'primary' : 'muted'}>52				${lead.value.toLocaleString(undefined, latn())}53			</Text>54		</div>55	{/snippet}56</Kanban>