@rokkit/ui 1.0.0-next.108 → 1.0.0-next.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.108",
+  "version": "1.0.0-next.109",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -32,6 +32,8 @@
     "@rokkit/actions": "latest",
     "@rokkit/core": "latest",
     "@rokkit/states": "latest",
+    "@rokkit/data": "latest",
+    "@rokkit/input": "latest",
     "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",
     "ramda": "^0.30.1"

package/src/Accordion.svelte

@@ -14,6 +14,7 @@
 	import Item from './Item.svelte'
 	import ListBody from './ListBody.svelte'
 
+	const eventNames = ['collapse', 'change', 'expand', 'click', 'select', 'move']
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class]
@@ -35,16 +36,28 @@
 		header = null,
 		footer = null,
 		empty = null,
-		stub = null,
-		extra,
-		...events
+		oncollapse,
+		onexpand,
+		onchange,
+		onselect,
+		onmove,
+		...snippets
 	} = $props()
 
 	let emitter = $derived(
-		createEmitter(events, ['collapse', 'change', 'expand', 'click', 'select', 'move'])
+		createEmitter({ oncollapse, onexpand, onchange, onselect, onmove }, eventNames)
 	)
+	function handleAction(event) {
+		const { name, data } = event.detail
+
+		if (has(name, emitter)) {
+			value = data.value
+			selected = data.selected
+			emitter[name](data)
+		}
+	}
+
 	let wrapper = new NestedController(items, value, fields, {
-		events,
 		multiselect,
 		autoCloseSiblings
 	})
@@ -70,7 +83,7 @@
 			{/if}
 		</rk-list-item>
 	{/if}
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{@const key = `${index}`}
 		{@const expanded = item[derivedFields.expanded]}
 		<div
@@ -92,9 +105,8 @@
 						bind:value
 						fields={fields.fields ?? fields}
 						{selected}
-						{stub}
 						onchange={emitter.change}
-						{extra}
+						{snippets}
 					/>
 				</rk-list>
 			{/if}

