pull/525/head
mertsincan 2020-09-28 13:58:09 +03:00
parent a80bdc9498
commit b8a5149718
12 changed files with 49 additions and 58 deletions

View File

@ -107,8 +107,11 @@ export default {
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.overlay = null; this.overlay = null;
}, },
methods: { methods: {
@ -143,8 +146,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) { if (this.overlayVisible) {
this.hideOverlay(); this.hideOverlay();
} }

View File

@ -342,8 +342,11 @@ export default {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.overlay = null; this.overlay = null;
}, },
data() { data() {
@ -646,8 +649,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) { if (this.overlayVisible) {
this.overlayVisible = false; this.overlayVisible = false;
} }

View File

@ -84,8 +84,11 @@ export default {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener(); this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener(); this.unbindDocumentMouseUpListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.clearRefs(); this.clearRefs();
}, },
mounted() { mounted() {
@ -410,8 +413,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) { if (this.overlayVisible) {
this.overlayVisible = false; this.overlayVisible = false;
} }

View File

@ -93,8 +93,11 @@ export default {
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.overlay = null; this.overlay = null;
}, },
updated() { updated() {
@ -355,8 +358,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) { if (this.overlayVisible) {
this.hide(); this.hide();
} }

View File

@ -103,8 +103,11 @@ export default {
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.overlay = null; this.overlay = null;
}, },
updated() { updated() {
@ -315,8 +318,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, id, () => {
if (this.overlayVisible) { if (this.overlayVisible) {
this.hide(); this.hide();
} }

View File

@ -1,7 +1,6 @@
import Vue, { VNode } from 'vue'; import Vue, { VNode } from 'vue';
export declare class OverlayPanel extends Vue { export declare class OverlayPanel extends Vue {
id?: string;
ismissable?: boolean; ismissable?: boolean;
showCloseIcon?: boolean; showCloseIcon?: boolean;
appendTo?: string; appendTo?: string;

View File

@ -1,6 +1,6 @@
<template> <template>
<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" :id="containerId" :ref="containerRef"> <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef">
<div class="p-overlaypanel-content"> <div class="p-overlaypanel-content">
<slot></slot> <slot></slot>
</div> </div>
@ -13,13 +13,11 @@
<script> <script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler'; import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple'; import Ripple from '../ripple/Ripple';
export default { export default {
props: { props: {
id: null,
dismissable: { dismissable: {
type: Boolean, type: Boolean,
default: true default: true
@ -61,8 +59,11 @@ export default {
if (this.dismissable) { if (this.dismissable) {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
} }
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.target = null; this.target = null;
this.container = null; this.container = null;
}, },
@ -124,7 +125,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
if (this.visible) { if (this.visible) {
this.visible = false; this.visible = false;
} }
@ -177,11 +178,6 @@ export default {
this.container = el; this.container = el;
} }
}, },
computed: {
containerId() {
return this.id || UniqueComponentId();
}
},
directives: { directives: {
'ripple': Ripple 'ripple': Ripple
} }

View File

@ -50,8 +50,10 @@ export default {
this.strongCheckRegExp = new RegExp(this.strongRegex); this.strongCheckRegExp = new RegExp(this.strongRegex);
}, },
beforeUnmount() { beforeUnmount() {
this.unbindScrollListener(); if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
}, },
methods: { methods: {
testStrength(str) { testStrength(str) {
@ -155,8 +157,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
const { id } = this.$attrs; this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, () => {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, id, () => {
if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) { if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
this.hideOverlay(); this.hideOverlay();
} }

View File

@ -1,7 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
export declare class TieredMenu extends Vue { export declare class TieredMenu extends Vue {
id?: string;
popup?: boolean; popup?: boolean;
model?: any[]; model?: any[];
appendTo?: string; appendTo?: string;

View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave"> <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div :ref="containerRef" :id="containerId" :class="containerClass" v-if="popup ? visible : true"> <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/> <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
</div> </div>
</transition> </transition>
@ -8,13 +8,11 @@
<script> <script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler'; import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import UniqueComponentId from '../utils/UniqueComponentId';
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
import TieredMenuSub from './TieredMenuSub'; import TieredMenuSub from './TieredMenuSub';
export default { export default {
props: { props: {
id: null,
popup: { popup: {
type: Boolean, type: Boolean,
default: false default: false
@ -50,8 +48,11 @@ export default {
this.restoreAppend(); this.restoreAppend();
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindScrollListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null; this.scrollHandler = null;
}
this.target = null; this.target = null;
this.container = null; this.container = null;
}, },
@ -114,7 +115,7 @@ export default {
}, },
bindScrollListener() { bindScrollListener() {
if (!this.scrollHandler) { if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, this.containerId, () => { this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
if (this.visible) { if (this.visible) {
this.hide(); this.hide();
} }
@ -173,9 +174,6 @@ export default {
} }
}, },
computed: { computed: {
containerId() {
return this.id || UniqueComponentId();
},
containerClass() { containerClass() {
return ['p-tieredmenu p-component', { return ['p-tieredmenu p-component', {
'p-tieredmenu-overlay': this.popup 'p-tieredmenu-overlay': this.popup

View File

@ -52,12 +52,6 @@ toggle(event) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr> <tr>
<td>dismissable</td> <td>dismissable</td>
<td>boolean</td> <td>boolean</td>

View File

@ -193,12 +193,6 @@ toggle(event) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr> <tr>
<td>model</td> <td>model</td>
<td>array</td> <td>array</td>