svelte-multiselect 6.0.1 → 6.0.2

package/MultiSelect.svelte

@@ -42,7 +42,7 @@ export let removeAllTitle = `Remove all`;
 export let removeBtnTitle = `Remove`;
 export let required = false;
 export let searchText = ``;
-export let selected = [];
+export let selected = options?.filter((op) => op?.preselected) ?? [];
 export let selectedLabels = [];
 export let selectedValues = [];
 export let sortSelected = false;
@@ -78,9 +78,7 @@ $: formValue = selectedValues.join(`,`);
 $: if (formValue)
     invalid = false; // reset error status whenever component state changes
 // options matching the current search text
-$: matchingOptions = options.filter((op) => filterFunc(op, searchText) &&
-    !(op instanceof Object && op.disabled) &&
-    !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
+$: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
 );
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",

package/readme.md

@@ -263,7 +263,7 @@ import type { Option } from 'svelte-multiselect'
    Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text.
 
 1. ```ts
-   selected: Option[] = []
+   selected: Option[] = options?.filter((op) => op?.preselected) ?? []
    ```
 
    Array of currently selected options. Can be bound to `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.
@@ -286,6 +286,13 @@ import type { Option } from 'svelte-multiselect'
 
    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
+   userInputAs: 'string' | 'number' | 'object' =
+    options.length > 0 ? (typeof options[0] as 'object' | 'string' | 'number') : 'string'
+   ```
+
+   What type new options created from user text input should be. Only relevant if `allowUserOptions=true | 'append'`. If not explicitly set, we default `userInputAs` to the type of the 1st option (if available, else `string`) to keep type homogeneity. E.g. if MultiSelect already contains at least one option and it's an object, new options from user-entered text will take the shape `{label: userText, value: userText}`. Likewise if the 1st existing option is a number of string. If MultiSelect starts out empty but you still want user-created custom options to be objects, pass `userInputAs='object'`.
+
 ## Slots
 
 `MultiSelect.svelte` has 3 named slots:
@@ -321,34 +328,50 @@ Example:
 
 `MultiSelect.svelte` dispatches the following events:
 
-<div class="table">
+1. ```ts
+   on:add={(event) => console.log(event.detail.option)}
+   ```
 
-| name        | detail                                   | description                                                                                                                                             |
-| ----------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `add`       | `{ option: Option }`                     | Triggers when a new option is selected.                                                                                                                 |
-| `remove`    | `{ option: Option }`                     | Triggers when one selected option provided as `event.detail.option` is removed.                                                                         |
-| `removeAll` | `options: Option[]`                      | Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.                     |
-| `change`    | `type: 'add' \| 'remove' \| 'removeAll'` | Triggers when a option is either added or removed, or all options are removed at once. Payload will be a single or an array of `Option`s, respectively. |
-| `blur`      | none                                     | Triggers when the input field looses focus.                                                                                                             |
+   Triggers when a new option is selected.
 
-</div>
+1. ```ts
+   on:remove={(event) => console.log(event.detail.option)}`
+   ```
 
-Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
+   Triggers when one selected option provided as `event.detail.option` is removed.
 
-### Examples
+1. ```ts
+   on:removeAll={(event) => console.log(event.detail.options)}`
+   ```
 
-<!-- prettier-ignore -->
-- `on:add={(event) => console.log(event.detail.option)}`
-- `on:remove={(event) => console.log(event.detail.option)}`.
-- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}``
-- `on:blur={myFunction}`
+   Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.
+
+1. ```ts
+   on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}
+   ```
+
+   Triggers when an option is either added or removed, or all options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
+
+1. ```ts
+   on:blur={() => console.log('Multiselect input lost focus')}
+   ```
+
+   Triggers when the input field looses focus.
+
+For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
 ```svelte
 <MultiSelect
-  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.option}'`)}
+  on:change={(e) => {
+    if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
+    if (e.detail.type === 'remove') alert(`You removed ${e.detail.option}`)
+    if (e.detail.type === 'removeAll') alert(`You removed ${e.detail.options}`)
+  }}
 />
 ```
 
+> Note: Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
+
 ## TypeScript
 
 TypeScript users can import the types used for internal type safety:
@@ -385,7 +408,7 @@ There are 3 ways to style this component. To understand which options do what, i
 
 ### With CSS variables
 
-If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context. See [`app.css`](https://github.com/janosh/svelte-multiselect/blob/main/src/app.css) for how these variables are set for the demo site of this component.
+If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context. See [`app.css`](https://github.com/janosh/svelte-multiselect/blob/main/src/app.css) for how these variables are set on the demo site of this component.
 
 - `div.multiselect`
   - `border: var(--sms-border, 1pt solid lightgray)`: Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
@@ -393,9 +416,10 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `padding: var(--sms-padding, 0 3pt)`
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
-  - `min-height: var(--sms-min-height)`
+  - `min-height: var(--sms-min-height, 19pt)`
   - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
+  - `font-size: var(--sms-font-size, inherit)`
 - `div.multiselect.open`
   - `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements.
 - `div.multiselect:focus-within`
@@ -404,10 +428,10 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state.
 - `div.multiselect input::placeholder`
   - `color: var(--sms-placeholder-color)`
-  - `color: var(--sms-placeholder-opacity)`
+  - `opacity: var(--sms-placeholder-opacity)`
 - `div.multiselect > ul.selected > li`
   - `background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15))`: Background of selected options.
-  - `padding: var(--sms-selected-li-padding, 5pt 1pt)`: Height of selected options.
+  - `padding: var(--sms-selected-li-padding, 1pt 5pt)`: Height of selected options.
   - `color: var(--sms-selected-text-color, var(--sms-text-color))`: Text color for selected options.
 - `ul.selected > li button:hover, button.remove-all:hover, button:focus`
   - `color: var(--sms-button-hover-color, lightskyblue)`: Color of the remove-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
@@ -415,7 +439,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-options-bg, white)`: Background of dropdown list.
   - `max-height: var(--sms-options-max-height, 50vh)`: Maximum height of options dropdown.
   - `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior).
-  - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);`: Box shadow of dropdown list.
+  - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black)`: Box shadow of dropdown list.
 - `div.multiselect > ul.options > li`
   - `scroll-margin: var(--sms-options-scroll-margin, 100px)`: Top/bottom margin to keep between dropdown list items and top/bottom screen edge when auto-scrolling list to keep items in view.
 - `div.multiselect > ul.options > li.selected`