A self-hosted orchestration system crafted for power users. composia.xyz
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243<script lang="ts"> import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui"; import type { Snippet } from "svelte"; import Command from "./command.svelte"; import * as Dialog from "$lib/components/ui/dialog/index.js"; import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
let { open = $bindable(false), ref = $bindable(null), value = $bindable(""), title = "Command Palette", description = "Search for a command to run...", showCloseButton = false, portalProps, children, class: className, ...restProps }: WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & { portalProps?: DialogPrimitive.PortalProps; children: Snippet; title?: string; description?: string; showCloseButton?: boolean; class?: string; } = $props();</script>
<Dialog.Root bind:open {...restProps}> <Dialog.Header class="sr-only"> <Dialog.Title>{title}</Dialog.Title> <Dialog.Description>{description}</Dialog.Description> </Dialog.Header> <Dialog.Content class={cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className)} {showCloseButton} {portalProps} > <Command {...restProps} bind:value bind:ref {children} /> </Dialog.Content></Dialog.Root>