fix(Badge): forward all events including child components

N00nDay · Oct 14, 2022 · 50d1409 · 50d1409
1 parent eec9caa
commit 50d1409
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/lib/components/badge/Badge.svelte b/src/lib/components/badge/Badge.svelte
@@ -5,6 +5,11 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte/internal';
+	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' | 'success' | 'warn' | 'error' | undefined = undefined;
 	export let size: 'default' | 'large' = 'default';
@@ -45,7 +50,13 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} class:pr-0.5={$$slots.close} style={$$props.style}>
+<span
+	class={finalClass}
+	class:pr-0.5={$$slots.close}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot name="indicator" />
 	<slot />
 	<slot name="close" />

diff --git a/src/lib/components/badge/Close.svelte b/src/lib/components/badge/Close.svelte
@@ -3,6 +3,11 @@
 	import { BADGE_CONTEXT_ID } from './Badge.svelte';
 	import { useContext } from '../..//utils/useContext';
 	import { getContext } from 'svelte/internal';
+	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: BADGE_CONTEXT_ID,
@@ -31,7 +36,12 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<button on:click class={finalClass} style={$$props.style}>
+<button
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<span class="sr-only">Remove option</span>
 	<svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
 		<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />

diff --git a/src/lib/components/badge/Indicator.svelte b/src/lib/components/badge/Indicator.svelte
@@ -3,6 +3,11 @@
 	import { BADGE_CONTEXT_ID } from './Badge.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte/internal';
+	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: BADGE_CONTEXT_ID,
@@ -26,6 +31,13 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<svg class={finalClass} style={$$props.style} fill="currentColor" viewBox="0 0 8 8">
+<svg
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+	fill="currentColor"
+	viewBox="0 0 8 8"
+>
 	<circle cx="4" cy="4" r="3" />
 </svg>