From 17fee03f6d1b5a3857c50163fd78fc45927afe68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <mrsebastienleblanc@icloud.com>
Date: Tue, 5 Nov 2024 17:08:52 -0500
Subject: [PATCH] Backport template too

---
 .../resources/js/Components/Modal.vue         | 77 ++++++++-----------
 .../resources/js/Components/Modal.vue         | 75 ++++++++----------
 2 files changed, 63 insertions(+), 89 deletions(-)

diff --git a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
index 00c6e7f7..b4a677ae 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = withDefaults(
     defineProps<{
@@ -15,15 +15,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(['close']);
+const dialog = ref();
 const showSlot = ref(props.show);
 
 watch(() => props.show, () => {
     if (props.show) {
         document.body.style.overflow = 'hidden';
         showSlot.value = true;
+        dialog.value?.showModal();
     } else {
         document.body.style.overflow = null;
         setTimeout(() => {
+            dialog.value?.close();
             showSlot.value = false;
         }, 200);
     }
@@ -64,49 +67,33 @@ const maxWidthClass = computed(() => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition leave-active-class="duration-200">
-            <div
-                v-show="show"
-                class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0"
-                scroll-region
+    <dialog class="z-50 m-0 min-h-full min-w-full overflow-y-auto bg-transparent backdrop:bg-transparent" ref="dialog">
+        <div class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
             >
-                <Transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0"
-                    enter-to-class="opacity-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100"
-                    leave-to-class="opacity-0"
-                >
-                    <div
-                        v-show="show"
-                        class="fixed inset-0 transform transition-all"
-                        @click="close"
-                    >
-                        <div
-                            class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900"
-                        />
-                    </div>
-                </Transition>
+                <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                    <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
+                </div>
+            </Transition>
 
-                <Transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <div
-                        v-show="show"
-                        class="mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:mx-auto sm:w-full dark:bg-gray-800"
-                        :class="maxWidthClass"
-                    >
-                        <slot v-if="showSlot" />
-                    </div>
-                </Transition>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+                <div v-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
+                    <slot v-if="showSlot"/>
+                </div>
+            </Transition>
+        </div>
+    </dialog>
+</template>
\ No newline at end of file
diff --git a/stubs/inertia-vue/resources/js/Components/Modal.vue b/stubs/inertia-vue/resources/js/Components/Modal.vue
index d5d87044..9007f1d0 100644
--- a/stubs/inertia-vue/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue/resources/js/Components/Modal.vue
@@ -17,15 +17,18 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['close']);
+const dialog = ref();
 const showSlot = ref(props.show);
 
 watch(() => props.show, () => {
     if (props.show) {
         document.body.style.overflow = 'hidden';
         showSlot.value = true;
+        dialog.value?.showModal();
     } else {
         document.body.style.overflow = null;
         setTimeout(() => {
+            dialog.value?.close();
             showSlot.value = false;
         }, 200);
     }
@@ -66,49 +69,33 @@ const maxWidthClass = computed(() => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Transition leave-active-class="duration-200">
-            <div
-                v-show="show"
-                class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0"
-                scroll-region
+    <dialog class="z-50 m-0 min-h-full min-w-full overflow-y-auto bg-transparent backdrop:bg-transparent" ref="dialog">
+        <div class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
             >
-                <Transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0"
-                    enter-to-class="opacity-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100"
-                    leave-to-class="opacity-0"
-                >
-                    <div
-                        v-show="show"
-                        class="fixed inset-0 transform transition-all"
-                        @click="close"
-                    >
-                        <div
-                            class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900"
-                        />
-                    </div>
-                </Transition>
+                <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
+                    <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75" />
+                </div>
+            </Transition>
 
-                <Transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <div
-                        v-show="show"
-                        class="mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:mx-auto sm:w-full dark:bg-gray-800"
-                        :class="maxWidthClass"
-                    >
-                        <slot v-if="showSlot" />
-                    </div>
-                </Transition>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
+            <Transition
+                enter-active-class="ease-out duration-300"
+                enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-active-class="ease-in duration-200"
+                leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+                leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+                <div v-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
+                    <slot v-if="showSlot"/>
+                </div>
+            </Transition>
+        </div>
+    </dialog>
+</template>
\ No newline at end of file