@rokkit/ui 1.0.0-next.98 → 1.0.1

package/src/components/Stepper.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import { messages } from '@rokkit/states'
+
+	interface StepperStep {
+		/** Step label (shown below circle) */
+		text: string
+		/** Short text inside circle (default: step number) */
+		label?: string
+		/** Step is finished (shows checkmark) */
+		completed?: boolean
+		/** Step cannot be navigated to */
+		disabled?: boolean
+		/** Number of sub-stages within this step (default: 1) */
+		stages?: number
+	}
+
+	interface StepperIcons {
+		/** Icon class for check/completed state */
+		check?: string
+	}
+
+	interface StepperProps {
+		/** Array of step definitions */
+		steps?: StepperStep[]
+		/** Current step index (bindable) */
+		current?: number
+		/** Current sub-stage within step (bindable, 0-based) */
+		currentStage?: number
+		/** Only allow clicking completed steps + first incomplete */
+		linear?: boolean
+		/** Layout orientation */
+		orientation?: 'horizontal' | 'vertical'
+		/** Custom icons */
+		icons?: StepperIcons
+		/** Callback when a step or dot is clicked */
+		onclick?: (step: number, stage?: number) => void
+		/** Content snippet rendered below the stepper */
+		content?: Snippet<[StepperStep, number]>
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const defaultIcons: StepperIcons = {
+		check: DEFAULT_STATE_ICONS.action.check
+	}
+
+	let {
+		steps = [],
+		current = $bindable(0),
+		currentStage = $bindable(0),
+		linear = false,
+		orientation = 'horizontal',
+		label = messages.stepper.label,
+		icons: userIcons,
+		onclick,
+		content,
+		class: className = ''
+	}: StepperProps & { label?: string } = $props()
+
+	const icons = $derived<StepperIcons>({ ...defaultIcons, ...userIcons })
+
+	/**
+	 * Whether a step can be clicked
+	 */
+	function isClickable(index: number): boolean {
+		const step = steps[index]
+		if (step.disabled) return false
+		if (!linear) return true
+		// Linear mode: allow completed steps and the first incomplete step
+		if (step.completed) return true
+		// First incomplete step = first step where index >= first non-completed
+		const firstIncomplete = steps.findIndex((s) => !s.completed)
+		return index === firstIncomplete
+	}
+
+	/**
+	 * Whether the connector line before step N should look "completed"
+	 */
+	function isConnectorCompleted(index: number): boolean {
+		return index > 0 && Boolean(steps[index - 1]?.completed)
+	}
+
+	/**
+	 * Handle step circle click
+	 */
+	function handleStepClick(index: number) {
+		if (!isClickable(index)) return
+		current = index
+		currentStage = 0
+		onclick?.(index)
+	}
+
+	/**
+	 * Handle sub-stage dot click
+	 */
+	function handleDotClick(stepIndex: number, stageIndex: number) {
+		if (!isClickable(stepIndex)) return
+		current = stepIndex
+		currentStage = stageIndex
+		onclick?.(stepIndex, stageIndex)
+	}
+</script>
+
+<div
+	data-stepper
+	data-orientation={orientation}
+	class={className || undefined}
+	role="group"
+	aria-label={label}
+>
+	{#each steps as step, index (index)}
+		<!-- Connector line before step (except first) -->
+		{#if index > 0}
+			<div
+				data-stepper-connector
+				data-completed={isConnectorCompleted(index) || undefined}
+				aria-hidden="true"
+			></div>
+		{/if}
+
+		<!-- Step -->
+		<div
+			data-stepper-step
+			data-completed={step.completed || undefined}
+			data-active={index === current || undefined}
+			data-disabled={step.disabled || undefined}
+		>
+			<button
+				type="button"
+				data-stepper-circle
+				disabled={!isClickable(index)}
+				aria-label="{step.text}{step.completed ? ' (completed)' : ''}"
+				aria-current={index === current ? 'step' : undefined}
+				onclick={() => handleStepClick(index)}
+			>
+				{#if step.completed}
+					<span data-stepper-check-icon class={icons.check} aria-hidden="true"></span>
+				{:else}
+					{step.label ?? index + 1}
+				{/if}
+			</button>
+
+			<span data-stepper-label>{step.text}</span>
+
+			<!-- Sub-stage dots -->
+			{#if step.stages && step.stages > 1}
+				<div data-stepper-dots aria-label="Sub-stages for {step.text}">
+					{#each Array(step.stages) as _, stageIndex (stageIndex)}
+						<button
+							type="button"
+							data-stepper-dot
+							data-active={(index === current && stageIndex === currentStage) || undefined}
+							data-completed={step.completed ||
+								(index === current && stageIndex < currentStage) ||
+								undefined}
+							disabled={!isClickable(index)}
+							aria-label="Stage {stageIndex + 1}"
+							onclick={() => handleDotClick(index, stageIndex)}
+						></button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
+
+	<!-- Content area -->
+	{#if content && steps[current]}
+		<div data-stepper-content>
+			{@render content(steps[current], current)}
+		</div>
+	{/if}
+</div>

package/src/components/Swatch.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { Wrapper, ProxyTree, messages } from '@rokkit/states'
+	import { Navigator } from '@rokkit/actions'
+
+	let {
+		options = [],
+		fields: userFields = {},
+		value = $bindable(),
+		multiple = false,
+		shape = 'square',
+		size = 'md',
+		disabled = false,
+		label = messages.swatch?.label ?? 'Select',
+		class: className = '',
+		onchange,
+		item: itemSnippet,
+		..._rest
+	} = $props()
+
+	const proxyTree = $derived(new ProxyTree(options, userFields))
+	const wrapper = $derived(new Wrapper(proxyTree, { onselect: handleSelect }))
+
+	let containerRef = $state<HTMLElement | null>(null)
+
+	$effect(() => {
+		if (!containerRef) return
+		const nav = new Navigator(containerRef, wrapper, { orientation: 'horizontal' })
+		return () => nav.destroy()
+	})
+
+	$effect(() => {
+		wrapper.moveToValue(value)
+	})
+
+	function isSelected(proxy) {
+		if (multiple && Array.isArray(value)) return value.includes(proxy.value)
+		return proxy.value === value
+	}
+
+	function toggleMultiValue(extracted, original) {
+		const arr = Array.isArray(value) ? [...value] : []
+		const idx = arr.indexOf(extracted)
+		if (idx >= 0) arr.splice(idx, 1)
+		else arr.push(extracted)
+		value = arr
+		onchange?.(value, original)
+	}
+
+	function selectSingleValue(extracted, original) {
+		if (extracted === value) return
+		value = extracted
+		onchange?.(extracted, original)
+	}
+
+	function handleSelect(extracted, proxy) {
+		if (proxy.disabled || disabled) return
+		if (multiple) toggleMultiValue(extracted, proxy.original)
+		else selectSingleValue(extracted, proxy.original)
+	}
+</script>
+
+<div
+	bind:this={containerRef}
+	data-swatch
+	data-swatch-size={size}
+	data-swatch-shape={shape}
+	data-swatch-disabled={disabled || undefined}
+	data-swatch-multiple={multiple || undefined}
+	role={multiple ? 'group' : 'radiogroup'}
+	aria-label={label}
+	aria-disabled={disabled || undefined}
+	class={className || undefined}
+>
+	{#each wrapper.flatView as node (node.key)}
+		{@const proxy = node.proxy}
+		{@const sel = isSelected(proxy)}
+		{@const fill = proxy.get(userFields.fill ?? 'fill')}
+		{@const stroke = proxy.get(userFields.stroke ?? 'stroke')}
+		<button
+			type="button"
+			data-swatch-item
+			data-path={node.key}
+			data-selected={sel || undefined}
+			data-disabled={proxy.disabled || undefined}
+			role={multiple ? 'checkbox' : 'radio'}
+			aria-checked={sel}
+			aria-label={proxy.label}
+			title={proxy.label}
+			disabled={proxy.disabled || disabled}
+			style={fill ? `--swatch-fill:${fill};--swatch-stroke:${stroke ?? fill}` : undefined}
+		>
+			{#if itemSnippet}
+				{@render itemSnippet(proxy, sel)}
+			{:else if shape === 'circle'}
+				<span data-swatch-circle></span>
+			{:else}
+				<span data-swatch-square></span>
+			{/if}
+		</button>
+	{/each}
+</div>

package/src/components/Switch.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { SwitchProps, SwitchItem } from '../types/switch.js'
+	import { ProxyItem } from '@rokkit/states'
+
+	const DEFAULT_OPTIONS: [SwitchItem, SwitchItem] = [false, true]
+
+	let {
+		options = DEFAULT_OPTIONS,
+		fields: userFields,
+		value = $bindable(),
+		onchange,
+		showLabels = false,
+		size = 'md',
+		disabled = false,
+		class: className = ''
+	}: SwitchProps = $props()
+
+	let offProxy = $derived(new ProxyItem(options[0], userFields))
+	let onProxy = $derived(new ProxyItem(options[1], userFields))
+	let isChecked = $derived(value === onProxy.value)
+	let currentProxy = $derived(isChecked ? onProxy : offProxy)
+
+	function toggle() {
+		if (disabled) return
+		const next = isChecked ? offProxy : onProxy
+		const nextValue = next.value
+		value = nextValue
+		onchange?.(nextValue, next.original as SwitchItem)
+	}
+
+	function shouldToggle(key: string): boolean {
+		if (key === ' ' || key === 'Enter') return true
+		if (key === 'ArrowRight') return !isChecked
+		if (key === 'ArrowLeft') return isChecked
+		return false
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (disabled) return
+		if (shouldToggle(event.key)) {
+			event.preventDefault()
+			toggle()
+		}
+	}
+</script>
+
+<button
+	type="button"
+	role="switch"
+	data-switch
+	data-switch-size={size}
+	data-switch-disabled={disabled || undefined}
+	aria-checked={isChecked}
+	aria-label={currentProxy.label || undefined}
+	title={currentProxy.get('subtext') ?? currentProxy.label ?? undefined}
+	{disabled}
+	class={className || undefined}
+	onclick={toggle}
+	onkeydown={handleKeyDown}
+>
+	<span data-switch-track>
+		<span data-switch-thumb>
+			{#if currentProxy.get('icon')}
+				<span data-switch-icon class={currentProxy.get('icon')} aria-hidden="true"></span>
+			{/if}
+		</span>
+	</span>
+	{#if showLabels && currentProxy.label}
+		<span data-switch-label>{currentProxy.label}</span>
+	{/if}
+</button>

package/src/components/Table.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+	import type { TableProps, TableColumn, TableSortIcons } from '../types/table.js'
+	import { defaultTableSortIcons } from '../types/table.js'
+	import { TableController, messages } from '@rokkit/states'
+	import { navigator } from '@rokkit/actions'
+	import { untrack } from 'svelte'
+
+	let {
+		data = [],
+		columns: userColumns,
+		value,
+		values = $bindable<unknown[]>([]),
+		selectable = 'single' as 'single' | 'multi' | false,
+		caption,
+		size = 'md',
+		striped = false,
+		responsive = false,
+		disabled = false,
+		fields: userFields,
+		onselect,
+		onsort,
+		class: className = '',
+		icons: userIcons,
+		header: headerSnippet,
+		row: rowSnippet,
+		cell: cellSnippet,
+		empty: emptySnippet
+	}: TableProps = $props()
+
+	const icons = $derived<TableSortIcons>({ ...defaultTableSortIcons, ...userIcons })
+
+	// ─── Controller ─────────────────────────────────────────────────
+
+	let controller = untrack(
+		() =>
+			new TableController(data, {
+				columns: userColumns,
+				fields: userFields,
+				value,
+				multiselect: selectable === 'multi'
+			})
+	)
+
+	// Sync values binding from controller selection in multi-select mode
+	$effect(() => {
+		if (selectable === 'multi') {
+			values = controller.selected.slice()
+		}
+	})
+	let tableRef = $state<HTMLElement | null>(null)
+
+	// Sync data changes to controller
+	$effect(() => {
+		controller.update(data)
+	})
+
+	// Sync columns changes
+	$effect(() => {
+		if (userColumns) {
+			controller.columns = userColumns.map((c) => ({
+				sortable: true,
+				sorted: 'none',
+				...c
+			}))
+		}
+	})
+
+	// ─── Focus management ───────────────────────────────────────────
+
+	function focusByKey(el: HTMLElement, key: string) {
+		const target = el.querySelector(`[data-path="${key}"]`) as HTMLElement | null
+		if (target && target !== document.activeElement) {
+			target.focus()
+			target.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })
+		}
+	}
+
+	$effect(() => {
+		if (!tableRef) return
+		const el = tableRef
+
+		function onAction(event: Event) {
+			const detail = (event as CustomEvent).detail
+			if (detail.name === 'move') {
+				const key = controller.focusedKey
+				if (key) focusByKey(el, key)
+			}
+			if (detail.name === 'select') handleSelectAction()
+		}
+
+		el.addEventListener('action', onAction)
+		return () => el.removeEventListener('action', onAction)
+	})
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = event.target as HTMLElement
+		if (!target) return
+		const path = target.dataset.path
+		if (path !== undefined) {
+			controller.moveTo(path)
+		}
+	}
+
+	function handleSelectAction() {
+		if (selectable === false || disabled) return
+
+		const key = controller.focusedKey
+		if (!key) return
+
+		const proxy = controller.lookup.get(key)
+		if (!proxy) return
+
+		onselect?.(proxy.value, proxy.value as Record<string, unknown>)
+	}
+
+	// ─── Sort ───────────────────────────────────────────────────────
+
+	function handleSort(event: MouseEvent, column: TableColumn) {
+		if (column.sortable === false || disabled) return
+		controller.sortBy(column.name, event.shiftKey)
+		onsort?.(controller.sortState)
+	}
+
+	// ─── Cell rendering helpers ─────────────────────────────────────
+
+	function getCellValue(row: Record<string, unknown>, column: TableColumn): unknown {
+		const fieldName = column.fields?.text ?? column.name
+		return row[fieldName]
+	}
+
+	function formatCellValue(row: Record<string, unknown>, column: TableColumn): string {
+		const value = getCellValue(row, column)
+		if (column.formatter) return column.formatter(value, row)
+		return value !== null && value !== undefined ? String(value) : ''
+	}
+
+	function getCellIcon(row: Record<string, unknown>, column: TableColumn): string | null {
+		if (!column.fields?.icon) return null
+		const iconValue = row[column.fields.icon]
+		if (!iconValue) return null
+		if (column.iconFormatter) return column.iconFormatter(iconValue)
+		return String(iconValue)
+	}
+</script>
+
+<div
+	bind:this={tableRef}
+	data-table
+	data-size={size}
+	data-selectable={selectable || undefined}
+	data-disabled={disabled || undefined}
+	data-table-responsive={responsive || undefined}
+	class={className || undefined}
+	onfocusin={handleFocusIn}
+	use:navigator={{ wrapper: controller, orientation: 'vertical' }}
+>
+	<table role="grid" aria-label={caption} data-table-striped={striped || undefined}>
+		{#if caption}
+			<caption data-table-caption>{caption}</caption>
+		{/if}
+
+		<thead data-table-header>
+			{#if headerSnippet}
+				{@render headerSnippet(controller.columns, controller.sortState)}
+			{:else}
+				<tr>
+					{#each controller.columns as column (column.name)}
+						<th
+							data-table-header-cell
+							data-column={column.name}
+							data-sortable={column.sortable !== false || undefined}
+							data-sort-order={column.sorted ?? 'none'}
+							scope="col"
+							aria-sort={column.sorted === 'ascending'
+								? 'ascending'
+								: column.sorted === 'descending'
+									? 'descending'
+									: 'none'}
+							style:width={column.width}
+							style:text-align={column.align}
+							onclick={(e) => handleSort(e, column)}
+						>
+							<span data-table-header-text>{column.label ?? column.name}</span>
+							{#if column.sortable !== false}
+								{@const sortIcon = icons[column.sorted ?? 'none'] ?? icons.none}
+								<span data-table-sort-icon class={sortIcon} aria-hidden="true"></span>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			{/if}
+		</thead>
+
+		<tbody data-table-body>
+			{#if controller.data.length === 0}
+				{#if emptySnippet}
+					<tr data-table-empty-row>
+						<td colspan={controller.columns.length}>
+							{@render emptySnippet()}
+						</td>
+					</tr>
+				{:else}
+					<tr data-table-empty-row>
+						<td data-table-empty colspan={controller.columns.length}>{messages.table.empty}</td>
+					</tr>
+				{/if}
+			{:else}
+				{#each controller.data as entry, rowIndex (entry.key)}
+					{@const row = entry.value as Record<string, unknown>}
+					{@const isSelected = controller.selectedKeys.has(entry.key)}
+					{@const isFocused = controller.focusedKey === entry.key}
+					{#if rowSnippet}
+						{@render rowSnippet(row, controller.columns, rowIndex, isSelected)}
+					{:else}
+						<tr
+							data-table-row
+							data-path={entry.key}
+							data-selected={isSelected || undefined}
+							data-focused={isFocused || undefined}
+							aria-selected={isSelected}
+							aria-rowindex={rowIndex + 1}
+							tabindex={isFocused ? 0 : -1}
+						>
+							{#each controller.columns as column (column.name)}
+								{#if cellSnippet}
+									<td data-table-cell data-column={column.name} data-label={column.label ?? column.name} style:text-align={column.align}>
+										{@render cellSnippet(getCellValue(row, column), column, row)}
+									</td>
+								{:else}
+									{@const cellIcon = getCellIcon(row, column)}
+									<td data-table-cell data-column={column.name} data-label={column.label ?? column.name} style:text-align={column.align}>
+										{#if cellIcon}
+											<span data-cell-icon class={cellIcon} aria-hidden="true"></span>
+										{/if}
+										<span data-cell-value>{formatCellValue(row, column)}</span>
+									</td>
+								{/if}
+							{/each}
+						</tr>
+					{/if}
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>