popover

1---
2import type { HTMLAttributes } from "astro/types"
3import type { PopoverAlign, PopoverSide } from "@data-slot/popover"
4 
5type Props = HTMLAttributes<"div"> & {
6  defaultOpen?: boolean
7  side?: PopoverSide
8  align?: PopoverAlign
9  sideOffset?: number
10  alignOffset?: number
11  avoidCollisions?: boolean
12  collisionPadding?: number
13  portal?: boolean
14  position?: PopoverSide
15  closeOnClickOutside?: boolean
16  closeOnEscape?: boolean
17}
18 
19const {
20  class: className,
21  defaultOpen,
22  side,
23  align,
24  sideOffset,
25  alignOffset,
26  avoidCollisions,
27  collisionPadding,
28  portal,
29  position,
30  closeOnClickOutside,
31  closeOnEscape,
32  ...props
33} = Astro.props
34---
35 
36<div
37  data-slot="popover"
38  data-default-open={defaultOpen}
39  data-side={side}
40  data-align={align}
41  data-side-offset={sideOffset}
42  data-align-offset={alignOffset}
43  data-avoid-collisions={avoidCollisions}
44  data-collision-padding={collisionPadding}
45  data-portal={portal}
46  data-position={position}
47  data-close-on-click-outside={closeOnClickOutside}
48  data-close-on-escape={closeOnEscape}
49  class={className}
50  {...props}
51>
52  <slot />
53</div>
54 
55<script>
56  import { create } from "@data-slot/popover"
57 
58  create()
59</script>