combobox

1---
2import type { HTMLAttributes } from "astro/types"
3import type {
4  Align as ComboboxAlign,
5  Side as ComboboxSide,
6} from "@data-slot/combobox"
7 
8import { cn } from "@/lib/utils"
9 
10type Props = HTMLAttributes<"div"> & {
11  defaultValue?: string
12  placeholder?: string
13  disabled?: boolean
14  required?: boolean
15  name?: string
16  openOnFocus?: boolean
17  autoHighlight?: boolean
18  side?: ComboboxSide
19  align?: ComboboxAlign
20  sideOffset?: number
21  alignOffset?: number
22  avoidCollisions?: boolean
23  collisionPadding?: number
24}
25 
26const {
27  class: className,
28  defaultValue,
29  placeholder,
30  disabled,
31  required,
32  name,
33  openOnFocus,
34  autoHighlight,
35  side,
36  align,
37  sideOffset,
38  alignOffset,
39  avoidCollisions,
40  collisionPadding,
41  ...props
42} = Astro.props
43---
44 
45<div
46  data-slot="combobox"
47  data-default-value={defaultValue}
48  data-placeholder={placeholder}
49  data-disabled={disabled}
50  data-required={required}
51  data-name={name}
52  data-open-on-focus={openOnFocus}
53  data-auto-highlight={autoHighlight}
54  data-side={side}
55  data-align={align}
56  data-side-offset={sideOffset}
57  data-align-offset={alignOffset}
58  data-avoid-collisions={avoidCollisions}
59  data-collision-padding={collisionPadding}
60  class={cn("group/combobox relative", className)}
61  {...props}
62>
63  <slot />
64</div>
65 
66<script>
67  import { createCombobox } from "@data-slot/combobox"
68 
69  const initCombobox = () => {
70    document.querySelectorAll('[data-slot="combobox"]').forEach((root) => {
71      if (
72        !root.querySelector('[data-slot="combobox-input"]') ||
73        !root.querySelector('[data-slot="combobox-content"]')
74      ) {
75        return
76      }
77 
78      createCombobox(root as HTMLElement)
79    })
80  }
81 
82  initCombobox()
83 
84  document.addEventListener("astro:page-load", initCombobox)
85</script>