feat: allow importing component directly

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -23,11 +23,6 @@
 <script>
 export default {
   props: {},
-  computed: {
-    api() {
-      return this[this.options.key]
-    }
-  },
   methods: {
     slice(index) {
       this.api.dynamicModals.splice(index, 1)

dist/VueFinalModal.esm.js.map

@@ -1,37 +1,61 @@
-import { bindPrototype, registModal, registContainer } from './PluginCore'
-import { DUPLICATE_KEY, DUPLICATE_COMPONENT, DUPLICATE_DYNAMIC_CONTAINER } from './utils/errors'
-
-const defaultOptions = {
-  componentName: 'VueFinalModal',
-  dynamicContainerName: 'ModalsContainer',
-  key: '$vfm'
+import { defineApi, defineModal, defineContainer } from './PluginCore'
+
+/**
+ * @description Ensure that `_vfm` is used when function `installPlugin` is executed for the first time
+ */
+let _count = 0
+
+const _key = '$vfm'
+const _componentName = 'VueFinalModal'
+const _dynamicContainerName = 'ModalsContainer'
+
+/**
+ * @description Support create multiple vfm instance
+ */
+export const defineVfm = () => {
+  let api = defineApi()
+  return {
+    [_key]: api,
+    [_componentName]: defineModal(api),
+    [_dynamicContainerName]: defineContainer(api)
+  }
 }
 
-const validPlugin = (duplicateKey, duplicateComponent, duplicateDynamicContainer) => {
-  if (!(duplicateKey || duplicateComponent || duplicateDynamicContainer)) return true
-
-  if (typeof window === 'undefined') return false
-
-  duplicateKey && console.error(DUPLICATE_KEY)
-  duplicateComponent && console.error(DUPLICATE_COMPONENT)
-  duplicateDynamicContainer && console.error(DUPLICATE_DYNAMIC_CONTAINER)
-
-  return false
+/**
+ * @description Create a vfm instance by default for directly support `import { $vfm, VueFinalModal, ModalsContainer } from 'vue-final-modal'`
+ */
+const _vfm = defineVfm()
+export const { $vfm, VueFinalModal, ModalsContainer } = _vfm
+
+/**
+ * @description Register vfm instance globally
+ * @deprecated not available in vue-final-modal 4
+ */
+const installVfm = (App, options = {}) => {
+  const { $vfm, VueFinalModal, ModalsContainer } = _count === 0 ? _vfm : defineVfm()
+  _count += 1
+  const key = options.key || _key
+  const componentName = options.componentName || _componentName
+  const dynamicContainerName = options.dynamicContainerName || _dynamicContainerName
+  Object.defineProperty(App.config.globalProperties, key, {
+    get() {
+      return $vfm
+    }
+  })
+  App.provide(key, $vfm)
+  App.component(componentName, VueFinalModal)
+  App.component(dynamicContainerName, ModalsContainer)
 }
 
-const Plugin = pluginOptions => ({
-  install(app, options) {
-    const _options = Object.assign({}, defaultOptions, pluginOptions, options)
-    const duplicateKey = app.config.globalProperties[_options.key]
-    const duplicateComponent = app._context.components[_options.componentName]
-    const duplicateDynamicContainer = app._context.components[_options.dynamicContainerName]
-
-    if (validPlugin(duplicateKey, duplicateComponent, duplicateDynamicContainer)) {
-      bindPrototype(app, _options)
-      registModal(app, _options)
-      registContainer(app, _options)
-    }
+/**
+ * @description Vue plugin for register vfm instance globally
+ * @deprecated not available in vue-final-modal 4
+ */
+export const vfmPlugin = pluginOptions => ({
+  install(App, options) {
+    const _options = Object.assign({}, pluginOptions, options)
+    installVfm(App, _options)
   }
 })
 
-export default Plugin
+vfmPlugin.install = installVfm

dist/VueFinalModal.umd.js

@@ -2,79 +2,72 @@ import VueFinalModal from './VueFinalModal.vue'
 import ModalsContainer from './ModalsContainer.vue'
 import { shallowReactive } from 'vue'
 
-function assignOptions(component, options) {
-  const _component = { ...component }
-  Object.assign(_component.props, {
-    options: { type: Object, default: () => options }
-  })
-  return _component
-}
-
-function createVfm(options) {
-  let vfm
+export function defineApi() {
+  let _modalComponent = null
 
-  return function() {
-    vfm = {
-      show(modal, ...args) {
-        switch (typeof modal) {
-          case 'string':
-            return this.toggle(modal, true, ...args)
-          case 'object': {
-            return Promise.allSettled([
-              new Promise((resolve, reject) => {
-                const defaultModal = {
-                  value: true,
-                  id: Symbol('dynamicModal'),
-                  component: options.componentName,
-                  bind: {},
-                  slots: {},
-                  on: {},
-                  params: args[0],
-                  reject,
-                  opened() {
-                    resolve('show')
-                  }
+  return {
+    show(modal, ...args) {
+      switch (typeof modal) {
+        case 'string':
+          return this.toggle(modal, true, ...args)
+        case 'object': {
+          return Promise.allSettled([
+            new Promise((resolve, reject) => {
+              const defaultModal = {
+                value: true,
+                id: Symbol('dynamicModal'),
+                component: _modalComponent,
+                bind: {},
+                slots: {},
+                on: {},
+                params: args[0],
+                reject,
+                opened() {
+                  resolve('show')
                 }
-                this.dynamicModals.push(shallowReactive(Object.assign(defaultModal, modal)))
-              })
-            ])
-          }
+              }
+              this.dynamicModals.push(shallowReactive(Object.assign(defaultModal, modal)))
+            })
+          ])
         }
-      },
-      hide(...names) {
-        return this.toggle(names, false)
-      },
-      hideAll() {
-        return this.hide(...this.openedModals.map(modal => modal.props.name))
-      },
-      toggle(name, ...args) {
-        const modals = Array.isArray(name) ? this.get(...name) : this.get(name)
-        return Promise.allSettled(modals.map(modal => modal.toggle(...args)))
-      },
-      get(...names) {
-        return this.modals.filter(modal => names.includes(modal.props.name))
-      },
-      dynamicModals: shallowReactive([]),
-      openedModals: [],
-      modals: []
+      }
+    },
+    hide(...names) {
+      return this.toggle(names, false)
+    },
+    hideAll() {
+      return this.hide(...this.openedModals.map(modal => modal.props.name))
+    },
+    toggle(name, ...args) {
+      const modals = Array.isArray(name) ? this.get(...name) : this.get(name)
+      return Promise.allSettled(modals.map(modal => modal.toggle(...args)))
+    },
+    get(...names) {
+      return this.modals.filter(modal => names.includes(modal.props.name))
+    },
+    dynamicModals: shallowReactive([]),
+    openedModals: [],
+    modals: [],
+    _setDefaultModal(modalComponent) {
+      _modalComponent = modalComponent
     }
-    return vfm
   }
 }
 
-export function bindPrototype(app, options) {
-  const vfm = createVfm(options)()
-  Object.defineProperty(app.config.globalProperties, options.key, {
-    get() {
-      return vfm
-    }
+function bindApi(component, api) {
+  const _component = { ...component, props: { ...component.props } }
+  Object.assign(_component.props, {
+    api: { type: Object, default: () => api }
   })
-  app.provide(options.key, vfm)
+  return _component
 }
 
-export function registModal(app, options) {
-  app.component(options.componentName, assignOptions(VueFinalModal, options))
+export function defineModal(api) {
+  const modalComponent = bindApi(VueFinalModal, api)
+  api._setDefaultModal(modalComponent)
+  return modalComponent
 }
-export function registContainer(app, options) {
-  app.component(options.dynamicContainerName, assignOptions(ModalsContainer, options))
+
+export function defineContainer(api) {
+  return bindApi(ModalsContainer, api)
 }

dist/VueFinalModal.umd.js.map

@@ -70,7 +70,8 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, onBeforeUnmount, computed, nextTick, watch, inject } from 'vue'
+/* eslint-disable vue/no-mutating-props */
+import { ref, reactive, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue'
 import FocusTrap from './utils/focusTrap.js'
 import {
   setStyle,
@@ -183,8 +184,6 @@ export default {
     const vfmOverlayTransition = ref(null)
     const vfmTransition = ref(null)
 
-    const $vfm = inject(props.options.key)
-
     const modalStackIndex = ref(null)
     const $focusTrap = new FocusTrap()
 
@@ -312,7 +311,7 @@ export default {
       }
     )
 
-    $vfm.modals.push(getModalInfo())
+    props.api.modals.push(getModalInfo())
 
     onMounted(() => {
       mounted()
@@ -322,8 +321,9 @@ export default {
       props.lockScroll && vfmContainer.value && enableBodyScroll(vfmContainer.value)
       root?.value?.remove()
 
-      let index = $vfm.modals.findIndex(vm => vm.uid === uid)
-      $vfm.modals.splice(index, 1)
+      let index = props.api.modals.findIndex(vm => vm.uid === uid)
+
+      props.api.modals.splice(index, 1)
     })
     function getModalInfo() {
       return {
@@ -356,19 +356,19 @@ export default {
         if (target || props.attach === false) {
           props.attach !== false && target.appendChild(root.value)
 
-          let index = $vfm.openedModals.findIndex(vm => vm.uid === uid)
+          let index = props.api.openedModals.findIndex(vm => vm.uid === uid)
 
           if (index !== -1) {
             // if this is already exist in modalStack, delete it
-            $vfm.openedModals.splice(index, 1)
+            props.api.openedModals.splice(index, 1)
           }
-          $vfm.openedModals.push(getModalInfo())
+          props.api.openedModals.push(getModalInfo())
 
-          modalStackIndex.value = $vfm.openedModals.length - 1
+          modalStackIndex.value = props.api.openedModals.length - 1
 
           handleLockScroll()
 
-          $vfm.openedModals
+          props.api.openedModals
             .filter(vm => vm.uid !== uid)
             .forEach((vm, index) => {
               if (vm.getAttachElement() === target) {
@@ -386,14 +386,14 @@ export default {
       }
     }
     function close() {
-      let index = $vfm.openedModals.findIndex(vm => vm.uid === uid)
+      let index = props.api.openedModals.findIndex(vm => vm.uid === uid)
       if (index !== -1) {
         // remove this in modalStack
-        $vfm.openedModals.splice(index, 1)
+        props.api.openedModals.splice(index, 1)
       }
-      if ($vfm.openedModals.length > 0) {
+      if (props.api.openedModals.length > 0) {
         // If there are still nested modals opened
-        const $_vm = $vfm.openedModals[$vfm.openedModals.length - 1]
+        const $_vm = props.api.openedModals[props.api.openedModals.length - 1]
         $_vm.props.focusTrap && $_vm.$focusTrap.firstElement().focus()
         if ($_vm.props.focusRetain || $_vm.props.focusTrap) {
           $_vm.vfmContainer.value.focus()

lib/ModalsContainer.vue

@@ -1,3 +1,5 @@
-import Plugin from './Plugin'
+import { vfmPlugin } from './Plugin'
 
-export default Plugin
+export * from './Plugin'
+
+export default vfmPlugin