vue-pincode-input/PincodeInput.min.js

Great pincode input component for Vue.js applications.

import"core-js/modules/es6.string.iterator";import"core-js/modules/es6.set";import"core-js/modules/es6.regexp.match";import"core-js/modules/es6.function.name";import"core-js/modules/es6.object.keys";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},charPreviewDuration:{type:Number,default:300}},BASE_REF_NAME="vue-pincode-input",CELL_REGEXP="^\\d{1}$",DEFAULT_INPUT_TYPE="tel",SECURE_INPUT_TYPE="password",script=Vue.extend({props:props,data:function data(){return{baseRefName:BASE_REF_NAME,focusedCellIdx:0,cells:[],watchers:{},cellsInputTypes:{}}},computed:{pinCodeComputed:function pinCodeComputed(){return this.cells.reduce(function(a,b){return a+b.value},"")}},watch:{value:function value(a){a?this.onParentValueUpdated():this.reset()},length:function length(){this.reset()},pinCodeComputed:function pinCodeComputed(a){this.$emit("input",a)}},mounted:function mounted(){this.init(),this.onParentValueUpdated(),this.autofocus&&this.$nextTick(this.focusCellByIndex)},methods:{/* init stuff */init:function init(){for(var a=this.getRelevantInputType(),b=0;b<this.length;b+=1)this.setCellObject(b),this.setCellInputType(b,a),this.setCellWatcher(b)},setCellObject:function setCellObject(a){this.$set(this.cells,a,{key:a,value:""})},setCellInputType:function setCellInputType(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:SECURE_INPUT_TYPE;this.$set(this.cellsInputTypes,a,b)},setCellWatcher:function setCellWatcher(a){var b=this,c="cells.".concat(a,".value");this.watchers[c]=this.$watch(c,function(c,d){return b.onCellChanged(a,c,d)})},/* handlers */onParentValueUpdated:function onParentValueUpdated(){var a=this;return this.value.length===this.length?void this.value.split("").forEach(function(b,c){a.cells[c].value=b||""}):void this.$emit("input",this.pinCodeComputed)},onCellChanged:function onCellChanged(a,b){return this.isTheCellValid(b,!1)?void(this.focusNextCell(),this.secure&&this.characterPreview&&setTimeout(this.setCellInputType,this.charPreviewDuration,a)):void(this.cells[a].value="")},onCellErase:function onCellErase(a,b){var c=this.cells[a].value.length;c||(this.focusPreviousCell(),b.preventDefault())},onKeyDown:function onKeyDown(a){switch(a.keyCode){/* left arrow key */case 37:this.focusPreviousCell();break;/* right arrow key */case 39:this.focusNextCell();}},/* reset stuff */reset:function reset(){this.unwatchCells(),this.init(),this.focusCellByIndex()},unwatchCells:function unwatchCells(){var a=this,b=Object.keys(this.watchers);b.forEach(function(b){return a.watchers[b]()})},/* helpers */isTheCellValid:function isTheCellValid(a){var b=!(1<arguments.length&&arguments[1]!==void 0)||arguments[1];return a?!!a.match(CELL_REGEXP):!!b&&""===a},getRelevantInputType:function getRelevantInputType(){return this.secure&&!this.characterPreview?SECURE_INPUT_TYPE:DEFAULT_INPUT_TYPE},focusPreviousCell:function focusPreviousCell(){this.focusedCellIdx&&this.focusCellByIndex(this.focusedCellIdx-1)},focusNextCell:function focusNextCell(){this.focusedCellIdx===this.length-1||this.focusCellByIndex(this.focusedCellIdx+1)},focusCellByIndex:function focusCellByIndex(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:0,b="".concat(this.baseRefName).concat(a),c=this.$refs[b][0];c.focus(),c.select(),this.focusedCellIdx=a}}});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.cells,function(b,d){return c("input",a._b({directives:[{name:"model",rawName:"v-model.trim",value:b.value,expression:"cell.value",modifiers:{trim:!0}}],key:b.key,ref:""+a.baseRefName+d,refInFor:!0,staticClass:"vue-pincode-input",attrs:{type:a.cellsInputTypes[d]},domProps:{value:b.value},on:{focus:function focus(){a.focusedCellIdx=d},keydown:[function(b){return!b.type.indexOf("key")&&a._k(b.keyCode,"delete",[8,46],b.key,["Backspace","Delete","Del"])?null:a.onCellErase(d,b)},a.onKeyDown],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-13cc1c60_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__;