ui-svelte 0.2.12 → 0.2.13

package/dist/overlay/Command.svelte

@@ -1,24 +1,32 @@
 <script lang="ts">
 	import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
 	import { Search24RegularIcon, DotsMoveIcon } from '../icons/index.js';
-	import { Icon, Item, type IconData } from '../index.js';
+	import { Icon, Item, Modal, TextField, type IconData } from '../index.js';
 	import { cn } from '../utils/class-names.js';
-	import { popover } from '../utils/popover.js';
 	import { tick } from 'svelte';
-	import { fade, scale } from 'svelte/transition';
+	import { afterNavigate } from '$app/navigation';
 
 	type CommandGroup = {
 		label: string;
+		icon?: IconData;
 		options: SearchOption[];
 	};
 
-	type Props = {
-		search: SearchState;
-		open?: boolean;
+	type CommandLabels = {
 		placeholder?: string;
 		emptyText?: string;
 		loadingText?: string;
 		loadingMoreText?: string;
+		closeText?: string;
+		navigateText?: string;
+		selectText?: string;
+		toggleText?: string;
+	};
+
+	type Props = {
+		search: SearchState;
+		open?: boolean;
+		labels?: CommandLabels;
 		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
 		disableOverlayClose?: boolean;
 		disableGlobalShortcut?: boolean;
@@ -33,10 +41,7 @@
 	let {
 		search,
 		open = $bindable(false),
-		placeholder = 'Search...',
-		emptyText = 'No results found',
-		loadingText = 'Loading...',
-		loadingMoreText = 'Loading more...',
+		labels = {},
 		color = 'muted',
 		disableOverlayClose = false,
 		disableGlobalShortcut = false,
@@ -48,16 +53,42 @@
 		class: className
 	}: Props = $props();
 
-	let openContent = $state(false);
+	const defaultLabels: Required<CommandLabels> = {
+		placeholder: 'Search...',
+		emptyText: 'No results found',
+		loadingText: 'Loading...',
+		loadingMoreText: 'Loading more...',
+		closeText: 'to close',
+		navigateText: 'Navigate',
+		selectText: 'Select',
+		toggleText: 'Toggle'
+	};
+
+	const t = $derived({ ...defaultLabels, ...labels });
+
 	let optionsEl = $state<HTMLElement>();
 	let searchInputEl = $state<HTMLInputElement>();
 	let focusedIndex = $state(-1);
 	let hasSearched = $state(false);
+	let modifierKey = $state('Ctrl');
+
+	const filteredGroups = $derived(() => {
+		if (!groups || groups.length === 0) return [];
+		const query = search.search?.toLowerCase() ?? '';
+		if (!query) return groups;
+
+		return groups
+			.map((group) => ({
+				...group,
+				options: group.options.filter((opt) => opt.label.toLowerCase().includes(query))
+			}))
+			.filter((group) => group.options.length > 0);
+	});
 
-	// Flatten options for keyboard navigation
 	const flatOptions = $derived(() => {
-		if (groups && groups.length > 0) {
-			return groups.flatMap((g) => g.options);
+		const filtered = filteredGroups();
+		if (filtered.length > 0) {
+			return filtered.flatMap((g) => g.options);
 		}
 		return search.options;
 	});
@@ -102,6 +133,7 @@
 
 	const handleGlobalKeyDown = (event: KeyboardEvent) => {
 		if (disableGlobalShortcut) return;
+		if (typeof navigator === 'undefined') return;
 
 		const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 		const modifier = isMac ? event.metaKey : event.ctrlKey;
@@ -124,20 +156,9 @@
 	};
 
 	const handleSelect = (item: SearchOption) => {
-		if (item.href) {
-			open = false;
-			search.setSearch('');
-		} else {
-			onselect?.(item);
-			open = false;
-			search.setSearch('');
-		}
-	};
-
-	const handleOverlayClick = () => {
-		if (!disableOverlayClose) {
-			handleClose();
-		}
+		onselect?.(item);
+		open = false;
+		search.setSearch('');
 	};
 
 	const handleClose = () => {
@@ -148,20 +169,31 @@
 		onclose?.();
 	};
 
+	const handleModalClose = () => {
+		handleClose();
+	};
+
 	$effect(() => {
 		if (search.search && search.search.length > 0) {
 			hasSearched = true;
 		}
 	});
 
+	$effect(() => {
+		afterNavigate(() => {
+			if (open) {
+				open = false;
+				focusedIndex = -1;
+				hasSearched = false;
+				search.setSearch('');
+			}
+		});
+	});
+
 	$effect(() => {
 		if (open) {
-			setTimeout(() => {
-				openContent = true;
-			}, 20);
 			document.addEventListener('keydown', handleKeyDown);
 		} else {
-			openContent = false;
 			document.removeEventListener('keydown', handleKeyDown);
 		}
 
@@ -171,7 +203,7 @@
 	});
 
 	$effect(() => {
-		if (openContent && searchInputEl) {
+		if (open && searchInputEl) {
 			tick().then(() => {
 				searchInputEl?.focus();
 				focusedIndex = -1;
@@ -181,160 +213,135 @@
 	});
 
 	$effect(() => {
+		if (typeof document === 'undefined') return;
+
 		if (!disableGlobalShortcut) {
 			document.addEventListener('keydown', handleGlobalKeyDown);
 		}
 
+		if (typeof navigator !== 'undefined') {
+			const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+			modifierKey = isMac ? '⌘' : 'Ctrl';
+		}
+
 		return () => {
 			document.removeEventListener('keydown', handleGlobalKeyDown);
 		};
 	});
-
-	const isMac =
-		typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-	const modifierKey = isMac ? '⌘' : 'Ctrl';
 </script>
 
-{#if open}
-	<div transition:fade class="command-dialog" use:popover>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="command-overlay" onclick={handleOverlayClick}></div>
-		{#if openContent}
-			<div in:scale={{ duration: 100 }} class={cn('command', className)}>
-				<div class="command-search">
-					<Icon icon={Search24RegularIcon} class="command-search-icon" />
-					<input
-						bind:this={searchInputEl}
-						type="text"
-						class="command-search-input"
-						{placeholder}
-						bind:value={search.search}
-					/>
-					<div class="command-kbd">
-						<kbd>Esc</kbd>
-						<span>to close</span>
-					</div>
-				</div>
+{#snippet commandKbd()}
+	<div class="command-kbd">
+		<kbd>Esc</kbd>
+		<span>{t.closeText}</span>
+	</div>
+{/snippet}
 
-				<div class="command-results" bind:this={optionsEl} onscroll={handleScroll}>
-					{#if search.isLoading}
-						<div class="command-loading">
-							<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
-							<span>{loadingText}</span>
-						</div>
-					{:else if flatOptions().length === 0 && hasSearched}
-						<div class="command-empty">{emptyText}</div>
-					{:else if groups && groups.length > 0}
-						{#each groups as group}
-							{#if group.options.length > 0}
-								<div class="command-group">
-									<div class="command-group-label">{group.label}</div>
-									{#each group.options as item}
-										{@const globalIndex = flatOptions().indexOf(item)}
-										{#if item.href}
-											<Item
-												id={item.id}
-												label={item.label}
-												icon={item.icon as IconData}
-												src={item.src}
-												description={item.description}
-												href={item.href as string}
-												isFocused={focusedIndex === globalIndex}
-												isDisabled={item.disabled}
-												{color}
-												size="sm"
-												isCompact
-												onclick={() => handleSelect(item)}
-											/>
-										{:else}
-											<Item
-												id={item.id}
-												label={item.label}
-												icon={item.icon as IconData}
-												src={item.src}
-												description={item.description}
-												isFocused={focusedIndex === globalIndex}
-												isDisabled={item.disabled}
-												{color}
-												size="sm"
-												isCompact
-												onclick={() => handleSelect(item)}
-											/>
-										{/if}
-									{/each}
-								</div>
-							{/if}
-						{/each}
+{#snippet renderItem(item: SearchOption, index: number)}
+	{@const hasVisualElement = !!item.icon || !!item.src}
+	<Item
+		id={item.id}
+		label={item.label}
+		icon={item.icon as IconData}
+		src={item.src}
+		description={item.description}
+		href={item.href as string | undefined}
+		isFocused={focusedIndex === index}
+		isDisabled={item.disabled}
+		hasBullet={!hasVisualElement}
+		{color}
+		size="sm"
+		isCompact
+		onclick={() => handleSelect(item)}
+	/>
+{/snippet}
+
+<Modal
+	bind:open
+	onclose={handleModalClose}
+	rootClass={cn(className)}
+	color="background"
+	{disableOverlayClose}
+	hideCloseButton
+>
+	{#snippet header()}
+		<TextField
+			bind:el={searchInputEl}
+			bind:value={search.search}
+			placeholder={t.placeholder}
+			startIcon={Search24RegularIcon}
+			variant="line"
+			{color}
+			size="md"
+			endText={commandKbd}
+		/>
+	{/snippet}
 
-						{#if search.isLoadingMore}
-							<div class="command-loading">
-								<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
-								<span>{loadingMoreText}</span>
-							</div>
+	<div class="command-results" bind:this={optionsEl} onscroll={handleScroll}>
+		{#if search.isLoading}
+			<div class="command-loading">
+				<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+				<span>{t.loadingText}</span>
+			</div>
+		{:else if flatOptions().length === 0 && hasSearched}
+			<div class="command-empty">{t.emptyText}</div>
+		{:else if filteredGroups().length > 0}
+			{#each filteredGroups() as group}
+				<div class="command-group">
+					<div class="command-group-label">
+						{#if group.icon}
+							<Icon icon={group.icon} class="command-group-icon" />
 						{/if}
-					{:else if search.options.length > 0}
-						{#each search.options as item, index}
-							{#if item.href}
-								<Item
-									id={item.id}
-									label={item.label}
-									icon={item.icon as IconData}
-									src={item.src}
-									description={item.description}
-									href={item.href as string}
-									isFocused={focusedIndex === index}
-									isDisabled={item.disabled}
-									{color}
-									size="sm"
-									isCompact
-									onclick={() => handleSelect(item)}
-								/>
-							{:else}
-								<Item
-									id={item.id}
-									label={item.label}
-									icon={item.icon as IconData}
-									src={item.src}
-									description={item.description}
-									isFocused={focusedIndex === index}
-									isDisabled={item.disabled}
-									{color}
-									size="sm"
-									isCompact
-									onclick={() => handleSelect(item)}
-								/>
-							{/if}
+						{group.label}
+					</div>
+					<div class="command-group-items">
+						{#each group.options as item}
+							{@render renderItem(item, flatOptions().indexOf(item))}
 						{/each}
+					</div>
+				</div>
+			{/each}
 
-						{#if search.isLoadingMore}
-							<div class="command-loading">
-								<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
-								<span>{loadingMoreText}</span>
-							</div>
-						{/if}
-					{/if}
+			{#if search.isLoadingMore}
+				<div class="command-loading">
+					<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+					<span>{t.loadingMoreText}</span>
 				</div>
+			{/if}
+		{:else if search.options.length > 0}
+			<div class="command-group-items">
+				{#each search.options as item, index}
+					{@render renderItem(item, index)}
+				{/each}
+			</div>
 
-				{#if showFooter}
-					<div class="command-footer">
-						<div class="command-shortcut">
-							<div class="command-shortcut-item">
-								<kbd>↑</kbd><kbd>↓</kbd>
-								<span>Navigate</span>
-							</div>
-							<div class="command-shortcut-item">
-								<kbd>↵</kbd>
-								<span>Select</span>
-							</div>
-						</div>
-						<div class="command-shortcut-item">
-							<kbd>{modifierKey}</kbd><kbd>{shortcut.toUpperCase()}</kbd>
-							<span>Toggle</span>
-						</div>
+			{#if search.isLoadingMore}
+				<div class="command-loading">
+					<Icon icon={DotsMoveIcon} class="command-loading-spinner" />
+					<span>{t.loadingMoreText}</span>
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	{#snippet footer()}
+		{#if showFooter}
+			<div class="command-shortcuts">
+				<div class="command-shortcut">
+					<div class="command-shortcut-item">
+						<kbd>↑</kbd><kbd>↓</kbd>
+						<span>{t.navigateText}</span>
+					</div>
+					<div class="command-shortcut-item">
+						<kbd>↵</kbd>
+						<span>{t.selectText}</span>
 					</div>
-				{/if}
+				</div>
+				<div class="command-shortcut-item">
+					<kbd>{modifierKey}</kbd><kbd>{shortcut.toUpperCase()}</kbd>
+					<span>{t.toggleText}</span>
+				</div>
 			</div>
 		{/if}
-	</div>
-{/if}
+	{/snippet}
+</Modal>

package/dist/overlay/Command.svelte.d.ts

@@ -1,15 +1,24 @@
 import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
+import { type IconData } from '../index.js';
 type CommandGroup = {
     label: string;
+    icon?: IconData;
     options: SearchOption[];
 };
-type Props = {
-    search: SearchState;
-    open?: boolean;
+type CommandLabels = {
     placeholder?: string;
     emptyText?: string;
     loadingText?: string;
     loadingMoreText?: string;
+    closeText?: string;
+    navigateText?: string;
+    selectText?: string;
+    toggleText?: string;
+};
+type Props = {
+    search: SearchState;
+    open?: boolean;
+    labels?: CommandLabels;
     color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
     disableOverlayClose?: boolean;
     disableGlobalShortcut?: boolean;

package/dist/overlay/Drawer.svelte

@@ -27,7 +27,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
@@ -44,7 +44,7 @@
 		headerClass,
 		bodyClass,
 		footerClass,
-		color = 'default',
+		color = 'background',
 		variant = 'solid',
 		disableOverlayClose,
 		hideCloseButton
@@ -66,7 +66,7 @@
 		danger: 'is-danger',
 		warning: 'is-warning',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {
@@ -83,7 +83,7 @@
 		warning: 'warning',
 		danger: 'danger',
 		surface: 'muted',
-		default: 'muted'
+		background: 'muted'
 	};
 
 	let openDrawer = $state(false);

package/dist/overlay/Drawer.svelte.d.ts

@@ -10,7 +10,7 @@ type Props = {
     headerClass?: string;
     footerClass?: string;
     bodyClass?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;

package/dist/overlay/Modal.svelte

@@ -26,7 +26,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
@@ -42,7 +42,7 @@
 		headerClass,
 		contentClass,
 		footerClass,
-		color = 'default',
+		color = 'background',
 		variant = 'solid',
 		disableOverlayClose,
 		hideCloseButton
@@ -59,7 +59,7 @@
 		danger: 'is-danger',
 		warning: 'is-warning',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variants = {
@@ -76,7 +76,7 @@
 		warning: 'warning',
 		danger: 'danger',
 		surface: 'muted',
-		default: 'muted'
+		background: 'muted'
 	};
 
 	const handleOverlayClick = () => {

package/dist/overlay/Modal.svelte.d.ts

@@ -9,7 +9,7 @@ type Props = {
     headerClass?: string;
     footerClass?: string;
     contentClass?: string;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;

package/dist/overlay/Tooltip.svelte

@@ -82,10 +82,6 @@
 				break;
 		}
 
-		// Note: Don't add scroll offsets for position: fixed
-		// getBoundingClientRect() returns viewport-relative coordinates
-		// and position: fixed is also relative to the viewport
-
 		const padding = 8;
 		if (left < padding) left = padding;
 		if (left + tooltipRect.width > window.innerWidth - padding) {
@@ -102,7 +98,6 @@
 	const handleMouseEnter = () => {
 		startEventListeners();
 		isOpen = true;
-		// Use requestAnimationFrame to ensure the element is rendered before calculating position
 		requestAnimationFrame(() => {
 			updatePosition();
 		});