svelte-typeahead 4.2.4 → 4.3.0
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 +6 -0
- package/README.md +34 -32
- package/lib/index.js +138 -116
- package/lib/index.mjs +138 -116
- package/package.json +2 -2
- package/src/Typeahead.svelte +21 -10
- package/types/Typeahead.svelte.d.ts +6 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,12 @@ 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.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.0) - 2022-08-29
|
|
9
|
+
|
|
10
|
+
**Features**
|
|
11
|
+
|
|
12
|
+
- add `showDropdownOnFocus` prop to only show dropdown if the search input is focused
|
|
13
|
+
|
|
8
14
|
## [4.2.4](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.4) - 2022-07-05
|
|
9
15
|
|
|
10
16
|
**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
|
|
@@ -92,16 +85,14 @@ Pass an array of objects to the `data` prop. Use the `extractor` prop to specify
|
|
|
92
85
|
|
|
93
86
|
### Custom-styled results
|
|
94
87
|
|
|
95
|
-
This component uses the
|
|
88
|
+
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
89
|
|
|
97
|
-
|
|
90
|
+
Use the default slot to render custom results.
|
|
98
91
|
|
|
99
92
|
```svelte
|
|
100
93
|
<Typeahead {data} {extract} let:result let:index>
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
{index}
|
|
104
|
-
</div>
|
|
94
|
+
<strong>{@html result.string}</strong>
|
|
95
|
+
{index}
|
|
105
96
|
</Typeahead>
|
|
106
97
|
```
|
|
107
98
|
|
|
@@ -127,9 +118,9 @@ Use the `limit` prop to specify the maximum number of results to display. The de
|
|
|
127
118
|
|
|
128
119
|
### Disabled items
|
|
129
120
|
|
|
130
|
-
Disable items using the `disable` filter.
|
|
121
|
+
Disable items using the `disable` filter. Disabled items are not selectable or navigable by keyboard.
|
|
131
122
|
|
|
132
|
-
In the following example, items with a `state` value containing "Carolina" are disabled.
|
|
123
|
+
In the following example, items with a `state` value containing "Carolina" are disabled.
|
|
133
124
|
|
|
134
125
|
```svelte
|
|
135
126
|
<Typeahead
|
|
@@ -148,23 +139,34 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
|
|
|
148
139
|
<Typeahead focusAfterSelect {data} {extract} />
|
|
149
140
|
```
|
|
150
141
|
|
|
142
|
+
### Show dropdown on focus
|
|
143
|
+
|
|
144
|
+
By default, the dropdown will be shown if the `value` has results.
|
|
145
|
+
|
|
146
|
+
Set `showDropdownOnFocus` to `true` to only show the dropdown when the search input is focused.
|
|
147
|
+
|
|
148
|
+
```svelte
|
|
149
|
+
<Typeahead value="ca" showDropdownOnFocus {data} {extract} />
|
|
150
|
+
```
|
|
151
|
+
|
|
151
152
|
## API
|
|
152
153
|
|
|
153
154
|
### Props
|
|
154
155
|
|
|
155
|
-
| Prop name
|
|
156
|
-
|
|
|
157
|
-
| value
|
|
158
|
-
| data
|
|
159
|
-
| extract
|
|
160
|
-
| disable
|
|
161
|
-
| filter
|
|
162
|
-
| autoselect
|
|
163
|
-
| inputAfterSelect
|
|
164
|
-
| results
|
|
165
|
-
| focusAfterSelect
|
|
166
|
-
|
|
|
167
|
-
|
|
|
156
|
+
| Prop name | Value | Description |
|
|
157
|
+
| :----------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
|
|
158
|
+
| value | `string` (default: `""`) | Input search value |
|
|
159
|
+
| data | `TItem[]` (default: `[]`) | Items to search |
|
|
160
|
+
| extract | `(TItem) => any` | Target an item key if `data` is an object array |
|
|
161
|
+
| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
|
|
162
|
+
| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
|
|
163
|
+
| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
|
|
164
|
+
| 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. |
|
|
165
|
+
| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
|
|
166
|
+
| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
|
|
167
|
+
| showDropdownOnFocus | `boolean` (default: `false`) | Set to `true` to only show results when the input is focused. |
|
|
168
|
+
| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
|
|
169
|
+
| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
|
|
168
170
|
|
|
169
171
|
### Dispatched events
|
|
170
172
|
|