feat/dynamic-transitions

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

@@ -4,15 +4,24 @@
 
 	import { writable, type Writable } from 'svelte/store';
 	import { setContext } from 'svelte';
+	import { slide } from 'svelte/transition';
 
 	// Types
-	import type { CssClasses } from '../..';
+	import type { CssClasses, TransitionSettings } from '../..';
 
 	// Props
 	/** Set the auto-collapse mode. */
 	export let autocollapse = false;
-	/** Set the drawer animation duration in milliseconds. */
-	export let duration = 200; // ms
+	/**
+	 * Provide the transition to use when values move in.
+	 * @type {TransitionSettings}
+	 */
+	export let transitionIn: TransitionSettings = { transition: slide, params: { duration: 200 } };
+	/**
+	 * Provide the transition to use when values move out.
+	 * @type {TransitionSettings}
+	 */
+	export let transitionOut: TransitionSettings = { transition: slide, params: { duration: 200 } };
 
 	// Props (parent)
 	/** Provide classes to set the accordion width. */
@@ -44,13 +53,20 @@
 	/** Provide arbitrary classes to the caret icon region. */
 	export let regionCaret: CssClasses = '';
 
+	/** DEPRECATED: use transition or transitionIn, transitionOut instead. */
+	export let duration = 200; // ms
+	// 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('transitionIn', transitionIn);
+	setContext('transitionOut', transitionOut);
 	setContext('disabled', disabled);
 	setContext('padding', padding);
 	setContext('hover', hover);

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

@@ -12,13 +12,12 @@
 	import { getContext } from 'svelte';
 	import { createEventDispatcher } from 'svelte/internal';
 	import type { Writable } from 'svelte/store';
-	import { slide } from 'svelte/transition';
 
 	// Event Dispatcher
 	const dispatch = createEventDispatcher();
 
 	// Types
-	import type { CssClasses } from '../..';
+	import type { CssClasses, TransitionSettings } from '../..';
 
 	// Props (state)
 	/** Set open by default on load. */
@@ -41,8 +40,10 @@
 	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. */
-	export let duration: number = getContext('duration');
+	/** Provide the transition to use when values move in. */
+	export let transitionIn: TransitionSettings = getContext('transitionIn');
+	/** Provide the transition to use when values move out. */
+	export let transitionOut: TransitionSettings = getContext('transitionOut');
 	// ---
 	/** Set the disabled state for this item. */
 	export let disabled: boolean = getContext('disabled');
@@ -64,6 +65,15 @@
 	export let regionPanel: CssClasses = getContext('regionPanel');
 	/** Provide arbitrary classes caret icon region. */
 	export let regionCaret: CssClasses = getContext('regionCaret');
+	// ---
+	/** DEPRECATED: use transition or transitionIn, transitionOut instead. */
+	export let duration: number = getContext('duration');
+	// Silence warning about unused props:
+	const deprecated = [duration];
+
+	// Local
+	const { transition: trIn, params: trInParams } = transitionIn;
+	const { transition: trOut, params: trOutParams } = transitionOut;
 
 	// Change open behavior based on auto-collapse mode
 	function setActive(event?: Event): void {
@@ -140,7 +150,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,15 @@
 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, {
+			transitionIn: { transition: slide, params: { duration: 200 } },
+			transitionOut: { transition: slide, params: { duration: 200 } }
+		});
 		expect(getByTestId('accordion-item')).toBeTruthy();
 	});
 
@@ -17,7 +21,9 @@ describe('AccordionItem.svelte', () => {
 			rounded: 'rounded-container-token',
 			regionControl: '',
 			regionPanel: 'space-y-4',
-			regionCaret: ''
+			regionCaret: '',
+			transitionIn: { transition: slide, params: { duration: 200 } },
+			transitionOut: { transition: slide, params: { duration: 200 } }
 		});
 		expect(getByTestId('accordion-item')).toBeTruthy();
 		expect(getByTestId('accordion-item').querySelector('.accordion-control')?.className).to.contain('py-2 px-4');

packages/skeleton/src/lib/index.ts

@@ -1,4 +1,5 @@
 // This file defines the short path imports for the package (ex: @skeletonlabs/skeleton/*)
+import type { TransitionConfig, slide } from 'svelte/transition';
 
 // Types ---
 
@@ -14,6 +15,11 @@ export type { PopupSettings } from './utilities/Popup/types';
 // This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
 export type CssClasses = string;
 
+export interface TransitionSettings {
+	transition: (...args: Parameters<typeof slide>) => TransitionConfig;
+	params: object;
+}
+
 // Stores ---
 
 export { storeHighlightJs } from './utilities/CodeBlock/stores';