Modal events

Author: pascalbaljet

demo-app/resources/js/Pages/ModalEvents.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { Modal, ModalLink } from '@inertiaui/modal-vue'
+
+function log(value) {
+    console.log(value)
+}
+</script>
+
+<template>
+    <Modal
+        @success="log('success')"
+        @blur="log('blur')"
+        @focus="log('focus')"
+        @close="log('close')"
+        @after-leave="log('after-leave')"
+    >
+        <ModalLink href="/roles/create">
+            Create role
+        </ModalLink>
+    </Modal>
+</template>

demo-app/routes/web.php

@@ -13,6 +13,11 @@
     return redirect('/users');
 });
 
+// Modal Events
+Route::get('/modal-events', function (User $user) {
+    return Inertia::modal('ModalEvents')->baseUrl('/users');
+})->name('modal-events');
+
 // Edit a user
 Route::get('/users/{user}/edit', function (User $user) {
     return Inertia::modal('EditUser', [

demo-app/tests/Browser/Browser.php

@@ -79,4 +79,53 @@ public function clickAt(int $x, int $y): self
 
         return $this;
     }
+
+    /**
+     * Get the console log from the browser.
+     */
+    public function getConsoleLog(): array
+    {
+        return $this->driver->manage()->getLog('browser');
+    }
+
+    /**
+     * Determine if the console log contains the given message.
+     */
+    private function consoleLogContains(string $needle): bool
+    {
+        return collect($this->getConsoleLog())->contains(function (array $entry) use ($needle) {
+            // E.g.: http://[::1]:5173/@vite/client 494:8 "[vite] connecting..."
+            preg_match('/^.*\d+:\d+\s"(.+)"$/', $entry['message'], $matches);
+
+            return ! empty($matches)
+                ? str_contains($matches[1] ?? '', $needle)
+                : false;
+        });
+    }
+
+    /**
+     * Assert that the console log contains the given message.
+     */
+    public function assertConsoleLogContains(string $needle): self
+    {
+        Assert::assertTrue(
+            $this->consoleLogContains($needle),
+            "The console log does not contain the expected message: {$needle}"
+        );
+
+        return $this;
+    }
+
+    /**
+     * Wait for the console log to contain the given message.
+     */
+    public function waitForConsoleLog(string $needle, ?int $seconds = null, int $interval = 100): self
+    {
+        return $this->waitUsing(
+            $seconds,
+            $interval,
+            fn () => $this->consoleLogContains($needle),
+            "The console log does not contain the expected message: {$needle}"
+        );
+    }
 }

demo-app/tests/Browser/EventsTest.php

@@ -23,6 +23,23 @@ public function it_can_attach_listeners_to_the_modal_link(bool $navigate)
         });
     }
 
+    #[Test]
+    public function it_can_attach_listeners_to_the_modal_component()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/modal-events')
+                ->waitForConsoleLog('success')
+                ->waitForModal()
+                ->clickLink('Create role')
+                ->waitForConsoleLog('blur')
+                ->waitForModal(1)
+                ->clickModalCloseButton(1)
+                ->waitForConsoleLog('focus')
+                ->clickModalCloseButton()
+                ->waitForConsoleLog('close');
+        });
+    }
+
     #[DataProvider('booleanProvider')]
     #[Test]
     public function it_can_attach_a_listener_for_blur(bool $navigate)

demo-app/tests/DuskTestCase.php

@@ -168,7 +168,7 @@ protected function driver(): RemoteWebDriver
             $_ENV['DUSK_DRIVER_URL'] ?? 'http://localhost:9515',
             DesiredCapabilities::chrome()->setCapability(
                 ChromeOptions::CAPABILITY, $options
-            )
+            )->setCapability('goog:loggingPrefs', ['browser' => 'ALL'])
         );
     }
 

