fix(BreadCrumbs): forward all events including child components

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

Hide file tree

Showing 5 changed files with 56 additions and 6 deletions.
diff --git a/src/lib/components/breadcrumbs/Breadcrumbs.svelte b/src/lib/components/breadcrumbs/Breadcrumbs.svelte
@@ -5,6 +5,12 @@
 <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: 'solid' | 'ghost' = 'ghost';
 
 	setContext(BREADCRUMBS_CONTEXT_ID, {
@@ -21,7 +27,12 @@
 </script>
 
 <nav class="flex">
-	<ol class={finalClass} style={$$props.style}>
+	<ol
+		class={finalClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
+	>
 		<slot />
 	</ol>
 </nav>

diff --git a/src/lib/components/breadcrumbs/Crumb.svelte b/src/lib/components/breadcrumbs/Crumb.svelte
@@ -8,6 +8,11 @@
 	import { useContext } from '$lib/utils/useContext';
 	import { getContext, setContext } from 'svelte/internal';
 	import Divider from './Divider.svelte';
+	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;
 
@@ -29,7 +34,12 @@
 </script>
 
 <li class="crumb">
-	<div class={finalClass} style={$$props.style}>
+	<div
+		class={finalClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
+	>
 		{#if $$slots.divider}
 			<slot name="divider" />
 		{:else}

diff --git a/src/lib/components/breadcrumbs/Divider.svelte b/src/lib/components/breadcrumbs/Divider.svelte
@@ -3,6 +3,11 @@
 	import { BREADCRUMBS_CONTEXT_ID } from './Breadcrumbs.svelte';
 	import { useContext } from '$lib/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: BREADCRUMBS_CONTEXT_ID,
@@ -24,7 +29,9 @@
 {#if type === 'ghost'}
 	<svg
 		class={finalClass}
-		style={$$props.style}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
 		xmlns="http://www.w3.org/2000/svg"
 		viewBox="0 0 20 20"
 		fill="currentColor"
@@ -38,7 +45,9 @@
 {:else if type === 'solid'}
 	<svg
 		class={finalClass}
-		style={$$props.style}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
 		viewBox="0 0 24 44"
 		preserveAspectRatio="none"
 		fill="currentColor"

diff --git a/src/lib/components/breadcrumbs/Icon.svelte b/src/lib/components/breadcrumbs/Icon.svelte
@@ -4,6 +4,11 @@
 	import { BREADCRUMBS_CONTEXT_ID } from './Breadcrumbs.svelte';
 	import { BREADCRUMBS_CRUMB_CONTEXT_ID } from './Crumb.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());
 
 	export let icon: MaterialIcon;
 
@@ -23,4 +28,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/breadcrumbs/Label.svelte b/src/lib/components/breadcrumbs/Label.svelte
@@ -3,6 +3,11 @@
 	import { BREADCRUMBS_CONTEXT_ID } from './Breadcrumbs.svelte';
 	import { BREADCRUMBS_CRUMB_CONTEXT_ID } from './Crumb.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: BREADCRUMBS_CONTEXT_ID,
@@ -20,4 +25,9 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}><slot /></span>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}><slot /></span
+>