Merge branch 'master' into next

Author: hunterliu1003

README.md

@@ -1,12 +1,13 @@
 # Vue Final Modal
 
-<p align="center"><a href="https://hunterliu1003.github.io/vue-final-modal/" target="_blank" rel="noopener noreferrer"><img src="https://hunterliu1003.github.io/vue-final-modal/preview.png" alt="Vue Final Modal Logo"></a></p>
+<p align="center"><a href="https://vue-final-modal.org" target="_blank" rel="noopener noreferrer"><img src="https://vue-final-modal.org/preview.png" alt="Vue Final Modal Logo"></a></p>
 
 <p align="center">
   <a href="https://npmcharts.com/compare/vue-final-modal?minimal=true"><img src="https://img.shields.io/npm/dm/vue-final-modal.svg?sanitize=true" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/bundlephobia/minzip/vue-final-modal" alt="Size"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://img.shields.io/npm/v/vue-final-modal.svg?sanitize=true" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://img.shields.io/npm/l/vue-final-modal.svg?sanitize=true" alt="License"></a>
+  <a href="https://app.netlify.com/sites/vue-final-modal/deploys"><img src="https://api.netlify.com/api/v1/badges/444b13a8-540f-4438-94da-80c865c8f103/deploy-status" alt="Netlify Status"></a>
 </p>
 
 <p align="right">
@@ -15,9 +16,9 @@
   </a>
 </p>
 
-### 🎉 [Documentation](https://hunterliu1003.github.io/vue-final-modal/)
+### 🎉 [Documentation](https://vue-final-modal.org)
 
-### 🙌 [Examples](https://hunterliu1003.github.io/vue-final-modal/examples)
+### 🙌 [Examples](https://vue-final-modal.org/examples)
 
 ## Introduction
 

deploy.sh

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    x="0px"
+    y="0px"
+    viewBox="0 0 100 100"
+    width="16"
+    height="16"
+  >
+    <path
+      fill="currentColor"
+      d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
+    />
+    <polygon
+      fill="currentColor"
+      points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
+    />
+  </svg>
+</template>

docs/components/global/BaseButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <a :href="url" class="codepen-link" target="_blank" rel="noopener noreferrer">
+    SEE PEN
+    <OutboundLink></OutboundLink>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.codepen-link {
+  @apply text-gray-600 text-sm font-medium inline-flex items-center;
+}
+.codepen-link:hover {
+  @apply underline;
+}
+.codepen-link::before {
+  content: unset;
+}
+.dark-mode .codepen-link {
+  @apply text-gray-400;
+}
+</style>

docs/components/global/OutboundLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <details>
+  <details class="pt-4">
     <summary class="outline-none">Show code</summary>
     <slot />
   </details>

docs/components/global/OuterLink.vue

@@ -5,27 +5,31 @@ position: 3
 category: Getting Start
 ---
 
-## `@before-open`
+## All events
+
+### `@before-open`
 
 Emits while modal is still invisible, but before transition starting.
 
-## `@opened`
+### `@opened`
 
 Emits after modal became visible and transition ended. 
 
-## `@before-close`
+### `@before-close`
 
 Emits before modal is going to be closed. 
 
-## `@closed`
+### `@closed`
 
 Emits right before modal is destroyed.
 
 ## Examples
 
 <tailwind-events></tailwind-events>
 
-```html[SFC]
+<show-code open>
+
+```html
 <template>
     <vue-final-modal
       @before-open="beforeOpen"
@@ -36,4 +40,6 @@ Emits right before modal is destroyed.
       ...modal content
     </vue-final-modal>
 </template>
-```
+```
+
+</show-code>