feat: overwrite displayDirective to show if keepAlive is true

Author: hunterliu1003

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

@@ -21,7 +21,10 @@ onBeforeUnmount(() => {
       :is="modal.component"
       v-for="(modal, index) in vfm.dynamicModals"
       :key="modal.id"
-      v-bind="modal.attrs"
+      v-bind="{
+        displayDirective: modal.keepAlive ? 'show' : undefined,
+        ...modal.attrs,
+      }"
       v-model="modal.modelValue"
       @closed="() => _vfm.resolvedClosed?.(index)"
       @opened="() => _vfm.resolvedOpened?.(index)"

viteplay/src/components/DefaultSlot.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 defineProps<{
   text: string
 }>()
@@ -8,11 +10,14 @@ const emit = defineEmits<{
 }>()
 
 emit('create')
+
+const count = ref(0)
 </script>
 
 <template>
   <div style="height: 500px;">
     <div>default slot component {{ text }}</div>
     <button>Click Button!</button>
+    <input v-model="count" type="number">
   </div>
 </template>

viteplay/src/components/VueFinalModal/Basic.example.vue

@@ -7,9 +7,10 @@ import TestModal from './TestModal.vue'
 const { toggle, closeAll } = useVfm()
 
 const modal1 = useModal({
+  keepAlive: true,
   component: VueFinalModal,
   attrs: {
-    'displayDirective': 'if',
+    // 'displayDirective': 'if',
     'background': 'interactive',
     'lockScroll': false,
     'contentStyle': { backgroundColor: '#fff' },