fix(Card): class is now reactive

N00nDay · Oct 11, 2022 · 015c948 · 015c948
1 parent 7700d0f
commit 015c948
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 9 deletions.
diff --git a/src/lib/components/card/Action.svelte b/src/lib/components/card/Action.svelte
@@ -28,7 +28,7 @@
 
 	const defaultClass =
 		'group relative w-full h-full cursor-pointer first:rounded-bl-md last:rounded-br-md overflow-hidden';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Actions.svelte b/src/lib/components/card/Actions.svelte
@@ -28,7 +28,7 @@
 
 	const defaultClass =
 		'flex flex-row h-14 justify-evenly divide-x divide-light-icon-background dark:divide-dark-icon-background first:rounded-t-md last:rounded-b-md border border-l-0 border-b-0 border-r-0';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Card.svelte b/src/lib/components/card/Card.svelte
@@ -24,7 +24,7 @@
 
 	const defaultClass =
 		'bg-light-surface text-light-content dark:bg-dark-surface dark:text-dark-content rounded-md';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Content.svelte b/src/lib/components/card/Content.svelte
@@ -16,7 +16,7 @@
 	});
 
 	const defaultClass = 'first:rounded-t-md last:rounded-b-md px-4 py-5 sm:px-6';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Cover.svelte b/src/lib/components/card/Cover.svelte
@@ -26,7 +26,7 @@
 
 	const defaultClass =
 		'mt-[-1px] mr-[-1px] ml-[-1px] last:h-[calc(100%+2px)] first:rounded-t-md last:rounded-b-md overflow-hidden';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Footer.svelte b/src/lib/components/card/Footer.svelte
@@ -19,7 +19,7 @@
 
 	const defaultClass =
 		'px-4 py-5 sm:px-6 h-16 first:rounded-t-md last:rounded-b-md border border-l-0 border-b-0 border-r-0';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div

diff --git a/src/lib/components/card/Header.svelte b/src/lib/components/card/Header.svelte
@@ -25,11 +25,11 @@
 		defaultClass += ' border-b light-border dark:dark-border last:border-b-none';
 	}
 
-	defaultClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div
-	class={defaultClass}
+	class={finalClass}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents

diff --git a/src/lib/components/card/Overlay.svelte b/src/lib/components/card/Overlay.svelte
@@ -25,7 +25,7 @@
 
 	const defaultClass =
 		'bg-light-background bg-opacity-70 dark:bg-opacity-70 dark:bg-dark-background px-4 py-5 sm:px-6 first:rounded-t-md last:rounded-b-md absolute inset-0 flex flex-col';
-	const finalClass = twMerge(defaultClass, $$props.class);
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div