From 14ff0c507b47ed2abcbaf40b12130dbb6872762f Mon Sep 17 00:00:00 2001
From: Jeremiasz Major <jrh.mjr@gmail.com>
Date: Thu, 2 Jan 2025 01:07:26 +0100
Subject: [PATCH] use clsx in svelte

---
 resources/js/Components/ComboBox/ComboBox.svelte  |  6 ++++--
 resources/js/Components/Form/Button.svelte        | 15 ++++++++-------
 resources/js/Components/Form/Label.svelte         |  7 +++++--
 .../js/Components/Images/FullSizeImage.svelte     |  7 +++++--
 .../js/Components/Images/ResponsiveImage.svelte   | 11 ++++++-----
 .../Components/Form/FormExternalPhoto.svelte      | 10 +++++-----
 resources/js/Pages/Artists/Show.svelte            | 10 ++++++----
 .../Pages/Tales/Components/Form/ActorsForm.svelte | 13 +++++++------
 8 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/resources/js/Components/ComboBox/ComboBox.svelte b/resources/js/Components/ComboBox/ComboBox.svelte
index e55d8fb6..8c6ec74b 100644
--- a/resources/js/Components/ComboBox/ComboBox.svelte
+++ b/resources/js/Components/ComboBox/ComboBox.svelte
@@ -123,8 +123,10 @@
 				<li
 					onmouseover={() => hoveredIndex = index}
 					onclick={() => select(result)}
-					class="flex justify-between py-1 px-3 w-full text-left text-gray-800 select-none"
-					class:bg-gray-200={hoveredIndex === index}
+					class={[
+						'flex justify-between py-1 px-3 w-full text-left text-gray-800 select-none',
+						hoveredIndex === index && 'bg-gray-200',
+					]}
 				>
 					<span>{result.label}</span>
 					<span class="text-gray-800">{value === result.value ? '✓ ' : ''}</span>
diff --git a/resources/js/Components/Form/Button.svelte b/resources/js/Components/Form/Button.svelte
index 77c6fd8b..840fde19 100644
--- a/resources/js/Components/Form/Button.svelte
+++ b/resources/js/Components/Form/Button.svelte
@@ -19,13 +19,14 @@
 		children: Snippet;
 	} = $props();
 
