bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import {
3 type Middleware,
4 type Placement,
5 type Strategy,
6 flip,
7 offset,
8 shift,
9 } from '@floating-ui/dom'
10 import { Popover } from 'mono-svelte'
11 import type { Snippet } from 'svelte'
12 import type { Attachment } from 'svelte/attachments'
13
14 interface Props {
15 openOnHover?: boolean
16 open?: boolean
17 placement?: Placement
18 middleware?: Middleware[]
19 strategy?: Strategy
20 class?: string
21 target?: Snippet<[Attachment]>
22 children?: import('svelte').Snippet<[boolean]>
23 }
24
25 let {
26 openOnHover = false,
27 open = $bindable(false),
28 placement = 'bottom-start',
29 middleware = [offset(6), shift({ padding: 6 }), flip()],
30 strategy = 'absolute',
31 target,
32 children,
33 ...rest
34 }: Props = $props()
35</script>
36
37<Popover
38 {openOnHover}
39 {placement}
40 {middleware}
41 {strategy}
42 {target}
43 {...rest}
44 bind:open
45 popoverClass="rounded-xl w-full backdrop-blur-md max-w-72"
46>
47 {#snippet popover()}
48 <div
49 class="w-full max-w-sm max-h-128 overflow-auto list-none shadow-lg rounded-xl"
50 >
51 <div
52 class="flex flex-col p-1 list-none bg-white/80 dark:bg-zinc-900/90 rounded-xl
53 border border-slate-200 dark:border-zinc-800 gap-px"
54 role="menu"
55 >
56 {@render children?.(open)}
57 </div>
58 </div>
59 {/snippet}
60</Popover>