@rokkit/core 1.0.0-next.20 → 1.0.0-next.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.20",
+  "version": "1.0.0-next.21",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "svelte": "^3.58.0",
     "typescript": "^4.9.5",
     "validators": "latest",
-    "vite": "^4.3.3",
+    "vite": "^4.3.4",
     "vitest": "~0.19.1",
     "shared-config": "1.0.0"
   },

package/src/NestedList.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { Node, Text } from './items'
-	import { defaultFields } from './constants'
+	import { defaultFields, defaultStateIcons } from './constants'
 	import { getLineTypes } from './lib/connector'
 
 	let className = 'list'
@@ -10,26 +10,16 @@
 	export let using = {}
 	export let types = []
 	export let value = null
-	// export let linesVisible = true
 	export let rtl = false
 	export let hierarchy = []
 	export let icons
-	// let indices = []
-
-	// function handle(event) {
-	// 	value = event.detail.node
-	// 	indices = event.detail.path
-	// 	if (['collapse', 'expand'].includes(event.type)) {
-	// 		items = items
-	// 	}
-	// 	dispatch(event.type, value)
-	// }
 
 	$: using = { default: Text, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: nodeTypes = items.map((_, index) =>
 		index === items.length - 1 ? 'last' : 'child'
 	)
+	$: icons = { ...defaultStateIcons.node, ...icons }
 </script>
 
 <nested-list

package/src/NestedPaginator.svelte

@@ -1,5 +1,6 @@
 <script>
 	import BreadCrumbs from './BreadCrumbs.svelte'
+	import { defaultFields } from './constants'
 	import { Text } from './items'
 	import { flattenNestedList } from './lib/nested'
 	import { createEventDispatcher } from 'svelte'

package/src/Switch.svelte

@@ -0,0 +1,50 @@
+<script>
+	import { defaultFields } from './constants'
+	import { Text } from './items'
+
+	let className = ''
+	export { className as class }
+	export let items = [false, true]
+	export let fields = defaultFields
+	export let using = { default: Text }
+	export let compact = true
+	export let value
+
+	const getComponent = (item, fields) => {
+		return fields.component
+			? item[fields.component] ?? using.default
+			: using.default
+	}
+
+	const onItemClick = (item) => {
+		value = item
+	}
+
+	$: useComponent = !items.every((item) => [false, true].includes(item))
+	$: fields = { ...defaultFields, ...fields }
+	$: using = { default: Text, ...using }
+</script>
+
+{#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 class="flex items-center {className}" class:compact tabindex="0">
+		{#each items as item, index (item)}
+			{@const component = useComponent ? getComponent(item, fields) : null}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<item
+				class="flex relative"
+				class:is-selected={item === value}
+				on:click={() => onItemClick(item)}
+			>
+				{#if item == value}
+					<indicator class="absolute top-0 left-0 right-0 bottom-0" />
+				{/if}
+				{#if component}
+					<svelte:component this={component} content={item} {fields} />
+				{/if}
+			</item>
+		{/each}
+	</toggle>
+{/if}

package/src/Tree.svelte

@@ -48,5 +48,5 @@
 	tabindex="0"
 	class={className}
 >
-	<NestedList {items} {fields} {using} {value} {...$$restProps} />
+	<NestedList {items} {fields} {using} bind:value {...$$restProps} />
 </tree>

package/src/constants.js

@@ -26,36 +26,6 @@ export const defaultIcons = [
 	'navigate-down'
 ]
 
-// export const defaultIcons = [
-// 	'accordion-opened',
-// 	'accordion-closed',
-// 	'action-remove',
-// 	'action-add',
-// 	'action-clear',
-// 	'action-search',
-// 	'action-close',
-// 	'node-opened',
-// 	'node-closed',
-// 	'checkbox-checked',
-// 	'checkbox-unchecked',
-// 	'checkbox-unknown',
-// 	'rating-filled',
-// 	'rating-empty',
-// 	'rating-half',
-// 	'radio-off',
-// 	'radio-on',
-// 	'folder-closed',
-// 	'folder-opened',
-// 	'navigate-up',
-// 	'navigate-down',
-// 	'navigate-left',
-// 	'navigate-right',
-// 	'selector-closed',
-// 	'selector-opened',
-// 	'mode-dark',
-// 	'mode-light'
-// ]
-
 export const defaultOptions = {
 	id: 'id',
 	label: 'label',
@@ -86,7 +56,7 @@ export const defaultFields = {
 	id: 'id',
 	url: 'url',
 	text: 'text',
-	children: 'data',
+	children: 'children',
 	icon: 'icon',
 	image: 'image',
 	component: 'component',
@@ -94,6 +64,7 @@ export const defaultFields = {
 	notes: 'notes',
 	props: 'props',
 	target: 'target',
+	state: 'state',
 	isOpen: '_open',
 	isDeleted: '_deleted',
 	level: 'level',

package/src/index.js

@@ -3,7 +3,7 @@ export * from './items'
 export * from './lib'
 
 export { default as Icon } from './Icon.svelte'
-// export { default as List } from './List-Discard.svelte'
+export { default as Switch } from './Switch.svelte'
 export { default as Tree } from './Tree.svelte'
 export { default as Accordion } from './Accordion.svelte'
 export { default as List } from './List.svelte'

package/src/items/Connector.svelte

@@ -5,7 +5,7 @@
 	$: type = ['last', 'child', 'sibling'].includes(type) ? type : 'empty'
 </script>
 
-<span class="grid grid-rows-2 grid-cols-2 h-full w-4 line-{type}">
+<span class="grid grid-rows-2 grid-cols-2 h-full min-w-4 w-4 line-{type}">
 	{#if type === 'last'}
 		{#if rtl}
 			<i class="border-b border-r" />

package/src/items/Node.svelte

@@ -1,16 +1,12 @@
 <script>
 	import Connector from './Connector.svelte'
 	import { defaultFields, defaultStateIcons } from '../constants'
-	// import { getLineTypes } from '../lib/connector'
-	// import { has } from 'ramda'
-	// import { createEventDispatcher } from 'svelte'
 
-	// const dispatch = createEventDispatcher()
 	export let content
 	export let fields = defaultFields
 	export let types = []
 	export let stateIcons = defaultStateIcons.node
-	// export let linesVisible = true
+
 	export let selected = false
 	export let using = {}
 	export let rtl = false
@@ -25,12 +21,6 @@
 	$: component = content[fields.component]
 		? using[content[fields.component]] || using.default
 		: using.default
-	// $: types = [...types, ...(hasChildren ? [] : ['empty'])]
-	// $: types = getLineTypes(hasChildren, types)
-	// function toggle() {
-	// 	if (hasChildren) content[fields.isOpen] = !content[fields.isOpen]
-	// 	dispatch('select', content)
-	// }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -52,16 +42,7 @@
 			<Connector {type} />
 		{/if}
 	{/each}
-	<!-- {#each types.slice(1) as type}
-		<Connector {type} />
-	{/each} -->
-
-	<!-- {#if hasChildren}
-		<span class="flex flex-col w-4 h-full items-center justify-center">
-			<icon class={state.icon} aria-label={state.label} tabindex="-1" />
-		</span>
-	{/if} -->
-	<fragment>
+	<item>
 		<svelte:component this={component} bind:content {fields} />
-	</fragment>
+	</item>
 </node>

package/src/items/Text.svelte

@@ -8,14 +8,21 @@
 	$: text = isObject ? content[fields.text] : content
 </script>
 
-{#if isObject && content[fields.image]}
-	<img
-		class="h-4 w-4 object-cover"
-		alt={content[fields.text]}
-		src={content[fields.image]}
-	/>
+{#if isObject}
+	{#if content[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]}
+		<img
+			class="h-4 w-4 object-cover"
+			alt={content[fields.text]}
+			src={content[fields.image]}
+		/>
+	{/if}
 {/if}
-{#if isObject && content[fields.icon]}
-	<icon class={content[fields.icon]} />
+{#if text}
+	<p class="flex w-full">{text}</p>
 {/if}
-<p class="flex flex-grow">{text}</p>

package/src/lib/nested.js

@@ -1,10 +1,5 @@
 import { omit } from 'ramda'
 import { defaultFields } from '../constants'
-// const defaultFields = {
-// 	children: 'children',
-// 	level: 'level',
-// 	parent: 'parent'
-// }
 
 export function flattenNestedList(items, fields = defaultFields, level = 0) {
 	fields = { ...defaultFields, ...fields }