move example components

Author: hunterliu1003

docs/plugins/global.js

@@ -1,4 +1,9 @@
 import Vue from 'vue'
-import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
 
+import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
 Vue.component('VueFinalModal', VueFinalModal)
+
+import components from '../../example/src/components/index.js'
+Object.keys(components).forEach(name => {
+  Vue.component(name, components[name])
+})

example/src/App.vue

@@ -1,40 +1,12 @@
 <template>
   <div id="app" class="p-4">
-    <vue-final-modal
-      v-model="showModal"
-      classes="flex justify-center items-center"
-      content-class="w-2/3 max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
-    >
-      <h2 class="text-2xl mb-2"># Simple Modal</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget lacus
-        et urna tincidunt imperdiet. Sed sagittis nisl sed felis molestie, quis
-        aliquet nulla iaculis. Maecenas risus quam, dictum a magna sit amet,
-        rutrum sagittis turpis. Nulla lobortis ipsum a est tincidunt, vel
-        lobortis dolor dignissim. Mauris cursus condimentum interdum. Ut
-        venenatis purus a purus semper, sed posuere arcu dapibus. Proin non
-        metus tempus, accumsan ante eu, ullamcorper felis. Sed sed justo non
-        felis iaculis finibus. Nam ipsum diam, consectetur eget efficitur id,
-        malesuada dignissim magna. Sed sagittis, turpis ac posuere lacinia,
-        risus massa ornare eros, vitae condimentum lorem ante eget nisi. Proin
-        eget ornare lacus, suscipit lacinia turpis. Nam eu ante sed libero
-        tristique consequat eu non sapien.
-      </p>
-    </vue-final-modal>
-    <button class="base-button" @click="showModal = true">Simple</button>
+    <TailwindSimple />
+    <TailwindLockScroll />
+    <TailwindHideOverlay />
+    <TailwindClickToClose />
+    <TailwindPreventClick />
+    <TailwindStackable />
+    <TailwindScrollable />
+    <TailwindAttach />
   </div>
 </template>
-
-<script>
-export default {
-  data: () => ({
-    showModal: false
-  })
-}
-</script>
-
-<style scoped>
-.base-button {
-  @apply px-2 py-1 border rounded;
-}
-</style>

example/src/components/BaseButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <button class="base-button" v-on="$listeners">
+    <slot></slot>
+  </button>
+</template>
+
+<style scoped>
+.base-button {
+  @apply mb-2 px-2 py-1 border rounded;
+}
+</style>

docs/components/global/BaseGithubCorner.vue renamed to example/src/components/BaseGithubCorner.vue

@@ -28,7 +28,7 @@
   ></a>
 </template>
 
-<style lang="css" scoped>
+<style scoped>
 .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out;
 }

docs/components/global/BaseLorem.vue renamed to example/src/components/BaseLorem.vue

@@ -89,11 +89,7 @@
       id="attach"
       class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700"
     >
-      <base-button
-        @click="
-          attach = '#attach'
-          showModal = true
-        "
+      <base-button @click="openAttach"
         >Attach to here and open modal</base-button
       >
     </div>
@@ -131,6 +127,12 @@ export default {
         attach: this.attach ? '#attach' : false
       }
     }
+  },
+  methods: {
+    openAttach() {
+      this.attach = '#attach'
+      this.showModal = true
+    }
   }
 }
 </script>

docs/components/global/basic/BasicOptions.vue renamed to example/src/components/basic/BasicOptions.vue

@@ -18,43 +18,3 @@
     <a href="https://codepen.io">CodePen</a>.
   </iframe>
 </template>
-
-<script>
-export default {
-  data: () => ({
-    showModal: false
-  })
-}
-</script>
-
-<style>
-.modal-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.modal-content {
-  position: relative;
-  width: 50%;
-  max-height: 300px;
-  padding: 16px;
-  overflow: auto;
-  background-color: #fff;
-  border-radius: 4px;
-}
-.modal-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  margin: 8px 8px 0 0;
-  cursor: pointer;
-}
-.modal-close::hover {
-  color: gray;
-}
-</style>

docs/components/global/basic/BasicPlainStyleCodepen.vue renamed to example/src/components/basic/BasicPlainStyleCodepen.vue

@@ -0,0 +1,13 @@
+const requireModule = require.context('.', true, /\.vue$/)
+const modules = {}
+
+requireModule.keys().forEach(fileName => {
+  let moduleName = fileName.replace(/(\.\/|\.vue)/g, '')
+  moduleName = moduleName.split('/')[moduleName.split('/').length - 1]
+
+  modules[moduleName] = {
+    ...requireModule(fileName).default
+  }
+})
+
+export default modules