fix(Tabs): forward all events including child components

N00nDay · Oct 15, 2022 · d7dddca · d7dddca
1 parent d3d0c42
commit d7dddca
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>