feat(Modal): support unmountOnHide prop

docs/app/components/search/Search.vue

@@ -45,5 +45,6 @@ watchDebounced(searchTerm, (term) => {
     :search-status="status"
     :fuse="fuse"
     :transition="false"
+    :unmount-on-hide="false"
   />
 </template>

docs/content/docs/2.components/modal.md

@@ -294,6 +294,38 @@ slots:
 :placeholder{class="h-48"}
 ::
 
+### Unmount :badge{label="Soon" class="align-text-top"}
+
+Use the `unmount-on-hide` prop to control whether the Modal is unmounted from the DOM when closed. Defaults to `true`.
+
+::note
+When set to `false`, the Modal's content stays in the DOM when closed (hidden with `display: none`) instead of being unmounted. This can be useful for SEO and performance by avoiding remounts on every open.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  unmountOnHide: false
+  title: 'Modal mounted on hide'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-48"}
+::
+
 ### Scrollable :badge{label="4.2+" class="align-text-top"}
 
 Use the `scrollable` prop to make the Modal's content scrollable within the overlay.

docs/content/docs/2.components/slideover.md

@@ -351,6 +351,38 @@ slots:
 :placeholder{class="h-full"}
 ::
 
+### Unmount :badge{label="Soon" class="align-text-top"}
+
+Use the `unmount-on-hide` prop to control whether the Slideover is unmounted from the DOM when closed. Defaults to `true`.
+
+::note
+When set to `false`, the Slideover's content stays in the DOM when closed (hidden with `display: none`) instead of being unmounted. This can be useful for SEO and performance by avoiding remounts on every open.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+props:
+  unmountOnHide: false
+  title: 'Slideover mounted on hide'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
 ## Examples
 
 ### Control open state

package.json

@@ -180,7 +180,7 @@
     "motion-v": "^2.2.1",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.9.8",
+    "reka-ui": "https://pkg.pr.new/reka-ui@fe4f7b5",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",

src/runtime/components/DashboardSearch.vue

@@ -9,7 +9,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>
 
-export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
+export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal' | 'unmountOnHide'>, Pick<CommandPaletteProps<CommandPaletteGroup<T>, T>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
   /**
    * @defaultValue 'md'
    */
@@ -99,7 +99,7 @@ const colorMode = useColorMode()
 const appConfig = useAppConfig() as DashboardSearch['AppConfig']
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'size', 'icon', 'trailingIcon', 'selectedIcon', 'childrenIcon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon', 'back', 'backIcon', 'disabled', 'highlightOnHover', 'labelKey', 'descriptionKey', 'preserveGroupOrder', 'virtualize', 'searchDelay'))
-const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
+const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal', 'unmountOnHide'))
 
 const getProxySlots = () => omit(slots, ['content'])
 

src/runtime/components/Modal.vue

@@ -99,7 +99,8 @@ const _props = withDefaults(defineProps<ModalProps>(), {
   overlay: true,
   transition: true,
   modal: true,
-  dismissible: true
+  dismissible: true,
+  unmountOnHide: true
 })
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
@@ -109,7 +110,7 @@ const props = useComponentProps('modal', _props)
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
-const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal', 'unmountOnHide'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {

src/runtime/components/Slideover.vue

@@ -100,7 +100,8 @@ const _props = withDefaults(defineProps<SlideoverProps>(), {
   transition: true,
   modal: true,
   dismissible: true,
-  side: 'right'
+  side: 'right',
+  unmountOnHide: true
 })
 const emits = defineEmits<SlideoverEmits>()
 const slots = defineSlots<SlideoverSlots>()
@@ -110,7 +111,7 @@ const props = useComponentProps('slideover', _props)
 const { t } = useLocale()
 const appConfig = useAppConfig() as Slideover['AppConfig']
 
-const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'open', 'defaultOpen', 'modal', 'unmountOnHide'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {

src/runtime/components/content/ContentSearch.vue

@@ -55,7 +55,7 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
   icon?: IconProps['name']
 }
 
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal' | 'unmountOnHide'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'trailingIcon' | 'selectedIcon' | 'childrenIcon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'back' | 'backIcon' | 'disabled' | 'highlightOnHover' | 'labelKey' | 'descriptionKey' | 'preserveGroupOrder' | 'virtualize' | 'groups'> {
   /**
    * @defaultValue 'md'
    */
@@ -158,7 +158,7 @@ const colorMode = useColorMode()
 const appConfig = useAppConfig() as ContentSearch['AppConfig']
 
 const commandPaletteProps = useForwardProps(reactivePick(props, 'size', 'icon', 'trailingIcon', 'selectedIcon', 'childrenIcon', 'placeholder', 'autofocus', 'loading', 'loadingIcon', 'close', 'closeIcon', 'back', 'backIcon', 'disabled', 'highlightOnHover', 'labelKey', 'descriptionKey', 'preserveGroupOrder', 'virtualize', 'searchDelay'))
-const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal'))
+const modalProps = useForwardProps(reactivePick(props, 'overlay', 'transition', 'content', 'dismissible', 'fullscreen', 'modal', 'portal', 'unmountOnHide'))
 
 const getProxySlots = () => omit(slots, ['content'])
 

test/components/Modal.spec.ts

@@ -46,4 +46,22 @@ describe('Modal', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  it('unmounts content when closed by default', async () => {
+    const wrapper = await mountSuspended(Modal, {
+      props: { open: false, portal: false },
+      slots: { body: () => 'Body content' }
+    })
+
+    expect(wrapper.text()).not.toContain('Body content')
+  })
+
+  it('keeps content mounted when closed with unmountOnHide false', async () => {
+    const wrapper = await mountSuspended(Modal, {
+      props: { open: false, portal: false, unmountOnHide: false },
+      slots: { body: () => 'Body content' }
+    })
+
+    expect(wrapper.text()).toContain('Body content')
+  })
 })

test/components/Slideover.spec.ts

@@ -46,4 +46,22 @@ describe('Slideover', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  it('unmounts content when closed by default', async () => {
+    const wrapper = await mountSuspended(Slideover, {
+      props: { open: false, portal: false },
+      slots: { body: () => 'Body content' }
+    })
+
+    expect(wrapper.text()).not.toContain('Body content')
+  })
+
+  it('keeps content mounted when closed with unmountOnHide false', async () => {
+    const wrapper = await mountSuspended(Slideover, {
+      props: { open: false, portal: false, unmountOnHide: false },
+      slots: { body: () => 'Body content' }
+    })
+
+    expect(wrapper.text()).toContain('Body content')
+  })
 })