feat(popup): close on outer click

1 files changed, 27 insertions, 0 deletions

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}