diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog')
10 files changed, 214 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte new file mode 100644 index 0000000..162107e --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte @@ -0,0 +1,18 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import { buttonVariants } from '$lib/components/ui/button/index.js'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: AlertDialogPrimitive.ActionProps = $props(); +</script> + +<AlertDialogPrimitive.Action + bind:ref + data-slot="alert-dialog-action" + class={cn(buttonVariants(), className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte new file mode 100644 index 0000000..6b3f354 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte @@ -0,0 +1,18 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import { buttonVariants } from '$lib/components/ui/button/index.js'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: AlertDialogPrimitive.CancelProps = $props(); +</script> + +<AlertDialogPrimitive.Cancel + bind:ref + data-slot="alert-dialog-cancel" + class={cn(buttonVariants({ variant: 'outline' }), className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte new file mode 100644 index 0000000..2398dae --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import AlertDialogOverlay from './alert-dialog-overlay.svelte'; + import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + portalProps, + ...restProps + }: WithoutChild<AlertDialogPrimitive.ContentProps> & { + portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>; + } = $props(); +</script> + +<AlertDialogPrimitive.Portal {...portalProps}> + <AlertDialogOverlay /> + <AlertDialogPrimitive.Content + bind:ref + data-slot="alert-dialog-content" + class={cn( + 'fixed z-[999999] grid w-full gap-4 border bg-background p-6 shadow-lg duration-200', + // Mobile: Bottom sheet behavior + 'right-0 bottom-0 left-0 max-h-[100dvh] translate-x-0 translate-y-0 overflow-y-auto rounded-t-lg', + 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-full', + 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-full', + // Desktop: Centered dialog behavior + 'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-h-[100vh] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-lg', + 'sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95', + 'sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95', + className + )} + {...restProps} + /> +</AlertDialogPrimitive.Portal> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte new file mode 100644 index 0000000..84735d8 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: AlertDialogPrimitive.DescriptionProps = $props(); +</script> + +<AlertDialogPrimitive.Description + bind:ref + data-slot="alert-dialog-description" + class={cn('text-sm text-muted-foreground', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte new file mode 100644 index 0000000..da0f7be --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte @@ -0,0 +1,23 @@ +<script lang="ts"> + import { cn, type WithElementRef } from '$lib/components/ui/utils.js'; + 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="alert-dialog-footer" + class={cn( + 'mt-6 flex flex-row gap-2 sm:mt-0 sm:justify-end [&>*]:flex-1 sm:[&>*]:flex-none', + className + )} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte new file mode 100644 index 0000000..fa6539d --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-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.js'; + + let { + ref = $bindable(null), + class: className, + children, + ...restProps + }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); +</script> + +<div + bind:this={ref} + data-slot="alert-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/alert-dialog/alert-dialog-overlay.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte new file mode 100644 index 0000000..71f166d --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: AlertDialogPrimitive.OverlayProps = $props(); +</script> + +<AlertDialogPrimitive.Overlay + bind:ref + data-slot="alert-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/alert-dialog/alert-dialog-title.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte new file mode 100644 index 0000000..4c610aa --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: AlertDialogPrimitive.TitleProps = $props(); +</script> + +<AlertDialogPrimitive.Title + bind:ref + data-slot="alert-dialog-title" + class={cn('text-lg font-semibold', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte new file mode 100644 index 0000000..51a3da1 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; + + let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props(); +</script> + +<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} /> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/index.ts new file mode 100644 index 0000000..a4439bc --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/alert-dialog/index.ts @@ -0,0 +1,39 @@ +import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'; +import Trigger from './alert-dialog-trigger.svelte'; +import Title from './alert-dialog-title.svelte'; +import Action from './alert-dialog-action.svelte'; +import Cancel from './alert-dialog-cancel.svelte'; +import Footer from './alert-dialog-footer.svelte'; +import Header from './alert-dialog-header.svelte'; +import Overlay from './alert-dialog-overlay.svelte'; +import Content from './alert-dialog-content.svelte'; +import Description from './alert-dialog-description.svelte'; + +const Root = AlertDialogPrimitive.Root; +const Portal = AlertDialogPrimitive.Portal; + +export { + Root, + Title, + Action, + Cancel, + Portal, + Footer, + Header, + Trigger, + Overlay, + Content, + Description, + // + Root as AlertDialog, + Title as AlertDialogTitle, + Action as AlertDialogAction, + Cancel as AlertDialogCancel, + Portal as AlertDialogPortal, + Footer as AlertDialogFooter, + Header as AlertDialogHeader, + Trigger as AlertDialogTrigger, + Overlay as AlertDialogOverlay, + Content as AlertDialogContent, + Description as AlertDialogDescription +}; |