@djcali570/component-lib 0.1.91 → 0.1.93

package/dist/Checkbox5.svelte

@@ -95,6 +95,8 @@
 		display: flex;
 		align-items: center;
 		cursor: pointer;
+		/* REMOVE mobile tap highlight */
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	.air5__checkbox__custom {

package/dist/ContextMenu5.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import type { ContextMenu5ColorScheme } from './types.js';
+
+	// portal action
+	function portal(node: HTMLElement, target: HTMLElement = document.body) {
+		target.appendChild(node);
+
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+
+	// Props
+	let {
+		icon,
+		content,
+		colorScheme: partialColorScheme = {},
+		ariaLabel = 'Open context menu',
+		menuAlign = 'right',
+		open = $bindable()
+	}: {
+		icon?: Snippet;
+		content: Snippet;
+		colorScheme?: Partial<ContextMenu5ColorScheme>;
+		ariaLabel?: string;
+		menuAlign?: 'left' | 'right';
+		open?: boolean;
+	} = $props();
+
+	// Default colors
+	const defaultColorScheme: ContextMenu5ColorScheme = {
+		contentBgColor: '#121212',
+		iconFillColor: '#121212',
+		iconBorderColor: '#121212',
+		iconColor: '#F5F5F5'
+	};
+
+	const colorScheme = $derived({
+		...defaultColorScheme,
+		...partialColorScheme
+	});
+
+	// DOM refs
+	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
+	function closeMenu() {
+		open = false;
+	}
+
+	// Click outside
+	function handlePointerDown(e: PointerEvent) {
+		if (!open) return;
+
+		const target = e.target as Node;
+
+		if (menuEl && triggerEl && !menuEl.contains(target) && !triggerEl.contains(target)) {
+			closeMenu();
+		}
+	}
+
+	// Escape key
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') closeMenu();
+	}
+
+	onMount(() => {
+		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__IconBorderColor: {colorScheme.iconBorderColor};
+--context5__IconColor: {colorScheme.iconColor};
+--context5__IconFillColor: {colorScheme.iconFillColor};
+"
+>
+	<button
+		aria-label={ariaLabel}
+		type="button"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		bind:this={triggerEl}
+		onclick={toggle}
+		class="context5__btn"
+	>
+		{#if icon}
+			<div class="context5__icon">
+				{@render icon()}
+			</div>
+		{:else}
+			<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+				<circle cx="12" cy="5" r="2" />
+				<circle cx="12" cy="12" r="2" />
+				<circle cx="12" cy="19" r="2" />
+			</svg>
+		{/if}
+	</button>
+</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>
+	</div>
+{/if}
+
+<style>
+	.context5 {
+		position: relative;
+		display: inline-block;
+	}
+
+	.context5__icon {
+		width: 20px;
+		height: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.context5__icon :global(*) {
+		width: 100% !important;
+		height: 100% !important;
+		display: block;
+	}
+
+	.context5__btn {
+		width: 30px;
+		height: 30px;
+		padding: 0;
+		border-radius: 50%;
+		cursor: pointer;
+		background-color: var(--context5__IconFillColor);
+		border: 1px solid var(--context5__IconBorderColor);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		outline: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.context5__btn > svg {
+		color: var(--context5__IconColor);
+	}
+
+	.context5__portal {
+		position: fixed;
+		z-index: 9999;
+	}
+
+	.context5__menu {
+		margin-top: 0.25rem;
+		transform-origin: top;
+	}
+
+	.context5__menu.right {
+		transform: translateX(-100%);
+		transform-origin: top right;
+	}
+
+	.context5__menu.left {
+		transform-origin: top left;
+	}
+
+	.context5__content {
+		background-color: var(--context5__ContentBgColor);
+		border-radius: 0.5rem;
+		padding: 0.5rem;
+		border: 1px solid var(--context5__ContentBorderColor);
+	}
+</style>

package/dist/ContextMenu5.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { ContextMenu5ColorScheme } from './types.js';
+type $$ComponentProps = {
+    icon?: Snippet;
+    content: Snippet;
+    colorScheme?: Partial<ContextMenu5ColorScheme>;
+    ariaLabel?: string;
+    menuAlign?: 'left' | 'right';
+    open?: boolean;
+};
+declare const ContextMenu5: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ContextMenu5 = ReturnType<typeof ContextMenu5>;
+export default ContextMenu5;

package/dist/DatePicker5.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER } from 'esm-env';
 	import { fly } from 'svelte/transition';
 	import type { DatePicker5ColorScheme } from './types.js';
 
-	/**
-	 * Date Picker 5 v0.0.1
-	 */
-
 	let {
 		colorScheme: partialColorScheme = {},
 		title = '',
@@ -123,7 +119,7 @@
 
 	// Close dropdown when clicking outside
 	$effect(() => {
-		if (!browser || !showDropdown) return;
+		if (!BROWSER || !showDropdown) return;
 
 		const handleClickOutside = (event: MouseEvent) => {
 			const target = event.target as Node;
@@ -149,7 +145,7 @@
 	// Auto-scroll to make dropdown fully visible
 
 	$effect(() => {
-		if (!browser || !showDropdown || !dropdownRef) return;
+		if (!BROWSER || !showDropdown || !dropdownRef) return;
 		setTimeout(() => {
 			if (!dropdownRef) return;
 			const dropdownRect = dropdownRef.getBoundingClientRect();

package/dist/DropDown5.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import type { DropDown5ColorScheme, DropDownItem } from './types.js';
@@ -47,7 +47,7 @@
 	let filteredItems: DropDownItem[] = $state([]);
 
 	$effect(() => {
-		if (!browser || !showDropdown || !dropdownRef) return;
+		if (!BROWSER || !showDropdown || !dropdownRef) return;
 		setTimeout(() => {
 			if (!dropdownRef) return;
 			const dropdownRect = dropdownRef.getBoundingClientRect();

package/dist/index.d.ts

@@ -6,8 +6,9 @@ import Accordion5 from "./Accordion5.svelte";
 import Chart5 from "./Chart5.svelte";
 import AdminPanel5 from "./AdminPanel5.svelte";
 import Checkbox5 from "./Checkbox5.svelte";
-import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme, Checkbox5ColorScheme } from "./types.js";
+import ContextMenu5 from "./ContextMenu5.svelte";
+import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme, Checkbox5ColorScheme, ContextMenu5ColorScheme } from "./types.js";
 import BottomSheet5 from "./BottomSheet5.svelte";
 import Dialog5 from "./Dialog5.svelte";
-export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5, Checkbox5 };
-export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme, Checkbox5ColorScheme };
+export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5, Checkbox5, ContextMenu5 };
+export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme, Checkbox5ColorScheme, ContextMenu5ColorScheme };

package/dist/index.js

@@ -9,4 +9,5 @@ import AdminPanel5 from "./AdminPanel5.svelte";
 import BottomSheet5 from "./BottomSheet5.svelte";
 import Dialog5 from "./Dialog5.svelte";
 import Checkbox5 from "./Checkbox5.svelte";
-export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5, Checkbox5 };
+import ContextMenu5 from "./ContextMenu5.svelte"
+export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5, Checkbox5, ContextMenu5 };

package/dist/types.d.ts

@@ -98,3 +98,11 @@ export interface Checkbox5ColorScheme {
     focusedColor?: string;
     checkmarkColor?: string;
 }
+
+export interface ContextMenu5ColorScheme {
+    contentBgColor?: string;
+    contentBorderColor?: string;
+    iconFillColor?: string;
+    iconBorderColor?: string;
+    iconColor?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@djcali570/component-lib",
-	"version": "0.1.91",
+	"version": "0.1.93",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -19,6 +19,7 @@
 		}
 	},
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.50.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
@@ -60,5 +61,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint ."
+	},
+	"dependencies": {
+		"esm-env": "^1.2.2"
 	}
 }