|
@@ -14,11 +14,12 @@
|
|
|
interface Props {
|
|
interface Props {
|
|
|
items: Item[];
|
|
items: Item[];
|
|
|
align?: 'start' | 'end';
|
|
align?: 'start' | 'end';
|
|
|
|
|
+ side?: 'bottom' | 'top';
|
|
|
class?: string;
|
|
class?: string;
|
|
|
trigger?: Snippet;
|
|
trigger?: Snippet;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- let { items, align = 'start', class: className = '', trigger }: Props = $props();
|
|
|
|
|
|
|
+ let { items, align = 'start', side = 'bottom', class: className = '', trigger }: Props = $props();
|
|
|
|
|
|
|
|
let open = $state(false);
|
|
let open = $state(false);
|
|
|
let menuEl = $state<HTMLElement | null>(null);
|
|
let menuEl = $state<HTMLElement | null>(null);
|
|
@@ -59,7 +60,8 @@
|
|
|
<div
|
|
<div
|
|
|
role="menu"
|
|
role="menu"
|
|
|
class={cn(
|
|
class={cn(
|
|
|
- 'absolute top-full z-50 mt-1 min-w-[160px]',
|
|
|
|
|
|
|
+ 'absolute z-50 mt-1 min-w-[160px]',
|
|
|
|
|
+ side === 'top' ? 'bottom-full mb-1' : 'top-full',
|
|
|
'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)]',
|
|
'rounded-[var(--radius)] border border-[var(--border)] bg-[var(--card)]',
|
|
|
'shadow-[var(--shadow-md)] p-1',
|
|
'shadow-[var(--shadow-md)] p-1',
|
|
|
'animate-[fadeInScale_150ms_cubic-bezier(0.16,1,0.3,1)]',
|
|
'animate-[fadeInScale_150ms_cubic-bezier(0.16,1,0.3,1)]',
|