vue3-pincode-input
Version:
Pincode input component for Vue3 applications.
3 lines (2 loc) • 4.57 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".vue-pincode-input-wrapper{display:flex;flex-wrap:wrap;row-gap:1rem}.vue-pincode-input-wrapper.is-success .vue-pincode-input{border:1px solid #62c633}.vue-pincode-input-wrapper.is-error .vue-pincode-input{border:1px solid #da3945}.vue-pincode-input-wrapper .vue-pincode-input{text-align:center;vertical-align:middle}.vue-pincode-input-wrapper .vue-pincode-input.default{width:65px;height:65px;border:1px solid #c4c4c4;font-size:1.8rem;transition:all .3s}.vue-pincode-input-wrapper .vue-pincode-input.default:focus{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.vue-pincode-input-wrapper .vue-pincode-input.default:not(:last-child){margin-right:.5rem}.vue-pincode-input-wrapper .vue-pincode-input:focus{outline-style:none}")),document.head.appendChild(e)}}catch(p){console.error("vite-plugin-css-injected-by-js",p)}})();
(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(t=typeof globalThis<"u"?globalThis:t||self,t.VuePincodeInput=l(t.Vue))})(this,function(t){"use strict";const l="",p=(e,s)=>{const i=e.__vccOpts||e;for(const[u,n]of s)i[u]=n;return i},h={name:"PincodeInput",props:{modelValue:{type:String,default:""},digits:{type:Number,default:4},placeholder:{type:String,default:""},secure:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},inputClass:{type:String,default:""},successClass:{type:String,default:""},spacingClass:{type:String,default:""},preview:{type:Number,default:0}},data(){return{baseRefName:"vue-pincode-input",focusedInputIndex:0,watchers:{},inputs:this.initialInputs()}},computed:{inputClasses(){return[this.inputClass||"default",this.isValid?this.successClass:""].join(" ")},isValid(){return this.inputs.join("").length===this.digits}},mounted(){this.$nextTick(()=>{this.init(),this.autofocus&&this.$refs["vue-pincode-input0"]&&this.$refs["vue-pincode-input0"][0].focus()})},beforeDestroy(){this.unwatchInputs()},methods:{init(){this.inputs=this.initialInputs();for(let e in this.inputs)this.setInputWatcher(e)},focusPreviousInput(){this.focusedInputIndex&&this.focusInputByIndex(this.focusedInputIndex-1)},focusNextInput(){this.focusedInputIndex!==this.digits-1&&this.focusInputByIndex(this.focusedInputIndex+1)},focusInputByIndex(e){const s=`${this.baseRefName}${e}`,i=this.$refs[s];i&&(i[0].focus(),i[0].select()),this.focusedInputIndex=e},hadleKeyDown(e){switch(e.keyCode){case 37:return this.focusPreviousInput();case 39:return this.focusNextInput()}if(this.inputs[this.focusedInputIndex])return this.inputs[this.focusedInputIndex]="";this.preview&&this.secure&&(e.target.type="tel",setTimeout(()=>{e.target.type="password"},this.preview))},setInputWatcher(e){const s=`inputs.${e}`;this.watchers[s]=this.$watch(s,(i,u)=>this.hadleInputChange(e,i,u))},isInputValid(e,s=!0){return e?!!e.match("^\\d{1}$"):s?e==="":!1},hadleInputChange(e,s,i){if(this.$emit("update:modelValue",this.inputs.join("")),!this.isInputValid(s,!1)){this.inputs[e]="";return}if(+e===this.digits-1){const u=this.inputs.findIndex(n=>!n);u!==-1&&this.focusInputByIndex(u);return}this.focusNextInput()},handleFocus(e){this.$refs[e][0].setSelectionRange(1,1)},pinfocus(e){this.$refs[e][0].focus()},hadleDelete(e,s){this.inputs[e].length||(this.focusPreviousInput(),s.preventDefault())},initialInputs(){return this.modelValue?this.modelValue.length<=this.digits?[...this.modelValue,...[...Array(this.digits-this.modelValue.length)].map(()=>"")]:[...this.modelValue.slice(0,this.digits)]:[...Array(this.digits)].map(()=>"")},reset(){this.unwatchInputs(),this.init()},unwatchInputs(){Object.keys(this.watchers).forEach(s=>this.watchers[s]())}}},a={class:"vue-pincode-input-wrapper"},d=["onUpdate:modelValue","type","placeholder","onFocus","onKeydown"];function f(e,s,i,u,n,r){return t.openBlock(),t.createElementBlock("div",a,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.inputs,(m,o)=>t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:o,ref_for:!0,ref:`${n.baseRefName}${o}`,"onUpdate:modelValue":c=>n.inputs[o]=c,type:i.secure?"password":"tel",placeholder:i.placeholder,maxlength:"1",class:t.normalizeClass(["vue-pincode-input",[r.inputClasses,i.spacingClass]]),onFocus:c=>n.focusedInputIndex=o,onKeydown:[t.withKeys(c=>r.hadleDelete(o,c),["delete"]),c=>r.hadleKeyDown(c,o)]},null,42,d)),[[t.vModelDynamic,n.inputs[o],void 0,{trim:!0}]])),128))])}return p(h,[["render",f]])});