@lumen-design/autocomplete 0.0.2

package/dist/Autocomplete.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+    import Icon from '@lumen-design/icon'
+    import { X, Loader2, ChevronDown } from 'lucide'
+
+    interface SuggestionItem {
+        value: string
+        [key: string]: any
+    }
+
+    interface Props {
+        modelValue?: string
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        loading?: boolean
+        debounce?: number
+        valueKey?: string
+        fetchSuggestions?: (query: string) => Promise<SuggestionItem[]> | SuggestionItem[]
+        size?: 'small' | 'default' | 'large'
+        showMenuArrow?: boolean
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(''),
+        placeholder = '',
+        disabled = false,
+        clearable = false,
+        loading = $bindable(false),
+        debounce = 300,
+        valueKey = 'value',
+        fetchSuggestions,
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let suggestions = $state<SuggestionItem[]>([])
+    let highlightIndex = $state(-1)
+    let inputRef: HTMLElement | null = $state(null)
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+    const handleInput = (e: Event): void => {
+        modelValue = (e.target as HTMLInputElement).value
+        highlightIndex = -1
+        if (debounceTimer) clearTimeout(debounceTimer)
+        debounceTimer = setTimeout(() => fetchData(modelValue), debounce)
+    }
+
+    const fetchData = async (query: string): Promise<void> => {
+        if (!fetchSuggestions) {
+            suggestions = []
+            visible = false
+            return
+        }
+        loading = true
+        try {
+            suggestions = await fetchSuggestions(query)
+            visible = suggestions.length > 0
+        } catch {
+            suggestions = []
+            visible = false
+        } finally {
+            loading = false
+        }
+    }
+
+    const handleSelect = (item: SuggestionItem): void => {
+        modelValue = item[valueKey]
+        visible = false
+        suggestions = []
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = ''
+        suggestions = []
+        visible = false
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (!visible) return
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            highlightIndex = Math.min(highlightIndex + 1, suggestions.length - 1)
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            highlightIndex = Math.max(highlightIndex - 1, 0)
+        } else if (e.key === 'Enter' && highlightIndex >= 0 && suggestions[highlightIndex]) {
+            e.preventDefault()
+            handleSelect(suggestions[highlightIndex])
+        } else if (e.key === 'Escape') {
+            visible = false
+        }
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(['lm-autocomplete', disabled && 'is-disabled', size !== 'default' && `lm-autocomplete--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div class="lm-autocomplete__input" class:is-focus={visible}>
+        <input
+            type="text"
+            value={modelValue}
+            {placeholder}
+            {disabled}
+            role="combobox"
+            aria-expanded={visible}
+            aria-controls="autocomplete-listbox"
+            aria-autocomplete="list"
+            oninput={handleInput}
+            onfocus={() => suggestions.length > 0 && (visible = true)}
+            onkeydown={handleKeydown}
+        />
+        {#if loading}
+            <span class="lm-autocomplete__loading" aria-label="加载中">
+                <Icon icon={Loader2} size={14} />
+            </span>
+        {:else if clearable && modelValue && !disabled}
+            <button type="button" class="lm-autocomplete__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-autocomplete__arrow" class:is-open={visible} aria-hidden="true">
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible && suggestions.length > 0}
+        <div class="lm-autocomplete__dropdown" role="listbox" id="autocomplete-listbox">
+            {#if showMenuArrow}
+                <div class="lm-autocomplete__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <ul class="lm-autocomplete__menu" role="group">
+                {#each suggestions as item, index (item[valueKey])}
+                    <li
+                        class="lm-autocomplete__item"
+                        class:is-highlighted={index === highlightIndex}
+                        role="option"
+                        aria-selected={index === highlightIndex}
+                        onmousedown={() => handleSelect(item)}
+                        onmouseenter={() => (highlightIndex = index)}
+                    >
+                        {item[valueKey]}
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    {/if}
+</div>

package/dist/index.js

@@ -0,0 +1,3 @@
+import Autocomplete from './Autocomplete.svelte';
+export default Autocomplete;
+export { Autocomplete };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lumen-design/autocomplete",
+  "version": "0.0.2",
+  "description": "Autocomplete component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "dependencies": {
+    "@lumen-design/input": "0.0.2",
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}