From 456adc65184103a082ecd373bde1e7b0d8531701 Mon Sep 17 00:00:00 2001
From: Aaron Brethorst <aaron@brethorsting.com>
Date: Sun, 24 Nov 2024 21:38:20 -0800
Subject: [PATCH] Add a SingleSelectAccordion component

Plumb in a way for it to pass data back to a containing component when one of its items is clicked on.
---
 src/components/containers/Accordion.svelte    |  2 +-
 .../containers/AccordionItem.svelte           |  5 ++-
 .../containers/SingleSelectAccordion.svelte   | 41 +++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/components/containers/SingleSelectAccordion.svelte

diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte
index 2bebc25..32c3548 100644
--- a/src/components/containers/Accordion.svelte
+++ b/src/components/containers/Accordion.svelte
@@ -49,7 +49,7 @@
 			return {
 				isActive,
 				skipAnimation,
-				activate: () => {
+				activate: (_data) => {
 					activeItems.update((items) => {
 						const newItems = new Set(items);
 						if (newItems.has(id)) {
diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte
index 34c2f42..6791e7e 100644
--- a/src/components/containers/AccordionItem.svelte
+++ b/src/components/containers/AccordionItem.svelte
@@ -1,11 +1,14 @@
 <script>
 	import { getContext } from 'svelte';
 	import { slide } from 'svelte/transition';
+
+	export let data = null;
+
 	const id = crypto.randomUUID();
 	const { registerItem } = getContext('accordion');
 	const { isActive, skipAnimation, activate } = registerItem(id);
 	function toggle() {
-		activate();
+		activate(data);
 	}
 </script>
 
diff --git a/src/components/containers/SingleSelectAccordion.svelte b/src/components/containers/SingleSelectAccordion.svelte
new file mode 100644
index 0000000..a82b212
--- /dev/null
+++ b/src/components/containers/SingleSelectAccordion.svelte
@@ -0,0 +1,41 @@
+<script>
+    import { setContext } from 'svelte';
+    import { writable, derived } from 'svelte/store';
+
+    // Create a store to track the active item and data.
+    const activeItem = writable(null);
+    const activeData = writable(null);
+
+    // Create dispatch for activeChanged event
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    // Watch for changes to activeItem and dispatch event
+    $: {
+        dispatch('activeChanged', {
+            activeItem: $activeItem,
+            activeData: $activeData
+        });
+    }
+
+    // Provide context for child AccordionItems
+    setContext('accordion', {
+        registerItem: (id) => {
+            const isActive = derived(activeItem, ($activeItem) => $activeItem === id);
+            return {
+                isActive,
+                activate: (data) => {
+                    const newId = $activeItem === id ? null : id;
+                    activeItem.set(newId);
+                    activeData.set(newId ? data : null);
+                }
+            };
+        }
+    });
+</script>
+
+<div
+    class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+>
+    <slot />
+</div>
\ No newline at end of file