Dev branch

resources/js/Components/DialogModal.vue

@@ -1,47 +1,76 @@
 <script setup>
-import Modal from './Modal.vue';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/Components/ui/dialog';
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits(['close']);
-
-defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
-    maxWidth: {
-        type: String,
-        default: '2xl',
-    },
-    closeable: {
-        type: Boolean,
-        default: true,
-    },
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  maxWidth: {
+    type: String,
+    default: '2xl',
+  },
+  closeable: {
+    type: Boolean,
+    default: true,
+  },
 });
 
-const close = () => {
+const emit = defineEmits(['update:show', 'close']);
+
+const open = ref(props.show);
+
+watch(() => props.show, (newVal) => {
+  open.value = newVal;
+});
+
+watch(open, (newVal) => {
+  emit('update:show', newVal);
+  if (!newVal) {
     emit('close');
-};
+  }
+});
+
+const maxWidthClass = computed(() => {
+  const maxWidthMap = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    wide: 'sm:max-w-[1200px]',
+  };
+  return maxWidthMap[props.maxWidth] || 'sm:max-w-2xl';
+});
 </script>
 
 <template>
-    <Modal
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close"
-    >
-        <div class="px-6 py-4">
-            <div class="text-lg font-medium text-gray-900">
-                <slot name="title" />
-            </div>
+  <Dialog v-model:open="open" :modal="true">
+    <DialogContent :class="maxWidthClass">
+      <DialogHeader>
+        <DialogTitle>
+          <slot name="title" />
+        </DialogTitle>
+        <DialogDescription>
+          <slot name="description" />
+        </DialogDescription>
+      </DialogHeader>
 
-            <div class="mt-4 text-sm text-gray-600">
-                <slot name="content" />
-            </div>
-        </div>
+      <div class="py-4">
+        <slot name="content" />
+      </div>
 
-        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-end">
-            <slot name="footer" />
-        </div>
-    </Modal>
+      <DialogFooter>
+        <slot name="footer" />
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>