Skip to content

Commit

Permalink
use clsx in svelte
Browse files Browse the repository at this point in the history
  • Loading branch information
jrmajor committed Jan 2, 2025
1 parent a9828d2 commit 14ff0c5
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 33 deletions.
6 changes: 4 additions & 2 deletions resources/js/Components/ComboBox/ComboBox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions resources/js/Components/Form/Button.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 5 additions & 2 deletions resources/js/Components/Form/Label.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
7 changes: 5 additions & 2 deletions resources/js/Components/Images/FullSizeImage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
11 changes: 6 additions & 5 deletions resources/js/Components/Images/ResponsiveImage.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
10 changes: 6 additions & 4 deletions resources/js/Pages/Artists/Show.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}/>
Expand Down
13 changes: 7 additions & 6 deletions resources/js/Pages/Tales/Components/Form/ActorsForm.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down

0 comments on commit 14ff0c5

Please sign in to comment.