feat: expanded InputSelectSearch WIP

src/lib/elements/forms/inputSelectSearch.svelte

@@ -3,6 +3,13 @@
     import { onMount } from 'svelte';
     import { Label } from '.';
 
+    type Option = $$Generic<{
+        value: string | boolean | number;
+        label: string;
+    }>;
+    type OptionArray = Option[];
+
+    export let options: OptionArray;
     export let id: string;
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -11,18 +18,12 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let debounce = 250;
-    export let options: {
-        value: string | boolean | number;
-        label: string;
-    }[];
     // Input value
-    export let search: string = null;
+    export let search = '';
     // The actual selected value
     export let value: string | number | boolean;
 
     let element: HTMLInputElement;
-    let timer: ReturnType<typeof setTimeout>;
     let hasFocus = false;
     let selected: number = null;
 
@@ -36,16 +37,13 @@
         }
     });
 
-    function handleInput(event: Event) {
+    function handleInput() {
         hasFocus = true;
-        clearTimeout(timer);
-        timer = setTimeout(() => {
-            const target = event.target as HTMLInputElement;
-            search = target.value;
-        }, debounce);
     }
 
     function handleKeydown(event: KeyboardEvent) {
+        console.log('handle key down');
+
         event.stopImmediatePropagation();
 
         switch (event.key) {
@@ -71,6 +69,7 @@
                     event.preventDefault();
                     value = options[selected].value;
                     search = options[selected].label;
+                    // element.value = search;
                     hasFocus = false;
                 }
                 break;
@@ -78,6 +77,9 @@
     }
 </script>
 
+Inner search: {search}
+<br />
+
 <li class="u-position-relative form-item">
     <DropList
         bind:show={hasFocus}
@@ -106,7 +108,6 @@
                     on:click={() => (hasFocus = true)}
                     on:input={handleInput}
                     on:keydown={handleKeydown} />
-
                 <div class="options-list">
                     <button
                         class="options-list-button"
@@ -139,7 +140,9 @@
                             search = option.label;
                             hasFocus = false;
                         }}>
-                        <span class="text">{option.label}</span>
+                        <slot {option}>
+                            <span class="text">{option.label}</span>
+                        </slot>
                     </button>
                 </li>
             {:else}

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte

@@ -24,6 +24,7 @@
     import { onMount } from 'svelte';
     import RelationshipsModal from './relationshipsModal.svelte';
     import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
+    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
 
     export let data: PageData;
     const projectId = $page.params.project;
@@ -86,6 +87,36 @@
             whole: formattedColumn
         };
     }
+
+    type Option = {
+        value: string;
+        label: string;
+        name: string;
+    };
+
+    const selectOptions: Option[] = [
+        {
+            value: '1',
+            label: 'first-ec68ac3515e4bc06',
+            name: 'Option 1'
+        },
+        {
+            value: '2',
+            label: 'second-ec68ac3521e4bc06',
+            name: 'Option 2'
+        }
+    ];
+
+    let selectSearch = '';
+    let selectValue = '';
+
+    $: filteredOptions = (function filter() {
+        console.log('filtering');
+
+        return selectOptions.filter((option) =>
+            option.label.toLowerCase().includes(selectSearch.toLowerCase())
+        );
+    })();
 </script>
 
 <Container>
@@ -103,6 +134,24 @@
         </div>
     </div>
 
+    Outer search: {selectSearch}
+    <br />
+    Outer value: {selectValue}
+    <InputSelectSearch
+        id="related"
+        label="Related Collection"
+        bind:search={selectSearch}
+        bind:value={selectValue}
+        required
+        placeholder="Search by ID"
+        options={filteredOptions}
+        let:option={o}>
+        <div class="u-flex u-gap-16">
+            <span style:color="hsl(var(--color-neutral-70))">{o.label}</span>
+            {o.name}
+        </div>
+    </InputSelectSearch>
+
     {#if $collection?.attributes?.length}
         {#if data.documents.total}
             <TableScroll isSticky>