Version/2.2 (#95)

* feat: support v-html in dynamic modal slot (#73)
* feat: add postcss plugin autoprefixer (#71)
* refactor: plugin validation, unit test (#70)
* feat: vite (#78)
* feat: api return promise (#76)
* feat: add close method to scoped-slot (#93)

Author: hunterliu1003

.babelrc

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

.browserslistrc

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

.eslintignore

@@ -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
-      }
-    }
-  ]
+  }
 }

.eslintrc.js

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

dist/VueFinalModal.esm.js

@@ -31,13 +31,18 @@ export default {
 - Arguments:
   - name: `String` - Name of the modal
   - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
+- Returns: Promise<Object> | Promise<Array>
+  
 
 <show-code text="Example">
 
 <v-api-show class="py-4"></v-api-show>
 
 ```js
 this.$vfm.show('example', { userName: 'vue-final-modal' })
+  .then(() => {
+    // do something on modal opened
+  })
 ```
 
 ```html[Modal.vue]
@@ -67,6 +72,7 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 - Type: `Function`
 - Arguments:
   - names: `String` - The names to hide
+- Returns: Promise<Object> | Promise<Array>
 
 <show-code text="Example">
 
@@ -83,7 +89,9 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
       show2: true
     }),
     mounted() {
-      this.$vfm.hide('example', 'example2')
+      this.$vfm.hide('example', 'example2').then(() => {
+        // do something on modal closed
+      })
     }
   }
 </script>
@@ -93,18 +101,33 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 
 ### `hideAll()`
 
+- Returns: Promise<Object> | Promise<Array>
+
 hide all modals.
 
+```js
+this.$vfm.hideAll().then(() => {
+  // do something on all modals closed
+})
+```
+
 ### `toggle(name, show, params)`
 
 - Type: `Function`
 - Arguments:
   - name: [`String` | `Array`] - The names of the modal
   - show: `?: Boolean` - Show modal or not
   - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
+- Returns: Promise<Object> | Promise<Array>
 
 toggle modals by name.
 
+```js
+this.$vfm.toggle('myModal').then(() => {
+  // do something on modals opened or closed, it depends on params `show` is true or false
+})
+```
+
 ### `get([names])`
 
 - Type: `Function`

dist/VueFinalModal.esm.js.map

@@ -42,6 +42,7 @@ To show dynamic modal you can use the API `$vfm.show` function.
 - Arguments:
   - dynamicModalOptions: `Object`
   - params: same as [API $vfm.show](/api#showname-params)
+- Returns: Promise<Object> | Promise<Array>
 
 ```ts
 type dynamicModalOptions = {

dist/VueFinalModal.umd.js

@@ -0,0 +1,42 @@
+---
+title: Scoped Slots
+description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+position: 6
+category: Guide
+fullscreen: true
+---
+
+## close
+
+- type: `Function`
+
+When you are using vue-final-modal as a HOC. you can `close` modal with scoped-slot:
+
+```vue
+<template>
+  <vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
+    <div>Hello Vue Final Modal</div>
+    <button @click="close">close modal</button>
+  </vue-final-modal>
+</template>
+
+<script>
+export default {
+  name: 'VModal',
+  inheritAttrs: false
+}
+</script>
+```
+
+## params
+
+- type: `Any`
+- default: `{}`
+
+When you open a modal though the [API](/api) `$vfm.show(name, params)`, you can get `params` with scoped-slot:
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```

dist/VueFinalModal.umd.js.map

@@ -31,13 +31,17 @@ export default {
 - 參數：
   - name: `String` - 指定 modal 的名字。
   - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/zh-Hant/guide/params).
+- 回傳: Promise<Object> | Promise<Array>
 
 <show-code text="Example">
 
 <v-api-show class="py-4"></v-api-show>
 
 ```js
 this.$vfm.show('example', { userName: 'vue-final-modal' })
+  .then(() => {
+    // 當 modal 開啟後，做一些事
+  })
 ```
 
 ```html[Modal.vue]
@@ -67,6 +71,7 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 - 型別： `Function`
 - 參數：
   - names: `String` - 指定要隱藏 modal 名稱。
+- 回傳: Promise<Object> | Promise<Array>
 
 <show-code text="Example">
 
@@ -83,7 +88,9 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
       show2: true
     }),
     mounted() {
-      this.$vfm.hide('example', 'example2')
+      this.$vfm.hide('example', 'example2').then(() => {
+        // 當 modal 關閉後，做一些事
+      })
     }
   }
 </script>
@@ -93,18 +100,33 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 
 ### `hideAll()`
 
+- 回傳: Promise<Object> | Promise<Array>
+
 關閉所有的 modal。
 
+```js
+this.$vfm.hideAll().then(() => {
+  // 當所有 modal 關閉後，做一些事
+})
+```
+
 ### `toggle(name, show, params)`
 
 - 型別： `Function`
 - 參數：
   - name: [`String` | `Array`] - modal 的名稱。
   - show: `?: Boolean` - 打開或隱藏這個 modal。
   - params: `?: object` - 任何你想要傳入 modal 的資料，詳閱 [參數（params）](/zh-Hant/guide/params)。
+- 回傳: Promise<Object> | Promise<Array>
 
 根據名字（name）切換 modals 的狀態。
 
+```js
+this.$vfm.toggle('myModal').then(() => {
+  // 當多個 modal 被開啟或被關閉時，做一些事，開啟或關閉取決於 show 參數給的是 true 或 false
+})
+```
+
 ### `get([names])`
 
 - 型別： `Function`

docs/components/examples/VContent.vue renamed to docs/components/examples/VDescription.vue

@@ -42,6 +42,7 @@ features:
 - 參數：
   - dynamicModalOptions: `Object`
   - params: 與 [API $vfm.show](/zh-Hant/api#showname-params) 相同
+- 回傳: Promise<Object> | Promise<Array>
 
 ```ts
 type dynamicModalOptions = {

docs/components/examples/basic/VDynamicAdvanced.vue

@@ -0,0 +1,42 @@
+---
+title: 作用域插槽 (Scoped Slots)
+description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+position: 6
+category: Guide
+fullscreen: true
+---
+
+## close
+
+- 型別： `Function`
+
+當你以 HOC 的方式使用 vue-final-modal 時. 你可以以 scoped-slot 關閉(close) modal：
+
+```vue
+<template>
+  <vue-final-modal v-slot="{ close }" v-bind="$attrs" v-on="$listeners">
+    <div>哈囉，Vue Final Modal</div>
+    <button @click="close">close modal</button>
+  </vue-final-modal>
+</template>
+
+<script>
+export default {
+  name: 'VModal',
+  inheritAttrs: false
+}
+</script>
+```
+
+## params
+
+- 型別： `Any`
+- 預設： `{}`
+
+當你透過 [API](/zh-Hant/api) `$vfm.show(name, params)` 開啟 modal，你可以使用 scoped-slot 取得 params：
+
+```html
+<template v-slot="{ params }">
+  <!-- modal content -->
+</template>
+```

docs/content/en/api.md

@@ -9,7 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "@nuxt/content-theme-docs": "^0.8.2",
+    "@nuxt/content-theme-docs": "0.10.0",
     "nuxt": "^2.14.12",
     "vue-final-modal": "^2.1.0"
   },