refac

2026-03-15 21:29:56 -05:00
parent 753589e51c
commit 07e650c787
5 changed files with 349 additions and 170 deletions
@@ -1,51 +1,138 @@
 <script lang="ts">
-	import { DropdownMenu } from 'bits-ui';
-	import { createEventDispatcher, getContext } from 'svelte';
-
-	const i18n = getContext('i18n');
-
 	import { flyAndScale } from '$lib/utils/transitions';
+	import { tick } from 'svelte';

+	/** Whether the dropdown is open */
 	export let show = false;
+
+	/** Side to open on: 'bottom' | 'top' */
 	export let side = 'bottom';
+
+	/** Alignment: 'start' | 'end' */
 	export let align = 'start';
+
+	/** Close when clicking outside */
 	export let closeOnOutsideClick = true;

-	const dispatch = createEventDispatcher();
+	/** Called when open/close state changes */
+	export let onOpenChange: (state: boolean) => void = () => {};
+
+	/** CSS classes for the dropdown content container */
+	export let contentClass = '';
+
+	/** Side offset in px */
+	export let sideOffset = 4;
+
+	let triggerEl;
+	let contentEl;
+
+	/** Svelte action: moves the node to document.body */
+	function portal(node) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+
+	/** Svelte action: captures the first child element as the trigger reference */
+	function trigger(node) {
+		triggerEl = node.firstElementChild || node;
+		node.addEventListener('click', toggleOpen);
+		return {
+			destroy() {
+				node.removeEventListener('click', toggleOpen);
+			}
+		};
+	}
+
+	function positionContent() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+
+		contentEl.style.position = 'fixed';
+		contentEl.style.zIndex = '9999';
+
+		const contentHeight = contentEl.offsetHeight || 0;
+		const spaceBelow = window.innerHeight - rect.bottom - sideOffset;
+		const spaceAbove = rect.top - sideOffset;
+
+		// Auto-flip: prefer the requested side, but flip if not enough space
+		let openAbove = side === 'top';
+		if (side === 'bottom' && spaceBelow < contentHeight && spaceAbove > spaceBelow) {
+			openAbove = true;
+		} else if (side === 'top' && spaceAbove < contentHeight && spaceBelow > spaceAbove) {
+			openAbove = false;
+		}
+
+		if (openAbove) {
+			contentEl.style.bottom = `${window.innerHeight - rect.top + sideOffset}px`;
+			contentEl.style.top = 'auto';
+		} else {
+			contentEl.style.top = `${rect.bottom + sideOffset}px`;
+			contentEl.style.bottom = 'auto';
+		}
+
+		if (align === 'end') {
+			contentEl.style.right = `${window.innerWidth - rect.right}px`;
+			contentEl.style.left = 'auto';
+		} else {
+			contentEl.style.left = `${rect.left}px`;
+			contentEl.style.right = 'auto';
+		}
+	}
+
+	async function toggleOpen() {
+		show = !show;
+		onOpenChange(show);
+		if (show) {
+			await tick();
+			positionContent();
+			// Re-check after transition renders real dimensions
+			setTimeout(positionContent, 50);
+		}
+	}
+
+	function handleWindowClick(event) {
+		if (!show || !closeOnOutsideClick) return;
+		if (triggerEl?.contains(event.target)) return;
+		if (contentEl?.contains(event.target)) return;
+		show = false;
+		onOpenChange(false);
+	}
+
+	function handleKeydown(event) {
+		if (event.key === 'Escape' && show) {
+			show = false;
+			onOpenChange(false);
+		}
+	}
+
+	/** Close the dropdown programmatically */
+	export function close() {
+		show = false;
+		onOpenChange(false);
+	}
 </script>

-<DropdownMenu.Root
-	bind:open={show}
-	closeFocus={false}
-	{closeOnOutsideClick}
-	onOpenChange={(state) => {
-		dispatch('change', state);
-	}}
-	typeahead={false}
->
-	<DropdownMenu.Trigger>
-		<slot />
-	</DropdownMenu.Trigger>
+<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />

-	<slot name="content">
-		<DropdownMenu.Content
-			class="w-full max-w-[130px] rounded-lg p-1 border border-gray-900 z-50 bg-gray-850 text-white"
-			sideOffset={8}
-			{side}
-			{align}
-			transition={flyAndScale}
-		>
-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span use:trigger style="display: contents;">
+	<slot />
+</span>

-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
-
-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
-		</DropdownMenu.Content>
-	</slot>
-</DropdownMenu.Root>
+{#if show}
+	<div
+		use:portal
+		bind:this={contentEl}
+		class={contentClass}
+		transition:flyAndScale
+	>
+		<slot name="content" />
+	</div>
+{/if}