feat: add stop() for @beforeOpen and beforeClose event #367

Author: hunterliu1003

packages/vue-final-modal/src/components/CoreModal/CoreModal.vue

@@ -6,7 +6,6 @@ import { useToClose } from './useToClose'
 import { useModelValue } from './useModelValue'
 import { useFocusTrap } from './useFocusTrap'
 import { useLockScroll } from './useBodyScrollLock'
-import { useEvent } from './useEvent'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
 import { noop, once } from '~/utils'
@@ -18,9 +17,9 @@ import { internalVfmSymbol, vfmSymbol } from '~/injectionSymbols'
 export interface CoreModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
 
-  (e: 'beforeOpen'): void
+  (e: 'beforeOpen', payload: { stop: () => void }): void
   (e: 'opened'): void
-  (e: 'beforeClose'): void
+  (e: 'beforeClose', payload: { stop: () => void }): void
   (e: 'closed'): void
 
   /** onClickOutside will only be emitted when clickToClose equal to `false` */
@@ -56,12 +55,11 @@ const vfmContentEl = ref<HTMLDivElement>()
 
 const { focus, blur } = useFocusTrap(props, { focusEl: vfmRootEl })
 const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
-const { modelValueLocal } = useModelValue(props, emit)
+const { modelValueLocal } = useModelValue(props, emit, { open, close })
 const { enableBodyScroll, disableBodyScroll } = useLockScroll(props, {
   lockScrollEl: vfmRootEl,
   modelValueLocal,
 })
-const { emitEvent } = useEvent(emit)
 
 let resolveToggle: (res: string) => void = (noop)
 
@@ -87,14 +85,14 @@ const {
     })
   },
   onEnter() {
-    emitEvent('opened')
+    emit('opened')
     resolveToggle('opened')
   },
   onLeave() {
     deleteFromOpenedModals(getModalInstance())
     resetZIndex()
     enableBodyScroll()
-    emitEvent('closed')
+    emit('closed')
     resolveToggle('closed')
   },
 })
@@ -139,28 +137,32 @@ onMounted(() => {
   modals.push(modalInstance)
 })
 
-if (modelValueLocal.value)
-  open()
+if (props.modelValue)
+  modelValueLocal.value = true
 
-watch(modelValueLocal, (value) => {
-  value ? open() : close()
-})
-
-async function open() {
-  emitEvent('beforeOpen')
+function open(): boolean {
+  let shouldStop = false
+  emit('beforeOpen', { stop: () => shouldStop = true })
+  if (shouldStop)
+    return false
   moveToLastOpenedModals(modalInstance)
   moveToLastOpenedModalOverlays(modalInstance)
   refreshZIndex(index.value)
   openLastOverlay()
   enterTransition()
+  return true
 }
 
-function close() {
-  emitEvent('beforeClose')
-  deleteFromOpenedModalOverlays(modalInstance)
+function close(): boolean {
+  let shouldStop = false
+  emit('beforeClose', { stop: () => shouldStop = true })
+  if (shouldStop)
+    return false
+  deleteFromOpenedModalOverlays(getModalInstance())
   openLastOverlay()
   blur()
   leaveTransition()
+  return true
 }
 
 onBeforeUnmount(() => {

packages/vue-final-modal/src/components/CoreModal/useEvent.ts

@@ -1,12 +1,39 @@
-import type { Ref } from 'vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type CoreModal from './CoreModal.vue'
 
 export function useModelValue(
   props: InstanceType<typeof CoreModal>['$props'],
   emit: InstanceType<typeof CoreModal>['$emit'],
-): { modelValueLocal: Ref<boolean> } {
-  const modelValueLocal = ref<boolean>(!!props.modelValue)
+  options: {
+    open: () => boolean
+    close: () => boolean
+  },
+) {
+  const { open, close } = options
+
+  /** The truth of modal open or close */
+  const _modelValueLocal = ref<boolean>(false)
+
+  /**
+   * A WritableComputedRef, a only variable to control open or close the modal
+   */
+  const modelValueLocal = computed({
+    get: () => _modelValueLocal.value,
+    set: setModelValueLocal,
+  })
+
+  /**
+   * Because of the open/close can be stopped in `@beforeOpen`, `@beforeClose` events.
+   * So the function is to make sure `_modelValueLocal`, `props.modelValue` are always the same value
+   */
+  function setModelValueLocal(val: boolean) {
+    const success = val ? open() : close()
+    if (success)
+      _modelValueLocal.value = val
+    else
+      emit('update:modelValue', !val)
+  }
+
   watch(() => props.modelValue, (val) => {
     modelValueLocal.value = !!val
   })

packages/vue-final-modal/src/components/CoreModal/useModelValue.ts

@@ -205,9 +205,9 @@ export function byPassAllModalEvents(emit?: InstanceType<typeof CoreModal>['$emi
   return {
     'onUpdate:modelValue': (val: boolean) => emit('update:modelValue', val),
 
-    'onBeforeClose': () => emit('beforeClose'),
+    'onBeforeClose': (payload: { stop: () => void }) => emit('beforeClose', payload),
     'onClosed': () => emit('closed'),
-    'onBeforeOpen': () => emit('beforeOpen'),
+    'onBeforeOpen': (payload: { stop: () => void }) => emit('beforeOpen', payload),
     'onOpened': () => emit('opened'),
 
     /** onClickOutside will only be emitted when clickToClose equal to `false` */

packages/vue-final-modal/src/useApi.ts

@@ -18,9 +18,9 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'update:modelValue', modelValue: boolean): void
-  (e: 'beforeOpen'): void
+  (e: 'beforeOpen', payload: { stop: () => void }): void
   (e: 'opened'): void
-  (e: 'beforeClose'): void
+  (e: 'beforeClose', payload: { stop: () => void }): void
   (e: 'closed'): void
   /** onClickOutside will only be emitted when clickToClose equal to `false` */
   (e: 'clickOutside'): void