fix(docs): correct clickoutside exclude example

vnphanquang · Mar 15, 2024 · 64a6426 · 64a6426
1 parent cfb7438
commit 64a6426
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/sites/docs/src/routes/docs/(package)/clickoutside/_page/examples/exclude.svelte b/sites/docs/src/routes/docs/(package)/clickoutside/_page/examples/exclude.svelte
@@ -15,10 +15,8 @@
 
 <div class="relative w-full overflow-hidden" bind:this={containerEl}>
 	<div
-		class="absolute inset-y-0 left-0 w-1/3 bg-success-surface text-success-text origin-left scale-x-50 opacity-50 grid place-items-center transition-[opacity,transform]"
-		class:opacity-100={leftOpen}
-		class:scale-x-100={leftOpen}
-		use:clickoutside={{ enabled: rightOpen, limit: { parent: containerEl } }}
+		class="absolute inset-y-0 left-0 w-1/3 bg-success-surface text-success-text origin-left grid place-items-center transition-[opacity,transform] {leftOpen ? 'opacity-100 scale-x-100' : 'opacity-50 scale-x-50'}"
+		use:clickoutside={{ enabled: leftOpen, limit: { parent: containerEl } }}
 		on:clickoutside={toggleLeft}
 	>
 		<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-right"><path d="M18 8L22 12L18 16"/><path d="M2 12H22"/></svg>
@@ -32,8 +30,8 @@
 		</button>
 	</div>
 	<div
-		class="absolute inset-y-0 right-0 w-1/3 bg-error-surface text-error-text origin-right scale-x-50 opacity-50 grid place-items-center"
-		use:clickoutside={{ enabled: leftOpen, limit: { parent: containerEl } }}
+		class="absolute inset-y-0 right-0 w-1/3 bg-error-surface text-error-text origin-right grid place-items-center {rightOpen ? 'opacity-100 scale-x-100' : 'opacity-50 scale-x-50'}"
+		use:clickoutside={{ enabled: rightOpen, limit: { parent: containerEl } }}
 		on:clickoutside={toggleRight}
 	>
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-left"><path d="M6 8L2 12L6 16"/><path d="M2 12H22"/></svg>

diff --git a/sites/docs/src/routes/docs/(package)/clickoutside/_page/examples/quick-start.svelte b/sites/docs/src/routes/docs/(package)/clickoutside/_page/examples/quick-start.svelte
@@ -6,4 +6,4 @@
   }
 </script>
 
-<div use:clickoutside on:clickoutside={doSomething} />
+<div use:clickoutside on:clickoutside={doSomething} />