Added elaborate template switching.

components/dialog/dialog.vue

@@ -2,7 +2,7 @@
 	<Teleport to="#container">
 		<div
 			class="dialog-container"
-			@click="emit('close')"
+			@click="close"
 		>
 			<div
 				class="dialog"
@@ -14,11 +14,11 @@
 					<Icon
 						icon="cross2"
 						class="dialog-close"
-						@click="emit('close')"
+						@click="close"
 					/>
 				</div>
 
-				<slot />
+				<slot @event="({ type, data }) => emit('event', { type, data })" />
 			</div>
 		</div>
 	</Teleport>
@@ -27,14 +27,24 @@
 <script setup>
 import { onMounted } from 'vue';
 
-defineProps({
+const props = defineProps({
 	title: {
 		type: String,
 		default: null,
 	},
+	confirmClose: {
+		type: Boolean,
+		default: false,
+	},
 });
 
-const emit = defineEmits(['open', 'close']);
+const emit = defineEmits(['open', 'close', 'event']);
+
+function close() {
+	if (!props.confirmClose || confirm('You have unchanged changes, are you sure you want to close the dialog?')) { // eslint-disable-line no-restricted-globals, no-alert
+		emit('close');
+	}
+}
 
 onMounted(() => emit('open'));
 </script>