fix(AvatarGroup): forward all events including child components

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

Hide file tree

Showing 5 changed files with 62 additions and 8 deletions.
diff --git a/src/lib/components/avatar-group/Avatar.svelte b/src/lib/components/avatar-group/Avatar.svelte
@@ -3,13 +3,16 @@
 </script>
 
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import { AVATAR_GROUP_CONTEXT_ID } from './AvatarGroup.svelte';
 	import { useContext } from '../../utils/useContext';
-	import { browser } from '$app/environment';
 	import { setContext, getContext, onMount } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import Placeholder from './Placeholder.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 src: string | undefined = undefined;
 	export let alt = 'avatar';
@@ -94,7 +97,12 @@
 </script>
 
 {#if src}
-	<span class={finalContainerClass} style={$$props.style}>
+	<span
+		class={finalContainerClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
+	>
 		{#if loaded}
 			<img class={finalClass} style={$$props.style} src={src || ''} {alt} />
 		{:else if failed}
@@ -110,7 +118,12 @@
 		<slot name="indicator" />
 	</span>
 {:else if initials}
-	<span class={finalClass} style={$$props.style}>
+	<span
+		class={finalClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
+	>
 		<span
 			class="font-bold leading-none text-current"
 			class:text-xs={size === 'xs'}

diff --git a/src/lib/components/avatar-group/AvatarGroup.svelte b/src/lib/components/avatar-group/AvatarGroup.svelte
@@ -5,6 +5,11 @@
 <script lang="ts">
 	import { setContext } from 'svelte/internal';
 	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 shape: 'circle' | 'rounded' | 'square' = 'circle';
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
@@ -26,6 +31,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style}>
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	<slot />
 </div>
diff --git a/src/lib/components/avatar-group/Icon.svelte b/src/lib/components/avatar-group/Icon.svelte
@@ -6,6 +6,11 @@
 	import { getContext } from 'svelte/internal';
 	import { useContext } from '../../utils/useContext';
 	import type { MaterialIcon } from '../../types';
+	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 = 'person';
 
@@ -44,6 +49,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style}>
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	{icon}
 </span>
diff --git a/src/lib/components/avatar-group/Indicator.svelte b/src/lib/components/avatar-group/Indicator.svelte
@@ -3,6 +3,11 @@
 	import { getContext } from 'svelte/internal';
 	import { AVATAR_GROUP_AVATAR_CONTEXT_ID } from './Avatar.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 placement: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' = 'top-right';
 
@@ -58,4 +63,9 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<span class={finalClass} style={$$props.style} />
+<span
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+/>
diff --git a/src/lib/components/avatar-group/Placeholder.svelte b/src/lib/components/avatar-group/Placeholder.svelte
@@ -10,6 +10,11 @@
 	import { getContext, setContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from './Icon.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 loading = false;
 
@@ -40,7 +45,13 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div transition:fade|local class={finalClass} style={$$props.style}>
+<div
+	transition:fade|local
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
 	{#if $$slots.icon || $$slots.default}
 		<slot name="icon" />
 		<slot />