Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svelte-multiselect
Advanced tools
svelte-multiselect - npm Package Compare versions
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"> | ||
| [](https://npmjs.com/package/svelte-multiselect) | ||
| [](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) | ||
| [](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05) | ||
| [](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) | ||
| [](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05) | ||
| [](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
New alerts
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
Fixed alerts
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
Improved metrics
- Number of lines in readme file
- increased by0.79%
635
Worsened metrics
- Total package byte prevSize
- decreased by-0.67%
71393
- Dev dependency count
- increased by3.7%
28
No dependency changes