svelte-typeahead 4.3.2 → 4.4.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 +12 -0
- package/README.md +36 -42
- package/lib/index.js +179 -126
- package/lib/index.mjs +179 -126
- package/package.json +3 -5
- package/src/Typeahead.svelte +22 -2
- package/types/Typeahead.svelte.d.ts +7 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,18 @@ 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.4.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.4.0) - 2022-11-08
|
|
9
|
+
|
|
10
|
+
**Features**
|
|
11
|
+
|
|
12
|
+
- add `showAllResultsOnFocus` prop to display all results when focusing an empty input
|
|
13
|
+
|
|
14
|
+
**Fixes**
|
|
15
|
+
|
|
16
|
+
- silence a11y warnings emitted by Svelte@3.52
|
|
17
|
+
- event type for dispatched `clear` event should be `null`
|
|
18
|
+
- unset `ul` margin
|
|
19
|
+
|
|
8
20
|
## [4.3.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.2) - 2022-09-01
|
|
9
21
|
|
|
10
22
|
**Fixes**
|
package/README.md
CHANGED
|
@@ -29,36 +29,9 @@ pnpm i -D svelte-typeahead
|
|
|
29
29
|
|
|
30
30
|
## Usage
|
|
31
31
|
|
|
32
|
-
### SvelteKit set-up
|
|
33
|
-
|
|
34
|
-
To use this component with [SvelteKit](https://github.com/sveltejs/kit) or vite-powered set-ups, instruct `vite` to optimize the `"fuzzy"` dependency.
|
|
35
|
-
|
|
36
|
-
```js
|
|
37
|
-
// svelte.config.js
|
|
38
|
-
const config = {
|
|
39
|
-
kit: {
|
|
40
|
-
vite: {
|
|
41
|
-
optimizeDeps: {
|
|
42
|
-
include: ["fuzzy"],
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Styling
|
|
50
|
-
|
|
51
|
-
**Note:** this component is minimally styled by design. You can target the component using the `[data-svelte-typeahead]` selector.
|
|
52
|
-
|
|
53
|
-
```css
|
|
54
|
-
:global([data-svelte-typeahead]) {
|
|
55
|
-
margin: 1rem;
|
|
56
|
-
}
|
|
57
|
-
```
|
|
58
|
-
|
|
59
32
|
### Basic
|
|
60
33
|
|
|
61
|
-
Pass an array of objects to the `data` prop. Use the `
|
|
34
|
+
Pass an array of objects to the `data` prop. Use the `extract` prop to specify the value to search on.
|
|
62
35
|
|
|
63
36
|
```svelte
|
|
64
37
|
<script>
|
|
@@ -169,24 +142,45 @@ Set `showDropdownOnFocus` to `true` to only show the dropdown when the search in
|
|
|
169
142
|
<Typeahead value="ca" showDropdownOnFocus {data} {extract} />
|
|
170
143
|
```
|
|
171
144
|
|
|
145
|
+
### Show all results on focus
|
|
146
|
+
|
|
147
|
+
By default, no results are shown if an empty input (i.e., `value=""`) is focused.
|
|
148
|
+
|
|
149
|
+
Set `showAllResultsOnFocus` to `true` for all results to be shown when an empty input is focused.
|
|
150
|
+
|
|
151
|
+
```svelte
|
|
152
|
+
<Typeahead showAllResultsOnFocus {data} {extract} />
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Styling
|
|
156
|
+
|
|
157
|
+
**Note:** this component is minimally styled by design. You can target the component using the `[data-svelte-typeahead]` selector.
|
|
158
|
+
|
|
159
|
+
```css
|
|
160
|
+
:global([data-svelte-typeahead]) {
|
|
161
|
+
margin: 1rem;
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
172
165
|
## API
|
|
173
166
|
|
|
174
167
|
### Props
|
|
175
168
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
| value
|
|
179
|
-
| data
|
|
180
|
-
| extract
|
|
181
|
-
| disable
|
|
182
|
-
| filter
|
|
183
|
-
| autoselect
|
|
184
|
-
| inputAfterSelect
|
|
185
|
-
| results
|
|
186
|
-
| focusAfterSelect
|
|
187
|
-
| showDropdownOnFocus
|
|
188
|
-
|
|
|
189
|
-
|
|
|
169
|
+
| Name | Type | Default value | Description |
|
|
170
|
+
| :-------------------- | :------------------------------------------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
|
|
171
|
+
| value | `string` | `""` | Input search value. |
|
|
172
|
+
| data | `TItem[]` | `[]` | Items to search. |
|
|
173
|
+
| extract | `(TItem) => any` | `(item) => item` | Target the value if `TItem` is an object. |
|
|
174
|
+
| disable | `(TItem) => boolean` | `(item) => false` | Disabled items are shown in results but are not selectable. |
|
|
175
|
+
| filter | `(TItem) => boolean` | `(item) => false` | Filtered out items will not be displayed in the results. |
|
|
176
|
+
| autoselect | `boolean` | `true` | Whether to automatically select the first result. |
|
|
177
|
+
| inputAfterSelect | `"update" \| "clear" \| "keep"` | `"update"` | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
|
|
178
|
+
| results | `FuzzyResult[]` | `[]` | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
|
|
179
|
+
| focusAfterSelect | `boolean` | `false` | Set to `true` to re-focus the input after selecting a result. |
|
|
180
|
+
| showDropdownOnFocus | `boolean` | `false` | Set to `true` to only show results when the input is focused. |
|
|
181
|
+
| showAllResultsOnFocus | `boolean` | `false` | Set to `true` for all results to be shown when an empty input is focused. |
|
|
182
|
+
| limit | `number` | `Infinity` | Specify the maximum number of results to display. |
|
|
183
|
+
| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | N/A | All other props are forwarded to the input element. |
|
|
190
184
|
|
|
191
185
|
### Dispatched events
|
|
192
186
|
|