update docs

Author: hunterliu1003

docs/components/global/BaseButton.vue

@@ -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/OutboundLink.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/OuterLink.vue

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

docs/components/global/ShowCode.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>

docs/content/en/events.md

@@ -0,0 +1,117 @@
+---
+title: Step by step
+description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+position: 2
+category: Examples
+fullscreen: true
+---
+
+<alert>
+
+[Checkout the example source code](https://github.com/hunterliu1003/vue-final-modal/tree/master/example/src/components/basic)
+
+</alert>
+
+
+
+## Style the modal component step by step
+
+**1. Hello, `vue-final-modal` !**
+
+<v-basic class="mb-4"></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>
+    </vue-final-modal>
+    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    showModal: false
+  })
+}
+</script>
+
+<style scoped>
+.modal__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+</style>
+```
+
+</show-code>
+
+**2. Add `background-color`, `border-radius`**
+
+<v-background class="mb-4"></v-background>
+
+<!-- <codepen path="basic/VBackground"></codepen> -->
+
+**3. Center the modal with prop `classes`**
+
+<v-centered class="mb-4"></v-centered>
+
+<!-- <codepen path="basic/VCentered"></codepen> -->
+
+**4. Add `content` for the modal**
+
+<v-content class="mb-4"></v-content>
+
+<!-- <codepen path="basic/VContent"></codepen> -->
+
+**5. Add button to close the modal**
+
+<v-close-button class="mb-4"></v-close-button>
+
+<!-- <codepen path="basic/VCloseButton"></codepen> -->
+
+**6. Make the modal `scrollable` and limit the `max-height` for mobile**
+
+<v-scrollable class="mb-4"></v-scrollable>
+
+<!-- <codepen path="basic/VScrollable"></codepen> -->
+
+**7. Add `confirm` and `cancel` buttons**
+
+<v-action-buttons class="mb-4"></v-action-buttons>
+
+<!-- <codepen path="basic/VActionButtons"></codepen> -->
+
+**8. Make the modal stackable**
+
+<v-stackable class="mb-4"></v-stackable>
+
+<!-- <codepen path="basic/VStackable"></codepen> -->
+
+### Optional steps
+
+**Prop: `hideOverlay`**
+
+<!-- <tailwind-hide-overlay></tailwind-hide-overlay> -->
+
+**Prop: `lockScroll`**
+
+<!-- <tailwind-lock-scroll></tailwind-lock-scroll> -->
+
+**Prop: `clickToClose`**
+
+<!-- <tailwind-click-to-close></tailwind-click-to-close> -->
+
+**Prop: `preventClick`**
+
+<!-- <tailwind-prevent-click></tailwind-prevent-click> -->
+
+**Prop: `attach`**
+
+<!-- <tailwind-attach></tailwind-attach> -->

docs/content/en/examples/stepByStep.md

@@ -1,7 +1,7 @@
 ---
 title: TailwindCSS
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
-position: 2
+position: 3
 category: Examples
 fullscreen: true
 ---
@@ -10,7 +10,7 @@ See [Tailwind Examples Source Code](https://github.com/hunterliu1003/vue-final-m
 
 ## Simple
 
-<tailwind-simple></tailwind-simple>
+<tailwind-basic></tailwind-basic>
 
 <show-code>
 

docs/content/en/examples/tailwind-codepen.md

@@ -45,7 +45,7 @@ If you need a highly customizable modal component for Vue.js, `Vue Final Modal`
 
 ## Installation
 
-### Vue 3.0
+**Vue 3.0**
 
 <code-group>
   <code-block label="Yarn" active>
@@ -64,7 +64,7 @@ npm install vue-final-modal@next
   </code-block>
 </code-group>
 
-### Vue 2.0
+**Vue 2.0**
 
 <code-group>
   <code-block label="Yarn" active>
@@ -85,7 +85,7 @@ npm install vue-final-modal
 
 ## Basic usage
 
-### Register component
+**1. Register component**
 
 ```js
 import { VueFinalModal } from 'vue-final-modal'
@@ -97,21 +97,21 @@ export default {
 }
 ```
 
-### Add component
+**2. Add component to template**
 
 ```html
 <vue-final-modal v-model="showModal">
   Modal Content Here
 </vue-final-modal>
 ```
 
-### Create a button
+**3. Create a button**
 
 ```html
 <button @click="showModal = true">Launch</button>
 ```
 
-### All default props
+**4. All default props**
 
 ```js
 const CLASS_TYPES = [String, Object, Array]
@@ -134,18 +134,18 @@ const CLASS_TYPES = [String, Object, Array]
 }
 ```
 
-### Events
+**5. All events**
 
 - @before-open: Before open
 - @opened: When opened
 - @before-close: Before close
 - @closed: After closed
 
-## Basic Example
+## Basic example
 
 <basic-options></basic-options>
 
-## [See more examples](/examples)
+<alert>[Checkout the live examples](/examples)</alert>
 
 ## Contribution