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

View File

@ -14,6 +14,7 @@
</ul> </ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i> <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"/> <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"> <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"> <div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
<slot name="header" :value="modelValue" :suggestions="suggestions"></slot> <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@ -37,6 +38,7 @@
<slot name="footer" :value="modelValue" :suggestions="suggestions"></slot> <slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
</div> </div>
</transition> </transition>
</Teleport>
</span> </span>
</template> </template>
@ -89,7 +91,7 @@ export default {
}, },
appendTo: { appendTo: {
type: String, type: String,
default: null default: 'body'
}, },
forceSelection: { forceSelection: {
type: Boolean, type: Boolean,
@ -127,7 +129,6 @@ export default {
} }
}, },
beforeUnmount() { beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindResizeListener(); this.unbindResizeListener();
@ -154,7 +155,6 @@ export default {
}, },
onOverlayEnter() { onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindScrollListener(); this.bindScrollListener();
@ -168,10 +168,8 @@ export default {
}, },
alignOverlay() { alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input; 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); DomHandler.absolutePosition(this.overlay, target);
else
DomHandler.relativePosition(this.overlay, target);
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
@ -499,22 +497,6 @@ export default {
return selected; 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) { overlayRef(el) {
this.overlay = el; this.overlay = el;
} }

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" <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" /> :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"/> <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"> <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'"> <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'">
<template v-if="!timeOnly"> <template v-if="!timeOnly">
@ -127,6 +128,7 @@
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</transition> </transition>
</Teleport>
</span> </span>
</template> </template>
@ -288,7 +290,7 @@ export default {
}, },
appendTo: { appendTo: {
type: String, type: String,
default: null default: 'body'
}, },
inputClass: null, inputClass: null,
inputStyle: null, inputStyle: null,
@ -333,7 +335,6 @@ export default {
this.destroyMask(); this.destroyMask();
} }
this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindResizeListener(); this.unbindResizeListener();
@ -526,7 +527,6 @@ export default {
if (this.autoZIndex) { if (this.autoZIndex) {
this.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
} }
this.appendContainer();
this.alignOverlay(); this.alignOverlay();
this.$emit('show'); this.$emit('show');
}, },
@ -687,10 +687,8 @@ export default {
this.enableModality(); this.enableModality();
} }
else if (this.overlay) { else if (this.overlay) {
if (this.appendTo) this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el); DomHandler.absolutePosition(this.overlay, this.$el);
else
DomHandler.relativePosition(this.overlay, this.$el);
} }
}, },
onButtonClick() { onButtonClick() {
@ -1922,22 +1920,6 @@ export default {
this.updateModel(event.target.value); 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() { onFocus() {
if (this.showOnFocus && this.isEnabled()) { if (this.showOnFocus && this.isEnabled()) {
this.overlayVisible = true; this.overlayVisible = true;

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,5 @@
<template> <template>
<Teleport to="body">
<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">
@ -24,7 +25,9 @@
</div> </div>
</transition> </transition>
</div> </div>
</Teleport>
</template> </template>
<script> <script>
import {UniqueComponentId,DomHandler} from 'primevue/utils'; import {UniqueComponentId,DomHandler} from 'primevue/utils';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';

View File

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

View File

@ -1,11 +1,12 @@
<template> <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> <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" /> <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
</transition> </transition>
</div> </div>
</Teleport>
<GalleriaContent v-else-if="!fullScreen" v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" /> <GalleriaContent v-else v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
</template> </template>
<script> <script>

View File

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

View File

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

View File

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

View File

@ -2,6 +2,7 @@
<div :class="containerClass" :style="style"> <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" /> <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" /> <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
<Teleport :to="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible"> <div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
<slot name="header"></slot> <slot name="header"></slot>
@ -14,6 +15,7 @@
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</transition> </transition>
</Teleport>
</div> </div>
</template> </template>
@ -57,7 +59,7 @@ export default {
}, },
appendTo: { appendTo: {
type: String, type: String,
default: null default: 'body'
}, },
toggleMask: { toggleMask: {
type: Boolean, type: Boolean,
@ -88,7 +90,6 @@ export default {
this.strongCheckRegExp = new RegExp(this.strongRegex); this.strongCheckRegExp = new RegExp(this.strongRegex);
}, },
beforeUnmount() { beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener(); this.unbindResizeListener();
if (this.scrollHandler) { if (this.scrollHandler) {
this.scrollHandler.destroy(); this.scrollHandler.destroy();
@ -98,7 +99,6 @@ export default {
methods: { methods: {
onOverlayEnter() { onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex()); this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay(); this.alignOverlay();
this.bindScrollListener(); this.bindScrollListener();
this.bindResizeListener(); this.bindResizeListener();
@ -109,29 +109,8 @@ export default {
this.overlay = null; this.overlay = null;
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo) {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px'; this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el); 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) { testStrength(str) {
let level = 0; let level = 0;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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