feat/dynamic-transitions

packages/skeleton/src/lib/components/Accordion/Accordion.svelte

@@ -4,15 +4,31 @@
 
 	import { writable, type Writable } from 'svelte/store';
 	import { setContext } from 'svelte';
+	import { slide, type TransitionConfig } from 'svelte/transition';
 
 	// Types
 	import type { CssClasses } from '../..';
 
 	// Props
 	/** Set the auto-collapse mode. */
 	export let autocollapse = false;
-	/** Set the drawer animation duration in milliseconds. */
+	/** DEPRECATED: use transition or transitionIn, transitionOut instead. */
 	export let duration = 200; // ms
+	/**
+	 * Set the In/Out transition with it's params.
+	 * @type {[(...args:any[]) => TransitionConfig, {}]}
+	 */
+	export let transition: [(...args: any[]) => TransitionConfig, {}] = [slide, { duration: 200 }];
+	/**
+	 * Overrides the In transition with it's params.
+	 * @type {[(...args:any[]) => TransitionConfig, {}]|undefined}
+	 */
+	export let transitionIn: [(...args: any[]) => TransitionConfig, {}] | undefined = undefined;
+	/**
+	 * Overrides the Out transition with it's params.
+	 * @type {[(...args:any[]) => TransitionConfig, {}]|undefined}
+	 */
+	export let transitionOut: [(...args: any[]) => TransitionConfig, {}] | undefined = undefined;
 
 	// Props (parent)
 	/** Provide classes to set the accordion width. */
@@ -44,13 +60,19 @@
 	/** Provide arbitrary classes to the caret icon region. */
 	export let regionCaret: CssClasses = '';
 
+	// Silence warning about unused props:
+	const deprecated = [duration];
+
 	// Local
 	const active: Writable<string | null> = writable(null);
 
 	// Context API
 	setContext('active', active);
 	setContext('autocollapse', autocollapse);
 	setContext('duration', duration);
+	setContext('transition', transition);
+	setContext('transitionIn', transitionIn);
+	setContext('transitionOut', transitionOut);
 	setContext('disabled', disabled);
 	setContext('padding', padding);
 	setContext('hover', hover);

packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte

@@ -12,7 +12,7 @@
 	import { getContext } from 'svelte';
 	import { createEventDispatcher } from 'svelte/internal';
 	import type { Writable } from 'svelte/store';
-	import { slide } from 'svelte/transition';
+	import type { TransitionConfig } from 'svelte/transition';
 
 	// Event Dispatcher
 	const dispatch = createEventDispatcher();
@@ -41,8 +41,14 @@
 	export let autocollapse: boolean = getContext('autocollapse');
 	/** The writable store that houses the auto-collapse active item UUID. */
 	export let active: Writable<string | null> = getContext('active');
-	/** Set the drawer animation duration. */
+	/** DEPRECATED: use transition or transitionIn, transitionOut instead. */
 	export let duration: number = getContext('duration');
+	/** Set the In/Out transition. */
+	export let transition: [(...args: any[]) => TransitionConfig, {}] = getContext('transition');
+	/** Overrides the In transition with it's params. */
+	export let transitionIn: [(...args: any[]) => TransitionConfig, {}] = getContext('transitionIn');
+	/** Overrides the Out transition with it's params. */
+	export let transitionOut: [(...args: any[]) => TransitionConfig, {}] = getContext('transitionOut');
 	// ---
 	/** Set the disabled state for this item. */
 	export let disabled: boolean = getContext('disabled');
@@ -65,6 +71,9 @@
 	/** Provide arbitrary classes caret icon region. */
 	export let regionCaret: CssClasses = getContext('regionCaret');
 
+	// Silence warning about unused props:
+	const deprecated = [duration];
+
 	// Change open behavior based on auto-collapse mode
 	function setActive(event?: Event): void {
 		if (autocollapse === true) {
@@ -90,6 +99,11 @@
 	// Reactive State
 	$: if (open && autocollapse) setActive();
 	$: openState = autocollapse ? $active === id : open;
+	// Reactive transition
+	$: trIn = transitionIn === undefined ? transition[0] : transitionIn[0];
+	$: trInParams = transitionIn === undefined ? transition[1] : transitionIn[1];
+	$: trOut = transitionOut === undefined ? transition[0] : transitionOut[0];
+	$: trOutParams = transitionOut === undefined ? transition[1] : transitionOut[1];
 	// Reactive Classes
 	$: classesBase = `${cBase} ${$$props.class ?? ''}`;
 	$: classesControl = `${cControl} ${padding} ${hover} ${rounded} ${regionControl}`;
@@ -140,7 +154,8 @@
 		<div
 			class="accordion-panel {classesPanel}"
 			id="accordion-panel-{id}"
-			transition:slide|local={{ duration }}
+			in:trIn|local={{ ...trInParams }}
+			out:trOut|local={{ ...trOutParams }}
 			role="region"
 			aria-hidden={!openState}
 			aria-labelledby="accordion-control-{id}"

packages/skeleton/src/lib/components/Accordion/AccordionItem.test.ts

@@ -1,11 +1,14 @@
 import { render } from '@testing-library/svelte';
 import { describe, it, expect } from 'vitest';
+import { slide } from 'svelte/transition';
 
 import AccordionItem from '$lib/components/Accordion/AccordionItem.svelte';
 
 describe('AccordionItem.svelte', () => {
 	it('Renders with minimal props', async () => {
-		const { getByTestId } = render(AccordionItem);
+		const { getByTestId } = render(AccordionItem, {
+			transition: [slide, { duration: 200 }]
+		});
 		expect(getByTestId('accordion-item')).toBeTruthy();
 	});
 
@@ -17,7 +20,8 @@ describe('AccordionItem.svelte', () => {
 			rounded: 'rounded-container-token',
 			regionControl: '',
 			regionPanel: 'space-y-4',
-			regionCaret: ''
+			regionCaret: '',
+			transition: [slide, { duration: 200 }]
 		});
 		expect(getByTestId('accordion-item')).toBeTruthy();
 		expect(getByTestId('accordion-item').querySelector('.accordion-control')?.className).to.contain('py-2 px-4');