From df5f3b70dfaee2e65ea4e56ce36fbde9bfea111e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <mrsebastienleblanc@icloud.com>
Date: Tue, 5 Nov 2024 17:00:19 -0500
Subject: [PATCH 1/5] Backport JetStream enhancements

---
 .../resources/js/Components/Modal.vue         | 42 +++++++++++--------
 .../resources/js/Components/Modal.vue         | 42 +++++++++++--------
 2 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
index ff99736c6..00c6e7f7f 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
@@ -15,17 +15,19 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(['close']);
+const showSlot = ref(props.show);
 
-watch(
-    () => props.show,
-    () => {
-        if (props.show) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'visible';
-        }
-    },
-);
+watch(() => props.show, () => {
+    if (props.show) {
+        document.body.style.overflow = 'hidden';
+        showSlot.value = true;
+    } else {
+        document.body.style.overflow = null;
+        setTimeout(() => {
+            showSlot.value = false;
+        }, 200);
+    }
+});
 
 const close = () => {
     if (props.closeable) {
@@ -34,8 +36,12 @@ const close = () => {
 };
 
 const closeOnEscape = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
+    if (e.key === 'Escape') {
+        e.preventDefault();
+
+        if (props.show) {
+            close();
+        }
     }
 };
 
@@ -43,15 +49,15 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape));
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = 'visible';
+    document.body.style.overflow = null;
 });
 
 const maxWidthClass = computed(() => {
     return {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
+        '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',
     }[props.maxWidth];
 });
@@ -97,7 +103,7 @@ const maxWidthClass = computed(() => {
                         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="show" />
+                        <slot v-if="showSlot" />
                     </div>
                 </Transition>
             </div>
diff --git a/stubs/inertia-vue/resources/js/Components/Modal.vue b/stubs/inertia-vue/resources/js/Components/Modal.vue
index 5fcfc8f38..d5d870441 100644
--- a/stubs/inertia-vue/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue/resources/js/Components/Modal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps({
     show: {
@@ -17,17 +17,19 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['close']);
+const showSlot = ref(props.show);
 
-watch(
-    () => props.show,
-    () => {
-        if (props.show) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = null;
-        }
-    },
-);
+watch(() => props.show, () => {
+    if (props.show) {
+        document.body.style.overflow = 'hidden';
+        showSlot.value = true;
+    } else {
+        document.body.style.overflow = null;
+        setTimeout(() => {
+            showSlot.value = false;
+        }, 200);
+    }
+});
 
 const close = () => {
     if (props.closeable) {
@@ -36,8 +38,12 @@ const close = () => {
 };
 
 const closeOnEscape = (e) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
+    if (e.key === 'Escape') {
+        e.preventDefault();
+
+        if (props.show) {
+            close();
+        }
     }
 };
 
@@ -50,10 +56,10 @@ onUnmounted(() => {
 
 const maxWidthClass = computed(() => {
     return {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
+        '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',
     }[props.maxWidth];
 });
@@ -99,7 +105,7 @@ const maxWidthClass = computed(() => {
                         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="show" />
+                        <slot v-if="showSlot" />
                     </div>
                 </Transition>
             </div>

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 2/5] 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 00c6e7f7f..b4a677ae5 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 d5d870441..9007f1d00 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

From 872e2d7000ccaf94660f75027068e9b87847d776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20LeBlanc?= <mrsebastienleblanc@icloud.com>
Date: Tue, 5 Nov 2024 17:19:21 -0500
Subject: [PATCH 3/5] Fix type error

---
 stubs/inertia-vue-ts/resources/js/Components/Modal.vue | 4 ++--
 stubs/inertia-vue/resources/js/Components/Modal.vue    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
index b4a677ae5..7cab70350 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
@@ -24,7 +24,7 @@ watch(() => props.show, () => {
         showSlot.value = true;
         dialog.value?.showModal();
     } else {
-        document.body.style.overflow = null;
+        document.body.style.overflow = '';
         setTimeout(() => {
             dialog.value?.close();
             showSlot.value = false;
@@ -52,7 +52,7 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape));
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = null;
+    document.body.style.overflow = '';
 });
 
 const maxWidthClass = computed(() => {
diff --git a/stubs/inertia-vue/resources/js/Components/Modal.vue b/stubs/inertia-vue/resources/js/Components/Modal.vue
index 9007f1d00..a0f3ef14d 100644
--- a/stubs/inertia-vue/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue/resources/js/Components/Modal.vue
@@ -26,7 +26,7 @@ watch(() => props.show, () => {
         showSlot.value = true;
         dialog.value?.showModal();
     } else {
-        document.body.style.overflow = null;
+        document.body.style.overflow = '';
         setTimeout(() => {
             dialog.value?.close();
             showSlot.value = false;
@@ -54,7 +54,7 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape));
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = null;
+    document.body.style.overflow = '';
 });
 
 const maxWidthClass = computed(() => {

From 7577328cbc11bf3f1804ab525d5e46a9e9b4cb40 Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Fri, 8 Nov 2024 13:42:48 +1000
Subject: [PATCH 4/5] Update Modal.vue

---
 stubs/inertia-vue-ts/resources/js/Components/Modal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
index 7cab70350..3f65db871 100644
--- a/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue-ts/resources/js/Components/Modal.vue
@@ -22,9 +22,11 @@ watch(() => props.show, () => {
     if (props.show) {
         document.body.style.overflow = 'hidden';
         showSlot.value = true;
+
         dialog.value?.showModal();
     } else {
         document.body.style.overflow = '';
+
         setTimeout(() => {
             dialog.value?.close();
             showSlot.value = false;
@@ -52,6 +54,7 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape));
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
+
     document.body.style.overflow = '';
 });
 
@@ -96,4 +99,4 @@ const maxWidthClass = computed(() => {
             </Transition>
         </div>
     </dialog>
-</template>
\ No newline at end of file
+</template>

From ea1aee572fdd7cbba05605d86bbef79e70dd353c Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Fri, 8 Nov 2024 13:43:17 +1000
Subject: [PATCH 5/5] Update Modal.vue

---
 stubs/inertia-vue/resources/js/Components/Modal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stubs/inertia-vue/resources/js/Components/Modal.vue b/stubs/inertia-vue/resources/js/Components/Modal.vue
index a0f3ef14d..f49888069 100644
--- a/stubs/inertia-vue/resources/js/Components/Modal.vue
+++ b/stubs/inertia-vue/resources/js/Components/Modal.vue
@@ -24,9 +24,11 @@ watch(() => props.show, () => {
     if (props.show) {
         document.body.style.overflow = 'hidden';
         showSlot.value = true;
+
         dialog.value?.showModal();
     } else {
         document.body.style.overflow = '';
+
         setTimeout(() => {
             dialog.value?.close();
             showSlot.value = false;
@@ -54,6 +56,7 @@ onMounted(() => document.addEventListener('keydown', closeOnEscape));
 
 onUnmounted(() => {
     document.removeEventListener('keydown', closeOnEscape);
+
     document.body.style.overflow = '';
 });
 
@@ -98,4 +101,4 @@ const maxWidthClass = computed(() => {
             </Transition>
         </div>
     </dialog>
-</template>
\ No newline at end of file
+</template>