feat(Dialog): support unmountOnHide

docs/content/meta/DialogRoot.md

@@ -20,6 +20,13 @@
     'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
     'type': 'boolean',
     'required': false
+  },
+  {
+    'name': 'unmountOnHide',
+    'description': '<p>When <code>true</code>, the element will be unmounted on closed state.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
   }
 ]" />
 

packages/core/src/Dialog/DialogContent.vue

@@ -32,16 +32,22 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <Presence :present="forceMount || rootContext.open.value">
+  <Presence
+    v-slot="{ present }"
+    :present="forceMount || rootContext.open.value"
+    :force-mount="forceMount || !rootContext.unmountOnHide.value"
+  >
     <DialogContentModal
       v-if="rootContext.modal.value"
+      v-show="present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >
       <slot />
     </DialogContentModal>
     <DialogContentNonModal
       v-else
+      v-show="present"
       :ref="forwardRef"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
     >

packages/core/src/Dialog/DialogOverlay.vue

@@ -25,9 +25,12 @@ const { forwardRef } = useForwardExpose()
 <template>
   <Presence
     v-if="rootContext?.modal.value"
+    v-slot="{ present }"
     :present="forceMount || rootContext.open.value"
+    :force-mount="forceMount || !rootContext.unmountOnHide.value"
   >
     <DialogOverlayImpl
+      v-show="present"
       v-bind="$attrs"
       :ref="forwardRef"
       :as="as"

packages/core/src/Dialog/DialogRoot.vue

@@ -12,6 +12,12 @@ export interface DialogRootProps {
    * interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
    */
   modal?: boolean
+  /**
+   * When set to `false`, the dialog content and overlay will not be unmounted when closed, but instead hidden with CSS. <br>
+   * Useful for SEO or when you want to improve performance by not remounting the component on every open.
+   * @defaultValue true
+   */
+  unmountOnHide?: boolean
 }
 
 export type DialogRootEmits = {
@@ -22,6 +28,7 @@ export type DialogRootEmits = {
 export interface DialogRootContext {
   open: Readonly<Ref<boolean>>
   modal: Ref<boolean>
+  unmountOnHide: Ref<boolean>
   openModal: () => void
   onOpenChange: (value: boolean) => void
   onOpenToggle: () => void
@@ -48,6 +55,7 @@ const props = withDefaults(defineProps<DialogRootProps>(), {
   open: undefined,
   defaultOpen: false,
   modal: true,
+  unmountOnHide: true,
 })
 const emit = defineEmits<DialogRootEmits>()
 
@@ -67,11 +75,12 @@ const open = useVModel(props, 'open', emit, {
 
 const triggerElement = ref<HTMLElement>()
 const contentElement = ref<HTMLElement>()
-const { modal } = toRefs(props)
+const { modal, unmountOnHide } = toRefs(props)
 
 provideDialogRootContext({
   open,
   modal,
+  unmountOnHide,
   openModal: () => {
     open.value = true
   },