@rokkit/core 1.0.0-next.32 → 1.0.0-next.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.32",
+  "version": "1.0.0-next.34",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,18 +13,18 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.1",
-    "@testing-library/svelte": "^3.2.2",
-    "@vitest/coverage-c8": "^0.31.1",
-    "@vitest/coverage-istanbul": "^0.31.1",
-    "@vitest/ui": "~0.31.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/svelte": "^4.0.3",
+    "@vitest/coverage-c8": "^0.32.3",
+    "@vitest/coverage-istanbul": "^0.32.3",
+    "@vitest/ui": "~0.32.3",
     "jsdom": "^22.1.0",
-    "svelte": "^3.59.1",
-    "typescript": "^5.0.4",
+    "svelte": "^4.0.1",
+    "typescript": "^5.1.6",
     "validators": "latest",
     "vite": "^4.3.9",
-    "vitest": "~0.31.1",
-    "shared-config": "1.0.0-next.32"
+    "vitest": "~0.32.3",
+    "shared-config": "1.0.0-next.34"
   },
   "files": [
     "src/**/*.js",
@@ -44,7 +44,9 @@
     }
   },
   "dependencies": {
-    "ramda": "^0.29.0"
+    "@rokkit/molecules": "1.0.0-next.33",
+    "ramda": "^0.29.0",
+    "rokkit": "1.0.0-next.33"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/ListActions.svelte

@@ -1,7 +1,7 @@
 <script>
 	// import Icon from '../layout/Icon.svelte'
 	import { createEventDispatcher } from 'svelte'
-	import { defaultStateIcons } from './constants'
+	import { defaultStateIcons } from 'rokkit/utils'
 
 	const dispatch = createEventDispatcher()
 

package/src/NestedPaginator.svelte

@@ -1,8 +1,7 @@
 <script>
-	import BreadCrumbs from './BreadCrumbs.svelte'
-	import { defaultFields } from './constants'
-	import { Item } from './items'
-	import { flattenNestedList } from './lib/nested'
+	import { defaultFields, flattenNestedList } from 'rokkit/utils'
+	import { Item, BreadCrumbs } from '@rokkit/molecules'
+	// import { flattenNestedList } from './lib/nested'
 	import { createEventDispatcher } from 'svelte'
 
 	const dispatch = createEventDispatcher()

package/src/PageNavigator.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { defaultFields, defaultStateIcons } from './constants'
-	import Icon from './Icon.svelte'
+	import { defaultFields, defaultStateIcons } from 'rokkit/utils'
+	import { Icon } from 'rokkit/atoms'
 
 	const dispatch = createEventDispatcher()
 

package/src/ResponsiveGrid.svelte

@@ -1,6 +1,5 @@
 <script>
-	import { swipeable } from './actions/swipeable'
-	import { navigable } from './actions/navigable'
+	import { swipeable, navigable } from 'rokkit/actions'
 	import { fly, fade } from 'svelte/transition'
 	import { cubicInOut } from 'svelte/easing'
 

package/src/SpinList.svelte

@@ -1,9 +1,9 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Item } from './items'
-	import { navigable } from './actions'
-	import { getComponent } from './list'
+	import { defaultFields } from 'rokkit/utils'
+	import { Item } from '@rokkit/molecules'
+	import { navigable } from 'rokkit/actions'
+	// import { getComponent } from './list'
 
 	const dispatch = createEventDispatcher()
 
@@ -27,7 +27,7 @@
 	$: using = { default: Item, ...using }
 	$: fields = { ...defaultFields, ...fields }
 	$: value = index >= 0 ? items[index] : null
-	$: component = getComponent(value, fields)
+	// $: component = getComponent(value, fields)
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->

package/src/SplitPane.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { pannable } from './actions'
+	import { pannable } from 'rokkit/actions'
 
 	const dispatch = createEventDispatcher()
 

package/src/Splitter.svelte

@@ -2,7 +2,7 @@
 	// ensure that parent has position: relative.
 	// on reaching limit remove mouse events.
 	import { createEventDispatcher } from 'svelte'
-	import { pannable } from './actions'
+	import { pannable } from 'rokkit/actions'
 
 	const dispatch = createEventDispatcher()
 

