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

Refactor #500 - For Password

pull/525/head
mertsincan 2020-09-27 21:10:38 +03:00
parent ee5f43f753
commit 36d437d6fc
1 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,10 @@
<template> <template>
<input type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue" <input ref="input" type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue"
@input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" /> @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" />
</template> </template>
<script> <script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
export default { export default {
@ -43,10 +44,15 @@ export default {
info: null, info: null,
mediumCheckRegExp: null, mediumCheckRegExp: null,
strongCheckRegExp: null, strongCheckRegExp: null,
scrollHandler: null,
mounted() { mounted() {
this.mediumCheckRegExp = new RegExp(this.mediumRegex); this.mediumCheckRegExp = new RegExp(this.mediumRegex);
this.strongCheckRegExp = new RegExp(this.strongRegex); this.strongCheckRegExp = new RegExp(this.strongRegex);
}, },
beforeUnmount() {
this.unbindScrollListener();
this.scrollHandler = null;
},
methods: { methods: {
testStrength(str) { testStrength(str) {
let level = 0; let level = 0;
@ -77,7 +83,7 @@ export default {
onInput(event) { onInput(event) {
this.$emit('update:modelValue', event.target.value) this.$emit('update:modelValue', event.target.value)
}, },
onFocus() { showOverlay() {
if (this.feedback) { if (this.feedback) {
if (!this.panel) { if (!this.panel) {
this.createPanel(); this.createPanel();
@ -88,14 +94,16 @@ export default {
setTimeout(() => { setTimeout(() => {
DomHandler.addClass(this.panel, 'p-connected-overlay-visible'); DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden'); DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
this.bindScrollListener();
}, 1); }, 1);
DomHandler.absolutePosition(this.panel, this.$el); DomHandler.absolutePosition(this.panel, this.$el);
} }
}, },
onBlur() { hideOverlay() {
if (this.panel) { if (this.panel) {
DomHandler.addClass(this.panel, 'p-connected-overlay-hidden'); DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
DomHandler.removeClass(this.panel, 'p-connected-overlay-visible'); DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
this.unbindScrollListener();
setTimeout(() => { setTimeout(() => {
this.panel.style.display = 'none'; this.panel.style.display = 'none';
@ -103,6 +111,12 @@ export default {
}, 150); }, 150);
} }
}, },
onFocus() {
this.showOverlay();
},
onBlur() {
this.hideOverlay();
},
onKeyUp(event) { onKeyUp(event) {
if (this.panel) { if (this.panel) {
let value = event.target.value; let value = event.target.value;
@ -133,6 +147,27 @@ export default {
this.meter.style.backgroundPosition = meterPos; this.meter.style.backgroundPosition = meterPos;
this.info.textContent = label; this.info.textContent = label;
if (!DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
this.showOverlay();
}
}
},
bindScrollListener() {
if (!this.scrollHandler) {
const { id } = this.$attrs;
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, id, () => {
if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
this.hideOverlay();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
} }
} }
}, },