diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/ui/sheet')
9 files changed, 204 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/index.ts new file mode 100644 index 0000000..139e2d2 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/index.ts @@ -0,0 +1,36 @@ +import { Dialog as SheetPrimitive } from 'bits-ui'; +import Trigger from './sheet-trigger.svelte'; +import Close from './sheet-close.svelte'; +import Overlay from './sheet-overlay.svelte'; +import Content from './sheet-content.svelte'; +import Header from './sheet-header.svelte'; +import Footer from './sheet-footer.svelte'; +import Title from './sheet-title.svelte'; +import Description from './sheet-description.svelte'; + +const Root = SheetPrimitive.Root; +const Portal = SheetPrimitive.Portal; + +export { + Root, + Close, + Trigger, + Portal, + Overlay, + Content, + Header, + Footer, + Title, + Description, + // + Root as Sheet, + Close as SheetClose, + Trigger as SheetTrigger, + Portal as SheetPortal, + Overlay as SheetOverlay, + Content as SheetContent, + Header as SheetHeader, + Footer as SheetFooter, + Title as SheetTitle, + Description as SheetDescription +}; diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-close.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-close.svelte new file mode 100644 index 0000000..b0180c0 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-close.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + + let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props(); +</script> + +<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} /> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-content.svelte new file mode 100644 index 0000000..f16a0e0 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-content.svelte @@ -0,0 +1,60 @@ +<script lang="ts" module> + import { tv, type VariantProps } from 'tailwind-variants'; + export const sheetVariants = tv({ + base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500', + variants: { + side: { + top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b', + bottom: + 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t', + left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm', + right: + 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm' + } + }, + defaultVariants: { + side: 'right' + } + }); + + export type Side = VariantProps<typeof sheetVariants>['side']; +</script> + +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + import XIcon from '@lucide/svelte/icons/x'; + import type { Snippet } from 'svelte'; + import SheetOverlay from './sheet-overlay.svelte'; + import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + side = 'right', + portalProps, + children, + ...restProps + }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & { + portalProps?: SheetPrimitive.PortalProps; + side?: Side; + children: Snippet; + } = $props(); +</script> + +<SheetPrimitive.Portal {...portalProps}> + <SheetOverlay /> + <SheetPrimitive.Content + bind:ref + data-slot="sheet-content" + class={cn(sheetVariants({ side }), className)} + {...restProps} + > + {@render children?.()} + <SheetPrimitive.Close + class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none" + > + <XIcon class="size-4" /> + <span class="sr-only">Close</span> + </SheetPrimitive.Close> + </SheetPrimitive.Content> +</SheetPrimitive.Portal> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-description.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-description.svelte new file mode 100644 index 0000000..ef4d58f --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-description.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: SheetPrimitive.DescriptionProps = $props(); +</script> + +<SheetPrimitive.Description + bind:ref + data-slot="sheet-description" + class={cn('text-sm text-muted-foreground', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-footer.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-footer.svelte new file mode 100644 index 0000000..4e1b927 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-footer.svelte @@ -0,0 +1,20 @@ +<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="sheet-footer" + class={cn('mt-auto flex flex-col gap-2 p-4', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-header.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-header.svelte new file mode 100644 index 0000000..6c6c1ec --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-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="sheet-header" + class={cn('flex flex-col gap-1.5 p-4', className)} + {...restProps} +> + {@render children?.()} +</div> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-overlay.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-overlay.svelte new file mode 100644 index 0000000..a6a064f --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-overlay.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: SheetPrimitive.OverlayProps = $props(); +</script> + +<SheetPrimitive.Overlay + bind:ref + data-slot="sheet-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/sheet/sheet-title.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-title.svelte new file mode 100644 index 0000000..0efcc7a --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-title.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + import { cn } from '$lib/components/ui/utils.js'; + + let { + ref = $bindable(null), + class: className, + ...restProps + }: SheetPrimitive.TitleProps = $props(); +</script> + +<SheetPrimitive.Title + bind:ref + data-slot="sheet-title" + class={cn('font-semibold text-foreground', className)} + {...restProps} +/> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-trigger.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-trigger.svelte new file mode 100644 index 0000000..d95719a --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sheet/sheet-trigger.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + import { Dialog as SheetPrimitive } from 'bits-ui'; + + let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props(); +</script> + +<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} /> |