Refactor #500 - For Password
parent
ee5f43f753
commit
36d437d6fc
|
@ -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;
|
||||||
|
@ -74,10 +80,10 @@ export default {
|
||||||
this.panel.appendChild(this.info);
|
this.panel.appendChild(this.info);
|
||||||
document.body.appendChild(this.panel);
|
document.body.appendChild(this.panel);
|
||||||
},
|
},
|
||||||
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue