diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/ui/dialog')
9 files changed, 188 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-close.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-close.svelte new file mode 100644 index 0000000..e8a96a7 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-close.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + + let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props(); +</script> + +<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} /> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-content.svelte new file mode 100644 index 0000000..74df0ea --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-content.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + import XIcon from '@lucide/svelte/icons/x'; + import type { Snippet } from 'svelte'; + import * as Dialog from './index.js'; + import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + portalProps, + children, + showCloseButton = true, + ...restProps + }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & { + portalProps?: DialogPrimitive.PortalProps; + children: Snippet; + showCloseButton?: boolean; + } = $props(); +</script> + +<Dialog.Portal {...portalProps}> + <Dialog.Overlay /> + <DialogPrimitive.Content + bind:ref + data-slot="dialog-content" + class={cn( + `fixed top-[50%] left-[50%] z-50 grid max-h-[100dvh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border border-border/30 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg md:max-h-[100vh]`, + className + )} + {...restProps} + > + {@render children?.()} + {#if showCloseButton} + <DialogPrimitive.Close + class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" + > + <XIcon /> + <span class="sr-only">Close</span> + </DialogPrimitive.Close> + {/if} + </DialogPrimitive.Content> +</Dialog.Portal> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-description.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-description.svelte new file mode 100644 index 0000000..6c0c192 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-description.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: DialogPrimitive.DescriptionProps = $props(); +</script> + +<DialogPrimitive.Description + bind:ref + data-slot="dialog-description" + class={cn('text-sm text-muted-foreground', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-footer.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-footer.svelte new file mode 100644 index 0000000..abf948f --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-footer.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils'; + import type { HTMLAttributes } from 'svelte/elements'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="dialog-footer" + class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-header.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-header.svelte new file mode 100644 index 0000000..7ba9ba1 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-header.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import type { HTMLAttributes } from 'svelte/elements'; + import { cn, type WithElementRef } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="dialog-header" + class={cn('flex flex-col gap-2 text-center sm:text-left', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-overlay.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-overlay.svelte new file mode 100644 index 0000000..a6e9a10 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-overlay.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: DialogPrimitive.OverlayProps = $props(); +</script> + +<DialogPrimitive.Overlay + bind:ref + data-slot="dialog-overlay" + class={cn( + 'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', + className + )} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-title.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-title.svelte new file mode 100644 index 0000000..e8c99c5 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-title.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: DialogPrimitive.TitleProps = $props(); +</script> + +<DialogPrimitive.Title + bind:ref + data-slot="dialog-title" + class={cn('text-lg leading-none font-semibold', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-trigger.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-trigger.svelte new file mode 100644 index 0000000..ac04d9f --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/dialog-trigger.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + import { Dialog as DialogPrimitive } from 'bits-ui'; + + let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props(); +</script> + +<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} /> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/index.ts new file mode 100644 index 0000000..d9e5fb8 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/dialog/index.ts @@ -0,0 +1,37 @@ +import { Dialog as DialogPrimitive } from 'bits-ui'; + +import Title from './dialog-title.svelte'; +import Footer from './dialog-footer.svelte'; +import Header from './dialog-header.svelte'; +import Overlay from './dialog-overlay.svelte'; +import Content from './dialog-content.svelte'; +import Description from './dialog-description.svelte'; +import Trigger from './dialog-trigger.svelte'; +import Close from './dialog-close.svelte'; + +const Root = DialogPrimitive.Root; +const Portal = DialogPrimitive.Portal; + +export { + Root, + Title, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + Close, + // + Root as Dialog, + Title as DialogTitle, + Portal as DialogPortal, + Footer as DialogFooter, + Header as DialogHeader, + Trigger as DialogTrigger, + Overlay as DialogOverlay, + Content as DialogContent, + Description as DialogDescription, + Close as DialogClose +}; |