svelte-multiselect 10.0.0 → 10.1.0

package/dist/CircleSpinner.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         color?: string | undefined;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type CircleSpinnerProps = typeof __propDef.props;
 export type CircleSpinnerEvents = typeof __propDef.events;
 export type CircleSpinnerSlots = typeof __propDef.slots;
-export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
+export default class CircleSpinner extends SvelteComponent<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
 }
 export {};

package/dist/CmdPalette.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -26,6 +26,6 @@ declare const __propDef: {
 export type CmdPaletteProps = typeof __propDef.props;
 export type CmdPaletteEvents = typeof __propDef.events;
 export type CmdPaletteSlots = typeof __propDef.slots;
-export default class CmdPalette extends SvelteComponentTyped<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
+export default class CmdPalette extends SvelteComponent<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
 }
 export {};

package/dist/MultiSelect.svelte

@@ -3,6 +3,7 @@ import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
 import Wiggle from './Wiggle.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
+import { get_label, get_style } from './utils';
 export let activeIndex = null;
 export let activeOption = null;
 export let createOptionMsg = `Create this option...`;
@@ -59,26 +60,26 @@ export let resetFilterOnAdd = true;
 export let searchText = ``;
 export let selected = options
     ?.filter((opt) => opt instanceof Object && opt?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? [];
+    .slice(0, maxSelect ?? undefined) ?? []; // don't allow more than maxSelect preselected options
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
 export let value = null;
-// get the label key from an option object or the option itself if it's a string or number
-export const get_label = (opt) => {
-    if (opt instanceof Object) {
-        if (opt.label === undefined) {
-            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
-        }
-        return opt.label;
-    }
-    return `${opt}`;
+const selected_to_value = (selected) => {
+    value = maxSelect === 1 ? selected[0] ?? null : selected;
+};
+const value_to_selected = (value) => {
+    if (maxSelect === 1)
+        selected = value ? [value] : [];
+    else
+        selected = value ?? [];
 };
 // if maxSelect=1, value is the single item in selected (or null if selected is empty)
 // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
 // https://github.com/janosh/svelte-multiselect/issues/136
-$: value = maxSelect === 1 ? selected[0] ?? null : selected;
+$: selected_to_value(selected);
+$: value_to_selected(value);
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
 if (!(options?.length > 0)) {
     if (allowUserOptions || loading || disabled || allowEmpty) {
@@ -455,6 +456,7 @@ function highlight_matching_options(event) {
         on:dragenter={() => (drag_idx = idx)}
         on:dragover|preventDefault
         class:active={drag_idx === idx}
+        style={get_style(option, `selected`)}
       >
         <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
@@ -597,6 +599,7 @@ function highlight_matching_options(event) {
           on:blur={() => (activeIndex = null)}
           role="option"
           aria-selected="false"
+          style={get_style(option, `option`)}
         >
           <slot name="option" {option} {idx}>
             <slot {option} {idx}>
@@ -608,16 +611,25 @@ function highlight_matching_options(event) {
             </slot>
           </slot>
         </li>
-      {:else}
-        {@const textInputIsDuplicate = selected.map(get_label).includes(searchText)}
-        <!-- set msg to duplicateOptionMsg if duplicates are not allowed and the user-entered
-          searchText is a duplicate, else set to createOptionMsg -->
-        {@const msg =
-          !duplicates && textInputIsDuplicate ? duplicateOptionMsg : createOptionMsg}
-        {#if allowUserOptions && searchText && msg}
+      {/each}
+      {#if searchText}
+        {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
+        {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
+        {@const can_create = allowUserOptions && createOptionMsg && `create`}
+        {@const no_match =
+          matchingOptions?.length == 0 && noMatchingOptionsMsg && `no-match`}
+        {@const msgType = is_dupe || can_create || no_match}
+        {#if msgType}
+          {@const msg = {
+            dupe: duplicateOptionMsg,
+            create: createOptionMsg,
+            'no-match': noMatchingOptionsMsg,
+          }[msgType]}
           <li
             on:mousedown|stopPropagation
-            on:mouseup|stopPropagation={(event) => add(searchText, event)}
+            on:mouseup|stopPropagation={(event) => {
+              if (allowUserOptions) add(searchText, event)
+            }}
             title={createOptionMsg}
             class:active={option_msg_is_active}
             on:mouseover={() => (option_msg_is_active = true)}
@@ -627,24 +639,18 @@ function highlight_matching_options(event) {
             role="option"
             aria-selected="false"
             class="user-msg"
+            style:cursor={{
+              dupe: `not-allowed`,
+              create: `pointer`,
+              'no-match': `default`,
+            }[msgType]}
           >
-            <slot
-              name="user-msg"
-              {duplicateOptionMsg}
-              {createOptionMsg}
-              {textInputIsDuplicate}
-              {searchText}
-              {msg}
-            >
+            <slot name="user-msg" {searchText} {msgType} {msg}>
               {msg}
             </slot>
           </li>
-        {:else if noMatchingOptionsMsg}
-          <!-- use span to not have cursor: pointer -->
-          <span class="user-msg">{noMatchingOptionsMsg}</span>
         {/if}
-        <!-- Show nothing if all messages are empty -->
-      {/each}
+      {/if}
     </ul>
   {/if}
 </div>

package/dist/MultiSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { MultiSelectEvents, Option as T } from './types';
 declare class __sveltets_Render<Option extends T> {
     props(): {
@@ -55,7 +55,6 @@ declare class __sveltets_Render<Option extends T> {
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
-        get_label?: ((opt: T) => string | number) | undefined;
     };
     events(): MultiSelectEvents;
     slots(): {
@@ -87,10 +86,8 @@ declare class __sveltets_Render<Option extends T> {
             idx: any;
         };
         'user-msg': {
-            duplicateOptionMsg: string;
-            createOptionMsg: string | null;
-            textInputIsDuplicate: any;
             searchText: string;
+            msgType: any;
             msg: any;
         };
     };
@@ -98,7 +95,6 @@ declare class __sveltets_Render<Option extends T> {
 export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
 export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
 export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends T> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
-    get get_label(): (opt: T) => string | number;
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/dist/Wiggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         wiggle?: boolean | undefined;
@@ -20,6 +20,6 @@ declare const __propDef: {
 export type WiggleProps = typeof __propDef.props;
 export type WiggleEvents = typeof __propDef.events;
 export type WiggleSlots = typeof __propDef.slots;
-export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> {
+export default class Wiggle extends SvelteComponent<WiggleProps, WiggleEvents, WiggleSlots> {
 }
 export {};

package/dist/icons/ChevronExpand.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  ChevronExpandProps */
 /** @typedef {typeof __propDef.events}  ChevronExpandEvents */
 /** @typedef {typeof __propDef.slots}  ChevronExpandSlots */
-export default class ChevronExpand extends SvelteComponentTyped<{
+export default class ChevronExpand extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class ChevronExpand extends SvelteComponentTyped<{
 export type ChevronExpandProps = typeof __propDef.props;
 export type ChevronExpandEvents = typeof __propDef.events;
 export type ChevronExpandSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Cross.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  CrossProps */
 /** @typedef {typeof __propDef.events}  CrossEvents */
 /** @typedef {typeof __propDef.slots}  CrossSlots */
-export default class Cross extends SvelteComponentTyped<{
+export default class Cross extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Cross extends SvelteComponentTyped<{
 export type CrossProps = typeof __propDef.props;
 export type CrossEvents = typeof __propDef.events;
 export type CrossSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Disabled.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  DisabledProps */
 /** @typedef {typeof __propDef.events}  DisabledEvents */
 /** @typedef {typeof __propDef.slots}  DisabledSlots */
-export default class Disabled extends SvelteComponentTyped<{
+export default class Disabled extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Disabled extends SvelteComponentTyped<{
 export type DisabledProps = typeof __propDef.props;
 export type DisabledEvents = typeof __propDef.events;
 export type DisabledSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/icons/Octocat.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  OctocatProps */
 /** @typedef {typeof __propDef.events}  OctocatEvents */
 /** @typedef {typeof __propDef.slots}  OctocatSlots */
-export default class Octocat extends SvelteComponentTyped<{
+export default class Octocat extends SvelteComponent<{
     [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class Octocat extends SvelteComponentTyped<{
 export type OctocatProps = typeof __propDef.props;
 export type OctocatEvents = typeof __propDef.events;
 export type OctocatSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/types.d.ts

@@ -1,4 +1,8 @@
 export type Option = string | number | ObjectOption;
+export type OptionStyle = string | {
+    option: string;
+    selected: string;
+};
 export type ObjectOption = {
     label: string | number;
     value?: unknown;
@@ -7,6 +11,7 @@ export type ObjectOption = {
     preselected?: boolean;
     disabledTitle?: string;
     selectedTitle?: string;
+    style?: OptionStyle;
     [key: string]: unknown;
 };
 export type DispatchEvents<T = Option> = {

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Option, OptionStyle } from './types';
+export declare const get_label: (opt: Option) => string | number;
+export declare function get_style(option: {
+    style?: OptionStyle;
+    [key: string]: unknown;
+} | string | number, key?: 'selected' | 'option' | null): string | null | undefined;

package/dist/utils.js

@@ -0,0 +1,30 @@
+// get the label key from an option object or the option itself if it's a string or number
+export const get_label = (opt) => {
+    if (opt instanceof Object) {
+        if (opt.label === undefined) {
+            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
+        }
+        return opt.label;
+    }
+    return `${opt}`;
+};
+export function get_style(option, key = null) {
+    if (!option?.style)
+        return null;
+    if (![`selected`, `option`, null].includes(key)) {
+        console.error(`MultiSelect: Invalid key=${key} for get_style`);
+        return;
+    }
+    if (typeof option == `object` && option.style) {
+        if (typeof option.style == `string`) {
+            return option.style;
+        }
+        if (typeof option.style == `object`) {
+            if (key && key in option.style)
+                return option.style[key];
+            else {
+                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+            }
+        }
+    }
+}

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,19 +23,19 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^4.0.1"
+    "svelte": "^4.0.5"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "^1.36.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.21.0",
-    "@sveltejs/package": "2.1.0",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "2.2.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",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.45.0",
     "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.8.0",
@@ -46,14 +46,14 @@
     "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.4",
+    "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.8",
-    "svelte2tsx": "^0.6.16",
+    "svelte-zoo": "^0.4.9",
+    "svelte2tsx": "^0.6.19",
     "typescript": "5.1.6",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -385,7 +385,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    value: Option | Option[] | null = null
    ```
 
-   If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
+   If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: Setting `value` does not rendered state on initial mount, meaning `bind:value` will update local variable `value` whenever internal component state changes but passing a `value` when component first mounts won't be reflected in UI. This is because the source of truth for rendering is `bind:selected`. `selected` is reactive to `value` internally but only on reassignment from initial value. Suggestions for better solutions than [#249](https://github.com/janosh/svelte-multiselect/issues/249) welcome!
 
 ## 🎰   Slots