standardize conditional rendering across components to prevent out tr…

…ansition bug during navigation #340
huntabyte · Feb 22, 2024 · 2f543b1 · 2f543b1
1 parent 7050412
commit 2f543b1
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 88 deletions.
diff --git a/src/lib/bits/accordion/components/accordion-content.svelte b/src/lib/bits/accordion/components/accordion-content.svelte
@@ -32,32 +32,49 @@
 	$: Object.assign(builder, attrs);
 </script>
 
-{#if asChild && $isSelected(props)}
-	<slot {builder} />
-{:else if transition && $isSelected(props)}
-	<div bind:this={el} transition:transition={transitionConfig} use:melt={builder} {...$$restProps}>
+{#if $isSelected(props)}
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $isSelected(props)}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $isSelected(props)}
-	<div bind:this={el} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $isSelected(props)}
-	<div bind:this={el} out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if $isSelected(props)}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div
+			bind:this={el}
+			transition:transition|global={transitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			bind:this={el}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div bind:this={el} use:melt={builder} {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}
diff --git a/src/lib/bits/menu/components/menu-sub-content.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -63,66 +63,68 @@
 	});
 </script>
 
-{#if asChild && $subOpen}
-	<slot {builder} />
-{:else if transition && $subOpen}
-	<div
-		bind:this={el}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
+{#if $subOpen}
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $subOpen}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $subOpen}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $subOpen}
-	<div
-		bind:this={el}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if $subOpen}
-	<div
-		bind:this={el}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div
+			bind:this={el}
+			transition:transition|global={transitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			bind:this={el}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div
+			bind:this={el}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}