pull/1533/head
Cagatay Civici 2021-08-31 10:47:56 +03:00
commit f5d857178e
4 changed files with 31 additions and 8 deletions

View File

@ -125,6 +125,12 @@ const DialogProps = [
default: "true", default: "true",
description: "Keeps dialog in the viewport when dragging." description: "Keeps dialog in the viewport when dragging."
}, },
{
name: "appendTo",
type: "string",
default: "body",
description: '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.'
}
]; ];
const DialogEvents = [ const DialogEvents = [

View File

@ -18,10 +18,11 @@ interface DialogProps {
position?: string; position?: string;
maximizable?: boolean; maximizable?: boolean;
breakpoints?: {[key: string]: string}; breakpoints?: {[key: string]: string};
draggable: boolean; draggable?: boolean;
keepInViewPort: boolean; keepInViewPort?: boolean;
minX: number; minX?: number;
minY: number; minY?: number;
appendTo?: string;
} }
declare class Dialog { declare class Dialog {

View File

@ -1,5 +1,5 @@
<template> <template>
<Teleport to="body"> <Teleport :to="appendTarget" :disabled="appendDisabled">
<div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick"> <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear> <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
<div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal"> <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
@ -93,6 +93,10 @@ export default {
minY: { minY: {
type: Number, type: Number,
default: 0 default: 0
},
appendTo: {
type: String,
default: 'body'
} }
}, },
data() { data() {
@ -399,6 +403,12 @@ export default {
}, },
contentStyleClass() { contentStyleClass() {
return ['p-dialog-content', this.contentClass]; return ['p-dialog-content', this.contentClass];
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
} }
}, },
directives: { directives: {

View File

@ -221,6 +221,12 @@ export default {
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Keeps dialog in the viewport when dragging.</td> <td>Keeps dialog in the viewport when dragging.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>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.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>