feat: support value of displayDirective

Author: hunterliu1003

docs/components/content/ModalDragResize.vue

@@ -23,6 +23,7 @@ function dragResize(newRect) {
   <VueFinalModal
     display-directive="show"
     background="interactive"
+    content-transition="vfm-fade"
     :hide-overlay="true"
     @update:model-value="val => emit('update:modelValue', val)"
   >

docs/components/content/ModalDragResizePreview.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { ModalsContainer, useModal } from 'vue-final-modal'
 
-const { open } = useModal({
+const { open, destroy } = useModal({
   keepAlive: true,
   component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
 })
+
+onBeforeUnmount(() => {
+  destroy()
+})
 </script>
 
 <template>

docs/content/3.api/1.components/1.vue-final-modal.md

@@ -58,12 +58,12 @@ Display the modal or not.
 
 ### displayDirective
 
-Render the modal content via `'if'`{lang=ts} or `'show'`{lang=ts} directive.
-if you need to keep the status of the modal, you can use `'show'` directive. for example if you have a draggable and resizable modal and you need to keep the size and position of the modal while re-open it ([see example](/use-cases/modal-drag-resize)).
+Render the modal via `'if'`{lang=ts}, `'show'`{lang=ts} or `'visible'`{lang=ts} directive.
+If you need to keep the modal alive, you can use `'show'` or `'visible'` directive. for example if you have a draggable and resizable modal and need to keep the size and position of the modal while re-open it ([see example](/use-cases/modal-drag-resize)).
 
   - Type:
-    - JS: `'if' | 'show'`{lang=ts}
-    - TS: `PropType<'if' | 'show'>`{lang=ts}
+    - JS: `'if' | 'show' | 'visible'`{lang=ts}
+    - TS: `PropType<'if' | 'show' | 'visible'>`{lang=ts}
   - Default: `'if'`{lang=ts}
 
 ### hideOverlay

docs/content/4.use-cases/8.modal-drag-resize.md

@@ -20,10 +20,14 @@ Here is a basic drag and resize modal example that using [vue3-drag-resize](http
     <script setup lang="ts">
     import { ModalsContainer, useModal } from 'vue-final-modal'
 
-    const { open } = useModal({
+    const { open, destroy } = useModal({
       keepAlive: true,
       component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
     })
+
+    onBeforeUnmount(() => {
+      destroy()
+    })
     </script>
 
     <template>
@@ -65,6 +69,7 @@ Here is a basic drag and resize modal example that using [vue3-drag-resize](http
       <VueFinalModal
         display-directive="show"
         background="interactive"
+        content-transition="vfm-fade"
         :hide-overlay="true"
         @update:model-value="val => emit('update:modelValue', val)"
       >

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

@@ -8,6 +8,7 @@ import { useFocusTrap } from './useFocusTrap'
 import { useLockScroll } from './useBodyScrollLock'
 import { useEvent } from './useEvent'
 import { useZIndex } from './useZIndex'
+import { vVisible } from './vVisible'
 import { noop, once } from '~/utils'
 import type { InternalVfm, Modal, Vfm } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
@@ -177,6 +178,7 @@ onBeforeUnmount(() => {
     v-if="displayDirective !== 'if' || visible"
     v-show="displayDirective !== 'show' || visible"
     ref="vfmRootEl"
+    v-visible="displayDirective !== 'visible' || visible"
     class="vfm vfm--fixed vfm--inset"
     :class="{ 'vfm--prevent-none': background === 'interactive' }"
     :style="{ zIndex }"
@@ -186,19 +188,23 @@ onBeforeUnmount(() => {
     @mouseup.self="() => onMouseupRoot()"
     @mousedown.self="e => onMousedown(e)"
   >
-    <Transition v-if="!hideOverlay" v-bind="overlayTransition" :appear="displayDirective === 'if'" v-on="overlayListeners">
+    <Transition v-if="!hideOverlay" v-bind="overlayTransition" :appear="true" v-on="overlayListeners">
       <div
-        v-if="overlayVisible"
+        v-if="displayDirective !== 'if' || overlayVisible"
+        v-show="displayDirective !== 'show' || overlayVisible"
+        v-visible="displayDirective !== 'visible' || overlayVisible"
         class="vfm__overlay vfm--overlay vfm--absolute vfm--inset vfm--prevent-none"
         :class="overlayClass"
         :style="overlayStyle"
         aria-hidden="true"
       />
     </Transition>
-    <Transition v-bind="contentTransition" :appear="displayDirective === 'if'" v-on="contentListeners">
+    <Transition v-bind="contentTransition" :appear="true" v-on="contentListeners">
       <div
-        v-show="contentVisible"
+        v-if="displayDirective !== 'if' || contentVisible"
+        v-show="displayDirective !== 'show' || contentVisible"
         ref="vfmContentEl"
+        v-visible="displayDirective !== 'visible' || contentVisible"
         class="vfm__content vfm--outline-none"
         :class="[contentClass, { 'vfm--prevent-auto': background === 'interactive' }]"
         :style="contentStyle"
@@ -259,15 +265,22 @@ onBeforeUnmount(() => {
   outline: none;
 }
 
-.vfm-fade-enter-active,
-.vfm-fade-leave-active {
-  transition: opacity .3s;
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
-.vfm-fade-enter-from,
-.vfm-fade-leave-to {
-  opacity: 0;
+
+@keyframes fade-out {
+  from { opacity: 1 }
+  to { opacity: 0 }
 }
 
+.vfm-fade-enter-active {
+  animation: fade-in .3s ease;
+}
+.vfm-fade-leave-active {
+  animation: fade-out .3s ease;
+}
 .vfm-bounce-back {
   transition-property: transform;
   transition-duration: .3s;

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

@@ -44,9 +44,9 @@ export const coreModalProps = {
    * ```
    */
   displayDirective: {
-    type: String as PropType<'if' | 'show'>,
+    type: String as PropType<'if' | 'show' | 'visible'>,
     default: 'if',
-    validator: (prop: any) => ['if', 'show'].includes(prop),
+    validator: (prop: any) => ['if', 'show', 'visible'].includes(prop),
   },
   /**
    * @description Hide the overlay or not.

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

@@ -0,0 +1,46 @@
+import type { Directive } from 'vue'
+
+interface VVisibleElement extends HTMLElement {
+  // _vov = vue original visibility
+  _vov: string
+}
+
+export const vVisible: Directive = {
+  beforeMount(el, { value }, { transition }) {
+    el._vov = el.style.visibility === 'hidden' ? '' : el.style.visibility
+    if (transition && value)
+      transition.beforeEnter(el)
+    else
+      setVisibility(el, value)
+  },
+  mounted(el, { value }, { transition }) {
+    if (transition && value)
+      transition.enter(el)
+  },
+  updated(el, { value, oldValue }, { transition }) {
+    if (!value === !oldValue)
+      return
+    if (transition) {
+      if (value) {
+        transition.beforeEnter(el)
+        setVisibility(el, true)
+        transition.enter(el)
+      }
+      else {
+        transition.leave(el, () => {
+          setVisibility(el, false)
+        })
+      }
+    }
+    else {
+      setVisibility(el, value)
+    }
+  },
+  beforeUnmount(el, { value }) {
+    setVisibility(el, value)
+  },
+}
+
+function setVisibility(el: VVisibleElement, value: unknown): void {
+  el.style.visibility = value ? el._vov : 'hidden'
+}