@rokkit/core 1.0.0-next.22 → 1.0.0-next.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.22",
+  "version": "1.0.0-next.23",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/Accordion.svelte

@@ -63,7 +63,7 @@
 			class:is-selected={item === value}
 			data-path={index}
 		>
-			<Summary {fields} {using} bind:content={item} />
+			<Summary {fields} {using} bind:value={item} />
 			{#if hasItems && item[fields.isOpen]}
 				<List
 					bind:items={item[fields.children]}

package/src/BreadCrumbs.svelte

@@ -27,7 +27,7 @@
 				</span>
 			{/if}
 			<crumb class:is-selected={index == items.length - 1}>
-				<svelte:component this={component} content={item} {fields} />
+				<svelte:component this={component} value={item} {fields} />
 			</crumb>
 		{/if}
 	{/each}

package/src/DropDown.svelte

@@ -16,8 +16,8 @@
 	export let fields = defaultFields
 	export let using = { default: Text }
 	export let value = null
-	export let title
-	export let icon
+	export let title = null
+	export let icon = null
 	export let small = false
 
 	$: using = { default: Text, ...using }
@@ -46,7 +46,7 @@
 >
 	<button
 		on:click|stopPropagation={() => (open = !open)}
-		class="flex"
+		class="flex items-center"
 		bind:clientHeight={offsetTop}
 		tabindex="-1"
 	>
@@ -54,7 +54,7 @@
 			<Icon name={icon} />
 		{/if}
 		{#if !small && title}
-			<p>{title}</p>
+			<p class="flex w-full">{title}</p>
 		{/if}
 		{#if open}
 			<icon class={icons.opened} />

package/src/Icon.svelte

@@ -1,17 +1,31 @@
 <script>
 	let className = ''
 	export { className as class }
-
 	export let name = ''
-	let h
+	export let size = 'base'
+	export let role = 'img'
+	export let label = name
+	export let disabled = false
+	export let tabindex = 0
+
+	$: tabindex = role !== 'button' || disabled ? -1 : tabindex
+	$: small = size === 'small' || className.includes('small')
+	$: medium = size === 'medium' || className.includes('medium')
+	$: large = size === 'large' || className.includes('large')
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<square-icon
-	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
-	bind:clientHeight={h}
-	style:width="{h}px"
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<icon
+	class="flex flex-shrink-0 items-center justify-center {className}"
+	class:small
+	class:medium
+	class:large
+	class:disabled
+	{role}
+	aria-label={label}
 	on:click
+	on:keydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
+	{tabindex}
 >
-	<icon class={name} aria-hidden="true" />
-</square-icon>
+	<i class={name} aria-hidden="true" />
+</icon>

package/src/List.svelte

@@ -3,6 +3,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
 	import { Text } from './items'
+	import { props } from 'ramda'
 
 	const dispatch = createEventDispatcher()
 
@@ -47,6 +48,7 @@
 			? using[item[fields.component]] || using.default
 			: using.default}
 		{@const path = [...hierarchy, index].join(',')}
+		{@const props = item[fields.props] || { fields }}
 		<item
 			class="flex flex-shrink-0 flex-grow-0 items-center cursor-pointer w-full gap-2 select-none item"
 			role="option"
@@ -56,8 +58,8 @@
 		>
 			<svelte:component
 				this={component}
-				bind:content={item}
-				{fields}
+				bind:value={item}
+				{...props}
 				on:change
 			/>
 		</item>

package/src/NestedList.svelte

@@ -28,35 +28,25 @@
 	class:rtl
 	tabindex="-1"
 >
-	<!-- tabindex={hierarchy.length == 0 ? 0 : -1}
-	use:navigator={{ items, fields, indices, enabled: hierarchy.length == 0 }}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
-> -->
-	{#each items as content, index}
-		<!-- {@const type = nodeTypes[index] === 'middle' ? 'line' : 'empty'} -->
-		{@const hasChildren = fields.children in content}
-		<!-- {@const connectors =   types.slice(0, -1)} -->
+	{#each items as item, index}
+		{@const hasChildren = fields.children in item}
 		{@const path = [...hierarchy, index]}
 		{@const connectors = getLineTypes(hasChildren, types, nodeTypes[index])}
 
-		<!-- types={[...connectors, nodeTypes[index]]} -->
 		<Node
-			bind:content
+			bind:value={item}
 			{fields}
 			{using}
 			types={connectors}
 			{rtl}
 			{path}
 			stateIcons={icons}
-			selected={value === content}
+			selected={value === item}
 		/>
 		<!-- types={[...connectors, type, nodeTypes[index]]} -->
-		{#if hasChildren && content[fields.isOpen]}
+		{#if hasChildren && item[fields.isOpen]}
 			<svelte:self
-				items={content[fields.children]}
+				items={item[fields.children]}
 				bind:value
 				{fields}
 				{using}

package/src/SpinList.svelte

@@ -41,7 +41,7 @@
 		on:next={moveNext}
 		on:previous={moveBack}
 	/>
-	<!-- <svelte:component this={component} bind:content={value} {fields} on:change /> -->
+	<!-- <svelte:component this={component} bind:value={value} {fields} on:change /> -->
 	<square class="h-full position-absolute right-0">
 		<icon class="i-carbon-chevron-sort" />
 	</square>

package/src/Switch.svelte

@@ -1,23 +1,26 @@
 <script>
+	import { createEventDispatcher } from 'svelte'
 	import { defaultFields } from './constants'
 	import { Text } from './items'
+	import { navigator } from './actions'
+	import { getComponent } from './lib'
+
+	const dispatch = createEventDispatcher()
 
 	let className = ''
 	export { className as class }
 	export let items = [false, true]
 	export let fields = defaultFields
-	export let using = { default: Text }
+	export let using = {}
 	export let compact = true
 	export let value
+	let cursor = []
 
-	const getComponent = (item, fields) => {
-		return fields.component
-			? item[fields.component] ?? using.default
-			: using.default
-	}
+	function handleNav(event) {
+		value = event.detail.node
+		cursor = event.detail.path
 
-	const onItemClick = (item) => {
-		value = item
+		dispatch('change', { item: value, indices: cursor })
 	}
 
 	$: useComponent = !items.every((item) => [false, true].includes(item))
@@ -28,25 +31,37 @@
 {#if !Array.isArray(items) || items.length < 2}
 	<error>Items should be an array with at least two items.</error>
 {:else}
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<toggle-switch
 		class="flex items-center {className}"
+		class:is-off={items.length == 2 && value === items[0]}
+		class:is-on={items.length == 2 && value === items[1]}
 		class:compact
 		tabindex="0"
+		role="listbox"
+		use:navigator={{
+			items,
+			fields,
+			vertical: false,
+			indices: cursor
+		}}
+		on:move={handleNav}
+		on:select={handleNav}
 	>
 		{#each items as item, index (item)}
-			{@const component = useComponent ? getComponent(item, fields) : null}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			{@const component = useComponent
+				? getComponent(item, fields, using)
+				: null}
 			<item
 				class="flex relative"
-				class:is-selected={item === value}
-				on:click={() => onItemClick(item)}
+				role="option"
+				aria-selected={item === value}
+				data-path={index}
 			>
 				{#if item == value}
 					<indicator class="absolute top-0 left-0 right-0 bottom-0" />
 				{/if}
 				{#if component}
-					<svelte:component this={component} content={item} {fields} />
+					<svelte:component this={component} value={item} {fields} />
 				{/if}
 			</item>
 		{/each}

package/src/TabItem.svelte

@@ -3,25 +3,28 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let icon = null
-	export let label
-	export let active = false
-	export let allowClose = false
+	export let fields = {}
+	export let using = {}
+	export let value = null
+	export let index = 0
+	export let icons
+	export let selected = false
+	export let removable = false
+
+	$: component = value[fields.component]
+		? using[value[fields.component]] || using.default
+		: using.default
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<tab class="flex flex-row items-center" class:active on:click>
-	{#if icon}
-		<icon class={icon} aria-label={icon} />
-	{/if}
-	{#if label}
-		<p class="flex flex-shrink-0 flex-grow justify-center">{label}</p>
-	{/if}
-	{#if allowClose}
-		<icon
-			class="remove small"
-			aria-label="remove"
-			on:click={() => dispatch('remove')}
-		/>
+<tab
+	class="flex flex-row items-center"
+	role="option"
+	aria-selected={selected}
+	data-path={index}
+>
+	<svelte:component this={component} {value} {fields} />
+	{#if removable}
+		<icon class={icons.close} on:click={() => dispatch('remove')} />
 	{/if}
 </tab>

package/src/Tabs.svelte

@@ -1,8 +1,10 @@
 <script>
-	import { defaultFields } from './constants'
+	import { TableIndex } from './../../../shared/config/dist/tableIndex.d.ts'
+	import { defaultFields, defaultStateIcons } from './constants'
 	import { Text } from './items'
 	import { navigator } from './actions'
 	import { createEventDispatcher } from 'svelte'
+	import TabItem from './TabItem.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -12,20 +14,39 @@
 	export let fields = {}
 	export let using = {}
 	export let value = null
+	export let below = false
+	export let align = 'left'
+	export let editable = false
+	export let icons = defaultStateIcons.action
+
 	let cursor = []
 
+	function handleRemove(item) {
+		if (typeof item === Object) {
+			item[fields.isDeleted] = true
+		} else {
+			items = items.filter((i) => i !== item)
+		}
+
+		dispatch('remove', { item })
+	}
 	function handleNav(event) {
 		value = event.detail.node
 		cursor = event.detail.path
 
 		dispatch('select', { item: value, indices: cursor })
 	}
+	$: icons = { ...defaultStateIcons.action, ...icons }
+	$: filtered = items.filter((item) => !item[fields.isDeleted])
 	$: fields = { ...defaultFields, ...fields }
 	$: using = { default: Text, ...using }
 </script>
 
 <tabs
 	class="flex w-full {className}"
+	class:is-below={below}
+	class:justify-center={align == 'center'}
+	class:justify-end={align == 'right'}
 	tabindex="0"
 	role="listbox"
 	use:navigator={{
@@ -37,13 +58,42 @@
 	on:move={handleNav}
 	on:select={handleNav}
 >
-	{#each items as item, index}
-		{@const component = item[fields.component]
+	{#each filtered as item, index}
+		<TabItem
+			value={item}
+			{index}
+			{fields}
+			{using}
+			removable={editable}
+			selected={item === value}
+			{icons}
+		/>
+		<!-- {@const component = item[fields.component]
 			? using[item[fields.component]] || using.default
 			: using.default}
 
-		<item class="flex" class:is-selected={item === value} data-path={index}>
-			<svelte:component this={component} content={item} {fields} />
-		</item>
+		<item
+			class="flex"
+			role="option"
+			aria-selected={item === value}
+			class:is-selected={item === value}
+			data-path={index}
+		>
+			<svelte:component this={component} value={item} {fields} />
+			{#if editable}
+				<icon class={icons.close} on:click={() => handleRemove(item)} />
+			{/if}
+		</item> -->
 	{/each}
+	{#if editable}
+		<add-tab
+			class="flex items-center"
+			role="button"
+			on:click={() => dispatch('add')}
+			on:keydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
+			tabindex="0"
+		>
+			<icon class={icons.add} />
+		</add-tab>
+	{/if}
 </tabs>

package/src/constants.js

@@ -93,32 +93,3 @@ export function stateIconsFromNames(icons) {
 }
 
 export const defaultStateIcons = stateIconsFromNames(defaultIcons)
-// export const defaultStateIcons = {
-// 	accordion: {
-// 		opened: 'accordion-opened',
-// 		closed: 'accordion-closed'
-// 	},
-// 	item: {
-// 		remove: 'item-remove',
-// 		add: 'item-add',
-// 		clear: 'item-clear',
-// 		search: 'item-search'
-// 	},
-// 	node: {
-// 		opened: 'node-opened',
-// 		closed: 'node-closed'
-// 	},
-// 	list: {
-// 		selector: 'list-selector'
-// 	},
-// 	checkbox: {
-// 		checked: 'checkbox-checked',
-// 		unchecked: 'checkbox-unchecked',
-// 		unknown: 'checkbox-unknown'
-// 	},
-// 	rating: { filled: 'rating-filled', empty: 'rating-empty' },
-// 	radio: {
-// 		off: 'radio-off',
-// 		on: 'radio-on'
-// 	}
-// }

package/src/items/Collapsible.svelte

@@ -4,45 +4,45 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let content
+	export let value
 	export let fields = {}
 
 	$: fields = { ...defaultFields, ...fields }
-	$: hasItems = content[fields.children] && content[fields.children].length > 0
+	$: hasItems = value[fields.children] && value[fields.children].length > 0
 
 	function toggle() {
 		if (hasItems) {
-			content.isOpen = !content.isOpen
+			value.isOpen = !value.isOpen
 		}
-		dispatch('toggle', content)
+		dispatch('toggle', value)
 	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <collapsible
 	class="flex flex-row flex-shrink-0 items-center w-full leading-loose cursor-pointer"
-	class:expanded={content.isOpen}
+	class:expanded={value.isOpen}
 	on:click={toggle}
 >
-	{#if content[fields.image]}
+	{#if value[fields.image]}
 		<img
 			class="h-8 w-8 rounded-full"
-			alt={content[fields.text]}
-			src={content[fields.image]}
+			alt={value[fields.text]}
+			src={value[fields.image]}
 		/>
 	{/if}
-	{#if content[fields.icon]}
-		<icon class={content[fields.icon]} />
+	{#if value[fields.icon]}
+		<icon class={value[fields.icon]} />
 	{/if}
-	{#if content[fields.url]}
-		<a href={content[fields.url]} class="flex flex-grow">
-			{content[fields.text]}
+	{#if value[fields.url]}
+		<a href={value[fields.url]} class="flex flex-grow">
+			{value[fields.text]}
 		</a>
 	{:else}
-		<p class="flex flex-grow">{content[fields.text]}</p>
+		<p class="flex flex-grow">{value[fields.text]}</p>
 	{/if}
 	{#if hasItems}
-		{#if content.isOpen}
+		{#if value.isOpen}
 			<icon class="sm accordion-opened" aria-label="expand" />
 		{:else}
 			<icon class="sm accordion-closed" aria-label="collapse" />

package/src/items/Link.svelte

@@ -2,17 +2,17 @@
 	import Text from './Text.svelte'
 	import { defaultFields } from '../constants'
 
-	export let content
+	export let value
 	export let fields = defaultFields
 
-	$: target = fields.target ? content[fields.target] : ''
+	$: target = fields.target ? value[fields.target] : ''
 </script>
 
 <a
 	class="flex flex-row flex-grow items-center"
-	href={content[fields.url]}
+	href={value[fields.url]}
 	{target}
 	tabindex="-1"
 >
-	<Text {content} {fields} />
+	<Text {value} {fields} />
 </a>

package/src/items/Node.svelte

@@ -1,8 +1,8 @@
 <script>
 	import Connector from './Connector.svelte'
 	import { defaultFields, defaultStateIcons } from '../constants'
-
-	export let content
+	import Icon from '../Icon.svelte'
+	export let value
 	export let fields = defaultFields
 	export let types = []
 	export let stateIcons = defaultStateIcons.node
@@ -13,13 +13,13 @@
 	export let path = []
 
 	$: stateIcons = { ...defaultStateIcons.node, ...(stateIcons ?? {}) }
-	$: hasChildren = fields.children in content
+	$: hasChildren = fields.children in value
 	$: state =
-		hasChildren && content[fields.isOpen]
+		hasChildren && value[fields.isOpen]
 			? { icon: stateIcons.opened, label: 'collapse' }
 			: { icon: stateIcons.closed, label: 'expand' }
-	$: component = content[fields.component]
-		? using[content[fields.component]] || using.default
+	$: component = value[fields.component]
+		? using[value[fields.component]] || using.default
 		: using.default
 </script>
 
@@ -35,14 +35,12 @@
 >
 	{#each types as type}
 		{#if type === 'icon'}
-			<span class="flex flex-col w-4 h-full items-center justify-center">
-				<icon class={state.icon} aria-label={state.label} tabindex="-1" />
-			</span>
+			<Icon name={state.icon} label={state.label} class="w-4 small" />
 		{:else}
 			<Connector {type} />
 		{/if}
 	{/each}
 	<item>
-		<svelte:component this={component} bind:content {fields} />
+		<svelte:component this={component} bind:value {fields} />
 	</item>
 </node>

package/src/items/Pill.svelte

@@ -20,7 +20,7 @@
 
 <pill class="flex flex-row items-center">
 	<item class="flex flex-row items-center">
-		<svelte:component this={component} content={value} {fields} />
+		<svelte:component this={component} {value} {fields} />
 	</item>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	{#if removable}

package/src/items/Summary.svelte

@@ -2,23 +2,23 @@
 	import { defaultFields } from '../constants'
 	import Text from './Text.svelte'
 
-	export let content
+	export let value
 	export let fields = {}
 	export let using = {}
 
 	$: fields = { ...defaultFields, ...fields }
 	$: using = { default: Text, ...using }
-	$: hasItems = content[fields.children] && content[fields.children].length > 0
-	$: component = using[content[fields.component] ?? 'default']
+	$: hasItems = value[fields.children] && value[fields.children].length > 0
+	$: component = using[value[fields.component] ?? 'default']
 </script>
 
 <summary
 	class="flex flex-row flex-shrink-0 items-center w-full cursor-pointer"
 	tabindex="-1"
 >
-	<svelte:component this={component} bind:content {fields} />
+	<svelte:component this={component} bind:value {fields} />
 	{#if hasItems}
-		{#if content[fields.isOpen]}
+		{#if value[fields.isOpen]}
 			<icon class="sm accordion-opened" aria-label="expand" />
 		{:else}
 			<icon class="sm accordion-closed" aria-label="collapse" />

package/src/items/Text.svelte

@@ -1,25 +1,26 @@
 <script>
 	import { defaultFields } from '../constants'
+	import Icon from '../Icon.svelte'
 
-	export let content
+	export let value
 	export let fields = defaultFields
 
-	$: isObject = typeof content == 'object'
-	$: text = isObject ? content[fields.text] : content
+	$: isObject = typeof value == 'object'
+	$: text = isObject ? value[fields.text] : value
 </script>
 
 {#if isObject}
-	{#if content[fields.icon]}
+	{#if value[fields.icon]}
 		{@const iconName =
-			typeof content[fields.icon] == 'object'
-				? content[fields.icon][content[fields.state]]
-				: content[fields.icon]}
-		<icon class={iconName} />
-	{:else if content[fields.image]}
+			typeof value[fields.icon] == 'object'
+				? value[fields.icon][value[fields.state]]
+				: value[fields.icon]}
+		<Icon name={iconName} />
+	{:else if value[fields.image]}
 		<img
 			class="h-4 w-4 object-cover"
-			alt={content[fields.text]}
-			src={content[fields.image]}
+			alt={value[fields.text]}
+			src={value[fields.image]}
 		/>
 	{/if}
 {/if}

package/src/lib/index.js

@@ -1 +1,7 @@
 export * from './nested'
+
+export function getComponent(item, fields, using) {
+	return fields.component
+		? item[fields.component] ?? using.default
+		: using.default
+}

package/src/mocks/Custom.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { defaultFields } from '../../src/constants'
-	export let content
+	export let value
 	export let fields = defaultFields
 </script>
 
-<span>{content[fields.text]}</span>
+<span>{value[fields.text]}</span>

package/src/List-Discard.svelte

@@ -1,48 +0,0 @@
-<script>
-	import ListActions from './ListActions.svelte'
-	import ListItems from './List.svelte'
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let searchable = false
-	export let editable = false
-
-	let search
-	let filtered
-
-	function addItem() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-	function deleteSelection() {
-		if (value) value.isDeleted = true
-	}
-	function clearSelection() {
-		value = null
-	}
-
-	$: filtered =
-		searchable && search && search.length
-			? items.filter((item) => item[fields.text].includes(search))
-			: items
-</script>
-
-<list class="flex flex-col w-full {className}">
-	{#if searchable || editable}
-		<ListActions
-			bind:search
-			{searchable}
-			{editable}
-			on:delete={deleteSelection}
-			on:clear={clearSelection}
-			on:add={addItem}
-		/>
-	{/if}
-	<scroll class="flex flex-col h-full overflow-scroll">
-		<ListItems bind:items={filtered} {fields} {using} bind:value on:select />
-	</scroll>
-</list>