@rokkit/ui 1.0.0-next.124 → 1.0.0-next.127

package/src/CheckBox.svelte

@@ -1,56 +0,0 @@
-<script>
-	import { defaultStateIcons } from '@rokkit/core'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} [id]
-	 * @property {any} name
-	 * @property {boolean} [value]
-	 * @property {boolean} [readOnly]
-	 * @property {any} [stateIcons]
-	 * @property {number} [tabindex]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		id = null,
-		name,
-		value = $bindable(false),
-		readOnly = false,
-		stateIcons = defaultStateIcons.checkbox,
-		tabindex = 0
-	} = $props()
-
-	let state = $derived(value === null ? 'unknown' : value ? 'checked' : 'unchecked')
-
-	function toggle(event) {
-		event.preventDefault()
-		event.stopPropagation()
-		value = !value
-	}
-	function handleClick(event) {
-		if (!readOnly) toggle(event)
-	}
-	function handleKeydown(event) {
-		if (readOnly) return
-		if (event.key === 'Enter' || event.key === ' ') toggle(event)
-	}
-</script>
-
-<rk-checkbox
-	{id}
-	class={classes}
-	class:disabled={readOnly}
-	role="checkbox"
-	aria-checked={state}
-	aria-disabled={readOnly}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	{tabindex}
->
-	<input hidden type="checkbox" {name} {readOnly} bind:checked={value} />
-
-	<icon class={stateIcons[state]}></icon>
-</rk-checkbox>

package/src/Connector.svelte

