WIP

inertiaui · Jan 8, 2025 · 1a623da · 1a623da
1 parent 18c0eda
commit 1a623da
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 117 deletions.
diff --git a/demo-app/resources/js/Pages/Users.jsx b/demo-app/resources/js/Pages/Users.jsx
@@ -35,6 +35,16 @@ export default function Users({ users, random, navigate }) {
                                     >
                                         Edit
                                     </ModalLink>
+                                    <ModalLink
+                                        slideover={true}
+                                        navigate={navigate}
+                                        dusk={`slideover-user-${user.id}`}
+                                        href={`/users/${user.id}/edit`}
+                                        className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+                                        onUserGreets={alertGreeting}
+                                    >
+                                        Slideover
+                                    </ModalLink>
                                 </div>
                             </div>
                         </li>

diff --git a/demo-app/resources/js/Pages/Users.vue b/demo-app/resources/js/Pages/Users.vue
@@ -53,6 +53,16 @@ function alertGreeting(greeting) {
                             >
                                 Edit
                             </ModalLink>
+                            <ModalLink
+                                slideover
+                                :navigate="navigate"
+                                :dusk="'slideover-user-' + user.id"
+                                :href="`/users/${user.id}/edit`"
+                                class="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
+                                @user-greets="alertGreeting"
+                            >
+                                Slideover
+                            </ModalLink>
                         </div>
                     </div>
                 </li>

diff --git a/demo-app/tests/Feature/ModalTest.php b/demo-app/tests/Feature/ModalTest.php
@@ -88,6 +88,7 @@ public function it_returns_the_base_page_with_the_modal_as_a_separate_prop_when_
                 ->has('_inertiaui_modal', fn (AssertableInertia $assert) => $assert
                     ->where('component', 'EditUser')
                     ->has('props')
+                    ->has('viaInertiaRouter')
                     ->where('props.user.id', $user->id)
                     ->has('version')
                     ->has('url')

diff --git a/react/src/ModalContent.jsx b/react/src/ModalContent.jsx
@@ -2,9 +2,11 @@ import { TransitionChild } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
 import { useFocusTrap } from './useFocusTrap'
+import { useRef } from 'react'
 
 const ModalContent = ({ modalContext, config, children }) => {
-    const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
+    const wrapper = useRef(null);
+    const { activate } = useFocusTrap(config?.closeExplicitly, () => modalContext.close());
 
     return (
         <div className="im-modal-container fixed inset-0 z-40 overflow-y-auto p-4">
@@ -22,6 +24,7 @@ const ModalContent = ({ modalContext, config, children }) => {
                     enterTo="opacity-100 translate-y-0 sm:scale-100"
                     leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                     leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    afterEnter={() => activate(wrapper.current)}
                     afterLeave={modalContext.afterLeave}
                     className={clsx(
                         'im-modal-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',

diff --git a/react/src/ModalRoot.jsx b/react/src/ModalRoot.jsx
@@ -73,7 +73,7 @@ export const ModalStackProvider = ({ children }) => {
 
     class Modal {
         constructor(component, response, config, onClose, afterLeave) {
-            this.id = Modal.generateId()
+            this.id = response.id ?? Modal.generateId()
             this.isOpen = false
             this.shouldRender = false
             this.listeners = {}
@@ -219,7 +219,7 @@ export const ModalStackProvider = ({ children }) => {
                     'X-Inertia-Partial-Component': this.response.component,
                     'X-Inertia-Version': this.response.version,
                     'X-Inertia-Partial-Data': keys.join(','),
-                    'X-InertiaUI-Modal': true,
+                    'X-InertiaUI-Modal': Modal.generateId(),
                     'X-InertiaUI-Modal-Use-Router': 0,
                     'X-InertiaUI-Modal-Base-Url': baseUrl,
                 },
@@ -234,11 +234,11 @@ export const ModalStackProvider = ({ children }) => {
         }
     }
 
-    const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null) => {
-        return resolveComponent(responseData.component).then((component) => push(component, responseData, config, onClose, onAfterLeave))
+    const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null, viaInertiaRouter = false) => {
+        return resolveComponent(responseData.component).then((component) => push(component, responseData, config, onClose, onAfterLeave, viaInertiaRouter))
     }
 
-    const push = (component, response, config, onClose, afterLeave) => {
+    const push = (component, response, config, onClose, afterLeave, viaInertiaRouter = false) => {
         const newModal = new Modal(component, response, config, onClose, afterLeave)
         newModal.index = stack.length
 
@@ -293,7 +293,10 @@ export const ModalStackProvider = ({ children }) => {
         onAfterLeave = null,
         queryStringArrayFormat = 'brackets',
         useBrowserHistory = false,
+        modalId = null,
     ) => {
+        modalId = modalId ?? generateId()
+
         return new Promise((resolve, reject) => {
             if (href.startsWith('#')) {
                 resolve(pushLocalModal(href.substring(1), config, onClose, onAfterLeave))
@@ -314,7 +317,7 @@ export const ModalStackProvider = ({ children }) => {
                 'X-Requested-With': 'XMLHttpRequest',
                 'X-Inertia': true,
                 'X-Inertia-Version': pageVersion,
-                'X-InertiaUI-Modal': true,
+                'X-InertiaUI-Modal': modalId,
                 'X-InertiaUI-Modal-Use-Router': useInertiaRouter ? 1 : 0,
                 'X-InertiaUI-Modal-Base-Url': baseUrl,
             }
@@ -331,22 +334,23 @@ export const ModalStackProvider = ({ children }) => {
                     onError: reject,
                     onFinish: () => {
                         waitFor(() => newModalOnBase).then((modal) => {
-                            const originalOnClose = modal.onCloseCallback
-                            const originalAfterLeave = modal.afterLeaveCallback
-
-                            modal.update(
-                                config,
-                                () => {
-                                    onClose?.()
-                                    originalOnClose?.()
-                                },
-                                () => {
-                                    onAfterLeave?.()
-                                    originalAfterLeave?.()
-                                },
-                            )
-
-                            resolve(modal)
+                            // const originalOnClose = modal.onCloseCallback
+                            // const originalAfterLeave = modal.afterLeaveCallback
+
+                            // modal.update(
+                            //     config,
+                            //     () => {
+                            //         onClose?.()
+                            //         originalOnClose?.()
+                            //     },
+                            //     () => {
+                            //         onAfterLeave?.()
+                            //         originalAfterLeave?.()
+                            //     },
+                            // )
+
+                            // modal.show()
+                            // resolve(modal)
                         })
                     },
                 })
@@ -491,7 +495,7 @@ export const ModalRoot = ({ children }) => {
                                 preserveState: true,
                             })
                         }
-                    })
+                    }, null, modalOnBase.viaInertiaRouter)
                     .then((newModal) => {
                         newModalOnBase = newModal
                     })

diff --git a/react/src/SlideoverContent.jsx b/react/src/SlideoverContent.jsx
@@ -2,16 +2,18 @@ import { TransitionChild } from '@headlessui/react'
 import CloseButton from './CloseButton'
 import clsx from 'clsx'
 import { useFocusTrap } from './useFocusTrap'
+import { useRef } from 'react'
 
 const SlideoverContent = ({ modalContext, config, children }) => {
-    const wrapper = useFocusTrap(config?.closeExplicitly, () => modalContext.close())
+    const wrapper = useRef(null);
+    const { activate } = useFocusTrap(config?.closeExplicitly, () => modalContext.close());
 
     return (
         <div className="im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden">
             <div
                 className={clsx('im-slideover-positioner flex min-h-full items-center', {
-                    'justify-start': config.position === 'left',
-                    'justify-end': config.position === 'right',
+                    'justify-start rtl:justify-end': config?.position === 'left',
+                    'justify-end rtl:justify-start': config?.position === 'right',
                 })}
             >
                 <TransitionChild
@@ -21,6 +23,7 @@ const SlideoverContent = ({ modalContext, config, children }) => {
                     enterTo="opacity-100 translate-x-0"
                     leaveFrom="opacity-100 translate-x-0"
                     leaveTo={`opacity-0 ${config.position === 'left' ? '-translate-x-full' : 'translate-x-full'}`}
+                    afterEnter={() => activate(wrapper.current)}
                     afterLeave={modalContext.afterLeave}
                     className={clsx(
                         'im-slideover-wrapper pointer-events-auto w-full transition duration-300 ease-in-out',

diff --git a/react/src/helpers.js b/react/src/helpers.js
@@ -1,2 +1,2 @@
-import { modalDOMHandler, except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
-export { modalDOMHandler, except, only, rejectNullValues, waitFor, kebabCase }
+import { modalDOMHandler, generateId, except, only, rejectNullValues, waitFor, kebabCase } from './../../vue/src/helpers.js'
+export { modalDOMHandler, generateId, except, only, rejectNullValues, waitFor, kebabCase }
diff --git a/react/src/useFocusTrap.js b/react/src/useFocusTrap.js
@@ -2,24 +2,27 @@ import { useEffect, useRef } from 'react'
 import { createFocusTrap } from 'focus-trap'
 
 export function useFocusTrap(closeExplicitly, onDeactivateCallback) {
-    const wrapperRef = useRef(null)
+    const trapRef = useRef(null)
 
-    useEffect(() => {
-        if (!wrapperRef.current) {
-            return
-        }
+    const activate = (wrapper) => {
+        if (wrapper) {
+            trapRef.current = createFocusTrap(wrapper, {
+                clickOutsideDeactivates: !closeExplicitly,
+                escapeDeactivates: !closeExplicitly,
+                onDeactivate: () => onDeactivateCallback?.(),
+
+                fallbackFocus: () => wrapper,
+            })
 
-        const trap = createFocusTrap(wrapperRef.current, {
-            clickOutsideDeactivates: !closeExplicitly,
-            escapeDeactivates: !closeExplicitly,
-            onDeactivate: () => onDeactivateCallback?.(),
-            fallbackFocus: () => wrapperRef.current,
-        })
+            trapRef.current.activate()
+        }
+    }
 
-        trap.activate()
+    const deactivate = () => {
+        trapRef.current?.deactivate()
+    }
 
-        return () => trap.deactivate()
-    }, [])
+    useEffect(() => deactivate, [])
 
-    return wrapperRef
+    return { activate, deactivate }
 }
diff --git a/src/Modal.php b/src/Modal.php
@@ -11,9 +11,12 @@
 use Illuminate\Support\Facades\Response as ResponseFactory;
 use Illuminate\View\View;
 use Inertia\Response as InertiaResponse;
+use Inertia\Support\Header;
 
 class Modal implements Responsable
 {
+    const HEADER_MODAL = 'X-InertiaUI-Modal';
+
     const HEADER_BASE_URL = 'X-InertiaUI-Modal-Base-Url';
 
     const HEADER_USE_ROUTER = 'X-InertiaUI-Modal-Use-Router';
@@ -96,6 +99,8 @@ public function toResponse($request)
         inertia()->share('_inertiaui_modal', [
             // @phpstan-ignore-next-line
             ...$modal->toArray(),
+            'id' => $request->header(static::HEADER_MODAL),
+            'viaInertiaRouter' => (bool) $request->header(Header::INERTIA),
             'baseUrl' => $baseUrl,
         ]);
 

diff --git a/vue/src/ModalContent.vue b/vue/src/ModalContent.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue'
 import CloseButton from './CloseButton.vue'
 import { useFocusTrap } from './useFocusTrap'
 
@@ -7,7 +8,8 @@ const props = defineProps({
     config: Object,
 })
 
-const { wrapper } = useFocusTrap(props.config?.closeExplicitly, () => props.modalContext.close())
+const wrapper = ref(null)
+const focusTrap = () => useFocusTrap(wrapper.value, props.config?.closeExplicitly, () => props.modalContext.close())
 </script>
 
 <template>
@@ -28,6 +30,7 @@ const { wrapper } = useFocusTrap(props.config?.closeExplicitly, () => props.moda
                 enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                 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"
+                @after-enter="focusTrap"
                 @after-leave="modalContext.afterLeave"
             >
                 <div

diff --git a/vue/src/ModalLink.vue b/vue/src/ModalLink.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { modalPropNames, useModalStack } from './modalStack'
-import { ref, provide, computed, watch, useAttrs, onBeforeUnmount } from 'vue'
-import { only, rejectNullValues } from './helpers'
+import { ref, provide, computed, watch, useAttrs, onBeforeUnmount, watchEffect } from 'vue'
+import { generateId, only, rejectNullValues } from './helpers'
 import { getConfig } from './config'
 
 const props = defineProps({
@@ -74,6 +74,19 @@ const props = defineProps({
 const loading = ref(false)
 const modalStack = useModalStack()
 const modalContext = ref(null)
+const modalId = ref()
+
+watch(
+    props,
+    () => {
+        if (modalId.value) {
+            modalStack.removePendingModalUpdate(modalId.value)
+        }
+
+        modalId.value = generateId()
+    },
+    { immediate: true },
+)
 
 provide('modalContext', modalContext)
 
@@ -100,7 +113,11 @@ watch(
 )
 
 const unsubscribeEventListeners = ref(null)
-onBeforeUnmount(() => unsubscribeEventListeners.value?.())
+
+onBeforeUnmount(() => {
+    modalStack.removePendingModalUpdate(modalId.value)
+    unsubscribeEventListeners.value?.()
+})
 
 const $attrs = useAttrs()
 
@@ -145,6 +162,7 @@ function handle() {
             onAfterLeave,
             props.queryStringArrayFormat,
             shouldNavigate.value,
+            modalId.value,
         )
         .then((context) => {
             modalContext.value = context

diff --git a/vue/src/ModalRoot.vue b/vue/src/ModalRoot.vue
@@ -24,19 +24,25 @@ onUnmounted(
         previousModalOnBase.value = modalOnBase
         modalStack.setBaseUrl(modalOnBase.baseUrl)
 
-        modalStack.pushFromResponseData(modalOnBase, {}, () => {
-            if (!modalOnBase.baseUrl) {
-                console.error('No base url in modal response data so cannot navigate back')
-                return
-            }
+        modalStack.pushFromResponseData(
+            modalOnBase,
+            {},
+            () => {
+                if (!modalOnBase.baseUrl) {
+                    console.error('No base url in modal response data so cannot navigate back')
+                    return
+                }
 
-            if (!isNavigating.value && window.location.href !== modalOnBase.baseUrl) {
-                router.visit(modalOnBase.baseUrl, {
-                    preserveScroll: true,
-                    preserveState: true,
-                })
-            }
-        })
+                if (!isNavigating.value && window.location.href !== modalOnBase.baseUrl) {
+                    router.visit(modalOnBase.baseUrl, {
+                        preserveScroll: true,
+                        preserveState: true,
+                    })
+                }
+            },
+            null,
+            modalOnBase.viaInertiaRouter,
+        )
     }),
 )