Sortable

<script lang="ts">
	// With @svelte-lean/vite the register import is injected for the static data-slean="sortable".
	import '@svelte-lean/styles/sortable.css';
	import '@svelte-lean/styles/button.css';

	// The first render only: the behavior moves the item elements, hidden inputs included.
	const COLUMNS = [
		{ value: 'name', label: 'Name' },
		{ value: 'email', label: 'Email' },
		{ value: 'role', label: 'Role' },
		{ value: 'team', label: 'Team' },
		{ value: 'created', label: 'Created' }
	];

	let submitted = $state('');

	function submit(event: SubmitEvent) {
		event.preventDefault();
		const data = new FormData(event.currentTarget as HTMLFormElement);
		submitted = data.getAll('columns').join(', ');
	}
</script>

<form class="columns" onsubmit={submit}>
	<p id="sortable-columns-instructions" hidden>
		Press Alt and an arrow key to move an item. Drag a handle with a pointer.
	</p>
	<ul data-slean="sortable" aria-label="Columns">
		{#each COLUMNS as column (column.value)}
			<li data-slean-value={column.value}>
				<button
					type="button"
					data-slean-part="handle"
					aria-label="Move {column.label}"
					aria-describedby="sortable-columns-instructions"
					aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Alt+Home Alt+End"
				></button>
				{column.label}
				<input type="hidden" name="columns" value={column.value} />
			</li>
		{/each}
	</ul>
	<div class="actions">
		<button type="submit" data-slean="button">Save order</button>
		<output>{submitted ? `Submitted: ${submitted}` : 'Not submitted yet'}</output>
	</div>
</form>

<style>
	.columns {
		display: grid;
		gap: var(--slean-space-3);
		max-inline-size: 22rem;
	}

	.actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--slean-space-3);
	}

	output {
		font-size: var(--slean-text-sm);
		color: var(--slean-fg-muted);
	}
</style>

<script lang="ts">
	// With @svelte-lean/vite the register import is injected for the static data-slean="sortable".
	import '@svelte-lean/styles/sortable.css';
	import { sortableParts } from '@svelte-lean/primitives/sortable';

	const steps = sortableParts('sortable-steps');
	const STEPS = [
		{ value: 'draft', label: 'Draft' },
		{ value: 'review', label: 'Legal review' },
		{ value: 'approve', label: 'Approval' },
		{ value: 'publish', label: 'Publish' }
	];
</script>

<p {...steps.instructions}>
	Press Alt and an arrow key, or use the arrow buttons, to move a step. Drag a handle with a
	pointer.
</p>
<ol class="steps" data-slean="sortable" aria-label="Approval steps">
	{#each STEPS as step (step.value)}
		<li {...steps.item(step.value)}>
			<button {...steps.handle(step.label)}></button>
			<span class="label">{step.label}</span>
			<button {...steps.previous(step.label)}></button>
			<button {...steps.next(step.label)}></button>
		</li>
	{/each}
</ol>

<style>
	.steps {
		max-inline-size: 22rem;
	}

	.label {
		flex: 1;
	}
</style>

<script lang="ts">
	// With @svelte-lean/vite the register import is injected for the static data-slean="sortable".
	import '@svelte-lean/styles/sortable.css';
	import { sortableParts } from '@svelte-lean/primitives/sortable';

	const tabs = sortableParts('sortable-tabs', { orientation: 'horizontal' });
	const TABS = ['General', 'Security', 'Billing', 'Members'];
</script>

<p {...tabs.instructions}>
	Press Alt and an arrow key to move a tab. Drag a handle with a pointer.
</p>
<!-- A row does not wrap: on a narrow screen it scrolls. -->
<div class="row">
	<ul data-slean="sortable" data-slean-orientation="horizontal" aria-label="Tab order">
		{#each TABS as tab (tab)}
			<li {...tabs.item(tab.toLowerCase())}>
				<button {...tabs.handle(tab)}></button>
				{tab}
			</li>
		{/each}
	</ul>
</div>

<style>
	.row {
		overflow-x: auto;
		padding-block: var(--slean-space-2);
	}
</style>

<script lang="ts">
	// With @svelte-lean/vite the register import is injected for the static data-slean="sortable".
	import '@svelte-lean/styles/sortable.css';
	import { moveItem, sortableParts } from '@svelte-lean/primitives/sortable';
	import '@svelte-lean/styles/button.css';

	const sections = sortableParts('sortable-sections');
	const SECTIONS = [
		{ value: 'general', label: 'General' },
		{ value: 'security', label: 'Security' },
		{ value: 'billing', label: 'Billing' },
		{ value: 'members', label: 'Members' },
		{ value: 'limits', label: 'Limits' }
	];
	const label = (value: string) =>
		SECTIONS.find((section) => section.value === value)?.label ?? value;

	// The application owns the order; the behavior only asks for a move.
	let order = $state(SECTIONS.map((section) => section.value));
	let list: HTMLElement | undefined = $state();
</script>

<p {...sections.instructions}>
	Press Alt and an arrow key to move a section. Drag a handle with a pointer.
</p>
<ul
	class="sections"
	bind:this={list}
	data-slean="sortable"
	data-slean-render="app"
	data-slean-announce={'{label} is now {position} of {count}'}
	aria-label="Sections"
	onslean:change={(event) => {
		if (event.detail.behavior === 'sortable') order = event.detail.value;
	}}
>
	{#each order as value (value)}
		<li {...sections.item(value)}>
			<button {...sections.handle(label(value))}></button>
			{label(value)}
		</li>
	{/each}
</ul>
<div class="state">
	<button
		type="button"
		data-slean="button"
		data-variant="outlined"
		onclick={() => list && moveItem(list, 'limits', 0)}>Move Limits first</button
	>
	<p>State: <code>{JSON.stringify(order)}</code></p>
</div>

<style>
	.sections {
		max-inline-size: 22rem;
	}

	.state {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--slean-space-3);
		margin-block-start: var(--slean-space-3);
	}

	.state p {
		margin: 0;
		font-size: var(--slean-text-sm);
	}
</style>