diff options
Diffstat (limited to 'frontend/src/lib/selection')
-rw-r--r-- | frontend/src/lib/selection/Selectable.svelte | 24 | ||||
-rw-r--r-- | frontend/src/lib/selection/SelectionOverlay.svelte | 34 |
2 files changed, 58 insertions, 0 deletions
diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte new file mode 100644 index 0000000..48b6ac7 --- /dev/null +++ b/frontend/src/lib/selection/Selectable.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + + export let id: number; + export let index: number; + + export let edit: ((id: number) => void) | undefined = undefined; + + const selection = getSelectionContext(); + + $: selected = $selection.contains(id); + + const handle = (event: MouseEvent) => { + if ($selection.active) { + $selection = $selection.update(index, event.shiftKey); + event.preventDefault(); + } else if (edit) { + edit(id); + event.preventDefault(); + } + }; +</script> + +<slot {handle} {selected} /> diff --git a/frontend/src/lib/selection/SelectionOverlay.svelte b/frontend/src/lib/selection/SelectionOverlay.svelte new file mode 100644 index 0000000..04ff382 --- /dev/null +++ b/frontend/src/lib/selection/SelectionOverlay.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + export let selected: boolean; + export let position: 'top' | 'right' | 'left' | 'bottom'; + export let centered = false; +</script> + +{#if selected} + <div + class:items-center={centered} + class="{position} pointer-events-none absolute z-[1] flex bg-emerald-700/95" + > + <span class="icon-base icon-[material-symbols--check] text-[2rem]" /> + </div> +{/if} + +<style lang="postcss"> + .top, + .bottom { + width: 100%; + } + + .left, + .right { + height: 100%; + } + + .bottom { + bottom: 0; + } + + .right { + right: 0; + } +</style> |