{stop.name}
diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte
index 2bebc25..3d40431 100644
--- a/src/components/containers/Accordion.svelte
+++ b/src/components/containers/Accordion.svelte
@@ -2,24 +2,25 @@
import { setContext } from 'svelte';
import { writable, derived } from 'svelte/store';
- // Props to track all possible item IDs
- export let items = [];
-
// Store for animation state
const skipAnimation = writable(false);
// Create a store to track multiple active items using a Set
const activeItems = writable(new Set());
- // Create dispatch for activeChanged event
- import { createEventDispatcher } from 'svelte';
- const dispatch = createEventDispatcher();
+ /**
+ * @typedef {Object} Props
+ * @property {any} [items] - Props to track all possible item IDs
+ * @property {import('svelte').Snippet} [children]
+ */
+
+ /** @type {Props} */
+ let { items = $bindable([]), children } = $props();
// Methods to open/close all items
export const openAll = (animate = true) => {
skipAnimation.set(!animate);
activeItems.set(new Set(items));
- dispatch('openAll', { animated: animate });
// Reset skip animation after a short delay
setTimeout(() => skipAnimation.set(false), 0);
};
@@ -27,16 +28,10 @@
export const closeAll = (animate = true) => {
skipAnimation.set(!animate);
activeItems.set(new Set());
- dispatch('closeAll', { animated: animate });
// Reset skip animation after a short delay
setTimeout(() => skipAnimation.set(false), 0);
};
- // Watch for changes to activeItems and dispatch event
- $: {
- dispatch('activeChanged', { activeItems: Array.from($activeItems) });
- }
-
// Provide context for child AccordionItems and expose methods
setContext('accordion', {
registerItem: (id) => {
@@ -70,5 +65,5 @@
-
+ {@render children?.()}
diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte
index 64de63b..ce0466a 100644
--- a/src/components/containers/AccordionItem.svelte
+++ b/src/components/containers/AccordionItem.svelte
@@ -2,7 +2,15 @@
import { getContext } from 'svelte';
import { slide } from 'svelte/transition';
- export let data = null;
+ /**
+ * @typedef {Object} Props
+ * @property {any} [data]
+ * @property {import('svelte').Snippet} [header]
+ * @property {import('svelte').Snippet} [children]
+ */
+
+ /** @type {Props} */
+ let { data = null, header, children } = $props();
const id = crypto.randomUUID();
const { registerItem } = getContext('accordion');
@@ -19,10 +27,10 @@
class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
class:text-gray-900={$isActive}
class:dark:text-white={$isActive}
- on:click={toggle}
+ onclick={toggle}
aria-expanded={$isActive}
>
-
+ {@render header?.()}