@djcali570/component-lib 0.1.9 → 0.1.92

package/dist/Checkbox5.svelte

@@ -34,10 +34,6 @@
 	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 	const id = `checkbox-${Math.random().toString(36).slice(2, 8)}`;
-
-	$effect(() => {
-		onChange(checked);
-	});
 </script>
 
 <div
@@ -51,7 +47,19 @@
   "
 >
 	<label for={id}>
-		<input type="checkbox" {id} {name} bind:checked {disabled} />
+		<input
+			type="checkbox"
+			{id}
+			{name}
+			{checked}
+			{disabled}
+			onchange={(e) => {
+				const value = (e.target as HTMLInputElement).checked;
+				checked = value;
+				onChange(value);
+			}}
+		/>
+
 		<span class="air5__checkbox__custom">
 			{#if checked}
 				<svg viewBox="0 0 24 24">
@@ -87,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,190 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { ContextMenu5ColorScheme } from './types.js';
+	import { fly } from 'svelte/transition';
+
+	// 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',
+		contentBorderColor: '#191919',
+		iconFillColor: '#121212',
+		iconBorderColor: '#121212',
+		iconColor: '#F5F5F5'
+	};
+	const colorScheme = $derived({
+		...defaultColorScheme,
+		...partialColorScheme
+	});
+
+	// DOM refs
+	let triggerEl: HTMLElement | null = null;
+	let menuEl: HTMLElement | null = $state(null);
+
+	// Toggle menu
+	function toggle() {
+		open = !open;
+	}
+
+	// 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);
+
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	});
+</script>
+
+<div
+	class="context5"
+	style="
+--context5__ContentBgColor: {colorScheme.contentBgColor};
+--context5__ContentBorderColor: {colorScheme.contentBorderColor};
+--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>
+
+	{#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>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.context5 {
+		position: relative;
+		display: inline-block;
+	}
+
+	.context5__icon {
+		width: 20px;
+		height: 20px;
+		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 */
+		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 */
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--context5__IconBorderColor);
+	}
+
+	.context5__btn > svg {
+		color: var(--context5__IconColor);
+	}
+
+	.context5__menu {
+		position: absolute;
+		margin-top: 0.5rem;
+		z-index: 1000;
+		transform-origin: top;
+	}
+
+	.context5__menu.right {
+		right: 0;
+		transform-origin: top right;
+	}
+
+	.context5__menu.left {
+		left: 0;
+		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/Input5.svelte

@@ -2,14 +2,6 @@
 	import { onMount } from 'svelte';
 	import type { Input5ColorScheme } from './types.js';
 
-	/**
-	 * Input5 v0.0.2
-	 *
-	 * Added color scheme partials
-	 * Added read only option
-	 * Allow 4 digits after decimal for floats
-	 */
-
 	let {
 		colorScheme: partialColorScheme = {},
 		name = 'input',
@@ -25,6 +17,8 @@
 		textArea = false,
 		textAreaHeight = 80,
 		readonly = false,
+		placeholder = '',
+		hideTitle = false,
 		onUpdate = (value) => {}
 	}: {
 		colorScheme?: Partial<Input5ColorScheme>;
@@ -41,6 +35,8 @@
 		textArea?: boolean;
 		textAreaHeight?: number;
 		readonly?: boolean | null | undefined;
+		placeholder?: string;
+		hideTitle?: boolean;
 		onUpdate?: (value: string) => void;
 	} = $props();
 
@@ -53,10 +49,12 @@
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',
 		counterTextColor: '#5ac1dd',
-		counterBgColor: '#1F2023'
+		counterBgColor: '#1F2023',
+		placeholderColor: '#989A9A'
 	};
 
 	// Merge partial colorScheme with defaults
+	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	const id = generateRandomString();
@@ -161,6 +159,7 @@
 	 * Assign function to validator
 	 */
 	if (
+		// svelte-ignore state_referenced_locally
 		validator === 'float' ||
 		validator === 'number' ||
 		validator === 'phone' ||
@@ -169,22 +168,23 @@
 		keydownHandler = mainKeyDownHandler;
 	}
 
+	// svelte-ignore state_referenced_locally
 	if (validator === 'float') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, floatPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'number') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, numberOnlyPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'phone') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'phone') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'letter') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, letterOnlyPattern);
 	}
@@ -225,11 +225,16 @@
 --air5__counterTextColor: {colorScheme.counterTextColor};
 --air5__counterBgColor: {colorScheme.counterBgColor};
 --air5__textAreaHeight: {textAreaHeight}px;
+--air5__placeholderColor: {colorScheme.placeholderColor};
 "
 >
 	<label for="input-{id}">
 		<div>
-			<div class="air5__title">{title}</div>
+			{#if !hideTitle}
+				<div class="air5__title">{title}</div>
+			{:else}
+				<div class="air5__title">&nbsp;</div>
+			{/if}
 			<div class="air5__input">
 				{#if textArea}
 					<textarea
@@ -241,6 +246,7 @@
 						{maxlength}
 						{autocomplete}
 						{readonly}
+						{placeholder}
 					></textarea>
 				{:else}
 					<input
@@ -253,6 +259,7 @@
 						{autocomplete}
 						{type}
 						{readonly}
+						{placeholder}
 					/>
 				{/if}
 				<div class="air5__options__container">
@@ -327,7 +334,7 @@
 
 	.air5__input {
 		display: grid;
-		grid-template-columns: 1fr min-content;		
+		grid-template-columns: 1fr min-content;
 		padding-inline: 0.75rem;
 		color: var(--air5__mainTextColor);
 	}
@@ -415,4 +422,10 @@
 		color: var(--air5__counterTextColor);
 		background-color: var(--air5__counterBgColor);
 	}
+
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--air5__placeholderColor);
+		opacity: 1; /* ensures color is fully visible across browsers */
+	}
 </style>

package/dist/Input5.svelte.d.ts

@@ -14,6 +14,8 @@ type $$ComponentProps = {
     textArea?: boolean;
     textAreaHeight?: number;
     readonly?: boolean | null | undefined;
+    placeholder?: string;
+    hideTitle?: boolean;
     onUpdate?: (value: string) => void;
 };
 declare const Input5: import("svelte").Component<$$ComponentProps, {}, "value">;

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

@@ -9,6 +9,7 @@ export interface Input5ColorScheme {
     clearHoverColor?: string;
     counterTextColor?: string;
     counterBgColor?: string;
+    placeholderColor?: string;
 }
 export interface DatePicker5ColorScheme {
     labelTextColor?: string;
@@ -97,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.9",
+	"version": "0.1.92",
 	"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"
 	}
 }