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

Author: JosephAnson

docs/app/components/content/examples/modal/ModalProgrammaticClose.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/SlideoverProgrammaticClose.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 Slideover" 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

@@ -305,13 +305,13 @@ slots:
 
 ### Programmatic usage
 
-You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programmatically.
 
 ::warning
 Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
 ::
 
-First, create a modal component that will be opened programatically:
+First, create a modal component that will be opened programmatically:
 
 ::component-example
 ---
@@ -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-programmatic-close'
+props:
+  class: 'px-4'
+---
+::
+
+::tip
+The `close` method is available in all slots: `content`, `header`, `body`, and `footer`.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.

docs/content/3.components/slideover.md

@@ -304,13 +304,13 @@ slots:
 
 ### Programmatic usage
 
-You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programatically.
+You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programmatically.
 
 ::warning
 Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
 ::
 
-First, create a slideover component that will be opened programatically:
+First, create a slideover component that will be opened programmatically:
 
 ::component-example
 ---
@@ -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-programmatic-close'
+props:
+  class: 'px-4'
+---
+::
+
+::tip
+The `close` method is available in all slots: `content`, `header`, `body`, and `footer`.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Slideover's body.

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>

src/runtime/components/Modal.vue

@@ -61,13 +61,13 @@ export interface ModalEmits extends DialogRootEmits {
 
 export interface ModalSlots {
   default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
+  content(props: { close: () => void }): any
+  header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
   close(props: { ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props?: {}): any
-  footer(props?: {}): any
+  body(props: { close: () => void }): any
+  footer(props: { close: () => void }): any
 }
 </script>
 
@@ -125,7 +125,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+  <DialogRoot v-slot="{ open, close: closeDialog }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
@@ -148,9 +148,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content">
+        <slot name="content" :close="closeDialog">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header">
+            <slot name="header" :close="closeDialog">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
@@ -183,11 +183,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </div>
 
           <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" />
+            <slot name="body" :close="closeDialog" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" />
+            <slot name="footer" :close="closeDialog" />
           </div>
         </slot>
       </DialogContent>

src/runtime/components/Slideover.vue

@@ -61,13 +61,13 @@ export interface SlideoverEmits extends DialogRootEmits {
 
 export interface SlideoverSlots {
   default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
+  content(props: { close: () => void }): any
+  header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
   close(props: { ui: { [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props?: {}): any
-  footer(props?: {}): any
+  body(props: { close: () => void }): any
+  footer(props: { close: () => void }): any
 }
 </script>
 
@@ -125,7 +125,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+  <DialogRoot v-slot="{ open, close: closeDialog }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
@@ -155,9 +155,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content">
+        <slot name="content" :close="closeDialog">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header">
+            <slot name="header" :close="closeDialog">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
                   <slot name="title">
@@ -190,11 +190,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
           </div>
 
           <div :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" />
+            <slot name="body" :close="closeDialog" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" />
+            <slot name="footer" :close="closeDialog" />
           </div>
         </slot>
       </DialogContent>