feat(Dialog): add programmatic close functionality to dialog root (#1943)

JosephAnson · web-flow · commit 1ad52194207c · 2025-05-27T23:12:40.000+08:00
diff --git a/docs/content/docs/components/dialog.md b/docs/content/docs/components/dialog.md
@@ -313,6 +313,38 @@ When providing an icon (or font icon), remember to label it correctly for screen
 </template>
 ```
 
+### Close using slot props
+
+Alternatively, you can use the `close` method provided by the `DialogRoot` slot props to programmatically close the dialog.
+
+```vue line=4,8,16-20
+<script setup>
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTrigger } from 'reka-ui'
+</script>
+
+<template>
+  <DialogRoot v-slot="{ close }">
+    <DialogTrigger>Open</DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogContent>
+        <form>
+          <!-- some inputs -->
+          <button type="submit" @click="close">
+            Submit
+          </button>
+        </form>
+      </DialogContent>
+      <DialogFooter>
+        <button type="submit" @click="close">
+          Submit
+        </button>
+      </DialogFooter>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+```
+
 ### Keyboard Interactions
 
 <KeyboardTable
diff --git a/docs/content/meta/DialogRoot.md b/docs/content/meta/DialogRoot.md
@@ -36,5 +36,10 @@
     'name': 'open',
     'description': '<p>Current open state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'close',
+    'description': '<p>Close the dialog</p>\n',
+    'type': '() => void'
   }
 ]" />
diff --git a/packages/core/src/Dialog/DialogRoot.vue b/packages/core/src/Dialog/DialogRoot.vue
@@ -55,6 +55,8 @@ defineSlots<{
   default?: (props: {
     /** Current open state */
     open: typeof open.value
+    /** Close the dialog */
+    close: () => void
   }) => any
 }>()
 
@@ -88,5 +90,8 @@ provideDialogRootContext({
 </script>
 
 <template>
-  <slot :open="open" />
+  <slot
+    :open="open"
+    :close="() => open = false"
+  />
 </template>
diff --git a/packages/core/src/Dialog/story/DialogProgrammaticClose.story.vue b/packages/core/src/Dialog/story/DialogProgrammaticClose.story.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { DialogContent, DialogOverlay, DialogRoot, DialogTrigger } from '..'
+</script>
+
+<template>
+  <Story
+    title="Dialog/ProgrammaticClose"
+    :layout="{ type: 'single', iframe: true }"
+  >
+    <Variant title="default">
+      <div class="h-[300vh]">
+        <DialogRoot
+          v-slot="{ close }"
+        >
+          <DialogTrigger>
+            <button
+              class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+            >
+              Open A
+            </button>
+          </DialogTrigger>
+          <DialogOverlay class="bg-blackA9 fixed inset-0" />
+          <DialogContent
+            class="fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px]"
+          >
+            <h1>Dialog A</h1>
+
+            <button
+              class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+              @click="close"
+            >
+              Close A
+            </button>
+          </DialogContent>
+        </DialogRoot>
+      </div>
+    </Variant>
+
+    <Variant title="Nested">
+      <div class="h-[300vh]">
+        <DialogRoot
+          v-slot="{ close: closeA }"
+        >
+          <DialogTrigger>
+            <button
+              class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+            >
+              Open A
+            </button>
+          </DialogTrigger>
+          <DialogOverlay class="bg-blackA9 fixed inset-0" />
+          <DialogContent
+            class="fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px]"
+          >
+            <h1>Dialog A</h1>
+
+            <button
+              class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+              @click="closeA"
+            >
+              Close A
+            </button>
+
+            <DialogRoot v-slot="{ close: closeB }">
+              <DialogTrigger>
+                <button
+                  class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+                >
+                  Open B
+                </button>
+              </DialogTrigger>
+              <DialogOverlay class="bg-blackA9 fixed inset-0" />
+              <DialogContent
+                class="fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px]"
+              >
+                <h1>Dialog B</h1>
+                <button
+                  class="text-black9 bg-blackA9 hover:bg-blackA10 rounded-[4px] text-white p-2"
+                  @click="closeB"
+                >
+                  Close B
+                </button>
+              </DialogContent>
+            </DialogRoot>
+          </DialogContent>
+        </DialogRoot>
+      </div>
+    </Variant>
+  </Story>
+</template>
