diff options
Diffstat (limited to 'llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area')
3 files changed, 81 insertions, 0 deletions
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/index.ts new file mode 100644 index 0000000..d546806 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/index.ts @@ -0,0 +1,10 @@ +import Scrollbar from './scroll-area-scrollbar.svelte'; +import Root from './scroll-area.svelte'; + +export { + Root, + Scrollbar, + //, + Root as ScrollArea, + Scrollbar as ScrollAreaScrollbar +}; diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte new file mode 100644 index 0000000..3f0d00d --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte @@ -0,0 +1,31 @@ +<script lang="ts"> + import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'; + import { cn, type WithoutChild } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + orientation = 'vertical', + children, + ...restProps + }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props(); +</script> + +<ScrollAreaPrimitive.Scrollbar + bind:ref + data-slot="scroll-area-scrollbar" + {orientation} + class={cn( + 'flex touch-none p-px transition-colors select-none', + orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', + orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', + className + )} + {...restProps} +> + {@render children?.()} + <ScrollAreaPrimitive.Thumb + data-slot="scroll-area-thumb" + class="relative flex-1 rounded-full bg-border" + /> +</ScrollAreaPrimitive.Scrollbar> diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area.svelte new file mode 100644 index 0000000..ba6f838 --- /dev/null +++ b/llama.cpp/tools/server/webui/src/lib/components/ui/scroll-area/scroll-area.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui'; + import { Scrollbar } from './index.js'; + import { cn, type WithoutChild } from '$lib/components/ui/utils'; + + let { + ref = $bindable(null), + class: className, + orientation = 'vertical', + scrollbarXClasses = '', + scrollbarYClasses = '', + children, + ...restProps + }: WithoutChild<ScrollAreaPrimitive.RootProps> & { + orientation?: 'vertical' | 'horizontal' | 'both' | undefined; + scrollbarXClasses?: string | undefined; + scrollbarYClasses?: string | undefined; + } = $props(); +</script> + +<ScrollAreaPrimitive.Root + bind:ref + data-slot="scroll-area" + class={cn('relative', className)} + {...restProps} +> + <ScrollAreaPrimitive.Viewport + data-slot="scroll-area-viewport" + class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40" + > + {@render children?.()} + </ScrollAreaPrimitive.Viewport> + {#if orientation === 'vertical' || orientation === 'both'} + <Scrollbar orientation="vertical" class={scrollbarYClasses} /> + {/if} + {#if orientation === 'horizontal' || orientation === 'both'} + <Scrollbar orientation="horizontal" class={scrollbarXClasses} /> + {/if} + <ScrollAreaPrimitive.Corner /> +</ScrollAreaPrimitive.Root> |