Skip to content

Commit 97bedcf

Browse files
committed
feat: enhance portal support with flexible target options
Introduced `usePortal` composable to standardize portal handling across components, supporting `boolean`, `string`, and `HTMLElement` types. Updated various components to leverage this composable, improving configurability and integration with custom portal targets. Default behavior remains backward compatible.
1 parent 391828a commit 97bedcf

File tree

15 files changed

+87
-25
lines changed

15 files changed

+87
-25
lines changed

src/runtime/components/App.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
66
tooltip?: TooltipProviderProps
77
toaster?: ToasterProps | null
88
locale?: Locale<T>
9+
portal?: string | HTMLElement
910
}
1011
1112
export interface AppSlots {
@@ -18,10 +19,11 @@ export default {
1819
</script>
1920

2021
<script setup lang="ts" generic="T extends Messages">
21-
import { toRef, useId, provide } from 'vue'
22+
import { toRef, useId, provide, computed } from 'vue'
2223
import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
2324
import { reactivePick } from '@vueuse/core'
2425
import { localeContextInjectionKey } from '../composables/useLocale'
26+
import { portalTargetInjectionKey } from '../composables/usePortal'
2527
import UToaster from './Toaster.vue'
2628
import UOverlayProvider from './OverlayProvider.vue'
2729
@@ -34,6 +36,9 @@ const toasterProps = toRef(() => props.toaster)
3436
3537
const locale = toRef(() => props.locale)
3638
provide(localeContextInjectionKey, locale)
39+
40+
const portal = computed(() => ({ portal: props.portal ?? 'body' }))
41+
provide(portalTargetInjectionKey, portal)
3742
</script>
3843

3944
<template>

src/runtime/components/ContextMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
6666
* Render the menu in a portal.
6767
* @defaultValue true
6868
*/
69-
portal?: boolean
69+
portal?: boolean | string | HTMLElement
7070
/**
7171
* The key used to get the label from the item.
7272
* @defaultValue 'label'

src/runtime/components/ContextMenuContent.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>
99
1010
interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> extends Omit<RekaContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
1111
items?: T
12-
portal?: boolean
12+
portal?: boolean | string | HTMLElement
1313
sub?: boolean
1414
labelKey: keyof NestedItem<T>
1515
/**
@@ -39,6 +39,7 @@ import { useForwardPropsEmits } from 'reka-ui'
3939
import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
4040
import { useAppConfig } from '#imports'
4141
import { useLocale } from '../composables/useLocale'
42+
import { usePortal } from '../composables/usePortal'
4243
import { omit, get, isArrayOfArray } from '../utils'
4344
import { pickLinkProps } from '../utils/link'
4445
import ULinkBase from './LinkBase.vue'
@@ -69,6 +70,8 @@ const groups = computed<ContextMenuItem[][]>(() =>
6970
: [props.items]
7071
: []
7172
)
73+
74+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
7275
</script>
7376

7477
<template>
@@ -103,7 +106,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
103106
</slot>
104107
</DefineItemTemplate>
105108

106-
<ContextMenu.Portal :disabled="!portal">
109+
<ContextMenu.Portal :disabled="portalDisabled" :to="portalTarget">
107110
<component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
108111
<ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
109112
<template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">

src/runtime/components/Drawer.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
3636
* Render the drawer in a portal.
3737
* @defaultValue true
3838
*/
39-
portal?: boolean
39+
portal?: boolean | string | HTMLElement
4040
class?: any
4141
ui?: Drawer['slots']
4242
}
@@ -60,6 +60,7 @@ import { useForwardPropsEmits } from 'reka-ui'
6060
import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
6161
import { reactivePick } from '@vueuse/core'
6262
import { useAppConfig } from '#imports'
63+
import { usePortal } from '../composables/usePortal'
6364
import { tv } from '../utils/tv'
6465
6566
const props = withDefaults(defineProps<DrawerProps>(), {
@@ -85,6 +86,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
8586
direction: props.direction,
8687
inset: props.inset
8788
}))
89+
90+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
8891
</script>
8992

9093
<template>
@@ -93,7 +96,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
9396
<slot />
9497
</DrawerTrigger>
9598

96-
<DrawerPortal :disabled="!portal">
99+
<DrawerPortal :disabled="portalDisabled" :to="portalTarget">
97100
<DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
98101

99102
<DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">

