From 4c54d30581ef5b9f1f16da84e1d9dbbde055f25c Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 29 Jul 2024 23:13:42 -0400
Subject: [PATCH] [MultiSelect] Add example of custom option markup

---
 .../docs/components/MultiSelect/+page.svelte  | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
index fe7b6e78a..1c10b1d2f 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
-  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
-
-  import { Button, Drawer, Form, MultiSelect, MultiSelectOption, ToggleButton } from 'svelte-ux';
+  import { mdiCheck, mdiDotsVertical, mdiPlus } from '@mdi/js';
+
+  import {
+    Button,
+    Drawer,
+    Form,
+    Icon,
+    MultiSelect,
+    MultiSelectOption,
+    ToggleButton,
+  } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
   const options = [
@@ -158,7 +166,7 @@
   </div>
 </Preview>
 
-<h2>option slot</h2>
+<h2>option slot with MultiSelectOption custom actions</h2>
 
 <Preview>
   {value.length} selected
@@ -203,6 +211,34 @@
   </div>
 </Preview>
 
+<h2>option slot with custom markup</h2>
+
+<Preview>
+  {value.length} selected
+  <div class="flex flex-col max-h-[360px] overflow-auto">
+    <MultiSelect {options} {value} on:change={(e) => (value = e.detail.value)}>
+      <svelte:fragment
+        slot="option"
+        let:option
+        let:label
+        let:value
+        let:checked
+        let:indeterminate
+        let:onChange
+      >
+        <button
+          class="px-2 py-1 text-surface-content flex gap-1 w-full"
+          role="option"
+          on:click={onChange}
+        >
+          <Icon data={checked ? mdiCheck : ''} />
+          <div>{label}</div>
+        </button>
+      </svelte:fragment>
+    </MultiSelect>
+  </div>
+</Preview>
+
 <h2>Form integration</h2>
 
 <Preview>