fix(Alert): forward all events including child components

N00nDay · Oct 14, 2022 · 7e3f73a · 7e3f73a
1 parent 060bc81
commit 7e3f73a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/src/lib/components/alert/Alert.svelte b/src/lib/components/alert/Alert.svelte
@@ -6,6 +6,11 @@
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	export let type: 'info' | 'warn' | 'success' | 'error' = 'info';
 	let reactiveType = writable(type);
@@ -29,7 +34,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<div class="flex">
 		<slot name="icon" />
 		{#if $$slots.title || $$slots.description}

diff --git a/src/lib/components/alert/Description.svelte b/src/lib/components/alert/Description.svelte
@@ -3,6 +3,11 @@
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 	import { ALERT_CONTEXT_ID } from './Alert.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
 		getContext(ALERT_CONTEXT_ID);
@@ -22,6 +27,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/alert/Icon.svelte b/src/lib/components/alert/Icon.svelte
@@ -3,6 +3,11 @@
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 	import { ALERT_CONTEXT_ID } from './Alert.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
 		getContext(ALERT_CONTEXT_ID);
@@ -20,6 +25,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/alert/Title.svelte b/src/lib/components/alert/Title.svelte
@@ -3,6 +3,11 @@
 	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 	import { ALERT_CONTEXT_ID } from './Alert.svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
 		getContext(ALERT_CONTEXT_ID);
@@ -24,7 +29,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<h3 class={finalClass} style={$$props.style}>
+<h3
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 	<slot name="extra" />
 </h3>