From d7dddcaa241610b9f0156b2f4152cc74b09f01c7 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Fri, 14 Oct 2022 20:22:05 -0400
Subject: [PATCH] fix(Tabs): forward all events including child components

---
 src/lib/components/tabs/Icon.svelte | 12 +++++++++++-
 src/lib/components/tabs/Tab.svelte  | 13 ++++++++++++-
 src/lib/components/tabs/Tabs.svelte | 19 +++++++++++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/tabs/Icon.svelte b/src/lib/components/tabs/Icon.svelte
index f3aded06..103f2fdc 100644
--- a/src/lib/components/tabs/Icon.svelte
+++ b/src/lib/components/tabs/Icon.svelte
@@ -6,6 +6,11 @@
 	import type { Writable } from 'svelte/store';
 	import type { MaterialIcon } from '../../types';
 	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());
 
 	export let icon: MaterialIcon;
 
@@ -34,4 +39,9 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}>{icon}</span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}>{icon}</span
+>
diff --git a/src/lib/components/tabs/Tab.svelte b/src/lib/components/tabs/Tab.svelte
index 012a246e..1296ac5d 100644
--- a/src/lib/components/tabs/Tab.svelte
+++ b/src/lib/components/tabs/Tab.svelte
@@ -9,6 +9,11 @@
 	import type { Writable } from 'svelte/store';
 	import HoverBackground from '../HoverBackground.svelte';
 	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());
 
 	export let href: string;
 	export let key: string;
@@ -58,7 +63,13 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<a {href} on:click class={finalClass} style={$$props.style}>
+<a
+	{href}
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot name="icon" />
 	<slot />
 	{#if variant === 'bar'}
diff --git a/src/lib/components/tabs/Tabs.svelte b/src/lib/components/tabs/Tabs.svelte
index d5052be3..b7673e6a 100644
--- a/src/lib/components/tabs/Tabs.svelte
+++ b/src/lib/components/tabs/Tabs.svelte
@@ -6,6 +6,11 @@
 	import { setContext } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 	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());
 
 	export let currentTab = '';
 	export let variant: 'default' | 'full-width' | 'bar' = 'default';
@@ -43,13 +48,23 @@
 
 {#if variant === 'bar'}
 	<div class={finalContainerClass}>
-		<nav class={finalClass} style={$$props.style}>
+		<nav
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}
+		>
 			<slot />
 		</nav>
 	</div>
 {:else}
 	<div class={finalContainerClass}>
-		<nav class={finalClass} style={$$props.style}>
+		<nav
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}
+		>
 			<slot />
 		</nav>
 	</div>