Merge pull request #351 from vue-final/fix/0309

Feat 4.1

Author: hunterliu1003

.eslintignore

@@ -1,4 +1,3 @@
 dist
 node_modules
-.cache
-deprecated
+.cache

docs/components/content/ModalDragResizePreview.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ModalsContainer } from 'vue-final-modal'
-import ModalDragResize from './ModalDragResize.vue'
+import { ModalsContainer, useModal } from 'vue-final-modal'
 
-const show = ref(false)
+const { open } = useModal({
+  keepAlive: true,
+  component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
+})
 </script>
 
 <template>
-  <VButton @click="show = true">
+  <VButton @click="() => open()">
     Open Modal
   </VButton>
 
-  <ModalDragResize v-model="show" />
-
   <ModalsContainer />
 </template>

docs/content/2.get-started/1.guide/4.types.md

@@ -32,6 +32,7 @@ export type ModalSlot = string | Component | ModalSlotOptions
 ```ts
 export type UseModalOptions<P> = {
   defaultModelValue?: boolean
+  keepAlive?: boolean
   context?: Vfm
   component?: Constructor<P>
   attrs?: (RawProps & P) | ({} extends P ? null : never)
@@ -59,7 +60,7 @@ export interface UseModalReturnType<P> {
   options: UseModalOptions<P> & UseModalOptionsPrivate
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: Partial<Omit<UseModalOptions<P>, 'defaultModelValue' | 'context'>>) => void
+  patchOptions: (options: Partial<UseModalOptions<P>>) => void
   destroy: () => void
 }
 ```
