svelte-typeahead 2.4.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "2.4.1",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -14,17 +14,17 @@
     "predeploy": "rollup -c",
     "deploy": "npx gh-pages -d dist",
     "prepack": "BUNDLE=true rollup -c",
-    "test": "svelte-check"
+    "test": "svelte-check --workspace test"
   },
   "dependencies": {
     "fuzzy": "0.1.3",
-    "svelte-search": "^1.0.0"
+    "svelte-search": "^1.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "svelte": "^3.35.0",
-    "svelte-check": "^1.2.5",
-    "svelte-readme": "^3.0.0"
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-readme": "^3.4.1"
   },
   "repository": {
     "type": "git",

package/src/Typeahead.svelte

@@ -1,25 +1,21 @@
 <script>
   /**
-   * @typedef {string | number | Record<string, any>} Item
-   * @typedef {{ original: Item; index: number; score: number; string: string; }} FuzzyResult
-   * @event {{ searched: string; selected: Item; selectedIndex: number; original: Item; originalIndex: number; }} select
-   * @event {any} clear
-   * @slot {{ result: FuzzyResult; index: number }}
+   * @template TItem = string | number | Record<string, any>
    */
 
   export let id = "typeahead-" + Math.random().toString(36);
   export let value = "";
 
-  /** @type {Item[]} */
+  /** @type {TItem[]} */
   export let data = [];
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => any} */
   export let extract = (item) => item;
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => boolean} */
   export let disable = (item) => false;
 
-  /** @type {(item: Item) => Item} */
+  /** @type {(item: TItem) => boolean} */
   export let filter = (item) => false;
 
   /** Set to `false` to prevent the first result from being selected */
@@ -31,7 +27,7 @@
    */
   export let inputAfterSelect = "update";
 
-  /** @type {FuzzyResult[]} */
+  /** @type {{ original: TItem; index: number; score: number; string: string; }[]} */
   export let results = [];
 
   /** Set to `true` to re-focus the input after selecting a result */
@@ -60,7 +56,7 @@
       selectedIndex = 0;
     }
 
-    if (prevResults !== resultsId) {
+    if (prevResults !== resultsId && !$$slots["no-results"]) {
       hideDropdown = results.length === 0;
     }
 
@@ -102,12 +98,7 @@
 
 <svelte:window
   on:click={({ target }) => {
-    if (
-      !hideDropdown &&
-      results.length > 0 &&
-      comboboxRef &&
-      !comboboxRef.contains(target)
-    ) {
+    if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
       hideDropdown = true;
     }
   }}
@@ -125,12 +116,17 @@
 >
   <Search
     {id}
+    removeFormAriaAttributes={true}
     {...$$restProps}
     bind:ref={searchRef}
     aria-autocomplete="list"
     aria-controls="{id}-listbox"
     aria-labelledby="{id}-label"
-    aria-activedescendant=""
+    aria-activedescendant={selectedIndex >= 0 &&
+    !hideDropdown &&
+    results.length > 0
+      ? `${id}-result-${selectedIndex}`
+      : null}
     bind:value
     on:type
     on:input
@@ -146,6 +142,8 @@
     on:blur
     on:keydown
     on:keydown={(e) => {
+      if (results.length === 0) return;
+
       switch (e.key) {
         case "Enter":
           select();
@@ -173,13 +171,13 @@
       }
     }}
   />
-  {#if !hideDropdown && results.length > 0}
-    <ul
-      class:svelte-typeahead-list={true}
-      role="listbox"
-      aria-labelledby="{id}-label"
-      id="{id}-listbox"
-    >
+  <ul
+    class:svelte-typeahead-list={true}
+    role="listbox"
+    aria-labelledby="{id}-label"
+    id="{id}-listbox"
+  >
+    {#if !hideDropdown && results.length > 0}
       {#each results as result, i}
         <li
           role="option"
@@ -194,13 +192,18 @@
             }
           }}
         >
-          <slot {result} index={i}>
+          <slot {result} index={i} {value}>
             {@html result.string}
           </slot>
         </li>
       {/each}
-    </ul>
-  {/if}
+    {/if}
+    {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+      <div class:no-results={true}>
+        <slot name="no-results" {value} />
+      </div>
+    {/if}
+  </ul>
 </div>
 
 <style>
@@ -220,8 +223,12 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
 
-  li {
+  li,
+  .no-results {
     padding: 0.25rem 1rem;
+  }
+
+  li {
     cursor: pointer;
   }
 

package/types/{Typeahead.d.ts → Typeahead.svelte.d.ts}

@@ -2,16 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { SearchProps } from "svelte-search/types/Search";
 
-export type Item = string | number | Record<string, any>;
-
-export interface FuzzyResult {
-  original: Item;
-  index: number;
-  score: number;
-  string: string;
-}
-
-export interface TypeaheadProps extends SearchProps {
+export interface TypeaheadProps<TItem> extends SearchProps {
   /**
    * @default "typeahead-" + Math.random().toString(36)
    */
@@ -25,22 +16,22 @@ export interface TypeaheadProps extends SearchProps {
   /**
    * @default []
    */
-  data?: Item[];
+  data?: TItem[];
 
   /**
    * @default (item) => item
    */
-  extract?: (item: Item) => Item;
+  extract?: (item: TItem) => any;
 
   /**
    * @default (item) => false
    */
-  disable?: (item: Item) => boolean;
+  disable?: (item: TItem) => boolean;
 
   /**
    * @default (item) => false
    */
-  filter?: (item: Item) => boolean;
+  filter?: (item: TItem) => boolean;
 
   /**
    * Set to `false` to prevent the first result from being selected
@@ -57,7 +48,12 @@ export interface TypeaheadProps extends SearchProps {
   /**
    * @default []
    */
-  results?: FuzzyResult[];
+  results?: {
+    original: TItem;
+    index: number;
+    score: number;
+    string: string;
+  }[];
 
   /**
    * Set to `true` to re-focus the input after selecting a result
@@ -72,14 +68,16 @@ export interface TypeaheadProps extends SearchProps {
   limit?: number;
 }
 
-export default class Typeahead extends SvelteComponentTyped<
-  TypeaheadProps,
+export default class Typeahead<
+  TItem = string | number | Record<string, any>
+> extends SvelteComponentTyped<
+  TypeaheadProps<TItem>,
   {
     select: CustomEvent<{
       searched: string;
-      selected: Item;
+      selected: TItem;
       selectedIndex: number;
-      original: Item;
+      original: TItem;
       originalIndex: number;
     }>;
     type: CustomEvent<string>;
@@ -92,8 +90,17 @@ export default class Typeahead extends SvelteComponentTyped<
   },
   {
     default: {
-      result: FuzzyResult;
+      result: {
+        original: TItem;
+        index: number;
+        score: number;
+        string: string;
+      };
       index: number;
+      value: string;
+    };
+    "no-results": {
+      value: string;
     };
   }
 > {}

package/types/index.d.ts

@@ -1 +1 @@
-export { default as default } from "./Typeahead";
+export { default as default } from "./Typeahead.svelte";