feat(portal): enable global 'body' override for Portal's appendTo

components/lib/config/PrimeVue.d.ts

@@ -96,6 +96,7 @@ import { TreeTablePassThroughOptions } from '../treetable';
 import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
 import { DefaultPassThrough, PassThrough } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
+import { PortalAppendToType } from '../portal/Portal';
 
 export interface PrimeVueConfiguration {
     ripple?: boolean;
@@ -107,6 +108,12 @@ export interface PrimeVueConfiguration {
     ptOptions?: PassThroughOptions;
     unstyled?: boolean;
     csp?: PrimeVueCSPOptions;
+    /**
+     * A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
+     * @see PortalAppendToType
+     * Default value is 'body'.
+     */
+    appendTo?: PortalAppendToType
 }
 
 export declare const defaultOptions: PrimeVueConfiguration;

components/lib/config/PrimeVue.js

@@ -141,7 +141,8 @@ export const defaultOptions = {
     unstyled: false,
     csp: {
         nonce: undefined
-    }
+    },
+    appendTo: 'body'
 };
 
 const PrimeVueSymbol = Symbol();

components/lib/portal/Portal.d.ts

@@ -1,7 +1,7 @@
-import { VNode } from 'vue';
+import { Ref, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type PortalAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
+export type PortalAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
 
 export interface PortalProps {
     /**
@@ -26,7 +26,7 @@ export interface PortalSlots {
 
 export declare type PortalEmits = {};
 
-declare class Portal extends ClassComponent<PortalProps, PortalSlots, PortalEmits> {}
+declare class Portal extends ClassComponent<PortalProps, PortalSlots, PortalEmits> { }
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {

components/lib/portal/Portal.vue

@@ -3,7 +3,7 @@
         <slot></slot>
     </template>
     <template v-else-if="mounted">
-        <Teleport :to="appendTo">
+        <Teleport :to="to">
             <slot></slot>
         </Teleport>
     </template>
@@ -33,6 +33,9 @@ export default {
         this.mounted = DomHandler.isClient();
     },
     computed: {
+        to() {
+            return this.appendTo === 'body' ? this.$primeVue.config.appendTo ?? this.appendTo : this.appendTo;
+        },
         inline() {
             return this.disabled || this.appendTo === 'self';
         }