feat: allow to pass vfm instance as an second argument of useModal for using it outside of script setup syntax

Author: hunterliu1003

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

@@ -40,6 +40,7 @@ export type UseModalReturnType<ModalProps extends ComponentProps, DefaultSlotPro
   open: () => Promise<string>
   close: () => Promise<string>
   patchOptions: (options: UseModalOptions<ModalProps, DefaultSlotProps>) => void
+  destroy: () => void
 }
 
 export type Vfm = {

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

@@ -21,10 +21,10 @@ export function useInternalVfm(): InternalVfm {
 /**
  * Define a dynamic modal.
  */
-export function defineModal<
+function defineModal<
     ModalProps extends ComponentProps,
     DefaultSlotProps extends ComponentProps = {},
-  >(_options?: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
+  >(_options: UseModalOptions<ModalProps, DefaultSlotProps>, vfm: Vfm): UseModalReturnType<ModalProps, DefaultSlotProps> {
   const options = reactive({
     id: Symbol('useModal'),
     modelValue: false,
@@ -57,32 +57,35 @@ export function defineModal<
     Object.assign(options?.slots || {}, _options?.slots || {})
   }
 
+  function destroy(): void {
+    const index = vfm.dynamicModals.indexOf(options)
+    if (index !== -1)
+      vfm.dynamicModals.splice(index, 1)
+  }
+
   return {
     options,
     open,
     close,
     patchOptions,
+    destroy,
   }
 }
 
 /**
  * Create a dynamic modal.
  */
 export function useModal<
-    ModalProps extends ComponentProps,
-    DefaultSlotProps extends ComponentProps = {},
-  >(_options?: UseModalOptions<ModalProps, DefaultSlotProps>): UseModalReturnType<ModalProps, DefaultSlotProps> {
-  const { dynamicModals } = useVfm()
+  ModalProps extends ComponentProps,
+  DefaultSlotProps extends ComponentProps = {},
+>(_options: UseModalOptions<ModalProps, DefaultSlotProps>, vfm?: Vfm): UseModalReturnType<ModalProps, DefaultSlotProps> {
+  const _vfm: Vfm = vfm || useVfm()
 
-  const modal = defineModal(_options)
+  const modal = defineModal(_options, _vfm)
 
-  dynamicModals.push(modal.options)
+  _vfm.dynamicModals.push(modal.options)
 
-  onUnmounted(() => {
-    const index = dynamicModals.indexOf(modal.options)
-    if (index !== -1)
-      dynamicModals.splice(index, 1)
-  })
+  onUnmounted(() => modal.destroy())
 
   return modal
 }