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

Fixed #2602 - Add Nuxt3 support for components using teleport

pull/2603/head
mertsincan 2022-06-01 07:36:32 +01:00
parent ff8e8622c8
commit 3168936376
25 changed files with 166 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
rollup.config.js
View File

@ -14,6 +14,7 @@ let coreDependencies = {
'primevue/api': 'primevue.api',
'primevue/config': 'primevue.config',
'primevue/ripple': 'primevue.ripple',
'primevue/portal': 'primevue.portal',
'primevue/tooltip': 'primevue.tooltip',
'primevue/virtualscroller': 'primevue.virtualscroller',
'primevue/confirmationeventbus': 'primevue.confirmationeventbus',

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

@ -16,7 +16,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="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@ -47,7 +47,7 @@
<slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
</div>
</transition>
</Teleport>
</Portal>
</span>
</template>
@ -57,6 +57,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'AutoComplete',
@ -208,7 +209,7 @@ export default {
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, target);
}
else {
@ -613,19 +614,14 @@ export default {
listId() {
return UniqueComponentId() + '_list';
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
virtualScrollerDisabled() {
return !this.virtualScrollerOptions;
}
},
components: {
'Button': Button,
'VirtualScroller': VirtualScroller
'VirtualScroller': VirtualScroller,
'Portal': Portal
},
directives: {
'ripple': Ripple

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

@ -3,7 +3,7 @@
<input :ref="inputRef" v-if="!inline" type="text" :class="['p-inputtext p-component', inputClass]" :style="inputStyle" @input="onInput" v-bind="$attrs"
@focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none">
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick" @mouseup="onOverlayMouseUp">
<template v-if="!timeOnly">
@ -137,7 +137,7 @@
<slot name="footer"></slot>
</div>
</transition>
</Teleport>
</Portal>
</span>
</template>
@ -146,6 +146,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId}
import OverlayEventBus from 'primevue/overlayeventbus';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
import Portal from 'primevue/portal';
export default {
name: 'Calendar',
@ -793,7 +794,7 @@ export default {
this.enableModality();
}
else if (this.overlay) {
if (this.appendDisabled) {
if (this.appendTo === 'self' || this.inline) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
@ -2494,12 +2495,6 @@ export default {
monthNames() {
return this.$primevue.config.locale.monthNames;
},
appendDisabled() {
return this.appendTo === 'self' || this.inline;
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
attributeSelector() {
return UniqueComponentId();
},
@ -2508,7 +2503,8 @@ export default {
}
},
components: {
'CalendarButton': Button
'CalendarButton': Button,
'Portal': Portal
},
directives: {
'ripple': Ripple

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

@ -14,7 +14,7 @@
<span :class="dropdownIconClass"></span>
</slot>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
<div class="p-cascadeselect-items-wrapper">
@ -25,7 +25,7 @@
</div>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -33,6 +33,7 @@
import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import CascadeSelectSub from './CascadeSelectSub.vue';
import Portal from 'primevue/portal';
export default {
name: 'CascadeSelect',
@ -199,7 +200,7 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
@ -323,18 +324,13 @@ export default {
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
dropdownIconClass() {
return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}
},
components: {
'CascadeSelectSub': CascadeSelectSub
'CascadeSelectSub': CascadeSelectSub,
'Portal': Portal
}
}
</script>

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

@ -2,7 +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="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
<div class="p-colorpicker-content">
@ -19,13 +19,14 @@
</div>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
<script>
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
export default {
name: 'ColorPicker',
@ -372,7 +373,7 @@ export default {
}
},
alignOverlay() {
if (this.appendDisabled)
if (this.appendTo === 'self')
DomHandler.relativePosition(this.picker, this.$refs.input);
else
DomHandler.absolutePosition(this.picker, this.$refs.input);
@ -580,13 +581,10 @@ export default {
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
},
appendDisabled() {
return this.appendTo === 'self' || this.inline;
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {
'Portal': Portal
}
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Teleport to="body">
<Portal>
<transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
<template v-if="!$slots.message">
@ -15,7 +15,7 @@
</div>
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
@ -23,6 +23,7 @@ import ConfirmationEventBus from 'primevue/confirmationeventbus';
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Button from 'primevue/button';
import Portal from 'primevue/portal';
export default {
name: 'ConfirmPopup',
@ -223,7 +224,8 @@ export default {
}
},
components: {
'CPButton': Button
'CPButton': Button,
'Portal': Portal
}
}
</script>

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

@ -1,16 +1,17 @@
<template>
<Teleport :to="appendTo">
<Portal :appendTo="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
<ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
import {DomHandler,ZIndexUtils} from 'primevue/utils';
import ContextMenuSub from './ContextMenuSub.vue';
import Portal from 'primevue/portal';
export default {
name: 'ContextMenu',
@ -209,7 +210,8 @@ export default {
}
},
components: {
'ContextMenuSub': ContextMenuSub
'ContextMenuSub': ContextMenuSub,
'Portal': Portal
}
}
</script>

8
src/components/datatable/ColumnFilter.vue
View File

@ -7,7 +7,7 @@
:class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
@click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
<button v-if="showClearButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
<Teleport to="body">
<Portal>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
@ -49,7 +49,7 @@
<component :is="filterFooterTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -59,6 +59,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
import {FilterOperator} from 'primevue/api';
import Dropdown from 'primevue/dropdown';
import Button from 'primevue/button';
import Portal from 'primevue/portal';
export default {
name: 'ColumnFilter',
@ -514,7 +515,8 @@ export default {
},
components: {
'CFDropdown': Dropdown,
'CFButton': Button
'CFButton': Button,
'Portal': Portal
}
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<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">
@ -25,12 +25,13 @@
</div>
</transition>
</div>
</Teleport>
</Portal>
</template>
<script>
import {UniqueComponentId,DomHandler,ZIndexUtils} from 'primevue/utils';
import Ripple from 'primevue/ripple';
import Portal from 'primevue/portal';
export default {
name: 'Dialog',
@ -405,16 +406,13 @@ export default {
},
contentStyleClass() {
return ['p-dialog-content', this.contentClass];
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
directives: {
'ripple': Ripple
},
components: {
'Portal': Portal
}
}
</script>

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

@ -15,7 +15,7 @@
<span :class="dropdownIconClass"></span>
</slot>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@ -62,7 +62,7 @@
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -72,6 +72,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
import {FilterService} from 'primevue/api';
import Ripple from 'primevue/ripple';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'Dropdown',
@ -471,7 +472,7 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
@ -720,15 +721,9 @@ export default {
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
},
appendDisabled() {
return this.appendTo === 'self';
},
virtualScrollerDisabled() {
return !this.virtualScrollerOptions;
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
dropdownIconClass() {
return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
}
@ -737,7 +732,8 @@ export default {
'ripple': Ripple
},
components: {
'VirtualScroller': VirtualScroller
'VirtualScroller': VirtualScroller,
'Portal': Portal
}
}
</script>

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

@ -1,17 +1,18 @@
<template>
<Teleport to="body" v-if="fullScreen">
<Portal 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>
</Teleport>
</Portal>
<GalleriaContent v-else v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
</template>
<script>
import GalleriaContent from './GalleriaContent.vue';
import {DomHandler,ZIndexUtils} from 'primevue/utils';
import Portal from 'primevue/portal';
export default {
name: 'Galleria',
@ -172,7 +173,8 @@ export default {
}
},
components: {
'GalleriaContent': GalleriaContent
'GalleriaContent': GalleriaContent,
'Portal': Portal
}
}
</script>

8
src/components/image/Image.vue
View File

@ -6,7 +6,7 @@
<i class="p-image-preview-icon pi pi-eye"></i>
</slot>
</div>
<Teleport to="body">
<Portal>
<div :ref="maskRef" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
<div class="p-image-toolbar">
<button class="p-image-action p-link" @click="rotateRight" type="button">
@ -31,12 +31,13 @@
</div>
</transition>
</div>
</Teleport>
</Portal>
</span>
</template>
<script>
import {DomHandler,ZIndexUtils} from 'primevue/utils';
import Portal from 'primevue/portal';
export default {
name: 'Image',
@ -143,6 +144,9 @@ export default {
zoomDisabled() {
return this.scale <= 0.5 || this.scale >= 1.5;
}
},
components: {
'Portal': Portal
}
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Teleport :to="appendTo" :disabled="!popup">
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
<ul class="p-menu-list p-reset" role="menu">
@ -19,13 +19,14 @@
</ul>
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Menuitem from './Menuitem.vue';
import Portal from 'primevue/portal';
export default {
name: 'Menu',
@ -220,7 +221,8 @@ export default {
}
},
components: {
'Menuitem': Menuitem
'Menuitem': Menuitem,
'Portal': Portal
}
}
</script>

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

@ -27,7 +27,7 @@
<span :class="dropdownIconClass"></span>
</slot>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@ -99,7 +99,7 @@
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -109,6 +109,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
import {FilterService} from 'primevue/api';
import Ripple from 'primevue/ripple';
import VirtualScroller from 'primevue/virtualscroller';
import Portal from 'primevue/portal';
export default {
name: 'MultiSelect',
@ -451,7 +452,7 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
@ -722,12 +723,6 @@ export default {
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
},
virtualScrollerDisabled() {
return !this.virtualScrollerOptions;
},
@ -742,7 +737,8 @@ export default {
'ripple': Ripple
},
components: {
'VirtualScroller': VirtualScroller
'VirtualScroller': VirtualScroller,
'Portal': Portal
}
}
</script>

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

@ -1,5 +1,5 @@
<template>
<Teleport :to="appendTo">
<Portal :appendTo="appendTo">
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
<div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick">
@ -10,13 +10,14 @@
</button>
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Ripple from 'primevue/ripple';
import Portal from 'primevue/portal';
export default {
name: 'OverlayPanel',
@ -267,6 +268,9 @@ export default {
},
directives: {
'ripple': Ripple
},
components: {
'Portal': Portal
}
}
</script>

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

@ -2,7 +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="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header"></slot>
@ -15,7 +15,7 @@
<slot name="footer"></slot>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -23,6 +23,7 @@
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import InputText from 'primevue/inputtext';
import Portal from 'primevue/portal';
export default {
name: 'Password',
@ -127,7 +128,7 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
}
else {
@ -294,16 +295,11 @@ export default {
},
promptText() {
return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {
'PInputText': InputText
'PInputText': InputText,
'Portal': Portal
}
}
</script>

41
src/components/portal/Portal.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<template v-if="inline">
<slot></slot>
</template>
<template v-else-if="mounted">
<Teleport :to="appendTo">
<slot></slot>
</Teleport>
</template>
</template>
<script>
import { DomHandler } from 'primevue/utils';
export default {
name: 'Portal',
props: {
appendTo: {
type: String,
default: 'body'
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
mounted: false
}
},
mounted() {
this.mounted = DomHandler.isClient();
},
computed: {
inline() {
return this.disabled || this.appendTo === 'self';
}
}
}
</script>

8
src/components/portal/package.json Normal file
View File

@ -0,0 +1,8 @@
{
"main": "./portal.cjs.js",
"module": "./portal.esm.js",
"unpkg": "./portal.min.js",
"browser": {
"./sfc": "./Portal.vue"
}
}

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

@ -1,5 +1,5 @@
<template>
<Teleport to="body">
<Portal>
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
<div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
<div class="p-sidebar-header">
@ -15,12 +15,13 @@
</div>
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
import {DomHandler,ZIndexUtils} from 'primevue/utils';
import Ripple from 'primevue/ripple';
import Portal from 'primevue/portal';
export default {
name: 'Sidebar',
@ -164,6 +165,9 @@ export default {
},
directives: {
'ripple': Ripple
},
components: {
'Portal': Portal
}
}
</script>

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

@ -1,16 +1,17 @@
<template>
<Teleport :to="appendTo" :disabled="!popup">
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
</div>
</transition>
</Teleport>
</Portal>
</template>
<script>
import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import TieredMenuSub from './TieredMenuSub.vue';
export default {
@ -188,7 +189,8 @@ export default {
}
},
components: {
'TieredMenuSub': TieredMenuSub
'TieredMenuSub': TieredMenuSub,
'Portal': Portal
}
}
</script>

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

@ -1,17 +1,18 @@
<template>
<Teleport to="body">
<Portal>
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
</transition-group>
</div>
</Teleport>
</Portal>
</template>
<script>
import ToastEventBus from 'primevue/toasteventbus';
import ToastMessage from './ToastMessage.vue';
import {ZIndexUtils,UniqueComponentId,ObjectUtils} from 'primevue/utils';
import Portal from 'primevue/portal';
var messageIdx = 0;
@ -142,7 +143,8 @@ export default {
}
},
components: {
'ToastMessage': ToastMessage
'ToastMessage': ToastMessage,
'Portal': Portal
},
computed: {
containerClass() {

16
src/components/treeselect/TreeSelect.vue
View File

@ -24,7 +24,7 @@
<span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
</slot>
</div>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass">
<slot name="header" :value="modelValue" :options="options"></slot>
@ -40,7 +40,7 @@
<slot name="footer" :value="modelValue" :options="options"></slot>
</div>
</transition>
</Teleport>
</Portal>
</div>
</template>
@ -49,6 +49,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/uti
import OverlayEventBus from 'primevue/overlayeventbus';
import Tree from 'primevue/tree';
import Ripple from 'primevue/ripple';
import Portal from 'primevue/portal';
export default {
name: 'TreeSelect',
@ -232,7 +233,7 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
if (this.appendDisabled) {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
@ -414,16 +415,11 @@ export default {
},
emptyOptions() {
return !this.options || this.options.length === 0;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {
'TSTree': Tree
'TSTree': Tree,
'Portal': Portal
},
directives: {
'ripple': Ripple

4
src/components/utils/DomHandler.js
View File

@ -453,6 +453,10 @@ export default {
(element)[methodName].apply(element, args);
},
isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
},
getFocusableElements(element) {
let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),

1
src/components/utils/Utils.d.ts vendored
View File

@ -42,6 +42,7 @@ export declare class DomHandler {
static resolveUserAgent(): { browser: string; version: string; };
static isVisible(el: HTMLElement): boolean;
static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
static isClient(): boolean;
static getFocusableElements(el: HTMLElement): any[];
static getFirstFocusableElement(el: HTMLElement): any;
static isClickable(el: HTMLElement): boolean;

1
vue.config.js
View File

@ -12,6 +12,7 @@ module.exports = {
'primevue/usetoast': path.resolve(__dirname, 'src/components/usetoast/UseToast.js'),
'primevue/utils': path.resolve(__dirname, 'src/components/utils/Utils.js'),
'primevue/api': path.resolve(__dirname, 'src/components/api/Api.js'),
'primevue/portal': path.resolve(__dirname, 'src/components/portal/Portal.vue'),
'primevue/button': path.resolve(__dirname, 'src/components/button/Button.vue'),
'primevue/inputtext': path.resolve(__dirname, 'src/components/inputtext/InputText.vue'),
'primevue/dialog': path.resolve(__dirname, 'src/components/dialog/Dialog.vue'),