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

Fixed #1185 - Fixed #1185 -

pull/1088/head
Cagatay Civici 2021-04-16 12:17:19 +03:00
parent 3e9cf7b746
commit c170d3ab7c
18 changed files with 136 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppMenu.vue
View File

@ -5,7 +5,7 @@
</router-link>
<div class="layout-sidebar-filter p-fluid p-input-filled">
<AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search"
field="name" optionGroupLabel="name" optionGroupChildren="children">
field="name" optionGroupLabel="name" optionGroupChildren="children" appendTo="self">
</AutoComplete>
</div>
<div class="layout-menu">

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

@ -14,7 +14,7 @@
</ul>
<i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
<Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
<Teleport :to="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': scrollHeight}" v-if="overlayVisible" @click="onOverlayClick">
<slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@ -174,8 +174,13 @@ export default {
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, target);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -552,6 +557,12 @@ export default {
},
listId() {
return UniqueComponentId() + '_list';
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {

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

@ -3,7 +3,7 @@
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" :value="inputFieldValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none"
:class="inputClass" :style="inputStyle" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<Teleport :to="appendTo" :disabled="inline">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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">
<template v-if="!timeOnly">
@ -699,8 +699,13 @@ export default {
this.enableModality();
}
else if (this.overlay) {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
}
},
onButtonClick() {
@ -2159,6 +2164,12 @@ export default {
},
monthNames() {
return this.$primevue.config.locale.monthNames;
},
appendDisabled() {
return this.appendTo === 'self' || this.inline;
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {

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

@ -12,7 +12,7 @@
<div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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">
@ -188,8 +188,13 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -303,6 +308,12 @@ export default {
},
panelStyleClass() {
return ['p-cascadeselect-panel p-component', this.panelClass];
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {

1
src/components/colorpicker/ColorPicker.d.ts vendored
View File

@ -9,6 +9,7 @@ interface ColorPickerProps {
baseZIndex?: number;
ariaLabelledBy?: string;
panelClass?: string;
appendTo?: string;
}
declare class ColorPicker {

17
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="body" :disabled="inline">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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">
@ -66,6 +66,10 @@ export default {
type: String,
default: null
},
appendTo: {
type: String,
default: 'body'
},
panelClass: null
},
data() {
@ -362,7 +366,10 @@ export default {
}
},
alignOverlay() {
DomHandler.absolutePosition(this.picker, this.$refs.input);
if (this.appendDisabled)
DomHandler.relativePosition(this.picker, this.$refs.input);
else
DomHandler.absolutePosition(this.picker, this.$refs.input);
},
onInputClick() {
if (this.disabled) {
@ -552,6 +559,12 @@ export default {
originalEvent: event,
target: this.$el
});
},
appendDisabled() {
return this.appendTo === 'self' || this.inline;
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
computed: {

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

@ -13,7 +13,7 @@
<div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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" :value="modelValue" :options="visibleOptions"></slot>
@ -418,8 +418,13 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
},
updateModel(event, value) {
this.$emit('update:modelValue', value);
@ -650,6 +655,12 @@ export default {
},
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
directives: {

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

@ -23,7 +23,7 @@
<div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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" :value="modelValue" :options="visibleOptions"></slot>
@ -364,8 +364,13 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -602,6 +607,12 @@ export default {
},
emptyMessageText() {
return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
directives: {

17
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="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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>
@ -118,8 +118,13 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
}
},
testStrength(str) {
let level = 0;
@ -277,6 +282,12 @@ export default {
},
promptText() {
return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {

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

@ -22,7 +22,7 @@
<div class="p-treeselect-trigger">
<span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
</div>
<Teleport :to="appendTo">
<Teleport :to="appendTarget" :disabled="appendDisabled">
<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>
@ -227,8 +227,13 @@ export default {
ZIndexUtils.clear(el);
},
alignOverlay() {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
if (this.appendDisabled) {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
@ -393,6 +398,12 @@ export default {
},
emptyOptions() {
return !this.options || this.options.length === 0;
},
appendDisabled() {
return this.appendTo === 'self';
},
appendTarget() {
return this.appendDisabled ? null : this.appendTo;
}
},
components: {

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

@ -209,7 +209,8 @@ export default {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>inputStyle</td>

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

@ -393,7 +393,8 @@ export default {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>inputStyle</td>

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

@ -211,7 +211,8 @@ data() {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>panelClass</td>

7
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -104,6 +104,13 @@ export default {
<td>null</td>
<td>Style class of the overlay panel.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
</tbody>
</table>
</div>

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

@ -255,7 +255,8 @@ export default {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>

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

@ -251,7 +251,8 @@ export default {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>emptyFilterMessage</td>

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

@ -127,7 +127,8 @@ import Password from 'primevue/password';
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>inputStyle</td>

3
src/views/treeselect/TreeSelectDoc.vue
View File

@ -308,7 +308,8 @@ data() {
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
and "self" for the element itself.</td>
</tr>
<tr>
<td>emptyMessage</td>