Merge branch 'master' into next

Author: hunterliu1003

README.md

@@ -10,7 +10,7 @@
 </p>
 
 <p align="right">
-  <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank">
+  <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank" rel="noopener noreferrer">
     <img width="200" src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" />
   </a>
 </p>

docs/content/en/examples/tailwind.md

@@ -6,7 +6,7 @@ category: Examples
 fullscreen: true
 ---
 
-See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-modal/tree/master/docs/components/global/tailwind)
+See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-modal/tree/master/example/src/components/tailwind)
 
 ## Simple
 

docs/content/en/index.md

@@ -16,8 +16,8 @@ features:
   - Tiny bundle size
 ---
 
-<img src="/vue-final-modal/preview.png" class="light-img" />
-<img src="/vue-final-modal/preview-dark.png" class="dark-img" />
+<img src="/vue-final-modal/preview.png" class="light-img" alt="Vue Final Modal Logo" />
+<img src="/vue-final-modal/preview-dark.png" class="dark-img" alt="Vue Final Modal Logo" />
 
 
 <p class="flex space-x-4">
@@ -28,7 +28,7 @@ features:
 </p>
 
 <p align="right">
-  <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank">
+  <a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank" rel="noopener noreferrer">
     <img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
   </a>
 </p>
@@ -85,7 +85,7 @@ npm install vue-final-modal
 
 ## Basic usage
 
-#### 1. Import and register the modal component.
+### Register component
 
 ```js
 import { VueFinalModal } from 'vue-final-modal'
@@ -97,21 +97,21 @@ export default {
 }
 ```
 
-#### 2. Add the modal component to the template.
+### Add component
 
 ```html
 <vue-final-modal v-model="showModal">
   Modal Content Here
 </vue-final-modal>
 ```
 
-#### 3. Create a button to toggle the modal.
+### Create a button
 
 ```html
 <button @click="showModal = true">Launch</button>
 ```
 
-#### 4. All default props
+### All default props
 
 ```js
 const CLASS_TYPES = [String, Object, Array]
@@ -134,7 +134,7 @@ const CLASS_TYPES = [String, Object, Array]
 }
 ```
 
-#### 5. Events.
+### Events
 
 - @before-open: Before open
 - @opened: When opened
@@ -145,9 +145,7 @@ const CLASS_TYPES = [String, Object, Array]
 
 <basic-options></basic-options>
 
-## [See advanced examples](/examples)
-
-## [See codepen examples](/examples)
+## [See more examples](/examples)
 
 ## Contribution
 

docs/content/settings.json

@@ -7,5 +7,5 @@
   },
   "defaultBranch": "master",
   "github": "hunterliu1003/vue-final-modal",
-  "twitter": false
+  "twitter": "@hunterliu1003"
 }

docs/tailwind.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  purge: {
+    content: ['../example/src/components/**/*.vue']
+  },
   theme: {
     extend: {
       colors: {

example/src/components/basic/BasicOptions.vue

@@ -21,7 +21,7 @@
 
     <base-button @click="showModal = true">Open Basic Modal</base-button>
 
-    <h4>Prop Options:</h4>
+    <h3>Prop Options:</h3>
 
     <div
       class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded"
@@ -72,12 +72,14 @@
           <input v-model="allowZIndex" type="checkbox" />
           <span>zIndex:</span>
         </label>
-        <input
-          v-model="zIndex"
-          type="number"
-          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
-          :disabled="!allowZIndex"
-        />
+        <label>
+          <input
+            v-model="zIndex"
+            type="number"
+            class="w-20 pl-2 dark:text-black rounded focus:outline-none"
+            :disabled="!allowZIndex"
+          />
+        </label>
       </div>
       <label class="flex items-center space-x-2">
         <span>attach:</span>