[feat](@svelteui/core): new props to modify Modal transitions

ISSUES CLOSED: #430
svelteuidev · Jul 28, 2023 · 7ac5f5a · 7ac5f5a
1 parent a4ecac8
commit 7ac5f5a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/svelteui-core/src/components/Modal/Modal.d.ts b/packages/svelteui-core/src/components/Modal/Modal.d.ts
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'svelte/elements';
-import { LiteralUnion, Transition } from '$lib/internal';
+import { LiteralUnion, Transition, TransitionOptions } from '$lib/internal';
 import { DefaultProps, SvelteUINumberSize, SvelteUIShadow, SvelteUISize } from '$lib/styles';
 
 export interface ModalProps extends DefaultProps, HTMLAttributes<HTMLElement> {
@@ -14,8 +14,9 @@ export interface ModalProps extends DefaultProps, HTMLAttributes<HTMLElement> {
 	radius?: SvelteUINumberSize;
 	size?: LiteralUnion<SvelteUISize, number | string>;
 	transition?: Transition;
-	transitionDuration?: number;
-	transitionTimingFunction?: string;
+	transitionOptions?: TransitionOptions;
+	overlayTransition?: Transition;
+	overlayTransitionOptions?: TransitionOptions;
 	closeButtonLabel?: string;
 	id?: string;
 	shadow?: SvelteUIShadow;

diff --git a/packages/svelteui-core/src/components/Modal/Modal.svelte b/packages/svelteui-core/src/components/Modal/Modal.svelte
@@ -3,6 +3,7 @@
 	import { fade, scale } from 'svelte/transition';
 	import { sineInOut } from 'svelte/easing';
 	import { focustrap, lockscroll, useFocusReturn } from '@svelteuidev/composables';
+	import { getTransition } from '$lib/internal';
 	import { randomID, colorScheme, css } from '$lib/styles';
 	import { CloseButton } from '../ActionIcon';
 	import { Box } from '../Box';
@@ -32,6 +33,10 @@
 		overlayBlur: $$Props['overlayBlur'] = 0,
 		radius: $$Props['radius'] = 'sm',
 		size: $$Props['size'] = 'md',
+		transition: $$Props['transition'] = 'scale',
+		transitionOptions: $$Props['transitionOptions'] = { duration: 100, easing: sineInOut },
+		overlayTransition: $$Props['transition'] = 'fade',
+		overlayTransitionOptions: $$Props['transitionOptions'] = { duration: 200, easing: sineInOut },
 		closeButtonLabel: $$Props['closeButtonLabel'] = 'svelteui-close-button',
 		id: $$Props['id'] = 'svelteui',
 		shadow: $$Props['shadow'] = 'lg',
@@ -84,6 +89,8 @@
 		);
 	}
 	$: lockScroll = opened;
+	$: _transition = getTransition(transition) as any;
+	$: _overlayTransition = getTransition(overlayTransition) as any;
 	$: ({ cx, classes, getStyles } = useStyles(
 		{ centered, overflow, size, zIndex },
 		{ name: 'Modal' }
@@ -109,7 +116,7 @@
 					shouldTrigger && event.code === 'Escape' && closeOnEscape && onClose();
 				}}
 			>
-				<div class={classes.transition} transition:scale={{ duration: 100, easing: sineInOut }}>
+				<div class={classes.transition} transition:_transition={transitionOptions}>
 					<Paper
 						class={classes.modal}
 						{shadow}
@@ -146,7 +153,7 @@
 					</Paper>
 				</div>
 			</div>
-			<div transition:fade={{ duration: 200, easing: sineInOut }}>
+			<div transition:_overlayTransition={overlayTransitionOptions}>
 				<Overlay
 					class={classes.overlay}
 					override={{ position: 'fixed' }}