svelte-multiselect 3.0.1 → 3.1.0

package/MultiSelect.svelte

@@ -207,30 +207,23 @@ display above those of another following shortly after it -->
 >
   <ExpandIcon height="14pt" style="padding: 0 3pt 0 1pt;" />
   <ul class="selected {ulSelectedClass}">
-    {#if maxSelect == 1 && selected[0]?.label}
-      <span on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}>
-        {selected[0].label}
-      </span>
-    {:else}
-      {#each selected as { label }}
-        <li
-          class={liSelectedClass}
-          on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
-        >
-          {label}
-          {#if !readonly}
-            <button
-              on:mouseup|stopPropagation={() => remove(label)}
-              on:keydown={handleEnterAndSpaceKeys(() => remove(label))}
-              type="button"
-              title="{removeBtnTitle} {label}"
-            >
-              <CrossIcon height="12pt" />
-            </button>
-          {/if}
-        </li>
-      {/each}
-    {/if}
+    {#each selected as option, idx}
+      <li class={liSelectedClass}>
+        <slot name="selectedRenderer" {option} {idx}>
+          {option.label}
+        </slot>
+        {#if !readonly}
+          <button
+            on:mouseup|stopPropagation={() => remove(option.label)}
+            on:keydown={handleEnterAndSpaceKeys(() => remove(option.label))}
+            type="button"
+            title="{removeBtnTitle} {option.label}"
+          >
+            <CrossIcon height="12pt" />
+          </button>
+        {/if}
+      </li>
+    {/each}
     <input
       bind:this={input}
       autocomplete="off"
@@ -265,7 +258,9 @@ display above those of another following shortly after it -->
       class:hidden={!showOptions}
       transition:fly|local={{ duration: 300, y: 40 }}
     >
-      {#each matchingOptions as { label, disabled, title = null, selectedTitle, disabledTitle = defaultDisabledTitle }}
+      {#each matchingOptions as option, idx}
+        {@const { label, disabled, title = null, selectedTitle } = option}
+        {@const { disabledTitle = defaultDisabledTitle } = option}
         <li
           on:mouseup|preventDefault|stopPropagation
           on:mousedown|preventDefault|stopPropagation={() => {
@@ -278,7 +273,9 @@ display above those of another following shortly after it -->
           title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
           class={liOptionClass}
         >
-          {label}
+          <slot name="optionRenderer" {option} {idx}>
+            {option.label}
+          </slot>
         </li>
       {:else}
         {noOptionsMsg}

package/MultiSelect.svelte.d.ts

@@ -29,7 +29,16 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        selectedRenderer: {
+            option: Option;
+            idx: any;
+        };
+        optionRenderer: {
+            option: Option;
+            idx: any;
+        };
+    };
 };
 export declare type MultiSelectProps = typeof __propDef.props;
 export declare type MultiSelectEvents = typeof __propDef.events;

package/package.json

@@ -5,33 +5,32 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "type": "module",
-  "svelte": "MultiSelect.svelte",
-  "bugs": {
-    "url": "https://github.com/janosh/svelte-multiselect/issues"
-  },
+  "svelte": "index.js",
+  "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.24",
-    "@sveltejs/kit": "^1.0.0-next.216",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "eslint": "^8.6.0",
-    "eslint-plugin-svelte3": "^3.3.0",
+    "@sveltejs/adapter-static": "^1.0.0-next.26",
+    "@sveltejs/kit": "^1.0.0-next.239",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "eslint": "^8.7.0",
+    "eslint-plugin-svelte3": "^3.4.0",
     "hastscript": "^7.0.2",
     "mdsvex": "^0.9.8",
     "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.1",
+    "prettier-plugin-svelte": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.45.0",
-    "svelte-check": "^2.2.11",
-    "svelte-preprocess": "^4.10.1",
-    "svelte-toc": "^0.2.0",
-    "svelte2tsx": "^0.4.12",
+    "svelte": "^3.46.2",
+    "svelte-check": "^2.3.0",
+    "svelte-github-corner": "^0.1.0",
+    "svelte-preprocess": "^4.10.2",
+    "svelte-toc": "^0.2.2",
+    "svelte2tsx": "^0.4.14",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.10"
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -1,10 +1,7 @@
-<div class="maybe-hide">
-
-<p align="center">
-  <img src="static/favicon.svg" alt="Svelte MultiSelect" height=80>
-</p>
-
-<h1 align="center">Svelte MultiSelect</h1>
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/janosh/svelte-toc/main/static/favicon.svg" alt="Svelte MultiSelect" height=60>
+  <br>&ensp;Svelte MultiSelect
+</h1>
 
 <h4 align="center">
 
@@ -14,14 +11,16 @@
 
 </h4>
 
+<div class="hide-in-docs">
+
 **[Live demo](https://svelte-multiselect.netlify.app)**.
 
 </div>
 
-<!-- remove above in docs -->
-
 **Keyboard-friendly, zero-dependency multi-select Svelte component.**
 
+<slot />
+
 ## Key Features
 
 - **Single / multiple select:** pass `maxSelect={1}` prop to only allow one selection
@@ -105,6 +104,26 @@ Full list of props/bindable variables for this component:
 
 </div>
 
+## Slots
+
+`MultiSelect.svelte` accepts two named slots
+
+- `slot="optionRenderer"`
+- `slot="selectedRenderer"`
+
+to customize rendering individual options in the dropdown and the list of selected tags, respectively. Each renderer receives the full `option` object along with the zero-indexed position (`idx`) in its list, both available via the `let:` directive:
+
+```svelte
+<MultiSelect options={[`Banana`, `Watermelon`, `Apple`, `Dates`, `Mango`]}>
+  <span let:idx let:option slot="optionRenderer">
+    {idx + 1}. {option.label} {option.label === `Mango` ? `🎉` : ``}</span
+  >
+  <span let:idx let:option slot="selectedRenderer">
+    #️⃣ {idx + 1} {option.label}</span
+  >
+</MultiSelect>
+```
+
 ## Events
 
 `MultiSelect.svelte` dispatches the following events:
@@ -131,6 +150,25 @@ Full list of props/bindable variables for this component:
 />
 ```
 
+## TypeScript
+
+TypeScript users can import the types used for internal type safety for external use as well:
+
+```svelte
+<script lang="ts">
+  import MultiSelect, {
+    Option,
+    Primitive,
+    ProtoOption,
+  } from 'svelte-multiselect'
+
+  const myOptions: Option[] = [
+    { label: 'foo', value: 42 },
+    { label: 'bar', value: 69 },
+  ]
+</script>
+```
+
 ## Styling
 
 There are 3 ways to style this component.