fix(Steps): forward all events including child components

N00nDay · Oct 15, 2022 · c9bb1a4 · c9bb1a4
1 parent 80bd1ec
commit c9bb1a4
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 31 deletions.
diff --git a/src/lib/components/steps/Description.svelte b/src/lib/components/steps/Description.svelte
@@ -5,6 +5,11 @@
 	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import type { Writable } from 'svelte/store';
+	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: STEPS_CONTEXT_ID,
@@ -51,18 +56,48 @@
 
 {#if variant === 'simple'}
 	{#if $currentStep > step}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{:else if $currentStep === step}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{:else}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{/if}
 {:else if variant === 'circles-text'}
 	{#if $currentStep > step}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{:else if $currentStep === step}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{:else}
-		<span class={finalClass} style={$$props.style}><slot /></span>
+		<span
+			class={finalClass}
+			use:useActions={use}
+			use:forwardEvents
+			{...exclude($$props, ['use', 'class'])}><slot /></span
+		>
 	{/if}
 {/if}
diff --git a/src/lib/components/steps/Step.svelte b/src/lib/components/steps/Step.svelte
@@ -8,6 +8,11 @@
 	import { STEPS_CONTEXT_ID } from './Steps.svelte';
 	import { twMerge } from 'tailwind-merge';
 	import type { Writable } from 'svelte/store';
+	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 step: number;
@@ -59,23 +64,41 @@
 	{#if $currentStep > step}
 		<li data-step={step} class="md:flex-1">
 			<!-- Completed Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<slot name="title" />
 				<slot name="description" />
 			</a>
 		</li>
 	{:else if $currentStep === step}
 		<li data-step={step} class="md:flex-1">
 			<!-- Current Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<slot name="title" />
 				<slot name="description" />
 			</a>
 		</li>
 	{:else}
 		<li data-step={step} class="md:flex-1">
 			<!-- Upcoming Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<slot name="title" />
 				<slot name="description" />
 			</a>
@@ -85,14 +108,26 @@
 	{#if $currentStep > step}
 		<li data-step={step}>
 			<!-- Completed Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<slot name="title" />
 			</a>
 		</li>
 	{:else if $currentStep === step}
 		<li data-step={step}>
 			<!-- Current Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="absolute flex h-5 w-5 p-px">
 					<span class="h-full w-full rounded-full bg-primary opacity-50" />
 				</span>
@@ -103,7 +138,13 @@
 	{:else}
 		<li data-step={step}>
 			<!-- Upcoming Step -->
-			<a on:click {href} class={finalClass} style={$$props.style}>
+			<a
+				{href}
+				class={finalClass}
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<slot name="title" />
 			</a>
 		</li>
@@ -112,7 +153,13 @@
 	{#if $currentStep > step}
 		<li data-step={step}>
 			<!-- Complete Step -->
-			<a on:click {href} class="group">
+			<a
+				{href}
+				class="group"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="flex items-start">
 					<span class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
 						<svg
@@ -135,7 +182,13 @@
 	{:else if $currentStep === step}
 		<li data-step={step}>
 			<!-- Current Step -->
-			<a on:click {href} class="flex items-start">
+			<a
+				{href}
+				class="flex items-start"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
 					<span class="absolute h-4 w-4 rounded-full bg-primary opacity-50" />
 					<span class="relative block h-2 w-2 rounded-full bg-primary" />
@@ -146,7 +199,13 @@
 	{:else}
 		<li data-step={step}>
 			<!-- Upcoming Step -->
-			<a on:click {href} class="group">
+			<a
+				{href}
+				class="group"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<div class="flex items-start">
 					<div class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
 						<div
@@ -163,7 +222,13 @@
 		<li data-step={step} class="relative pb-10">
 			<div class="absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 bg-primary" />
 			<!-- Complete Step -->
-			<a on:click {href} class="group relative flex items-start">
+			<a
+				{href}
+				class="group relative flex items-start"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="flex h-9 items-center">
 					<span
 						class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary group-hover:bg-primary-hover"
@@ -195,7 +260,13 @@
 				class="divider absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 bg-light-border dark:bg-dark-border"
 			/>
 			<!-- Current Step -->
-			<a on:click {href} class="group relative flex items-start">
+			<a
+				{href}
+				class="group relative flex items-start"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="flex h-9 items-center">
 					<span
 						class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-primary bg-light-surface dark:bg-dark-surface"
@@ -216,7 +287,13 @@
 			/>
 
 			<!-- Upcoming Step -->
-			<a on:click {href} class="group relative flex items-start">
+			<a
+				{href}
+				class="group relative flex items-start"
+				use:useActions={use}
+				use:forwardEvents
+				{...exclude($$props, ['use', 'class'])}
+			>
 				<span class="flex h-9 items-center">
 					<span
 						class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 border-light-border dark:border-dark-border bg-light-surface dark:bg-dark-surface group-hover:border-light-border-base dark:group-hover:border-dark-border-base"

diff --git a/src/lib/components/steps/Summary.svelte b/src/lib/components/steps/Summary.svelte
@@ -2,6 +2,11 @@
 	import { STEPS_CONTEXT_ID } from './Steps.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: STEPS_CONTEXT_ID,
@@ -13,4 +18,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<p class={finalClass} style={$$props.style}><slot /></p>
+<p
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
+	<slot />
+</p>