From 564ab6a9290f5ed98d04fe458546094b448049b2 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Fri, 14 Oct 2022 12:40:49 -0400
Subject: [PATCH] fix(Drawer): forward all events including child components
 fix(Drawer): class is reactive including child components

---
 src/lib/components/drawer/Content.svelte | 12 +++++++++++-
 src/lib/components/drawer/Footer.svelte  | 14 ++++++++++++--
 src/lib/components/drawer/Header.svelte  | 14 ++++++++++++--
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/drawer/Content.svelte b/src/lib/components/drawer/Content.svelte
index 219764f9..7435ce5c 100644
--- 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
index 8e1529b4..562c7576 100644
--- 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
index ea619611..219d7b99 100644
--- 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 />