svelte-multiselect
Advanced tools
Comparing version 7.1.0 to 8.0.0
@@ -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** 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). | ||
- **8.0.0** | ||
- 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
635
71393
28