From 9430c0649c0f0ab64557bb266765311edd9883be Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:36:32 +0700
Subject: [PATCH] feat: add dialog from container component

---
 src/components/dialog/DialogFormContainer.vue | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/components/dialog/DialogFormContainer.vue

diff --git a/src/components/dialog/DialogFormContainer.vue b/src/components/dialog/DialogFormContainer.vue
new file mode 100644
index 00000000..bad4d305
--- /dev/null
+++ b/src/components/dialog/DialogFormContainer.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const props = defineProps<{
+  width?: string;
+  height?: string;
+  maxWidth?: string;
+  footer?: boolean;
+  // Cannot emit as it cannot control when user wanted to interrupt close state (e.g. remain open)
+  onClose?: (fn: (state?: boolean) => void, ...args: unknown[]) => void;
+  onOpen?: (fn: (state?: boolean) => void, ...args: unknown[]) => void;
+}>();
+defineEmits<{
+  (e: 'submit', v: Event | SubmitEvent): void;
+}>();
+
+function update(value: boolean) {
+  if (value === false) {
+    if (props.onClose) {
+      props.onClose((v) => (state.value = v === undefined ? false : v));
+    } else {
+      state.value = false;
+    }
+  }
+}
+
+const state = defineModel({ default: false });
+</script>
+
+<template>
+  <q-dialog
+    :model-value="state"
+    @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"
+      :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>
+
+        <!-- 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>
+        </div>
+      </div>
+    </q-form>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.form-header {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.dialog-body {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-footer {
+  border-top: 1px solid var(--border-color);
+}
+</style>