feat(Modal,Slideover): implement programmatic close method and update documentation

# Conflicts:
#	pnpm-lock.yaml

Author: JosephAnson

docs/app/components/content/examples/modal/ModalProgramaticClose.vue

@@ -0,0 +1,20 @@
+<template>
+  <UModal
+    title="Modal with close method"
+    description="This is useful when you want to close the modal from within the content without creating a new ref."
+  >
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+    <template #body="{ close }">
+      <div class="space-y-4">
+        <p>You can close this modal using the close method exposed in the slots.</p>
+        <UButton label="Close Modal" color="primary" @click="close" />
+      </div>
+    </template>
+
+    <template #footer="{ close }">
+      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
+      <UButton label="Submit" color="neutral" />
+    </template>
+  </UModal>
+</template>

docs/app/components/content/examples/slideover/SlideoverProgramaticClose.vue

@@ -0,0 +1,20 @@
+<template>
+  <USlideover
+    title="Sliderover with close method"
+    description="This is useful when you want to close the slider over from within the content without creating a new ref."
+  >
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+    <template #body="{ close }">
+      <div class="space-y-4">
+        <p>You can close this slider over using the close method exposed in the slots.</p>
+        <UButton label="Close Modal" color="primary" @click="close" />
+      </div>
+    </template>
+
+    <template #footer="{ close }">
+      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
+      <UButton label="Submit" color="neutral" />
+    </template>
+  </USlideover>
+</template>

docs/content/3.components/modal.md

@@ -347,6 +347,22 @@ name: 'modal-nested-example'
 ---
 ::
 
+### Using the close method
+
+All slots in the Modal component receive a `close` method that can be used to programmatically close the modal from within the content.
+
+::component-example
+---
+name: 'modal-programatic-close'
+props:
+  class: 'px-4'
+---
+::
+
+::tip
+The `close` method is available in all slots: `content`, `header`, `title`, `description`, `body`, and `footer`.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.

docs/content/3.components/slideover.md

@@ -346,6 +346,22 @@ name: 'slideover-nested-example'
 ---
 ::
 
+### Using the close method
+
+All slots in the SlideOver component receive a `close` method that can be used to programmatically close the modal from within the content.
+
+::component-example
+---
+name: 'modal-programatic-close'
+props:
+  class: 'px-4'
+---
+::
+
+::tip
+The `close` method is available in all slots: `content`, `header`, `title`, `description`, `body`, and `footer`.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Slideover's body.

package.json

@@ -144,7 +144,7 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "^2.2.1",
+    "reka-ui": "^2.3.0",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.7",

playground/app/pages/components/modal.vue

@@ -69,5 +69,13 @@ function openModal() {
     </UModal>
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
+
+    <UModal title="First modal">
+      <UButton color="neutral" variant="outline" label="Close with scoped slot close" />
+
+      <template #footer="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+    </UModal>
   </div>
 </template>

playground/app/pages/components/slideover.vue

@@ -125,5 +125,21 @@ function openSlideover() {
     </USlideover>
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openSlideover" />
+
+    <USlideover title="Slideover with scoped slot close" description="This slideover has a scoped slot close that can be used to close the slideover from within the content.">
+      <UButton color="neutral" variant="subtle" label="Open with scoped slot close" />
+
+      <template #header="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+
+      <template #body="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+
+      <template #footer="{ close }">
+        <UButton label="Close with scoped slot close" @click="close" />
+      </template>
+    </USlideover>
   </div>
 </template>