Merge branch 'master' of https://github.com/primefaces/primevue
commit
f5d857178e
|
@ -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 = [
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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() {
|
||||||
|
@ -155,7 +159,7 @@ export default {
|
||||||
DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
|
DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
|
||||||
},
|
},
|
||||||
onLeave() {
|
onLeave() {
|
||||||
|
|
||||||
this.$emit('hide');
|
this.$emit('hide');
|
||||||
},
|
},
|
||||||
onAfterLeave(el) {
|
onAfterLeave(el) {
|
||||||
|
@ -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: {
|
||||||
|
|
|
@ -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>
|
||||||
|
@ -718,8 +724,8 @@ export default {
|
||||||
displayPosition.value = false;
|
displayPosition.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
return { displayBasic, displayBasic2, displayModal, displayResponsive, displayConfirmation, displayMaximizable,
|
return { displayBasic, displayBasic2, displayModal, displayResponsive, displayConfirmation, displayMaximizable,
|
||||||
displayPosition, position, openBasic, openBasic2, closeBasic, closeBasic2, openResponsive, closeResponsive,
|
displayPosition, position, openBasic, openBasic2, closeBasic, closeBasic2, openResponsive, closeResponsive,
|
||||||
openModal, closeModal, openConfirmation, closeConfirmation, openMaximizable, closeMaximizable, openPosition, closePosition}
|
openModal, closeModal, openConfirmation, closeConfirmation, openMaximizable, closeMaximizable, openPosition, closePosition}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue