🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
svelte-multiselect
Advanced tools
svelte-multiselect - npm Package Compare versions
Comparing version 8.2.1 to 8.2.2
@@ -5,4 +5,15 @@ ### Changelog | ||
| <!-- auto-changelog-above --> | ||
| #### [v8.2.2](https://github.com/janosh/svelte-multiselect/compare/v8.2.1...v8.2.2) | ||
| > 18 December 2022 | ||
| - Issue console warning if `sortSelected && selectedOptionsDraggable` [`#187`](https://github.com/janosh/svelte-multiselect/pull/187) | ||
| - Add new slot named 'expand-icon' [`#186`](https://github.com/janosh/svelte-multiselect/pull/186) | ||
| #### [v8.2.1](https://github.com/janosh/svelte-multiselect/compare/v8.2.0...v8.2.1) | ||
| > 10 December 2022 | ||
| - Fix `allowUserOptions` preventing dropdown list navigation with up/down arrow keys [`#184`](https://github.com/janosh/svelte-multiselect/pull/184) | ||
@@ -15,4 +26,2 @@ - Mdsvexamples [`#182`](https://github.com/janosh/svelte-multiselect/pull/182) | ||
| <!-- auto-changelog-above --> | ||
| #### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0) | ||
@@ -19,0 +28,0 @@ |
@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props} ChevronExpandProps */ | ||
| export default class ChevronExpand extends SvelteComponentTyped<{ | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }, { | ||
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>; | ||
| props: { | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }; | ||
@@ -20,0 +20,0 @@ events: { |
@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props} CrossProps */ | ||
| export default class Cross extends SvelteComponentTyped<{ | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }, { | ||
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>; | ||
| props: { | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }; | ||
@@ -20,0 +20,0 @@ events: { |
@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props} DisabledProps */ | ||
| export default class Disabled extends SvelteComponentTyped<{ | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }, { | ||
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>; | ||
| props: { | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }; | ||
@@ -20,0 +20,0 @@ events: { |
@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props} OctocatProps */ | ||
| export default class Octocat extends SvelteComponentTyped<{ | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }, { | ||
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>; | ||
| props: { | ||
| [x: string]: any; | ||
| [x: string]: never; | ||
| }; | ||
@@ -20,0 +20,0 @@ events: { |
@@ -50,4 +50,4 @@ import { SvelteComponentTyped } from "svelte"; | ||
| selected?: Option[] | undefined; | ||
| sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined; | ||
| selectedOptionsDraggable?: boolean | undefined; | ||
| sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined; | ||
| ulOptionsClass?: string | undefined; | ||
@@ -58,2 +58,5 @@ ulSelectedClass?: string | undefined; | ||
| slots: { | ||
| 'expand-icon': { | ||
| open: boolean; | ||
| }; | ||
| selected: { | ||
@@ -71,3 +74,2 @@ option: Option; | ||
| }; | ||
| getters: {}; | ||
| events: MultiSelectEvents; | ||
@@ -74,0 +76,0 @@ }; |
@@ -8,3 +8,3 @@ { | ||
| "license": "MIT", | ||
| "version": "8.2.1", | ||
| "version": "8.2.2", | ||
| "type": "module", | ||
@@ -15,32 +15,32 @@ "svelte": "index.js", | ||
| "devDependencies": { | ||
| "@iconify/svelte": "^3.0.0", | ||
| "@playwright/test": "^1.28.0", | ||
| "@sveltejs/adapter-static": "1.0.0-next.48", | ||
| "@sveltejs/kit": "1.0.0-next.553", | ||
| "@sveltejs/package": "1.0.0-next.6", | ||
| "@sveltejs/vite-plugin-svelte": "^1.2.0", | ||
| "@typescript-eslint/eslint-plugin": "^5.43.0", | ||
| "@typescript-eslint/parser": "^5.43.0", | ||
| "@vitest/coverage-c8": "^0.25.2", | ||
| "eslint": "^8.28.0", | ||
| "@iconify/svelte": "^3.0.1", | ||
| "@playwright/test": "^1.29.0", | ||
| "@sveltejs/adapter-static": "1.0.0", | ||
| "@sveltejs/kit": "1.0.1", | ||
| "@sveltejs/package": "1.0.1", | ||
| "@sveltejs/vite-plugin-svelte": "^2.0.2", | ||
| "@typescript-eslint/eslint-plugin": "^5.46.1", | ||
| "@typescript-eslint/parser": "^5.46.1", | ||
| "@vitest/coverage-c8": "^0.25.8", | ||
| "eslint": "^8.30.0", | ||
| "eslint-plugin-svelte3": "^4.0.0", | ||
| "hastscript": "^7.1.0", | ||
| "highlight.js": "^11.6.0", | ||
| "jsdom": "^20.0.2", | ||
| "highlight.js": "^11.7.0", | ||
| "jsdom": "^20.0.3", | ||
| "mdsvex": "^0.10.6", | ||
| "mdsvexamples": "^0.3.2", | ||
| "prettier": "^2.7.1", | ||
| "prettier-plugin-svelte": "^2.8.1", | ||
| "mdsvexamples": "^0.3.3", | ||
| "prettier": "^2.8.1", | ||
| "prettier-plugin-svelte": "^2.9.0", | ||
| "rehype-autolink-headings": "^6.1.1", | ||
| "rehype-slug": "^5.1.0", | ||
| "svelte": "^3.53.1", | ||
| "svelte-check": "^2.9.2", | ||
| "svelte": "^3.55.0", | ||
| "svelte-check": "^2.10.2", | ||
| "svelte-github-corner": "^0.1.0", | ||
| "svelte-preprocess": "^4.10.7", | ||
| "svelte-toc": "^0.4.1", | ||
| "svelte2tsx": "^0.5.20", | ||
| "svelte-preprocess": "^5.0.0", | ||
| "svelte-toc": "^0.5.0", | ||
| "svelte2tsx": "^0.5.22", | ||
| "tslib": "^2.4.1", | ||
| "typescript": "^4.9.3", | ||
| "vite": "^3.2.4", | ||
| "vitest": "^0.25.2" | ||
| "typescript": "^4.9.4", | ||
| "vite": "^4.0.1", | ||
| "vitest": "^0.25.8" | ||
| }, | ||
@@ -47,0 +47,0 @@ "keywords": [ |
@@ -330,12 +330,12 @@ <h1 align="center"> | ||
| 1. ```ts | ||
| selectedOptionsDraggable: boolean = true | ||
| sortSelected: boolean | ((op1: Option, op2: Option) => number) = false | ||
| ``` | ||
| Whether selected options are draggable so users can change their order. | ||
| 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://janosh.github.io/svelte-multiselect/sort-selected) example. | ||
| 1. ```ts | ||
| sortSelected: boolean | ((op1: Option, op2: Option) => number) = false | ||
| selectedOptionsDraggable: boolean = !sortSelected | ||
| ``` | ||
| 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://janosh.github.io/svelte-multiselect/sort-selected) example. | ||
| Whether selected options are draggable so users can change their order. | ||
@@ -350,9 +350,10 @@ 1. ```ts | ||
| `MultiSelect.svelte` has 3 named slots: | ||
| `MultiSelect.svelte` accepts the following named slots: | ||
| - `slot="option"`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown. | ||
| - `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items. | ||
| - `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props. | ||
| - `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon. | ||
| - `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props. | ||
| 1. `slot="option"`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown. | ||
| 1. `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items. | ||
| 1. `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props. | ||
| 1. `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon. | ||
| 1. `slot="expand-icon"`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden. | ||
| 1. `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props. | ||
@@ -489,4 +490,4 @@ Example: | ||
| - `min-height: var(--sms-min-height, 22pt)` | ||
| - `width: var(--sms-width)` | ||
| - `max-width: var(--sms-max-width)` | ||
| - `width: var(--sms-width, 100%)` | ||
| - `max-width: var(--sms-max-width, 800px)` | ||
| - `margin: var(--sms-margin)` | ||
@@ -493,0 +494,0 @@ - `font-size: var(--sms-font-size, inherit)` |
Sorry, the diff of this file is not supported yet
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
102019
0.88%- Lines of code
294
0.68%- Number of lines in readme file
618
0.16%Worsened metrics
- Number of medium maintenance alerts
1
Infinity%No dependency changes