@djcali570/component-lib 0.1.96 → 0.1.98

package/README.md

@@ -1,9 +1,14 @@
 # Svelte Component library
 
-0.1.95
+0.1.98
 
-- Updated dropdown so onUpdate runs when dropdown is cleared
+- Updated default colors for most components. Triggered by checkbox not that visible with
+black backgrounds.
 
 0.1.96
 
-- Fixed issue with dropdown and using derived state.
+- Fixed issue with dropdown and using derived state.
+
+0.1.95
+
+- Updated dropdown so onUpdate runs when dropdown is cleared

package/dist/BottomSheet5.svelte

@@ -24,7 +24,8 @@
 	};
 
 	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	// svelte-ignore state_referenced_locally
+		const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 </script>
 
 {#if modalStatus}

package/dist/Chart5.svelte

@@ -19,14 +19,15 @@
 	} = $props();
 
 	const defaultColorScheme: Chart5ColorScheme = {
-		bgColor: '#121212',		
+		bgColor: '#1a191c',		
 		gridLineColor: '#303030',
 		xAxisTextColor: '#5ac1dd',
 		yAxisTextColor: '#5ac1dd'
 	};
 
 	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	// svelte-ignore state_referenced_locally
+		const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	let yAxis = $state<number[]>([]);
 	let maxY = $state<number>(0);

package/dist/Checkbox5.svelte

@@ -25,8 +25,8 @@
 
 	const defaultColorScheme = {
 		mainTextColor: '#D6D6D6',
-		mainBgColor: '#121212',
-		borderColor: '#262626',
+		mainBgColor: '#1a191c',
+		borderColor: '#3d3d3d',
 		focusedColor: '#5ac1dd',
 		checkmarkColor: '#5ac1dd'
 	};
