From ff103168983183a82adb4fe6ae045b704fdcbc67 Mon Sep 17 00:00:00 2001
From: Craig Howell <craighowell@craigs-mbp.lan>
Date: Sun, 2 Oct 2022 13:50:22 -0400
Subject: [PATCH] fix(Accordion.Item.Title): replaced on:click with
 forwardEvents to catch all actions fix(Alert): made properties class and type
 reactive fix(Alert.Icon): made properties class and type reactive
 fix(Alert.Title): made properties class and type reactive
 fix(Alert.Description): properties class and type reactive

---
 src/lib/components/accordion/Title.svelte   | 15 ++++++++++-
 src/lib/components/alert/Alert.svelte       | 23 ++++++++++------
 src/lib/components/alert/Description.svelte | 29 +++++++++++++--------
 src/lib/components/alert/Icon.svelte        | 25 ++++++++++--------
 src/lib/components/alert/Title.svelte       | 19 ++++++++------
 5 files changed, 72 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/accordion/Title.svelte b/src/lib/components/accordion/Title.svelte
index 0ef14f0f..328df385 100644
--- a/src/lib/components/accordion/Title.svelte
+++ b/src/lib/components/accordion/Title.svelte
@@ -5,6 +5,11 @@
 	import { ACCORDION_ITEM_CONTEXT_ID } from './Item.svelte';
 	import { useContext } from '../../utils/useContext';
 	import type { Writable } from 'svelte/store';
+	import { current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	import { exclude } from '../../utils/exclude';
+	export let use: ActionArray = [];
+	const forwardEvents = forwardEventsBuilder(current_component);
 
 	useContext({
 		context_id: ACCORDION_CONTEXT_ID,
@@ -25,7 +30,15 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<button on:click class={finalClass} style={$$props.style} type="button">
+<!-- TODO: replace on:click with forwardEventsBuilder -->
+<button
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+	class={finalClass}
+	style={$$props.style}
+	type="button"
+>
 	<slot />
 	<span class="material-icons transition-transform duration-300" class:-rotate-180={$open}
 		>expand_more</span
diff --git a/src/lib/components/alert/Alert.svelte b/src/lib/components/alert/Alert.svelte
index 804b948b..db8646cb 100644
--- a/src/lib/components/alert/Alert.svelte
+++ b/src/lib/components/alert/Alert.svelte
@@ -5,25 +5,32 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
 
 	export let type: 'info' | 'warn' | 'success' | 'error' = 'info';
+	let reactiveType = writable(type);
+	$: $reactiveType = type;
 
 	setContext(ALERT_CONTEXT_ID, {
 		alert: true,
-		type
+		type: reactiveType
 	});
 
-	let defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150';
-	if (type === 'info') {
-		defaultClass += ' bg-info-background';
+	let defaultClass = '';
+	$: if (type === 'info') {
+		defaultClass =
+			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-info-background';
 	} else if (type === 'warn') {
-		defaultClass += ' bg-warn-background';
+		defaultClass =
+			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-warn-background';
 	} else if (type === 'success') {
-		defaultClass += ' bg-success-background';
+		defaultClass =
+			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-success-background';
 	} else if (type === 'error') {
-		defaultClass += ' bg-error-background';
+		defaultClass =
+			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-error-background';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div class={finalClass} style={$$props.style}>
diff --git a/src/lib/components/alert/Description.svelte b/src/lib/components/alert/Description.svelte
index ac223e36..b7b43114 100644
--- a/src/lib/components/alert/Description.svelte
+++ b/src/lib/components/alert/Description.svelte
@@ -1,21 +1,28 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 	import { ALERT_CONTEXT_ID } from './Alert.svelte';
 
-	const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
+	const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
+		getContext(ALERT_CONTEXT_ID);
 
-	let defaultClass = 'mt-2 text-sm transition-all duration-150';
-	if (type === 'info') {
-		defaultClass += ' text-info-secondary-content dark:text-dark-info-secondary-content';
-	} else if (type === 'warn') {
-		defaultClass += ' text-warn-secondary-content dark:text-dark-warn-secondary-content';
-	} else if (type === 'success') {
-		defaultClass += ' text-success-secondary-content dark:text-dark-success-secondary-content';
-	} else if (type === 'error') {
-		defaultClass += ' text-error-secondary-content dark:text-dark-error-secondary-content=';
+	// TODO: make clsses reactive
+	let defaultClass = '';
+	$: if ($type === 'info') {
+		defaultClass =
+			'mt-2 text-sm transition-all duration-150 text-info-secondary-content dark:text-dark-info-secondary-content';
+	} else if ($type === 'warn') {
+		defaultClass =
+			'mt-2 text-sm transition-all duration-150 text-warn-secondary-content dark:text-dark-warn-secondary-content';
+	} else if ($type === 'success') {
+		defaultClass =
+			'mt-2 text-sm transition-all duration-150 text-success-secondary-content dark:text-dark-success-secondary-content';
+	} else if ($type === 'error') {
+		defaultClass =
+			'mt-2 text-sm transition-all duration-150 text-error-secondary-content dark:text-dark-error-secondary-content=';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div class={finalClass} style={$$props.style}>
diff --git a/src/lib/components/alert/Icon.svelte b/src/lib/components/alert/Icon.svelte
index 57af3b95..810c8dbf 100644
--- a/src/lib/components/alert/Icon.svelte
+++ b/src/lib/components/alert/Icon.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
 	import { twMerge } from 'tailwind-merge';
 	import { ALERT_CONTEXT_ID } from './Alert.svelte';
 
-	const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
+	const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
+		getContext(ALERT_CONTEXT_ID);
 
-	let defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center';
-	if (type === 'info') {
-		defaultClass += ' text-info-icon';
-	} else if (type === 'warn') {
-		defaultClass += ' text-warn-icon';
-	} else if (type === 'success') {
-		defaultClass += ' text-success-icon';
-	} else if (type === 'error') {
-		defaultClass += ' text-error-icon';
+	// TODO: make clsses reactive
+	let defaultClass = '';
+	$: if ($type === 'info') {
+		defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-info-icon';
+	} else if ($type === 'warn') {
+		defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-warn-icon';
+	} else if ($type === 'success') {
+		defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-success-icon';
+	} else if ($type === 'error') {
+		defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-error-icon';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div class={finalClass} style={$$props.style}>
diff --git a/src/lib/components/alert/Title.svelte b/src/lib/components/alert/Title.svelte
index edcb5f49..7fb4704c 100644
--- a/src/lib/components/alert/Title.svelte
+++ b/src/lib/components/alert/Title.svelte
@@ -5,18 +5,21 @@
 
 	const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
 
-	let defaultClass =
-		'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150';
-	if (type === 'info') {
-		defaultClass += ' text-info-content dark:text-dark-info-content';
+	let defaultClass = '';
+	$: if (type === 'info') {
+		defaultClass =
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-info-content dark:text-dark-info-content';
 	} else if (type === 'warn') {
-		defaultClass += ' text-warn-content dark:text-dark-warn-content';
+		defaultClass =
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-warn-content dark:text-dark-warn-content';
 	} else if (type === 'success') {
-		defaultClass += ' text-success-content dark:text-dark-success-content';
+		defaultClass =
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-success-content dark:text-dark-success-content';
 	} else if (type === 'error') {
-		defaultClass += ' text-error-content dark:text-dark-error-content';
+		defaultClass =
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-error-content dark:text-dark-error-content';
 	}
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <h3 class={finalClass} style={$$props.style}>