mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-09-23 11:29:05 +02:00
43 lines
1.3 KiB
Svelte
43 lines
1.3 KiB
Svelte
<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/style.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-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0', className)}
|
|
{showCloseButton}
|
|
{portalProps}
|
|
>
|
|
<Command {...restProps} bind:value bind:ref {children} />
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|