Merge branch 'dev' into next

Author: hunterliu1003

README.md

@@ -103,7 +103,12 @@ Vue.use(VueFinalModal)
 ```js
 // nuxt.config.js
 export default {
-  plugins: ['~plugins/vue-final-modal.js']
+  plugins: [
+    { src: '~plugins/vue-final-modal.js' }
+  ],
+  build: {
+    transpile: ['vue-final-modal']
+  }
 }
 ```
 

docs/content/en/examples/recommended-use.md

@@ -21,15 +21,11 @@ You can create a `higher-order component` easily and can customize `template`, `
 ```vue
 <template>
   <vue-final-modal
-    :value="value"
     v-bind="$attrs"
     classes="modal-container"
     content-class="modal-content"
     v-on="$listeners"
   >
-    <button class="modal__close" @click="$emit('input', false)">
-      <mdi-close></mdi-close>
-    </button>
     <span class="modal__title">
       <slot name="title"></slot>
     </span>
@@ -40,15 +36,15 @@ You can create a `higher-order component` easily and can customize `template`, `
       <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
       <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
     </div>
+    <button class="modal__close" @click="$emit('input', false)">
+      <mdi-close></mdi-close>
+    </button>
   </vue-final-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
-  props: {
-    value: { type: Boolean, default: false }
-  }
+  name: 'VModal'
 }
 </script>
 

docs/content/en/index.md

@@ -120,6 +120,9 @@ export default {
   plugins: [
     '~plugins/vue-final-modal.js'
   ],
+  build: {
+    transpile: ['vue-final-modal'],
+  }
 }
 ```
 

docs/nuxt.config.js

@@ -22,7 +22,8 @@ export default theme({
     ]
   ],
   build: {
-    extractCSS: true
+    extractCSS: true,
+    transpile: ['vue-final-modal']
   },
   css: ['../example/src/assets/css/button.css'],
   modules: ['@nuxtjs/sitemap'],

docs/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
     "nuxt": "^2.14.1",
-    "vue-final-modal": "^0.13.5"
+    "vue-final-modal": "^0.16.0"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",

docs/plugins/global.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 
-import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
-// import VueFinalModal from '../../lib/VueFinalModal.vue'
+import VueFinalModal from 'vue-final-modal/lib'
 
 Vue.use(VueFinalModal)
 

docs/yarn.lock

@@ -2445,11 +2445,6 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^3.0.3:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
-  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
-
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -9904,12 +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.13.5:
-  version "0.13.5"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.13.5.tgz#60e6d00794400e9a4c98edf80f5d63c0db8f8c21"
-  integrity sha512-ALFXJa8tRPgmEHqQwIoI84KygvibJ8EhYnY14DUuLwabij89HjnGY54LonFfNPwK2CYFmcWimkVw6pQ/QBm3xg==
-  dependencies:
-    body-scroll-lock "^3.0.3"
+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-hot-reload-api@^2.3.0:
   version "2.3.4"

example/src/components/hoc/VModal.vue

@@ -1,13 +1,9 @@
 <template>
   <vue-final-modal
-    :value="value"
     v-bind="$attrs"
     classes="modal-container"
     content-class="modal-content"
   >
-    <button class="modal__close" @click="$emit('input', false)">
-      <mdi-close></mdi-close>
-    </button>
     <span class="modal__title">
       <slot name="title"></slot>
     </span>
@@ -18,15 +14,15 @@
       <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
       <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
     </div>
+    <button class="modal__close" @click="$emit('input', false)">
+      <mdi-close></mdi-close>
+    </button>
   </vue-final-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
-  props: {
-    value: { type: Boolean, default: false }
-  }
+  name: 'VModal'
 }
 </script>