svelte-multiselect - npm Package Compare versions

Comparing version 9.0.0 to 10.0.0

dist/MultiSelect.svelte.d.ts

@@ -16,6 +16,6 @@ import { SvelteComponentTyped } from "svelte";
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: T, op2: T) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
         duplicates?: boolean | undefined;
-        filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
+        key?: ((opt: T) => unknown) | undefined;
+        filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
         focusInputOnSelect?: boolean | "desktop" | undefined;
@@ -34,2 +34,3 @@ form_input?: HTMLInputElement | null | undefined;
         matchingOptions?: Option[] | undefined;
+        maxOptions?: number | undefined;
         maxSelect?: number | null | undefined;
@@ -59,3 +60,3 @@ maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
         value?: Option | Option[] | null | undefined;
-        get_label?: ((op: T) => string | number) | undefined;
+        get_label?: ((opt: T) => string | number) | undefined;
     };
@@ -76,2 +77,11 @@ events(): MultiSelectEvents;
         'remove-icon': {};
+        'after-input': {
+            selected: Option[];
+            disabled: boolean;
+            invalid: boolean;
+            id: string | null;
+            placeholder: string | null;
+            open: boolean;
+            required: number | boolean;
+        };
         spinner: {};
@@ -83,2 +93,9 @@ 'disabled-icon': {};
         };
+        'user-msg': {
+            duplicateOptionMsg: string;
+            createOptionMsg: string | null;
+            textInputIsDuplicate: any;
+            searchText: string;
+            msg: any;
+        };
     };
@@ -90,4 +107,4 @@ }
 export default class MultiSelect<Option extends T> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
-    get get_label(): (op: T) => string | number;
+    get get_label(): (opt: T) => string | number;
 }
 export {};

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "type": "module",
@@ -27,33 +27,33 @@ "svelte": "./dist/index.js",
   "dependencies": {
-    "svelte": "^4.0.0-next.0"
+    "svelte": "^4.0.1"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.3",
-    "@playwright/test": "^1.34.3",
+    "@iconify/svelte": "^3.1.4",
+    "@playwright/test": "^1.35.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.19.0",
-    "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "1.0.0-next.29",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
-    "@vitest/coverage-c8": "^0.31.1",
-    "eslint": "^8.41.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "@sveltejs/kit": "^1.21.0",
+    "@sveltejs/package": "2.1.0",
+    "@sveltejs/vite-plugin-svelte": "2.4.2",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "@vitest/coverage-v8": "^0.32.2",
+    "eslint": "^8.44.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.8.0",
-    "jsdom": "^22.0.0",
-    "mdsvex": "^0.10.6",
+    "jsdom": "^22.1.0",
+    "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.2",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-check": "^3.4.4",
+    "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.6",
-    "svelte2tsx": "^0.6.15",
-    "typescript": "5.0.4",
+    "svelte-zoo": "^0.4.8",
+    "svelte2tsx": "^0.6.16",
+    "typescript": "5.1.6",
     "vite": "^4.3.9",
-    "vitest": "^0.31.1"
+    "vitest": "^0.32.2"
   },
@@ -82,2 +82,3 @@ "keywords": [
   },
