feat(portal): add configurable portalTarget support

Introduced a `portalTarget` option in `UApp` to specify portal mounting targets across various components. Updated portals in components like `ContextMenu`, `Drawer`, `Tooltip`, and others to respect `portalTarget`. Default target is set to `body`.

Author: menthol

src/runtime/components/App.vue

@@ -6,6 +6,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
   locale?: Locale<T>
+  portalTarget?: string | HTMLElement
 }
 
 export interface AppSlots {
@@ -18,7 +19,7 @@ export default {
 </script>
 
 <script setup lang="ts" generic="T extends Messages">
-import { toRef, useId, provide } from 'vue'
+import { toRef, useId, provide, computed } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { localeContextInjectionKey } from '../composables/useLocale'
@@ -34,6 +35,9 @@ const toasterProps = toRef(() => props.toaster)
 
 const locale = toRef(() => props.locale)
 provide(localeContextInjectionKey, locale)
+
+const portalTarget = computed(() => props.portalTarget ?? 'body')
+provide('portalTarget', portalTarget)
 </script>
 
 <template>

src/runtime/components/ContextMenu.vue

@@ -80,7 +80,7 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
    * Render the menu in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'

src/runtime/components/ContextMenuContent.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ContextMenuContentProps as RekaContextMenuContentProps, ContextMenuContentEmits as RekaContextMenuContentEmits } from 'reka-ui'
+import type { ComputedRef } from 'vue'
 import theme from '#build/ui/context-menu'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ContextMenuItem, ContextMenuSlots, KbdProps } from '../types'
