feat: api return promise

docs/content/en/api.md

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

docs/content/en/dynamic-modal.md

@@ -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 = {

docs/content/zh-Hant/api.md

@@ -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/content/zh-Hant/dynamic-modal.md

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

lib/ModalsContainer.vue

@@ -8,7 +8,8 @@
       v-bind="modal.bind"
       v-on="modal.on"
       @closed="slice(index)"
-      @before-open="e => beforeOpen(e, modal)"
+      @before-open="e => beforeOpen(e, modal, index)"
+      @opened="modal.opened"
     >
       <template v-for="(slot, key) in modal.slots" v-slot:[key]>
         <div v-if="isString(slot)" :key="key" v-html="slot"></div>
@@ -30,8 +31,14 @@ export default {
     slice(index) {
       this.api.dynamicModals.splice(index, 1)
     },
-    beforeOpen(e, modal) {
+    beforeOpen(e, modal, index) {
       e.ref.params = modal.params
+      this.$nextTick(() => {
+        if (!modal.value) {
+          this.slice(index)
+          modal.reject('show')
+        }
+      })
     },
     isString(val) {
       return typeof val === 'string'

lib/PluginCore.js

@@ -17,35 +17,38 @@ function createVfm(Vue, options) {
       show(modal, ...args) {
         switch (typeof modal) {
           case 'string':
-            this.toggle(modal, true, ...args)
-            break
-          case 'object':
-            {
-              const defaultModal = {
-                value: true,
-                id: Symbol('dynamicModal'),
-                component: options.componentName,
-                bind: {},
-                slots: {},
-                on: {},
-                params: args[0]
-              }
-              this.dynamicModals.push(Object.assign(defaultModal, modal))
-            }
-            break
+            return this.toggle(modal, true, ...args)
+          case 'object': {
+            return Promise.allSettled([
+              new Promise((resolve, reject) => {
+                const defaultModal = {
+                  value: true,
+                  id: Symbol('dynamicModal'),
+                  component: options.componentName,
+                  bind: {},
+                  slots: {},
+                  on: {},
+                  params: args[0],
+                  reject,
+                  opened() {
+                    resolve('show')
+                  }
+                }
+                this.dynamicModals.push(Object.assign(defaultModal, modal))
+              })
+            ])
+          }
         }
       },
       hide(...names) {
-        this.toggle(names, false)
+        return this.toggle(names, false)
       },
       hideAll() {
-        for (let i = this.openedModals.length - 1; i >= 0; i--) {
-          this.openedModals[i].$emit('input', false)
-        }
+        return this.hide(...this.openedModals.map(modal => modal.name))
       },
       toggle(name, ...args) {
         const modals = Array.isArray(name) ? this.get(...name) : this.get(name)
-        modals.forEach(modal => modal.toggle(...args))
+        return Promise.allSettled(modals.map(modal => modal.toggle(...args)))
       },
       get(...names) {
         return this.modals.filter(modal => names.includes(modal.name))

lib/VueFinalModal.vue

@@ -54,6 +54,8 @@
 import FocusTrap from './utils/focusTrap.js'
 import { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'
 
+const noop = () => {}
+
 const TransitionState = {
   Enter: 'enter',
   Entering: 'entering',
@@ -109,7 +111,9 @@ export default {
     overlayTransitionState: null,
     modalTransitionState: null,
     stopEvent: false,
-    params: {}
+    params: {},
+    resolveToggle: noop,
+    rejectToggle: noop
   }),
   computed: {
     api() {
@@ -155,6 +159,7 @@ export default {
       this.mounted()
       if (!value) {
         if (this.emitEvent('before-close', true)) {
+          this.rejectToggle('hide')
           return
         }
         this.close()
@@ -192,6 +197,7 @@ export default {
     mounted() {
       if (this.value) {
         if (this.emitEvent('before-open', false)) {
+          this.rejectToggle('show')
           return
         }
         let target = this.getAttachElement()
@@ -305,6 +311,7 @@ export default {
         this.$focusTrap.enable(this.$refs.vfmContainer)
       }
       this.$emit('opened', this.createModalEvent({ type: 'opened' }))
+      this.resolveToggle('show')
     },
     beforeModalLeave() {
       this.modalTransitionState = TransitionState.Leaving
@@ -326,6 +333,7 @@ export default {
         }
       })
       this.$emit('closed', event)
+      this.resolveToggle('hide')
       if (stopEvent) return
       this.params = {}
     },
@@ -361,11 +369,21 @@ export default {
       return false
     },
     toggle(show, params) {
-      const value = typeof show === 'boolean' ? show : !this.value
-      if (value && arguments.length === 2) {
-        this.params = params
-      }
-      this.$emit('input', value)
+      return new Promise((resolve, reject) => {
+        this.resolveToggle = res => {
+          resolve(res)
+          this.resolveToggle = noop
+        }
+        this.rejectToggle = err => {
+          reject(err)
+          this.rejectToggle = noop
+        }
+        const value = typeof show === 'boolean' ? show : !this.value
+        if (value && arguments.length === 2) {
+          this.params = params
+        }
+        this.$emit('input', value)
+      })
     }
   }
 }