WIP base url

Author: pascalbaljet

demo-app/app/InertiaUIModal.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App;
+
+use Illuminate\Contracts\Support\Responsable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Middleware\SubstituteBindings;
+use Illuminate\Support\Facades\Route;
+
+class InertiaUIModal implements Responsable
+{
+    public function __construct(protected array $modalData)
+    {
+        //
+    }
+
+    /**
+     * {@inheritdoc}
+     *
+     * @see https://github.com/lepikhinb/momentum-modal/blob/b45992e4982859990a076dd924e19e589ff9797e/src/Modal.php
+     */
+    public function toResponse($originalRequest)
+    {
+        inertia()->share('_inertiaui_modal', $this->modalData);
+
+        $requestForBaseUrl = Request::create(
+            $this->modalData['baseUrl'],
+            Request::METHOD_GET,
+            $originalRequest->query->all(),
+            $originalRequest->cookies->all(),
+            $originalRequest->files->all(),
+            $originalRequest->server->all(),
+            $originalRequest->getContent()
+        );
+
+        $requestForBaseUrl->headers->replace($originalRequest->headers->all());
+        $requestForBaseUrl->setRequestLocale($originalRequest->getLocale());
+        $requestForBaseUrl->setDefaultRequestLocale($originalRequest->getDefaultLocale());
+
+        if ($originalRequest->hasSession() && $session = $originalRequest->session()) {
+            $requestForBaseUrl->setLaravelSession($session);
+        }
+
+        $baseRoute = Route::getRoutes()->match($requestForBaseUrl);
+
+        $requestForBaseUrl
+            ->setJson($originalRequest->json())
+            ->setUserResolver(fn () => $originalRequest->getUserResolver())
+            ->setRouteResolver(fn () => $baseRoute);
+
+        app()->instance('request', $requestForBaseUrl);
+
+        return (new SubstituteBindings(Route::getFacadeRoot()))->handle(
+            $requestForBaseUrl, fn () => $baseRoute->run()
+        )->toResponse($originalRequest);
+    }
+}

demo-app/app/Providers/AppServiceProvider.php

@@ -2,8 +2,10 @@
 
 namespace App\Providers;
 
