Merge branch 'dev' into next

hunterliu1003 · hunterliu1003 · commit b6ff5fc8d5d5 · 2020-11-09T21:32:28.000+08:00
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
@@ -1,5 +1,5 @@
 # .prettierrc or .prettierrc.yaml
-# printWidth: 80
+printWidth: 120
 tabWidth: 2
 semi: false
 singleQuote: true
diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ yarn add vue-final-modal
 ```js
 import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 ### Nuxt
@@ -95,7 +95,7 @@ Vue.use(VueFinalModal)
 // plugins/vue-final-modal.js
 import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -152,6 +152,33 @@ export default {
 this.$vfm.show('example')
 ```
 
+## **Configuration**
+
+> Only work in v0.18+
+
+Configuration options can be passed as a second argument to `Vue.use`.
+
+```js
+import VueFinalModal from 'vue-final-modal'
+
+Vue.use(VueFinalModal(), { ... })
+```
+
+### `componentName`
+
+- Type: `String`
+- default: `'VueFinalModal'`
+
+Changes component name from "VueFinalModal" to any other string value. It is useful when there is already a global "modal" component.
+
+### `key`
+
+- Type: `String`
+- default: `'$vfm'`
+
+Changes API name from "$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
+
+
 ## **API**
 
 Plugin API can be called within any component through `this.$vfm`.
diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.17
+version: 0.18
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -100,7 +100,7 @@ npm install vue-final-modal
 ```js[main.js]
 import VueFinalModal from 'vue-final-modal'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 ### Nuxt
@@ -110,7 +110,7 @@ Vue.use(VueFinalModal)
 ```js[plugins/vue-final-modal.js]
 import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 ```
 
 - **Add plugin into `nuxt.config.js`**
@@ -166,6 +166,32 @@ export default {
 this.$vfm.show('example')
 ```
 
+## **Configuration**
+
+<badge>v0.18+</badge>
+
+Configuration options can be passed as a second argument to `Vue.use`.
+
+```js
+import VueFinalModal from 'vue-final-modal'
+
+Vue.use(VueFinalModal(), { ... })
+```
+
+### `componentName`
+
+- Type: `String`
+- default: `'VueFinalModal'`
+
+Changes component name from "VueFinalModal" to any other string value. It is useful when there is already a global "modal" component.
+
+### `key`
+
+- Type: `String`
+- default: `'$vfm'`
+
+Changes API name from "$vfm" to any other string value. It is useful when you use `vue-final-modal` as spinner, toast, notify, etc.
+
 ## **API**
 
 <badge>v0.15+</badge>
diff --git a/docs/package.json b/docs/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
     "nuxt": "^2.14.1",
-    "vue-final-modal": "^0.16.0"
+    "vue-final-modal": "^0.18.0"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",
diff --git a/docs/plugins/global.js b/docs/plugins/global.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import VueFinalModal from 'vue-final-modal/lib'
 
-Vue.use(VueFinalModal)
+Vue.use(VueFinalModal())
 
 import components from '../../example/src/components/index.js'
 Object.keys(components).forEach(name => {
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -9899,10 +9899,10 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
-vue-final-modal@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.16.0.tgz#9dc0a9246a8da25f6bceff6e5f78ff2a292d9a88"
-  integrity sha512-JJQQxo2b5xnqX5cqN239cUZZ+83AFrp1eM+rpw+DfmWX1UvxcIu83n8TK3//N8mGHNQiXVvWHSv4JeW9716EDA==
+vue-final-modal@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.18.0.tgz#8525133d68b9f7e63af38610d1ee5f59deae4646"
+  integrity sha512-yeso4SfPXg0wpLNc42YwZnbG0BTNfDLPgmWE8OIsFBHtRq/+gdd+vj1kJNefJbiv+1f6r0xe6Ac54C+DlGo/Eg==
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
diff --git a/example/src/main.js b/example/src/main.js
@@ -8,7 +8,7 @@ import VueFinalModal from 'vue-final-modal'
 
 const app = createApp(App)
 
-app.use(VueFinalModal)
+app.use(VueFinalModal())
 
 Object.keys(components).forEach(name => {
   app.component(name, components[name])
diff --git a/lib/Plugin.js b/lib/Plugin.js
@@ -0,0 +1,26 @@
+import { bindPrototype, registComponent } from './PluginCore'
+import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
+
+const defaultOptions = {
+  componentName: 'VueFinalModal',
+  key: '$vfm'
+}
+
+const Plugin = () => ({
+  install(app, options) {
+    const _options = Object.assign({}, defaultOptions, options)
+    const isDuplicateKey = app.config.globalProperties[_options.key]
+    const isDuplicateComponent = app._context.components[_options.componentName]
+
+    if (isDuplicateComponent) {
+      console.warn(isDuplicateKey ? DUPLICATE_PLUGIN_COMPONENT : DUPLICATE_COMPONENT)
+    } else {
+      if (!isDuplicateKey) {
+        bindPrototype(app, _options)
+      }
+      registComponent(app, _options)
+    }
+  }
+})
+
+export default Plugin
diff --git a/lib/PluginCore.js b/lib/PluginCore.js
@@ -0,0 +1,47 @@
+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('update:modelValue', false)
+        })
+      },
+      toggle(name, show) {
+        const modal = this.modals.find(modal => modal.name === name)
+        if (modal !== undefined) {
+          modal.emit('update:modelValue', show === undefined ? !modal.value : show)
+        }
+      }
+    }
+    return vfm
+  }
+}
+
+export function bindPrototype(app, { key }) {
+  const vfm = createVfm()()
+  Object.defineProperty(app.config.globalProperties, key, {
+    get() {
+      return vfm
+    }
+  })
+  app.provide(key, vfm)
+}
+
+export function registComponent(app, { componentName, key }) {
+  app.component(componentName, {
+    ...VueFinalModal,
+    props: { ...VueFinalModal.props, _key: { type: String, default: key } }
+  })
+}
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -5,10 +5,7 @@
     ref="root"
     :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"
