From e9cbb09bc536bdf30a6ca021f4862b3ca1fc4f89 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 20:08:43 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat=20(pub):=20add=20base=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/pub/base/modal/modal.vue | 51 +++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 app/components/pub/base/modal/modal.vue

diff --git a/app/components/pub/base/modal/modal.vue b/app/components/pub/base/modal/modal.vue
new file mode 100644
index 00000000..147079e5
--- /dev/null
+++ b/app/components/pub/base/modal/modal.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Dialog } from '~/components/pub/ui/dialog'
+
+interface DialogProps {
+  title: string
+  description?: string
+  preventOutside?: boolean
+  open?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+}
+const props = withDefaults(defineProps<DialogProps>(), {
+  preventOutside: false,
+  open: false,
+  size: 'md',
+})
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const sizeClass = computed(() => {
+  const sizeMap = {
+    sm: 'sm:max-w-[350px]',
+    md: 'sm:max-w-[425px]',
+    lg: 'sm:max-w-[600px]',
+    xl: 'sm:max-w-[800px]',
+    full: 'sm:max-w-[95vw]',
+  }
+  return sizeMap[props.size]
+})
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value),
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent
+      :class="sizeClass"
+      @interact-outside="(e: any) => preventOutside && e.preventDefault()"
+      @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
+    >
+      <DialogHeader>
+        <DialogTitle>{{ props.title }}</DialogTitle>
+        <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
+      </DialogHeader>
+      <slot />
+    </DialogContent>
+  </Dialog>
+</template>