fix: #424

Author: hunterliu1003

packages/vue-final-modal/cypress/components/ModalCloseByScopedSlot.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { VueFinalModal } from '~/index'
+</script>
+
+<template>
+  <VueFinalModal v-slot="{ close }">
+    <button @click="() => close()">
+      Close
+    </button>
+  </VueFinalModal>
+</template>

packages/vue-final-modal/cypress/components/scopedSlot.spec.ts

@@ -0,0 +1,26 @@
+import App from './App.vue'
+import ModalCloseByScopedSlot from './ModalCloseByScopedSlot.vue'
+import { createVfm, useModal } from '~/index'
+
+describe('Test scopedSlot', () => {
+  it('close() scoped slot ', () => {
+    const vfm = createVfm()
+    const modalName = 'modal-close-by-scoped-slot'
+    useModal({
+      defaultModelValue: true,
+      component: ModalCloseByScopedSlot,
+      attrs: { class: modalName },
+    })
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    }).as('app')
+
+    cy.get(`.${modalName}`).should('exist')
+    cy.get(`.${modalName}`).find('button').click()
+    cy.get(`.${modalName}`).should('not.exist')
+  })
+})

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

@@ -35,7 +35,7 @@ defineOptions({ inheritAttrs: false })
 const instance = getCurrentInstance()
 
 defineSlots<{
-  'default'?(props: { close: () => boolean }): void
+  'default'?(props: { close: () => void }): void
   'swipe-banner'?(): void
 }>()
 
@@ -135,6 +135,11 @@ function close(): boolean {
   return true
 }
 
+/** Close function for scoped slot */
+function _close() {
+  modelValueLocal.value = false
+}
+
 onBeforeUnmount(() => {
   enableBodyScroll()
   arrayRemoveItem(modals, instance)
@@ -223,7 +228,7 @@ defineExpose({
           v-bind="bindSwipe"
           @mousedown="() => onMousedown()"
         >
-          <slot v-bind="{ close }" />
+          <slot v-bind="{ close: _close }" />
 
           <div
             v-if="showSwipeBanner"