@x33025/sveltely 0.0.44 → 0.0.45

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { portalContent } from '../../actions/portal';
+
+	interface Props {
+		trigger: Snippet;
+		children: Snippet;
+		open?: boolean;
+		class?: string;
+		align?: 'left' | 'center' | 'right';
+		anchor?: 'top' | 'bottom' | 'leading' | 'trailing';
+	}
+	type Anchor = 'top' | 'bottom' | 'leading' | 'trailing';
+	type Align = 'left' | 'center' | 'right';
+	type Point = { x: number; y: number };
+	type Placement = {
+		top: number;
+		left: number;
+		transform:
+			| 'none'
+			| 'translateX(-50%)'
+			| 'translateX(-100%)'
+			| 'translateY(-100%)'
+			| 'translate(-50%, -100%)'
+			| 'translate(-100%, -100%)';
+	};
+
+	let {
+		trigger,
+		children,
+		open = $bindable(false),
+		class: className = '',
+		align = 'left',
+		anchor = 'bottom'
+	}: Props = $props();
+
+	let triggerEl = $state<HTMLElement | null>(null);
+	let panelEl = $state<HTMLElement | null>(null);
+	let panelCoords = $state({ top: 0, left: 0 });
+	let panelTransform = $state('none');
+	let resolvedAnchor = $state<Anchor>('bottom');
+
+	const isInsideRect = (rect: DOMRect, x: number, y: number) =>
+		x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+
+	const pointInPolygon = (point: Point, polygon: Point[]) => {
+		let inside = false;
+		for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+			const xi = polygon[i].x;
+			const yi = polygon[i].y;
+			const xj = polygon[j].x;
+			const yj = polygon[j].y;
+			const intersects =
+				yi > point.y !== yj > point.y &&
+				point.x < ((xj - xi) * (point.y - yi)) / (yj - yi + Number.EPSILON) + xi;
+			if (intersects) inside = !inside;
+		}
+		return inside;
+	};
+
+	const getSafePolygon = (
+		triggerRect: DOMRect,
+		popoverRect: DOMRect,
+		currentAnchor: Anchor
+	): Point[] => {
+		if (currentAnchor === 'bottom') {
+			return [
+				{ x: triggerRect.left, y: triggerRect.top },
+				{ x: triggerRect.right, y: triggerRect.top },
+				{ x: popoverRect.right, y: popoverRect.top },
+				{ x: popoverRect.left, y: popoverRect.top }
+			];
+		}
+
+		if (currentAnchor === 'top') {
+			return [
+				{ x: triggerRect.left, y: triggerRect.bottom },
+				{ x: triggerRect.right, y: triggerRect.bottom },
+				{ x: popoverRect.right, y: popoverRect.bottom },
+				{ x: popoverRect.left, y: popoverRect.bottom }
+			];
+		}
+
+		if (currentAnchor === 'leading') {
+			return [
+				{ x: triggerRect.right, y: triggerRect.top },
+				{ x: triggerRect.right, y: triggerRect.bottom },
+				{ x: popoverRect.right, y: popoverRect.bottom },
+				{ x: popoverRect.right, y: popoverRect.top }
+			];
+		}
+
+		return [
+			{ x: triggerRect.left, y: triggerRect.top },
+			{ x: triggerRect.left, y: triggerRect.bottom },
+			{ x: popoverRect.left, y: popoverRect.bottom },
+			{ x: popoverRect.left, y: popoverRect.top }
+		];
+	};
+
+	const oppositeAnchor = (value: Anchor): Anchor => {
+		if (value === 'top') return 'bottom';
+		if (value === 'bottom') return 'top';
+		if (value === 'leading') return 'trailing';
+		return 'leading';
+	};
+
+	const flippedAlign = (value: Align): Align => {
+		if (value === 'center') return 'center';
+		return value === 'left' ? 'right' : 'left';
+	};
+
+	const getPlacement = (rect: DOMRect, nextAnchor: Anchor, nextAlign: Align): Placement => {
+		if (nextAnchor === 'top' || nextAnchor === 'bottom') {
+			const left =
+				nextAlign === 'left'
+					? rect.left + window.scrollX
+					: nextAlign === 'right'
+						? rect.right + window.scrollX
+						: rect.left + rect.width / 2 + window.scrollX;
+			const top =
+				nextAnchor === 'bottom' ? rect.bottom + window.scrollY : rect.top + window.scrollY;
+			if (nextAnchor === 'top' && nextAlign === 'center') {
+				return { top, left, transform: 'translate(-50%, -100%)' };
+			}
+			if (nextAnchor === 'top' && nextAlign === 'right') {
+				return { top, left, transform: 'translate(-100%, -100%)' };
+			}
+			if (nextAlign === 'center') {
+				return { top, left, transform: 'translateX(-50%)' };
+			}
+			if (nextAnchor === 'top') {
+				return { top, left, transform: 'translateY(-100%)' };
+			}
+			if (nextAlign === 'right') {
+				return { top, left, transform: 'translateX(-100%)' };
+			}
+			return { top, left, transform: 'none' };
+		}
+
+		if (nextAnchor === 'leading') {
+			return {
+				top: rect.top + window.scrollY,
+				left: rect.left + window.scrollX,
+				transform: 'translateX(-100%)'
+			};
+		}
+
+		return {
+			top: rect.top + window.scrollY,
+			left: rect.right + window.scrollX,
+			transform: 'none'
+		};
+	};
+
+	const getViewportRect = (placement: Placement, width: number, height: number) => {
+		let left = placement.left - window.scrollX;
+		let top = placement.top - window.scrollY;
+
+		if (placement.transform === 'translateX(-100%)') left -= width;
+		else if (placement.transform === 'translateX(-50%)') left -= width / 2;
+		else if (placement.transform === 'translateY(-100%)') top -= height;
+		else if (placement.transform === 'translate(-50%, -100%)') {
+			left -= width / 2;
+			top -= height;
+		} else if (placement.transform === 'translate(-100%, -100%)') {
+			left -= width;
+			top -= height;
+		}
+
+		return { left, top, right: left + width, bottom: top + height };
+	};
+
+	const overflowScore = (
+		rect: { left: number; top: number; right: number; bottom: number },
+		margin = 8
+	) => {
+		const leftOverflow = Math.max(0, margin - rect.left);
+		const rightOverflow = Math.max(0, rect.right - (window.innerWidth - margin));
+		const topOverflow = Math.max(0, margin - rect.top);
+		const bottomOverflow = Math.max(0, rect.bottom - (window.innerHeight - margin));
+		return leftOverflow + rightOverflow + topOverflow + bottomOverflow;
+	};
+
+	const positionPanel = () => {
+		if (!triggerEl || !panelEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const width = panelEl.offsetWidth;
+		const height = panelEl.offsetHeight;
+		const candidates: Array<{ anchor: Anchor; align: Align }> = [
+			{ anchor, align },
+			{ anchor, align: flippedAlign(align) },
+			{ anchor: oppositeAnchor(anchor), align },
+			{ anchor: oppositeAnchor(anchor), align: flippedAlign(align) }
+		];
+
+		const unique = new Set<string>();
+		let bestPlacement: Placement | null = null;
+		let bestAnchor: Anchor | null = null;
+		let bestScore = Number.POSITIVE_INFINITY;
+
+		for (const candidate of candidates) {
+			const key = `${candidate.anchor}:${candidate.align}`;
+			if (unique.has(key)) continue;
+			unique.add(key);
+
+			const placement = getPlacement(rect, candidate.anchor, candidate.align);
+			const nextRect = getViewportRect(placement, width, height);
+			const score = overflowScore(nextRect);
+			if (score < bestScore) {
+				bestScore = score;
+				bestPlacement = placement;
+				bestAnchor = candidate.anchor;
+			}
+		}
+
+		if (!bestPlacement) return;
+		panelCoords = { top: bestPlacement.top, left: bestPlacement.left };
+		panelTransform = bestPlacement.transform;
+		if (bestAnchor) resolvedAnchor = bestAnchor;
+	};
+
+	async function openPanel() {
+		open = true;
+		await tick();
+		positionPanel();
+	}
+
+	function closePanel() {
+		open = false;
+	}
+
+	function toggle() {
+		if (open) {
+			closePanel();
+		} else {
+			void openPanel();
+		}
+	}
+
+	function handleOutsideClick(event: MouseEvent) {
+		if (!open) return;
+		const target = event.target as HTMLElement;
+		if (target.closest('[data-popover-root]') || target.closest('[data-popover]')) return;
+		closePanel();
+	}
+
+	function handleEscape(event: KeyboardEvent) {
+		if (!open) return;
+		if (event.key === 'Escape') closePanel();
+	}
+
+	function handlePointerMove(event: MouseEvent) {
+		if (!open || !triggerEl || !panelEl) return;
+
+		const pointer = { x: event.clientX, y: event.clientY };
+		const triggerRect = triggerEl.getBoundingClientRect();
+		const popoverRect = panelEl.getBoundingClientRect();
+		const safePolygon = getSafePolygon(triggerRect, popoverRect, resolvedAnchor);
+
+		if (isInsideRect(triggerRect, pointer.x, pointer.y)) return;
+		if (isInsideRect(popoverRect, pointer.x, pointer.y)) return;
+		if (pointInPolygon(pointer, safePolygon)) return;
+
+		closePanel();
+	}
+
+	$effect(() => {
+		if (!open) return;
+		void tick().then(() => {
+			positionPanel();
+		});
+	});
+</script>
+
+<svelte:window
+	onclick={handleOutsideClick}
+	onscroll={closePanel}
+	onresize={closePanel}
+	onkeydown={handleEscape}
+	onmousemove={handlePointerMove}
+/>
+
+<div class="relative inline-block text-left" data-popover-root>
+	<div bind:this={triggerEl}>
+		<button
+			type="button"
+			class="text-left"
+			onclick={toggle}
+			aria-expanded={open}
+			aria-haspopup="dialog"
+		>
+			{@render trigger()}
+		</button>
+	</div>
+
+	{#if open}
+		<div
+			use:portalContent
+			class="popover fixed z-50 focus:outline-none {className}"
+			data-popover
+			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform};"
+			role="dialog"
+			aria-modal="false"
+			tabindex="-1"
+			bind:this={panelEl}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    trigger: Snippet;
+    children: Snippet;
+    open?: boolean;
+    class?: string;
+    align?: 'left' | 'center' | 'right';
+    anchor?: 'top' | 'bottom' | 'leading' | 'trailing';
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Popover.svelte';

package/dist/components/Popover/index.js

@@ -0,0 +1 @@
+export { default } from './Popover.svelte';

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
+export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';

package/dist/index.js

@@ -11,4 +11,5 @@ export { default as Spinner } from './components/Spinner.svelte';
 export { default as TextShimmer } from './components/TextShimmer.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
 export { default as Dropdown } from './components/Dropdown';
+export { default as Popover } from './components/Popover';
 export { default as ChipInput } from './components/ChipInput.svelte';

package/dist/style/index.css

@@ -103,6 +103,10 @@
 		@apply bg-zinc-100;
 	}
 
+	.popover {
+		@apply rounded-md border border-gray-200 bg-white p-2 shadow-md;
+	}
+
 	.sheet {
 		@apply rounded-md bg-white p-4 shadow-md;
 	}

package/dist/style.css

@@ -15,6 +15,7 @@
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
     --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
@@ -275,6 +276,9 @@
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-fit {
     width: fit-content;
   }
@@ -384,6 +388,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -491,6 +498,11 @@
       }
     }
   }
+  .focus\:border-zinc-400 {
+    &:focus {
+      border-color: var(--color-zinc-400);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -644,6 +656,16 @@
   .dropdown-item:hover {
     background-color: var(--color-zinc-100);
   }
+  .popover {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-gray-200);
+    background-color: var(--color-white);
+    padding: calc(var(--spacing) * 2);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .sheet {
     border-radius: var(--radius-md);
     background-color: var(--color-white);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.44",
+	"version": "0.0.45",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",