simple-svelte-autocomplete
Advanced tools
Comparing version
{ | ||
"name": "simple-svelte-autocomplete", | ||
"version": "2.4.0", | ||
"version": "2.5.0", | ||
"description": "Autocomplete / Select / Typeahead component made with Svelte 3", | ||
@@ -43,3 +43,3 @@ "svelte": "src/SimpleAutocomplete.svelte", | ||
"start:dev": "sirv public --single --dev", | ||
"test": "jest", | ||
"test": "jest --coverage", | ||
"prettier": "prettier --write public src", | ||
@@ -46,0 +46,0 @@ "prepare": "npm run build" |
@@ -84,3 +84,3 @@ # Simple Svelte Autocomplete | ||
delay="200" | ||
localFiltering="false" | ||
localFiltering={false} | ||
labelFieldName="name" | ||
@@ -131,2 +131,3 @@ valueFieldName="id" | ||
- `multiple` - enable multiple selection (false by default) | ||
- `orderableSelection` - enable selection reordering with drag and drop. needs multiple = true | ||
- `selectedItem` - the current item that is selected (object if the array of items contains objects) | ||
@@ -142,2 +143,3 @@ - `highlightedItem` - the current item that is highlighted in the dropdown menu | ||
- `keywordsCleanFunction` - optional function to additionally process the derived keywords from the item | ||
- `lowercaseKeywords` - set to false to not lowercase the keywords extracted from the items | ||
- `textCleanFunction` - optional function to additionally process the user entered text. Ignored if `cleanUserText=false` | ||
@@ -186,3 +188,4 @@ - `selectFirstIfEmpty` - set to true to select the first item if the user clears the text and closes the dropdown, defaults to false | ||
- `name` - generate an HTML input with this name, containing the current value | ||
- `html5autocomplete` - flag to enable or disable the [HTML5 autocomplete](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form#attr-autocomplete) attribute | ||
- `html5autocomplete` - value to enable or disable the [HTML5 autocomplete](https://developer.mozilla.org/en/docs/Web/HTML/Element/form#attr-autocomplete) attribute. | ||
- `autocompleteOffValue` - the value when `html5autocomplete=false`, defaults to `off` but can be set to `none` for Chrome | ||
- `selectName` - apply a name attribute to the <select> tag that holds the selected value | ||
@@ -198,3 +201,3 @@ - `selectId` - apply an id attribute to the <select> tag that holds the selected value | ||
```html | ||
<div slot="item" let:item="{item}" let:label="{label}"> | ||
<div slot="item" let:item let:label> | ||
{@html label} | ||
@@ -210,3 +213,3 @@ <!-- to render the default higliglighted item label --> | ||
```html | ||
<div slot="no-results" let:noResultsText={noResultsText}> | ||
<div slot="no-results" let:noResultsText> | ||
<span>{noResultsText}</span> | ||
@@ -221,3 +224,3 @@ </div> | ||
```html | ||
<div slot="loading" let:loadingText={loadingText}> | ||
<div slot="loading" let:loadingText> | ||
<span>{loadingText}</strong> | ||
@@ -230,3 +233,3 @@ </div> | ||
```html | ||
<slot name="tag" let:label="{label}" let:item="{item}" let:unselectItem="{unselectItem}"> | ||
<slot name="tag" let:label let:item let:unselectItem> | ||
<span class="tag">{label}</span> | ||
@@ -237,2 +240,19 @@ <span class="delete-tag" on:click|preventDefault="{unselectItem(item)}"></span> | ||
- `dropdown-header` - customize what is displayed before the item list in the dropdown. By default there is nothing displayed. | ||
```html | ||
<div slot="menu-header" let:nbItems let:maxItemsToShowInList> | ||
<div class="dropdown-item">Choose between those {nbItems} items</div> | ||
<hr class="dropdown-divider"> | ||
</div> | ||
``` | ||
- `dropdown-footer` - customize what is displayed before the item list in the dropdown. By default this is where the `moreItemsText` is displayed if there is too much items to be displayed. | ||
```html | ||
<div slot="dropdown-footer" let:nbItems let:maxItemsToShowInList> | ||
... | ||
</div> | ||
``` | ||
#### CSS properties | ||
@@ -239,0 +259,0 @@ |
@@ -6,8 +6,10 @@ import { render, fireEvent, screen } from "@testing-library/svelte" | ||
async function colors(keyword, nb_items_max) { | ||
async function colors() { | ||
return ["White", "Red", "Yellow", "Green", "Blue", "Black", "Mät bläck", "<i>Jét Black</i>"] | ||
} | ||
window = Object.assign(window, { visualViewport: { height: 1500 } }) | ||
test("at first, menu is empty", async () => { | ||
const { component, container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
render(SimpleAutocomplete, {searchFunction: colors}) | ||
@@ -19,3 +21,3 @@ expect(await screen.queryByText('White')).not.toBeInTheDocument() | ||
test("even with the input is focused, the menu is empty", async () => { | ||
const { component, container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const { container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
@@ -30,3 +32,3 @@ | ||
test("when something is queried, only the matching items are shown", async () => { | ||
const { component, container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const { container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
@@ -42,3 +44,4 @@ | ||
test("when nothing matches the query, no item is show", async () => { | ||
const { component, container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const { container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
@@ -53,5 +56,4 @@ | ||
test("when something is queried, the query is highlighted", async () => { | ||
const { component, container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const { container } = render(SimpleAutocomplete, {searchFunction: colors}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
const list = container.querySelector("autocomplete-list"); | ||
@@ -58,0 +60,0 @@ await fireEvent.input(queryInput, { target: { value: "whi" } }) |
import { render } from "@testing-library/svelte" | ||
import SimpleAutocomplete from "../SimpleAutocomplete.svelte" | ||
window = Object.assign(window, { visualViewport: { height: 1500 } }) | ||
test("test simple hightlights", async () => { | ||
@@ -5,0 +7,0 @@ const { component } = render(SimpleAutocomplete) |
@@ -8,2 +8,4 @@ import { render, fireEvent, screen } from "@testing-library/svelte" | ||
window = Object.assign(window, { visualViewport: { height: 1500 } }) | ||
test("when selection is multiple, selectedItem is a list", async () => { | ||
@@ -25,1 +27,14 @@ const { component, container } = render(SimpleAutocomplete, {items: colors, multiple: true}) | ||
}) | ||
test("multiple widget initialization", async () => { | ||
const { component, container } = render(SimpleAutocomplete, { | ||
items: colors, | ||
multiple: true, | ||
selectedItem:["White", "Red"], | ||
text: "foobar" | ||
}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
expect(component.selectedItem).toStrictEqual(["White", "Red"]) | ||
expect(component.text).toStrictEqual("foobar") | ||
}) |
@@ -8,2 +8,4 @@ import { render, fireEvent, screen } from "@testing-library/svelte" | ||
window = Object.assign(window, { visualViewport: { height: 1500 } }) | ||
test("items are generated but hidden", async () => { | ||
@@ -61,1 +63,23 @@ const { component, container } = render(SimpleAutocomplete, {items: colors}) | ||
}) | ||
test("widget initialization with selectedItem", async () => { | ||
const { component, container } = render(SimpleAutocomplete, { | ||
items: colors, | ||
selectedItem:"White", | ||
}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
expect(component.selectedItem).toStrictEqual("White") | ||
expect(component.text).toStrictEqual("White") | ||
}) | ||
test("widget initialization with text", async () => { | ||
const { component, container } = render(SimpleAutocomplete, { | ||
items: colors, | ||
text:"White", | ||
}) | ||
const queryInput = container.querySelector("input[type='text']"); | ||
expect(component.selectedItem).toBeUndefined() | ||
expect(component.text).toStrictEqual("White") | ||
}) |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
303575
27.32%7196
28.59%267
8.1%