svelte-typeahead 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.0) - 2021-10-26
+
+**Features**
+
+- use TypeScript generics so that the item type can be inferred from `data` value
+
 ## [4.1.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.1.0) - 2021-10-03
 
 **Features**

package/README.md

@@ -8,7 +8,7 @@
 
 This component uses the lightweight [fuzzy](https://github.com/mattyork/fuzzy) library for client-side, fuzzy search and follows [WAI-ARIA guidelines](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html).
 
-Try it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c8d04?version=3.24.1).
+Try it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c8d04).
 
 ---
 
@@ -130,6 +130,8 @@ Example for disabling and filtering items by their title length:
 
 ```svelte
 <script>
+  import Typeahead from "svelte-typeahead";
+
   const disable = (item) => item.state.length > 4;
   const filter = (item) => item.state.length > 8;
 </script>
@@ -140,18 +142,13 @@ Example for disabling and filtering items by their title length:
 Example for disabling items after selecting them:
 
 ```svelte
-<script>
-  function handleSelect(e) {
-    let i = e.detail.originalIndex;
-    data[i].selected = true;
-  }
-</script>
-
 <Typeahead
   {data}
   extract={(item) => item.state}
   disable={(item) => item.selected}
-  on:select={handleSelect}
+  on:select={({ detail }) => {
+    data[detail.originalIndex].selected = true;
+  }}
 />
 ```
 
@@ -188,6 +185,8 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
 
 ```svelte
 <script>
+  import Typeahead from "svelte-typeahead";
+
   let events = [];
 
   const update = (event, detail) => (events = [...events, { event, detail }]);

package/lib/index.js

@@ -703,7 +703,7 @@
 
     var fuzzy = fuzzy$1.exports;
 
-    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.43.1 */
+    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.44.0 */
 
     function add_css$1(target) {
     	append_styles(target, "svelte-5m0wg6", ".hide-label.svelte-5m0wg6{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}");
@@ -1040,7 +1040,7 @@
 
     var Search$1 = Search;
 
-    /* src/Typeahead.svelte generated by Svelte v3.43.1 */
+    /* src/Typeahead.svelte generated by Svelte v3.44.0 */
 
     function add_css(target) {
     	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
@@ -1075,7 +1075,7 @@
     	value: /*value*/ ctx[0]
     });
 
-    // (184:4) {#if !hideDropdown && results.length > 0}
+    // (180:4) {#if !hideDropdown && results.length > 0}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1159,7 +1159,7 @@
     	};
     }
 
-    // (199:43)              
+    // (195:43)              
     function fallback_block(ctx) {
     	let html_tag;
     	let raw_value = /*result*/ ctx[39].string + "";
@@ -1185,7 +1185,7 @@
     	};
     }
 
-    // (185:6) {#each results as result, i}
+    // (181:6) {#each results as result, i}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1285,7 +1285,7 @@
     	};
     }
 
-    // (205:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (201:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
     function create_if_block(ctx) {
     	let div;
     	let current;

package/lib/index.mjs

@@ -697,7 +697,7 @@ fuzzy.filter = function(pattern, arr, opts) {
 
 var fuzzy = fuzzy$1.exports;
 
-/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.43.1 */
+/* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.44.0 */
 
 function add_css$1(target) {
 	append_styles(target, "svelte-5m0wg6", ".hide-label.svelte-5m0wg6{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}");
@@ -1034,7 +1034,7 @@ class Search extends SvelteComponent {
 
 var Search$1 = Search;
 
-/* src/Typeahead.svelte generated by Svelte v3.43.1 */
+/* src/Typeahead.svelte generated by Svelte v3.44.0 */
 
 function add_css(target) {
 	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
@@ -1069,7 +1069,7 @@ const get_default_slot_context = ctx => ({
 	value: /*value*/ ctx[0]
 });
 
-// (184:4) {#if !hideDropdown && results.length > 0}
+// (180:4) {#if !hideDropdown && results.length > 0}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1153,7 +1153,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (199:43)              
+// (195:43)              
 function fallback_block(ctx) {
 	let html_tag;
 	let raw_value = /*result*/ ctx[39].string + "";
@@ -1179,7 +1179,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (185:6) {#each results as result, i}
+// (181:6) {#each results as result, i}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1279,7 +1279,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (205:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (201:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -21,10 +21,10 @@
     "svelte-search": "^1.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "svelte": "^3.43.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
-    "svelte-readme": "^3.3.1"
+    "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 */

package/types/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,7 +90,12 @@ export default class Typeahead extends SvelteComponentTyped<
   },
   {
     default: {
-      result: FuzzyResult;
+      result: {
+        original: TItem;
+        index: number;
+        score: number;
+        string: string;
+      };
       index: number;
       value: string;
     };