feat: ability to use <VueFinalModal /> without register createVfm() plugin (#320)

* feat: make <CoreModal /> independent

* chore: lint

* test: add test case for using VueFinalModal without plugin registration

---------

Co-authored-by: Hunter <hunterliu1003@gmail.com>

Author: Mini-ghost

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { coreModalProps } from './CoreModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -9,10 +9,11 @@ import { useLockScroll } from './useBodyScrollLock'
 import { useEvent } from './useEvent'
 import { useZIndex } from './useZIndex'
 import { noop, once } from '~/utils'
-import type { Modal } from '~/Modal'
-import { useInternalVfm, useVfm } from '~/useApi'
+import type { InternalVfm, Modal, Vfm } from '~/Modal'
 import { useSwipeToClose } from '~/useSwipeToClose'
 
+import { internalVfmSymbol, vfmSymbol } from '~/injectionSymbols'
+
 export interface CoreModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
 
@@ -28,13 +29,22 @@ export interface CoreModalEmits {
 const props = defineProps(coreModalProps)
 const emit = defineEmits<CoreModalEmits>()
 
-const { modals, openedModals } = useVfm()
+const { modals, openedModals } = inject(vfmSymbol, {
+  modals: [],
+  openedModals: [],
+} as any as Vfm)
+
 const {
   moveToLastOpenedModals,
   openLastOverlay,
   deleteFromOpenedModals,
   deleteFromModals,
-} = useInternalVfm()
+} = inject(internalVfmSymbol, {
+  moveToLastOpenedModals: noop,
+  openLastOverlay: noop,
+  deleteFromOpenedModals: noop,
+  deleteFromModals: noop,
+} as any as InternalVfm)
 
 const vfmRootEl = ref<HTMLDivElement>()
 const { zIndex, refreshZIndex } = useZIndex(props, { openedModals })

packages/vue-final-modal/test/VueFinalModal.test.ts

@@ -30,7 +30,22 @@ function expectExist(coreWrapper: VueWrapper<InstanceType<typeof CoreModal | typ
 }
 
 describe('tests VueFinalModal', () => {
-  it('basic', async () => {
+  it('without plugin registration', async () => {
+    const wrapper = mount(VueFinalModal, {
+      props: {
+        focusTrap: false,
+      },
+    })
+    const CoreModalWrapper = wrapper.findComponent(CoreModal)
+    expectExist(CoreModalWrapper, '.vfm', false)
+    expectExist(CoreModalWrapper, '.vfm__overlay', false)
+    wrapper.setProps({ modelValue: true })
+    await afterTransition()
+    expectVisible(CoreModalWrapper, '.vfm', true)
+    expectVisible(CoreModalWrapper, '.vfm__overlay', true)
+  })
+
+  it('with plugin registration', async () => {
     const wrapper = mount(VueFinalModal, {
       props: {
         focusTrap: false,