fix(autocomplete): add fetch

packages/autocomplete/package.json

@@ -25,7 +25,8 @@
     "@svelement-ui/theme-chalk": "workspace:^",
     "@svelement-ui/tooltip": "workspace:^",
     "@svelement-ui/util-array-2-class-string": "workspace:^",
-    "@svelement-ui/utils": "workspace:^"
+    "@svelement-ui/utils": "workspace:^",
+    "debouncing": "^22.7.25"
   },
   "bundledDependencies": [
     "@svelement-ui/util-array-2-class-string"

packages/autocomplete/src/lib/autocomplete.svelte

@@ -3,13 +3,29 @@
   import SvelInput from '@svelement-ui/input';
   import SvelTooltip from '@svelement-ui/tooltip';
   import SvelScrollbar from '@svelement-ui/scrollbar';
-  import { getContext } from 'svelte';
+  import { getContext, createEventDispatcher } from 'svelte';
   import { isArray } from '@svelement-ui/utils';
+  import { debounce as debouncing } from 'debouncing';
+
+  const dispatch = createEventDispatcher();
 
   export let value;
+  export let placeholder;
+  export let clearable = false;
+  export let disabled = false;
+  export let valueKey = 'value';
+  export let debounce = 300;
+  export let placement = 'bottom-start';
   export let fetchSuggestions;
   export let triggerOnFocus = true;
+  export let selectWhenUnmatched = false;
+  export let name;
+  export let label;
+  export let hideLoading = false;
+  export let popperClass;
+  export let teleported = false;
   export let highlightFirstItem = false;
+  export let fitInputWidth = false;
 
   let suggestions = [];
   let dropdownWidth = '';
@@ -36,14 +52,33 @@
       }
     };
 
-    loading.value = true;
+    loading = true;
     if (isArray(fetchSuggestions)) {
       cb(fetchSuggestions);
     } else {
       const result = await fetchSuggestions(queryString, cb);
       if (isArray(result)) cb(result);
     }
   };
+  const debouncedGetData = debouncing(getData, debounce);
+
+  const handleInput = ({ detail: v }) => {
+    const valuePresented = !!v;
+
+    dispatch('input', v);
+    value = v;
+
+    suggestionDisabled = false;
+    activated ||= valuePresented;
+
+    if (!triggerOnFocus && !v) {
+      suggestionDisabled = true;
+      suggestions = [];
+      return;
+    }
+
+    debouncedGetData(v);
+  };
 
   function handleFocus() {
     tooltipVisible = true;
@@ -54,14 +89,15 @@
   }
 </script>
 
+{suggestions}
 <SvelTooltip effect="light" visible={tooltipVisible}>
   <div
     aria-controls="svel-id-6711-108"
     aria-expanded="false"
     aria-haspopup="listbox"
     role="combobox"
   >
-    <SvelInput bind:value on:blur={handleInputBlur} on:focus={handleFocus} />
+    <SvelInput bind:value on:blur={handleInputBlur} on:focus={handleFocus} on:input={handleInput} />
   </div>
   <div slot="content">
     <div role="region">

packages/autocomplete/src/routes/+page.svelte

@@ -1,12 +1,11 @@
 <script>
   import SvelAutoComplete from '$lib/index.js';
+  import { onMount } from 'svelte';
 
   let value = '';
-  const restaurants = [];
+  let restaurants = [];
   const querySearch = (queryString, cb) => {
-    const results = queryString
-      ? restaurants.value.filter(createFilter(queryString))
-      : restaurants.value;
+    const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
     // call callback function to return suggestions
     cb(results);
   };
@@ -26,6 +25,9 @@
       { value: 'babel', link: 'https://github.com/babel/babel' },
     ];
   };
+  onMount(() => {
+    restaurants = loadAll();
+  });
 </script>
 
 <SvelAutoComplete fetchSuggestions={querySearch} />