@@ -102,7 +102,8 @@
 	.air5__checkbox__custom {
 		width: 32px;
 		height: 32px;
-		border: 1px solid var(--air5__borderColor);
+		/* border: 1px solid var(--air5__borderColor); */
+		box-shadow: 0 0 0 2px var(--air5__borderColor);
 		border-radius: 0.25rem;
 		background-color: var(--air5__mainBgColor);
 		display: flex;

package/dist/ContextMenu5.svelte

@@ -38,7 +38,8 @@
 
 	// Default colors
 	const defaultColorScheme: ContextMenu5ColorScheme = {
-		contentBgColor: '#121212',
+		contentBgColor: '#1a191c',
+		contentBorderColor: '#3d3d3d',
 		iconFillColor: '#121212',
 		iconBorderColor: '#121212',
 		iconColor: '#F5F5F5'

package/dist/DatePicker5.svelte

@@ -34,13 +34,13 @@
 	const defaultColorScheme: DatePicker5ColorScheme = {
 		labelTextColor: '#989A9A',
 		inputTextColor: '#D6D6D6',
-		inputBgColor: '#121212',
-		inputBorderColor: '#262626',
+		inputBgColor: '#1a191c',
+		inputBorderColor: '#3d3d3d',
 		inputFocusedBorderColor: '#5ac1dd',
 		inputClearColor: '#989A9A',
 		inputClearHoverColor: '#1F2023',
 		placeholderColor: '#46464A',
-		pickerBgColor: '#121212',
+		pickerBgColor: '#1a191c',
 		pickerMonthBgColor: '#121212',
 		pickerTextColor: '#D6D6D6',
 		pickerInactiveDayColor: '#46464A',
@@ -52,6 +52,7 @@
 	};
 
 	// Merge partial colorScheme with defaults
+	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	// Normalize minDate to start of day

package/dist/Dialog5.svelte

@@ -42,7 +42,8 @@
 	};
 
 	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	// svelte-ignore state_referenced_locally
+		const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	let confirmed: boolean = $state(false);
 	const menuId = `dialog5-${generateRandomString()}`;

package/dist/DropDown5.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
-	import { onDestroy, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import type { DropDown5ColorScheme, DropDownItem } from './types.js';
 
+	// Props
 	let {
 		colorScheme: partialColorScheme = {},
 		name = 'dropdown',
 		title = 'Title',
-		value = $bindable(),
-		valueKey = $bindable(),
-		extraValue = $bindable(),
-		onUpdate = (key, v, ev) => {},
+		value = $bindable<any>(),
+		valueKey = $bindable<string | null | undefined>(),
+		extraValue = $bindable<string | null | undefined>(),
+		onUpdate = () => {},
 		disabled = false,
 		dropdownItems = [] as DropDownItem[]
 	}: {
@@ -26,124 +27,147 @@
 		dropdownItems?: DropDownItem[];
 	} = $props();
 
+	// Default color scheme
 	const defaultColorScheme: DropDown5ColorScheme = {
 		textColor: '#D6D6D6',
-		bgColor: '#121212',
-		borderColor: '#262626',
+		bgColor: '#1a191c',
+		borderColor: '#3d3d3d',
 		titleColor: '#989A9A',
-		dropdownBgColor: '#141414',
+		dropdownBgColor: '#1a191c',
 		focusedColor: '#5ac1dd',
 		itemTextColor: '#D6D6D6',
 		itemHoverBgColor: '#5ac1dd',
 		itemHoverTextColor: '#121212'
 	};
 
-	// Merge partial colorScheme with defaults
-	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+	// Merge partial scheme with defaults
+	const colorScheme = $derived({ ...defaultColorScheme, ...partialColorScheme });
 
-	const id = generateRandomString();
-	let showDropdown = $state(false);
+	// Refs & state
+	let containerRef: HTMLDivElement | null = $state(null);
 	let dropdownRef: HTMLDivElement | null = $state(null);
+	let showDropdown = $state(false);
 	let filteredItems: DropDownItem[] = $state([]);
+	let highlightedIndex = $state(-1);
+	const id = generateRandomString();
 
+	// Effects
 	$effect(() => {
 		if (!BROWSER || !showDropdown || !dropdownRef) return;
+
 		setTimeout(() => {
 			if (!dropdownRef) return;
-			const dropdownRect = dropdownRef.getBoundingClientRect();
+
+			const rect = dropdownRef.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
-			if (dropdownRect.bottom > viewportHeight) {
-				const scrollY = window.scrollY + (dropdownRect.bottom - viewportHeight) + 10;
+
+			if (rect.bottom > viewportHeight) {
+				const scrollY = window.scrollY + (rect.bottom - viewportHeight) + 10;
 				window.scrollTo({ top: scrollY, behavior: 'smooth' });
 			}
 		}, 0);
 	});
 
-	onMount(() => {
-		document.addEventListener('click', closeDropdown);
-	});
+	$effect(() => {
+		if (!showDropdown || !dropdownRef || highlightedIndex < 0) return;
 
-	onDestroy(() => {
-		try {
-			document.removeEventListener('click', closeDropdown);
-		} catch (error) {}
+		const items = dropdownRef.querySelectorAll<HTMLButtonElement>('button');
+		items[highlightedIndex]?.scrollIntoView({ block: 'nearest' });
 	});
 
-	/**
-	 * Generate a random string so that each
-	 * input will have a unique id in the dom
-	 */
-	function generateRandomString() {
-		const length = 6;
-		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-		let result = '';
-		for (let i = 0; i < length; i++) {
-			const randomIndex = Math.floor(Math.random() * characters.length);
-			result += characters.charAt(randomIndex);
-		}
+	// Outside click
+	function setupOutsideClick() {
+		if (!BROWSER) return;
+
+		const handler = (event: Event) => {
+			if (!containerRef?.contains(event.target as Node)) {
+				showDropdown = false;
+				validateInput();
+			}
+		};
 
-		return result;
+		document.addEventListener('pointerdown', handler);
+		return () => document.removeEventListener('pointerdown', handler);
+	}
+
+	onMount(() => setupOutsideClick());
+
+	// Helpers
+	function generateRandomString(length = 6) {
+		const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		return Array.from({ length }, () =>
+			chars.charAt(Math.floor(Math.random() * chars.length))
+		).join('');
+	}
+
+	function handleBlur() {
+		setTimeout(() => {
+			if (!showDropdown) validateInput();
+		}, 100);
 	}
 
-	/**
-	 * Show the dropdown list
-	 */
 	function showDropdownList() {
 		showDropdown = true;
 		filteredItems = dropdownItems;
+		highlightedIndex = filteredItems.length > 0 ? 0 : -1;
 	}
 
-	function closeDropdown(event: Event) {
-		const target = event.target as HTMLElement;
-
-		if (target.id !== `dropdown-${id}`) {
-			showDropdown = false;
-			validateInput();
-		}
-	}
 	function filterItems() {
-		filteredItems = dropdownItems.filter((item) =>
-			item.value.toLowerCase().includes(value.toLowerCase())
-		);
+		const search = (value ?? '').toLowerCase();
+		filteredItems = dropdownItems.filter((item) => item.value.toLowerCase().includes(search));
+		highlightedIndex = filteredItems.length > 0 ? 0 : -1;
 	}
+
 	function selectItem(item: DropDownItem) {
-		// Set all bound values
 		value = item.value;
 		valueKey = item.id ?? '';
 		extraValue = item.extraValue ?? '';
-
-		// Notify parent
 		onUpdate(valueKey, value, extraValue);
-
-		// Close dropdown
 		showDropdown = false;
+		highlightedIndex = -1;
 	}
 
 	function validateInput() {
-		const matchedItem = dropdownItems.find(
-			(item) => item.value.toLowerCase() === value.toLowerCase()
-		);
-
-		if (matchedItem) {
-			// Valid match: sync values
-			value = matchedItem.value;
-			valueKey = matchedItem.id ?? '';
-			extraValue = matchedItem.extraValue ?? '';
-		} else {
-			// No match: clear all
+		const search = (value ?? '').toLowerCase();
+		const match = dropdownItems.find((item) => item.value.toLowerCase() === search);
+
+		if (match) selectItem(match);
+		else {
 			value = '';
 			valueKey = '';
 			extraValue = '';
+			onUpdate(valueKey, value, extraValue);
 		}
+	}
 
-		// Always notify parent of the current state
-		onUpdate(valueKey, value, extraValue);
+	function handleKeydown(e: KeyboardEvent) {
+		if (!showDropdown) return;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedIndex = Math.min(highlightedIndex + 1, filteredItems.length - 1);
+		}
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, 0);
+		}
+
+		if (e.key === 'Enter' && highlightedIndex >= 0) {
+			e.preventDefault();
+			selectItem(filteredItems[highlightedIndex]);
+		}
+
+		if (e.key === 'Escape') {
+			showDropdown = false;
+			highlightedIndex = -1;
+		}
 	}
 </script>
 
 <div
 	class="dropdown5__container"
+	bind:this={containerRef}
 	style="
 --dropdown5__textColor: {colorScheme.textColor};
 --dropdown5__mainBgColor: {colorScheme.bgColor};
@@ -166,9 +190,10 @@
 				aria-haspopup="listbox"
 				{name}
 				bind:value
+				onkeydown={handleKeydown}
 				oninput={filterItems}
 				onfocus={showDropdownList}
-				onblur={validateInput}
+				onblur={handleBlur}
 				autocomplete="off"
 				{disabled}
 			/>
@@ -188,24 +213,22 @@
 			role="listbox"
 			aria-labelledby="dropdown-{id}-title"
 			bind:this={dropdownRef}
-			oninput={filterItems}
-			transition:fly={{
-				y: 10
-			}}
+			transition:fly={{ y: 10 }}
 		>
 			<div style="height:100%;">
 				{#each filteredItems as item, index}
 					<button
 						type="button"
 						class="dropdown5__list__item"
+						class:selected={index === highlightedIndex}
 						role="option"
 						aria-selected={item.value === value ? 'true' : 'false'}
-						onclick={() => selectItem(item)}
+						onmousedown={() => selectItem(item)}
 					>
-						{#if item.value === value}
-							<div class="fic">
-								<div style="padding-right: 0.5rem;">
-									<div class="fca" style="width: 1rem; height: 1rem;">
+						<div class="fic">
+							<div style="padding-right: 0.5rem;">
+								<div class="fca" style="width: 1rem; height: 1rem;">
+									{#if item.value === value}
 										<svg
 											viewBox="0 0 12 12"
 											xmlns="http://www.w3.org/2000/svg"
@@ -213,36 +236,24 @@
 											role="presentation"
 											focusable="false"
 											style="display: block; height: 12px; width: 12px; fill: currentcolor;"
-											><path
-												d="m10.5 1.939 1.061 1.061-7.061 7.061-.53-.531-3-3-.531-.53 1.061-1.061 3 3 5.47-5.469z"
-											></path></svg
 										>
-									</div>
+											<path
+												d="m10.5 1.939 1.061 1.061-7.061 7.061-.53-.531-3-3-.531-.53 1.061-1.061 3 3 5.47-5.469z"
+											></path>
+										</svg>
+									{/if}
 								</div>
-								{#if item.component}
-									{@const Component = item.component}
-									<div class="component" style={item.componentStyles}>
-										<Component {...item.props} />
-									</div>
-								{/if}
-								<div>{item.value}</div>
 							</div>
-						{:else}
-							<div class="fic">
-								<div style="padding-right: 0.5rem;">
-									<div style="width: 1rem; height: 1rem;"></div>
-								</div>
 
-								{#if item.component}
-									{@const Component = item.component}
-									<div class="component" style={item.componentStyles}>
-										<Component {...item.props} />
-									</div>
-								{/if}
+							{#if item.component}
+								{@const Component = item.component}
+								<div class="component" style={item.componentStyles}>
+									<Component {...item.props} />
+								</div>
+							{/if}
 
-								<div>{item.value}</div>
-							</div>
-						{/if}
+							<div>{item.value}</div>
+						</div>
 					</button>
 				{/each}
 			</div>
@@ -332,4 +343,9 @@
 		width: 2rem;
 		height: 2rem;
 	}
+
+	.selected {
+		background-color: var(--dropdown5__itemHoverBgColor);
+		color: var(--dropdown5__itemHoverTextColor);
+	}
 </style>

package/dist/Input5.svelte

@@ -42,9 +42,9 @@
 
 	const defaultColorScheme: Input5ColorScheme = {
 		mainTextColor: '#D6D6D6',
-		mainBgColor: '#121212',
+		mainBgColor: '#1a191c',
 		titleColor: '#989A9A',
-		borderColor: '#262626',
+		borderColor: '#3D3D3D',
 		focusedColor: '#5ac1dd',
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',

package/dist/TimePicker5.svelte

@@ -3,10 +3,6 @@
 	import { fly } from 'svelte/transition';
 	import type { TimePicker5ColorScheme } from './types.js';
 
-	/**
-	 * Time Picker 5 v.0.0.1
-	 */
-
 	let {
 		colorScheme: partialColorScheme = {},
 		timeText = $bindable(),
@@ -31,16 +27,17 @@
 
 	const defaultColorScheme: TimePicker5ColorScheme = {
 		textColor: '#D6D6D6',
-		bgColor: '#121212',
-		borderColor: '#262626',
+		bgColor: '#1a191c',
+		borderColor: '#3d3d3d',
 		focusedColor: '#5ac1dd',
 		titleColor: '#989A9A',
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',
-		dropdownBgColor: '#141414'
+		dropdownBgColor: '#1a191c'
 	};
 
 	// Merge partial colorScheme with defaults
+	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	/**

package/package.json

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