vue-final · hunterliu1003 · Apr 11, 2021 · Apr 7, 2021 · Apr 7, 2021 · Apr 8, 2021
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,10 @@
 {
-  "presets": ["@babel/preset-env"]
-}
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-regenerator"] 
+      }
+    ]
+  ]
+}
diff --git a/.browserslistrc b/.browserslistrc
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,11 @@
+# default
 dist
 types/**/*.d.ts
-docs
+
+# docs
+docs/.nuxt
+docs/docs
+docs/static
+
+# example
+example/dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    jest: true
   },
   extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
@@ -10,16 +11,5 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/unit/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
+  }
 }
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/docs/components/examples/VContent.vue → docs/components/examples/VDescription.vue b/docs/components/examples/VContent.vue → docs/components/examples/VDescription.vue
diff --git a/docs/components/examples/basic/VDynamicAdvanced.vue b/docs/components/examples/basic/VDynamicAdvanced.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import VContent from '../VContent.vue'
+import VDescription from '../VDescription.vue'
 
 export default {
   methods: {
@@ -48,7 +48,7 @@ export default {
             }
           },
           default: {
-            component: VContent,
+            component: VDescription,
             bind: {
               content: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
             }

diff --git a/example/.browserslistrc b/example/.browserslistrc
diff --git a/example/.eslintignore b/example/.eslintignore
diff --git a/example/.eslintrc.js b/example/.eslintrc.js
diff --git a/example/.prettierrc.yaml b/example/.prettierrc.yaml
diff --git a/example/babel.config.js b/example/babel.config.js
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Final Modal</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -3,37 +3,18 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "tailwindcss": "^1.4.6",
-    "vue": "^2.6.11",
     "vue-final-modal": "link:.."
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "lint-staged": "^9.5.0",
-    "prettier": "^1.19.1",
-    "raw-loader": "^4.0.1",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,vue}": [
-      "vue-cli-service lint"
-    ]
+    "vite": "^2.1.5",
+    "vite-plugin-components": "^0.8.3",
+    "vite-plugin-vue2": "^1.4.3",
+    "vite-plugin-windicss": "^0.12.5"
   },
   "repository": {
     "type": "git",

diff --git a/example/postcss.config.js b/example/postcss.config.js
diff --git a/example/public/index.html b/example/public/index.html
diff --git a/example/public/robots.txt b/example/public/robots.txt
diff --git a/example/src/components/VContent.vue → example/src/components/VDescription.vue b/example/src/components/VContent.vue → example/src/components/VDescription.vue
diff --git a/example/src/components/basic/BasicOptions.vue b/example/src/components/basic/BasicOptions.vue
@@ -21,18 +21,15 @@
     >
       <template v-slot:title># Hello, world!</template>
       <p>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry.
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       </p>
     </v-modal>
 
     <button class="vfm-btn" @click="showModal = true">Open Modal</button>
 
     <h3>Prop Options:</h3>
 
-    <div
-      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded"
-    >
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded">
       <label class="flex items-center space-x-2">
         <span>value:</span>
         <input v-model="showModal" type="checkbox" />
@@ -76,11 +73,7 @@
       </label>
       <label class="flex items-center space-x-2">
         <span>zIndexBase:</span>
-        <input
-          v-model="zIndexBase"
-          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
-          type="number"
-        />
+        <input v-model="zIndexBase" class="w-20 pl-2 dark:text-black rounded focus:outline-none" type="number" />
       </label>
       <div class="flex items-center space-x-2">
         <label class="flex items-center space-x-2">
@@ -111,10 +104,7 @@
       <button class="vfm-btn" @click="reset">reset</button>
     </div>
     <h4>Attach area:</h4>
-    <div
-      id="attach"
-      class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700"
-    >
+    <div id="attach" class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700">
       <button class="vfm-btn" @click="openAttach">
         Attach to here and open modal
       </button>

diff --git a/example/src/components/basic/BasicPlainStyleCodepen.vue b/example/src/components/basic/BasicPlainStyleCodepen.vue
@@ -11,9 +11,7 @@
     allowfullscreen="true"
   >
     See the Pen
-    <a href="https://codepen.io/hunterliu1003/pen/ZEWoYeE"
-      >Plain style - Vue Final Modal</a
-    >
+    <a href="https://codepen.io/hunterliu1003/pen/ZEWoYeE">Plain style - Vue Final Modal</a>
     by Hunter (<a href="https://codepen.io/hunterliu1003">@hunterliu1003</a>) on
     <a href="https://codepen.io">CodePen</a>.
   </iframe>

diff --git a/example/src/components/basic/VAccessibility.vue b/example/src/components/basic/VAccessibility.vue
@@ -1,15 +1,9 @@
 <template>
   <div>
-    <v-modal
-      v-model="show"
-      @confirm="show = false"
-      @cancel="show = false"
-      focus-trap
-    >
+    <v-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
       <template v-slot:title>Hello, vue-final-modal</template>
       <p>
-        Vue Final Modal is a renderless, stackable, detachable and lightweight
-        modal component.
+        Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
       </p>
     </v-modal>
 

diff --git a/example/src/components/basic/VActionButtons.vue b/example/src/components/basic/VActionButtons.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-    >
+    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
       <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
-          modal component.
+          Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
       <div class="modal__action">

diff --git a/example/src/components/basic/VApiShow.vue b/example/src/components/basic/VApiShow.vue
@@ -1,18 +1,10 @@
 <template>
   <div>
-    <v-modal
-      v-model="showModal"
-      name="VApiShow"
-      @confirm="showModal = false"
-      @cancel="showModal = false"
-    >
+    <v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
       <template v-slot="{ params }"> Hi {{ params.userName }} </template>
       <template v-slot:title>$vfm.show</template>
     </v-modal>
-    <button
-      class="vfm-btn"
-      @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })"
-    >
+    <button class="vfm-btn" @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">
       Open modal
     </button>
   </div>

diff --git a/example/src/components/basic/VCentered.vue b/example/src/components/basic/VCentered.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-    >
+    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>

diff --git a/example/src/components/basic/VCloseButton.vue b/example/src/components/basic/VCloseButton.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-    >
+    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>
-          Vue Final Modal is a renderless, stackable, detachable and lightweight
-          modal component.
+          Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
     </vue-final-modal>

diff --git a/example/src/components/basic/VContent.vue b/example/src/components/basic/VContent.vue
@@ -1,15 +1,10 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-    >
+    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>
-          Vue Final Modal is a renderless, stackable, detachable and lightweight
-          modal component.
+          Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
     </vue-final-modal>

diff --git a/example/src/components/basic/VDynamicAdvanced.vue b/example/src/components/basic/VDynamicAdvanced.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import VContent from '../VContent.vue'
+import VDescription from '../VDescription.vue'
 
 export default {
   methods: {
@@ -48,10 +48,9 @@ export default {
             }
           },
           default: {
-            component: VContent,
+            component: VDescription,
             bind: {
-              content:
-                'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+              content: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
             }
           }
         }