package/src/BreadCrumbs.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <rk-crumbs class={classes}>
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{#if index > 0}
 			<span>
 				{#if separator.length === 1}

package/src/Calendar.svelte

@@ -60,14 +60,14 @@
 	</month-year>
 	<cal-body class="flex w-full cursor-pointer flex-col p-1">
 		<days-of-week class="grid grid-cols-7">
-			{#each weekdays as day, index}
+			{#each weekdays as day, index (index)}
 				<p class:weekend={index % 6 === 0}>
 					{day.slice(0, 1)}
 				</p>
 			{/each}
 		</days-of-week>
 		<days-of-month class="grid grid-cols-7 grid-rows-5">
-			{#each days as { day, offset, date, weekend }}
+			{#each days as { day, offset, date, weekend } (date)}
 				{@const start = offset > 0 ? offset : 'auto'}
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<day-of-month

package/src/Carousel.svelte

@@ -33,7 +33,7 @@
 			<p>{value.text}</p>
 		</slide>
 		<dot-nav role="radiogroup">
-			{#each items as item, index}
+			{#each items as item, index (index)}
 				<dot
 					role="radio"
 					aria-checked={currentIndex === index}

package/src/FieldLayout.svelte

@@ -23,7 +23,7 @@
 	<error> Invalid schema. Expected schema to include an 'elements' array. </error>
 {:else}
 	<Wrapper {...wrapperProps}>
-		{#each schema.elements as item}
+		{#each schema.elements as item, index (index)}
 			{@const elementPath = item.key ? [...path, item.key] : path}
 			{@const props = { ...item.props, path: elementPath }}
 			{@const nested = Array.isArray(item.elements) && item.elements.length > 0}

package/src/List.svelte

@@ -30,8 +30,10 @@
 		header,
 		footer,
 		empty,
-		stub,
-		...events
+		onselect,
+		onchange,
+		onmove,
+		...snippets
 	} = $props()
 
 	let selected = $state([])
@@ -46,8 +48,7 @@
 		}
 	}
 
-	let emitter = createEmitter(events, ['select', 'change', 'move'])
-	let extra = omit(['onselect', 'onchange', 'onmove'], events)
+	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
 	let wrapper = new ListController(items, value, fields, { multiSelect })
 </script>
 
@@ -76,9 +77,8 @@
 				{fields}
 				selectedKeys={wrapper.selectedKeys}
 				focusedKey={wrapper.focusedKey}
-				{stub}
 				onchange={emitter.change}
-				{extra}
+				{snippets}
 			/>
 		{/if}
 	</rk-body>

package/src/ListBody.svelte

@@ -11,16 +11,15 @@
 		onchange = () => {},
 		selectedKeys = new SvelteSet(),
 		focusedKey = null,
-		stub = null,
-		extra
+		snippets = {}
 	} = $props()
 	let fm = $derived.by(() => {
 		return new FieldMapper(fields)
 	})
 </script>
 
-{#each items as item, index}
-	{@const template = getSnippet(extra, fm.get('snippet', item, stub))}
+{#each items as item, index (index)}
+	{@const template = getSnippet(snippets, fm.get('snippet', item, 'stub'))}
 	{@const pathKey = getKeyFromPath([...path, index])}
 	{@const props = fm.get('props', item) || {}}
 	<rk-list-item

package/src/MultiSelect.svelte

@@ -36,7 +36,7 @@
 >
 	{#if value.length > 0}
 		<items class="flex flex-wrap">
-			{#each value as item}
+			{#each value as item, index (index)}
 				<Item value={item} {fields} {using} removable on:remove={handleRemove} class="pill" />
 			{/each}
 		</items>

package/src/NestedList.svelte

@@ -42,7 +42,7 @@
 </script>
 
 <rk-nested-list role="tree">
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{@const nodePath = [...path, index]}
 		{@const key = getKeyFromPath(nodePath)}
 		{@const expanded = item[fields.expanded]}

package/src/NestedPaginator.svelte

@@ -1,6 +1,8 @@
 <script>
 	import { defaultFields, flattenNestedList } from '@rokkit/core'
-	import { Item, BreadCrumbs } from '@rokkit/molecules'
+	import Item from './Item.svelte'
+	import BreadCrumbs from './BreadCrumbs.svelte'
+	import Icon from './Icon.svelte'
 	// import { flattenNestedList } from './lib/nested'
 	import { createEventDispatcher } from 'svelte'
 
@@ -47,13 +49,15 @@
 
 	$: flatList = flattenNestedList(items, fields)
 	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Item, ...(using ?? {}) }
 </script>
 
 <pages>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class="arrow-left cursor-pointer" on:click={() => handleNav('previous')} />
+	<Icon
+		name="arrow-left"
+		class="cursor-pointer"
+		label="Previous"
+		onclick={() => handleNav('previous')}
+	/>
 	<BreadCrumbs items={trail} {fields} {using} />
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class="arrow-right cursor-pointer" on:click={() => handleNav('next')} />
+	<Icon name="arrow-right" class="cursor-pointer" onclick={() => handleNav('next')} label="Next" />
 </pages>

package/src/Node.svelte

@@ -41,7 +41,6 @@
 	)
 
 	const template = getSnippet(value[fields.snippet], snippets, stub)
-	$inspect(template)
 </script>
 
 <rk-node
@@ -53,7 +52,7 @@
 	data-depth={path.length}
 >
 	<div class="flex flex-row items-center">
-		{#each types as type}
+		{#each types as type, index (index)}
 			{#if type === 'icon'}
 				<Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
 			{:else}

package/src/PageNavigator.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<nav-pages class="grid grid-cols-3 select-none {className}" tabindex="0">
+<nav-pages class="grid select-none grid-cols-3 {className}" tabindex="0">
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<span
 		class="flex cursor-pointer items-center"
@@ -59,7 +59,7 @@
 	</span>
 	<span class="flex items-center justify-center">
 		<block class="flex items-center">
-			{#each items as item, index}
+			{#each items as item, index (index)}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<pg
 					class:numbers

package/src/ProgressDots.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <span class="progress flex items-center gap-2" class:empty={count === 0}>
-	{#each steps as step}
+	{#each steps as step, index (index)}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<dot
 			class="step flex h-3 w-3 rounded-full border-2 border-neutral-100 bg-neutral-300"

package/src/RadioGroup.svelte

@@ -37,7 +37,7 @@
 	class="flex cursor-pointer select-none flex-col {className}"
 	class:disabled={readOnly}
 >
-	{#each options as item}
+	{#each options as item, index (index)}
 		{@const label = mapping.get('text', item)}
 		{@const itemValue = mapping.get('value', item, label)}
 

package/src/RangeMinMax.svelte

@@ -104,7 +104,7 @@
 		</rk-range-track>
 
 		<rk-ticks style:--count={tickItems.length - 1}>
-			{#each tickItems as { value, label }}
+			{#each tickItems as { value, label }, index (index)}
 				<RangeTick {label} {value} on:click={handleClick} />
 			{/each}
 		</rk-ticks>

package/src/Rating.svelte

@@ -76,7 +76,7 @@
 	{#if name}
 		<input {name} hidden type="number" bind:value min={0} {max} readOnly={disabled} />
 	{/if}
-	{#each stars as selected, index}
+	{#each stars as selected, index (index)}
 		{@const stateIcon = selected ? stateIcons.filled : stateIcons.empty}
 		{@const label = [placeholder, index + 1, 'out of', max].join(' ')}
 		<Icon

package/src/ResponsiveGrid.svelte

@@ -63,7 +63,7 @@
 	class="overflow-hidden {className}"
 	bind:clientWidth={width}
 >
-	{#each items as item, index}
+	{#each items as item, index (index)}
 		{@const segmentClass = 'col-' + (index + 1)}
 		{@const props = mapping.get('props', item, {})}
 		{@const Template = item[mapping.fields.component]}

package/src/SlidingColumns.svelte

@@ -34,7 +34,7 @@
 	class="relative grid h-full w-full overflow-hidden"
 	bind:clientWidth={width}
 >
-	{#each columns as column, index}
+	{#each columns as column, index (index)}
 		{#if index === activeIndex}
 			<rk-segment
 				class="slide absolute h-full w-full {column}"

package/src/Stepper.svelte

@@ -21,11 +21,11 @@
 </script>
 
 <div
-	class="stepper w-full flex flex-col items-center gap-3 border rounded p-8 shadow"
+	class="stepper flex w-full flex-col items-center gap-3 rounded border p-8 shadow"
 	style:--count={data.length}
 >
 	<row>
-		{#each data as { text, completed, active, steps }, stage}
+		{#each data as { text, completed, active, steps }, stage (stage)}
 			<div class="flex flex-col items-center justify-center first:col-start-2">
 				<Stage {text} {completed} {active} on:click={() => handleClick({ stage })} />
 			</div>
@@ -42,10 +42,10 @@
 		{/each}
 	</row>
 	<row>
-		{#each data as { label }, stage}
+		{#each data as { label }, stage (stage)}
 			{#if label}
 				<p
-					class="col-span-3 w-full flex justify-center font-medium leading-loose text-center text-neutral-800"
+					class="col-span-3 flex w-full justify-center text-center font-medium leading-loose text-neutral-800"
 					class:pending={stage > currentStage}
 				>
 					{label}
@@ -57,10 +57,10 @@
 
 <style lang="postcss">
 	.stepper row {
-		@apply w-full grid;
+		@apply grid w-full;
 		grid-template-columns: repeat(var(--count), 2fr 6fr 2fr);
 	}
 	.pending {
-		@apply text-neutral-500 font-light;
+		@apply font-light text-neutral-500;
 	}
 </style>

package/src/Summary.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { defaultMapping } from './constants'
 	import Item from './Item.svelte'
 	/**
 	 * @typedef {Object} Props

package/src/TableCell.svelte

@@ -37,7 +37,7 @@
 <td class={classes}>
 	<rk-cell>
 		{#if path}
-			{#each levels.slice(0, -1) as _}
+			{#each levels.slice(0, -1) as level (level)}
 				<Connector type="empty" />
 			{/each}
 			{#if isParent}

package/src/Tabs.svelte

@@ -71,7 +71,7 @@
 	onremove={handleRemove}
 	onadd={handleAdd}
 >
-	{#each filtered as item, index}
+	{#each filtered as item, index (index)}
 		{@const Template = getSnippet(extra, mapper.get('snippet', item), stub)}
 		<rk-tab>
 			{#if Template}

package/src/TreeTable.svelte

@@ -120,19 +120,19 @@
 	<table class:striped>
 		<thead>
 			<tr>
-				{#each columns as col}
+				{#each columns as col (col.key)}
 					<th>{col.label ?? col.key}</th>
 				{/each}
 			</tr>
 		</thead>
 		<tbody>
-			{#each visible as item, index}
+			{#each visible as item, index (index)}
 				<tr
 					class:cursor-pointer={!item._isParent}
 					aria-current={currentItem === item}
 					onclick={stopPropagation((e) => handleItemClick(e, item))}
 				>
-					{#each columns as col, index}
+					{#each columns as col, index (index)}
 						{@const value = { ...pick(['icon'], col), ...item }}
 						{@const SvelteComponent = mapping.get('component', item)}
 						<td>
@@ -147,7 +147,7 @@
 									<!-- {/if} -->
 								{:else}
 									{#if col.path}
-										{#each item._levels.slice(0, -1) as _}
+										{#each item._levels.slice(0, -1) as _, index (index)}
 											<Connector type="empty" />
 										{/each}
 										{#if item._isParent}

package/src/ValidationReport.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <rk-status-report class={classes}>
-	{#each items as { text, status }}
+	{#each items as { text, status }, index (index)}
 		<rk-message class={status}>
 			<Icon name={icons[status]} />
 			<p>{text}</p>