customize options like cmd, name

Author: hunterliu1003

.prettierrc.yaml

@@ -1,5 +1,5 @@
 # .prettierrc or .prettierrc.yaml
-# printWidth: 80
+printWidth: 120
 tabWidth: 2
 semi: false
 singleQuote: true

dist/VueFinalModal.esm.js

@@ -6,7 +6,7 @@ import components from '@/components/index.js'
 
 import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 
 Object.keys(components).forEach(name => {
   Vue.component(name, components[name])

dist/VueFinalModal.esm.js.map

@@ -0,0 +1,26 @@
+import { bindPrototype, registComponent } from './PluginCore'
+import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
+
+const defaultOptions = {
+  name: 'VueFinalModal',
+  cmd: '$vfm'
+}
+
+const Plugin = () => ({
+  install(Vue, options) {
+    const _options = Object.assign({}, defaultOptions, options)
+    const isDuplicateCmd = Vue.prototype[_options.cmd]
+    const isDuplicateComponent = Vue.options.components[_options.name]
+
+    if (isDuplicateComponent) {
+      console.warn(isDuplicateCmd ? DUPLICATE_PLUGIN_COMPONENT : DUPLICATE_COMPONENT)
+    } else {
+      if (!isDuplicateCmd) {
+        bindPrototype(Vue, _options)
+      }
+      registComponent(Vue, _options)
+    }
+  }
+})
+
+export default Plugin

dist/VueFinalModal.umd.js

@@ -0,0 +1,46 @@
+import VueFinalModal from './VueFinalModal.vue'
+
+function createVfm() {
+  let vfm
+
+  return function() {
+    vfm = {
+      openedModals: [],
+      modals: [],
+      show(name) {
+        this.toggle(name, true)
+      },
+      hide(name) {
+        this.toggle(name, false)
+      },
+      hideAll() {
+        this.openedModals.forEach(modal => {
+          modal.$emit('input', false)
+        })
+      },
+      toggle(name, show) {
+        const modal = this.modals.find(modal => modal.name === name)
+        if (modal !== undefined) {
+          modal.$emit('input', show === undefined ? !modal.value : show)
+        }
+      }
+    }
+    return vfm
+  }
+}
+
+export function bindPrototype(Vue, { cmd }) {
+  const vfm = createVfm()()
+  Object.defineProperty(Vue.prototype, cmd, {
+    get() {
+      return vfm
+    }
+  })
+}
+
+export function registComponent(Vue, { name, cmd }) {
+  Vue.component(name, {
+    ...VueFinalModal,
+    props: { ...VueFinalModal.props, cmd: { type: String, default: cmd } }
+  })
+}

dist/VueFinalModal.umd.js.map

@@ -4,10 +4,7 @@
     v-show="!ssr || visible"
     :style="{ zIndex: calculateZIndex }"
     class="vfm vfm--inset"
-    :class="[
-      attach === false ? 'vfm--fixed' : 'vfm--absolute',
-      { 'vfm--prevent-none': preventClick }
-    ]"
+    :class="[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]"
   >
     <transition
       :name="overlayTransition"
@@ -56,8 +53,8 @@
 </template>
 
 <script>
-import FocusTrap from './focusTrap.js'
-import { setStyle, removeStyle } from './dom.js'
+import FocusTrap from './utils/focusTrap.js'
+import { setStyle, removeStyle } from './utils/dom.js'
 
 const TransitionState = {
   Enter: 'enter',
@@ -113,10 +110,12 @@ export default {
     modalTransitionState: null
   }),
   computed: {
+    api() {
+      return this[this.cmd]
+    },
     isComponentReadyToBeDestroyed() {
       return (
-        (this.hideOverlay ||
-          this.overlayTransitionState === TransitionState.Leave) &&
+        (this.hideOverlay || this.overlayTransitionState === TransitionState.Leave) &&
         this.modalTransitionState === TransitionState.Leave
       )
     },
@@ -153,7 +152,7 @@ export default {
     }
   },
   created() {
-    this.$vfm.modals.push(this)
+    this.api.modals.push(this)
   },
   mounted() {
     this.$focusTrap = new FocusTrap()
@@ -163,26 +162,26 @@ export default {
     this.close()
     this.$el.remove()
 
-    let index = this.$vfm.modals.findIndex(vm => vm === this)
-    this.$vfm.modals.splice(index, 1)
+    let index = this.api.modals.findIndex(vm => vm === this)
+    this.api.modals.splice(index, 1)
   },
   methods: {
     mounted() {
       if (this.value) {
         let target = this.getAttachElement()
         if (target || this.attach === false) {
           this.attach !== false && target.appendChild(this.$el)
-          let index = this.$vfm.openedModals.findIndex(vm => vm === this)
+          let index = this.api.openedModals.findIndex(vm => vm === this)
           if (index !== -1) {
             // if this is already exist in modalStack, delete it
-            this.$vfm.openedModals.splice(index, 1)
+            this.api.openedModals.splice(index, 1)
           }
-          this.$vfm.openedModals.push(this)
+          this.api.openedModals.push(this)
 
-          this.modalStackIndex = this.$vfm.openedModals.length - 1
+          this.modalStackIndex = this.api.openedModals.length - 1
 
           this.handleLockScroll()
-          this.$vfm.openedModals
+          this.api.openedModals
             .filter(vm => vm !== this)
             .forEach((vm, index) => {
               if (vm.getAttachElement() === target) {
@@ -202,14 +201,14 @@ export default {
       }
     },
     close() {
-      let index = this.$vfm.openedModals.findIndex(vm => vm === this)
+      let index = this.api.openedModals.findIndex(vm => vm === this)
       if (index !== -1) {
         // remove this in modalStack
-        this.$vfm.openedModals.splice(index, 1)
+        this.api.openedModals.splice(index, 1)
       }
-      if (this.$vfm.openedModals.length > 0) {
+      if (this.api.openedModals.length > 0) {
         // If there are still nested modals opened
-        const $_vm = this.$vfm.openedModals[this.$vfm.openedModals.length - 1]
+        const $_vm = this.api.openedModals[this.api.openedModals.length - 1]
         $_vm.handleLockScroll()
         $_vm.focusTrap && $_vm.$focusTrap.firstElement().focus()
         !$_vm.hideOverlay && ($_vm.visibility.overlay = true)
@@ -226,9 +225,7 @@ export default {
     },
     handleLockScroll() {
       if (this.value) {
-        this.lockScroll
-          ? setStyle(document.body, 'overflow', 'hidden')
-          : removeStyle(document.body, 'overflow')
+        this.lockScroll ? setStyle(document.body, 'overflow', 'hidden') : removeStyle(document.body, 'overflow')
       }
     },
     getAttachElement() {

example/src/main.js

@@ -1,51 +1,3 @@
-import VueFinalModal from './VueFinalModal.vue'
-
-const Plugin = {
-  install(Vue) {
-    if (Vue.prototype.$vfm) {
-      return
-    }
-    const createVfm = (function() {
-      let vfm
-
-      return function() {
-        if (!vfm) {
-          vfm = {
-            openedModals: [],
-            modals: [],
-            show(name) {
-              this.toggle(name, true)
-            },
-            hide(name) {
-              this.toggle(name, false)
-            },
-            hideAll() {
-              this.openedModals.forEach(modal => {
-                modal.$emit('input', false)
-              })
-            },
-            toggle(name, show) {
-              const modal = this.modals.find(modal => modal.name === name)
-              if (modal !== undefined) {
-                modal.$emit('input', show)
-              }
-            }
-          }
-        }
-        return vfm
-      }
-    })()
-
-    const vfm = createVfm()
-
-    Object.defineProperty(Vue.prototype, '$vfm', {
-      get() {
-        return vfm
-      }
-    })
-
-    Vue.component('VueFinalModal', VueFinalModal)
-  }
-}
+import Plugin from './Plugin'
 
 export default Plugin