svelte-typeahead 4.2.4 → 4.3.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.
- package/CHANGELOG.md +18 -0
- package/README.md +54 -32
- package/lib/index.js +157 -121
- package/lib/index.mjs +157 -121
- package/package.json +2 -3
- package/src/Typeahead.svelte +39 -10
- package/types/Typeahead.svelte.d.ts +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,24 @@ 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.3.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.2) - 2022-09-01
|
|
9
|
+
|
|
10
|
+
**Fixes**
|
|
11
|
+
|
|
12
|
+
- allow results to be selected if using `showDropdownOnFocus`
|
|
13
|
+
|
|
14
|
+
## [4.3.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.1) - 2022-08-29
|
|
15
|
+
|
|
16
|
+
**Fixes**
|
|
17
|
+
|
|
18
|
+
- skip disabled results when auto-selecting a result
|
|
19
|
+
|
|
20
|
+
## [4.3.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.0) - 2022-08-29
|
|
21
|
+
|
|
22
|
+
**Features**
|
|
23
|
+
|
|
24
|
+
- add `showDropdownOnFocus` prop to only show dropdown if the search input is focused
|
|
25
|
+
|
|
8
26
|
## [4.2.4](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.4) - 2022-07-05
|
|
9
27
|
|
|
10
28
|
**Fixes**
|
package/README.md
CHANGED
|
@@ -16,21 +16,14 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c
|
|
|
16
16
|
|
|
17
17
|
## Installation
|
|
18
18
|
|
|
19
|
-
**Yarn**
|
|
20
|
-
|
|
21
19
|
```bash
|
|
20
|
+
# Yarn
|
|
22
21
|
yarn add -D svelte-typeahead
|
|
23
|
-
```
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```bash
|
|
23
|
+
# npm
|
|
28
24
|
npm i -D svelte-typeahead
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
**pnpm**
|
|
32
25
|
|
|
33
|
-
|
|
26
|
+
# pnpm
|
|
34
27
|
pnpm i -D svelte-typeahead
|
|
35
28
|
```
|
|
36
29
|
|
|
@@ -38,7 +31,7 @@ pnpm i -D svelte-typeahead
|
|
|
38
31
|
|
|
39
32
|
### SvelteKit set-up
|
|
40
33
|
|
|
41
|
-
To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-powered set-ups, instruct `vite` to optimize `"fuzzy"`
|
|
34
|
+
To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-powered set-ups, instruct `vite` to optimize the `"fuzzy"` dependency.
|
|
42
35
|
|
|
43
36
|
```js
|
|
44
37
|
// svelte.config.js
|
|
@@ -90,18 +83,36 @@ Pass an array of objects to the `data` prop. Use the `extractor` prop to specify
|
|
|
90
83
|
<Typeahead {data} {extract} />
|
|
91
84
|
```
|
|
92
85
|
|
|
86
|
+
### Custom label
|
|
87
|
+
|
|
88
|
+
`$$restProps` are forwarded to [svelte-search](https://github.com/metonym/svelte-search).
|
|
89
|
+
|
|
90
|
+
Use the `label` prop to specify a custom label.
|
|
91
|
+
|
|
92
|
+
```svelte
|
|
93
|
+
<Typeahead label="U.S. States" {data} {extract} />
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Hidden label
|
|
97
|
+
|
|
98
|
+
Set `hideLabel` to `true` to visually hide the label.
|
|
99
|
+
|
|
100
|
+
It's recommended that you set the `label` – even if hidden – for accessibility.
|
|
101
|
+
|
|
102
|
+
```svelte
|
|
103
|
+
<Typeahead label="U.S. States" hideLabel {data} {extract} />
|
|
104
|
+
```
|
|
105
|
+
|
|
93
106
|
### Custom-styled results
|
|
94
107
|
|
|
95
|
-
This component uses the
|
|
108
|
+
This component uses the [fuzzy](https://github.com/mattyork/fuzzy) library to highlight matching characters with the [mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) element.
|
|
96
109
|
|
|
97
|
-
|
|
110
|
+
Use the default slot to render custom results.
|
|
98
111
|
|
|
99
112
|
```svelte
|
|
100
113
|
<Typeahead {data} {extract} let:result let:index>
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
{index}
|
|
104
|
-
</div>
|
|
114
|
+
<strong>{@html result.string}</strong>
|
|
115
|
+
{index}
|
|
105
116
|
</Typeahead>
|
|
106
117
|
```
|
|
107
118
|
|
|
@@ -127,9 +138,9 @@ Use the `limit` prop to specify the maximum number of results to display. The de
|
|
|
127
138
|
|
|
128
139
|
### Disabled items
|
|
129
140
|
|
|
130
|
-
Disable items using the `disable` filter.
|
|
141
|
+
Disable items using the `disable` filter. Disabled items are not selectable or navigable by keyboard.
|
|
131
142
|
|
|
132
|
-
In the following example, items with a `state` value containing "Carolina" are disabled.
|
|
143
|
+
In the following example, items with a `state` value containing "Carolina" are disabled.
|
|
133
144
|
|
|
134
145
|
```svelte
|
|
135
146
|
<Typeahead
|
|
@@ -148,23 +159,34 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
|
|
|
148
159
|
<Typeahead focusAfterSelect {data} {extract} />
|
|
149
160
|
```
|
|
150
161
|
|
|
162
|
+
### Show dropdown on focus
|
|
163
|
+
|
|
164
|
+
By default, the dropdown will be shown if the `value` has results.
|
|
165
|
+
|
|
166
|
+
Set `showDropdownOnFocus` to `true` to only show the dropdown when the search input is focused.
|
|
167
|
+
|
|
168
|
+
```svelte
|
|
169
|
+
<Typeahead value="ca" showDropdownOnFocus {data} {extract} />
|
|
170
|
+
```
|
|
171
|
+
|
|
151
172
|
## API
|
|
152
173
|
|
|
153
174
|
### Props
|
|
154
175
|
|
|
155
|
-
| Prop name
|
|
156
|
-
|
|
|
157
|
-
| value
|
|
158
|
-
| data
|
|
159
|
-
| extract
|
|
160
|
-
| disable
|
|
161
|
-
| filter
|
|
162
|
-
| autoselect
|
|
163
|
-
| inputAfterSelect
|
|
164
|
-
| results
|
|
165
|
-
| focusAfterSelect
|
|
166
|
-
|
|
|
167
|
-
|
|
|
176
|
+
| Prop name | Value | Description |
|
|
177
|
+
| :------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
|
|
178
|
+
| value | `string` (default: `""`) | Input search value |
|
|
179
|
+
| data | `TItem[]` (default: `[]`) | Items to search |
|
|
180
|
+
| extract | `(TItem) => any` | Target an item key if `data` is an object array |
|
|
181
|
+
| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
|
|
182
|
+
| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
|
|
183
|
+
| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
|
|
184
|
+
| 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. |
|
|
185
|
+
| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
|
|
186
|
+
| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
|
|
187
|
+
| showDropdownOnFocus | `boolean` (default: `false`) | Set to `true` to only show results when the input is focused. |
|
|
188
|
+
| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
|
|
189
|
+
| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
|
|
168
190
|
|
|
169
191
|
### Dispatched events
|
|
170
192
|
|