-
@@ -24,6 +36,12 @@ export default Vue.extend({
data: () => ({
code: '',
}),
+
+ methods: {
+ reset() {
+ this.code = '';
+ },
+ },
});
@@ -32,4 +50,32 @@ export default Vue.extend({
margin-top: 100px;
text-align: center;
}
+
+.monitor {
+ margin: 30px auto;
+ font-size: 18px;
+ font-family: Arial, sans-serif;
+ opacity: 0.6;
+
+ &-label {
+ margin-right: 4px;
+ }
+}
+
+.reset-button {
+ display: block;
+ margin: 0 auto;
+ border: none;
+ border-radius: 3px;
+ padding: 10px 30px;
+ font-size: 18px;
+ color: rgba(black, 0.8);
+ transition: color 0.1s ease-in;
+
+ &:hover,
+ &:focus {
+ cursor: pointer;
+ color: rgba(black, 0.5);
+ }
+}
diff --git a/src/plugin/Component.vue b/src/plugin/Component.vue
index a15fe7a..57f9c77 100644
--- a/src/plugin/Component.vue
+++ b/src/plugin/Component.vue
@@ -48,8 +48,15 @@ export default Vue.extend({
},
watch: {
- value() {
- this.setParentValue();
+ value(value: any) {
+ const valueNormalized = value || '';
+ if (!valueNormalized) {
+ this.init();
+ this.setParentValue();
+ this.focusLetterByIndex(0);
+ } else {
+ this.setParentValue();
+ }
},
length: {
diff --git a/src/plugin/dist/PincodeInput.min.js b/src/plugin/dist/PincodeInput.min.js
index 5c73ee4..4a66104 100644
--- a/src/plugin/dist/PincodeInput.min.js
+++ b/src/plugin/dist/PincodeInput.min.js
@@ -1,7 +1,8 @@
-import"core-js/modules/es6.string.iterator";import"core-js/modules/es6.set";import"core-js/modules/es6.object.keys";import"core-js/modules/es6.regexp.match";import"core-js/modules/web.dom.iterable";import"core-js/modules/es6.regexp.split";import"core-js/modules/es6.number.constructor";import Vue from"vue";var BASE_REF_NAME="vue-pincode-input",LETTER_REGEXP="^\\d{1}$",DEFAULT_INPUT_TYPE="tel",SECURE_INPUT_TYPE="password",script=Vue.extend({props:{value:{type:String,required:!0},length:{type:Number,default:4},autofocus:{type:Boolean,default:!0},secure:{type:Boolean,default:!1},characterPreview:{type:Boolean,default:!0},previewDuration:{type:Number,default:300}},data:function data(){return{baseRefName:BASE_REF_NAME,letters:[],focusedLetterIdx:-1,watchers:{},lettersInputTypes:{}}},computed:{pinCodeComputed:function pinCodeComputed(){return this.letters.reduce(function(a,b){return a+b.value},"")}},watch:{value:function value(){this.handleParentValue()},length:{immediate:!0,handler:function handler(){this.init()}},focusedLetterIdx:function focusedLetterIdx(a){this.focusLetterByIndex(a)},pinCodeComputed:function pinCodeComputed(a){this.$emit("input",a)}},mounted:function mounted(){this.init(),this.handleParentValue(),this.autofocus&&this.focusLetterByIndex(0)},methods:{init:function init(){this.unwatchLetters(),this.resetLetters();for(var a=0;a
a||a>=this.length||(this.focusedLetterIdx=a)},focusLetterByIndex:function focusLetterByIndex(a){var b="".concat(this.baseRefName).concat(a);this.$refs[b][0].focus(),this.$refs[b][0].select()},onDelete:function onDelete(a,b){this.letters[a].value||(this.setFocusedLetterIndex(this.focusedLetterIdx-1),b.preventDefault())},setupLetterObject:function setupLetterObject(a){this.letters.push({key:a,value:""})},setupLetterWatcher:function setupLetterWatcher(a){var b=this,c="letters.".concat(a,".value");this.watchers[c]=this.$watch(c,function(c,d){b.onLetterChanged(a,c,d)})},unwatchLetters:function unwatchLetters(){var a=this;Object.keys(this.watchers).forEach(function(b){a.watchers[b]()})},resetLetters:function resetLetters(){this.letters=[]}}});function normalizeComponent(a,b,c,d,e,f/* server only */,g,h,i,j){"boolean"!=typeof g&&(i=h,h=g,g=!1);// Vue.extend constructor export interop.
+import"core-js/modules/es6.string.iterator";import"core-js/modules/es6.set";import"core-js/modules/es6.object.keys";import"core-js/modules/es6.regexp.match";import"core-js/modules/es6.regexp.split";import"core-js/modules/web.dom.iterable";import"core-js/modules/es6.number.constructor";import Vue from"vue";var props={value:{type:String,required:!0},length:{type:Number,default:4},autofocus:{type:Boolean,default:!0},secure:{type:Boolean,default:!1},characterPreview:{type:Boolean,default:!0},previewDuration:{type:Number,default:300}},BASE_REF_NAME="vue-pincode-input",LETTER_REGEXP="^\\d{1}$",DEFAULT_INPUT_TYPE="tel",SECURE_INPUT_TYPE="password",script=Vue.extend({props:props,data:function data(){return{baseRefName:BASE_REF_NAME,letters:[],focusedLetterIdx:-1,watchers:{},lettersInputTypes:{}}},computed:{pinCodeComputed:function pinCodeComputed(){return this.letters.reduce(function(a,b){return a+b.value},"")}},watch:{value:function value(a){a||""?this.setParentValue():(this.init(),this.setParentValue(),this.focusLetterByIndex(0))},length:{immediate:!0,handler:function handler(){this.init()}},focusedLetterIdx:function focusedLetterIdx(a){this.focusLetterByIndex(a)},pinCodeComputed:function pinCodeComputed(a){this.$emit("input",a)}},mounted:function mounted(){this.init(),this.setParentValue(),this.autofocus&&this.focusLetterByIndex(0)},methods:{init:function init(){this.unwatchLetters(),this.resetLetters();for(var a=0;aa||a>=this.length||(this.focusedLetterIdx=a)},focusLetterByIndex:function focusLetterByIndex(a){var b="".concat(this.baseRefName).concat(a);this.$refs[b][0].focus(),this.$refs[b][0].select()},onDelete:function onDelete(a,b){this.letters[a].value||(this.setFocusedLetterIndex(this.focusedLetterIdx-1),b.preventDefault())},setupLetterObject:function setupLetterObject(a){this.letters.push({key:a,value:""})},setupLetterWatcher:function setupLetterWatcher(a){var b=this,c="letters.".concat(a,".value");this.watchers[c]=this.$watch(c,function(c,d){b.onLetterChanged(a,c,d)})},unwatchLetters:function unwatchLetters(){var a=this;Object.keys(this.watchers).forEach(function(b){a.watchers[b]()})},resetLetters:function resetLetters(){this.letters=[]}}});function normalizeComponent(a,b,c,d,e,f/* server only */,g,h,i,j){"boolean"!=typeof g&&(i=h,h=g,g=!1);// Vue.extend constructor export interop.
var k="function"==typeof c?c.options:c;// render functions
a&&a.render&&(k.render=a.render,k.staticRenderFns=a.staticRenderFns,k._compiled=!0,e&&(k.functional=!0)),d&&(k._scopeId=d);var l;if(f?(l=function(a){a=a||// cached call
this.$vnode&&this.$vnode.ssrContext||// stateful
this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,a||"undefined"==typeof __VUE_SSR_CONTEXT__||(a=__VUE_SSR_CONTEXT__),b&&b.call(this,i(a)),a&&a._registeredComponents&&a._registeredComponents.add(f)},k._ssrRegister=l):b&&(l=g?function(a){b.call(this,j(a,this.$root.$options.shadowRoot))}:function(a){b.call(this,h(a))}),l)if(k.functional){// register for functional component in vue file
var m=k.render;k.render=function(a,b){return l.call(b),m(a,b)}}else{// inject component registration as beforeCreate hook
-var n=k.beforeCreate;k.beforeCreate=n?[].concat(n,l):[l]}return c}var isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(){return function(a,b){return addStyle(a,b)}}var HEAD,styles={};function addStyle(a,b){var c=isOldIE?b.media||"default":a,d=styles[c]||(styles[c]={ids:new Set,styles:[]});if(!d.ids.has(a)){d.ids.add(a);var h=b.source;if(b.map&&(h+="\n/*# sourceURL="+b.map.sources[0]+" */",h+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(b.map))))+" */"),d.element||(d.element=document.createElement("style"),d.element.type="text/css",b.media&&d.element.setAttribute("media",b.media),void 0===HEAD&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(d.element)),"styleSheet"in d.element)d.styles.push(h),d.element.styleSheet.cssText=d.styles.filter(Boolean).join("\n");else{var e=d.ids.size-1,f=document.createTextNode(h),g=d.element.childNodes;g[e]&&d.element.removeChild(g[e]),g.length?d.element.insertBefore(f,g[e]):d.element.appendChild(f)}}}/* script */var __vue_script__=script,__vue_render__=function(){var a=this,b=a.$createElement,c=a._self._c||b;return c("div",{staticClass:"vue-pincode-input-wrapper"},a._l(a.letters,function(b,d){return c("input",a._b({directives:[{name:"model",rawName:"v-model.trim",value:b.value,expression:"letter.value",modifiers:{trim:!0}}],key:b.key,ref:""+a.baseRefName+d,refInFor:!0,staticClass:"vue-pincode-input",attrs:{type:a.lettersInputTypes[d]},domProps:{value:b.value},on:{focus:function focus(){return a.setFocusedLetterIndex(d)},keydown:function keydown(b){return!b.type.indexOf("key")&&a._k(b.keyCode,"delete",[8,46],b.key,["Backspace","Delete","Del"])?null:a.onDelete(d,b)},input:function input(c){c.target.composing||a.$set(b,"value",c.target.value.trim())},blur:function blur(){return a.$forceUpdate()}}},"input",a.$attrs,!1))}),0)},__vue_staticRenderFns__=[],__vue_inject_styles__=function(a){a&&a("data-v-b61c24aa_0",{source:".vue-pincode-input-wrapper{display:inline-flex}.vue-pincode-input{outline:0;margin:3px;padding:5px;max-width:40px;text-align:center;font-size:1.1rem;border:none;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.5)}.vue-pincode-input:focus{box-shadow:0 0 6px rgba(0,0,0,.5)}",map:void 0,media:void 0})},__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0);/* template */export default __vue_component__;
+var n=k.beforeCreate;k.beforeCreate=n?[].concat(n,l):[l]}return c}var isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(){return function(a,b){return addStyle(a,b)}}var HEAD,styles={};function addStyle(a,b){var c=isOldIE?b.media||"default":a,d=styles[c]||(styles[c]={ids:new Set,styles:[]});if(!d.ids.has(a)){d.ids.add(a);var h=b.source;if(b.map&&(h+="\n/*# sourceURL="+b.map.sources[0]+" */",h+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(b.map))))+" */"),d.element||(d.element=document.createElement("style"),d.element.type="text/css",b.media&&d.element.setAttribute("media",b.media),void 0===HEAD&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(d.element)),"styleSheet"in d.element)d.styles.push(h),d.element.styleSheet.cssText=d.styles.filter(Boolean).join("\n");else{var e=d.ids.size-1,f=document.createTextNode(h),g=d.element.childNodes;g[e]&&d.element.removeChild(g[e]),g.length?d.element.insertBefore(f,g[e]):d.element.appendChild(f)}}}/* script */var __vue_script__=script,__vue_render__=function(){var a=this,b=a.$createElement,c=a._self._c||b;return c("div",{staticClass:"vue-pincode-input-wrapper"},a._l(a.letters,function(b,d){return c("input",a._b({directives:[{name:"model",rawName:"v-model.trim",value:b.value,expression:"letter.value",modifiers:{trim:!0}}],key:b.key,ref:""+a.baseRefName+d,refInFor:!0,staticClass:"vue-pincode-input",attrs:{type:a.lettersInputTypes[d]},domProps:{value:b.value},on:{focus:function focus(){return a.setFocusedLetterIndex(d)},keydown:function keydown(b){return!b.type.indexOf("key")&&a._k(b.keyCode,"delete",[8,46],b.key,["Backspace","Delete","Del"])?null:a.onDelete(d,b)},input:function input(c){c.target.composing||a.$set(b,"value",c.target.value.trim())},blur:function blur(){return a.$forceUpdate()}}},"input",a.$attrs,!1))}),0)},__vue_staticRenderFns__=[],__vue_inject_styles__=function(a){a&&a("data-v-a2009296_0",{source:".vue-pincode-input-wrapper{display:inline-flex}.vue-pincode-input{outline:0;margin:3px;padding:5px;max-width:40px;text-align:center;font-size:1.1rem;border:none;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.5)}.vue-pincode-input:focus{box-shadow:0 0 6px rgba(0,0,0,.5)}",map:void 0,media:void 0})},__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,__vue_component__=/*#__PURE__*/normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0);/* template */export default __vue_component__;
diff --git a/src/plugin/dist/package-lock.json b/src/plugin/dist/package-lock.json
new file mode 100644
index 0000000..1bc5bfd
--- /dev/null
+++ b/src/plugin/dist/package-lock.json
@@ -0,0 +1,13 @@
+{
+ "name": "vue-pincode-input",
+ "version": "0.2.0",
+ "lockfileVersion": 1,
+ "requires": true,
+ "dependencies": {
+ "core-js": {
+ "version": "2.6.11",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+ "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+ }
+ }
+}
diff --git a/src/plugin/dist/package.json b/src/plugin/dist/package.json
index a5a5c0b..c484b94 100644
--- a/src/plugin/dist/package.json
+++ b/src/plugin/dist/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-pincode-input",
- "version": "0.2.0",
+ "version": "0.3.0",
"private": false,
"description": "Great pincode input component for Vue.js applications.",
"main": "PincodeInput.min.js",