@djcali570/component-lib 0.1.92 → 0.1.94

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 {
@@ -11,7 +24,8 @@
 		colorScheme: partialColorScheme = {},
 		ariaLabel = 'Open context menu',
 		menuAlign = 'right',
-		open = $bindable()
+		open = $bindable(),
+		iconSize = '20px'
 	}: {
 		icon?: Snippet;
 		content: Snippet;
@@ -19,16 +33,17 @@
 		ariaLabel?: string;
 		menuAlign?: 'left' | 'right';
 		open?: boolean;
+		iconSize?: string;
 	} = $props();
 
 	// Default colors
 	const defaultColorScheme: ContextMenu5ColorScheme = {
 		contentBgColor: '#121212',
-		contentBorderColor: '#191919',
 		iconFillColor: '#121212',
 		iconBorderColor: '#121212',
 		iconColor: '#F5F5F5'
 	};
+
 	const colorScheme = $derived({
 		...defaultColorScheme,
 		...partialColorScheme
@@ -38,9 +53,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 +91,7 @@
 		if (!open) return;
 
 		const target = e.target as Node;
+
 		if (menuEl && triggerEl && !menuEl.contains(target) && !triggerEl.contains(target)) {
 			closeMenu();
 		}
@@ -67,21 +106,27 @@
 		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};
+--context5__IconSize: {iconSize};
 "
 >
 	<button
@@ -105,22 +150,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 {
@@ -129,55 +182,48 @@
 	}
 
 	.context5__icon {
-		width: 20px;
-		height: 20px;
+		width: var(--context5__IconSize);
+		height: var(--context5__IconSize);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 	}
 
-	/* force ANY svg inside to obey the container */
-	.context5__icon :global(*) {
-		width: 100% !important;
-		height: 100% !important;
-		display: block;
-	}
-
 	.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: var(--context5__IconSize);
+		height: var(--context5__IconSize);
+		padding: 0;
 		cursor: pointer;
-		background-color: var(--context5__IconFillColor);
+		background: none;
 		border: none;
-		outline: none;
-		-webkit-tap-highlight-color: transparent; /* removes blue flash on touch devices */
-		display: flex; /* center the icon inside */
+		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/dist/ContextMenu5.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     menuAlign?: 'left' | 'right';
     open?: boolean;
+    iconSize?: string;
 };
 declare const ContextMenu5: import("svelte").Component<$$ComponentProps, {}, "open">;
 type ContextMenu5 = ReturnType<typeof ContextMenu5>;

package/package.json

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