@@ -9,7 +10,7 @@ const _contextMenu = tv(theme)()
 
 interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> extends Omit<RekaContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
   items?: T
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   sub?: boolean
   labelKey: keyof NestedItem<T>
   /**
@@ -33,7 +34,7 @@ interface ContextMenuContentEmits extends RekaContextMenuContentEmits {}
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<ContextMenuItem>">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { ContextMenu } from 'reka-ui/namespaced'
 import { useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
@@ -65,6 +66,10 @@ const groups = computed<ContextMenuItem[][]>(() =>
       : [props.items]
     : []
 )
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <template>
@@ -99,7 +104,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
     </slot>
   </DefineItemTemplate>
 
-  <ContextMenu.Portal :disabled="!portal">
+  <ContextMenu.Portal :disabled="portalDisabled" :to="portalTarget">
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
       <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
         <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">

src/runtime/components/Drawer.vue

@@ -2,6 +2,7 @@
 import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
 import type { DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import type { ComputedRef } from 'vue'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/drawer'
 import { tv } from '../utils/tv'
@@ -40,7 +41,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * Render the drawer in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   class?: any
   ui?: Partial<typeof drawer.slots>
 }
@@ -59,7 +60,7 @@ export interface DrawerSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { useForwardPropsEmits } from 'reka-ui'
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
@@ -85,6 +86,10 @@ const ui = computed(() => drawer({
   direction: props.direction,
   inset: props.inset
 }))
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <template>
@@ -93,7 +98,7 @@ const ui = computed(() => drawer({
       <slot />
     </DrawerTrigger>
 
-    <DrawerPortal :disabled="!portal">
+    <DrawerPortal :disabled="portalDisabled" :to="portalTarget">
       <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">

src/runtime/components/DropdownMenu.vue

@@ -88,7 +88,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
    * Render the menu in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * The key used to get the label from the item.
    * @defaultValue 'label'

src/runtime/components/DropdownMenuContent.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, DropdownMenuContentEmits as RekaDropdownMenuContentEmits } from 'reka-ui'
+import type { ComputedRef } from 'vue'
 import theme from '#build/ui/dropdown-menu'
 import { tv } from '../utils/tv'
 import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '../types'
@@ -10,7 +11,7 @@ const _dropdownMenu = tv(theme)()
 
 interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
   items?: T
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   sub?: boolean
   labelKey: keyof NestedItem<T>
   /**
@@ -39,7 +40,7 @@ type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { DropdownMenu } from 'reka-ui/namespaced'
 import { useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
@@ -71,6 +72,10 @@ const groups = computed<DropdownMenuItem[][]>(() =>
       : [props.items]
     : []
 )
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <template>
@@ -105,7 +110,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
     </slot>
   </DefineItemTemplate>
 
-  <DropdownMenu.Portal :disabled="!portal">
+  <DropdownMenu.Portal :disabled="portalDisabled" :to="portalTarget">
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
         <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">

src/runtime/components/InputMenu.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { InputHTMLAttributes } from 'vue'
+import type { InputHTMLAttributes, ComputedRef } from 'vue'
 import type { VariantProps } from 'tailwind-variants'
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
@@ -103,7 +103,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
    * Render the menu in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * When `items` is an array of objects, select the field to use as the value instead of the object itself.
    * @defaultValue undefined
@@ -176,7 +176,7 @@ export interface InputMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { computed, ref, toRef, onMounted, toRaw, nextTick } from 'vue'
+import { computed, ref, toRef, onMounted, toRaw, nextTick, inject } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
@@ -354,6 +354,10 @@ function isInputItem(item: InputMenuItem): item is _InputMenuItem {
 defineExpose({
   inputRef
 })
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -452,7 +456,7 @@ defineExpose({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal :disabled="!portal">
+    <ComboboxPortal :disabled="portalDisabled" :to="portalTarget">
       <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
           <slot name="empty" :search-term="searchTerm">

src/runtime/components/Modal.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import type { ComputedRef } from 'vue'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/modal'
 import { tv } from '../utils/tv'
@@ -35,7 +36,7 @@ export interface ModalProps extends DialogRootProps {
    * Render the modal in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * Display a close button to dismiss the modal.
    * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -74,7 +75,7 @@ export interface ModalSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -118,6 +119,10 @@ const ui = computed(() => modal({
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <template>
@@ -126,7 +131,7 @@ const ui = computed(() => modal({
       <slot :open="open" />
     </DialogTrigger>
 
-    <DialogPortal :disabled="!portal">
+    <DialogPortal :disabled="portalDisabled" :to="portalTarget">
       <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">

src/runtime/components/Popover.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import type { ComputedRef } from 'vue'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/popover'
 import { tv } from '../utils/tv'
@@ -30,7 +31,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    * Render the popover in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * When `false`, the popover will not close when clicking outside or pressing escape.
    * @defaultValue true
@@ -49,7 +50,7 @@ export interface PopoverSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { defu } from 'defu'
 import { useForwardPropsEmits } from 'reka-ui'
 import { Popover, HoverCard } from 'reka-ui/namespaced'
@@ -87,6 +88,10 @@ const ui = computed(() => popover({
 }))
 
 const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <template>
@@ -95,7 +100,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
       <slot :open="open" />
     </Component.Trigger>
 
-    <Component.Portal :disabled="!portal">
+    <Component.Portal :disabled="portalDisabled" :to="portalTarget">
       <Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
         <slot name="content" />
 

src/runtime/components/Select.vue

@@ -2,6 +2,7 @@
 import type { VariantProps } from 'tailwind-variants'
 import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectContentEmits, SelectArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
+import type { ComputedRef } from 'vue'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
@@ -86,7 +87,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
    * Render the menu in a portal.
    * @defaultValue true
    */
-  portal?: boolean
+  portal?: boolean | string | HTMLElement
   /**
    * When `items` is an array of objects, select the field to use as the value.
    * @defaultValue 'value'
@@ -135,7 +136,7 @@ export interface SelectSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
-import { computed, toRef } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { SelectRoot, SelectArrow, SelectTrigger, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -222,6 +223,10 @@ function onUpdateOpen(value: boolean) {
 function isSelectItem(item: SelectItem): item is SelectItemBase {
   return typeof item === 'object' && item !== null
 }
+
+const injectedPortalTarget = inject<ComputedRef<string | HTMLElement> | undefined>('portalTarget')
+const portalTarget = computed(() => typeof props.portal === 'string' ? props.portal : injectedPortalTarget?.value ?? 'body')
+const portalDisabled = computed(() => typeof props.portal === 'boolean' ? !props.portal : false)
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -263,7 +268,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
       </span>
     </SelectTrigger>
 
-    <SelectPortal :disabled="!portal">
+    <SelectPortal :disabled="portalDisabled" :to="portalTarget">
       <SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
         <SelectViewport :class="ui.viewport({ class: props.ui?.viewport })">
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">