svelte-typeahead 4.1.0 → 4.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +47 -62
  3. package/lib/index.js +134 -98
  4. package/lib/index.mjs +130 -94
  5. package/package.json +5 -5
  6. package/src/Typeahead.svelte +32 -18
  7. package/types/Typeahead.svelte.d.ts +24 -20
package/CHANGELOG.md CHANGED
@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [4.2.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.2) - 2022-03-20
9
+
10
+ **Fixes**
11
+
12
+ - pressing "ArrowUp" on last item should not reset highlighted index
13
+
14
+ ## [4.2.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.1) - 2021-10-30
15
+
16
+ **Fixes**
17
+
18
+ - prevent keyboard selection and navigation of disabled results
19
+ - add missing annotation for `TItem.disabled` to `results` prop
20
+
21
+ **Documentation**
22
+
23
+ - add `pnpm` installation command
24
+ - remove "disabling items after selection" example
25
+ - remove `id` fields from `data` array
26
+ - simplify dispatched events example
27
+
28
+ ## [4.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.0) - 2021-10-26
29
+
30
+ **Features**
31
+
32
+ - use TypeScript generics so that the item type can be inferred from `data` value
33
+
8
34
  ## [4.1.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.1.0) - 2021-10-03
9
35
 
10
36
  **Features**
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  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).
10
10
 
11
- Try it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c8d04?version=3.24.1).
11
+ Try it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c8d04).
12
12
 
13
13
  ---
14
14
 
@@ -28,6 +28,12 @@ yarn add -D svelte-typeahead
28
28
  npm i -D svelte-typeahead
29
29
  ```
30
30
 
31
+ **pnpm**
32
+
33
+ ```bash
34
+ pnpm i -D svelte-typeahead
35
+ ```
36
+
31
37
  ## Usage
32
38
 
33
39
  ### SvelteKit set-up
@@ -38,7 +44,6 @@ To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-
38
44
  // svelte.config.js
39
45
  const config = {
40
46
  kit: {
41
- target: "#svelte",
42
47
  vite: {
43
48
  optimizeDeps: {
44
49
  include: ["fuzzy"],
@@ -46,8 +51,6 @@ const config = {
46
51
  },
47
52
  },
48
53
  };
49
-
50
- export default config;
51
54
  ```
52
55
 
53
56
  ### Styling
@@ -62,23 +65,23 @@ export default config;
62
65
 
63
66
  ### Basic
64
67
 
65
- Pass an array of objects to the `data` prop. Use the `extractor` to specify the key value to search on.
68
+ Pass an array of objects to the `data` prop. Use the `extractor` prop to specify the value to search on.
66
69
 
67
70
  ```svelte
68
71
  <script>
69
72
  import Typeahead from "svelte-typeahead";
70
73
 
71
74
  const data = [
72
- { id: 0, state: "California" },
73
- { id: 1, state: "North Carolina" },
74
- { id: 2, state: "North Dakota" },
75
- { id: 3, state: "South Carolina" },
76
- { id: 4, state: "South Dakota" },
77
- { id: 5, state: "Michigan" },
78
- { id: 6, state: "Tennessee" },
79
- { id: 7, state: "Nevada" },
80
- { id: 8, state: "New Hampshire" },
81
- { id: 9, state: "New Jersey" },
75
+ { state: "California" },
76
+ { state: "North Carolina" },
77
+ { state: "North Dakota" },
78
+ { state: "South Carolina" },
79
+ { state: "South Dakota" },
80
+ { state: "Michigan" },
81
+ { state: "Tennessee" },
82
+ { state: "Nevada" },
83
+ { state: "New Hampshire" },
84
+ { state: "New Jersey" },
82
85
  ];
83
86
 
84
87
  const extract = (item) => item.state;
@@ -89,9 +92,9 @@ Pass an array of objects to the `data` prop. Use the `extractor` to specify the
89
92
 
90
93
  ### Custom-styled results
91
94
 
92
- By default, this component uses the `fuzzy` library to highlight matching characters with the `mark` element.
95
+ This component uses the `fuzzy` library to highlight matching characters with the `mark` element.
93
96
 
94
- Use a slot to render custom results.
97
+ Override the default slot to render custom results.
95
98
 
96
99
  ```svelte
97
100
  <Typeahead {data} {extract} let:result let:index>
@@ -107,7 +110,7 @@ Use a slot to render custom results.
107
110
  Use the "no-results" slot to render a message if the search value does not yield results.
108
111
 
