svelte-multiselect 8.0.1 → 8.0.2

package/MultiSelect.svelte

@@ -301,7 +301,8 @@ function on_click_outside(event) {
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
   <input
     {required}
-    bind:value={selected}
+    {name}
+    value={selected.length > 0 ? JSON.stringify(selected) : null}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -344,7 +345,6 @@ function on_click_outside(event) {
         on:focus
         on:focus={open_dropdown}
         {id}
-        {name}
         {disabled}
         {inputmode}
         {pattern}

package/Wiggle.svelte

@@ -9,9 +9,9 @@ export let dy = 0; // try 10
 export let duration = 200;
 export let stiffness = 0.05;
 export let damping = 0.1;
-let restState = { angle: 0, scale: 1, dx: 0, dy: 0 };
-let store = spring(restState, { stiffness, damping });
-$: store.set(wiggle ? { scale, angle, dx, dy } : restState);
+let rest_state = { angle: 0, scale: 1, dx: 0, dy: 0 };
+let store = spring(rest_state, { stiffness, damping });
+$: store.set(wiggle ? { scale, angle, dx, dy } : rest_state);
 $: if (wiggle)
     setTimeout(() => (wiggle = false), duration);
 </script>

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
@@ -13,31 +13,32 @@
   "devDependencies": {
     "@iconify/svelte": "^3.0.0",
     "@playwright/test": "^1.27.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.44",
-    "@sveltejs/kit": "^1.0.0-next.516",
-    "@sveltejs/package": "^1.0.0-next.5",
-    "@sveltejs/vite-plugin-svelte": "^1.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "eslint": "^8.25.0",
+    "@sveltejs/adapter-static": "1.0.0-next.48",
+    "@sveltejs/kit": "1.0.0-next.538",
+    "@sveltejs/package": "1.0.0-next.5",
+    "@sveltejs/vite-plugin-svelte": "^1.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "eslint": "^8.27.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.1.0",
-    "jsdom": "^20.0.1",
+    "highlight.js": "^11.6.0",
+    "jsdom": "^20.0.2",
     "mdsvex": "^0.10.6",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.8.0",
     "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.0.1",
+    "rehype-slug": "^5.1.0",
     "svelte": "^3.52.0",
     "svelte-check": "^2.9.2",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.6",
-    "svelte-toc": "^0.4.0",
+    "svelte-preprocess": "^4.10.7",
+    "svelte-toc": "^0.4.1",
     "svelte2tsx": "^0.5.20",
-    "tslib": "^2.4.0",
+    "tslib": "^2.4.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8",
-    "vitest": "^0.24.3"
+    "vite": "^3.2.3",
+    "vitest": "^0.25.0"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -14,10 +14,10 @@
 
 </h4>
 
-**Keyboard-friendly, accessible and highly customizable multi-select component.**
-<span class="hide-in-docs">
-<a href="https://svelte-multiselect.netlify.app">View the docs</a>
-</span>
+<p align="center"><strong>
+  Keyboard-friendly, accessible and highly customizable multi-select component.
+  <a class="hide-in-docs" href="https://svelte-multiselect.netlify.app">View the docs</a>
+</strong></p>
 
 <slot name="examples" />
 
@@ -148,7 +148,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    duplicates: boolean = false
    ```
 
-   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is ` true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `duplicateFunc` to customize when a pair of options is considered a duplicate.
+   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is `true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `duplicateFunc` to customize when a pair of options is considered a duplicate.
 
 1. ```ts
    duplicateOptionMsg: string = `This option is already selected`
@@ -215,9 +215,9 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 1. ```ts
    maxSelectMsg: ((current: number, max: number) => string) | null = (
-    current: number,
-    max: number
-  ) => (max > 1 ? `${current}/${max}` : ``)
+     current: number,
+     max: number
+   ) => (max > 1 ? `${current}/${max}` : ``)
    ```
 
    Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to:
@@ -230,7 +230,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    name: string | null = null
    ```
 
-   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>` node.
+   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://svelte-multiselect.netlify.app/form).
 
 1. ```ts
    noMatchingOptionsMsg: string = `No matching options`
@@ -425,7 +425,8 @@ TypeScript users can import the types used for internal type safety:
 
 ```svelte
 <script lang="ts">
-  import MultiSelect, { Option, ObjectOption } from 'svelte-multiselect'
+  import MultiSelect from 'svelte-multiselect'
+  import type { Option, ObjectOption } from 'svelte-multiselect'
 
   const myOptions: ObjectOption[] = [
     { label: 'foo', value: 42 },
@@ -585,40 +586,6 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## Downstream testing
-
-To test a Svelte component which imports `svelte-multiselect`, you need to configure your test runner to avoid [transpiling issues](https://github.com/janosh/svelte-multiselect/issues/48).
-
-For Jest, exclude `svelte-multiselect` from `transformIgnorePatterns` in your `jest.config.json`:
-
-```json
-{
-  "transformIgnorePatterns": ["node_modules/?!(svelte-multiselect)"],
-  "transform": {
-    "^.+\\.[t|j]s?$": "esbuild-jest",
-    "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
-  }
-}
-```
-
-For Vitest, include `svelte-multiselect` in `deps.inline`:
-
-```ts
-// vite.config.ts
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-
-export default {
-  plugins: [svelte({ hot: !process.env.VITEST })],
-  test: {
-    deps: {
-      inline: [/svelte-multiselect/],
-    },
-  },
-}
-```
-
-Here's a [Stackblitz example](https://stackblitz.com/fork/github/davipon/test-svelte-multiselect?initialPath=__vitest__) that also uses [`vitest-svelte-kit`](https://github.com/nickbreaton/vitest-svelte-kit).
-
 ## Want to contribute?
 
 To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
@@ -626,6 +593,6 @@ To submit a PR, clone the repo, install dependencies and start the dev server to
 ```sh
 git clone https://github.com/janosh/svelte-multiselect
 cd svelte-multiselect
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```