svelte-multiselect 7.0.2 → 7.1.0

package/MultiSelect.svelte

@@ -12,6 +12,10 @@ export let breakpoint = 800; // any screen with more horizontal pixels is consid
 export let defaultDisabledTitle = `This option is disabled`;
 export let disabled = false;
 export let disabledInputTitle = `This input is disabled`;
+// case-insensitive equality comparison after string coercion (looking only at the `label` key of object options)
+export let duplicateFunc = (op1, op2) => `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase();
+export let duplicateOptionMsg = `This option is already selected`;
+export let duplicates = false; // whether to allow duplicate options
 export let filterFunc = (op, searchText) => {
     if (!searchText)
         return true;
@@ -104,8 +108,11 @@ $: activeOption = activeIndex !== null ? matchingOptions[activeIndex] : null;
 function add(label, event) {
     if (maxSelect && maxSelect > 1 && _selected.length >= maxSelect)
         wiggle = true;
-    // to prevent duplicate selection, we could add `&& !selectedLabels.includes(label)`
-    if (maxSelect === null || maxSelect === 1 || _selected.length < maxSelect) {
+    if (!isNaN(Number(label)) && typeof _selectedLabels[0] === `number`)
+        label = Number(label); // convert to number if possible
+    const is_duplicate = _selected.some((option) => duplicateFunc(option, label));
+    if ((maxSelect === null || maxSelect === 1 || _selected.length < maxSelect) &&
+        (duplicates || !is_duplicate)) {
         // first check if we find option in the options list
         let option = options.find((op) => get_label(op) === label);
         if (!option && // this has the side-effect of not allowing to user to add the same
@@ -130,6 +137,9 @@ function add(label, event) {
             if (allowUserOptions === `append`)
                 options = [...options, option];
         }
+        if (option === undefined) {
+            throw `Run time error, option with label ${label} not found in options list`;
+        }
         searchText = ``; // reset search string on selection
         if ([``, undefined, null].includes(option)) {
             console.error(`MultiSelect: encountered missing option with label ${label} (or option is poorly labeled)`);
@@ -325,7 +335,9 @@ function on_click_outside(event) {
             type="button"
             title="{removeBtnTitle} {get_label(option)}"
           >
-            <slot name="remove-icon"><CrossIcon width="15px" /></slot>
+            <slot name="remove-icon">
+              <CrossIcon width="15px" />
+            </slot>
           </button>
         {/if}
       </li>
@@ -389,7 +401,9 @@ function on_click_outside(event) {
         on:mouseup|stopPropagation={remove_all}
         on:keydown={if_enter_or_space(remove_all)}
       >
-        <slot name="remove-icon"><CrossIcon width="15px" /></slot>
+        <slot name="remove-icon">
+          <CrossIcon width="15px" />
+        </slot>
       </button>
     {/if}
   {/if}
@@ -449,7 +463,9 @@ function on_click_outside(event) {
             on:blur={() => (add_option_msg_is_active = false)}
             aria-selected="false"
           >
-            {addOptionMsg}
+            {!duplicates && _selected.some((option) => duplicateFunc(option, searchText))
+              ? duplicateOptionMsg
+              : addOptionMsg}
           </li>
         {:else}
           <span>{noOptionsMsg}</span>
@@ -523,7 +539,8 @@ function on_click_outside(event) {
 :where(div.multiselect) ul.selected > li button:hover,
 :where(div.multiselect) button.remove-all:hover,
 :where(div.multiselect) button:focus {
-  color: var(--sms-button-hover-color, lightskyblue);
+  color: var(--sms-remove-btn-hover-color, lightskyblue);
+  background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
 }
 :where(div.multiselect) input {
   margin: auto 0; /* CSS reset */
@@ -662,7 +679,8 @@ function on_click_outside(event) {
   div.multiselect ul.selected > li button:hover,
 div.multiselect button.remove-all:hover,
 div.multiselect button:focus {
-    color: var(--sms-button-hover-color, lightskyblue);
+    color: var(--sms-remove-btn-hover-color, lightskyblue);
+    background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
   }
   div.multiselect input {
     margin: auto 0; /* CSS reset */

package/MultiSelect.svelte.d.ts

@@ -12,6 +12,9 @@ declare const __propDef: {
         defaultDisabledTitle?: string | undefined;
         disabled?: boolean | undefined;
         disabledInputTitle?: string | undefined;
+        duplicateFunc?: ((op1: Option, op2: Option) => boolean) | undefined;
+        duplicateOptionMsg?: string | undefined;
+        duplicates?: boolean | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
         focusInputOnSelect?: boolean | "desktop" | undefined;
         id?: string | null | undefined;

package/icons/Cross.svelte

@@ -1,5 +1,6 @@
-<svg {...$$props} viewBox="0 0 20 20" fill="currentColor">
+<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
   <path
-    d="M10 1.6a8.4 8.4 0 100 16.8 8.4 8.4 0 000-16.8zm4.789 11.461L13.06 14.79 10 11.729l-3.061 3.06L5.21 13.06 8.272 10 5.211 6.939 6.94 5.211 10 8.271l3.061-3.061 1.729 1.729L11.728 10l3.061 3.061z"
+    d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
   />
 </svg>
+<!-- https://api.iconify.design/ic:round-clear.svg -->

package/package.json

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

package/readme.md

@@ -138,6 +138,26 @@ import type { Option } from 'svelte-multiselect'
 
    Tooltip text to display on hover when the component is in `disabled` state.
 
+<!-- prettier-ignore -->
+1. ```ts
+   duplicateFunc: (op1: Option, op2: Option) => boolean = (op1, op2) =>
+    `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
+   ```
+
+   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 }``.
+
+1. ```ts
+   duplicates: boolean = false
+   ```
+
+   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.
+
+1. ```ts
+   duplicateOptionMsg: string = `This option is already selected`
+   ```
+
+   Text to display to users when `allowUserOptions` is truthy and they try to create a new option that's already selected.
+
 1. ```ts
    filterFunc = (op: Option, searchText: string): boolean => {
      if (!searchText) return true
@@ -290,13 +310,13 @@ import type { Option } from 'svelte-multiselect'
    selectedLabels: (string | number)[] | string | number | null = []
    ```
 
-   Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings, `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedLabels`. If `maxSelect={1}`, selectedLabels will not be an array but a single `string | number` or `null` if no options are selected.
+   Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings (or numbers), `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedLabels`. If `maxSelect={1}`, selectedLabels will not be an array but a single `string | number` or `null` if no options are selected.
 
 1. ```ts
    selectedValues: unknown[] | unknown | null = []
    ```
 
-   Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings, `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedValues`. If `maxSelect={1}`, selectedLabels will not be an array but a single value or `null` if no options are selected.
+   Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings (or numbers), `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedValues`. If `maxSelect={1}`, selectedLabels will not be an array but a single value or `null` if no options are selected.
 
 1. ```ts
    sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
@@ -460,7 +480,8 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `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.
+  - `color: var(--sms-remove-btn-hover-color, lightskyblue)`: Color of the remove-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
+  - `background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2))`: Background for hovered remove buttons.
 - `div.multiselect > ul.options`
   - `background: var(--sms-options-bg, white)`: Background of dropdown list.
   - `max-height: var(--sms-options-max-height, 50vh)`: Maximum height of options dropdown.