From 70ebc77f843207a1d4b46c8d960dafbff37e7e2e Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Fri, 17 Jan 2025 13:42:21 +0000
Subject: Initial commit

---
 components/Dialog.vue | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 components/Dialog.vue

(limited to 'components/Dialog.vue')

diff --git a/components/Dialog.vue b/components/Dialog.vue
new file mode 100644
index 0000000..42ba070
--- /dev/null
+++ b/components/Dialog.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+const refDialog = ref<HTMLDialogElement | null>(null);
+
+const props = defineProps<{
+  kind?: 'normal' | 'error';
+  fitContents?: boolean;
+}>();
+
+const showModal = () => {
+  refDialog.value?.showModal();
+  visible.value = true;
+};
+
+const closeModal = () => {
+  refDialog.value?.close();
+};
+
+const emit = defineEmits(['close']);
+
+defineExpose({
+  show: showModal,
+  close: closeModal,
+  visible,
+});
+
+const onClose = () => {
+  visible.value = false;
+  emit('close');
+};
+
+const onDivClick = (e: MouseEvent) => {
+  e.stopPropagation()
+};
+
+const onDialogClick = (e: MouseEvent) => {
+  if (e.target === refDialog.value) {
+    refDialog.value?.close();
+  }
+};
+</script>
+
+<template>
+  <dialog ref="refDialog" @click="onDialogClick" @close="onClose" :class="[props.kind, { fit: props.fitContents }]">
+    <div @click="onDivClick">
+      <form v-if="visible" method="dialog">
+        <slot />
+      </form>
+    </div>
+  </dialog>
+</template>
+
+
+<style scoped>
+dialog {
+  outline: none;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  width: 1000px;
+  margin: 0;
+  top: 80px;
+  max-height: calc(100vh - 160px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+dialog.normal {
+  border: 2px solid var(--color-border);
+  background-color: var(--color-background);
+}
+
+dialog.error {
+  border: 2px solid var(--color-background-error-dark);
+  background-color: var(--color-background-error);
+  color: white;
+}
+
+dialog.fit {
+  width: fit-content;
+  max-width: 1000px;
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(4px);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+div.actions {
+  display: flex;
+  margin-top: 12px;
+  gap: 8px;
+  justify-content: flex-end;
+}
+</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2