src/runtime/components/DropdownMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
7474
* Render the menu in a portal.
7575
* @defaultValue true
7676
*/
77-
portal?: boolean
77+
portal?: boolean | string | HTMLElement
7878
/**
7979
* The key used to get the label from the item.
8080
* @defaultValue 'label'

src/runtime/components/DropdownMenuContent.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>
1010
1111
interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
1212
items?: T
13-
portal?: boolean
13+
portal?: boolean | string | HTMLElement
1414
sub?: boolean
1515
labelKey: keyof NestedItem<T>
1616
/**
@@ -45,6 +45,7 @@ import { useForwardPropsEmits } from 'reka-ui'
4545
import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
4646
import { useAppConfig } from '#imports'
4747
import { useLocale } from '../composables/useLocale'
48+
import { usePortal } from '../composables/usePortal'
4849
import { omit, get, isArrayOfArray } from '../utils'
4950
import { pickLinkProps } from '../utils/link'
5051
import ULinkBase from './LinkBase.vue'
@@ -75,6 +76,8 @@ const groups = computed<DropdownMenuItem[][]>(() =>
7576
: [props.items]
7677
: []
7778
)
79+
80+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
7881
</script>
7982

8083
<template>
@@ -109,7 +112,7 @@ const groups = computed<DropdownMenuItem[][]>(() =>
109112
</slot>
110113
</DefineItemTemplate>
111114

112-
<DropdownMenu.Portal :disabled="!portal">
115+
<DropdownMenu.Portal :disabled="portalDisabled" :to="portalTarget">
113116
<component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
114117
<DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
115118
<template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">

src/runtime/components/InputMenu.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
8686
* Render the menu in a portal.
8787
* @defaultValue true
8888
*/
89-
portal?: boolean
89+
portal?: boolean | string | HTMLElement
9090
/**
9191
* When `items` is an array of objects, select the field to use as the value instead of the object itself.
9292
* @defaultValue undefined
@@ -177,6 +177,7 @@ import { useButtonGroup } from '../composables/useButtonGroup'
177177
import { useComponentIcons } from '../composables/useComponentIcons'
178178
import { useFormField } from '../composables/useFormField'
179179
import { useLocale } from '../composables/useLocale'
180+
import { usePortal } from '../composables/usePortal'
180181
import { compare, get, isArrayOfArray } from '../utils'
181182
import { tv } from '../utils/tv'
182183
import UIcon from './Icon.vue'
@@ -376,6 +377,8 @@ function isInputItem(item: InputMenuItem): item is _InputMenuItem {
376377
defineExpose({
377378
inputRef
378379
})
380+
381+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
379382
</script>
380383

381384
<!-- eslint-disable vue/no-template-shadow -->
@@ -474,7 +477,7 @@ defineExpose({
474477
</ComboboxTrigger>
475478
</ComboboxAnchor>
476479

477-
<ComboboxPortal :disabled="!portal">
480+
<ComboboxPortal :disabled="portalDisabled" :to="portalTarget">
478481
<ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
479482
<ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
480483
<slot name="empty" :search-term="searchTerm">

src/runtime/components/Modal.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface ModalProps extends DialogRootProps {
3131
* Render the modal in a portal.
3232
* @defaultValue true
3333
*/
34-
portal?: boolean
34+
portal?: boolean | string | HTMLElement
3535
/**
3636
* Display a close button to dismiss the modal.
3737
* `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -75,6 +75,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
7575
import { reactivePick } from '@vueuse/core'
7676
import { useAppConfig } from '#imports'
7777
import { useLocale } from '../composables/useLocale'
78+
import { usePortal } from '../composables/usePortal'
7879
import { tv } from '../utils/tv'
7980
import UButton from './Button.vue'
8081
@@ -115,6 +116,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
115116
transition: props.transition,
116117
fullscreen: props.fullscreen
117118
}))
119+
120+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
118121
</script>
119122

120123
<template>
@@ -123,7 +126,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
123126
<slot :open="open" />
124127
</DialogTrigger>
125128

126-
<DialogPortal :disabled="!portal">
129+
<DialogPortal :disabled="portalDisabled" :to="portalTarget">
127130
<DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
128131

129132
<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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
2626
* Render the popover in a portal.
2727
* @defaultValue true
2828
*/
29-
portal?: boolean
29+
portal?: boolean | string | HTMLElement
3030
/**
3131
* When `false`, the popover will not close when clicking outside or pressing escape.
3232
* @defaultValue true
@@ -51,6 +51,7 @@ import { useForwardPropsEmits } from 'reka-ui'
5151
import { Popover, HoverCard } from 'reka-ui/namespaced'
5252
import { reactivePick } from '@vueuse/core'
5353
import { useAppConfig } from '#imports'
54+
import { usePortal } from '../composables/usePortal'
5455
import { tv } from '../utils/tv'
5556
5657
const props = withDefaults(defineProps<PopoverProps>(), {
@@ -87,6 +88,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.popover || {
8788
}))
8889
8990
const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
91+
92+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
9093
</script>
9194

9295
<template>
@@ -95,7 +98,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
9598
<slot :open="open" />
9699
</Component.Trigger>
97100

98-
<Component.Portal :disabled="!portal">
101+
<Component.Portal :disabled="portalDisabled" :to="portalTarget">
99102
<Component.Content v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-on="contentEvents">
100103
<slot name="content" />
101104

src/runtime/components/Select.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
7070
* Render the menu in a portal.
7171
* @defaultValue true
7272
*/
73-
portal?: boolean
73+
portal?: boolean | string | HTMLElement
7474
/**
7575
* When `items` is an array of objects, select the field to use as the value.
7676
* @defaultValue 'value'
@@ -138,6 +138,7 @@ import { useAppConfig } from '#imports'
138138
import { useButtonGroup } from '../composables/useButtonGroup'
139139
import { useComponentIcons } from '../composables/useComponentIcons'
140140
import { useFormField } from '../composables/useFormField'
141+
import { usePortal } from '../composables/usePortal'
141142
import { compare, get, isArrayOfArray } from '../utils'
142143
import { tv } from '../utils/tv'
143144
import UIcon from './Icon.vue'
@@ -219,6 +220,8 @@ function onUpdateOpen(value: boolean) {
219220
function isSelectItem(item: SelectItem): item is SelectItemBase {
220221
return typeof item === 'object' && item !== null
221222
}
223+
224+
const { target: portalTarget, disabled: portalDisabled } = usePortal(props)
222225
</script>
223226

224227
<!-- eslint-disable vue/no-template-shadow -->
@@ -260,7 +263,7 @@ function isSelectItem(item: SelectItem): item is SelectItemBase {
260263
</span>
261264
</SelectTrigger>
262265

263-
<SelectPortal :disabled="!portal">
266+
<SelectPortal :disabled="portalDisabled" :to="portalTarget">
264267
<SelectContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
265268
<SelectViewport :class="ui.viewport({ class: props.ui?.viewport })">
266269
<SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">

0 commit comments

Comments
 (0)