v3-pin-input/dist/pin-input.umd.js

``` npm install v3-pin-input --save ```

(function(n,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue")):typeof define=="function"&&define.amd?define(["vue"],u):(n=typeof globalThis<"u"?globalThis:n||self,n["pin-input"]=u(n.Vue))})(this,function(n){"use strict";const u="",d=(t,e)=>{const s=t.__vccOpts||t;for(const[i,c]of e)s[i]=c;return s},h={name:"field",emits:["onChange","onFocus"],props:{isFocus:Boolean,value:String,hidden:Boolean},watch:{isFocus(t,e){t&&!e&&this.setFocus()}},mounted(){this.isFocus&&this.setFocus()},methods:{setFocus(){this.$refs.input.focus(),this.$refs.input.select()},onFocus(){this.$refs.input.select(),this.$emit("onFocus")},onChange(t){const e=t.target.value.slice(-1);this.$refs.input.value=e,this.$emit("onChange",e)}},computed:{getType(){return this.hidden?"password":"number"}}},f={class:"sv-pin__filed-wrapper"},p=["type","value"];function m(t,e,s,i,c,o){return n.openBlock(),n.createElementBlock("label",f,[n.createElementVNode("input",{ref:"input",type:o.getType,value:s.value,class:"sv-pin__filed",onInput:e[0]||(e[0]=(...l)=>o.onChange&&o.onChange(...l)),onFocus:e[1]||(e[1]=(...l)=>o.onFocus&&o.onFocus(...l))},null,40,p)])}const F=d(h,[["render",m]]),y="",_={name:"pin-input",components:{Field:F},props:{defaultValue:[String,Number],count:Number,hidden:Boolean},emits:["onChange","onError"],data(){return{controller:[],numActiveField:0}},watch:{defaultValue(t){t||this.setDefaultController()}},mounted(){this.setDefaultController()},methods:{setDefaultController(){this.controller=new Array(this.count).fill(""),(this.defaultValue||this.defaultValue===0)&&(String(this.defaultValue).split("").slice(0,this.count).reverse().forEach((e,s)=>{const i=this.controller.length-(s+1);this.controller[i]=e}),this.updateController())},isFocus(t){return t-1===this.numActiveField},onChangeInputField(t,e){this.controller[t]=e,this.updateController(),this.nextField()},onFocusField(t){this.numActiveField=t},prevField(){this.numActiveField>0&&this.numActiveField--},nextField(){this.numActiveField<this.count-1&&this.numActiveField++},downArrowLeft(){setTimeout(()=>{this.prevField()})},downArrowRight(){setTimeout(()=>{this.nextField()})},clearField(t){t.preventDefault(),this.controller[this.numActiveField]="",this.updateController(),this.prevField()},onPaste(t){t.preventDefault();let e=(t.clipboardData||window.clipboardData).getData("text");Number(e)?(this.controller.forEach((s,i)=>{e&&i===this.numActiveField&&(this.controller[this.numActiveField]=e[0],e=e.slice(1),this.nextField())}),this.updateController()):this.$emit("onError","Некорректный ввод")},updateController(){let t=this.controller.map(e=>e===""?"0":e).join("");this.$emit("onChange",t)}}},g={class:"sv-pin"};function v(t,e,s,i,c,o){const l=n.resolveComponent("field");return n.openBlock(),n.createElementBlock("div",g,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(s.count,r=>(n.openBlock(),n.createBlock(l,{key:r,isFocus:o.isFocus(r),value:c.controller[r-1],hidden:s.hidden,onOnFocus:a=>o.onFocusField(r-1),onOnChange:a=>o.onChangeInputField(r-1,a),onKeydown:[e[0]||(e[0]=n.withKeys(a=>o.clearField(a),["delete"])),n.withKeys(o.downArrowLeft,["arrow-left"]),n.withKeys(o.downArrowRight,["arrow-right"])],onPaste:o.onPaste},null,8,["isFocus","value","hidden","onOnFocus","onOnChange","onKeydown","onPaste"]))),128))])}const w=d(_,[["render",v]]);return{install:t=>{t.component("PinInput",w)}}});