WIP

Author: pascalbaljet

demo-app/resources/js/app.js

@@ -5,15 +5,15 @@ import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import { ZiggyVue } from '../../vendor/tightenco/ziggy'
-import { putConfig } from 'inertiaui/modal'
+import { putConfig, ModalRoot } from 'inertiaui/modal'
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
-        return createApp({ render: () => h(App, props) })
+        return createApp({ render: () => h(ModalRoot, [h(App, props)]) })
             .use(plugin)
             .use(ZiggyVue)
             .mount(el)

vue/src/ModalLink.vue

@@ -102,13 +102,19 @@ onMounted(() => {
 
 const $attrs = useAttrs()
 
-function handleEmittedEvent(event, ...args) {
-    // // e.g. refresh-key -> onRefreshKey
-    const kebabEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
-    const listener = `on${kebabEvent.charAt(0).toUpperCase()}${kebabEvent.slice(1)}`
-    if (listener in $attrs) {
-        $attrs[listener](...args)
-    }
+function registerEventListeners() {
+    Object.keys($attrs)
+        .filter((key) => key.startsWith('on'))
+        .forEach((key) => {
+            // e.g. onRefreshKey -> refresh-key
+            const snakeCaseKey = key
+                .replace(/^on/, '')
+                .replace(/^./, (firstLetter) => firstLetter.toLowerCase())
+                .replace(/([A-Z])/g, '-$1')
+                .toLowerCase()
+
+            modalContext.value.on(snakeCaseKey, $attrs[key])
+        })
 }
 
 watch(modalContext, (value, oldValue) => {
@@ -117,6 +123,9 @@ watch(modalContext, (value, oldValue) => {
             window.location.hash = props.fragment
         }
 
+        // TODO: after unmounting, remove event listeners
+        registerEventListeners()
+
         nextTick(() => {
             modalContext.value.open = true
             emit('success')
@@ -168,11 +177,4 @@ function handle() {
     >
         <slot :loading="loading" />
     </component>
-
-    <modalContext.component
-        v-if="modalContext?.component"
-        v-show="false"
-        v-bind="modalContext.componentProps"
-        @emit="handleEmittedEvent"
-    />
 </template>

vue/src/ModalResolver.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { useModalStack } from './modalStack'
+import { computed, provide } from 'vue'
+
+const props = defineProps({
+    index: Number,
+})
+
+const modalStack = useModalStack()
+
+const modalContext = computed(() => {
+    return modalStack.stack.value[props.index]
+})
+
+provide('modalContext', modalContext)
+
+function handleEmittedEvent(event, ...args) {
+    modalContext.value.emit(event, ...args)
+}
+</script>
+
+<template>
+    <modalContext.component
+        v-if="modalContext?.component"
+        v-bind="modalContext.componentProps"
+        @emit="handleEmittedEvent"
+    />
+</template>

vue/src/ModalRoot.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useModalStack } from './modalStack'
+import ModalResolver from './ModalResolver.vue'
+
+const modalStack = useModalStack()
+</script>
+
+<template>
+    <slot />
+
+    <ModalResolver
+        v-if="modalStack.stack.value.length"
+        :index="0"
+    />
+</template>

vue/src/ModalWrapper.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { getConfig, getConfigByType } from './config'
 import { computed, inject, useAttrs } from 'vue'
-import { modalPropNames } from './modalStack'
+import { modalPropNames, useModalStack } from './modalStack'
 import { only } from './helpers'
 import { TransitionRoot, TransitionChild, Dialog } from '@headlessui/vue'
+import ModalResolver from './ModalResolver.vue'
 
 const props = defineProps({
     // The slideover prop in on top because we need to know if it's a slideover
@@ -38,6 +39,7 @@ const props = defineProps({
     },
 })
 
+const modalStack = useModalStack()
 const modalContext = inject('modalContext')
 const modalProps = computed(() => {
     return {
@@ -64,6 +66,7 @@ Object.keys($attrs)
             .replace(/([A-Z])/g, '-$1')
             .toLowerCase()
 
+        // TODO: after unmounting, we need to remove the event listener
         modalContext.value.on(snakeCaseKey, $attrs[key])
     })
 </script>
@@ -113,6 +116,11 @@ Object.keys($attrs)
                 :modal-context="modalContext"
                 :modal-props="modalProps"
             />
+
+            <ModalResolver
+                v-if="modalContext && modalStack.stack.value[modalContext?.index + 1]"
+                :index="modalContext.index + 1"
+            />
         </Dialog>
     </TransitionRoot>
 </template>

vue/src/inertiauiModal.js

@@ -1,5 +1,6 @@
 import { getConfig, putConfig, resetConfig } from './config.js'
 import Modal from './Modal.vue'
 import ModalLink from './ModalLink.vue'
+import ModalRoot from './ModalRoot.vue'
 
-export { Modal, ModalLink, getConfig, putConfig, resetConfig }
+export { Modal, ModalLink, ModalRoot, getConfig, putConfig, resetConfig }