package/src/TabItems.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
+	import { defaultFields } from 'rokkit/utils'
 	import TabItem from './TabItem.svelte'
 
 	const dispatch = createEventDispatcher()

package/src/index.js

@@ -1,23 +1,23 @@
-export * from './constants'
-export * from './items'
-export * from './lib'
+// export * from './constants'
+// export * from './items'
+// export * from './lib'
 
-export { default as Icon } from './Icon.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'
+// export { default as Icon } from './Icon.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'
 export { default as Searchable } from './Searchable.svelte'
 export { default as Scrollable } from './Scrollable.svelte'
-export { default as NestedList } from './NestedList.svelte'
-export { default as Tabs } from './Tabs.svelte'
-export { default as BreadCrumbs } from './BreadCrumbs.svelte'
+// export { default as NestedList } from './NestedList.svelte'
+// export { default as Tabs } from './Tabs.svelte'
+// export { default as BreadCrumbs } from './BreadCrumbs.svelte'
 export { default as NestedPaginator } from './NestedPaginator.svelte'
 
-export { default as Alerts } from './Alerts.svelte'
-export { default as Slider } from './Slider.svelte'
-export { default as DropDown } from './DropDown.svelte'
-export { default as DropSearch } from './DropSearch.svelte'
+// export { default as Alerts } from './Alerts.svelte'
+// export { default as Slider } from './Slider.svelte'
+// export { default as DropDown } from './DropDown.svelte'
+// export { default as DropSearch } from './DropSearch.svelte'
 export { default as SpinList } from './SpinList.svelte'
 
 export { default as Sidebar } from './Sidebar.svelte'

