simple-svelte-autocomplete - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

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"

README.md

@@ -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 @@

src/tests/async.test.ts

@@ -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" } })

src/tests/highlight.test.ts

 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)

src/tests/multiple.test.ts

@@ -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")
+})

src/tests/sync.test.ts

@@ -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")
+})

No alert changes

Improved metrics

Total package byte prevSize

303575

27.32%

Lines of code

7196

28.59%

Number of lines in readme file

267

8.1%

No dependency changes