+  "types": "./dist/index.d.ts",
   "files": [
@@ -84,0 +85,0 @@ "dist"

readme.md

@@ -11,3 +11,3 @@ <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/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
 [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
@@ -63,2 +63,11 @@ [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
+- **v10.0.0** (2023-06-23)&nbsp; `duplicateFunc()` renamed to `key` in [#238](https://github.com/janosh/svelte-multiselect/pull/238). Signature changed:
+
+  ```diff
+  - duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) => `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
+  + key: (opt: T) => unknown = (opt) => `${get_label(opt)}`.toLowerCase()
+  ```
+
+  Rather than implementing custom equality in `duplicateFunc`, the `key` function is now expected to map options to a unique identifier. `key(op1) === key(op2)` should mean `op1` and `op2` are the same option. `key` can return any type but usually best to return primitives (`string`, `number`, ...) for Svelte keyed each blocks (see [#217](https://github.com/janosh/svelte-multiselect/pull/217)).
+
 ## 🔨 &thinsp; Installation
@@ -161,26 +170,25 @@
 
-<!-- prettier-ignore -->
 1. ```ts
-   duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) =>
-    `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
+   duplicates: boolean = false
    ```
 
-   This option determines when two options are considered duplicates. Defaults to case-insensitive equality comparison after string coercion (looking only at the `label` key of object options). I.e. the default `duplicateFunc` considers `'Foo' == 'foo'`, `'42' == 42` and ``{ label: `Foo`, value: 0 } == { label: `foo`, value: 42 }``.
+   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is `true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `key` to customize when a pair of options is considered equal.
 
 1. ```ts
-   duplicates: boolean = false
+   duplicateOptionMsg: string = `This option is already selected`
    ```
 
-   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is `true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `duplicateFunc` to customize when a pair of options is considered a duplicate.
+   Text to display to users when `allowUserOptions` is truthy and they try to create a new option that's already selected.
 
+<!-- prettier-ignore -->
 1. ```ts
-   duplicateOptionMsg: string = `This option is already selected`
+   key: (opt: T) => unknown = (opt) => `${get_label(opt)}`.toLowerCase()
    ```
 
-   Text to display to users when `allowUserOptions` is truthy and they try to create a new option that's already selected.
+   A function that maps options to a value by which equality of options is determined. Defaults to mapping options to their lower-cased label. E.g. by default ``const opt1 = { label: `foo`, id: 1 }`` and ``const opt2 = { label: `foo`, id: 2 }`` are considered equal. If you want to consider them different, you can set `key` to e.g. `key={(opt) => opt.id}` or ``key={(opt) => `${opt.label}-${opt.id}}`` or even `key={JSON.stringify}`.
 
 1. ```ts
-   filterFunc = (op: Option, searchText: string): boolean => {
+   filterFunc = (opt: Option, searchText: string): boolean => {
      if (!searchText) return true
-     return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase())
+     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase())
    }
@@ -225,3 +233,3 @@ ```
 
-   The `inputmode` attribute hints at the type of data the user may enter. Values like `'numeric' | 'tel' | 'email'` allow browsers to display an appropriate virtual keyboard. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) for details.
+   The `inputmode` attribute hints at the type of data the user may enter. Values like `'numeric' | 'tel' | 'email'` allow mobile browsers to display an appropriate virtual on-screen keyboard. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) for details. If you want to suppress the on-screen keyboard to leave full-screen real estate for the dropdown list of options, set `inputmode="none"`.
 
@@ -247,2 +255,8 @@ 1. ```ts
 1. ```ts
+   maxOptions: number | undefined = undefined
+   ```
+
+   Positive integer to limit the number of options displayed in the dropdown. `undefined` and 0 mean no limit.
+
+1. ```ts
    maxSelect: number | null = null
@@ -391,4 +405,11 @@ ```
 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.
+1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). `let:props`:
+   - `duplicateOptionMsg: string`: See [props](#🔣-props).
+   - `createOptionMsg: string`: See [props](#🔣-props).
+   - `textInputIsDuplicate: boolean`: Whether user has typed text that matches an already existing option.
+   - `searchText: string`: The text user typed into search input.
+   - `msg: string`: `duplicateOptionMsg` if user input is a duplicate else `createOptionMsg`.
+1. `slot='after-input'`: ForPlaced after the search input. For arbitrary content like icons or temporary messages. Receives props `selected`, `disabled`, `invalid`, `id`, `placeholder`, `open`, `required`.
 
-Example:
+Example using several slots:
 
@@ -395,0 +416,0 @@ ```svelte

No alert changes

Improved metrics

Total package byte prevSize

87219

increased by4.11%

Lines of code

367

increased by4.86%

Number of lines in readme file

688

increased by3.15%

Dependency changes

• Updatedsvelte@^4.0.1