@@ -71,6 +72,7 @@ export type Vfm = {
   install(app: App): void
   modals: ComputedRef<Modal>[]
   openedModals: ComputedRef<Modal>[]
+  openedModalOverlays: ComputedRef<Modal>[]
   dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
   modalsContainers: Ref<symbol[]>
   get: (modalId: ModalId) => undefined | ComputedRef<Modal>
@@ -88,7 +90,6 @@ export type Modal = {
   modalId?: ModalId
   hideOverlay: Ref<boolean | undefined> | undefined
   overlayVisible: Ref<boolean>
-  focus: () => void
   toggle: (show?: boolean) => Promise<string>
 }
 ```

docs/content/3.api/2.composables/1.use-modal.md

@@ -28,11 +28,17 @@ import { ModalsContainer } from 'vue-final-modal'
 ```ts
 import { VueFinalModal, useModal } from 'vue-final-modal'
 
-const { open, close, options, patchOptions } = useModal({
-  // `component` is optional and the default value is `<VueFinalModal>`.
-  component: VueFinalModal,
+const { open, close, destroy, options, patchOptions } = useModal({
   // Open the modal or not when the modal was created, the default value is `false`.
   defaultModelValue: false,
+  /**
+   * If set `keepAlive` to `true`: 
+   * 1. The `displayDirective` will be set to `show` by default. 
+   * 2. The modal component will not be removed after the modal closed until you manually execute `destroy()`. 
+   */
+  keepAlive: false,
+  // `component` is optional and the default value is `<VueFinalModal>`.
+  component: VueFinalModal,
   attrs: {
     // Bind props to the modal component (VueFinalModal in this case).
     clickToClose: true,
@@ -49,6 +55,8 @@ const { open, close, options, patchOptions } = useModal({
 open().then(() => { /* Do something after modal opened */ })
 // Close the modal
 close().then(() => { /* Do something after modal closed */ })
+// Destroy the modal manually, it only be needed when the `keepAlive` is set to `true`
+destroy()
 // Checkout the modal options
 options // the state of the dynamic modal
 
@@ -131,95 +139,6 @@ const modalInstance = useModal({
 `useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
 ::
 
-## Edge Usage
-
-::alert{type=danger}
-❗️ If you really need to call `useModal()`{lang=ts} outside of `<script setup>`, there is a way to approach it but you must use it carefully.
-::
-
-There is a optional property that is `options.context`{lang=ts}, it accept a vfm instance. If given a vfm instance to `options.context`{lang=ts}, `useModal()`{lang=ts} will use the vfm instance internally instead of the injected vfm instance. This will allow you to use `useModal()`{lang=ts} outside out `<script setup>`.
-
-You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no longer need the dynamic modal instance anymore. Here are some key points that you need to know about `modalInstance.destroy()`{lang=ts} and `modalInstance.close()`{lang=ts}:
-
-- Calling `modalInstance.destroy()`{lang=ts} will delete the modal instance inside of `vfm.dynamicModals`. So if you have an opened modal, the modal will be closed if you calling `modalInstance.destroy()` without calling `modalInstance.close()`{lang=ts}.
-- Calling `modalInstance.close()`{lang=ts} will not delete the modal instance inside of `vfm.dynamicModals`. So if you keep calling the `useModal()`{lang=ts}, the length of `vfm.dynamicModals` will keep growing until you have memory leak (see [#277](https://github.com/vue-final/vue-final-modal/issues/277)). This is the reason why you have to manually call `modalInstance.destroy()`{lang=ts} whenever you no longer need the dynamic modal instance anymore (usually in `onClosed` hook).
-- Without calling `modalInstance.destroy()`{lang=ts} correctly, the memory leak might occur both on server side (Nuxt 3) and on client side (Vue 3 SPA).
-
-### Vue 3
-
-- You have to create a plugin that export the `vfm` instance:
-  ```ts [@/plugins/vue-final-modal.ts]
-  import { createVfm } from 'vue-final-modal'
-
-  export const vfm = createVfm()
-  ```
-- Then you have to import the `vfm` instance in your `main.ts` file and register it as a Vue plugin:
-  ```ts [main.ts]
-  import { createApp } from 'vue'
-  import App from './App.vue'
-  import { vfm } from '@/plugins/vue-final-modal'
-
-  const app = createApp(App)
-
-  app.use(vfm).mount('#app')
-  ```
-- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
-  ```ts
-  // Anywhere outside out script setup
-  import { VueFinalModal, useModal } from 'vue-final-modal'
-  import { vfm } from '@/plugins/vue-final-modal'
-
-  export function openModalConfirm() {
-    const modalInstance = useModal({
-      context: vfm,
-      component: ModalConfirm,
-      attrs: {
-        onClosed() {
-          modalInstance.destroy()
-        },
-      },
-      slots: { default: '<p>The content of the modal</p>' }
-    })
-
-    modalInstance.open()
-  }
-  ```
-
-### Nuxt 3
-
-- You have to create a plugin that export the `vfm` instance and register it as a Vue plugin:
-  ```ts [@/plugins/vue-final-modal.ts]
-  import { createVfm } from 'vue-final-modal'
-  import { defineNuxtPlugin } from '#app'
-
-  export const vfm = createVfm() as any
-
-  export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(vfm)
-  })
-  ```
-- Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
-  ```ts
-  // Anywhere outside out script setup
-  import { VueFinalModal, useModal } from 'vue-final-modal'
-  import { vfm } from '@/plugins/vue-final-modal'
-
-  export function openModalConfirm() {
-    const modalInstance = useModal({
-      context: vfm,
-      component: ModalConfirm,
-      attrs: {
-        onClosed() {
-          modalInstance.destroy()
-        },
-      },
-      slots: { default: '<p>The content of the modal</p>' }
-    })
-
-    modalInstance.open()
-  }
-  ```
-
 ## Type Declarations
 
 ::alert{type=info}

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

@@ -18,19 +18,19 @@ Here is a basic drag and resize modal example that using [vue3-drag-resize](http
 
   ```vue [Preview.vue]
     <script setup lang="ts">
-    import { ModalsContainer } from 'vue-final-modal'
-    import ModalDragResize from './ModalDragResize.vue'
+    import { ModalsContainer, useModal } from 'vue-final-modal'
 
-    const show = ref(false)
+    const { open } = useModal({
+      keepAlive: true,
+      component: defineAsyncComponent(() => import('./ModalDragResize.vue')),
+    })
     </script>
 
     <template>
-      <VButton @click="show = true">
+      <VButton @click="() => open()">
         Open Modal
       </VButton>
 
-      <ModalDragResize v-model="show" />
-
       <ModalsContainer />
     </template>
   ```

packages/nuxt/playground/components/PlainCssConfirmModalPreview.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { ModalsContainer, useVfm } from 'vue-final-modal'
+import { ModalsContainer } from 'vue-final-modal'
 import { showConfirmModal } from './showConfirmModal'
-
-const vfm = useVfm()
 </script>
 
 <template>
-  <button @click="() => showConfirmModal(vfm)">
+  <button @click="() => showConfirmModal()">
     Open Modal
   </button>
 

packages/nuxt/playground/components/showConfirmModal.ts

@@ -1,19 +1,14 @@
-import type { Vfm } from 'vue-final-modal'
 import { useModal } from 'vue-final-modal'
 import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 
-export function showConfirmModal(vfm: Vfm) {
-  const { open, close, destroy } = useModal({
-    context: vfm,
+export function showConfirmModal() {
+  const { open, close } = useModal({
     component: PlainCssConfirmModal,
     attrs: {
       title: 'Hello World!',
       onConfirm() {
         close()
       },
-      onClosed() {
-        destroy()
-      },
     },
     slots: {
       default: '<p>The content of the modal</p>',

packages/vue-final-modal/CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+# [4.1.0](https://github.com/vue-final/vue-final-modal/compare/v4.0.11...v4.1.0) (2023-03-28)
+
+
+### Bug Fixes
+
+* **transition:** only set transition appear when displayDirective is set to `if`, because of the focusTrap should be activated until the modal transition end ([7e38512](https://github.com/vue-final/vue-final-modal/commit/7e38512e0f52bc530c2694b45b805aef702f3a96))
+* type ([c820c02](https://github.com/vue-final/vue-final-modal/commit/c820c0221b94fc4ce4e7dc3114ff2fb6faeccea8))
+
+
+### Features
+
+* Add activeVfm (inspire by pinia), so we don't need to pass down `vfm` instance anymore. We can use `useVfm()` and `useModal()` out of setup script ([8ee2021](https://github.com/vue-final/vue-final-modal/commit/8ee2021adc5e97fdcb626c79824c4e8090dcf7c0))
+* Destroy dynamic modal onClosed by default and add `keepAlive` option for keeping modal instance alive after `modal.close()` ([f2cb5bf](https://github.com/vue-final/vue-final-modal/commit/f2cb5bf58d0ba6248018621b079d0e0e7037c472))
+
 ## [4.0.11](https://github.com/vue-final/vue-final-modal/compare/v4.0.10...v4.0.11) (2023-03-08)
 
 

packages/vue-final-modal/cypress.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   component: {
+    video: false,
+    screenshotOnRunFailure: false,
     specPattern: 'cypress/components/**/*.spec.ts',
     devServer: {
       framework: 'vue',