support vue 3.0

Author: hunterliu1003

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
     parser: 'babel-eslint'
   },

dist/VueFinalModal.esm.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
     parser: 'babel-eslint'
   },

dist/VueFinalModal.esm.js.map

@@ -10,21 +10,26 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "tailwindcss": "^1.4.6",
-    "vue": "^2.6.11",
+    "vue": "^3.0.0",
     "vue-final-modal": "link:.."
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
+    "@vue/cli-plugin-babel": "4.5.6",
+    "@vue/cli-plugin-eslint": "4.5.6",
+    "@vue/cli-service": "4.5.6",
+    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
     "lint-staged": "^9.5.0",
+<<<<<<< HEAD
     "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11"
+=======
+    "prettier": "^1.19.1"
+>>>>>>> support vue 3.0
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

dist/VueFinalModal.umd.js

@@ -1,18 +1,16 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/css/tailwind.css'
 import components from '@/components/index.js'
 
 import { VueFinalModal } from 'vue-final-modal'
 
-Vue.component('VueFinalModal', VueFinalModal)
+const app = createApp(App)
+
+app.component('VueFinalModal', VueFinalModal)
 
 Object.keys(components).forEach(name => {
-  Vue.component(name, components[name])
+  app.component(name, components[name])
 })
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')
+app.mount('#app')

dist/VueFinalModal.umd.js.map

@@ -33,7 +33,7 @@
         v-show="visibility.modal"
         class="vfm__container vfm--absolute vfm--inset"
         :class="[classes, { 'vfm--cursor-pointer': clickToClose }]"
-        @click="clickToClose && $emit('input', false)"
+        @click="clickToClose && $emit('update:modelValue', false)"
       >
         <slot name="content-before" />
         <slot name="content">
@@ -78,7 +78,7 @@ const CLASS_TYPES = [String, Object, Array]
 export default {
   name: 'VueFinalModal',
   props: {
-    value: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     ssr: { type: Boolean, default: true },
     classes: { type: CLASS_TYPES, default: '' },
     overlayClass: { type: CLASS_TYPES, default: '' },
@@ -93,6 +93,13 @@ export default {
     zIndexBase: { type: [String, Number], default: 1000 },
     zIndex: { type: [Boolean, String, Number], default: false }
   },
+  emits: [
+    'update:modelValue',
+    'before-open',
+    'opened',
+    'before-close',
+    'closed'
+  ],
   data: () => ({
     modalStackIndex: null,
     visible: false,
@@ -124,15 +131,15 @@ export default {
     }
   },
   watch: {
-    value(value) {
+    modelValue(value) {
       this.mounted()
       if (!value) {
         this.close()
       }
     },
     lockScroll: 'handleLockScroll',
     hideOverlay(value) {
-      if (this.value && !value) {
+      if (this.modelValue && !value) {
         this.visibility.overlay = true
       }
     },
@@ -146,13 +153,13 @@ export default {
   mounted() {
     this.mounted()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.close()
     this.$el.remove()
   },
   methods: {
     mounted() {
-      if (this.value) {
+      if (this.modelValue) {
         let target = this.getAttachElement()
         if (target || this.attach === false) {
           this.attach !== false && target.appendChild(this.$el)