Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svelte-multiselect

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-multiselect - npm Package Compare versions

Comparing version 7.1.0 to 8.0.0

8

MultiSelect.svelte.d.ts

@@ -33,3 +33,3 @@ import { SvelteComponentTyped } from "svelte";

name?: string | null | undefined;
noOptionsMsg?: string | undefined;
noMatchingOptionsMsg?: string | undefined;
open?: boolean | undefined;

@@ -45,9 +45,9 @@ options: Option[];

required?: boolean | undefined;
resetFilterOnAdd?: boolean | undefined;
searchText?: string | undefined;
selected?: Option | Option[] | null | undefined;
selectedLabels?: string | number | (string | number)[] | null | undefined;
selectedValues?: unknown[] | unknown | null;
selected?: Option[] | undefined;
sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
ulOptionsClass?: string | undefined;
ulSelectedClass?: string | undefined;
value?: Option | Option[] | null | undefined;
};

@@ -54,0 +54,0 @@ slots: {

@@ -8,3 +8,3 @@ {

"license": "MIT",
"version": "7.1.0",
"version": "8.0.0",
"type": "module",

@@ -15,29 +15,30 @@ "svelte": "index.js",

"devDependencies": {
"@playwright/test": "^1.26.0",
"@sveltejs/adapter-static": "^1.0.0-next.43",
"@sveltejs/kit": "^1.0.0-next.502",
"@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.8",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.38.0",
"eslint": "^8.24.0",
"@sveltejs/vite-plugin-svelte": "^1.0.9",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@typescript-eslint/parser": "^5.40.0",
"eslint": "^8.25.0",
"eslint-plugin-svelte3": "^4.0.0",
"hastscript": "^7.0.2",
"jsdom": "^20.0.0",
"hastscript": "^7.1.0",
"jsdom": "^20.0.1",
"mdsvex": "^0.10.6",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
"prettier-plugin-svelte": "^2.8.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.0.1",
"sass": "^1.55.0",
"svelte": "^3.50.1",
"svelte-check": "^2.9.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",
"svelte2tsx": "^0.5.18",
"svelte2tsx": "^0.5.20",
"tslib": "^2.4.0",
"typescript": "^4.8.3",
"vite": "^3.1.3",
"vitest": "^0.23.4"
"typescript": "^4.8.4",
"vite": "^3.1.8",
"vitest": "^0.24.3"
},

@@ -44,0 +45,0 @@ "keywords": [

@@ -11,4 +11,4 @@ <h1 align="center">

[![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
[![REPL](https://img.shields.io/badge/Svelte-REPL-blue?logo=Svelte)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
[![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)

@@ -40,8 +40,10 @@

- **v5.0.0** Supports both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`. See [PR 76](https://github.com/janosh/svelte-multiselect/pull/76).
- **v6.0.0** The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
- **v6.0.1** The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
- **v6.0.1** The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
- **6.1.0** The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
- **v7.0.0** `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
- **v6.0.0**&nbsp; The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
- **v6.0.1**&nbsp; The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
- **v6.0.1**&nbsp; The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
- **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
- **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
- **8.0.0**&nbsp;
- Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. See [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
- Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. See [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).

@@ -221,3 +223,6 @@ ## Installation

1. ```ts
maxSelectMsg: ((current: number, max: number) => string) | null = null
maxSelectMsg: ((current: number, max: number) => string) | null = (
current: number,
max: number
) => (max > 1 ? `${current}/${max}` : ``)
```

@@ -238,3 +243,3 @@

1. ```ts
noOptionsMsg: string = `No matching options`
noMatchingOptionsMsg: string = `No matching options`
```

@@ -299,2 +304,8 @@

1. ```ts
resetFilterOnAdd: boolean = true
```
Whether text entered into the input to filter options in the dropdown list is reset to empty string when user selects an option.
1. ```ts
searchText: string = ``

@@ -306,3 +317,3 @@ ```

1. ```ts
selected: Option[] | Option | null =
selected: Option[] =
options

@@ -313,22 +324,16 @@ ?.filter((op) => (op as ObjectOption)?.preselected)

Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally or passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction. If `maxSelect={1}`, selected will not be an array but a single `Option` or `null` if no options are selected.
Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally. Can be passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.
1. ```ts
selectedLabels: (string | number)[] | string | number | null = []
sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
```
Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings (or numbers), `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedLabels`. If `maxSelect={1}`, selectedLabels will not be an array but a single `string | number` or `null` if no options are selected.
Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.
1. ```ts
selectedValues: unknown[] | unknown | null = []
value: Option | Option[] | null = null
```
Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings (or numbers), `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedValues`. If `maxSelect={1}`, selectedLabels will not be an array but a single value or `null` if no options are selected.
If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
1. ```ts
sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
```
Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.
## Slots

@@ -335,0 +340,0 @@

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc