Refactor #500
parent
a80bdc9498
commit
b8a5149718
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue