@spaethtech/svelte-ui 0.1.10

package/dist/components/ListItem/ListItem.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+    import type { Variant } from "../../types/variants.js";
+    import Icon from "../Icon/Icon.svelte";
+    import { getVariantClasses } from "../../styles/variants.js";
+
+    interface Props {
+        value: string;
+        label?: string;
+        secondaryText?: string;
+        icon?: IconDefinition;
+        prefix?: string;
+        suffix?: string;
+        variant?: Variant;
+        disabled?: boolean;
+        selected?: boolean;
+        focused?: boolean;
+        showCheckbox?: boolean;
+        class?: string;
+        children?: Snippet;
+        onclick?: (event: MouseEvent) => void;
+        onfocus?: (event: FocusEvent) => void;
+        onblur?: (event: FocusEvent) => void;
+    }
+
+    let {
+        value,
+        label,
+        secondaryText,
+        icon,
+        prefix,
+        suffix,
+        variant = "ghost",
+        disabled = false,
+        selected = false,
+        focused = false,
+        showCheckbox = false,
+        class: className = "",
+        children,
+        onclick,
+        onfocus,
+        onblur,
+    }: Props = $props();
+
+    // Determine background classes based on state and variant
+    const backgroundClasses = $derived(() => {
+        // Checkbox mode: no selection highlighting, only focus/hover
+        if (showCheckbox) {
+            if (focused) {
+                return "[background-color:var(--color-secondary)]";
+            }
+            return "bg-transparent hover:[background-color:var(--color-secondary)]";
+        }
+
+        // Selected state: darker secondary background
+        if (selected) {
+            return "[background-color:color-mix(in_srgb,var(--color-secondary)_80%,black)] hover:[background-color:color-mix(in_srgb,var(--color-secondary)_80%,black)]";
+        }
+
+        // Focused (not selected)
+        if (focused) {
+            return "[background-color:var(--color-secondary)]";
+        }
+
+        // Default: transparent with hover
+        return "bg-transparent hover:[background-color:var(--color-secondary)]";
+    });
+
+    const textClasses = $derived(() => {
+        if (disabled) {
+            return "[color:color-mix(in_srgb,var(--color-text)_40%,transparent)]";
+        }
+
+        // For selected items, check if variant needs specific text color
+        if (selected && variant !== "ghost") {
+            // Variants with solid backgrounds need white text
+            return "text-white";
+        }
+
+        return "[color:var(--color-text)]";
+    });
+
+    const cursorClass = $derived(
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+    );
+</script>
+
+<button
+    type="button"
+    class="w-full overflow-hidden text-left focus:outline-none flex items-center transition-colors duration-150 {backgroundClasses()} {textClasses()} {cursorClass} {className}"
+    style="height: var(--list-item-height, 32px); border: none; border-radius: 0;"
+    {onclick}
+    {onfocus}
+    {onblur}
+    tabindex="-1"
+    role="option"
+    aria-selected={selected}
+    aria-disabled={disabled}
+    aria-label={label || "List item"}
+    {disabled}
+    data-value={value}
+>
+    {#if children}
+        {@render children()}
+    {:else if showCheckbox}
+        <div class="flex items-center gap-3 px-3 w-full">
+            <div class="relative flex-shrink-0 mt-1">
+                <input
+                    type="checkbox"
+                    checked={selected}
+                    {disabled}
+                    class="w-4 h-4 rounded [border-color:var(--color-secondary)] {selected
+                        ? '[background-color:var(--color-primary)] [border-color:var(--color-primary)]'
+                        : '[background-color:var(--color-background)]'} {disabled
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'cursor-pointer'}"
+                    tabindex="-1"
+                    readonly
+                />
+                {#if selected}
+                    <svg
+                        class="absolute inset-0 w-4 h-4 text-white pointer-events-none"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                {/if}
+            </div>
+            <div class="flex-1 min-w-0">
+                {#if secondaryText}
+                    <div class="font-medium text-sm truncate">{label}</div>
+                    <div
+                        class="text-xs [color:color-mix(in_srgb,var(--color-text)_60%,transparent)] truncate"
+                    >
+                        {secondaryText}
+                    </div>
+                {:else}
+                    <span class="text-sm truncate block">{label}</span>
+                {/if}
+            </div>
+        </div>
+    {:else}
+        <div class="flex items-center gap-2 px-3 w-full min-w-0">
+            {#if prefix}
+                <span class="flex-shrink-0 text-lg">{prefix}</span>
+            {/if}
+            {#if icon}
+                <span class="flex-shrink-0"><Icon {icon} size="sm" /></span>
+            {/if}
+            {#if label || secondaryText}
+                <div class="flex-1 min-w-0">
+                    {#if secondaryText}
+                        <div class="font-medium text-sm truncate">{label}</div>
+                        <div
+                            class="text-xs [color:color-mix(in_srgb,var(--color-text)_60%,transparent)] truncate"
+                        >
+                            {secondaryText}
+                        </div>
+                    {:else}
+                        <span class="text-sm truncate block">{label}</span>
+                    {/if}
+                </div>
+            {/if}
+            {#if suffix}
+                <span class="flex-shrink-0 text-sm ml-auto">{suffix}</span>
+            {/if}
+        </div>
+    {/if}
+</button>

package/dist/components/ListItem/ListItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import type { Variant } from "../../types/variants.js";
+interface Props {
+    value: string;
+    label?: string;
+    secondaryText?: string;
+    icon?: IconDefinition;
+    prefix?: string;
+    suffix?: string;
+    variant?: Variant;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+    showCheckbox?: boolean;
+    class?: string;
+    children?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+}
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/components/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ListItem.svelte";
+export { default as ListItem } from "./ListItem.svelte";

package/dist/components/ListItem/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ListItem.svelte";
+export { default as ListItem } from "./ListItem.svelte";

package/dist/components/ListView/ListView.svelte

@@ -0,0 +1,463 @@
+<script lang="ts">
+    import { untrack } from "svelte";
+    import type { Snippet } from "svelte";
+    import ScrollView from "../ScrollView/ScrollView.svelte";
+
+    type Option = Record<string, any> & {
+        value: string;
+        label: string;
+    };
+
+    interface Props {
+        options?: Option[];
+        value?: string | string[]; // Bindable selected value - string[] when multiSelect is true
+        multiSelect?: boolean; // Enable multi-select mode
+        showCheckboxes?: boolean; // Show checkboxes for selection (implies multiSelect)
+        maxVisibleItems?: number; // When not set, grows to fit all items
+        itemHeight?: number;
+        minHeight?: number; // Minimum height in pixels (default 32px)
+        class?: string;
+        containerClass?: string;
+        disabled?: boolean;
+        children?: Snippet;
+        // API integration
+        url?: string;
+        searchParam?: string;
+        transform?: (apiResponse: any) => Option[];
+        debounceMs?: number;
+        maxResults?: number;
+        headers?: Record<string, string>;
+        searchTerm?: string;
+        showLoading?: boolean;
+        loadingText?: string;
+        showError?: boolean;
+        errorText?: string;
+        emptyText?: string;
+        onError?: (error: Error) => void;
+        onLoadStart?: () => void;
+        onLoadEnd?: () => void;
+        onSelection?: (option: Option | Option[]) => void;
+    }
+
+    let {
+        options = [],
+        value = $bindable(),
+        multiSelect = false,
+        showCheckboxes = false,
+        maxVisibleItems, // Optional - when not set, grows to fit all items
+        itemHeight, // Will be auto-detected: 40px if secondaryText found, otherwise 32px
+        minHeight = 32, // Should match var(--ui-height) for standard UI element height
+        class: className = "",
+        containerClass = "",
+        disabled = false,
+        children,
+        // API integration props
+        url,
+        searchParam,
+        transform,
+        debounceMs = 300,
+        maxResults,
+        headers = {},
+        searchTerm = $bindable(""),
+        showLoading = true,
+        loadingText = "Loading...",
+        showError = true,
+        errorText = "Failed to load data",
+        emptyText = "No data",
+        onError,
+        onLoadStart,
+        onLoadEnd,
+        onSelection,
+    }: Props = $props();
+
+    // showCheckboxes implies multiSelect
+    const effectiveMultiSelect = $derived(multiSelect || showCheckboxes);
+
+    // Initialize value based on multiSelect mode
+    $effect(() => {
+        if (value === undefined) {
+            value = effectiveMultiSelect ? [] : "";
+        }
+    });
+
+    // Helper functions for multi-select
+    function isSelected(optionValue: string): boolean {
+        if (effectiveMultiSelect) {
+            return Array.isArray(value) && value.includes(optionValue);
+        }
+        return value === optionValue;
+    }
+
+    function toggleSelection(optionValue: string) {
+        if (effectiveMultiSelect && Array.isArray(value)) {
+            if (value.includes(optionValue)) {
+                value = value.filter((v) => v !== optionValue);
+            } else {
+                value = [...value, optionValue];
+            }
+        } else {
+            value = optionValue;
+        }
+    }
+
+    // API integration state
+    let isLoading = $state(false);
+    let hasError = $state(false);
+    let currentError = $state<Error | null>(null);
+    let apiOptions = $state<Option[]>([]);
+    let lastSearchTerm = $state("");
+    let abortController = $state<AbortController | null>(null);
+
+    // Combine static options with API options
+    const allOptions = $derived(() => {
+        if (url && apiOptions.length > 0) {
+            return apiOptions;
+        }
+        return options;
+    });
+
+    // Calculate height - grows to fit all items when maxVisibleItems is not set
+    const calculatedHeight = $derived(() => {
+        if (maxVisibleItems !== undefined) {
+            // Fixed height mode - use maxVisibleItems
+            return maxVisibleItems * effectiveItemHeight;
+        } else {
+            // Auto-grow mode - use actual item count from options or children
+            const opts = allOptions();
+            if (opts.length > 0) {
+                return opts.length * effectiveItemHeight;
+            }
+            // When using children (no options), use counted rendered items
+            if (renderedItemCount > 0) {
+                return renderedItemCount * effectiveItemHeight;
+            }
+            // Fallback to minHeight
+            return minHeight;
+        }
+    });
+
+    const maxHeight = $derived(() => {
+        return Math.max(calculatedHeight(), minHeight);
+    });
+
+    // Check if any options have description/secondaryText fields (available before rendering)
+    // TODO: Enable this auto-detection when options prop pattern is fully implemented
+    // const hasSecondaryText = $derived(() => {
+    //     const opts = allOptions();
+    //     return opts.some(
+    //         (opt) =>
+    //             opt.description !== undefined ||
+    //             opt.secondaryText !== undefined,
+    //     );
+    // });
+
+    // Determine default height: 32px for now, will auto-detect 48px when secondaryText support is added
+    const defaultItemHeight = $derived(32);
+
+    // Use itemHeight prop if provided, otherwise use detected default
+    const effectiveItemHeight = $derived(itemHeight ?? defaultItemHeight);
+
+    let listElement = $state<HTMLDivElement>();
+    let focusedIndex = $state(-1);
+    let keyboardCursor = $state(-1);
+    let measuredItemHeight = $state<number | null>(null);
+    let renderedItemCount = $state(0);
+
+    // Automatically measure item height and count from rendered items
+    $effect(() => {
+        if (listElement) {
+            const firstItem = listElement.querySelector('[role="option"]');
+            if (firstItem) {
+                measuredItemHeight = firstItem.getBoundingClientRect().height;
+            }
+            // Count rendered items for auto-height mode
+            const items = listElement.querySelectorAll('[role="option"]');
+            renderedItemCount = items.length;
+        }
+    });
+
+    function selectOption(optionValue: string, event: MouseEvent) {
+        if (disabled) return;
+
+        event.stopPropagation();
+
+        const clickedIndex = allOptions().findIndex(
+            (option) => option.value === optionValue,
+        );
+        if (clickedIndex >= 0) {
+            keyboardCursor = clickedIndex;
+        }
+
+        toggleSelection(optionValue);
+
+        const selectedOption = allOptions().find(
+            (option) => option.value === optionValue,
+        );
+        if (selectedOption && onSelection && value !== undefined) {
+            if (effectiveMultiSelect && Array.isArray(value)) {
+                const currentValue = value; // Capture to avoid undefined in closure
+                const selectedOptions = allOptions().filter((opt) =>
+                    currentValue.includes(opt.value),
+                );
+                onSelection(selectedOptions);
+            } else {
+                onSelection(selectedOption);
+            }
+        }
+    }
+
+    function handleListFocus() {
+        if (keyboardCursor < 0 && allOptions().length > 0) {
+            keyboardCursor = 0;
+        }
+
+        if (keyboardCursor >= 0) {
+            focusedIndex = keyboardCursor;
+
+            if (listElement) {
+                const itemTop = keyboardCursor * effectiveItemHeight;
+                const itemBottom = itemTop + effectiveItemHeight;
+                const viewTop = listElement.scrollTop;
+                const currentMaxHeight = maxHeight();
+                const viewBottom = viewTop + currentMaxHeight;
+
+                if (itemTop < viewTop || itemBottom > viewBottom) {
+                    listElement.scrollTop = Math.max(
+                        0,
+                        itemTop - (currentMaxHeight - effectiveItemHeight) / 2,
+                    );
+                }
+            }
+        } else {
+            focusedIndex = -1;
+        }
+    }
+
+    function handleListBlur() {
+        focusedIndex = -1;
+    }
+
+    // API fetch function
+    async function fetchOptions(searchQuery: string) {
+        if (!url) {
+            apiOptions = [];
+            return;
+        }
+
+        if (searchParam && !searchQuery.trim()) {
+            apiOptions = [];
+            return;
+        }
+
+        if (abortController) {
+            abortController.abort();
+        }
+
+        abortController = new AbortController();
+
+        try {
+            isLoading = true;
+            onLoadStart?.();
+
+            const apiUrl = new URL(url, window.location.origin);
+            if (searchParam && searchQuery.trim()) {
+                apiUrl.searchParams.set(searchParam, searchQuery);
+            }
+
+            const response = await fetch(apiUrl.toString(), {
+                signal: abortController.signal,
+                headers: {
+                    "Content-Type": "application/json",
+                    ...headers,
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(
+                    `HTTP ${response.status}: ${response.statusText}`,
+                );
+            }
+
+            const data = await response.json();
+
+            let transformedOptions = transform ? transform(data) : data;
+
+            if (maxResults && transformedOptions.length > maxResults) {
+                transformedOptions = transformedOptions.slice(0, maxResults);
+            }
+
+            apiOptions = transformedOptions;
+            lastSearchTerm = searchQuery;
+        } catch (error) {
+            if (error instanceof Error && error.name !== "AbortError") {
+                console.error("ListView API fetch error:", error);
+                hasError = true;
+                currentError = error;
+                onError?.(error);
+                apiOptions = [];
+            }
+        } finally {
+            isLoading = false;
+            onLoadEnd?.();
+            abortController = null;
+        }
+    }
+
+    // API fetch effect for search functionality
+    $effect(() => {
+        if (url && searchParam) {
+            if (searchTerm.trim() && searchTerm !== lastSearchTerm) {
+                const timeoutId = setTimeout(() => {
+                    fetchOptions(searchTerm);
+                }, debounceMs);
+
+                return () => clearTimeout(timeoutId);
+            } else if (!searchTerm.trim()) {
+                apiOptions = [];
+            }
+        }
+    });
+
+    // Initial API fetch for static data (no search) - run once on mount
+    $effect(() => {
+        if (url && !searchParam) {
+            untrack(() => fetchOptions(""));
+        }
+    });
+
+    // Clear error state when search term changes
+    $effect(() => {
+        if (searchTerm !== lastSearchTerm) {
+            hasError = false;
+            currentError = null;
+        }
+    });
+
+    // Handle keyboard navigation within list
+    function handleListKeydown(event: KeyboardEvent) {
+        if (disabled) return;
+
+        if (event.key === "Tab") {
+            return;
+        }
+
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (focusedIndex === -1) {
+                const startIndex = keyboardCursor >= 0 ? keyboardCursor : 0;
+
+                if (event.key === "ArrowDown") {
+                    focusedIndex = Math.min(
+                        startIndex + 1,
+                        allOptions().length - 1,
+                    );
+                } else {
+                    focusedIndex = Math.max(startIndex - 1, 0);
+                }
+            } else {
+                if (event.key === "ArrowDown") {
+                    focusedIndex = Math.min(
+                        focusedIndex + 1,
+                        allOptions().length - 1,
+                    );
+                } else {
+                    focusedIndex = Math.max(focusedIndex - 1, 0);
+                }
+            }
+
+            keyboardCursor = focusedIndex;
+
+            if (listElement && maxVisibleItems !== undefined) {
+                const itemTop = focusedIndex * itemHeight;
+                const itemBottom = itemTop + itemHeight;
+                const viewTop = listElement.scrollTop;
+                const currentMaxHeight = maxHeight();
+                const viewBottom = viewTop + currentMaxHeight;
+
+                if (itemTop < viewTop) {
+                    listElement.scrollTop = itemTop;
+                } else if (itemBottom > viewBottom) {
+                    listElement.scrollTop = itemBottom - currentMaxHeight;
+                }
+            }
+        } else if (event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            if (focusedIndex >= 0 && focusedIndex < allOptions().length) {
+                const selectedOption = allOptions()[focusedIndex];
+
+                toggleSelection(selectedOption.value);
+
+                if (onSelection && value !== undefined) {
+                    if (effectiveMultiSelect && Array.isArray(value)) {
+                        const currentValue = value; // Capture to avoid undefined in closure
+                        const selectedOptions = allOptions().filter((opt) =>
+                            currentValue.includes(opt.value),
+                        );
+                        onSelection(selectedOptions);
+                    } else {
+                        onSelection(selectedOption);
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<ScrollView
+    class={className}
+    style="--list-item-height: {effectiveItemHeight}px; height: {maxHeight()}px;"
+    {disabled}
+    showScrollbar={maxVisibleItems !== undefined}
+    bind:view={listElement}
+>
+    <div
+        class="flex flex-col"
+        onkeydown={handleListKeydown}
+        onfocus={handleListFocus}
+        onblur={handleListBlur}
+        tabindex={disabled ? -1 : 0}
+        role="listbox"
+        aria-label="List of options"
+        aria-busy={isLoading}
+        aria-disabled={disabled}
+        aria-multiselectable={effectiveMultiSelect}
+    >
+        {#if isLoading && showLoading}
+            <div
+                class="flex items-center justify-center py-4 [color:var(--color-secondary)]"
+            >
+                <div
+                    class="animate-spin rounded-full h-4 w-4 border-b-2 [border-color:var(--color-secondary)] mr-2"
+                ></div>
+                {loadingText}
+            </div>
+        {:else if hasError && showError}
+            <div
+                class="flex items-center justify-center py-4 [color:var(--color-danger)]"
+            >
+                <span class="text-sm [color:var(--color-danger)]"
+                    >{errorText}</span
+                >
+            </div>
+        {:else if children}
+            {@render children()}
+        {:else if allOptions().length === 0}
+            <div
+                class="flex items-center justify-center [color:var(--color-secondary)] select-none"
+                style="height: {effectiveItemHeight}px;"
+            >
+                <span class="px-4 text-sm [color:var(--color-secondary)]"
+                    >{emptyText}</span
+                >
+            </div>
+        {:else}
+            <div class="text-sm [color:var(--color-secondary)] px-4 py-2">
+                No children provided. Use ListView with ListItem components or
+                provide a children snippet.
+            </div>
+        {/if}
+    </div>
+</ScrollView>