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

refactor: keep local state for open value, so it can be modified internally

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/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: `default`, `content`, `header`, `title`, `description`, `body`, and `footer`.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal'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 close" />
+
+      <template #footer="{ close }">
+        <UButton label="Close with scoped close" @click="close" />
+      </template>
+    </UModal>
   </div>
 </template>

src/runtime/components/Modal.vue

@@ -57,24 +57,25 @@ export interface ModalEmits extends DialogRootEmits {
   'after:leave': []
   'after:enter': []
   'close:prevent': []
+  'close': []
 }
 
 export interface ModalSlots {
   default(props: { open: boolean }): any
-  content(props?: {}): any
-  header(props?: {}): any
-  title(props?: {}): any
-  description(props?: {}): any
+  content(props: { close: () => void }): any
+  header(props: { close: () => void }): any
+  title(props: { close: () => void }): any
+  description(props: { close: () => void }): 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>
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { usePortal } from '../composables/usePortal'
@@ -95,7 +96,8 @@ const slots = defineSlots<ModalSlots>()
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const open = useVModel(props, 'open', emits, { passive: true })
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
@@ -122,10 +124,15 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+function closeModal() {
+  open.value = false
+  emits('close')
+}
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+  <DialogRoot v-model:open="open" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </DialogTrigger>
@@ -136,30 +143,30 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
       <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
-            <slot name="title">
+            <slot name="title" :close="closeModal">
               {{ title }}
             </slot>
           </DialogTitle>
 
           <DialogDescription v-if="description || !!slots.description">
-            <slot name="description">
+            <slot name="description" :close="closeModal">
               {{ description }}
             </slot>
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content">
+        <slot name="content" :close="closeModal">
           <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="closeModal">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
+                  <slot name="title" :close="closeModal">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
                 <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
+                  <slot name="description" :close="closeModal">
                     {{ description }}
                   </slot>
                 </DialogDescription>
@@ -183,11 +190,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="closeModal" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" />
+            <slot name="footer" :close="closeModal" />
           </div>
         </slot>
       </DialogContent>