refactor: dialog spacing

src/components/dialog/DialogContainer.vue

@@ -40,7 +40,7 @@ const state = defineModel({ default: false });
     >
       <div class="column full-height">
         <!-- NOTE: DIALOG HEADER -->
-        <div class="form-header q-py-sm q-px-lg">
+        <div class="form-header q-py-sm q-px-md">
           <slot name="header" />
         </div>
 
@@ -55,7 +55,7 @@ const state = defineModel({ default: false });
         <!-- NOTE: DIALOG FOOTER -->
         <div
           v-if="footer || $slots.footer"
-          class="dialog-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
+          class="dialog-footer row items-center full-width justify-between q-px-md q-py-sm surface-1"
         >
           <slot name="footer"></slot>
         </div>

src/components/dialog/DialogFormContainer.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 }>();
 defineEmits<{
   (e: 'submit', v: Event | SubmitEvent): void;
+  (e: 'reset'): void;
 }>();
 
 function update(value: boolean) {
@@ -31,41 +32,47 @@ const state = defineModel({ default: false });
     @update:model-value="update"
     @before-show="() => onOpen?.((v) => (state = v === undefined ? true : v))"
   >
-    <q-form
-      @submit.prevent="(e) => $emit('submit', e)"
-      greedy
-      class="surface-1 rounded"
+    <div
       :style="{
-        borderRadius: 'var(--radius-2)',
         padding: '0',
         width: $q.screen.xs ? '100%' : width ? width : '85%',
         height: height ? height : 'calc(100vh - 64px)',
         maxWidth: $q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%',
       }"
     >
-      <div class="column full-height">
-        <!-- NOTE: DIALOG HEADER -->
-        <div class="form-header q-py-sm q-px-lg">
-          <slot name="header" />
-        </div>
+      <q-form
+        @submit.prevent="(e) => $emit('submit', e)"
+        @reset="$emit('reset')"
+        greedy
+        class="surface-1 rounded full-height full-width"
+        :style="{
+          borderRadius: 'var(--radius-2)',
+        }"
+      >
+        <div class="column full-height">
+          <!-- NOTE: DIALOG HEADER -->
+          <div class="form-header q-py-sm q-px-md">
+            <slot name="header" />
+          </div>
 
-        <!-- NOTE: DIALOG BODY -->
-        <div
-          class="col full-height column full-width"
-          :class="{ dark: $q.dark.isActive }"
-        >
-          <slot />
-        </div>
+          <!-- NOTE: DIALOG BODY -->
+          <div
+            class="col full-height column full-width"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            <slot />
+          </div>
 
-        <!-- NOTE: DIALOG FOOTER -->
-        <div
-          v-if="footer || $slots.footer"
-          class="dialog-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
-        >
-          <slot name="footer"></slot>
+          <!-- NOTE: DIALOG FOOTER -->
+          <div
+            v-if="footer || $slots.footer"
+            class="dialog-footer row items-center full-width justify-between q-px-md q-py-sm surface-1"
+          >
+            <slot name="footer"></slot>
+          </div>
         </div>
-      </div>
-    </q-form>
+      </q-form>
+    </div>
   </q-dialog>
 </template>
 

src/components/dialog/DialogHeader.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { CancelButton } from 'components/button';
+
 defineProps<{
   title: string;
 }>();
@@ -11,18 +13,7 @@ defineProps<{
       {{ title }}
       <slot name="title-after" />
     </div>
-    <q-btn
-      round
-      flat
-      unelevated
-      icon="mdi-close"
-      padding="xs"
-      class="dialog-header-close"
-      :class="{ dark: $q.dark.isActive }"
-      v-close-popup
-    >
-      <q-tooltip>{{ $t('close') }}</q-tooltip>
-    </q-btn>
+    <CancelButton icon-only v-close-popup />
   </div>
 </template>
 

src/components/dialog/index.ts

@@ -1,2 +1,3 @@
 export { default as DialogContainer } from './DialogContainer.vue';
+export { default as DialogFormContainer } from './DialogFormContainer.vue';
 export { default as DialogHeader } from './DialogHeader.vue';