parent
c3afd88435
commit
ec15e94718
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue