Merge branch 'master' into next

Author: hunterliu1003

README.md

@@ -39,7 +39,7 @@ features:
 
 ## Install
 
-### Vue 3.0
+**Vue 3.0**
 
 NPM:
 
@@ -53,7 +53,7 @@ Yarn:
 yarn add vue-final-modal@next
 ```
 
-### Vue 2.x
+**Vue 2.x**
 
 NPM:
 
@@ -69,7 +69,7 @@ yarn add vue-final-modal
 
 ## Basic usage
 
-1. Import and register the modal component.
+**1. Import and register the modal component.**
 
 ```js
 import { VueFinalModal } from 'vue-final-modal'
@@ -81,21 +81,21 @@ export default {
 }
 ```
 
-2. Add the modal component to the template.
+**2. Add the modal component to the template.**
 
 ```html
 <vue-final-modal v-model="showModal">
   Modal Content Here
 </vue-final-modal>
 ```
 
-3. Create a button to toggle the modal.
+**3. Create a button to toggle the modal.**
 
 ```html
 <button @click="showModal = true">Launch</button>
 ```
 
-4. All default props
+**4. All default props**
 
 ```js
 const CLASS_TYPES = [String, Object, Array]
@@ -118,7 +118,7 @@ const CLASS_TYPES = [String, Object, Array]
 }
 ```
 
-5. Events.
+**5. Events.**
 
 - @before-open: Before open
 - @opened: When opened

docs/content/en/examples/stepByStep.md

@@ -16,19 +16,17 @@ fullscreen: true
 
 ## Style the modal component step by step
 
-**1. Hello, `vue-final-modal` !**
+**1. Hello, `vue-final-modal`**
 
 <v-basic></v-basic>
 
-<!-- <codepen path="basic/VBasic"></codepen> -->
-
 <show-code>
 
 ```vue
 <template>
   <div>
     <vue-final-modal v-model="showModal">
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>
   </div>
@@ -56,15 +54,13 @@ export default {
 
 <v-background></v-background>
 
-<!-- <codepen path="basic/VBackground"></codepen> -->
-
 <show-code>
 
 ```vue
 <template>
   <div>
     <vue-final-modal v-model="showModal" content-class="modal-content">
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>
   </div>
@@ -106,8 +102,6 @@ export default {
 
 <v-centered></v-centered>
 
-<!-- <codepen path="basic/VCentered"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -118,7 +112,7 @@ export default {
       classes="modal-container"
       content-class="modal-content"
     >
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>
   </div>
@@ -167,8 +161,6 @@ export default {
 
 <v-content></v-content>
 
-<!-- <codepen path="basic/VContent"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -179,7 +171,7 @@ export default {
       classes="modal-container"
       content-class="modal-content"
     >
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>
           Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -234,8 +226,6 @@ export default {
 
 <v-close-button></v-close-button>
 
-<!-- <codepen path="basic/VCloseButton"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -249,7 +239,7 @@ export default {
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>
           Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -311,8 +301,6 @@ export default {
 
 <v-scrollable></v-scrollable>
 
-<!-- <codepen path="basic/VScrollable"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -326,7 +314,7 @@ export default {
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p v-for="i in 100" :key="i">
           Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -393,8 +381,6 @@ export default {
 
 <v-action-buttons></v-action-buttons>
 
-<!-- <codepen path="basic/VActionButtons"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -408,7 +394,7 @@ export default {
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p v-for="i in 100" :key="i">
           Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -461,6 +447,8 @@ export default {
 .modal__action {
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
   padding: 1rem 0 0;
 }
 .modal__close {
@@ -484,8 +472,6 @@ export default {
 
 <v-stackable></v-stackable>
 
-<!-- <codepen path="basic/VStackable"></codepen> -->
-
 <show-code>
 
 ```vue
@@ -496,10 +482,10 @@ export default {
       classes="modal-container"
       content-class="modal-content"
     >
-      <button class="modal__close" @click="showModal = true">
+      <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
-      <span class="modal__title">Hello, vue-final-modal !</span>
+      <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p v-for="i in 100" :key="i">
           Vue Final Modal is a renderless, stackable, detachable and lightweight
@@ -585,6 +571,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
   padding: 1rem 0 0;
 }
 .modal__close {

docs/package.json

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