diff options
Diffstat (limited to 'frontend/src/lib/components/ui/select/select-content.svelte')
| -rw-r--r-- | frontend/src/lib/components/ui/select/select-content.svelte | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte new file mode 100644 index 0000000..3ec8408 --- /dev/null +++ b/frontend/src/lib/components/ui/select/select-content.svelte @@ -0,0 +1,45 @@ +<script lang="ts"> + import { Select as SelectPrimitive } from "bits-ui"; + import { cn, type WithoutChild } from "$lib/utils.js"; + import type { WithoutChildrenOrChild } from "$lib/utils.js"; + import SelectPortal from "./select-portal.svelte"; + import SelectScrollDownButton from "./select-scroll-down-button.svelte"; + import SelectScrollUpButton from "./select-scroll-up-button.svelte"; + import type { ComponentProps } from "svelte"; + + let { + ref = $bindable(null), + class: className, + sideOffset = 4, + portalProps, + children, + preventScroll = true, + ...restProps + }: WithoutChild<SelectPrimitive.ContentProps> & { + portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>; + } = $props(); +</script> + +<SelectPortal {...portalProps}> + <SelectPrimitive.Content + bind:ref + {sideOffset} + {preventScroll} + data-slot="select-content" + class={cn( + "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto", + className + )} + {...restProps} + > + <SelectScrollUpButton /> + <SelectPrimitive.Viewport + class={cn( + "h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1" + )} + > + {@render children?.()} + </SelectPrimitive.Viewport> + <SelectScrollDownButton /> + </SelectPrimitive.Content> +</SelectPortal> |
