You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

simple-svelte-autocomplete

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple-svelte-autocomplete - npm Package Compare versions

Comparing version

to
2.5.0

4

package.json
{
"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