svelte-multiselect - npm Package Compare versions

Comparing version 8.2.1 to 8.2.2

changelog.md

@@ -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 @@

icons/ChevronExpand.svelte.d.ts

@@ -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: {

icons/Cross.svelte.d.ts

@@ -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: {

icons/Disabled.svelte.d.ts

@@ -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: {

icons/Octocat.svelte.d.ts

@@ -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: {

MultiSelect.svelte.d.ts

@@ -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 @@ };

package.json

@@ -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": [

readme.md

@@ -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)`

New alerts

Deprecated

Maintenance

The 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

increased by0.88%

Lines of code

294

increased by0.68%

Number of lines in readme file

618

increased by0.16%

Worsened metrics

Number of high maintenance alerts

1

increased byInfinity%

No dependency changes