docs: add event.stop() back

Author: hunterliu1003

docs/content/2.get-started/1.guide/3.migration-guide.md

@@ -125,11 +125,6 @@ open()
 `params` is not a good practice and hard to keep type-save in Typescript.
 So if you are using `params`, you have to re-written it with [useModal()](/api/composables/use-modal) composable.
 
-### Removed `event.stop()` from both `@before-close` and `@before-open`
-
-`event.stop()` made the source code hard to read and maintain.
-It's easy to have a condition before open or before close the modal. So it's not a required feature.
-
 ### Delete Drag & Resize
 
 To keep vue-final-modal simple and easier to maintain, I decided to remove the Drag & Resize feature.

docs/content/3.api/1.components/1.vue-final-modal.md

@@ -228,9 +228,11 @@ When set `:preventNavigationGestures="true"`{lang=ts}, there will be two invisib
 
 ## Events
 
-- `(e: 'beforeOpen'): void`{lang=ts}: Emits while modal is still invisible, but before transition starting.
+- `(e: 'beforeOpen', event: { stop: () => void }): void`{lang=ts}: Emits while modal is still invisible, but before transition starting.
+  - `event.stop()` is use to prevent the modal from opening.
 - `(e: 'opened'): void`{lang=ts}: Emits after modal became visible and transition ended.
-- `(e: 'beforeClose'): void`{lang=ts}: Emits before modal is going to be closed.
+- `(e: 'beforeClose', event: { stop: () => void }): void`{lang=ts}: Emits before modal is going to be closed.
+  - `event.stop()` is use to prevent the modal from closing.
 - `(e: 'closed'): void`{lang=ts}: Emits right before modal is destroyed.
 - `(e: 'clickOutside'): void`{lang=ts}: Emits while `.vfm` element on click.
 

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

@@ -17,9 +17,9 @@ import { internalVfmSymbol, vfmSymbol } from '~/injectionSymbols'
 export interface CoreModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
 
-  (e: 'beforeOpen', payload: { stop: () => void }): void
+  (e: 'beforeOpen', event: { stop: () => void }): void
   (e: 'opened'): void
-  (e: 'beforeClose', payload: { stop: () => void }): void
+  (e: 'beforeClose', event: { stop: () => void }): void
   (e: 'closed'): void
 
   /** onClickOutside will only be emitted when clickToClose equal to `false` */

viteplay/src/components/VueFinalModal/StopEvent.example.vue

@@ -2,7 +2,7 @@
 import { ModalsContainer, VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
-let count = 1
+let count = 0
 
 const modal = useModal({
   keepAlive: true,
@@ -11,22 +11,22 @@ const modal = useModal({
     background: 'interactive',
     contentStyle: { backgroundColor: '#fff' },
     onClosed() {
-      count = 1
+      count = 0
     },
     onOpened() {
-      count = 1
+      count = 0
     },
     onBeforeClose({ stop }) {
       count += 1
-      if (count <= 5) {
-        console.log('Modal close stopped')
+      if (count < 5) {
+        alert(`Modal close stopped ${count} / 4`)
         stop()
       }
     },
     onBeforeOpen({ stop }) {
       count += 1
-      if (count <= 5) {
-        console.log('Modal Open stopped')
+      if (count < 5) {
+        alert(`Modal open stopped ${count} / 4`)
         stop()
       }
     },
@@ -35,10 +35,7 @@ const modal = useModal({
     default: useModalSlot({
       component: DefaultSlot,
       attrs: {
-        text: '123',
-        onCreate() {
-          // console.log('onCreated')
-        },
+        text: 'This is an example of a modal with a default slot',
       },
     }),
   },

viteplay/src/components/VueFinalModal/TestModal.vue

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