vue/src/HeadlessModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getConfig, getConfigByType } from './config'
-import { inject, onBeforeUnmount, ref, computed, useAttrs, onMounted } from 'vue'
+import { inject, onBeforeUnmount, ref, computed, useAttrs, onMounted, watch } from 'vue'
 import { useModalStack } from './modalStack'
 import ModalRenderer from './ModalRenderer.vue'
 
@@ -85,7 +85,7 @@ function registerEventListeners() {
     unsubscribeEventListeners.value = modalContext.value.registerEventListenersFromAttrs($attrs)
 }
 
-const emits = defineEmits(['modal-event'])
+const emits = defineEmits(['modal-event', 'focus', 'blur', 'close', 'success'])
 
 function emit(event, ...args) {
     emits('modal-event', event, ...args)
@@ -123,6 +123,25 @@ defineExpose({
     },
 })
 
+watch(
+    () => modalContext.value?.onTopOfStack,
+    (onTopOfStack, previousOnTopOfStack) => {
+        if (onTopOfStack && !previousOnTopOfStack) {
+            emits('focus')
+        } else if (!onTopOfStack && previousOnTopOfStack) {
+            emits('blur')
+        }
+    },
+)
+
+watch(
+    () => modalContext.value?.isOpen,
+    (isOpen) => {
+        isOpen ? emits('success') : emits('close')
+    },
+    { immediate: true },
+)
+
 const nextIndex = computed(() => {
     return modalStack.stack.value.find((m) => m.shouldRender && m.index > modalContext.value.index)?.index
 })

vue/src/Modal.vue

@@ -9,6 +9,8 @@ const modal = ref(null)
 const rendered = ref(false)
 const preparedDOM = ref(false)
 
+defineEmits(['after-leave', 'blur', 'close', 'focus', 'success'])
+
 watch(
     () => modal.value,
     (value) => {
@@ -77,6 +79,10 @@ defineExpose({
             setOpen,
             shouldRender,
         }"
+        @success="$emit('success')"
+        @close="$emit('close')"
+        @focus="$emit('focus')"
+        @blur="$emit('blur')"
     >
         <teleport
             v-if="shouldRender"
@@ -98,6 +104,7 @@ defineExpose({
                     leave-from-class="opacity-100"
                     leave-to-class="opacity-0"
                     @after-appear="rendered = true"
+                    @after-leave="$emit('after-leave')"
                 >
                     <div
                         v-show="isOpen"

vue/src/ModalLink.vue

@@ -74,19 +74,6 @@ 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)
 
@@ -161,7 +148,6 @@ function handle() {
             onAfterLeave,
             props.queryStringArrayFormat,
             shouldNavigate.value,
-            modalId.value,
         )
         .then((context) => {
             modalContext.value = context

vue/src/modalStack.js

@@ -13,10 +13,6 @@ const baseUrl = ref(null)
 const stack = ref([])
 const localModals = ref({})
 
-const removePendingModalUpdate = (id) => {
-    delete pendingModalUpdates.value[id]
-}
-
 const setComponentResolver = (resolver) => {
     resolveComponent = resolver
 }
@@ -67,6 +63,8 @@ class Modal {
                       }
                     : pendingOnAfterLeave
             }
+
+            delete pendingModalUpdates.value[this.id]
         }
 
         this.index = computed(() => stack.value.findIndex((m) => m.id === this.id))
@@ -262,9 +260,8 @@ function visit(
     onAfterLeave = null,
     queryStringArrayFormat = 'brackets',
     useBrowserHistory = false,
-    modalId = null,
 ) {
-    modalId = modalId ?? generateId()
+    const modalId = generateId()
 
     return new Promise((resolve, reject) => {
         if (href.startsWith('#')) {
@@ -332,7 +329,6 @@ export const renderApp = (App, props) => {
 
 export function useModalStack() {
     return {
-        removePendingModalUpdate,
         setComponentResolver,
         getBaseUrl: () => baseUrl.value,
         setBaseUrl: (url) => (baseUrl.value = url),