Merge pull request #430 from vue-final/fix/424

Fix/424

Author: hunterliu1003

docs/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@vorms/core": "^1.1.0",
     "@vue-final-modal/nuxt": "workspace:1.0.3",
-    "vue-final-modal": "workspace:4.5.2",
+    "vue-final-modal": "workspace:4.5.3",
     "vue3-drag-resize": "^2.0.5"
   }
 }

examples/nuxt3/package.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "@vue-final-modal/nuxt": "^1.0.3",
-    "vue-final-modal": "^4.5.2"
+    "vue-final-modal": "^4.5.3"
   }
 }

examples/vue3/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.3.7",
-    "vue-final-modal": "^4.5.2"
+    "vue-final-modal": "^4.5.3"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",

packages/nuxt/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.8.2",
-    "vue-final-modal": "^4.5.2"
+    "vue-final-modal": "^4.5.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.4",

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/package.json

@@ -38,7 +38,7 @@
     "@cypress/vue": "^5.0.5",
     "@release-it/conventional-changelog": "^5.1.1",
     "@vue-macros/volar": "^0.8.4",
-    "cypress": "^13.6.0",
+    "cypress": "^13.6.4",
     "release-it": "^16.1.3",
     "unplugin-vue-define-options": "^1.3.8",
     "unplugin-vue-macros": "^2.3.0",

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"

pnpm-lock.yaml

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vue": "^3.3.7",
-    "vue-final-modal": "workspace:4.5.2",
+    "vue-final-modal": "workspace:4.5.3",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {