feat: api return promise, refactor unit test

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -31,13 +31,17 @@ 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 +71,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 +88,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 +100,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

@@ -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`

dist/VueFinalModal.umd.js.map

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

docs/content/en/api.md

@@ -1,6 +1,6 @@
 <template>
   <vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content">
-    <button class="modal__close" @click="$attrs['update:modalValue']">
+    <button class="modal__close" @click="$attrs['onUpdate:modelValue'](false)">
       <mdi-close></mdi-close>
     </button>
     <span class="modal__title">Hello, vue-final-modal</span>

docs/content/en/dynamic-modal.md

@@ -25,7 +25,7 @@ export default {
   emits: ['confirm', 'cancel'],
   methods: {
     close() {
-      $attrs['update:modalValue']()
+      this.$attrs['onUpdate:modelValue'](false)
     }
   }
 }