fix(Drawer): forward all events including child components

fix(Drawer): class is reactive including child components
N00nDay · Oct 14, 2022 · 564ab6a · 564ab6a
1 parent 7c4782b
commit 564ab6a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/lib/components/drawer/Content.svelte b/src/lib/components/drawer/Content.svelte
@@ -2,6 +2,11 @@
 	import { DRAWER_CONTEXT_ID } from './Drawer.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { twMerge } from 'tailwind-merge';
+	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());
 
 	useContext({
 		context_id: DRAWER_CONTEXT_ID,
@@ -13,6 +18,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/drawer/Footer.svelte b/src/lib/components/drawer/Footer.svelte
@@ -2,6 +2,11 @@
 	import { DRAWER_CONTEXT_ID } from './Drawer.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { twMerge } from 'tailwind-merge';
+	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());
 
 	useContext({
 		context_id: DRAWER_CONTEXT_ID,
@@ -11,9 +16,14 @@
 
 	const defaultClass =
 		'px-4 sm:px-6 py-4 text-light-content dark:text-dark-content shadow-negative-md dark:shadow-black flex-shrink';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: 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/drawer/Header.svelte b/src/lib/components/drawer/Header.svelte
@@ -4,6 +4,11 @@
 	import Button from '../button';
 	import { DRAWER_CONTEXT_ID } from './Drawer.svelte';
 	import { useContext } from '../../utils/useContext';
+	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());
 
 	useContext({
 		context_id: DRAWER_CONTEXT_ID,
@@ -14,10 +19,15 @@
 
 	const defaultClass =
 		'px-4 sm:px-6 py-4 shadow-md dark:shadow-black flex-shrink text-lg font-medium text-light-content dark:text-dark-content';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<div class="flex items-start justify-between">
 		<h2>
 			<slot />