svelte-multiselect 8.0.0 → 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}
@@ -465,154 +465,17 @@ function on_click_outside(event) {
   {/if}
 </div>
 
-<style>:where(div.multiselect) {
-  position: relative;
-  align-items: center;
-  display: flex;
-  cursor: text;
-  border: var(--sms-border, 1pt solid lightgray);
-  border-radius: var(--sms-border-radius, 3pt);
-  background: var(--sms-bg);
-  max-width: var(--sms-max-width);
-  padding: var(--sms-padding, 0 3pt);
-  color: var(--sms-text-color);
-  font-size: var(--sms-font-size, inherit);
-  min-height: var(--sms-min-height, 19pt);
-  margin: var(--sms-margin);
-}
-:where(div.multiselect).open {
-  /* increase z-index when open to ensure the dropdown of one <MultiSelect />
-  displays above that of another slightly below it on the page */
-  z-index: var(--sms-open-z-index, 4);
-}
-:where(div.multiselect):focus-within {
-  border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
-}
-:where(div.multiselect).disabled {
-  background: var(--sms-disabled-bg, lightgray);
-  cursor: not-allowed;
-}
-:where(div.multiselect) > ul.selected {
-  display: flex;
-  flex: 1;
-  padding: 0;
-  margin: 0;
-  flex-wrap: wrap;
-}
-:where(div.multiselect) > ul.selected > li {
-  align-items: center;
-  border-radius: 3pt;
-  display: flex;
-  margin: 2pt;
-  line-height: normal;
-  transition: 0.3s;
-  white-space: nowrap;
-  background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
-  padding: var(--sms-selected-li-padding, 1pt 5pt);
-  color: var(--sms-selected-text-color, var(--sms-text-color));
-}
-:where(div.multiselect) button {
-  border-radius: 50%;
-  display: flex;
-  transition: 0.2s;
-  color: inherit;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  padding: 0;
-  margin: 0 0 0 3pt; /* CSS reset */
-}
-:where(div.multiselect) button.remove-all {
-  margin: 0 3pt;
-}
-:where(div.multiselect) ul.selected > li button:hover,
-:where(div.multiselect) button.remove-all:hover,
-:where(div.multiselect) button:focus {
-  color: var(--sms-remove-btn-hover-color, lightskyblue);
-  background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
-}
-:where(div.multiselect) input {
-  margin: auto 0; /* CSS reset */
-  padding: 0; /* CSS reset */
-}
-:where(div.multiselect) > ul.selected > li > input {
-  border: none;
-  outline: none;
-  background: none;
-  flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
-  min-width: 2em;
-  /* ensure input uses text color and not --sms-selected-text-color */
-  color: var(--sms-text-color);
-  font-size: inherit;
-  cursor: inherit; /* needed for disabled state */
-  border-radius: 0; /* reset ul.selected > li */
-}
-:where(div.multiselect) > ul.selected > li > input::placeholder {
-  padding-left: 5pt;
-  color: var(--sms-placeholder-color);
-  opacity: var(--sms-placeholder-opacity);
-}
-:where(div.multiselect) > input.form-control {
-  width: 2em;
-  position: absolute;
-  background: transparent;
-  border: none;
-  outline: none;
-  z-index: -1;
-  opacity: 0;
-  pointer-events: none;
-}
-:where(div.multiselect) > ul.options {
-  list-style: none;
-  padding: 4pt 0;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  position: absolute;
-  border-radius: 1ex;
-  overflow: auto;
-  background: var(--sms-options-bg, white);
-  max-height: var(--sms-options-max-height, 50vh);
-  overscroll-behavior: var(--sms-options-overscroll, none);
-  box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
-  transition: all 0.2s;
-}
-:where(div.multiselect) > ul.options.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transform: translateY(50px);
-}
-:where(div.multiselect) > ul.options > li {
-  padding: 3pt 2ex;
-  cursor: pointer;
-  scroll-margin: var(--sms-options-scroll-margin, 100px);
-}
-:where(div.multiselect) > ul.options span {
-  padding: 3pt 2ex;
-}
-:where(div.multiselect) > ul.options > li.selected {
-  background: var(--sms-li-selected-bg);
-  color: var(--sms-li-selected-color);
-}
-:where(div.multiselect) > ul.options > li.active {
-  background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-}
-:where(div.multiselect) > ul.options > li.disabled {
-  cursor: not-allowed;
-  background: var(--sms-li-disabled-bg, #f5f5f6);
-  color: var(--sms-li-disabled-text, #b8b8b8);
-}
-
-@supports not selector(:where(div.multiselect)) {
-  div.multiselect {
+<style>
+  :where(div.multiselect) {
     position: relative;
     align-items: center;
     display: flex;
     cursor: text;
+    box-sizing: border-box;
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
+    width: var(--sms-width);
     max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
@@ -620,26 +483,27 @@ function on_click_outside(event) {
     min-height: var(--sms-min-height, 19pt);
     margin: var(--sms-margin);
   }
-  div.multiselect.open {
+  :where(div.multiselect.open) {
     /* increase z-index when open to ensure the dropdown of one <MultiSelect />
     displays above that of another slightly below it on the page */
     z-index: var(--sms-open-z-index, 4);
   }
-  div.multiselect:focus-within {
+  :where(div.multiselect:focus-within) {
     border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
   }
-  div.multiselect.disabled {
+  :where(div.multiselect.disabled) {
     background: var(--sms-disabled-bg, lightgray);
     cursor: not-allowed;
   }
-  div.multiselect > ul.selected {
+
+  :where(div.multiselect > ul.selected) {
     display: flex;
     flex: 1;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
   }
-  div.multiselect > ul.selected > li {
+  :where(div.multiselect > ul.selected > li) {
     align-items: center;
     border-radius: 3pt;
     display: flex;
@@ -651,7 +515,7 @@ function on_click_outside(event) {
     padding: var(--sms-selected-li-padding, 1pt 5pt);
     color: var(--sms-selected-text-color, var(--sms-text-color));
   }
-  div.multiselect button {
+  :where(div.multiselect button) {
     border-radius: 50%;
     display: flex;
     transition: 0.2s;
@@ -663,20 +527,19 @@ function on_click_outside(event) {
     padding: 0;
     margin: 0 0 0 3pt; /* CSS reset */
   }
-  div.multiselect button.remove-all {
+  :where(div.multiselect button.remove-all) {
     margin: 0 3pt;
   }
-  div.multiselect ul.selected > li button:hover,
-div.multiselect button.remove-all:hover,
-div.multiselect button:focus {
+  :where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
     color: var(--sms-remove-btn-hover-color, lightskyblue);
     background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
   }
-  div.multiselect input {
+
+  :where(div.multiselect input) {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  div.multiselect > ul.selected > li > input {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;
@@ -688,12 +551,12 @@ div.multiselect button:focus {
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
   }
-  div.multiselect > ul.selected > li > input::placeholder {
+  :where(div.multiselect > ul.selected > li > input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);
   }
-  div.multiselect > input.form-control {
+  :where(div.multiselect > input.form-control) {
     width: 2em;
     position: absolute;
     background: transparent;
@@ -703,7 +566,8 @@ div.multiselect button:focus {
     opacity: 0;
     pointer-events: none;
   }
-  div.multiselect > ul.options {
+
+  :where(div.multiselect > ul.options) {
     list-style: none;
     padding: 4pt 0;
     top: 100%;
@@ -718,29 +582,30 @@ div.multiselect button:focus {
     box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
     transition: all 0.2s;
   }
-  div.multiselect > ul.options.hidden {
+  :where(div.multiselect > ul.options.hidden) {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
   }
-  div.multiselect > ul.options > li {
+  :where(div.multiselect > ul.options > li) {
     padding: 3pt 2ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  div.multiselect > ul.options span {
+  /* for noOptionsMsg */
+  :where(div.multiselect > ul.options span) {
     padding: 3pt 2ex;
   }
-  div.multiselect > ul.options > li.selected {
+  :where(div.multiselect > ul.options > li.selected) {
     background: var(--sms-li-selected-bg);
     color: var(--sms-li-selected-color);
   }
-  div.multiselect > ul.options > li.active {
+  :where(div.multiselect > ul.options > li.active) {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
   }
-  div.multiselect > ul.options > li.disabled {
+  :where(div.multiselect > ul.options > li.disabled) {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
-}</style>
+</style>

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.0",
+  "version": "8.0.2",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
@@ -13,32 +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",
-    "sass": "^1.55.0",
+    "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" />
 
@@ -49,7 +49,7 @@
 
 ```sh
 npm install -D svelte-multiselect
-pnpm install -D svelte-multiselect
+pnpm add -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -73,11 +73,7 @@ Favorite Frontend Frameworks?
 
 ## Props
 
-Full list of props/bindable variables for this component. In the type hints below, `Option` is:
-
-```ts
-import type { Option } from 'svelte-multiselect'
-```
+Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 
 1. ```ts
    activeIndex: number | null = null
@@ -152,7 +148,7 @@ import type { Option } from 'svelte-multiselect'
    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`
@@ -219,9 +215,9 @@ import type { Option } from 'svelte-multiselect'
 
 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:
@@ -234,7 +230,7 @@ import type { Option } from 'svelte-multiselect'
    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`
@@ -429,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 },
@@ -468,6 +465,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
   - `min-height: var(--sms-min-height, 19pt)`
+  - `width: var(--sms-width)`
   - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
   - `font-size: var(--sms-font-size, inherit)`
@@ -588,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.
@@ -629,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
 ```