starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): keep floating menus within viewport

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-21 01:33:12 +03:30
parent 9722adc93e
commit 35472979d6
7 changed files with 109 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
View File

@@ -8,6 +8,11 @@
ref = $bindable(null),
sideOffset = 4,
align = 'start',
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
portalProps,
class: className,
...restProps
@@ -22,8 +27,13 @@
data-slot="dropdown-menu-content"
{sideOffset}
{align}
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 w-(--bits-dropdown-menu-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 max-h-[min(20rem,var(--bits-dropdown-menu-content-available-height))] w-(--bits-dropdown-menu-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto overscroll-contain rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
className,
)}
{...restProps}

12
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@@ -5,15 +5,25 @@
let {
ref = $bindable(null),
class: className,
collisionPadding = 8,
avoidCollisions = true,
sticky = 'always',
hideWhenDetached = true,
dir = 'rtl',
...restProps
}: DropdownMenuPrimitive.SubContentProps = $props();
</script>
<DropdownMenuPrimitive.SubContent
bind:ref
{collisionPadding}
{avoidCollisions}
{sticky}
{hideWhenDetached}
{dir}
data-slot="dropdown-menu-sub-content"
class={cn(
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
'bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 max-h-[min(20rem,var(--bits-dropdown-menu-content-available-height))] w-auto min-w-[96px] overflow-y-auto overscroll-contain rounded-lg p-1 shadow-lg ring-1 duration-100',
className,
)}
{...restProps}

4
src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
let { open = $bindable(false), dir = 'rtl', ...restProps }: DropdownMenuPrimitive.RootProps = $props();
</script>
<DropdownMenuPrimitive.Root bind:open {...restProps} />
<DropdownMenuPrimitive.Root bind:open {dir} {...restProps} />