Dynamic Select

1<script lang="ts">
2	import * as Popover from '$lib/components/ui/popover';
3	import { setDynamicSelectContext } from './ctx';
4	import type { Snippet } from 'svelte';
5
6	let {
7		value = $bindable(''),
8		open = $bindable(false),
9		children
10	}: {
11		value?: string;
12		open?: boolean;
13		children: Snippet;
14	} = $props();
15
16	let inputValue = $state('');
17
18	setDynamicSelectContext({
19		get value() {
20			return { value };
21		},
22		get open() {
23			return { value: open };
24		},
25		get inputValue() {
26			return { value: inputValue };
27		},
28		setValue: (v: string) => {
29			value = v;
30			open = false;
31		}
32	});
33</script>
34
35<Popover.Root bind:open>
36	{@render children()}
37</Popover.Root>