vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1028, Fixed #993

pull/1047/head
Cagatay Civici 2021-03-01 23:54:17 +03:00
parent c3afd88435
commit ec15e94718
28 changed files with 434 additions and 611 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/autocomplete/AutoComplete.vue
View File

@ -14,6 +14,7 @@
</ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@ -37,6 +38,7 @@
<slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
</div>
</transition>
</Teleport>
</span>
</template>
@ -89,7 +91,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
forceSelection: {
type: Boolean,
@ -127,7 +129,6 @@ export default {
}
},
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -154,7 +155,6 @@ export default {
},
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
@ -168,10 +168,8 @@ export default {
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
if (this.appendTo)
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target);
else
DomHandler.relativePosition(this.overlay, target);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -499,22 +497,6 @@ export default {
return selected;
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
overlayRef(el) {
this.overlay = el;
}

26
src/components/calendar/Calendar.vue
View File

@ -3,6 +3,7 @@
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none"
:class="inputClass" :style="inputStyle" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'">
<template v-if="!timeOnly">
@ -127,6 +128,7 @@
<slot name="footer"></slot>
</div>
</transition>
</Teleport>
</span>
</template>
@ -288,7 +290,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
inputClass: null,
inputStyle: null,
@ -333,7 +335,6 @@ export default {
this.destroyMask();
}
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -526,7 +527,6 @@ export default {
if (this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
this.appendContainer();
this.alignOverlay();
this.$emit('show');
},
@ -687,10 +687,8 @@ export default {
this.enableModality();
}
else if (this.overlay) {
if (this.appendTo)
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
else
DomHandler.relativePosition(this.overlay, this.$el);
}
},
onButtonClick() {
@ -1922,22 +1920,6 @@ export default {
this.updateModel(event.target.value);
}
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFocus() {
if (this.showOnFocus && this.isEnabled()) {
this.overlayVisible = true;

27
src/components/cascadeselect/CascadeSelect.vue
View File

@ -12,6 +12,7 @@
<div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
<div class="p-cascadeselect-items-wrapper">
@ -22,6 +23,7 @@
</div>
</div>
</transition>
</Teleport>
</div>
</template>
@ -56,7 +58,7 @@ export default {
ariaLabelledBy: null,
appendTo: {
type: String,
default: null
default: 'body'
}
},
outsideClickListener: null,
@ -64,7 +66,6 @@ export default {
resizeListener: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -165,7 +166,6 @@ export default {
},
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
@ -181,12 +181,8 @@ export default {
this.dirty = false;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
} else {
DomHandler.relativePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -239,22 +235,6 @@ export default {
overlayRef(el) {
this.overlay = el;
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onKeyDown(event) {
switch(event.key) {
case 'Down':
@ -374,6 +354,7 @@ export default {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
}
.p-fluid .p-cascadeselect {

4
src/components/colorpicker/ColorPicker.vue
View File

@ -2,6 +2,7 @@
<div ref="container" :class="containerClass">
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
<Teleport to="body" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible">
<div class="p-colorpicker-content">
@ -18,6 +19,7 @@
</div>
</div>
</transition>
</Teleport>
</div>
</template>
@ -349,7 +351,7 @@ export default {
this.clearRefs();
},
alignOverlay() {
DomHandler.relativePosition(this.picker, this.$refs.input);
DomHandler.absolutePosition(this.picker, this.$refs.input);
},
onInputClick() {
if (this.disabled) {

15
src/components/confirmpopup/ConfirmPopup.vue
View File

@ -1,6 +1,7 @@
<template>
<Teleport to="body">
<transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave">
<div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef">
<div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs">
<div class="p-confirm-popup-content">
<i :class="iconClass" />
<span class="p-confirm-popup-message">{{confirmation.message}}</span>
@ -11,6 +12,7 @@
</div>
</div>
</transition>
</Teleport>
</template>
<script>
@ -20,6 +22,7 @@ import {DomHandler} from 'primevue/utils';
import Button from 'primevue/button';
export default {
inheritAttrs: false,
props: {
group: String
},
@ -56,7 +59,6 @@ export default {
ConfirmationEventBus.off('confirm');
ConfirmationEventBus.off('close');
this.restoreAppend();
this.unbindOutsideClickListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -83,7 +85,6 @@ export default {
this.visible = false;
},
onEnter() {
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
@ -162,14 +163,6 @@ export default {
isTargetClicked() {
return this.target && (this.target === event.target || this.target.contains(event.target));
},
appendContainer() {
document.body.appendChild(this.container);
},
restoreAppend() {
if (this.container) {
document.body.removeChild(this.container);
}
},
containerRef(el) {
this.container = el;
}

25
src/components/contextmenu/ContextMenu.vue
View File

@ -1,9 +1,11 @@
<template>
<Teleport :to="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @leave="onLeave">
<div :ref="containerRef" class="p-contextmenu p-component" v-if="visible">
<div :ref="containerRef" class="p-contextmenu p-component" v-if="visible" v-bind="$attrs">
<ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" />
</div>
</transition>
</Teleport>
</template>
<script>
@ -11,6 +13,7 @@ import {DomHandler} from 'primevue/utils';
import ContextMenuSub from './ContextMenuSub.vue';
export default {
inheritAttrs: false,
props: {
model: {
type: Array,
@ -18,7 +21,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
autoZIndex: {
type: Boolean,
@ -46,7 +49,6 @@ export default {
};
},
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
this.unbindOutsideClickListener();
this.unbindDocumentContextMenuListener();
@ -91,7 +93,6 @@ export default {
this.visible = false;
},
onEnter() {
this.appendContainer();
this.position();
this.bindOutsideClickListener();
this.bindResizeListener();
@ -166,22 +167,6 @@ export default {
this.resizeListener = null;
}
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.container);
}
},
bindDocumentContextMenuListener() {
if (!this.documentContextMenuListener) {
this.documentContextMenuListener = (event) => {

3
src/components/dialog/Dialog.vue
View File

@ -1,4 +1,5 @@
<template>
<Teleport to="body">
<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>
<div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
@ -24,7 +25,9 @@
</div>
</transition>
</div>
</Teleport>
</template>
<script>
import {UniqueComponentId,DomHandler} from 'primevue/utils';
import Ripple from 'primevue/ripple';

28
src/components/dropdown/Dropdown.vue
View File

@ -13,6 +13,7 @@
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-dropdown-panel p-component" v-if="overlayVisible">
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@ -52,6 +53,7 @@
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
</div>
</transition>
</Teleport>
</div>
</template>
@ -97,7 +99,7 @@ export default {
ariaLabelledBy: null,
appendTo: {
type: String,
default: null
default: 'body'
},
emptyFilterMessage: {
type: String,
@ -125,7 +127,6 @@ export default {
overlay: null,
itemsWrapper: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -389,7 +390,6 @@ export default {
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.scrollValueInView();
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
@ -410,12 +410,8 @@ export default {
this.overlay = null;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
} else {
DomHandler.relativePosition(this.overlay, this.$el);
}
DomHandler.absolutePosition(this.overlay, this.$el);
},
updateModel(event, value) {
this.$emit('update:modelValue', value);
@ -549,22 +545,6 @@ export default {
let label = this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale);
return label.startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
if (this.overlayVisible) {

7
src/components/galleria/Galleria.vue
View File

@ -1,11 +1,12 @@
<template>
<div v-if="fullScreen && containerVisible" :ref="maskRef" :class="maskContentClass">
<Teleport to="body" v-if="fullScreen">
<div v-if="containerVisible" :ref="maskRef" :class="maskContentClass">
<transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
<GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
</transition>
</div>
<GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
</Teleport>
<GalleriaContent v-else v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
</template>
<script>

33
src/components/menu/Menu.vue
View File

@ -1,6 +1,7 @@
<template>
<Teleport :to="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true">
<div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs">
<ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<template v-if="item.items && visible(item) && !item.separator">
@ -16,6 +17,7 @@
</ul>
</div>
</transition>
</Teleport>
</template>
<script>
@ -24,6 +26,7 @@ import {DomHandler} from 'primevue/utils';
import Menuitem from './Menuitem.vue';
export default {
inheritAttrs: false,
props: {
popup: {
type: Boolean,
@ -35,7 +38,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
autoZIndex: {
type: Boolean,
@ -55,10 +58,8 @@ export default {
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
relativeAlign: false,
container: null,
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
this.unbindOutsideClickListener();
@ -94,16 +95,13 @@ export default {
},
show(event) {
this.overlayVisible = true;
this.relativeAlign = event.relativeAlign;
this.target = event.currentTarget;
},
hide() {
this.overlayVisible = false;
this.target = null;
this.relativeAlign = false;
},
onEnter() {
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindResizeListener();
@ -119,11 +117,8 @@ export default {
this.unbindScrollListener();
},
alignOverlay() {
if (this.relativeAlign)
DomHandler.relativePosition(this.container, this.target);
else
DomHandler.absolutePosition(this.container, this.target);
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -176,22 +171,6 @@ export default {
isTargetClicked() {
return this.target && (this.target === event.target || this.target.contains(event.target));
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.container);
}
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},

29
src/components/multiselect/MultiSelect.vue
View File

@ -23,6 +23,7 @@
<div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-multiselect-panel p-component" v-if="overlayVisible">
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@ -87,6 +88,7 @@
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
</div>
</transition>
</Teleport>
</div>
</template>
@ -130,7 +132,7 @@ export default {
ariaLabelledBy: null,
appendTo: {
type: String,
default: null
default: 'body'
},
emptyFilterMessage: {
type: String,
@ -158,7 +160,6 @@ export default {
scrollHandler: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
@ -342,7 +343,6 @@ export default {
},
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
@ -357,13 +357,8 @@ export default {
this.overlay = null;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
}
else {
DomHandler.relativePosition(this.overlay, this.$el);
}
DomHandler.absolutePosition(this.overlay, this.$el);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -464,22 +459,6 @@ export default {
this.$emit('update:modelValue', value);
this.$emit('change', {originalEvent: event, value: value});
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onFilterChange(event) {
this.$emit('filter', {originalEvent: event, value: event.target.value});
if (this.overlayVisible) {

25
src/components/overlaypanel/OverlayPanel.vue
View File

@ -1,6 +1,7 @@
<template>
<Teleport :to="appendTo">
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
<div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef">
<div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef" v-bind="$attrs">
<div class="p-overlaypanel-content" @click="onContentClick">
<slot></slot>
</div>
@ -9,6 +10,7 @@
</button>
</div>
</transition>
</Teleport>
</template>
<script>
@ -17,6 +19,7 @@ import {DomHandler} from 'primevue/utils';
import Ripple from 'primevue/ripple';
export default {
inheritAttrs: false,
props: {
dismissable: {
type: Boolean,
@ -28,7 +31,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
baseZIndex: {
type: Number,
@ -55,7 +58,6 @@ export default {
resizeListener: null,
container: null,
beforeUnmount() {
this.restoreAppend();
if (this.dismissable) {
this.unbindOutsideClickListener();
}
@ -86,7 +88,6 @@ export default {
this.selfClick = true;
},
onEnter() {
this.appendContainer();
this.alignOverlay();
if (this.dismissable) {
this.bindOutsideClickListener();
@ -173,22 +174,6 @@ export default {
isTargetClicked(event) {
return this.target && (this.target === event.target || this.target.contains(event.target));
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.container);
}
},
containerRef(el) {
this.container = el;
}

27
src/components/password/Password.vue
View File

@ -2,6 +2,7 @@
<div :class="containerClass" :style="style">
<PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
<i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
<slot name="header"></slot>
@ -14,6 +15,7 @@
<slot name="footer"></slot>
</div>
</transition>
</Teleport>
</div>
</template>
@ -57,7 +59,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
toggleMask: {
type: Boolean,
@ -88,7 +90,6 @@ export default {
this.strongCheckRegExp = new RegExp(this.strongRegex);
},
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -98,7 +99,6 @@ export default {
methods: {
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindScrollListener();
this.bindResizeListener();
@ -109,29 +109,8 @@ export default {
this.overlay = null;
},
alignOverlay() {
if (this.appendTo) {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
}
else {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
}
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
testStrength(str) {
let level = 0;

5
src/components/sidebar/Sidebar.vue
View File

@ -1,6 +1,7 @@
<template>
<Teleport to="body">
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave" appear>
<div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
<div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal" v-bind="$attrs">
<div class="p-sidebar-content">
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
<span class="p-sidebar-close-icon pi pi-times" />
@ -9,6 +10,7 @@
</div>
</div>
</transition>
</Teleport>
</template>
<script>
@ -17,6 +19,7 @@ import Ripple from 'primevue/ripple';
export default {
emits: ['update:visible', 'show', 'hide'],
inheritAttrs: false,
props: {
visible: {
type: Boolean,

4
src/components/splitbutton/SplitButton.vue
View File

@ -38,14 +38,14 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
class: null,
style: null
},
methods: {
onDropdownButtonClick() {
this.$refs.menu.toggle({currentTarget: this.$el, relativeAlign: this.appendTo == null});
this.$refs.menu.toggle({currentTarget: this.$el});
},
onDefaultButtonClick() {
this.$refs.menu.hide();

26
src/components/tieredmenu/TieredMenu.vue
View File

@ -1,9 +1,11 @@
<template>
<Teleport :to="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true">
<div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
</div>
</transition>
</Teleport>
</template>
<script>
@ -12,6 +14,7 @@ import {DomHandler} from 'primevue/utils';
import TieredMenuSub from './TieredMenuSub.vue';
export default {
inheritAttrs: false,
props: {
popup: {
type: Boolean,
@ -23,7 +26,7 @@ export default {
},
appendTo: {
type: String,
default: null
default: 'body'
},
autoZIndex: {
type: Boolean,
@ -45,7 +48,6 @@ export default {
};
},
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
this.unbindOutsideClickListener();
@ -79,7 +81,6 @@ export default {
this.visible = false;
},
onEnter() {
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindResizeListener();
@ -96,6 +97,7 @@ export default {
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target);
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -148,22 +150,6 @@ export default {
isTargetClicked() {
return this.target && (this.target === event.target || this.target.contains(event.target));
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.container);
}
},
onLeafClick() {
if (this.popup) {
this.hide();

5
src/components/toast/Toast.vue
View File

@ -1,9 +1,11 @@
<template>
<div ref="container" :class="containerClass">
<Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
</transition-group>
</div>
</Teleport>
</template>
<script>
@ -14,6 +16,7 @@ import {DomHandler} from 'primevue/utils';
var messageIdx = 0;
export default {
inheritAttrs: false,
props: {
group: {
type: String,

4
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -210,8 +210,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>

4
src/views/calendar/CalendarDoc.vue
View File

@ -400,8 +400,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>

4
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -212,8 +212,8 @@ data() {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
</tbody>
</table>

4
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -209,8 +209,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>

4
src/views/dropdown/DropdownDoc.vue
View File

@ -256,8 +256,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>

4
src/views/menu/MenuDoc.vue
View File

@ -116,8 +116,8 @@ toggle(event) {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>

4
src/views/multiselect/MultiSelectDoc.vue
View File

@ -252,8 +252,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>

4
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -63,8 +63,8 @@ toggle(event) {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>

4
src/views/password/PasswordDoc.vue
View File

@ -128,8 +128,8 @@ import Password from 'primevue/password';
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>inputStyle</td>

4
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -125,8 +125,8 @@ export default {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
</tbody>
</table>

4
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -203,8 +203,8 @@ toggle(event) {
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>