svelte-multiselect 7.0.1 → 7.1.0

package/MultiSelect.svelte

@@ -1,5 +1,4 @@
 <script>import { createEventDispatcher, tick } from 'svelte';
-import { get_label, get_value } from './';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 import Wiggle from './Wiggle.svelte';
@@ -13,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;
@@ -52,6 +55,10 @@ export let selectedValues = [];
 export let sortSelected = false;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
+// get the label key from an option object or the option itself if it's a string or number
+const get_label = (op) => (op instanceof Object ? op.label : op);
+// fallback on label if option is object and value is undefined
+const get_value = (op) => (op instanceof Object ? op.value ?? op.label : op);
 // selected and _selected are identical except if maxSelect=1, selected will be the single item (or null)
 // in _selected which will always be an array for easier component internals. selected then solves
 // https://github.com/janosh/svelte-multiselect/issues/86
@@ -101,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
@@ -127,9 +137,12 @@ 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 (!option) {
-            console.error(`MultiSelect: option with label ${label} not found`);
+        if ([``, undefined, null].includes(option)) {
+            console.error(`MultiSelect: encountered missing option with label ${label} (or option is poorly labeled)`);
             return;
         }
         if (maxSelect === 1) {
@@ -322,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>
@@ -386,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}
@@ -446,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>
@@ -520,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 */
@@ -659,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/index.d.ts

@@ -47,5 +47,3 @@ export declare type MultiSelectEvents = {
     touchmove: TouchEvent;
     touchstart: TouchEvent;
 };
-export declare const get_label: (op: Option) => string | number;
-export declare const get_value: (op: Option) => {};

package/index.js

@@ -1,8 +1,4 @@
 export { default } from './MultiSelect.svelte';
-// get the label key from an option object or the option itself if it's a string or number
-export const get_label = (op) => (op instanceof Object ? op.label : op);
-// fallback on label if option is object and value is undefined
-export const get_value = (op) => op instanceof Object ? op.value ?? op.label : op;
 // Firefox lacks support for scrollIntoViewIfNeeded, see
 // https://github.com/janosh/svelte-multiselect/issues/87
 // this polyfill was copied from

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.1",
+  "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.