feat: api return promise, refactor unit test

vue-final · Apr 23, 2021 · 3823be1 · 3823be1
1 parent 8de6d3f
commit 3823be1
Show file tree

Hide file tree

Showing 16 changed files with 258 additions and 201 deletions.
diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/docs/content/en/api.md b/docs/content/en/api.md
@@ -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`

diff --git a/docs/content/en/dynamic-modal.md b/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 = {

diff --git a/docs/content/zh-Hant/api.md b/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`

diff --git a/docs/content/zh-Hant/dynamic-modal.md b/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 = {

diff --git a/example/src/components/basic/VDynamicModal.vue b/example/src/components/basic/VDynamicModal.vue
@@ -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>

diff --git a/example/src/components/hoc/VModal.vue b/example/src/components/hoc/VModal.vue
@@ -25,7 +25,7 @@ export default {
   emits: ['confirm', 'cancel'],
   methods: {
     close() {
-      $attrs['update:modalValue']()
+      this.$attrs['onUpdate:modelValue'](false)
     }
   }
 }

diff --git a/example/src/components/hoc/VTailwindModal.vue b/example/src/components/hoc/VTailwindModal.vue
@@ -29,7 +29,7 @@ export default {
   emits: ['cancel', 'confirm'],
   methods: {
     close() {
-      this.$attrs['update:modelValue']()
+      this.$attrs['onUpdate:modelValue'](false)
     }
   }
 }

diff --git a/lib/ModalsContainer.vue b/lib/ModalsContainer.vue
@@ -7,8 +7,9 @@
       v-bind="modal.bind"
       v-model="modal.value"
       v-on="modal.on"
-      @closed="slice(index)"
-      @beforeOpen="e => beforeOpen(e, modal)"
+      @_closed="slice(index)"
+      @_beforeOpen="e => beforeOpen(e, modal)"
+      @_opened="modal.opened"
     >
       <template v-for="(slot, key) in modal.slots" #[key] :key="key">
         <!-- eslint-disable vue/no-v-html -->
@@ -31,8 +32,14 @@ export default {
     slice(index) {
       this.api.dynamicModals.splice(index, 1)
     },
-    beforeOpen(e, modal) {
+    async beforeOpen(e, modal, index) {
       e.ref.params.value = modal.params
+      await this.$nextTick()
+      await this.$nextTick()
+      if (!modal.value) {
+        this.slice(index)
+        modal.reject('show')
+      }
     },
     isString(val) {
       return typeof val === 'string'

diff --git a/lib/PluginCore.js b/lib/PluginCore.js
@@ -18,35 +18,38 @@ function createVfm(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(shallowReactive(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(shallowReactive(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('update:modelValue', false)
-        }
+        return this.hide(...this.openedModals.map(modal => modal.props.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.props.name))

diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -54,6 +54,8 @@ import { ref, reactive, onMounted, onBeforeUnmount, computed, nextTick, watch, i
 import FocusTrap from './utils/focusTrap.js'
 import { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'
 
+const noop = () => {}
+
 const TransitionState = {
   Enter: 'enter',
   Entering: 'entering',
@@ -96,7 +98,17 @@ export default {
     focusRetain: { type: Boolean, default: true },
     focusTrap: { type: Boolean, default: false }
   },
-  emits: ['update:modelValue', 'click-outside', 'before-open', 'opened', 'before-close', 'closed'],
+  emits: [
+    'update:modelValue',
+    'click-outside',
+    'before-open',
+    'opened',
+    'before-close',
+    'closed',
+    '_before-open',
+    '_opened',
+    '_closed'
+  ],
   setup(props, { emit }) {
     const uid = Symbol('vfm')
     const root = ref(null)
@@ -118,6 +130,8 @@ export default {
     const modalTransitionState = ref(null)
     const _stopEvent = ref(false)
     const params = ref({})
+    let resolveToggle = noop
+    let rejectToggle = noop
 
     const computedOverlayTransition = computed(() => {
       if (typeof props.overlayTransition === 'string') return { name: props.overlayTransition }
@@ -166,6 +180,7 @@ export default {
         mounted()
         if (!value) {
           if (emitEvent('before-close', true)) {
+            rejectToggle('hide')
             return
           }
           close()
@@ -227,7 +242,9 @@ export default {
     }
     function mounted() {
       if (props.modelValue) {
+        emit('_before-open', createModalEvent({ type: '_before-open' }))
         if (emitEvent('before-open', false)) {
+          rejectToggle('show')
           return
         }
 
@@ -345,7 +362,9 @@ export default {
       if (props.focusTrap) {
         $focusTrap.enable(vfmContainer.value)
       }
+      emit('_opened')
       emit('opened', createModalEvent({ type: 'opened' }))
+      resolveToggle('show')
     }
     function beforeModalLeave() {
       modalTransitionState.value = TransitionState.Leaving
@@ -366,7 +385,9 @@ export default {
           stopEvent = true
         }
       })
+      emit('_closed')
       emit('closed', event)
+      resolveToggle('hide')
       if (stopEvent) return
       params.value = {}
     }
@@ -404,11 +425,21 @@ export default {
       return false
     }
     function toggle(show, _params) {
-      const value = typeof show === 'boolean' ? show : !props.modelValue
-      if (value && arguments.length === 2) {
-        params.value = _params
-      }
-      emit('update:modelValue', value)
+      return new Promise((resolve, reject) => {
+        resolveToggle = res => {
+          resolve(res)
+          resolveToggle = noop
+        }
+        rejectToggle = err => {
+          reject(err)
+          rejectToggle = noop
+        }
+        const value = typeof show === 'boolean' ? show : !props.modelValue
+        if (value && arguments.length === 2) {
+          params.value = _params
+        }
+        emit('update:modelValue', value)
+      })
     }
     return {
       root,