WIP

Author: pascalbaljet

vue/src/HeadlessModal.vue

@@ -136,7 +136,7 @@ watch(
 )
 
 const nextIndex = computed(() => {
-    return modalStack.stack.value.find((m) => m.shouldRender && m.index.value > (modalContext.value?.index.value ?? -1))?.index.value
+    return modalStack.stack.value.find((m) => m.shouldRender && m.index > modalContext.value?.index)?.index
 })
 
 defineOptions({
@@ -146,21 +146,21 @@ defineOptions({
 
 <template>
     <slot
-        v-if="modalContext.shouldRender"
-        :id="modalContext.id"
-        :after-leave="modalContext.afterLeave"
-        :close="modalContext.close"
+        v-if="modalContext?.shouldRender"
+        :id="modalContext?.id"
+        :after-leave="modalContext?.afterLeave"
+        :close="modalContext?.close"
         :config="config"
         :emit="emit"
-        :get-child-modal="modalContext.getChildModal"
-        :get-parent-modal="modalContext.getParentModal"
+        :get-child-modal="modalContext?.getChildModal"
+        :get-parent-modal="modalContext?.getParentModal"
         :index="modalContext.index"
-        :is-open="modalContext.isOpen"
+        :is-open="modalContext?.isOpen"
         :modal-context="modalContext"
         :on-top-of-stack="modalContext.onTopOfStack"
-        :reload="modalContext.reload"
-        :set-open="modalContext.setOpen"
-        :should-render="modalContext.shouldRender"
+        :reload="modalContext?.reload"
+        :set-open="modalContext?.setOpen"
+        :should-render="modalContext?.shouldRender"
     />
 
     <!-- The next modal in the stack -->

vue/src/Modal.vue

@@ -107,7 +107,7 @@ onUnmounted(() => {
                     :aria-hidden="!onTopOfStack"
                 >
                     <Transition
-                        v-if="index?.value === 0 && onTopOfStack?.value"
+                        v-if="index === 0 && onTopOfStack"
                         :appear="!rendered"
                         enter-active-class="transition transform ease-in-out duration-300"
                         enter-from-class="opacity-0"
@@ -122,7 +122,7 @@ onUnmounted(() => {
 
                     <!-- On multiple modals, only show a backdrop for the modal that is on top of the stack -->
                     <div
-                        v-if="(index?.value ?? 0) > 0 && onTopOfStack?.value"
+                        v-if="index > 0 && onTopOfStack"
                         class="im-backdrop fixed inset-0 z-30 bg-black/75"
                     />