Merge branch 'master' into feature/lock-scroll-next

hunterliu1003 · hunterliu1003 · commit 4de3b84fc3a9 · 2020-12-02T10:42:22.000+08:00
diff --git a/.github/ISSUE_TEMPLATE/---bug-report.md b/.github/ISSUE_TEMPLATE/---bug-report.md
@@ -0,0 +1,36 @@
+---
+name: "\U0001F41B Bug report"
+about: "If something isn't working \U0001F915"
+title: ''
+labels: bug
+assignees: hunterliu1003
+
+---
+
+<!-- **IMPORTANT!**
+Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
+
+### Version
+
+vue-final-modal: <!-- ex: v0.19.0 -->
+vue: <!-- ex: v2.6.12 -->
+nuxt: <!-- ex: v2.12.0 -->
+
+### OS
+
+Mac or Windows
+
+### Reproduction Link
+<!--
+A minimal test case based on one of:
+- a fork of https://codesandbox.io/s/nuxtcontent-demo-l164h
+- a GitHub repository that can reproduce the bug
+-->
+
+### Steps to reproduce
+
+
+### What is Expected?
+
+
+### What is actually happening?
diff --git a/.github/ISSUE_TEMPLATE/---feature-request.md b/.github/ISSUE_TEMPLATE/---feature-request.md
@@ -0,0 +1,20 @@
+---
+name: "\U0001F680 Feature request"
+about: "Let us know if you have a feature request \U0001F4A1"
+title: ''
+labels: enhancement
+assignees: hunterliu1003
+
+---
+
+### Is your feature request related to a problem? Please describe.
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+### Describe the solution you'd like
+<!-- A clear and concise description of what you want to happen. -->
+
+### Describe alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+### Additional context
+<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/ISSUE_TEMPLATE/---say-thank-you.md b/.github/ISSUE_TEMPLATE/---say-thank-you.md
@@ -0,0 +1,23 @@
+---
+name: "❤️ Say thank you"
+about: Tell us how you use vue-final-modal & support our efforts in maintaining vue-final-modal
+title: ''
+labels: ''
+assignees: hunterliu1003
+
+---
+
+# ❤️ I'm using **`vue-final-modal`**
+
+If you (or your company) are using  **`vue-final-modal`** - please let us know. We'd love to hear from you!
+
+ **`vue-final-modal`** is a community driven project, which means it's not maintained by a company. If you would like to help `vue-final-modal` - any of the following is greatly appreciated.
+
+- [ ] Give the repository a star ⭐️
+- [ ] Help out with issues
+- [ ] Review pull requests
+- [ ] Blog about vue-final-modal
+- [ ] Make tutorials
+- [ ] Give talks
+
+Thank you! 💐
diff --git a/.github/ISSUE_TEMPLATE/-question.md b/.github/ISSUE_TEMPLATE/-question.md
@@ -0,0 +1,12 @@
+---
+name: "❓Question"
+about: Ask a question about vue-final-modal
+title: ''
+labels: question
+assignees: hunterliu1003
+
+---
+
+<!-- **IMPORTANT!**
+Please make sure to look for an answer to your question in our documentation and the documentation before asking a question here.
+-->
diff --git a/README.md b/README.md
@@ -30,7 +30,8 @@ Looking for a Vue 3 version? [It's over here](https://github.com/hunterliu1003/v
 
 ## Introduction
 
-`Vue Final Modal` is a renderless component<br />
+### **Vue Final Modal** is a **renderless component**!
+
 You can create a [higher-order component](https://vue-final-modal.org/examples/recommended-use) easily and can customize `template`, `script` and `style` based on your needs.
 
 features:
@@ -315,4 +316,23 @@ toggle modal by name.
 
 ## Contribution
 
-👋 Hi I'm Hunter. Author of `vue-final-modal`. There is no perfect library even the `final` of vue modal. If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
+👋 Hi I'm Hunter, the author of `vue-final-modal`. 
+
+To develop vue-final-modal, I learn a lot from these awesome libraries:
+
+- [Vuetify](https://vuetifyjs.com/en/)
+  - attach
+- [Element UI](https://element.eleme.io/)
+  - stackable modal
+  - zIndex
+  - zIndexBase
+- [vue-js-modal](https://github.com/euvl/vue-js-modal)
+  - dynamic modal
+  - transition
+  - focusTrap for A11y
+- [Bootstrap Vue](https://bootstrap-vue.org/)
+  - lockScroll
+
+> There is no perfect library even the `final` of vue modal. 
+
+If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
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/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.19.0"
+    "vue-final-modal": "^0.19.1"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -5488,6 +5488,11 @@ is-https@^2.0.0, is-https@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-https/-/is-https-2.0.2.tgz#7009d303c72580f15897d5c063d6b6bc1f838fef"
   integrity sha512-UfUCKVQH/6PQRCh5Qk9vNu4feLZiFmV/gr8DjbtJD0IrCRIDTA6E+d/AVFGPulI5tqK5W45fYbn1Nir1O99rFw==
 
+is-mobile@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
+  integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
+
 is-nan@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/is-nan/-/is-nan-1.3.0.tgz#85d1f5482f7051c2019f5673ccebdb06f3b0db03"
@@ -9899,10 +9904,12 @@ 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.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.19.0.tgz#240c4dd1bb4986890d442824583aca0248926f86"
-  integrity sha512-zbTFd9byB93QAJM7sEYgqwfK60c8cpfDNx+S3x2Cd0RGWljlPoSp0jMRPSD4ZIYo3DIDgyp3Q0i9bsN2dPdODA==
+vue-final-modal@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.19.1.tgz#32d1df7526ef77f7f51298a84a943006929c1de1"
+  integrity sha512-7GJ73Xuul0+WrFf5CP0KE75hVZ272lcZ5NFNMStc+HSOf35mbXEz3TcRdDptl/SHECgWO7KJ7iknJIc8QJxEhQ==
+  dependencies:
+    is-mobile "^2.2.2"
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
diff --git a/lib/Plugin.js b/lib/Plugin.js
@@ -1,9 +1,11 @@
 import { bindPrototype, registComponent } from './PluginCore'
 import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
+import mobile from 'is-mobile'
 
 const defaultOptions = {
   componentName: 'VueFinalModal',
-  key: '$vfm'
+  key: '$vfm',
+  isMobile: mobile()
 }
 
 const Plugin = () => ({
diff --git a/lib/PluginCore.js b/lib/PluginCore.js
@@ -1,10 +1,12 @@
 import VueFinalModal from './VueFinalModal.vue'
+import { setStyle, removeStyle } from './utils/dom.js'
 
-function createVfm() {
+function createVfm(options) {
   let vfm
 
   return function() {
     vfm = {
+      isScrollLocked: false,
       openedModals: [],
       modals: [],
       show(name) {
@@ -23,25 +25,45 @@ function createVfm() {
         if (modal !== undefined) {
           modal.emit('update:modelValue', show === undefined ? !modal.value : show)
         }
+      },
+      lockScroll() {
+        if (this.isScrollLocked) return
+        if (options.isMobile) {
+          setStyle(document.body, 'overflow', 'hidden')
+        } else {
+          window.addEventListener('wheel', this.lockScrollListener, { passive: false })
+        }
+        this.isScrollLocked = true
+      },
+      unlockScroll() {
+        if (options.isMobile) {
+          removeStyle(document.body, 'overflow')
+        } else {
+          window.removeEventListener('wheel', this.lockScrollListener)
+        }
+        this.isScrollLocked = false
+      },
+      lockScrollListener(e) {
+        e.preventDefault()
       }
     }
     return vfm
   }
 }
 
-export function bindPrototype(app, { key }) {
-  const vfm = createVfm()()
-  Object.defineProperty(app.config.globalProperties, key, {
+export function bindPrototype(app, options) {
+  const vfm = createVfm(options)()
+  Object.defineProperty(app.config.globalProperties, options.key, {
     get() {
       return vfm
     }
   })
-  app.provide(key, vfm)
+  app.provide(options.key, vfm)
 }
 
-export function registComponent(app, { componentName, key }) {
-  app.component(componentName, {
+export function registComponent(app, options) {
+  app.component(options.componentName, {
     ...VueFinalModal,
-    props: { ...VueFinalModal.props, _key: { type: String, default: key } }
+    props: { ...VueFinalModal.props, options: { type: Object, default: () => options } }
   })
 }
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -58,7 +58,6 @@
 <script setup="props, { emit }">
 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,7 +109,7 @@ export const root = ref(null)
 export const vfmContent = ref(null)
 export const vfmContainer = ref(null)
 
-const $vfm = inject(props._key)
+const $vfm = inject(props.options.key)
 
 const modalStackIndex = ref(null)
 const $focusTrap = new FocusTrap()
@@ -257,7 +256,7 @@ function close() {
 }
 function handleLockScroll() {
   if (props.modelValue) {
-    props.lockScroll ? setStyle(document.body, 'overflow', 'hidden') : removeStyle(document.body, 'overflow')
+    props.lockScroll ? $vfm.lockScroll() : $vfm.unlockScroll()
   }
 }
 function getAttachElement() {
@@ -324,7 +323,7 @@ export function afterModalLeave() {
   modalTransitionState.value = TransitionState.Leave
   modalStackIndex.value = null
   if ($vfm.openedModals.length === 0) {
-    props.lockScroll && removeStyle(document.body, 'overflow')
+    props.lockScroll && $vfm.unlockScroll()
   }
   emit('closed')
 }
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@vue/cli-plugin-eslint": "^4.5.6",
     "@vue/cli-service": "^4.5.6",
@@ -36,7 +37,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.0-beta.3",
     "lint-staged": "^10.2.11",
-    "rollup": "^2.27.0",
+    "rollup": "^2.30.0",
     "rollup-plugin-cleanup": "^3.1.1",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-terser": "^7.0.2",
@@ -52,12 +53,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hunterliu1003/vue-final-modal.git"
+    "url": "git+https://github.com/vue-final/vue-final-modal.git"
   },
   "author": "Hunter Liu",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/hunterliu1003/vue-final-modal/issues"
+    "url": "https://github.com/vue-final/vue-final-modal/issues"
   },
   "homepage": "https://vue-final-modal.org",
   "keywords": [
@@ -69,5 +70,8 @@
     "vue-modal",
     "vue-dialog",
     "vue-component"
-  ]
+  ],
+  "dependencies": {
+    "is-mobile": "^2.2.2"
+  }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,7 @@
 import VuePlugin from 'rollup-plugin-vue'
 import PostCSS from 'rollup-plugin-postcss'
 import NodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
 import babel from '@rollup/plugin-babel'
 import cleanup from 'rollup-plugin-cleanup'
 import { terser } from 'rollup-plugin-terser'
@@ -10,6 +11,7 @@ const pkg = require('./package.json')
 
 const plugins = [
   NodeResolve(),
+  commonjs(),
   VuePlugin(),
   babel({ babelHelpers: 'bundled' }),
   cleanup(),
diff --git a/yarn.lock b/yarn.lock