+use App\InertiaUIModal;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\ServiceProvider;
+use Inertia\Response;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -12,7 +14,18 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register(): void
     {
-        //
+        Response::macro('modal', function ($baseUrl) {
+            if (request()->header('X-InertiaUI-Modal')) {
+                return $this;
+            }
+
+            return new InertiaUIModal([
+                'baseUrl' => $baseUrl,
+                'component' => $this->component,
+                'props' => $this->props,
+                'version' => $this->version,
+            ]);
+        });
     }
 
     /**

demo-app/routes/web.php

@@ -10,7 +10,7 @@
     return inertia('EditUser', [
         'roles' => Role::pluck('name', 'id'),
         'user' => $user,
-    ]);
+    ])->modal(url('/users'));
 })->name('users.edit');
 
 // Update a user

vue/.prettierrc

@@ -4,7 +4,7 @@
     "singleAttributePerLine": true,
     "singleQuote": true,
     "tabWidth": 4,
-    "printWidth": 160,
+    "printWidth": 150,
     "plugins": [
         "prettier-plugin-tailwindcss"
     ]

vue/src/ModalLink.vue

@@ -2,6 +2,7 @@
 import { modalPropNames, useModalStack } from './modalStack'
 import { ref, provide, watch, onMounted, useAttrs, onBeforeUnmount } from 'vue'
 import { only, rejectNullValues } from './helpers'
+import { router } from '@inertiajs/vue3'
 
 const props = defineProps({
     href: {
@@ -32,6 +33,10 @@ const props = defineProps({
         type: String,
         default: 'brackets',
     },
+    navigate: {
+        type: Boolean,
+        default: false,
+    },
     // Passthrough to Modal.vue
     closeButton: {
         type: Boolean,
@@ -142,6 +147,17 @@ function handle() {
     if (!props.href.startsWith('#')) {
         loading.value = true
         emit('start')
+
+        if (props.navigate) {
+            return router.visit(props.href, {
+                method: props.method,
+                data: props.data,
+                headers: props.headers,
+                onFinished: () => {
+                    loading.value = false
+                },
+            })
+        }
     }
 
     modalStack
@@ -155,7 +171,10 @@ function handle() {
             onAfterLeave,
             props.queryStringArrayFormat,
         )
-        .then((context) => (modalContext.value = context))
+        .then((context) => {
+            console.log(context)
+            modalContext.value = context
+        })
         .catch((error) => emit('error', error))
         .finally(() => (loading.value = false))
 }

vue/src/ModalRoot.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { onBeforeMount } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
+import { router } from '@inertiajs/vue3'
 import { useModalStack } from './modalStack'
 import ModalRenderer from './ModalRenderer.vue'
 
@@ -8,6 +9,31 @@ const modalStack = useModalStack()
 onBeforeMount(() => {
     modalStack.rootPresent.value = true
 })
+
+const activeModalFromBaseUrl = ref(null)
+const isNavigating = ref(false)
+
+onUnmounted(router.on('start', () => (isNavigating.value = true)))
+onUnmounted(router.on('finish', () => (isNavigating.value = false)))
+onUnmounted(
+    router.on('navigate', (event) => {
+        const modalOnBase = event.detail.page.props._inertiaui_modal
+
+        if (!modalOnBase) {
+            activeModalFromBaseUrl.value?.close()
+            activeModalFromBaseUrl.value = null
+            return
+        }
+
+        modalStack
+            .pushFromResponseData(modalOnBase, {}, () => {
+                if (!isNavigating.value && window.location.href !== modalOnBase.baseUrl) {
+                    router.visit(modalOnBase.baseUrl)
+                }
+            })
+            .then((modal) => (activeModalFromBaseUrl.value = modal))
+    }),
+)
 </script>
 
 <template>

vue/src/modalStack.js

@@ -1,4 +1,4 @@
-import { computed, readonly, ref, markRaw } from 'vue'
+import { computed, readonly, ref, markRaw, nextTick } from 'vue'
 import { default as Axios } from 'axios'
 import { except, only } from './helpers'
 import { router, usePage } from '@inertiajs/vue3'
@@ -10,7 +10,7 @@ const localModals = ref({})
 class Modal {
     constructor(component, response, modalProps, onClose, afterLeave) {
         this.id = Modal.generateId()
-        this.open = true
+        this.open = false
         this.listeners = {}
 
         this.component = component
@@ -43,9 +43,28 @@ class Modal {
         return stack.value.length < 2 || stack.value[stack.value.length - 1].id === this.id
     }
 
+    show = () => {
+        const index = this.index.value
+
+        if (index > -1) {
+            if (stack.value[index].open) {
+                // Only open if the modal is closed
+                return
+            }
+
+            stack.value[index].open = true
+        }
+    }
+
     close = () => {
         const index = this.index.value
+
         if (index > -1) {
+            if (!stack.value[index].open) {
+                // Only close if the modal is open
+                return
+            }
+
             Object.keys(this.listeners).forEach((event) => {
                 this.off(event)
             })
@@ -56,8 +75,17 @@ class Modal {
     }
 
     afterLeave = () => {
-        stack.value = stack.value.filter((m) => m.id !== this.id)
-        this.afterLeaveCallback?.()
+        const index = this.index.value
+
+        if (index > -1) {
+            if (stack.value[index].open) {
+                // Only execute the callback if the modal is closed
+                return
+            }
+
+            stack.value = stack.value.filter((m) => m.id !== this.id)
+            this.afterLeaveCallback?.()
+        }
     }
 
     on = (event, callback) => {
@@ -137,6 +165,12 @@ function pushLocalModal(name, modalProps, onClose, afterLeave) {
     return modal
 }
 
+function pushFromResponseData(responseData, modalProps = {}, onClose = null, onAfterLeave = null) {
+    return router
+        .resolveComponent(responseData.component)
+        .then((component) => push(markRaw(component), responseData, modalProps, onClose, onAfterLeave))
+}
+
 function visit(href, method, payload = {}, headers = {}, modalProps = {}, onClose = null, onAfterLeave = null, queryStringArrayFormat = 'brackets') {
     return new Promise((resolve, reject) => {
         if (href.startsWith('#')) {
@@ -159,11 +193,7 @@ function visit(href, method, payload = {}, headers = {}, modalProps = {}, onClos
                 'X-InertiaUI-Modal': true,
             },
         })
-            .then((response) => {
-                router.resolveComponent(response.data.component).then((component) => {
-                    resolve(push(markRaw(component), response.data, modalProps, onClose, onAfterLeave))
-                })
-            })
+            .then((response) => resolve(pushFromResponseData(response.data, modalProps, onClose, onAfterLeave)))
             .catch((error) => {
                 reject(error)
             })
@@ -173,6 +203,9 @@ function visit(href, method, payload = {}, headers = {}, modalProps = {}, onClos
 function push(component, response, modalProps, onClose, afterLeave) {
     const newModal = new Modal(component, response, modalProps, onClose, afterLeave)
     stack.value.push(newModal)
+    nextTick(() => {
+        newModal.show()
+    })
     return newModal
 }
 
@@ -184,6 +217,7 @@ export function useModalStack() {
     return {
         stack: readonly(stack),
         push,
+        pushFromResponseData,
         reset: () => (stack.value = []),
         visit,
         registerLocalModal,