svelte-typeahead 2.4.1 → 4.2.0

package/CHANGELOG.md

@@ -5,6 +5,36 @@ 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**
+
+- render a "no-results" slot when the search value does not yield results
+- add `value` to the default slot props
+
+## [4.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.0.0) - 2021-09-05
+
+**Breaking Changes**
+
+- use `.svelte.d.ts` extension for component TypeScript definition
+
+## [3.0.0](https://github.com/metonym/svelte-typeahead/releases/tag/v3.0.0) - 2021-03-16
+
+**Breaking Changes**
+
+- the `ul` element is rendered even without results to preserve the accessibility label
+
+**Fixes**
+
+- disable form ARIA attributes in `svelte-search`
+- pass the correct `aria-activedescendant` item to `svelte-search`
+
 ## [2.4.1](https://github.com/metonym/svelte-typeahead/releases/tag/v2.4.1) - 2021-03-14
 
 **Fixes**

package/README.md

@@ -8,23 +8,47 @@
 
 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).
 
 ---
 
 <!-- TOC -->
 
-## Install
+## Installation
+
+**Yarn**
 
 ```bash
 yarn add -D svelte-typeahead
-# OR
+```
+
+**NPM**
+
+```bash
 npm i -D svelte-typeahead
 ```
 
 ## Usage
 
-[svelte-search](https://github.com/metonym/svelte-search) is used as the underlying search input component. `$$restProps` are forwarded to `svelte-search`.
+### SvelteKit set-up
+
+To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-powered set-ups, instruct `vite` to optimize `"fuzzy"` in your configuration.
+
+```js
+// svelte.config.js
+const config = {
+  kit: {
+    target: "#svelte",
+    vite: {
+      optimizeDeps: {
+        include: ["fuzzy"],
+      },
+    },
+  },
+};
+
+export default config;
+```
 
 ### Styling
 
@@ -78,6 +102,18 @@ Use a slot to render custom results.
 </Typeahead>
 ```
 
+### No results
+
+Use the "no-results" slot to render a message if the search value does not yield results.
+
+```svelte
+<Typeahead {data} {extract} let:value>
+  <svelte:fragment slot="no-results">
+    No results found for "{value}"
+  </svelte:fragment>
+</Typeahead>
+```
+
 ### Limit the number of results
 
 Use the `limit` prop to specify the maximum number of results to display. The default limit is `Infinity`.
@@ -94,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>
@@ -104,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;
+  }}
 />
 ```
 
@@ -152,31 +185,23 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
 
 ```svelte
 <script>
+  import Typeahead from "svelte-typeahead";
+
   let events = [];
 
-  function update(event, detail) {
-    events = [...events, JSON.stringify({ event, detail }, null, 2)];
-  }
+  const update = (event, detail) => (events = [...events, { event, detail }]);
 </script>
 
 <Typeahead
   {data}
   {extract}
-  on:select={(e) => {
-    update("select", e.detail);
-  }}
-  on:clear={() => {
-    update("clear");
-  }}
+  on:select={(e) => update("select", e.detail)}
+  on:clear={() => update("clear")}
 />
 
-<ul>
-  {#each events as event}
-    <li>
-      <pre>{event}</pre>
-    </li>
-  {/each}
-</ul>
+{#each events as event}
+  <pre>{JSON.stringify(event, null, 2)}</pre>
+{/each}
 ```
 
 ### Forwarded events
@@ -191,22 +216,11 @@ The following events are forwarded to the [svelte-search](https://github.com/met
 - on:blur
 - on:keydown
 
-## Usage with svite
-
-To use this component with [svite](https://github.com/dominikg/svite), add the following to your `vite.config.js`:
-
-```js
-// vite.config.js
-module.exports = {
-  optimizeDeps: {
-    include: ["fuzzy"],
-  },
-};
-```
-
 ## TypeScript
 
-Svelte version 3.31 or greater is required if using TypeScript.
+Svelte version 3.31 or greater is required to use this component with TypeScript.
+
+TypeScript definitions are located in the [types folder](./types).
 
 ## Changelog