fix: setModelValueLocal and add StopEvent example

Author: hunterliu1003

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

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type CoreModal from './CoreModal.vue'
 
 export function useModelValue(
@@ -9,6 +9,7 @@ export function useModelValue(
     close: () => boolean
   },
 ) {
+  let skip = false
   const { open, close } = options
 
   /** The truth of modal open or close */
@@ -34,11 +35,17 @@ export function useModelValue(
         emit('update:modelValue', val)
     }
     else {
+      skip = true
       emit('update:modelValue', !val)
+      nextTick(() => {
+        skip = false
+      })
     }
   }
 
   watch(() => props.modelValue, (val) => {
+    if (skip)
+      return
     modelValueLocal.value = !!val
   })
 

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ModalsContainer, VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
+import DefaultSlot from '../DefaultSlot.vue'
+
+let count = 1
+
+const modal = useModal({
+  keepAlive: true,
+  component: VueFinalModal,
+  attrs: {
+    background: 'interactive',
+    contentStyle: { backgroundColor: '#fff' },
+    onClosed() {
+      count = 1
+    },
+    onOpened() {
+      count = 1
+    },
+    onBeforeClose({ stop }) {
+      count += 1
+      if (count <= 5) {
+        console.log('Modal close stopped')
+        stop()
+      }
+    },
+    onBeforeOpen({ stop }) {
+      count += 1
+      if (count <= 5) {
+        console.log('Modal Open stopped')
+        stop()
+      }
+    },
+  },
+  slots: {
+    default: useModalSlot({
+      component: DefaultSlot,
+      attrs: {
+        text: '123',
+        onCreate() {
+          // console.log('onCreated')
+        },
+      },
+    }),
+  },
+})
+</script>
+
+<template>
+  <div style="padding-top: 100px">
+    <button @click="() => modal.open()">
+      open a modal
+    </button>
+  </div>
+
+  <ModalsContainer />
+</template>
+
+<docs lang="md">
+### Markdown docs for Basic example
+</docs>