feat: closable alerts

immich-app · Jan 3, 2025 · a559f66 · a559f66
1 parent b94b671
commit a559f66
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 18 deletions.
diff --git a/src/lib/components/Alert/Alert.svelte b/src/lib/components/Alert/Alert.svelte
@@ -3,6 +3,7 @@
 	import CardHeader from '$lib/components/Card/CardHeader.svelte';
 	import Icon from '$lib/components/Icon/Icon.svelte';
 	import Text from '$lib/components/Text/Text.svelte';
+	import CloseButton from '$lib/components/CloseButton/CloseButton.svelte';
 	import type { Color } from '$lib/types.js';
 	import { cleanClass } from '$lib/utils.js';
 	import {
@@ -18,10 +19,42 @@
 		icon?: string | false;
 		title?: string;
 		class?: string;
+		duration?: number;
+		closable?: boolean;
+		controlled?: boolean;
+		onClose?: () => void;
 		children?: Snippet;
 	};
 
-	const { color = 'info', icon: iconOverride, title, class: className, children }: Props = $props();
+	const {
+		color = 'primary',
+		icon: iconOverride,
+		title,
+		class: className,
+		duration,
+		controlled,
+		closable,
+		onClose,
+		children,
+	}: Props = $props();
+
+	let open = $state(true);
+
+	if (duration) {
+		setTimeout(() => handleClose(), duration);
+	}
+
+	const handleClose = () => {
+		if (!open) {
+			return;
+		}
+
+		if (!controlled) {
+			open = false;
+		}
+
+		onClose?.();
+	};
 
 	const icons: Partial<Record<Color, string>> = {
 		success: mdiCheckCircleOutline,
@@ -34,23 +67,32 @@
 	);
 </script>
 
-<Card {color} variant="subtle" class={cleanClass(className)}>
-	<CardHeader>
-		<div class={cleanClass('flex gap-2')}>
-			{#if icon}
-				<div>
-					<Icon {icon} size="1.5em" class="h-7" />
-				</div>
-			{/if}
+{#if open}
+	<Card {color} variant="subtle" class={cleanClass(className)}>
+		<CardHeader>
+			<div class="flex justify-between">
+				<div class={cleanClass('flex gap-2')}>
+					{#if icon}
+						<div>
+							<Icon {icon} size="1.5em" class="h-7" />
+						</div>
+					{/if}
 
-			<div class="flex flex-col gap-2">
-				{#if title}
-					<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
-				{/if}
-				{#if children}
-					{@render children()}
+					<div class="flex flex-col gap-2">
+						{#if title}
+							<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+						{/if}
+						{#if children}
+							{@render children()}
+						{/if}
+					</div>
+				</div>
+				{#if closable || onClose}
+					<div>
+						<CloseButton onclick={handleClose} />
+					</div>
 				{/if}
 			</div>
-		</div>
-	</CardHeader>
-</Card>
+		</CardHeader>
+	</Card>
+{/if}
diff --git a/src/routes/components/alert/+page.svelte b/src/routes/components/alert/+page.svelte
@@ -7,6 +7,8 @@
 	import colorExample from './ColorExample.svelte?raw';
 	import CustomIconExample from './CustomIconExample.svelte';
 	import customIconExample from './CustomIconExample.svelte?raw';
+	import EventExample from './EventExample.svelte';
+	import eventExample from './EventExample.svelte?raw';
 </script>
 
 <ComponentPage name="Alert">
@@ -15,6 +17,7 @@
 			{ title: 'Basic', code: basicExample, component: BasicExample },
 			{ title: 'Color', code: colorExample, component: ColorExample },
 			{ title: 'Custom Icon', code: customIconExample, component: CustomIconExample },
+			{ title: 'Event', code: eventExample, component: EventExample },
 		]}
 	/>
 </ComponentPage>
diff --git a/src/routes/components/alert/EventExample.svelte b/src/routes/components/alert/EventExample.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Alert, Button, Stack } from '@immich/ui';
+
+	let count = $state(0);
+	let open = $state(true);
+
+	const handleClose = () => (open = false);
+	const handleReset = () => {
+		open = true;
+		count++;
+	};
+</script>
+
+<Stack>
+	{#key count}
+		<Alert title="This is a closable alert" closable />
+		<Alert title="This alert disappears automatically" duration={2000} />
+		<Alert title="This alert disappears automatically and is closable" duration={2000} closable />
+		{#if open}
+			<Alert title="This is a controlled alert" controlled onClose={handleClose} />
+		{/if}
+	{/key}
+
+	<div>
+		<Button onclick={handleReset}>Reset</Button>
+	</div>
+</Stack>