109
112
  ```svelte
110
- <Typeahead {data} {extract} let:value>
113
+ <Typeahead value="abcd" {data} {extract} let:value>
111
114
  <svelte:fragment slot="no-results">
112
115
  No results found for "{value}"
113
116
  </svelte:fragment>
@@ -116,42 +119,24 @@ Use the "no-results" slot to render a message if the search value does not yield
116
119
 
117
120
  ### Limit the number of results
118
121
 
119
- Use the `limit` prop to specify the maximum number of results to display. The default limit is `Infinity`.
122
+ Use the `limit` prop to specify the maximum number of results to display. The default is `Infinity`.
120
123
 
121
124
  ```svelte
122
125
  <Typeahead limit={2} {data} {extract} />
123
126
  ```
124
127
 
125
- ### Disable and filter items
126
-
127
- Use the `filter` to filter Items out and `disable` to disable them in the result set.
128
-
129
- Example for disabling and filtering items by their title length:
130
-
131
- ```svelte
132
- <script>
133
- const disable = (item) => item.state.length > 4;
134
- const filter = (item) => item.state.length > 8;
135
- </script>
128
+ ### Disabled items
136
129
 
137
- <Typeahead {data} extract={(item) => item.state} {disable} {filter} />
138
- ```
130
+ Disable items using the `disable` filter.
139
131
 
140
- Example for disabling items after selecting them:
132
+ In the following example, items with a `state` value containing "Carolina" are disabled. Disabled items are not selectable nor keyboard navigable.
141
133
 
142
134
  ```svelte
143
- <script>
144
- function handleSelect(e) {
145
- let i = e.detail.originalIndex;
146
- data[i].selected = true;
147
- }
148
- </script>
149
-
150
135
  <Typeahead
151
136
  {data}
137
+ value="ca"
152
138
  extract={(item) => item.state}
153
- disable={(item) => item.selected}
154
- on:select={handleSelect}
139
+ disable={(item) => /Carolina/.test(item.state)}
155
140
  />
156
141
  ```
157
142
 
@@ -167,19 +152,19 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
167
152
 
168
153
  ### Props
169
154
 
170
- | Prop name | Value | Description |
171
- | :--------------- | :-------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- |
172
- | value | `string` (default: `""`) | Input search value |
173
- | data | `T[]` (default: `[]`) | Items to search |
174
- | extract | `(T) => T` | Target an item key if `data` is an object array |
175
- | disable | `(T) => T` | Pass in a function to disable items. They will show up in the results list, but wont be selectable. |
176
- | filter | `(T) => T` | Pass in a function to filter items. Thei will be hidden and do not show up at all in the results list. |
177
- | autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
178
- | inputAfterSelect | `"update" or "clear" or "keep"`(default:`"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` keep the search field unchanged after a selection. |
179
- | results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
180
- | focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
181
- | limit | `number` (default: `Infinity`) | Specify the maximum number of results to return |
182
- | `...$$restProps` | (forwarded to `Search` component) | All other props are forwarded to the input element. |
155
+ | Prop name | Value | Description |
156
+ | :--------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
157
+ | value | `string` (default: `""`) | Input search value |
158
+ | data | `TItem[]` (default: `[]`) | Items to search |
159
+ | extract | `(TItem) => any` | Target an item key if `data` is an object array |
160
+ | disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
161
+ | filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
162
+ | autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
163
+ | inputAfterSelect | `"update" or "clear" or "keep"`(default: `"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
164
+ | results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
165
+ | focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
166
+ | limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
167
+ | `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
183
168
 
184
169
  ### Dispatched events
185
170
 
@@ -188,21 +173,21 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
188
173
 
189
174
  ```svelte
190
175
  <script>
191
- let events = [];
176
+ import Typeahead from "svelte-typeahead";
192
177
 
193
- const update = (event, detail) => (events = [...events, { event, detail }]);
178
+ let e = [];
194
179
  </script>
195
180
 
196
181
  <Typeahead
197
182
  {data}
198
183
  {extract}
199
- on:select={(e) => update("select", e.detail)}
200
- on:clear={() => update("clear")}
184
+ on:select={({ detail }) => (e = [...e, { event: "select", detail }])}
185
+ on:clear={() => (e = [...e, { event: "clear" }])}
201
186
  />
202
187
 
203
- {#each events as event}
204
- <pre>{JSON.stringify(event, null, 2)}</pre>
205
- {/each}
188
+ <pre>
189
+ {JSON.stringify(e, null, 2)}
190
+ </pre>
206
191
  ```
207
192
 
208
193
  ### Forwarded events