Merge branch 'dev' into next

t st
git # Please enter the commit message for your changes. Lines starting

Author: hunterliu1003

README.md

@@ -300,15 +300,15 @@ toggle modal by name.
 
 ### `@before-open`
 
-- Emits while modal is still invisible, but before transition starting.
+- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
 
 ### `@opened`
 
 - Emits after modal became visible and transition ended.
 
 ### `@before-close`
 
-- Emits before modal is going to be closed.
+- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
 
 ### `@closed`
 

dist/VueFinalModal.esm.js

@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.19
+version: 0.20
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -489,20 +489,41 @@ If prop `clickToClose` is `false`, the event will still be emitted.
 
 ### `@before-open`
 
-- Emits while modal is still invisible, but before transition starting.
+- Emits while modal is still invisible, but before transition starting. Further opening of the modal can be blocked from this event listener by calling `event.stop()` .
 
 ### `@opened`
 
 - Emits after modal became visible and transition ended. 
 
 ### `@before-close`
 
-- Emits before modal is going to be closed. 
+- Emits before modal is going to be closed. Further closing of the modal can be blocked from this event listener by calling `event.stop()` .
+
+#
 
 ### `@closed`
 
 - Emits right before modal is destroyed.
 
 ## Contribution
 
-👋 Hi I'm Hunter. Author of `vue-final-modal`. There is no perfect library even the `final` of vue modal. If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
+👋 Hi I'm Hunter, the author of `vue-final-modal`. 
+
+To develop vue-final-modal, I learn a lot from these awesome libraries:
+
+- [Vuetify](https://vuetifyjs.com/en/)
+  - attach
+- [Element UI](https://element.eleme.io/)
+  - stackable modal
+  - zIndex
+  - zIndexBase
+- [vue-js-modal](https://github.com/euvl/vue-js-modal)
+  - dynamic modal
+  - transition
+  - focusTrap for A11y
+- [Bootstrap Vue](https://bootstrap-vue.org/)
+  - lockScroll
+
+> There is no perfect library even the `final` of vue modal. 
+
+If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).

dist/VueFinalModal.esm.js.map

@@ -7,7 +7,9 @@ function createVfm(options) {
   return function() {
     vfm = {
       isScrollLocked: false,
-      openedModals: [],
+      get openedModals() {
+        return this.modals.filter(modal => modal.props.modelValue)
+      },
       modals: [],
       show(name) {
         this.toggle(name, true)
@@ -21,9 +23,9 @@ function createVfm(options) {
         })
       },
       toggle(name, show) {
-        const modal = this.modals.find(modal => modal.name === name)
+        const modal = this.modals.find(modal => modal.props.name === name)
         if (modal !== undefined) {
-          modal.emit('update:modelValue', show === undefined ? !modal.value : show)
+          modal.emit('update:modelValue', show === undefined ? !modal.props.modelValue : show)
         }
       },
       lockScroll() {

dist/VueFinalModal.umd.js

@@ -120,6 +120,7 @@ export const visibility = reactive({
 })
 const overlayTransitionState = ref(null)
 const modalTransitionState = ref(null)
+const _stopEvent = ref(false)
 
 const isComponentReadyToBeDestroyed = computed(() => {
   return (
@@ -143,6 +144,10 @@ export const calculateZIndex = computed(() => {
 watch(
   () => props.modelValue,
   value => {
+    if (_stopEvent.value) {
+      _stopEvent.value = false
+      return
+    }
     mounted()
     if (!value) {
       close()
@@ -186,17 +191,14 @@ onBeforeUnmount(() => {
 function getModalInfo() {
   return {
     uid,
-    name: props.name,
+    props,
     emit,
     vfmContainer,
     vfmContent,
     getAttachElement,
     modalStackIndex,
     visibility,
     handleLockScroll,
-    hideOverlay: props.hideOverlay,
-    focusRetain: props.focusRetain,
-    focusTrap: props.focusTrap,
     $focusTrap
   }
 }
@@ -205,13 +207,7 @@ function mounted() {
     let target = getAttachElement()
     if (target || props.attach === false) {
       props.attach !== false && target.appendChild(root.value)
-      let index = $vfm.openedModals.findIndex(vm => vm.uid === uid)
 
-      if (index !== -1) {
-        // if this is already exist in modalStack, delete it
-        $vfm.openedModals.splice(index, 1)
-      }
-      $vfm.openedModals.push(getModalInfo())
       modalStackIndex.value = $vfm.openedModals.length - 1
 
       handleLockScroll()
@@ -226,6 +222,10 @@ function mounted() {
           }
         })
 
+      if (emitEvent('before-open', false)) {
+        return
+      }
+
       visible.value = true
       nextTick(() => {
         startTransitionEnter()
@@ -236,20 +236,18 @@ function mounted() {
   }
 }
 function close() {
-  let index = $vfm.openedModals.findIndex(vm => vm.uid === uid)
-  if (index !== -1) {
-    // remove this in modalStack
-    $vfm.openedModals.splice(index, 1)
+  if (emitEvent('before-close', true)) {
+    return
   }
   if ($vfm.openedModals.length > 0) {
     // If there are still nested modals opened
     const $_vm = $vfm.openedModals[$vfm.openedModals.length - 1]
     $_vm.handleLockScroll()
-    $_vm.focusTrap && $_vm.$focusTrap.firstElement().focus()
-    if ($_vm.focusRetain || $_vm.focusTrap) {
+    $_vm.props.focusTrap && $_vm.$focusTrap.firstElement().focus()
+    if ($_vm.props.focusRetain || $_vm.props.focusTrap) {
       $_vm.vfmContainer.value.focus()
     }
-    !$_vm.hideOverlay && ($_vm.visibility.overlay = true)
+    !$_vm.props.hideOverlay && ($_vm.visibility.overlay = true)
   }
   startTransitionLeave()
 }
@@ -297,7 +295,6 @@ export function afterOverlayLeave() {
   overlayTransitionState.value = TransitionState.Leave
 }
 export function beforeModalEnter() {
-  emit('before-open')
   modalTransitionState.value = TransitionState.Entering
 }
 export function afterModalEnter() {
@@ -311,7 +308,6 @@ export function afterModalEnter() {
   emit('opened')
 }
 export function beforeModalLeave() {
-  emit('before-close')
   modalTransitionState.value = TransitionState.Leaving
 
   if ($focusTrap.enabled()) {
@@ -335,6 +331,30 @@ export function onEsc(evt) {
     emit('update:modelValue', false)
   }
 }
+function createModalEvent(params = {}) {
+  return {
+    ref: getModalInfo(),
+    ...params
+  }
+}
+function emitEvent(eventType, value) {
+  let stopEvent = false
+  const event = createModalEvent({
+    type: eventType,
+    stop() {
+      stopEvent = true
+    }
+  })
+  emit(eventType, event)
+  if (stopEvent) {
+    _stopEvent.value = true
+    nextTick(() => {
+      emit('update:modelValue', value)
+    })
+    return true
+  }
+  return false
+}
 </script>
 
 <style lang="css" scoped>