diff options
Diffstat (limited to 'frontend/src/lib/selection/Selectable.svelte')
| -rw-r--r-- | frontend/src/lib/selection/Selectable.svelte | 26 |
1 files changed, 14 insertions, 12 deletions
diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte index 48b6ac7..4705f44 100644 --- a/frontend/src/lib/selection/Selectable.svelte +++ b/frontend/src/lib/selection/Selectable.svelte @@ -1,18 +1,20 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; + import type { Snippet } from 'svelte'; + import { getSelectionContext } from './Selection.svelte'; - export let id: number; - export let index: number; + interface Props { + id: number; + index: number; + edit?: ((id: number) => void) | undefined; + children?: Snippet<[{ onclick: (event: MouseEvent) => void; selected: boolean }]>; + } - export let edit: ((id: number) => void) | undefined = undefined; + let { id, index, edit = undefined, children }: Props = $props(); + let selection = getSelectionContext(); - const selection = getSelectionContext(); - - $: selected = $selection.contains(id); - - const handle = (event: MouseEvent) => { - if ($selection.active) { - $selection = $selection.update(index, event.shiftKey); + const onclick = (event: MouseEvent) => { + if (selection.active) { + selection.update(index, event.shiftKey); event.preventDefault(); } else if (edit) { edit(id); @@ -21,4 +23,4 @@ }; </script> -<slot {handle} {selected} /> +{@render children?.({ onclick, selected: selection.contains(id) })} |