package/src/Accordion.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Item, Summary } from './items'
-	import List from './List.svelte'
-	import { navigator } from './actions/navigator'
-
-	const dispatch = createEventDispatcher()
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let autoClose = false
-	export let value = null
-	let cursor = []
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-
-	function handle(event) {
-		// console.log(event.type, event.detail)
-		value = event.detail.node
-		cursor = event.detail.path
-		if (['collapse', 'expand'].includes(event.type)) {
-			if (autoClose) {
-				items.map((x) => {
-					if (x !== value && x[fields.isOpen]) {
-						x[fields.isOpen] = false
-					}
-				})
-			}
-			items = items
-		}
-		dispatch(event.type, event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<accordion
-	class="flex flex-col w-full select-none {className}"
-	tabindex="0"
-	use:navigator={{
-		items,
-		fields,
-		enabled: true,
-		indices: cursor
-	}}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
->
-	{#each items as item, index}
-		{@const hasItems =
-			item[fields.children] && item[fields.children].length > 0}
-		{@const itemFields = { ...fields, ...(fields.fields ?? fields) }}
-
-		<div
-			id={'id-' + index}
-			class="flex flex-col"
-			class:is-expanded={item[fields.isOpen]}
-			class:is-selected={item === value}
-			data-path={index}
-		>
-			<Summary {fields} {using} bind:value={item} />
-			{#if hasItems && item[fields.isOpen]}
-				<List
-					bind:items={item[fields.children]}
-					bind:value
-					fields={itemFields}
-					{using}
-					on:select
-					hierarchy={[index]}
-					tabindex="-1"
-				/>
-			{/if}
-		</div>
-	{/each}
-</accordion>

package/src/Alerts.svelte

@@ -1,39 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition'
-	import { flip } from 'svelte/animate'
-	import { alerts } from './stores'
-	import { dismissable } from './actions'
-
-	function dismissAll() {
-		unreadAlerts.map((alert) => (alert.dismissed = true))
-		alerts.set([...$alerts])
-	}
-
-	function dismiss(alert) {
-		alert.dismissed = true
-		alerts.set([...$alerts])
-	}
-
-	$: unreadAlerts = $alerts.filter((x) => x.dismissed)
-</script>
-
-{#if unreadAlerts.length > 0}
-	<alert-list
-		class="absolute z-10 flex flex-col gap-2"
-		use:dismissable
-		on:dismiss={dismissAll}
-	>
-		{#each unreadAlerts as alert (alert.id)}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<alert
-				class={alert.type}
-				on:click|stopPropagation={dismiss(alert)}
-				animate:flip
-				in:fade
-				out:fade
-			>
-				{alert.message}
-			</alert>
-		{/each}
-	</alert-list>
-{/if}

package/src/BreadCrumbs.svelte

@@ -1,34 +0,0 @@
-<script>
-	import { defaultFields } from './constants'
-	import { Item } from './items'
-
-	export let items = []
-	export let separator = '/'
-	export let fields = defaultFields
-	export let using
-
-	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Item, ...(using ?? {}) }
-</script>
-
-<crumbs class="flex">
-	{#each items as item, index}
-		{#if item}
-			{@const component = item[fields.component]
-				? using[item[fields.component]] || using.default
-				: using.default}
-			{#if index > 0}
-				<span>
-					{#if separator.length == 1}
-						{separator}
-					{:else}
-						<icon class={separator} />
-					{/if}
-				</span>
-			{/if}
-			<crumb class:is-selected={index == items.length - 1}>
-				<svelte:component this={component} value={item} {fields} />
-			</crumb>
-		{/if}
-	{/each}
-</crumbs>

package/src/DropDown.svelte

@@ -1,82 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { dismissable } from './actions'
-	import { defaultFields, defaultStateIcons } from './constants.js'
-
-	import Icon from './Icon.svelte'
-	import Item from './items/Item.svelte'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = defaultFields
-	export let using = { default: Item }
-	export let value = null
-	export let title = null
-	export let icon = null
-	export let small = false
-
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let offsetTop = 0
-	let open = false
-	let icons = defaultStateIcons.selector
-
-	function handleSelect(event) {
-		open = false
-		dispatch('change', event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<drop-down
-	class="flex relative cursor-pointer select-none dropdown {className}"
-	class:open
-	tabindex="0"
-	aria-haspopup="true"
-	aria-controls="menu"
-	use:dismissable
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
->
-	<button
-		on:click|stopPropagation={() => (open = !open)}
-		class="flex items-center"
-		bind:clientHeight={offsetTop}
-		tabindex="-1"
-	>
-		{#if icon}
-			<Icon name={icon} />
-		{/if}
-		{#if !small && title}
-			<p class="w-full flex">{title}</p>
-		{/if}
-		{#if open}
-			<icon class={icons.opened} />
-		{:else}
-			<icon class={icons.closed} />
-		{/if}
-	</button>
-	{#if open}
-		<!-- <div
-			class="absolute z-10 menu h-fit w-full flex flex-col"
-			style:top="{offsetTop}px"
-		> -->
-		<Slider top={offsetTop}>
-			<List
-				{items}
-				{fields}
-				{using}
-				bind:value
-				on:select={handleSelect}
-				tabindex="-1"
-			/>
-		</Slider>
-		<!-- </div> -->
-	{/if}
-</drop-down>

package/src/DropSearch.svelte

@@ -1,67 +0,0 @@
-<script>
-	import { defaultFields } from './constants.js'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-	import { Item } from './items'
-
-	export let data
-	export let value = null
-	export let fields = defaultFields
-	export let using = { default: Item }
-
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let opened = false
-	let search
-	let searchBox
-
-	// on search change filter list
-	function handleSelect(event) {
-		console.log('selected', event)
-		value = event.detail
-		search = event.detail[fields.text]
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-	class="dropdown relative h-12 w-full flex flex-col outline-none"
-	tabindex={0}
->
-	<div class="selected-item h-12 flex flex-shrink-0 items-center pl-4">
-		<span class="flex flex-grow">
-			<input
-				type="text"
-				class="w-full border-none bg-transparent p-0"
-				bind:value={search}
-				bind:this={searchBox}
-				on:focus={() => {
-					opened = true
-					searchBox.select()
-				}}
-				on:blur={() => {
-					opened = false
-				}}
-			/>
-		</span>
-		{#if opened}
-			<icon class="selector-opened" />
-		{:else}
-			<icon class="selector-closed" />
-		{/if}
-	</div>
-
-	{#if opened}
-		<Slider>
-			<List
-				bind:items={data}
-				bind:value
-				{fields}
-				{using}
-				on:select={handleSelect}
-				on:change
-			/>
-		</Slider>
-	{/if}
-</div>

package/src/Icon.svelte

@@ -1,38 +0,0 @@
-<script>
-	let className = ''
-	export { className as class }
-	export let name
-	export let size = 'base'
-	export let role = 'img'
-	export let label = name
-	export let disabled = false
-	export let tabindex = 0
-	export let checked = null
-
-	$: tabindex = role === 'img' || disabled ? -1 : tabindex
-	$: small = size === 'small' || className.includes('small')
-	$: medium = size === 'medium' || className.includes('medium')
-	$: large = size === 'large' || className.includes('large')
-	$: checked = role !== 'checkbox' ? null : checked
-</script>
-
-<!-- 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}
-	aria-checked={checked}
-	on:mouseenter
-	on:mouseleave
-	on:focus
-	on:blur
-	on:click
-	on:keydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
-	{tabindex}
->
-	<i class={name} aria-hidden="true" />
-</icon>

package/src/List.svelte

@@ -1,66 +0,0 @@
-<script>
-	import { navigator } from './actions'
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Item } from './items'
-
-	const dispatch = createEventDispatcher()
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let tabindex = 0
-	export let hierarchy = []
-	let cursor = []
-
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		dispatch('select', { item: value, indices: cursor })
-	}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Item, ...using }
-	$: filtered = items.filter((item) => !item[fields.isDeleted])
-</script>
-
-<list
-	class="flex flex-col w-full flex-shrink-0 select-none {className}"
-	role="listbox"
-	use:navigator={{
-		items,
-		fields,
-		enabled: hierarchy.length == 0,
-		indices: cursor
-	}}
-	on:move={handleNav}
-	on:select={handleNav}
-	{tabindex}
->
-	<slot />
-	{#each filtered as item, index}
-		{@const component = item[fields.component]
-			? using[item[fields.component]] || using.default
-			: using.default}
-		{@const path = [...hierarchy, index].join(',')}
-		{@const props = item[fields.props] || { fields }}
-		<item
-			class="item w-full flex flex-shrink-0 flex-grow-0 cursor-pointer select-none items-center gap-2"
-			role="option"
-			aria-selected={value === item}
-			class:is-selected={value === item}
-			data-path={path}
-		>
-			<svelte:component
-				this={component}
-				bind:value={item}
-				{...props}
-				on:change
-			/>
-		</item>
-	{/each}
-</list>

package/src/NestedList.svelte

@@ -1,59 +0,0 @@
-<script>
-	import { Node, Item } from './items'
-	import { defaultFields, defaultStateIcons } from './constants'
-	import { getLineTypes } from './lib/connector'
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = defaultFields
-	export let using = {}
-	export let types = []
-	export let value = null
-	export let rtl = false
-	export let hierarchy = []
-	export let icons
-
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-	$: nodeTypes = items.map((_, index) =>
-		index === items.length - 1 ? 'last' : 'child'
-	)
-	$: icons = { ...defaultStateIcons.node, ...icons }
-</script>
-
-<nested-list
-	class="flex flex-col w-full {className}"
-	role="listbox"
-	class:rtl
-	tabindex="-1"
->
-	{#each items as item, index}
-		{@const hasChildren = fields.children in item}
-		{@const path = [...hierarchy, index]}
-		{@const connectors = getLineTypes(hasChildren, types, nodeTypes[index])}
-
-		<Node
-			bind:value={item}
-			{fields}
-			{using}
-			types={connectors}
-			{rtl}
-			{path}
-			stateIcons={icons}
-			selected={value === item}
-		/>
-		<!-- types={[...connectors, type, nodeTypes[index]]} -->
-		{#if hasChildren && item[fields.isOpen]}
-			<svelte:self
-				items={item[fields.children]}
-				bind:value
-				{fields}
-				{using}
-				{icons}
-				types={connectors}
-				hierarchy={path}
-			/>
-		{/if}
-	{/each}
-</nested-list>

package/src/Slider.svelte

@@ -1,17 +0,0 @@
-<script>
-	import { slide, fade } from 'svelte/transition'
-
-	let className = 'menu'
-	export { className as class }
-	export let top
-	export let offset = -top
-</script>
-
-<scroll
-	in:slide={{ duration: 50, y: offset }}
-	out:fade={{ duration: 50 }}
-	style:top="{top}px"
-	class="flex flex-col absolute w-full z-10 overflow-scroll {className}"
->
-	<slot />
-</scroll>