svelte-multiselect - npm Package Compare versions

Comparing version 8.0.4 to 8.1.0

MultiSelect.svelte.d.ts

@@ -20,2 +20,3 @@ import { SvelteComponentTyped } from "svelte";
         focusInputOnSelect?: boolean | "desktop" | undefined;
+        form_input: HTMLInputElement;
         id?: string | null | undefined;
@@ -33,2 +34,3 @@ input?: HTMLInputElement | null | undefined;
         maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
+        maxSelectMsgClass?: string | undefined;
         name?: string | null | undefined;
@@ -45,3 +47,4 @@ noMatchingOptionsMsg?: string | undefined;
         removeBtnTitle?: string | undefined;
-        required?: boolean | undefined;
+        minSelect?: number | null | undefined;
+        required?: number | boolean | undefined;
         resetFilterOnAdd?: boolean | undefined;
@@ -48,0 +51,0 @@ searchText?: string | undefined;

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "8.0.4",
+  "version": "8.1.0",
   "type": "module",
@@ -11,0 +11,0 @@ "svelte": "index.js",

readme.md

@@ -172,2 +172,8 @@ <h1 align="center">
 1. ```ts
+   form_input: HTMLInputElement
+   ```
+
+   Handle to the `<input>` DOM node that's responsible for form validity checks and passing selected options to form submission handlers. Only available after component mounts (`null` before then).
+
+1. ```ts
    id: string | null = null
@@ -194,3 +200,3 @@ ```
 
-   If `required=true` and user tries to submit but `selected = []` is empty, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed again as soon as the user selects an option. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation.
+   If `required = true, 1, 2, ...` and user tries to submit form but `selected = []` is empty/`selected.length < required`, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed as soon as any change to `selected` is registered. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation.
 
@@ -228,3 +234,13 @@ 1. ```ts
 
+   Use CSS selector `span.max-select-msg` (or prop `maxSelectMsgClass` if you're using a CSS framework like Tailwind) to customize appearance of the message container.
+
 1. ```ts
+   minSelect: number | null = null
+   ```
+
+   Conditionally render the `x` button which removes a selected option depending on the number of selected options. Meaning all remove buttons disappear if `selected.length <= minSelect`. E.g. if 2 options are selected and `minSelect={3}`, users will not be able to remove any selections until they selected more than 3 options.
+
+   Note: Prop `required={3}` should be used instead if you only care about the component state at form submission time. `minSelect={3}` should be used if you want to place constraints on component state at all times.
+
+1. ```ts
    name: string | null = null
@@ -290,6 +306,6 @@ ```
 1. ```ts
-   required: boolean = false
+   required: boolean | number = false
    ```
 
-   Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected.
+   If `required = true, 1, 2, ...` forms can't be submitted without selecting given number of options. `true` means 1. `false` means even empty MultiSelect will pass form validity check. If user tries to submit a form containing MultiSelect with less than the required number of options, submission is aborted, MultiSelect scrolls into view and shows message "Please select at least `required` options".
 
@@ -521,2 +537,3 @@ 1. ```ts
 - `liActiveOptionClass`: the currently active dropdown list item (i.e. hovered or navigated to with arrow keys)
+- `maxSelectMsgClass`: small span towards the right end of the input field displaying to the user how many of the allowed number of options they've already selected
 
@@ -532,2 +549,3 @@ This simplified version of the DOM structure of the component shows where these classes are inserted:
   </ul>
+  <span class="maxSelectMsgClass">2/5 selected</span>
   <ul class="options {ulOptionsClass}">
@@ -594,3 +612,3 @@ <li class={liOptionClass}>Option 1</li>
 
-To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
+To submit a PR, clone the repo, install dependencies and start the dev server to see changes as you make them.
 
@@ -603,1 +621,7 @@ ```sh
 ```
+
+To make sure your changes didn't break anything, you can run the full test suite (which also runs in CI) using:
+
+```sh
+pnpm test
+```

No alert changes

Improved metrics

Total package byte prevSize

68675

increased by4.22%

Lines of code

291

increased by1.04%

Number of lines in readme file

620

increased by4.03%

No dependency changes