@rokkit/ui 1.0.0-next.113 → 1.0.0-next.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.0.0-next.113",
+  "version": "1.0.0-next.114",
   "description": "Organisms are larger, more complex building blocks that are composed of multiple molecules",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -20,7 +20,6 @@
     "dist/**/*.d.ts"
   ],
   "exports": {
-    "./src": "./src",
     "./package.json": "./package.json",
     "./utils": "./src/lib/index.js",
     ".": {

package/src/Connector.svelte

@@ -12,10 +12,11 @@
 
 <span
 	class="grid h-full w-4 min-w-4 grid-cols-2 grid-rows-2"
-	class:line-empty={validatedType === 'empty'}
-	class:line-child={validatedType === 'child'}
-	class:line-sibling={validatedType === 'sibling'}
-	class:line-last={validatedType === 'last'}
+	data-tag-tree-line
+	data-tag-line-empty={validatedType === 'empty' ? '' : undefined}
+	data-tag-line-child={validatedType === 'child' ? '' : undefined}
+	data-tag-line-sibling={validatedType === 'sibling' ? '' : undefined}
+	data-tag-line-last={validatedType === 'last' ? '' : undefined}
 >
 	{#if validatedType === 'last'}
 		{#if rtl}

package/src/DropSearch.svelte

@@ -24,7 +24,7 @@
 	}
 </script>
 
-<Select {name} bind:value options={filtered} {...restProps} {fields} onselect={handleSelect}>
+<Select {name} bind:value bind:options={filtered} {...restProps} {fields} onselect={handleSelect}>
 	<span class="flex flex-grow">
 		<input
 			type="text"

package/src/Icon.svelte

@@ -6,7 +6,7 @@
 	 * @property {any} name
 	 * @property {any} [state]
 	 * @property {string} [size]
-	 * @property {string} [role]
+	 * @property {'img'|'button'|'checkbox'|'option'} [role]
 	 * @property {any} [label]
 	 * @property {boolean} [disabled]
 	 * @property {number} [tabindex]
@@ -19,6 +19,7 @@
 
 	/** @type {Props} */
 	let {
+		ref = $bindable(),
 		class: classes = '',
 		name,
 		state = null,
@@ -37,7 +38,7 @@
 		e.preventDefault()
 
 		if (!disabled) {
-			if (role === 'checkbox' || role === 'option') {
+			if (isCheckbox) {
 				checked = !checked
 				emitter?.change(checked)
 			}
@@ -45,6 +46,7 @@
 		}
 	}
 
+	let isCheckbox = $derived(role === 'checkbox' || role === 'option')
 	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
 	let ariaChecked = $derived(
 		['checkbox', 'option'].includes(role) ? (checked !== null ? checked : false) : null
@@ -53,18 +55,19 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <rk-icon
+	bind:this={ref}
+	data-tag-icon
+	data-state={state}
+	data-tag-button={role === 'button' ? true : undefined}
+	data-tag-checkbox={isCheckbox ? true : undefined}
+	data-size={size}
+	data-disabled={disabled}
 	class={classes}
-	class:small={size === 'small'}
-	class:medium={size === 'medium'}
-	class:large={size === 'large'}
-	class:disabled
 	{role}
 	aria-label={label ?? name}
 	aria-checked={ariaChecked}
 	onclick={handleClick}
 	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
-	data-state={state}
-	data-tag="icon"
 	tabindex={validatedTabindex}
 	onmouseenter={emitter.mouseenter}
 	onnmouseleave={emitter.nmouseleave}

package/src/Link.svelte

@@ -12,7 +12,7 @@
 
 	/** @type {Props} */
 	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
-	let url = $derived(mapping.get('url', value, href))
+	let url = $derived(mapping.get('href', value, href))
 	let props = $derived({ ...mapping.get('props', value, {}), ...rest })
 </script>
 

package/src/ListEditor.svelte

@@ -32,7 +32,7 @@
 <list-editor class="flex {className}">
 	<List
 		bind:items={value}
-		value={item}
+		bind:value={item}
 		{fields}
 		using={registry.components}
 		on:select={handleSelect}

package/src/Select.svelte

@@ -8,21 +8,22 @@
 	// import ListItems from './ListItems.svelte'
 	import Item from './Item.svelte'
 
-	let className = ''
-	export { className as class }
-	export let name = null
-	export let options = []
-	/** @type {import('@rokkit/core').FieldMapping} */
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let placeholder = ''
+	let {
+		class: className = '',
+		name = null,
+		options = $bindable([]),
+		fields,
+		using = {},
+		value = $bindable(null),
+		placeholder = '',
+		currentItem
+	} = $props()
 
-	let activeIndex
-	let open = false
-	let offsetTop
+	let activeIndex = $state(-1)
+	let open = $state(false)
+	// let offsetTop
 	let icons = defaultStateIcons.selector
-	let activeItem
+	let activeItem = $state(null)
 
 	function handleSelect() {
 		open = false
@@ -51,10 +52,10 @@
 		}
 	}
 
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-	$: activeIndex = options.findIndex((item) => item === value)
-	$: offsetTop = activeItem?.offsetTop + activeItem?.clientHeight ?? 0
+	// $: fields = { ...defaultFields, ...fields }
+	// $: using = { default: Item, ...using }
+	// $: activeIndex = options.findIndex((item) => item === value)
+	let offsetTop = $derived(activeItem?.offsetTop + activeItem?.clientHeight ?? 0)
 </script>
 
 <input-select
@@ -65,27 +66,28 @@
 	aria-label={name}
 	use:dismissable
 	use:navigable={{ horizontal: false, vertical: true }}
-	on:focus={() => (open = true)}
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
-	on:previous={handlePrevious}
-	on:next={handleNext}
-	on:select={handleKeySelect}
+	onfocus={() => (open = true)}
+	onblur={() => (open = false)}
+	ondismiss={() => (open = false)}
+	onprevious={handlePrevious}
+	onnext={handleNext}
+	onselect={handleKeySelect}
 >
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<selected-item
-		on:click|stopPropagation={() => (open = !open)}
+		onclick={() => (open = !open)}
 		class="flex w-full items-center"
 		bind:this={activeItem}
 		role="option"
 		tabindex="-1"
 		aria-selected={value !== null && !open}
 	>
-		<slot>
-			<item>
-				<svelte:component this={using.default} value={value ?? placeholder} {fields} />
-			</item>
-		</slot>
+		<item>
+			{#if currentItem}
+				{@render currentItem(value, fields)}
+			{/if}
+			<Item value={value ?? placeholder} {fields} />
+		</item>
 		{#if open}
 			<Icon name={icons.opened} label="opened" tabindex="-1" />
 		{:else}
@@ -102,7 +104,14 @@
 				{using}
 			/>
 		</list> -->
-			<List items={options} {fields} {using} bind:value on:select={handleSelect} tabindex="-1" />
+			<List
+				bind:items={options}
+				{fields}
+				{using}
+				bind:value
+				on:select={handleSelect}
+				tabindex="-1"
+			/>
 		</Slider>
 	{/if}
 </input-select>

package/src/SlidingColumns.svelte

@@ -3,7 +3,7 @@
 	import { fly, fade } from 'svelte/transition'
 	import { cubicInOut } from 'svelte/easing'
 
-	let { activeIndex = 0, columns = $bindable([]) } = $props()
+	let { activeIndex = $bindable(0), columns = $bindable([]) } = $props()
 	let width = $state()
 	let offset = $state(1)
 
@@ -20,6 +20,8 @@
 			offset = -1
 		}
 	}
+
+	let activeColumn = $derived(columns[activeIndex])
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -27,26 +29,22 @@
 	use:swipeable
 	onswipeleft={handlePrevious}
 	onswiperight={handleNext}
-	use:navigable
+	use:navigable={{ orientation: 'horizontal' }}
 	onprevious={handlePrevious}
 	onnext={handleNext}
 	tabindex={0}
 	class="relative grid h-full w-full overflow-hidden"
 	bind:clientWidth={width}
 >
-	{#each columns as column, index (index)}
-		{#if index === activeIndex}
-			<rk-segment
-				class="slide absolute h-full w-full {column}"
-				in:fly={{ x: offset * width, duration: 1000, easing: cubicInOut }}
-				out:fade={{
-					x: -1 * offset * width,
-					duration: 1000,
-					easing: cubicInOut
-				}}
-			>
-				{column}
-			</rk-segment>
-		{/if}
-	{/each}
+	<rk-segment
+		class="slide absolute h-full w-full"
+		in:fly={{ x: offset * width, duration: 1000, easing: cubicInOut }}
+		out:fade={{
+			x: -1 * offset * width,
+			duration: 1000,
+			easing: cubicInOut
+		}}
+	>
+		{activeColumn}
+	</rk-segment>
 </rk-container>