@@ -1,40 +0,0 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {import('./types.js').ConnectionType} [type]
-	 * @property {boolean} [rtl=false]
-	 */
-
-	/** @type {Props} */
-	let { type = $bindable('empty'), rtl = false } = $props()
-	let validatedType = $derived(['last', 'child', 'sibling'].includes(type) ? type : 'empty')
-</script>
-
-<span
-	class="grid h-full w-4 min-w-4 grid-cols-2 grid-rows-2"
-	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}
-			<i class="border-b border-r"></i>
-		{:else}
-			<i class="border-r"></i>
-			<i class="border-b"></i>
-		{/if}
-	{:else if validatedType === 'child'}
-		{#if rtl}
-			<i class="row-span-2 grid grid-rows-2 border-r">
-				<i class="border-b"></i>
-			</i>
-		{:else}
-			<i class="col-span-1 row-span-2 border-r"></i>
-			<i class="border-b"></i>
-		{/if}
-	{:else if validatedType === 'sibling'}
-		<i class="row-span-2 border-r"></i>
-	{/if}
-</span>

package/src/DropDown.svelte

@@ -1,68 +0,0 @@
-<script>
-	import { defaultFields, defaultStateIcons } from '@rokkit/core'
-	import { dismissable } from '@rokkit/actions'
-	import Icon from './Icon.svelte'
-	import Slider from './Slider.svelte'
-	import Item from './Item.svelte'
-	import List from './List.svelte'
-
-	let {
-		class: className,
-		options = [],
-		fields = defaultFields,
-		using = { default: Item },
-		value = null,
-		title = null,
-		icon = null,
-		small = false,
-		disabled = false
-	} = $props()
-
-	using = { default: Item, ...using }
-	fields = { ...defaultFields, ...fields }
-
-	let offsetTop = $state(0)
-	let open = $state(false)
-	let icons = defaultStateIcons.selector
-
-	function handleSelect(event) {
-		open = false
-		// dispatch('change', event.detail)
-	}
-</script>
-
-<drop-down
-	class="dropdown relative flex cursor-pointer select-none {className}"
-	class:open
-	aria-haspopup="true"
-	aria-controls="menu"
->
-	<button
-		class="flex items-center"
-		bind:clientHeight={offsetTop}
-		tabindex="0"
-		use:dismissable
-		ondismiss={() => (open = false)}
-		onfocus={() => (open = true)}
-		onblur={() => (open = false)}
-	>
-		<span class="flex items-center">
-			{#if icon !== null}
-				<Icon name={icon} />
-			{/if}
-			{#if !small && title}
-				<p class="flex w-full">{title}</p>
-			{/if}
-			{#if open}
-				<Icon name={icons.opened} />
-			{:else}
-				<Icon name={icons.closed} />
-			{/if}
-		</span>
-	</button>
-	{#if open}
-		<Slider top={offsetTop + 4}>
-			<List items={options} {fields} {using} bind:value onselect={handleSelect} tabindex="-1" />
-		</Slider>
-	{/if}
-</drop-down>

package/src/DropSearch.svelte

@@ -1,37 +0,0 @@
-<script>
-	import { defaultFields, getText } from '@rokkit/core'
-	import Select from './Select.svelte'
-
-	let { options, name, value, fields = defaultFields, ...restProps } = $props()
-
-	let searchText = $state('')
-	let searchBox
-	let filtered = $state(options)
-
-	fields = { ...defaultFields, ...fields }
-
-	function applySearch(event) {
-		searchText = event.target.value
-		if (searchText) {
-			filtered = options.filter((option) =>
-				getText(option, fields).toLowerCase().includes(searchText.toLowerCase())
-			)
-		} else filtered = options
-	}
-	function handleSelect(event) {
-		value = event.detail
-		searchText = getText(event.detail, fields)
-	}
-</script>
-
-<Select {name} bind:value bind:options={filtered} {...restProps} {fields} onselect={handleSelect}>
-	<span class="flex flex-grow">
-		<input
-			type="text"
-			class="w-full border-none bg-transparent p-0"
-			bind:value={searchText}
-			bind:this={searchBox}
-			onchange={applySearch}
-		/>
-	</span>
-</Select>

package/src/Fillable.svelte

@@ -1,19 +0,0 @@
-<script>
-	import { marked } from 'marked'
-	import { mangle } from 'marked-mangle'
-	import { gfmHeadingId } from 'marked-gfm-heading-id'
-	import { fillable } from '@rokkit/actions'
-
-	export let text = ''
-	export let options = []
-	export let current = 0
-	export let check = false
-
-	marked.use(mangle())
-	marked.use(gfmHeadingId())
-</script>
-
-<!--  eslint-disable svelte/no-at-html-tags -->
-<div use:fillable={{ options, current, check }} on:remove class="flex-grow">
-	{@html marked(text)}
-</div>

package/src/GraphPaper.svelte

@@ -1,43 +0,0 @@
-<script>
-	let {
-		class: className = '',
-		unit = '.5rem',
-		majorGridSize = 5,
-		minorGridThickness = 0.5,
-		majorGridThickness = 0.5,
-		children
-	} = $props()
-</script>
-
-<div
-	data-graph-paper
-	class="flex flex-col {className}"
-	style:--unit={unit}
-	style:--size="calc( {majorGridSize} * {unit})"
-	style:--minor-grid="{minorGridThickness}px"
-	style:--major-grid="{majorGridThickness}px"
->
-	<content class="flex flex-col">
-		{@render children?.()}
-	</content>
-</div>
-
-<style>
-	[data-graph-paper] {
-		background-image:
-			linear-gradient(currentColor var(--major-grid), transparent var(--major-grid)),
-			linear-gradient(90deg, currentColor var(--major-grid), transparent var(--major-grid)),
-			linear-gradient(currentColor var(--minor-grid), transparent var(--minor-grid)),
-			linear-gradient(90deg, currentColor var(--minor-grid), transparent var(--minor-grid));
-		background-size:
-			var(--size) var(--size),
-			var(--size) var(--size),
-			var(--unit) var(--unit),
-			var(--unit) var(--unit);
-		background-position:
-			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
-			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
-			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid)),
-			calc(-1 * var(--minor-grid)) calc(-1 * var(--minor-grid));
-	}
-</style>

package/src/Icon.svelte

@@ -1,81 +0,0 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {any} name
-	 * @property {any} [state]
-	 * @property {string} [size]
-	 * @property {'img'|'button'|'checkbox'|'option'} [role]
-	 * @property {any} [label]
-	 * @property {boolean} [disabled]
-	 * @property {number} [tabindex]
-	 * @property {any} [checked]
-	 * @event {MouseEvent} [onclick]
-	 * @event {CustomEvent} [onchange]
-	 * @event {MouseEvent} [onmouseenter]
-	 * @event {MouseEvent} [onmouseleave]
-	 */
-
-	/** @type {Props} */
-	let {
-		ref = $bindable(),
-		class: classes = '',
-		name = '?',
-		state = null,
-		size = 'base',
-		role = 'img',
-		label = null,
-		disabled = false,
-		tabindex = $bindable(0),
-		checked = $bindable(),
-		onclick,
-		onchange,
-		onmouseenter,
-		onmouseleave,
-		...restProps
-	} = $props()
-
-	function handleClick(e) {
-		if (role === 'img') return
-		e.preventDefault()
-
-		if (!disabled) {
-			if (isCheckbox) {
-				checked = !Boolean(checked)
-				onchange?.(checked)
-			}
-			onclick?.()
-		}
-	}
-
-	let isCheckbox = $derived(role === 'checkbox' || role === 'option')
-	let validatedTabindex = $derived(role === 'img' || disabled ? -1 : tabindex)
-	let ariaChecked = $derived(['checkbox', 'option'].includes(role) && checked)
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<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}
-	{role}
-	aria-label={label ?? name}
-	aria-checked={ariaChecked}
-	onclick={handleClick}
-	onkeydown={(e) => e.key === 'Enter' && e.currentTarget.click()}
-	tabindex={validatedTabindex}
-	{onmouseenter}
-	{onmouseleave}
-	{...restProps}
->
-	{#if name.length <= 2}
-		<span>{name}</span>
-	{:else}
-		<i class={name} aria-hidden="true"></i>
-	{/if}
-</icon>

package/src/Item.svelte

@@ -1,25 +0,0 @@
-<script>
-	import Icon from './Icon.svelte'
-	import { Proxy } from '@rokkit/states'
-	/**
-	 * @typedef {Object} Props
-	 * @property {import('@rokkit/states').NodeProxy} [value]
-	 */
-
-	/** @type {Props} */
-	let { value, fields, proxy = null } = $props()
-	let proxyItem = $derived(proxy ?? new Proxy(value, fields))
-	let content = $derived(proxyItem.get('text'))
-	let ariaLabel = $derived(proxyItem.get('label') ?? content)
-	let icon = $derived(proxyItem.get('icon'))
-	let image = $derived(proxyItem.get('image'))
-</script>
-
-{#if icon}
-	<Icon name={icon} label={ariaLabel} />
-{:else if image}
-	<img src={image} alt={ariaLabel} />
-{/if}
-{#if content}
-	<p>{content}</p>
-{/if}

package/src/Link.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { FieldMapper } from '@rokkit/core'
-	import Item from './Item.svelte'
-	/**
-	 * @typedef {Object} Props
-	 * @property {string}        [class]
-	 * @property {string|Object} [value]
-	 * @property {FieldMapper}   [mapping]
-	 * @property {string}        [href]
-	 * @property {Object}        [rest]
-	 */
-
-	/** @type {Props} */
-	let { class: classes = '', value, mapping = new FieldMapper(), href = '#', ...rest } = $props()
-	let url = $derived(mapping.get('href', value, href))
-	let props = $derived({ ...mapping.get('props', value, {}), ...rest })
-</script>
-
-<a href={url} class={classes} {...props}>
-	<Item {value} {mapping} />
-</a>

package/src/List.svelte

@@ -1,89 +0,0 @@
-<script>
-	import { createEmitter } from '@rokkit/core'
-	import { navigator } from '@rokkit/actions'
-	import ListBody from './ListBody.svelte'
-	import { ListController } from '@rokkit/states'
-	import { omit, has } from 'ramda'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [class]
-	 * @property {string} [name]
-	 * @property {any} [items]
-	 * @property {import('@rokkit/core').FieldMapping} [fields]
-	 * @property {any} [value]
-	 * @property {number} [tabindex]
-	 * @property {any} [hierarchy]
-	 * @property {import('svelte').Snippet} [children]
-	 */
-
-	/** @type {Props} */
-	let {
-		class: classes = '',
-		name = 'list',
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		tabindex = 0,
-		hierarchy = [],
-		multiSelect = false,
-		header,
-		footer,
-		empty,
-		onselect,
-		onchange,
-		onmove,
-		...snippets
-	} = $props()
-
-	let selected = $state([])
-
-	function handleAction(event) {
-		const { name, data } = event.detail
-
-		if (has(name, emitter)) {
-			value = data.value
-			selected = data.selected
-			emitter[name](data)
-		}
-	}
-
-	let emitter = createEmitter({ onchange, onmove, onselect }, ['select', 'change', 'move'])
-	let wrapper = new ListController(items, value, fields, { multiSelect })
-</script>
-
-<div
-	data-list
-	class={classes}
-	role="listbox"
-	aria-label={name}
-	use:navigator={{ wrapper }}
-	{tabindex}
-	onaction={handleAction}
->
-	{#if header}
-		<div data-list-header>{@render header()}</div>
-	{/if}
-	<div data-list-body>
-		{#if items.length === 0}
-			{#if empty}
-				{@render empty()}
-			{:else}
-				<p>No items found.</p>
-			{/if}
-		{:else}
-			<ListBody
-				bind:items
-				bind:value
-				{fields}
-				selectedKeys={wrapper.selectedKeys}
-				focusedKey={wrapper.focusedKey}
-				onchange={emitter.change}
-				{snippets}
-			/>
-		{/if}
-	</div>
-	{#if footer}
-		<div data-list-footer>{@render footer()}</div>
-	{/if}
-</div>

package/src/ListBody.svelte

@@ -1,43 +0,0 @@
-<script>
-	import { getKeyFromPath, FieldMapper, getSnippet } from '@rokkit/core'
-	import Item from './Item.svelte'
-	import { equals } from 'ramda'
-
-	let {
-		items = $bindable([]),
-		value = null,
-		fields,
-		path = [],
-		onchange = () => {},
-		selectedKeys = new SvelteSet(),
-		focusedKey = null,
-		snippets = {}
-	} = $props()
-	let fm = $derived.by(() => {
-		return new FieldMapper(fields)
-	})
-</script>
-
-{#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) || {}}
-	<div
-		data-list-item
-		role="option"
-		data-path={pathKey}
-		aria-selected={selectedKeys.has(pathKey)}
-		aria-current={focusedKey === pathKey}
-	>
-		<svelte:boundary>
-			{#if template}
-				{@render template(item, props, onchange)}
-				{#snippet failed()}
-					<Item value={item} {fields} />
-				{/snippet}
-			{:else}
-				<Item value={item} {fields} />
-			{/if}
-		</svelte:boundary>
-	</div>
-{/each}

package/src/Message.svelte

@@ -1,11 +0,0 @@
-<script>
-	let { text = null, type = 'error', children } = $props()
-</script>
-
-<rk-message class={type}>
-	{#if children}
-		{@render children()}
-	{:else}
-		{text}
-	{/if}
-</rk-message>

package/src/MultiSelect.svelte

@@ -1,48 +0,0 @@
-<script>
-	import Select from './Select.svelte'
-	import Item from './Item.svelte'
-	import { defaultFields } from '@rokkit/core'
-
-	let className = ''
-	export { className as class }
-	export let name
-	export let value = []
-	export let options = []
-	/** @type {import('@rokkit/core').FieldMapping} */
-	export let fields = {}
-	export let using = {}
-	export let placeholder = ''
-
-	$: available = options.filter((item) => !value.includes(item))
-
-	function handleRemove(event) {
-		value = [...value.filter((item) => item !== event.detail)]
-	}
-	function handleSelect(event) {
-		if (!value.includes(event.detail)) value = [...value, event.detail]
-	}
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-</script>
-
-<Select
-	{name}
-	options={available}
-	{fields}
-	{using}
-	on:select={handleSelect}
-	class={className}
-	{placeholder}
->
-	{#if value.length > 0}
-		<items class="flex flex-wrap">
-			{#each value as item, index (index)}
-				<Item value={item} {fields} {using} removable on:remove={handleRemove} class="pill" />
-			{/each}
-		</items>
-	{:else}
-		<item class="flex w-full">
-			<svelte:component this={using.default} value={placeholder} />
-		</item>
-	{/if}
-</Select>

package/src/NestedList.svelte

@@ -1,78 +0,0 @@
-<script>
-	import { SvelteSet } from 'svelte/reactivity'
-	import {
-		defaultStateIcons,
-		getLineTypes,
-		getKeyFromPath,
-		getNestedFields,
-		hasChildren
-	} from '@rokkit/core'
-	import Node from './Node.svelte'
-	import NestedList from './NestedList.svelte'
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {Array<NodeProxy>}                   [items=[]]
-	 * @property {any}                                [value=null]
-	 * @property {import('./types').FieldMapping}     fields
-	 * @property {number[]}                           [path=[]]
-	 * @property {import('./types').NodeStateIcons}   icons
-	 * @property {import('./types').ConnectionType[]} [types=[]]
-	 * @property {string}                             [focusedKey]
-	 * @property {SvelteSet}                          [selectedKeys]
-	 */
-
-	/** @type {Props} */
-	let {
-		items = $bindable([]),
-		value = $bindable(null),
-		fields,
-		path = [],
-		icons = {},
-		types = [],
-		focusedKey,
-		selectedKeys = new SvelteSet(),
-		stub,
-		snippets
-	} = $props()
-
-	const stateIcons = $derived({ ...defaultStateIcons.node, ...icons })
-	const childFields = $derived(getNestedFields(fields))
-	// $inspect(childFields, items[0], expandedKeys)
-</script>
-
-<rk-nested-list role="tree">
-	{#each items as item, index (index)}
-		{@const nodePath = [...path, index]}
-		{@const key = getKeyFromPath(nodePath)}
-		{@const expanded = item[fields.expanded]}
-		{@const nodeType = index === items.length - 1 ? 'last' : 'child'}
-		{@const connectors = getLineTypes(hasChildren(item, fields), types, nodeType)}
-
-		<Node
-			value={item}
-			{fields}
-			{stateIcons}
-			types={connectors}
-			focused={focusedKey === key}
-			selected={selectedKeys.has(key)}
-			{expanded}
-			path={nodePath}
-			{stub}
-			{snippets}
-		>
-			{#if hasChildren(item, fields) && expanded}
-				<NestedList
-					items={item[fields.children]}
-					{value}
-					fields={childFields}
-					path={nodePath}
-					icons={stateIcons}
-					types={connectors}
-					{focusedKey}
-					{selectedKeys}
-				/>
-			{/if}
-		</Node>
-	{/each}
-</rk-nested-list>