From d3fd29f21145a68314ad9315342f6e4ff2fb6ab9 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 4 Feb 2024 23:08:29 -0800
Subject: feat(popup): close on outer click

---
 src/lib/Popup.svelte | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/lib/Popup.svelte

(limited to 'src/lib/Popup.svelte')

diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
new file mode 100644
index 00000000..3d31a66e
--- /dev/null
+++ b/src/lib/Popup.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let onLeave = () => {
+		return;
+	};
+	export let card = true;
+	export let smallCard = false;
+	export let fullscreen = false;
+	export let show = true;
+
+	const handleClickOutside = (event: any) => {
+		if (event.target.classList.contains('popup')) {
+			show = false;
+
+			onLeave();
+		}
+	};
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+{#if show}
+	<div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}>
+		<span class={card ? `card ${smallCard ? 'card-small' : ''}` : ''}>
+			<slot />
+		</span>
+	</div>
+{/if}
-- 
cgit v1.2.3