svelte-typeahead 4.3.1 → 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 +18 -0
- package/README.md +56 -42
- package/lib/index.js +166 -115
- package/lib/index.mjs +166 -115
- package/package.json +3 -5
- package/src/Typeahead.svelte +25 -5
- package/types/Typeahead.svelte.d.ts +7 -1
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.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
|
+
|
|
20
|
+
## [4.3.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.2) - 2022-09-01
|
|
21
|
+
|
|
22
|
+
**Fixes**
|
|
23
|
+
|
|
24
|
+
- allow results to be selected if using `showDropdownOnFocus`
|
|
25
|
+
|
|
8
26
|
## [4.3.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.1) - 2022-08-29
|
|
9
27
|
|
|
10
28
|
**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>
|
|
@@ -83,6 +56,26 @@ Pass an array of objects to the `data` prop. Use the `extractor` prop to specify
|
|
|
83
56
|
<Typeahead {data} {extract} />
|
|
84
57
|
```
|
|
85
58
|
|
|
59
|
+
### Custom label
|
|
60
|
+
|
|
61
|
+
`$$restProps` are forwarded to [svelte-search](https://github.com/metonym/svelte-search).
|
|
62
|
+
|
|
63
|
+
Use the `label` prop to specify a custom label.
|
|
64
|
+
|
|
65
|
+
```svelte
|
|
66
|
+
<Typeahead label="U.S. States" {data} {extract} />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Hidden label
|
|
70
|
+
|
|
71
|
+
Set `hideLabel` to `true` to visually hide the label.
|
|
72
|
+
|
|
73
|
+
It's recommended that you set the `label` – even if hidden – for accessibility.
|
|
74
|
+
|
|
75
|
+
```svelte
|
|
76
|
+
<Typeahead label="U.S. States" hideLabel {data} {extract} />
|
|
77
|
+
```
|
|
78
|
+
|
|
86
79
|
### Custom-styled results
|
|
87
80
|
|
|
88
81
|
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.
|
|
@@ -149,24 +142,45 @@ Set `showDropdownOnFocus` to `true` to only show the dropdown when the search in
|
|
|
149
142
|
<Typeahead value="ca" showDropdownOnFocus {data} {extract} />
|
|
150
143
|
```
|
|
151
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
|
+
|
|
152
165
|
## API
|
|
153
166
|
|
|
154
167
|
### Props
|
|
155
168
|
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
| value
|
|
159
|
-
| data
|
|
160
|
-
| extract
|
|
161
|
-
| disable
|
|
162
|
-
| filter
|
|
163
|
-
| autoselect
|
|
164
|
-
| inputAfterSelect
|
|
165
|
-
| results
|
|
166
|
-
| focusAfterSelect
|
|
167
|
-
| showDropdownOnFocus
|
|
168
|
-
|
|
|
169
|
-
|
|
|
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. |
|
|
170
184
|
|
|
171
185
|
### Dispatched events
|
|
172
186
|
|