@djcali570/component-lib 0.1.92 → 0.1.93

package/dist/ContextMenu5.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
 	import type { ContextMenu5ColorScheme } from './types.js';
-	import { fly } from 'svelte/transition';
+
+	// portal action
+	function portal(node: HTMLElement, target: HTMLElement = document.body) {
+		target.appendChild(node);
+
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
 
 	// Props
 	let {
@@ -24,11 +37,11 @@
 	// Default colors
 	const defaultColorScheme: ContextMenu5ColorScheme = {
 		contentBgColor: '#121212',
-		contentBorderColor: '#191919',
 		iconFillColor: '#121212',
 		iconBorderColor: '#121212',
 		iconColor: '#F5F5F5'
 	};
+
 	const colorScheme = $derived({
 		...defaultColorScheme,
 		...partialColorScheme
@@ -38,9 +51,32 @@
 	let triggerEl: HTMLElement | null = null;
 	let menuEl: HTMLElement | null = $state(null);
 
+	// menu position
+	let position = $state({
+		x: 0,
+		y: 0,
+		width: 0
+	});
+
+	function updatePosition() {
+		if (!triggerEl) return;
+
+		const rect = triggerEl.getBoundingClientRect();
+
+		position = {
+			x: rect.left,
+			y: rect.bottom,
+			width: rect.width
+		};
+	}
+
 	// Toggle menu
 	function toggle() {
 		open = !open;
+
+		if (open) {
+			updatePosition();
+		}
 	}
 
 	// Close menu
@@ -53,6 +89,7 @@
 		if (!open) return;
 
 		const target = e.target as Node;
+
 		if (menuEl && triggerEl && !menuEl.contains(target) && !triggerEl.contains(target)) {
 			closeMenu();
 		}
@@ -67,18 +104,23 @@
 		document.addEventListener('pointerdown', handlePointerDown);
 		document.addEventListener('keydown', handleKeyDown);
 
+		window.addEventListener('scroll', updatePosition, true);
+		window.addEventListener('resize', updatePosition);
+
 		return () => {
 			document.removeEventListener('pointerdown', handlePointerDown);
 			document.removeEventListener('keydown', handleKeyDown);
+
+			window.removeEventListener('scroll', updatePosition, true);
+			window.removeEventListener('resize', updatePosition);
 		};
 	});
 </script>
 
+<!-- Trigger -->
 <div
 	class="context5"
 	style="
---context5__ContentBgColor: {colorScheme.contentBgColor};
---context5__ContentBorderColor: {colorScheme.contentBorderColor};
 --context5__IconBorderColor: {colorScheme.iconBorderColor};
 --context5__IconColor: {colorScheme.iconColor};
 --context5__IconFillColor: {colorScheme.iconFillColor};
@@ -105,22 +147,30 @@
 			</svg>
 		{/if}
 	</button>
+</div>
 
-	{#if open}
-		<div
-			bind:this={menuEl}
-			role="menu"
-			class="context5__menu"
-			class:left={menuAlign === 'left'}
-			class:right={menuAlign === 'right'}
-			transition:fly={{ y: 10 }}
-		>
-			<div class="context5__content">
-				{@render content()}
-			</div>
+<!-- Portal Menu -->
+{#if open}
+	<div
+		use:portal
+		bind:this={menuEl}
+		role="menu"
+		class="context5__menu context5__portal"
+		style="
+left:{menuAlign === 'right' ? position.x + position.width : position.x}px;
+top:{position.y}px;
+--context5__ContentBgColor: {colorScheme.contentBgColor};
+--context5__ContentBorderColor: {colorScheme.contentBorderColor};
+"
+		class:right={menuAlign === 'right'}
+		class:left={menuAlign === 'left'}
+		transition:fly={{ y: 8 }}
+	>
+		<div class="context5__content">
+			{@render content()}
 		</div>
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style>
 	.context5 {
@@ -137,7 +187,6 @@
 		flex-shrink: 0;
 	}
 
-	/* force ANY svg inside to obey the container */
 	.context5__icon :global(*) {
 		width: 100% !important;
 		height: 100% !important;
@@ -145,39 +194,40 @@
 	}
 
 	.context5__btn {
-		width: 30px; /* set width */
-		height: 30px; /* set height (same as width for a perfect circle) */
-		padding: 0; /* remove extra padding */
-		border-radius: 50%; /* fully round */
+		width: 30px;
+		height: 30px;
+		padding: 0;
+		border-radius: 50%;
 		cursor: pointer;
 		background-color: var(--context5__IconFillColor);
-		border: none;
-		outline: none;
-		-webkit-tap-highlight-color: transparent; /* removes blue flash on touch devices */
-		display: flex; /* center the icon inside */
+		border: 1px solid var(--context5__IconBorderColor);
+		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid var(--context5__IconBorderColor);
+		outline: none;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	.context5__btn > svg {
 		color: var(--context5__IconColor);
 	}
 
+	.context5__portal {
+		position: fixed;
+		z-index: 9999;
+	}
+
 	.context5__menu {
-		position: absolute;
-		margin-top: 0.5rem;
-		z-index: 1000;
+		margin-top: 0.25rem;
 		transform-origin: top;
 	}
 
 	.context5__menu.right {
-		right: 0;
+		transform: translateX(-100%);
 		transform-origin: top right;
 	}
 
 	.context5__menu.left {
-		left: 0;
 		transform-origin: top left;
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@djcali570/component-lib",
-	"version": "0.1.92",
+	"version": "0.1.93",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",