feat: add context property to useModal()'s options

Author: hunterliu1003

packages/vue-final-modal/src/Modal.ts

@@ -9,6 +9,7 @@ export type UseModalOptionsPrivate<
   ModalProps extends ComponentProps = {},
   DefaultSlotProps extends ComponentProps = {},
 > = {
+  context?: Vfm
   component: Component
   attrs?: ModalProps
   slots?: {
@@ -30,6 +31,7 @@ export type UseModalOptions<
   DefaultSlotProps extends ComponentProps = {},
 > = Pick<
   UseModalOptionsPrivate<ModalProps, DefaultSlotProps>,
+  | 'context'
   | 'component'
   | 'attrs'
   | 'slots'

packages/vue-final-modal/src/useApi.ts

@@ -1,4 +1,5 @@
-import { computed, inject, onUnmounted, reactive, useAttrs } from 'vue'
+import { tryOnUnmounted } from '@vueuse/core'
+import { computed, inject, reactive, useAttrs } from 'vue'
 import type CoreModal from './components/CoreModal/CoreModal.vue'
 import { internalVfmSymbol, vfmSymbol } from './injectionSymbols'
 import type { ComponentProps, InternalVfm, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
@@ -24,13 +25,16 @@ export function useInternalVfm(): InternalVfm {
 function defineModal<
     ModalProps extends ComponentProps,
     DefaultSlotProps extends ComponentProps = {},
-  >(_options: UseModalOptions<ModalProps, DefaultSlotProps>, vfm: Vfm): UseModalReturnType<ModalProps, DefaultSlotProps> {
+  >(_options: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
   const options = reactive({
     id: Symbol('useModal'),
     modelValue: false,
     ..._options,
   }) as UseModalOptionsPrivate<ModalProps, DefaultSlotProps>
 
+  if (!options.context)
+    options.context = useVfm()
+
   function open(): Promise<string> {
     if (options.modelValue)
       return Promise.resolve('[Vue Final Modal] modal is already opened')
@@ -58,9 +62,11 @@ function defineModal<
   }
 
   function destroy(): void {
-    const index = vfm.dynamicModals.indexOf(options)
+    if (!options.context)
+      return
+    const index = options.context.dynamicModals.indexOf(options)
     if (index !== -1)
-      vfm.dynamicModals.splice(index, 1)
+      options.context.dynamicModals.splice(index, 1)
   }
 
   return {
@@ -78,14 +84,12 @@ function defineModal<
 export function useModal<
   ModalProps extends ComponentProps,
   DefaultSlotProps extends ComponentProps = {},
->(_options: UseModalOptions<ModalProps, DefaultSlotProps>, vfm?: Vfm): UseModalReturnType<ModalProps, DefaultSlotProps> {
-  const _vfm: Vfm = vfm || useVfm()
-
-  const modal = defineModal(_options, _vfm)
+>(_options: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
+  const modal = defineModal(_options)
 
-  _vfm.dynamicModals.push(modal.options)
+  modal.options.context?.dynamicModals.push(modal.options)
 
-  onUnmounted(() => modal.destroy())
+  tryOnUnmounted(() => modal.destroy())
 
   return modal
 }