Version/3.2 (#96)

* docs: Bump @nuxt/content-theme-docs (#84)

* feat: support v-html in dynamic modal slot (#86)

* feat(v3): favicon (#87)

* chore: add favicon

* feat(v3): autoprefixer (#88)

* feat: add postcss plugin autoprefixer

* feat(v3): plugin validation (#89)

* refactor: plugin validation, unit test

* feat(v3): vite (#90)

* Feat: vite

* feat(v3): api return promise (#91)

* feat: api return promise, refactor unit test

* feat: add close method to scoped-slot (#94)

.babelrc

@@ -1,3 +1,10 @@
 {
-  "presets": ["@babel/preset-env"]
-}
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "exclude": ["@babel/plugin-transform-regenerator"]
+      }
+    ]
+  ]
+}

.eslintignore

@@ -1,3 +1,11 @@
+# default
 dist
 types/**/*.d.ts
-docs
+
+# docs
+docs/.nuxt
+docs/docs
+docs/static
+
+# example
+example/dist

.eslintrc.js

@@ -1,30 +1,16 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    jest: true,
+    es2020: true
   },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'plugin:vue/vue3-strongly-recommended',
-    'plugin:vue/vue3-recommended',
-    '@vue/prettier'
-  ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
+    sourceType: 'module'
   },
   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
-      }
-    }
-  ]
+  }
 }

.prettierrc.yaml

@@ -3,6 +3,6 @@ printWidth: 120
 tabWidth: 2
 semi: false
 singleQuote: true
-# trailingComma: 'es5'
+trailingComma: 'none'
 # bracketSpacing: true
 arrowParens: 'avoid'

docs/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['plugin:vue/essential', 'plugin:vue/strongly-recommended', 'eslint:recommended', '@vue/prettier']
+}

docs/components/examples/basic/BasicOptions.vue

@@ -19,7 +19,7 @@
       @confirm="showModal = false"
       @cancel="showModal = false"
     >
-      <template v-slot:title># Hello, world!</template>
+      <template #title># Hello, world!</template>
       <p>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       </p>

docs/components/examples/basic/BasicPlainStyleCodepen.vue

@@ -1,7 +1,7 @@
 <template>
   <iframe
     height="600"
-    style="width: 100%;"
+    style="width: 100%"
     scrolling="no"
     title="Plain style - Vue Final Modal"
     src="https://codepen.io/hunterliu1003/embed/ZEWoYeE?height=265&theme-id=dark&default-tab=js,result"

docs/components/examples/basic/VAccessibility.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-    <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.
-      </p>
+    <v-modal v-model="show" focus-trap @confirm="show = false" @cancel="show = false">
+      <template #title>Hello, vue-final-modal</template>
+      <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </v-modal>
 
     <button class="vfm-btn" @click="show = true">Open modal</button>

docs/components/examples/basic/VApiShow.vue

@@ -1,12 +1,10 @@
 <template>
   <div>
     <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>
+      <template #default="{ params }"> Hi {{ params.userName }} </template>
+      <template #title>$vfm.show</template>
     </v-modal>
-    <button class="vfm-btn" @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">
-      Open modal
-    </button>
+    <button class="vfm-btn" @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</button>
   </div>
 </template>
 

docs/components/examples/basic/VCloseButton.vue

@@ -6,9 +6,7 @@
       </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.
-        </p>
+        <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>

docs/components/examples/basic/VContent.vue

@@ -3,9 +3,7 @@
     <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.
-        </p>
+        <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>

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.'
             }

docs/components/examples/basic/VDynamicModal.vue

@@ -5,9 +5,7 @@
     </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.
-      </p>
+      <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
   </vue-final-modal>
 </template>

docs/components/examples/basic/VEvents.vue

@@ -9,7 +9,7 @@
       @closed="closed"
       @cancel="showModal = false"
     >
-      <template v-slot:title>Events Example!</template>
+      <template #title>Events Example!</template>
     </v-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>
   </div>

docs/components/examples/basic/VParams.vue

@@ -8,7 +8,7 @@
       prevent-click
       @closed="e => e.stop()"
     >
-      <template v-slot="{ params }">
+      <template #default="{ params }">
         <button class="modal__close" @click="$vfm.hide('stackable')">
           <mdi-close></mdi-close>
         </button>
@@ -19,27 +19,15 @@
           </p>
         </div>
         <div class="modal__action">
-          <button class="vfm-btn" @click="$vfm.hide('stackable')">
-            confirm
-          </button>
-          <button class="vfm-btn" @click="$vfm.hide('stackable')">
-            cancel
-          </button>
+          <button class="vfm-btn" @click="$vfm.hide('stackable')">confirm</button>
+          <button class="vfm-btn" @click="$vfm.hide('stackable')">cancel</button>
         </div>
       </template>
     </vue-final-modal>
