From 18831d2e3f5d6dde650c28f4bbf6dcd85864f2c3 Mon Sep 17 00:00:00 2001
From: Dallas Hoffman <dallashoff@gmail.com>
Date: Fri, 22 Sep 2023 01:47:44 -0400
Subject: [PATCH] Create Modal component

---
 .vscode/settings.json           |  6 +++-
 src/app.scss                    |  4 +++
 src/lib/components/modal.svelte | 55 +++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/modal.svelte

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 49709b1..3a0d416 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,9 @@
 	"[svelte]": {
 		"editor.defaultFormatter": "svelte.svelte-vscode"
 	},
-	"typescript.tsdk": "node_modules\\typescript\\lib"
+	"typescript.tsdk": "node_modules\\typescript\\lib",
+	"svelte.plugin.svelte.compilerWarnings": {
+		"a11y-no-noninteractive-element-interactions": "ignore",
+		"a11y-click-events-have-key-events": "ignore"
+	}
 }
diff --git a/src/app.scss b/src/app.scss
index b0d221d..5b837c6 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -56,6 +56,10 @@ ol > li {
 	list-style: decimal;
 }
 
+html.modal-is-open {
+	scrollbar-gutter: stable;
+}
+
 body:has(.bytemd-fullscreen) {
 	overflow: hidden;
 }
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
new file mode 100644
index 0000000..211879b
--- /dev/null
+++ b/src/lib/components/modal.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Button from './button.svelte';
+	import FaXmark from '$icon/fa-xmark.svelte';
+
+	export let open: boolean;
+	export let title: string;
+	export let size: 'sm' | 'md' | 'lg' = 'md';
+
+	const maxWidths = {
+		sm: '400px',
+		md: '700px',
+		lg: '1000px',
+	} satisfies Record<typeof size, `${number}px`>;
+
+	$: {
+		const docClassList = document.documentElement.classList;
+		const openClasses = ['modal-is-open', 'modal-is-opening'];
+		docClassList[open ? 'add' : 'remove'](...openClasses);
+	}
+
+	function close() {
+		open = false;
+	}
+</script>
+
+<dialog {open} on:click={close} class="app-modal">
+	<article style:--max-width={maxWidths[size]} on:click|stopPropagation>
+		<header>
+			{title}
+			<div class="app-modal__spacer" />
+			<Button plain icon size="lg" label="Close" tooltipPlacement={null} on:click={close}>
+				<FaXmark />
+			</Button>
+		</header>
+		<slot />
+	</article>
+</dialog>
+
+<style lang="scss">
+	.app-modal {
+		article {
+			max-width: var(--max-width, none);
+		}
+
+		header {
+			font-size: 1.2rem;
+			display: flex;
+			align-items: center;
+		}
+
+		&__spacer {
+			flex-grow: 1;
+		}
+	}
+</style>