command

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  label?: string
8  defaultValue?: string
9  defaultSearch?: string
10  shouldFilter?: boolean
11  loop?: boolean
12  disablePointerSelection?: boolean
13  vimBindings?: boolean
14}
15 
16const {
17  class: className,
18  label,
19  defaultValue,
20  defaultSearch,
21  shouldFilter,
22  loop,
23  disablePointerSelection,
24  vimBindings,
25  ...props
26} = Astro.props
27---
28 
29<div
30  data-slot="command"
31  data-label={label}
32  data-default-value={defaultValue}
33  data-default-search={defaultSearch}
34  data-should-filter={shouldFilter}
35  data-loop={loop}
36  data-disable-pointer-selection={disablePointerSelection}
37  data-vim-bindings={vimBindings}
38  class={cn(
39    "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
40    className
41  )}
42  {...props}
43>
44  <slot />
45</div>
46 
47<script>
48  import { create } from "@data-slot/command"
49 
50  const initCommand = () => {
51    create()
52 
53    document.querySelectorAll("[data-slot=command]").forEach((command) => {
54      if (!(command instanceof HTMLElement)) return
55      if (command.dataset.linkNavigation === "true") return
56 
57      command.dataset.linkNavigation = "true"
58      command.addEventListener("command:select", (event) => {
59        const { detail } = event as CustomEvent<{ value?: unknown }>
60        const value = detail?.value
61        if (typeof value !== "string") return
62 
63        const item = Array.from(
64          command.querySelectorAll("[data-slot=command-item][href]")
65        ).find((item) => item.getAttribute("data-value") === value)
66        const href = item?.getAttribute("href")
67 
68        if (href) window.location.href = href
69      })
70    })
71  }
72 
73  initCommand()
74 
75  document.addEventListener("astro:page-load", initCommand)
76</script>