@@ -57,18 +54,9 @@
 </template>
 
 <script setup="props, { emit }">
-import {
-  ref,
-  reactive,
-  onMounted,
-  onBeforeUnmount,
-  computed,
-  nextTick,
-  watch,
-  inject
-} from 'vue'
-import FocusTrap from './focusTrap.js'
-import { setStyle, removeStyle } from './dom.js'
+import { ref, reactive, onMounted, onBeforeUnmount, computed, nextTick, watch, inject } from 'vue'
+import FocusTrap from './utils/focusTrap.js'
+import { setStyle, removeStyle } from './utils/dom.js'
 
 const TransitionState = {
   Enter: 'enter',
@@ -110,22 +98,15 @@ export default {
     zIndex: { type: [Boolean, String, Number], default: false },
     focusTrap: { type: Boolean, default: false }
   },
-  emits: [
-    'update:modelValue',
-    'click-outside',
-    'before-open',
-    'opened',
-    'before-close',
-    'closed'
-  ]
+  emits: ['update:modelValue', 'click-outside', 'before-open', 'opened', 'before-close', 'closed']
 }
 
 const uid = Symbol('vfm')
 export const root = ref(null)
 export const vfmContent = ref(null)
 export const vfmContainer = ref(null)
 
-const $vfm = inject('$vfm')
+const $vfm = inject(props._key)
 
 const modalStackIndex = ref(null)
 const $focusTrap = new FocusTrap()
@@ -140,8 +121,7 @@ const modalTransitionState = ref(null)
 
 const isComponentReadyToBeDestroyed = computed(() => {
   return (
-    (props.hideOverlay ||
-      overlayTransitionState.value === TransitionState.Leave) &&
+    (props.hideOverlay || overlayTransitionState.value === TransitionState.Leave) &&
     modalTransitionState.value === TransitionState.Leave
   )
 })
@@ -268,9 +248,7 @@ function close() {
 }
 function handleLockScroll() {
   if (props.modelValue) {
-    props.lockScroll
-      ? setStyle(document.body, 'overflow', 'hidden')
-      : removeStyle(document.body, 'overflow')
+    props.lockScroll ? setStyle(document.body, 'overflow', 'hidden') : removeStyle(document.body, 'overflow')
   }
 }
 function getAttachElement() {
@@ -333,8 +311,9 @@ export function beforeModalLeave() {
 export function afterModalLeave() {
   modalTransitionState.value = TransitionState.Leave
   modalStackIndex.value = null
-
-  props.lockScroll && removeStyle(document.body, 'overflow')
+  if ($vfm.openedModals.length === 0) {
+    props.lockScroll && removeStyle(document.body, 'overflow')
+  }
   emit('closed')
 }
 export function onClickContainer() {
diff --git a/lib/index.js b/lib/index.js
@@ -1,52 +1,3 @@
-import VueFinalModal from './VueFinalModal.vue'
-
-const Plugin = {
-  install(app) {
-    if (app.config.globalProperties.$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('update:modelValue', false)
-              })
-            },
-            toggle(name, show) {
-              const modal = this.modals.find(modal => modal.name === name)
-              if (modal !== undefined) {
-                modal.emit('update:modelValue', show)
-              }
-            }
-          }
-        }
-        return vfm
-      }
-    })()
-
-    const vfm = createVfm()
-
-    Object.defineProperty(app.config.globalProperties, '$vfm', {
-      get() {
-        return vfm
-      }
-    })
-    app.provide('$vfm', vfm)
-
-    app.component('VueFinalModal', VueFinalModal)
-  }
-}
+import Plugin from './Plugin'
 
 export default Plugin
diff --git a/lib/utils/dom.js b/lib/utils/dom.js
diff --git a/lib/utils/errors.js b/lib/utils/errors.js
@@ -0,0 +1,4 @@
+export const DUPLICATE_PLUGIN_COMPONENT =
+  '[vue-final-modal] Duplicate registration API key and componentName of VueFinalModal.'
+
+export const DUPLICATE_COMPONENT = '[vue-final-modal] Duplicate registration componentName of VueFinalModal.'
diff --git a/lib/utils/focusTrap.js b/lib/utils/focusTrap.js
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -47,4 +47,4 @@ declare module '@vue/runtime-core' {
 }
 
 declare const VueFinalModal: VueFinalModal
-export default VueFinalModal
+export default VueFinalModal
