ui-svelte 0.2.11 → 0.2.13

package/dist/overlay/Command.svelte

@@ -0,0 +1,347 @@
+<script lang="ts">
+	import type { SearchState, SearchOption } from '../hooks/use-search.svelte.js';
+	import { Search24RegularIcon, DotsMoveIcon } from '../icons/index.js';
+	import { Icon, Item, Modal, TextField, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import { tick } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
+
+	type CommandGroup = {
+		label: string;
+		icon?: IconData;
+		options: SearchOption[];
+	};
+
+	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;
+		shortcut?: string;
+		showFooter?: boolean;
+		groups?: CommandGroup[];
+		onselect?: (item: SearchOption) => void;
+		onclose?: () => void;
+		class?: string;
+	};
+
+	let {
+		search,
+		open = $bindable(false),
+		labels = {},
+		color = 'muted',
+		disableOverlayClose = false,
+		disableGlobalShortcut = false,
+		shortcut = 'k',
+		showFooter = true,
+		groups,
+		onselect,
+		onclose,
+		class: className
+	}: Props = $props();
+
+	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);
+	});
+
+	const flatOptions = $derived(() => {
+		const filtered = filteredGroups();
+		if (filtered.length > 0) {
+			return filtered.flatMap((g) => g.options);
+		}
+		return search.options;
+	});
+
+	const scrollToItem = (index: number) => {
+		if (!optionsEl) return;
+		const items = Array.from(optionsEl.querySelectorAll('.item'));
+		const target = items[index] as HTMLElement;
+		if (!target) return;
+
+		target.scrollIntoView({ block: 'nearest' });
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		const items = flatOptions();
+		if (!items.length && event.key !== 'Escape') return;
+
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				focusedIndex = (focusedIndex + 1) % items.length;
+				scrollToItem(focusedIndex);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				focusedIndex = (focusedIndex - 1 + items.length) % items.length;
+				scrollToItem(focusedIndex);
+				break;
+			case 'Enter': {
+				event.preventDefault();
+				if (focusedIndex >= 0 && focusedIndex < items.length) {
+					handleSelect(items[focusedIndex]);
+				}
+				break;
+			}
+			case 'Escape':
+				event.preventDefault();
+				handleClose();
+				break;
+		}
+	};
+
+	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;
+
+		if (modifier && event.key.toLowerCase() === shortcut.toLowerCase()) {
+			event.preventDefault();
+			open = !open;
+		}
+	};
+
+	const handleScroll = async () => {
+		if (!optionsEl || !search.hasMore || search.isLoadingMore) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = optionsEl;
+		const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+		if (scrollPercentage >= 0.8) {
+			await search.loadMore();
+		}
+	};
+
+	const handleSelect = (item: SearchOption) => {
+		onselect?.(item);
+		open = false;
+		search.setSearch('');
+	};
+
+	const handleClose = () => {
+		open = false;
+		focusedIndex = -1;
+		hasSearched = false;
+		search.setSearch('');
+		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) {
+			document.addEventListener('keydown', handleKeyDown);
+		} else {
+			document.removeEventListener('keydown', handleKeyDown);
+		}
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	});
+
+	$effect(() => {
+		if (open && searchInputEl) {
+			tick().then(() => {
+				searchInputEl?.focus();
+				focusedIndex = -1;
+				hasSearched = false;
+			});
+		}
+	});
+
+	$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);
+		};
+	});
+</script>
+
+{#snippet commandKbd()}
+	<div class="command-kbd">
+		<kbd>Esc</kbd>
+		<span>{t.closeText}</span>
+	</div>
+{/snippet}
+
+{#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}
+
+	<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}
+						{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>{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 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>
+				</div>
+				<div class="command-shortcut-item">
+					<kbd>{modifierKey}</kbd><kbd>{shortcut.toUpperCase()}</kbd>
+					<span>{t.toggleText}</span>
+				</div>
+			</div>
+		{/if}
+	{/snippet}
+</Modal>

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

@@ -1,26 +1,34 @@
-export default Command;
-type Command = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+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 CommandLabels = {
+    placeholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    loadingMoreText?: string;
+    closeText?: string;
+    navigateText?: string;
+    selectText?: string;
+    toggleText?: string;
 };
-declare const Command: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+type Props = {
+    search: SearchState;
+    open?: boolean;
+    labels?: CommandLabels;
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    disableOverlayClose?: boolean;
+    disableGlobalShortcut?: boolean;
+    shortcut?: string;
+    showFooter?: boolean;
+    groups?: CommandGroup[];
+    onselect?: (item: SearchOption) => void;
+    onclose?: () => void;
+    class?: string;
+};
+declare const Command: import("svelte").Component<Props, {}, "open">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/overlay/Drawer.svelte

@@ -5,7 +5,7 @@
 	import { fade } from 'svelte/transition';
 	import { afterNavigate } from '$app/navigation';
 	import { Dismiss24RegularIcon } from '../icons/index.js';
-	import { Icon } from '../index.js';
+	import { IconButton } from '../index.js';
 
 	type Props = {
 		open: boolean;
@@ -18,10 +18,19 @@
 		headerClass?: string;
 		footerClass?: string;
 		bodyClass?: string;
-		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'background';
+		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -35,10 +44,10 @@
 		headerClass,
 		bodyClass,
 		footerClass,
-		variant = 'ghost',
+		color = 'background',
+		variant = 'solid',
 		disableOverlayClose,
-		hideCloseButton,
-		isSolid
+		hideCloseButton
 	}: Props = $props();
 
 	const positionClasses = {
@@ -48,12 +57,33 @@
 		bottom: 'is-bottom'
 	};
 
-	const variants = {
-		ghost: 'is-ghost',
-		surface: 'is-surface',
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		surface: 'is-surface',
+		background: 'is-background'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger',
+		surface: 'muted',
+		background: 'muted'
 	};
 
 	let openDrawer = $state(false);
@@ -95,13 +125,7 @@
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="drawer-overlay" onclick={handleOverlayClick}></div>
 		<div
-			class={cn(
-				'drawer',
-				positionClasses[position],
-				variants[variant],
-				isSolid && 'is-solid',
-				className
-			)}
+			class={cn('drawer', positionClasses[position], variants[variant], colors[color], className)}
 			class:is-active={openContent}
 		>
 			{#if header}
@@ -118,10 +142,14 @@
 				</div>
 			{/if}
 			{#if !hideCloseButton}
-				<div class="btn-close">
-					<button onclick={() => (open = false)}>
-						<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-					</button>
+				<div class="drawer-btn-close">
+					<IconButton
+						icon={Dismiss24RegularIcon}
+						variant={variant === 'solid' ? 'soft' : 'solid'}
+						color={closeColors[color] as any}
+						size="xs"
+						onclick={() => (open = false)}
+					/>
 				</div>
 			{/if}
 		</div>

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

@@ -10,10 +10,10 @@ type Props = {
     headerClass?: string;
     footerClass?: string;
     bodyClass?: string;
-    variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
+    variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;
-    isSolid?: boolean;
 };
 declare const Drawer: import("svelte").Component<Props, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/overlay/Dropdown.svelte

@@ -14,13 +14,13 @@
 
 	type Props = {
 		options: Option[];
-		variant?: 'primary' | 'secondary' | 'muted';
+		color?: 'primary' | 'secondary' | 'muted' | 'success' | 'danger' | 'warning' | 'info';
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
 	};
 
-	const { children, header, footer, options, variant = 'primary' }: Props = $props();
+	const { children, header, footer, options, color = 'primary' }: Props = $props();
 
 	let isOpen = $state(false);
 	let controlElement = $state<HTMLElement>();
@@ -131,7 +131,7 @@
 					id={item.id}
 					href={item.href}
 					onclick={() => item.onclick?.(item)}
-					{variant}
+					{color}
 					size="sm"
 					isCompact
 				/>

package/dist/overlay/Modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import IconButton from '../control/IconButton.svelte';
 	import { Dismiss24RegularIcon } from '../icons/index.js';
 	import { Icon } from '../index.js';
 	import { cn } from '../utils/class-names.js';
@@ -12,14 +13,23 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		class?: string;
+		rootClass?: string;
 		headerClass?: string;
 		footerClass?: string;
 		contentClass?: string;
-		variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+		color?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'success'
+			| 'info'
+			| 'warning'
+			| 'danger'
+			| 'surface'
+			| 'background';
+		variant?: 'solid' | 'soft';
 		disableOverlayClose?: boolean;
 		hideCloseButton?: boolean;
-		isSolid?: boolean;
 	};
 
 	let {
@@ -28,24 +38,45 @@
 		header,
 		footer,
 		children,
-		class: className,
+		rootClass,
 		headerClass,
 		contentClass,
 		footerClass,
-		variant = 'ghost',
+		color = 'background',
+		variant = 'solid',
 		disableOverlayClose,
-		hideCloseButton,
-		isSolid
+		hideCloseButton
 	}: Props = $props();
 
 	let openContent = $state(false);
 
-	const variants = {
-		ghost: 'is-ghost',
-		surface: 'is-surface',
+	const colors = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
-		muted: 'is-muted'
+		muted: 'is-muted',
+		success: 'is-success',
+		info: 'is-info',
+		danger: 'is-danger',
+		warning: 'is-warning',
+		surface: 'is-surface',
+		background: 'is-background'
+	};
+
+	const variants = {
+		solid: 'is-solid',
+		soft: 'is-soft'
+	};
+
+	const closeColors = {
+		primary: 'primary',
+		secondary: 'secondary',
+		muted: 'muted',
+		success: 'success',
+		info: 'info',
+		warning: 'warning',
+		danger: 'danger',
+		surface: 'muted',
+		background: 'muted'
 	};
 
 	const handleOverlayClick = () => {
@@ -74,14 +105,14 @@
 		{#if openContent}
 			<div
 				in:scale={{ duration: 100 }}
-				class={cn('modal', variants[variant], isSolid && 'is-solid', className)}
+				class={cn('modal', variants[variant], colors[color], rootClass)}
 			>
 				{#if header}
 					<div class={cn('modal-header', headerClass)}>
 						{@render header()}
 					</div>
 				{/if}
-				<div class={cn('modal-content', contentClass)}>
+				<div class={cn('modal-body', contentClass)}>
 					{@render children()}
 				</div>
 				{#if footer}
@@ -91,9 +122,13 @@
 				{/if}
 				{#if !hideCloseButton}
 					<div class="btn-close">
-						<button onclick={() => (open = false)}>
-							<Icon icon={Dismiss24RegularIcon} class="btn-close-icon" />
-						</button>
+						<IconButton
+							icon={Dismiss24RegularIcon}
+							variant={variant === 'solid' ? 'soft' : 'solid'}
+							color={closeColors[color] as any}
+							size="xs"
+							onclick={() => (open = false)}
+						/>
 					</div>
 				{/if}
 			</div>

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

@@ -5,14 +5,14 @@ type Props = {
     children: Snippet;
     header?: Snippet;
     footer?: Snippet;
-    class?: string;
+    rootClass?: string;
     headerClass?: string;
     footerClass?: string;
     contentClass?: string;
-    variant?: 'ghost' | 'surface' | 'primary' | 'secondary' | 'muted';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
+    variant?: 'solid' | 'soft';
     disableOverlayClose?: boolean;
     hideCloseButton?: boolean;
-    isSolid?: boolean;
 };
 declare const Modal: import("svelte").Component<Props, {}, "open">;
 type Modal = ReturnType<typeof Modal>;