-	let classes = $derived(`
-		py-2 px-4 text-sm font-medium tracking-wide rounded-full shadow-md
-		${danger || 'bg-white dark:bg-gray-800'}
-		${danger && 'text-red-100 bg-red-700 hover:bg-red-600 active:bg-red-800'}
-		transition-colors duration-150 ease out
-		${className}
-	`);
+	let classes = $derived([
+		'rounded-full px-4 py-2 text-sm font-medium tracking-wide shadow-md',
+		danger
+			? 'bg-red-700 text-red-100 hover:bg-red-600 active:bg-red-800'
+			: 'bg-white dark:bg-gray-800',
+		'ease-out transition-colors duration-150',
+		className,
+	]);
 </script>
 
 {#if inertiaProp}
diff --git a/resources/js/Components/Form/Label.svelte b/resources/js/Components/Form/Label.svelte
index 89341e03..9e555b57 100644
--- a/resources/js/Components/Form/Label.svelte
+++ b/resources/js/Components/Form/Label.svelte
@@ -16,8 +16,11 @@
 
 <label
 	for={forId}
-	class="{inline ? 'pr-1' : 'pb-1 w-full'} font-medium text-gray-700 dark:text-gray-400"
-	class:text-sm={small}
+	class={[
+		'font-medium text-gray-700 dark:text-gray-400',
+		inline ? 'pr-1' : 'pb-1 w-full',
+		small && 'text-sm',
+	]}
 >
 	{@render children()}
 </label>
diff --git a/resources/js/Components/Images/FullSizeImage.svelte b/resources/js/Components/Images/FullSizeImage.svelte
index 30685944..9b68be74 100644
--- a/resources/js/Components/Images/FullSizeImage.svelte
+++ b/resources/js/Components/Images/FullSizeImage.svelte
@@ -32,8 +32,11 @@
 	bind:this={element}
 	onload={unhideImage}
 	loading="lazy"
-	class="size-full { transitionClass ? 'transition-opacity duration-300' : '' }"
-	class:opacity-0={isHidden}
+	class={{
+		'size-full': true,
+		'opacity-0': isHidden,
+		'transition-opacity duration-300': transitionClass,
+	}}
 	{src}
 	{alt}
 >
diff --git a/resources/js/Components/Images/ResponsiveImage.svelte b/resources/js/Components/Images/ResponsiveImage.svelte
index 86afcda5..5678d5a2 100644
--- a/resources/js/Components/Images/ResponsiveImage.svelte
+++ b/resources/js/Components/Images/ResponsiveImage.svelte
@@ -47,11 +47,12 @@
 	bind:this={element}
 	onload={unhideImage}
 	loading={eager ? 'eager' : 'lazy'}
-	class="
-		size-{size} object-center object-cover {className}
-		{ transitionClass ? 'transition-opacity duration-300' : '' }
-	"
-	class:opacity-0={isHidden}
+	class={[
+		`size-${size} object-center object-cover`,
+		isHidden && 'opacity-0',
+		transitionClass && 'transition-opacity duration-300',
+		className,
+	]}
 	{src}
 	srcset="
 		{resizedImageUrl(src, calculatedImageSize)} 1x,
diff --git a/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte b/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
index 44be72ee..c8b68524 100644
--- a/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
+++ b/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
@@ -41,11 +41,11 @@
 	</div>
 
 	<div
-		class="
-			absolute inset-0 rounded-lg group-focus:inset-ring-4 group-focus:inset-ring-brand-lighter
-			transition-all duration-300
-			{isSelected ? 'inset-ring-4 inset-ring-brand-primary' : ''}
-		"
+		class={[
+			'absolute inset-0 rounded-lg group-focus:inset-ring-4 group-focus:inset-ring-brand-lighter',
+			'transition-all duration-300',
+			isSelected && 'inset-ring-4 inset-ring-brand-primary',
+		]}
 	></div>
 </button>
 
diff --git a/resources/js/Pages/Artists/Show.svelte b/resources/js/Pages/Artists/Show.svelte
index 4f7cf890..bae00400 100644
--- a/resources/js/Pages/Artists/Show.svelte
+++ b/resources/js/Pages/Artists/Show.svelte
@@ -71,10 +71,12 @@
 		{/if}
 
 		<div
-			class="flex grow flex-col justify-between space-y-3"
-			class:sm:py-2={hasPhoto}
-			class:self-stretch={hasExtract}
-			class:items-center={!hasPhoto && !hasExtract}
+			class={{
+				'flex grow flex-col justify-between space-y-3': true,
+				'sm:py-2': hasPhoto,
+				'self-stretch': hasExtract,
+				'items-center': !hasPhoto && !hasExtract,
+			}}
 		>
 			<div class="hidden sm:block">
 				<Title text={artist.name} href={route('artists.edit', { artist })} hrefIf={!!user}/>
diff --git a/resources/js/Pages/Tales/Components/Form/ActorsForm.svelte b/resources/js/Pages/Tales/Components/Form/ActorsForm.svelte
index 0054d5bc..ef29713f 100644
--- a/resources/js/Pages/Tales/Components/Form/ActorsForm.svelte
+++ b/resources/js/Pages/Tales/Components/Form/ActorsForm.svelte
@@ -143,12 +143,13 @@
 		{#each $form.actors as actor, index (actor.key)}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="flex items-center gap-2 w-full"
-				class:opacity-0={actor.isDragged}
-				class:pt-12={actor.isDraggedOver === 'fromBelow' || actor.hasDeletedElement === 'above'}
-				class:pb-12={actor.isDraggedOver === 'fromAbove' || actor.hasDeletedElement === 'below'}
-				class:transition-all={!actor.noTransitions}
-				class:duration-300={!actor.noTransitions}
+				class={{
+					'flex items-center gap-2 w-full': true,
+					'opacity-0': actor.isDragged,
+					'pt-12': actor.isDraggedOver === 'fromBelow' || actor.hasDeletedElement === 'above',
+					'pb-12': actor.isDraggedOver === 'fromAbove' || actor.hasDeletedElement === 'below',
+					'transition-all duration-300': !actor.noTransitions,
+				}}
 				draggable="true"
 				ondragstart={(e) => onDragStart(e, index)}
 				ondragend={() => onDragEnd(index)}