@rokkit/ui 1.0.0-next.100 → 1.0.0-next.106

package/src/NestedList.svelte

@@ -0,0 +1,68 @@
+<script>
+	import { equals } from 'ramda'
+	import { defaultStateIcons, getLineTypes, getKeyFromPath } from '@rokkit/core'
+	import { defaultMapping } from './constants'
+	import Node from './Node.svelte'
+	import NestedList from './NestedList.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {Array<any>} [items]
+	 * @property {import('@rokkit/core').FieldMapping} [mapping]
+	 * @property {import('./types').ConnectionType[]} [types]
+	 * @property {any} [value]
+	 * @property {number[]} [hierarchy]
+	 * @property {import('./types').NodeStateIcons} icons
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		items = $bindable([]),
+		wrapper = $bindable(),
+		mapping = defaultMapping,
+		types = [],
+		value = $bindable(null),
+		hierarchy = [],
+		icons = {}
+	} = $props()
+
+	const stateIcons = $derived({ ...defaultStateIcons.node, ...icons })
+</script>
+
+<rk-nested-list class={classes} role="tree">
+	{#each items as item, index}
+		{@const hasChildren = mapping.hasChildren(item)}
+		{@const indexPath = [...hierarchy, index]}
+		{@const nodeType = index === items.length - 1 ? 'last' : 'child'}
+		{@const connectors = getLineTypes(hasChildren, types, nodeType)}
+		{@const selected = wrapper.selected.has(getKeyFromPath(indexPath))}
+		{@const expanded = mapping.isExpanded(items[index])}
+
+		<Node
+			value={items[index]}
+			{mapping}
+			types={connectors}
+			path={indexPath}
+			{stateIcons}
+			{selected}
+			{expanded}
+			current={equals(wrapper.currentNode, item)}
+		>
+			{#if expanded}
+				<!-- <div role="treeitem" aria-selected={false}> -->
+				<NestedList
+					items={item[mapping.fields.children]}
+					{value}
+					{wrapper}
+					{mapping}
+					icons={stateIcons}
+					types={connectors}
+					hierarchy={indexPath}
+				/>
+				<!-- </div> -->
+			{/if}
+		</Node>
+	{/each}
+</rk-nested-list>

package/src/Node.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { defaultStateIcons, getKeyFromPath } from '@rokkit/core'
+	import { defaultMapping } from './constants'
+	import Icon from './Icon.svelte'
+	import Connector from './Connector.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} value
+	 * @property {import('@rokkit/core').FieldMapper} [mapping]
+	 * @property {any} [types]
+	 * @property {import('./types').NodeStateIcons} [stateIcons]
+	 * @property {boolean} [selected]
+	 * @property {boolean} [expanded]
+	 * @property {number[]} [path]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		value = $bindable(),
+		mapping = defaultMapping,
+		types = [],
+		stateIcons = defaultStateIcons.node,
+		selected = $bindable(false),
+		expanded = false,
+		current = false,
+		path = [],
+		children
+	} = $props()
+
+	let icons = $derived({ ...defaultStateIcons.node, ...stateIcons })
+	let stateName = $derived(expanded ? 'opened' : 'closed')
+	let state = $derived(
+		expanded ? { icon: icons.opened, label: 'collapse' } : { icon: icons.closed, label: 'expand' }
+	)
+
+	const Template = $derived(mapping.getComponent(value))
+</script>
+
+<rk-node
+	class={classes}
+	aria-current={current}
+	aria-selected={selected}
+	aria-expanded={state.label === 'collapse'}
+	role="treeitem"
+	data-path={getKeyFromPath(path)}
+	data-depth={path.length}
+>
+	<div class="flex flex-row items-center">
+		{#each types as type}
+			{#if type === 'icon'}
+				<Icon name={state.icon} label={state.label} state={stateName} class="w-4" size="small" />
+			{:else}
+				<Connector {type} />
+			{/if}
+		{/each}
+		<rk-item>
+			<Template {value} {mapping} />
+		</rk-item>
+	</div>
+	{@render children?.()}
+</rk-node>

package/src/Overlay.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { dismissable } from '@rokkit/actions'
+	let { children } = $props()
+	let dismissed = $state(false)
+	let ondismiss = () => {
+		dismissed = true
+	}
+</script>
+
+<rk-overlay
+	class="absolute left-0 top-0 h-screen w-screen"
+	role="presentation"
+	class:z-1={!dismissed}
+	class:display-none={dismissed}
+	aria-hidden="true"
+	onclick={ondismiss}
+	use:dismissable
+	{ondismiss}
+>
+	{@render children?.()}
+</rk-overlay>

package/src/Pill.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { FieldMapper, noop } from '@rokkit/core'
+	import Item from './Item.svelte'
+	import Icon from './Icon.svelte'
+	import { keyboard } from '@rokkit/actions'
+
+	/**
+	 * @type {Object} Props
+	 * @property {string|Object} [value]
+	 * @property {FieldMapper}   [mapping]
+	 * @property {boolean} [removable]
+	 * @property {boolean} [disabled]
+	 */
+
+	/** @type {Props} */
+	let {
+		value,
+		class: classes = '',
+		mapping = new FieldMapper(),
+		removable = false,
+		disabled = false,
+		onremove = noop
+	} = $props()
+
+	const keyMappings = {
+		remove: ['Delete', 'Backspace']
+	}
+
+	function handle(event) {
+		if (!disabled) onremove(value)
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<rk-pill use:keyboard={keyMappings} onremove={handle} tabindex="0" class={classes}>
+	<Item {value} {mapping}></Item>
+	{#if removable}
+		<Icon name="action-close" role="button" aria-label="Remove" {disabled} onclick={handle} small
+		></Icon>
+	{/if}
+</rk-pill>

package/src/ProgressBar.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { isNil } from 'ramda'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [value]
+	 * @property {any} [max]
+	 * @property {string} [height]
+	 * @property {number} [width]
+	 */
+
+	/** @type {Props} */
+	let { class: classes = '', value = null, max = 100, height = '1.5mm' } = $props()
+
+	let indeterminate = $derived(isNil(value) || isNil(max))
+	let percentage = $derived(indeterminate ? '100%' : `${(value * 100) / max}%`)
+</script>
+
+<rk-progress class:indeterminate class={classes} style:height>
+	<value-bar class="h-full" style:width={percentage}></value-bar>
+</rk-progress>

package/src/RadioGroup.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { equals } from 'ramda'
+	import { defaultStateIcons } from '@rokkit/core'
+	import { defaultMapping } from './constants'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} value
+	 * @property {any} name
+	 * @property {any} [id]
+	 * @property {import('@rokkit/core).FieldMapper} [mapping]
+	 * @property {any} [options]
+	 * @property {boolean} [readOnly]
+	 * @property {boolean} [textAfter]
+	 * @property {any} [stateIcons]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: className = '',
+		value = $bindable(),
+		name,
+		id = null,
+		mapping = $bindable(defaultMapping),
+		options = [],
+		readOnly = false,
+		textAfter = true,
+		stateIcons = defaultStateIcons.radio
+	} = $props()
+
+	let flexDirection = $derived(textAfter ? 'flex-row' : 'flex-row-reverse')
+</script>
+
+<rk-radio-group
+	{id}
+	class="flex cursor-pointer select-none flex-col {className}"
+	class:disabled={readOnly}
+>
+	{#each options as item}
+		{@const itemValue = mapping.getValue(item)}
+		{@const label = mapping.getText(item)}
+		{@const state = equals(itemValue, value) ? 'on' : 'off'}
+
+		<label class="flex {flexDirection} items-center gap-2">
+			<input hidden type="radio" {name} bind:group={value} value={itemValue} {readOnly} />
+			<icon class={stateIcons[state]}></icon>
+			<p>{label}</p>
+		</label>
+	{/each}
+</rk-radio-group>

package/src/Range.svelte

@@ -0,0 +1,45 @@
+<script>
+	import RangeMinMax from './RangeMinMax.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} [name]
+	 * @property {string} [class]
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 * @property {number} [value]
+	 * @property {number} [step]
+	 * @property {number} [ticks]
+	 * @property {number} [labelSkip]
+	 */
+
+	/** @type {Props} */
+	let {
+		name = null,
+		class: classes = '',
+		min = 0,
+		max = 100,
+		value = $bindable(min),
+		step = 1,
+		ticks = 10,
+		labelSkip = 0
+	} = $props()
+
+	let bounds = $state([min, value])
+
+	$effect(() => {
+		value = bounds[1]
+	})
+</script>
+
+<RangeMinMax
+	bind:value={bounds}
+	{name}
+	{min}
+	{max}
+	{step}
+	{ticks}
+	{labelSkip}
+	single
+	class={classes}
+/>

package/src/RangeMinMax.svelte

@@ -0,0 +1,124 @@
+<script>
+	import { generateTicks } from '@rokkit/core'
+	import { scaleLinear } from 'd3-scale'
+	import { onMount } from 'svelte'
+	import RangeTick from './RangeTick.svelte'
+	import RangeSlider from './RangeSlider.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class]
+	 * @property {any} [name]
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 * @property {[number,number]} [value]
+	 * @property {boolean} [single]
+	 * @property {number} [step]
+	 * @property {number} [ticks]
+	 * @property {number} [labelSkip]
+	 */
+
+	/** @type {Props} */
+	let {
+		class: classes = '',
+		name = null,
+		min = 0,
+		max = 100,
+		value = $bindable([min, min]),
+		single = false,
+		step = 1,
+		ticks = 10,
+		labelSkip = 0
+	} = $props()
+
+	let limits = $state([0, 0])
+	let lower = $state(min)
+	let upper = $state(min)
+	let scale = $state()
+	let width = $state()
+
+	let selectedPos = $derived(`${lower}px`)
+	let selectedWidth = $derived(`${upper - lower}px`)
+
+	function updateScale(width, min, max) {
+		if (width) {
+			limits = [0, width]
+			scale = scaleLinear().domain(limits).range([min, max])
+			lower = scale.invert(Math.max(value[0], min))
+			upper = scale.invert(value[1])
+		}
+	}
+	function handleClick(event) {
+		const distance = [Math.abs(event.detail - value[0]), Math.abs(event.detail - value[1])]
+		const index = single ? 1 : distance[0] < distance[1] ? 0 : 1
+
+		value[index] = event.detail
+		if (index === 0) {
+			lower = scale.invert(event.detail)
+		} else {
+			upper = scale.invert(event.detail)
+		}
+	}
+
+	let tickStep = $derived(Math.max(1, Math.round((max - min) / ticks)))
+	let tickItems = $derived(generateTicks(min, max, tickStep, labelSkip + 1))
+	let steps = $derived(
+		step > 0
+			? Array.from({ length: 1 + (max - min) / step }, (_, i) => Math.min(min + i * step, max))
+			: []
+	)
+	onMount(() => updateScale(width, min, max))
+</script>
+
+{#if !Array.isArray(value)}
+	<error>Expected value to be an array</error>
+{:else}
+	<rk-input-range class={classes}>
+		<input {name} type="hidden" bind:value />
+		<rk-range-track class="relative grid">
+			<rk-range-track-bar class="relative col-start-2 box-border" bind:clientWidth={width}>
+			</rk-range-track-bar>
+			<rk-selected-bar
+				class="absolute col-start-2"
+				style:left={selectedPos}
+				style:width={selectedWidth}
+			></rk-selected-bar>
+			{#if !single}
+				<RangeSlider
+					bind:cx={lower}
+					bind:value={value[0]}
+					{steps}
+					{scale}
+					min={limits[0]}
+					max={upper}
+				/>
+			{/if}
+			<RangeSlider
+				bind:cx={upper}
+				bind:value={value[1]}
+				{steps}
+				{scale}
+				min={lower}
+				max={limits[1]}
+			/>
+		</rk-range-track>
+
+		<rk-ticks style:--count={tickItems.length - 1}>
+			{#each tickItems as { value, label }}
+				<RangeTick {label} {value} on:click={handleClick} />
+			{/each}
+		</rk-ticks>
+	</rk-input-range>
+{/if}
+
+<style>
+	rk-range-track {
+		grid-template-columns: 0.5rem auto 0.5rem;
+	}
+	rk-ticks {
+		display: grid;
+		grid-gap: calc((100% - 1rem * (var(--count) + 1)) / var(--count));
+		grid-template-columns: repeat(var(--count), 1rem) 1rem;
+		grid-template-rows: 7px auto;
+	}
+</style>

package/src/RangeSlider.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { pannable } from '@rokkit/actions'
+
+	/**
+	 * @typedef Props
+	 * @property {number} min     - The minimum value of the thumb.
+	 * @property {number} max     - The maximum value of the thumb.
+	 * @property {number} value   - The current value of the thumb.
+	 * @property {number} cx      - The current position of the thumb.
+	 * @property {number[]} steps - An array of steps within a range.
+	 * @property {import('d3-scale').ScaleLinear} scale - Scale mapping the thumb's position to its value.
+	 */
+	/** @type {Props} */
+	let { min = 0, max = 100, value = $bindable(), cx = $bindable(), steps = [], scale } = $props()
+
+	function handlePanMove(event) {
+		let x = cx + event.detail.dx
+		let limits = [scale.invert(min), scale.invert(max)]
+
+		cx = Math.min(Math.max(x, limits[0]), limits[1])
+		if (steps.length > 0) {
+			const result = scale(x)
+			let index = 0
+			let matched = false
+			while (!matched && index < steps.length - 1) {
+				if (steps[index] <= result && steps[index + 1] > result) {
+					value =
+						result - steps[index] > steps[index + 1] - result ? steps[index + 1] : steps[index]
+					matched = true
+				}
+				index++
+			}
+		} else {
+			value = scale(cx)
+		}
+	}
+	function handlePanEnd() {
+		sliding = false
+		if (steps.length > 0) {
+			cx = scale.invert(value)
+		}
+	}
+	function handleKeyDown(event) {
+		if (steps.length === 0) {
+			const offset = (max - min) / 10
+			const step = event.key === 'ArrowLeft' ? -offset : event.key === 'ArrowRight' ? offset : 0
+			value = Math.min(Math.max(value + step, min), max)
+		} else {
+			const index = steps.findIndex((step) => step === value)
+			if (event.key === 'ArrowLeft' && index > 0) {
+				value = steps[index - 1]
+				cx = scale.invert(value)
+			} else if (event.key === 'ArrowRight' && index < steps.length - 1) {
+				value = steps[index + 1]
+				cx = scale.invert(value)
+			}
+		}
+	}
+	let sliding = $state(false)
+	let position = $derived(`${cx}px`)
+</script>
+
+<rk-thumb
+	class="absolute -top-1 box-border h-4 w-4 cursor-pointer"
+	style:left={position}
+	class:sliding
+	tabindex="0"
+	onfocus={() => (sliding = true)}
+	onblur={() => (sliding = false)}
+	use:pannable
+	onpanmove={handlePanMove}
+	onpanstart={() => (sliding = true)}
+	onpanend={handlePanEnd}
+	onkeydown={handleKeyDown}
+	role="slider"
+	aria-valuenow={value}
+	aria-valuemin={min}
+	aria-valuemax={max}
+></rk-thumb>

package/src/RangeTick.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { noop } from '@rokkit/core'
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [label]
+	 * @property {number} value
+	 * @property {boolean} [selected]
+	 * @property {Function} [onclick]
+	 */
+
+	/** @type {Props} */
+	let { label = null, value, selected = false, onclick = noop } = $props()
+	let text = $derived(label ?? value.toFixed(0))
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<rk-tick
+	class="grid cursor-pointer select-none grid-cols-2"
+	{onclick}
+	role="option"
+	aria-selected={selected}
+	tabindex="0"
+>
+	<rk-tick-bar class="h-5px col-start-2 border-l"></rk-tick-bar>
+	<p class="col-span-2 flex justify-center">
+		{text}
+	</p>
+</rk-tick>

package/src/Rating.svelte

@@ -0,0 +1,95 @@
+<script>
+	import { createEmitter, defaultStateIcons } from '@rokkit/core'
+	import Icon from './Icon.svelte'
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} [id]
+	 * @property {any} [name]
+	 * @property {number} [value]
+	 * @property {number} [max]
+	 * @property {boolean} [disabled]
+	 * @property {any} [stateIcons]
+	 * @property {string} [placeholder]
+	 * @property {number} [tabindex]
+	 * @event {CustomEvent} [onchange]
+	 */
+
+	/** @type {Props} */
+	let {
+		id = null,
+		name = null,
+		value = $bindable(0),
+		max = 5,
+		disabled = false,
+		stateIcons = defaultStateIcons.rating,
+		placeholder = 'Rating',
+		tabindex = 0,
+		...events
+	} = $props()
+
+	let emitter = $derived(createEmitter(events, ['change']))
+	function handleClick(index) {
+		if (!disabled) {
+			value = value === 1 && index === 0 ? index : index + 1
+			emitter.change({ value })
+		}
+	}
+	function handleEnter(index) {
+		if (!disabled) {
+			hoverIndex = index
+		}
+	}
+	function handleLeave() {
+		if (!disabled) {
+			hoverIndex = -1
+		}
+	}
+	function handleKeyDown(event) {
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+			event.preventDefault()
+			value = Math.max(value - 1, 0)
+		} else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+			event.preventDefault()
+			value = Math.min(value + 1, max)
+		} else {
+			var number = parseInt(event.code.replace('Digit', ''), 10)
+			if (number >= 0 && number <= 9 && number <= max) {
+				event.preventDefault()
+				value = number
+			}
+		}
+	}
+
+	let hoverIndex = $state(-1)
+	let stars = $derived([...Array(max).keys()].map((i) => i < value))
+</script>
+
+<rk-rating
+	{id}
+	class="flex cursor-pointer select-none"
+	class:disabled
+	{tabindex}
+	role="radiogroup"
+	onkeydown={handleKeyDown}
+>
+	{#if name}
+		<input {name} hidden type="number" bind:value min={0} {max} readOnly={disabled} />
+	{/if}
+	{#each stars as selected, index}
+		{@const stateIcon = selected ? stateIcons.filled : stateIcons.empty}
+		{@const label = [placeholder, index + 1, 'out of', max].join(' ')}
+		<Icon
+			name={stateIcon}
+			{label}
+			role="option"
+			{disabled}
+			checked={index < value}
+			class={index <= hoverIndex ? 'hovering' : ''}
+			onmouseenter={() => handleEnter(index)}
+			onmouseleave={handleLeave}
+			onclick={() => handleClick(index)}
+			tabindex="-1"
+		/>
+	{/each}
+</rk-rating>