-    <button class="vfm-btn" @click="$vfm.show('stackable', { test: 123 })">
-      Show modal with params
-    </button>
-    <button class="vfm-btn" @click="$vfm.toggle('stackable', null, { test: 321 })">
-      Toggle modal with params
-    </button>
-    <button class="vfm-btn" @click="$vfm.show('stackable')">
-      Show modal
-    </button>
-    <button class="vfm-btn" @click="$vfm.hide('stackable')">
-      Hide modal
-    </button>
+    <button class="vfm-btn" @click="$vfm.show('stackable', { test: 123 })">Show modal with params</button>
+    <button class="vfm-btn" @click="$vfm.toggle('stackable', null, { test: 321 })">Toggle modal with params</button>
+    <button class="vfm-btn" @click="$vfm.show('stackable')">Show modal</button>
+    <button class="vfm-btn" @click="$vfm.hide('stackable')">Hide modal</button>
   </div>
 </template>
 

docs/components/examples/basic/VStackable.vue

@@ -13,9 +13,7 @@
       </div>
       <div class="modal__action">
         <span>Try click →&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <button class="vfm-btn" @click="showConfirmModal = true">
-          confirm
-        </button>
+        <button class="vfm-btn" @click="showConfirmModal = true">confirm</button>
         <button class="vfm-btn" @click="showModal = false">cancel</button>
       </div>
     </vue-final-modal>
@@ -26,16 +24,10 @@
         <mdi-close></mdi-close>
       </button>
       <span class="modal__title">Confirm</span>
-      <div class="modal__content">
-        Confirm to submit.
-      </div>
+      <div class="modal__content">Confirm to submit.</div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="confirm">
-          confirm
-        </button>
-        <button class="vfm-btn" @click="showConfirmModal = false">
-          cancel
-        </button>
+        <button class="vfm-btn" @click="confirm">confirm</button>
+        <button class="vfm-btn" @click="showConfirmModal = false">cancel</button>
       </div>
     </vue-final-modal>
 

docs/components/examples/basic/VStopBeforeClose.vue

@@ -16,12 +16,8 @@
         </p>
       </div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="showModal = false">
-          confirm
-        </button>
-        <button class="vfm-btn" @click="showModal = false">
-          cancel
-        </button>
+        <button class="vfm-btn" @click="showModal = false">confirm</button>
+        <button class="vfm-btn" @click="showModal = false">cancel</button>
       </div>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>

docs/components/examples/basic/VStopBeforeOpen.vue

@@ -16,12 +16,8 @@
         </p>
       </div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="showModal = false">
-          confirm
-        </button>
-        <button class="vfm-btn" @click="showModal = false">
-          cancel
-        </button>
+        <button class="vfm-btn" @click="showModal = false">confirm</button>
+        <button class="vfm-btn" @click="showModal = false">cancel</button>
       </div>
     </vue-final-modal>
     <button class="vfm-btn" @click="showModal = true">Open modal</button>

docs/components/examples/hoc/HocExample.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
     <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
-      <template v-slot:title>Hello, vue-final-modal</template>
-      <p>
-        Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
-      </p>
+      <template #title>Hello, vue-final-modal</template>
+      <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </v-modal>
 
     <button class="vfm-btn" @click="show = true">Open modal</button>

docs/components/examples/hoc/HocExampleTailwind.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
     <v-tailwind-modal v-model="show" @confirm="confirm" @cancel="cancel">
-      <template v-slot:title>Hello, vue-final-modal</template>
-      <p>
-        Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
-      </p>
+      <template #title>Hello, vue-final-modal</template>
+      <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </v-tailwind-modal>
 
     <button class="vfm-btn" @click="show = true">Open modal</button>

docs/components/examples/hoc/HocExampleTailwindCustomTransition.vue

@@ -13,7 +13,7 @@
         'leave-class': 'translate-y-0'
       }"
     >
-      <template v-slot:title>Hello, vue-final-modal</template>
+      <template #title>Hello, vue-final-modal</template>
       <p>
         Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
       </p>

docs/components/examples/hoc/VModal.vue

@@ -1,19 +1,15 @@
 <template>
   <vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
-    <template v-slot="{ params }">
+    <template #default="{ params }">
       <span class="modal__title">
         <slot name="title"></slot>
       </span>
       <div class="modal__content">
-        <slot v-bind:params="params"></slot>
+        <slot :params="params"></slot>
       </div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="$emit('confirm', close)">
-          confirm
-        </button>
-        <button class="vfm-btn" @click="$emit('cancel', close)">
-          cancel
-        </button>
+        <button class="vfm-btn" @click="$emit('confirm', close)">confirm</button>
+        <button class="vfm-btn" @click="$emit('cancel', close)">cancel</button>
       </div>
       <button class="modal__close" @click="close">
         <mdi-close></mdi-close>

docs/components/examples/hoc/VTailwindModal.vue

@@ -5,12 +5,12 @@
     content-class="relative flex flex-col max-h-full mx-4 p-4 border dark:border-gray-800 rounded bg-white dark:bg-gray-900"
     v-on="$listeners"
   >
-    <template v-slot="{ params }">
+    <template #default="{ params }">
       <span class="mr-8 text-2xl font-bold ">
         <slot name="title"></slot>
       </span>
       <div class="flex-grow overflow-y-auto">
-        <slot v-bind:params="params"></slot>
+        <slot :params="params"></slot>
       </div>
       <div class="flex-shrink-0 flex justify-center items-center pt-4">
         <button class="vfm-btn" @click="$emit('confirm', close)">