Walkthrough

1<script lang="ts">
2	import { setWalkthroughContext, type Step } from './ctx';
3	import WalkthroughSpotlight from './walkthrough-spotlight.svelte';
4	import WalkthroughContent from './walkthrough-content.svelte';
5	import type { Snippet } from 'svelte';
6 
7	let {
8		steps = [],
9		open = $bindable(false),
10		onComplete,
11		children,
12		padding
13	}: {
14		steps: Step[];
15		open: boolean;
16		onComplete?: () => void;
17		children?: Snippet<[any]>;
18		padding?: number;
19	} = $props();
20 
21	let currentStepIndex = $state(0);
22	let highlightRect = $state({ top: 0, left: 0, width: 0, height: 0 });
23 
24	const isLastStep = $derived(currentStepIndex === steps.length - 1);
25	const currentStep = $derived(steps[currentStepIndex]);
26 
27	function next() {
28		if (!isLastStep) currentStepIndex++;
29		else finish();
30	}
31 
32	function prev() {
33		if (currentStepIndex > 0) currentStepIndex--;
34	}
35 
36	function finish() {
37		open = false;
38		setTimeout(() => {
39			currentStepIndex = 0;
40			if (onComplete) onComplete();
41		}, 300);
42	}
43 
44	setWalkthroughContext({
45		isOpen: () => open,
46		currentStepIndex: () => currentStepIndex,
47		currentStep: () => currentStep,
48		isLastStep: () => isLastStep,
49		next,
50		prev,
51		close: () => (open = false)
52	});
53</script>
54 
55<WalkthroughSpotlight
56	{open}
57	top={highlightRect.top}
58	left={highlightRect.left}
59	width={highlightRect.width}
60	height={highlightRect.height}
61/>
62 
63{#if open && currentStep}
64	<WalkthroughContent
65		targetId={currentStep.target}
66		placement={currentStep.position}
67		onUpdateRect={(rect) => (highlightRect = rect)}
68		contentSnippet={children}
69		{padding}
70	/>
71{/if}