svelte-typeahead 4.2.0 → 4.2.3
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.
- package/CHANGELOG.md +26 -0
- package/README.md +43 -59
- package/lib/index.js +167 -107
- package/lib/index.mjs +163 -103
- package/package.json +5 -5
- package/src/Typeahead.svelte +31 -9
- package/types/Typeahead.svelte.d.ts +1 -0
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.3](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.3) - 2022-07-04
|
|
9
|
+
|
|
10
|
+
**Fixes**
|
|
11
|
+
|
|
12
|
+
- update selected index when hovering over a result
|
|
13
|
+
|
|
14
|
+
## [4.2.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.2) - 2022-03-20
|
|
15
|
+
|
|
16
|
+
**Fixes**
|
|
17
|
+
|
|
18
|
+
- pressing "ArrowUp" on last item should not reset highlighted index
|
|
19
|
+
|
|
20
|
+
## [4.2.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.1) - 2021-10-30
|
|
21
|
+
|
|
22
|
+
**Fixes**
|
|
23
|
+
|
|
24
|
+
- prevent keyboard selection and navigation of disabled results
|
|
25
|
+
- add missing annotation for `TItem.disabled` to `results` prop
|
|
26
|
+
|
|
27
|
+
**Documentation**
|
|
28
|
+
|
|
29
|
+
- add `pnpm` installation command
|
|
30
|
+
- remove "disabling items after selection" example
|
|
31
|
+
- remove `id` fields from `data` array
|
|
32
|
+
- simplify dispatched events example
|
|
33
|
+
|
|
8
34
|
## [4.2.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.0) - 2021-10-26
|
|
9
35
|
|
|
10
36
|
**Features**
|
package/README.md
CHANGED
|
@@ -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
|
|
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
|
-
{
|
|
73
|
-
{
|
|
74
|
-
{
|
|
75
|
-
{
|
|
76
|
-
{
|
|
77
|
-
{
|
|
78
|
-
{
|
|
79
|
-
{
|
|
80
|
-
{
|
|
81
|
-
{
|
|
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
|
-
|
|
95
|
+
This component uses the `fuzzy` library to highlight matching characters with the `mark` element.
|
|
93
96
|
|
|
94
|
-
|
|
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,39 +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
|
|
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
|
-
###
|
|
128
|
+
### Disabled items
|
|
126
129
|
|
|
127
|
-
|
|
130
|
+
Disable items using the `disable` filter.
|
|
128
131
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
```svelte
|
|
132
|
-
<script>
|
|
133
|
-
import Typeahead from "svelte-typeahead";
|
|
134
|
-
|
|
135
|
-
const disable = (item) => item.state.length > 4;
|
|
136
|
-
const filter = (item) => item.state.length > 8;
|
|
137
|
-
</script>
|
|
138
|
-
|
|
139
|
-
<Typeahead {data} extract={(item) => item.state} {disable} {filter} />
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
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.
|
|
143
133
|
|
|
144
134
|
```svelte
|
|
145
135
|
<Typeahead
|
|
146
136
|
{data}
|
|
137
|
+
value="ca"
|
|
147
138
|
extract={(item) => item.state}
|
|
148
|
-
disable={(item) => item.
|
|
149
|
-
on:select={({ detail }) => {
|
|
150
|
-
data[detail.originalIndex].selected = true;
|
|
151
|
-
}}
|
|
139
|
+
disable={(item) => /Carolina/.test(item.state)}
|
|
152
140
|
/>
|
|
153
141
|
```
|
|
154
142
|
|
|
@@ -164,19 +152,19 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
|
|
|
164
152
|
|
|
165
153
|
### Props
|
|
166
154
|
|
|
167
|
-
| Prop name | Value
|
|
168
|
-
| :--------------- |
|
|
169
|
-
| value | `string` (default: `""`)
|
|
170
|
-
| data | `
|
|
171
|
-
| extract | `(
|
|
172
|
-
| disable | `(
|
|
173
|
-
| filter | `(
|
|
174
|
-
| autoselect | `boolean` (default: `true`)
|
|
175
|
-
| inputAfterSelect | `"update" or "clear" or "keep"`(default
|
|
176
|
-
| results | `FuzzyResult[]` (default: `[]`)
|
|
177
|
-
| focusAfterSelect | `boolean` (default: `false`)
|
|
178
|
-
| limit | `number` (default: `Infinity`)
|
|
179
|
-
| `...$$restProps` | (forwarded to `
|
|
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. |
|
|
180
168
|
|
|
181
169
|
### Dispatched events
|
|
182
170
|
|
|
@@ -187,21 +175,17 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
|
|
|
187
175
|
<script>
|
|
188
176
|
import Typeahead from "svelte-typeahead";
|
|
189
177
|
|
|
190
|
-
let
|
|
191
|
-
|
|
192
|
-
const update = (event, detail) => (events = [...events, { event, detail }]);
|
|
178
|
+
let e = [];
|
|
193
179
|
</script>
|
|
194
180
|
|
|
195
181
|
<Typeahead
|
|
196
182
|
{data}
|
|
197
183
|
{extract}
|
|
198
|
-
on:select={(
|
|
199
|
-
on:clear={() =>
|
|
184
|
+
on:select={({ detail }) => (e = [...e, { event: "select", detail }])}
|
|
185
|
+
on:clear={() => (e = [...e, { event: "clear" }])}
|
|
200
186
|
/>
|
|
201
187
|
|
|
202
|
-
{
|
|
203
|
-
<pre>{JSON.stringify(event, null, 2)}</pre>
|
|
204
|
-
{/each}
|
|
188
|
+
<pre>{JSON.stringify(e, null, 2)}</pre>
|
|
205
189
|
```
|
|
206
190
|
|
|
207
191
|
### Forwarded events
|