From 0248517c6845a6c755d40c89d3d769ce7d60bd03 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Thu, 23 Jan 2025 15:59:58 +0000
Subject: Some more shit

---
 components/Dialog.vue | 41 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 7 deletions(-)

(limited to 'components/Dialog.vue')

diff --git a/components/Dialog.vue b/components/Dialog.vue
index 3d91de0..7772f23 100644
--- a/components/Dialog.vue
+++ b/components/Dialog.vue
@@ -7,6 +7,7 @@ const refDialog = ref<HTMLDialogElement | null>(null);
 const props = defineProps<{
   kind?: 'normal' | 'error';
   fitContents?: boolean;
+  title?: string;
 }>();
 
 const showModal = () => {
@@ -18,7 +19,7 @@ const closeModal = () => {
   refDialog.value?.close();
 };
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'submit']);
 
 defineExpose({
   show: showModal,
@@ -31,6 +32,15 @@ const onClose = () => {
   emit('close');
 };
 
+const onSubmit = (e: Event) => {
+  e.preventDefault();
+  const formData = new FormData(e.target as HTMLFormElement);
+  const formValue = Object.fromEntries(formData.entries());
+  emit('submit', formValue);
+  
+  closeModal();
+};
+
 const onDivClick = (e: MouseEvent) => {
   e.stopPropagation()
 };
@@ -43,10 +53,16 @@ const onDialogClick = (e: MouseEvent) => {
 </script>
 
 <template>
-  <dialog ref="refDialog" @click="onDialogClick" @close="onClose" :class="[props.kind, { fit: props.fitContents }]">
+  <dialog ref="refDialog" @click="onDialogClick" @close="onClose" @submit="onSubmit" :class="[props.kind ?? 'normal', { fit: props.fitContents }]">
     <div @click="onDivClick">
       <form v-if="visible" method="dialog">
+        <div class="title" v-if="title">{{ props.title }}</div>
+
         <slot />
+        
+        <div class="actions" v-if="$slots.actions">
+          <slot name="actions" class="actions" />
+        </div>
       </form>
     </div>
   </dialog>
@@ -72,8 +88,8 @@ dialog.normal {
 }
 
 dialog.error {
-  border: 2px solid var(--color-border-error);
-  background-color: var(--color-error);
+  border: 2px solid var(--color-border-error-light);
+  background-color: var(--color-error-light);
 }
 
 dialog.fit {
@@ -86,10 +102,21 @@ dialog::backdrop {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-div.actions {
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+div.title {
+  font-size: var(--text-larger);
+  font-weight: 700;
+}
+
+.actions {
   display: flex;
-  margin-top: 12px;
-  gap: 8px;
+  gap: 1rem;
+  align-self: flex-end;
   justify-content: flex-end;
 }
 </style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2