fix: avoid mount before modal open (#306)

* fix: add appear and filter openedDynamicModals in ModalsContainer

* feat: let modal filter after transition end event

Co-authored-by: Alex Liu <[email protected]>

Author: hunterliu1003

packages/vue-final-modal/src/components/CoreModal/CoreModal.vue

@@ -154,7 +154,7 @@ defineExpose({
     @mouseup.self="() => onMouseupRoot()"
     @mousedown.self="e => onMousedown(e)"
   >
-    <Transition v-if="!hideOverlay" v-bind="overlayTransition" v-on="overlayListeners">
+    <Transition v-if="!hideOverlay" v-bind="overlayTransition" appear v-on="overlayListeners">
       <div
         v-if="overlayVisible"
         class="vfm__overlay vfm--overlay vfm--absolute vfm--inset vfm--prevent-none"
@@ -164,7 +164,7 @@ defineExpose({
         aria-hidden="true"
       />
     </Transition>
-    <Transition v-bind="contentTransition" v-on="contentListeners">
+    <Transition v-bind="contentTransition" appear v-on="contentListeners">
       <div
         v-show="contentVisible"
         ref="vfmContentEl"

packages/vue-final-modal/src/components/ModalsContainer.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { isString } from '@vueuse/core'
+import type { Ref } from 'vue'
+import type { UseModalOptionsPrivate } from '../Modal'
 import { useInternalVfm, useVfm } from '~/useApi'
 
 const { modalsContainers, dynamicModals } = useVfm()
@@ -9,6 +11,39 @@ const { resolvedClosed, resolvedOpened } = useInternalVfm()
 const uid = Symbol('ModalsContainer')
 const shouldMount = computed(() => uid === modalsContainers.value[0])
 
+const openedDynamicModals: Ref<UseModalOptionsPrivate[]> = ref([])
+
+function syncOpenDynamicModals() {
+  openedDynamicModals.value = dynamicModals.filter(modal => modal.modelValue)
+}
+
+function withSyncOpenDynamicModals(callbackFn?: () => void) {
+  callbackFn?.()
+  syncOpenDynamicModals()
+}
+
+watch(() => dynamicModals.map(modal => modal.modelValue), (value, oldValue) => {
+  if (!oldValue || value.length !== oldValue.length) {
+    syncOpenDynamicModals()
+    return
+  }
+
+  let index = value.length
+  let shouldUpdate = false
+
+  while (!shouldUpdate && index--) {
+    if (value[index] === true && oldValue[index] === false)
+      shouldUpdate = true
+  }
+
+  if (!shouldUpdate)
+    return
+
+  syncOpenDynamicModals()
+}, {
+  immediate: true,
+})
+
 modalsContainers.value.push(uid)
 onBeforeUnmount(() => {
   modalsContainers.value = modalsContainers.value.filter(i => i !== uid)
@@ -19,11 +54,11 @@ onBeforeUnmount(() => {
   <template v-if="shouldMount">
     <component
       :is="modal.component"
-      v-for="(modal, index) in dynamicModals"
+      v-for="(modal, index) in openedDynamicModals"
       :key="modal.id"
       v-bind="modal.attrs"
       v-model="modal.modelValue"
-      @closed="() => resolvedClosed(index)"
+      @closed="withSyncOpenDynamicModals(() => resolvedClosed(index))"
       @opened="() => resolvedOpened(index)"
     >
       <template v-for="(slot, key) in modal.slots" #[key] :key="key">