primevue/inputotp/inputotp.min.js

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

this.primevue=this.primevue||{},this.primevue.inputotp=function(e,t,n,o){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=i(e),r={name:"InputOtp",extends:{name:"BaseInputOtp",extends:i(t).default,props:{modelValue:{type:null,default:!1},invalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},variant:{type:String,default:null},tabindex:{type:Number,default:null},length:{type:Number,default:4},mask:{type:Boolean,default:!1},integerOnly:{type:Boolean,default:!1}},style:i(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{tokens:[]}},watch:{modelValue:{immediate:!0,handler:function(e){this.tokens=e?e.split(""):new Array(this.length)}}},methods:{getTemplateAttrs:function(e){return{value:this.tokens[e]}},getTemplateEvents:function(e){var t=this;return{input:function(n){return t.onInput(n,e)},keydown:function(e){return t.onKeyDown(e)},focus:function(e){return t.onFocus(e)},blur:function(e){return t.onBlur(e)},paste:function(e){return t.onPaste(e)}}},getPTOptions:function(e){return("root"===e?this.ptmi:this.ptm)(e,{context:{checked:this.checked,disabled:this.disabled}})},onInput:function(e,t){this.tokens[t]=e.target.value,this.updateModel(e),"deleteContentBackward"===e.inputType?this.moveToPrev(e):"insertText"!==e.inputType&&"deleteContentForward"!==e.inputType||this.moveToNext(e)},updateModel:function(e){var t=this.tokens.join("");this.$emit("update:modelValue",t),this.$emit("change",{originalEvent:e,value:t})},moveToPrev:function(e){var t=this.findPrevInput(e.target);t&&(t.focus(),t.select())},moveToNext:function(e){var t=this.findNextInput(e.target);t&&(t.focus(),t.select())},findNextInput:function(e){var t=e.nextElementSibling;if(t)return"INPUT"===t.nodeName?t:this.findNextInput(t)},findPrevInput:function(e){var t=e.previousElementSibling;if(t)return"INPUT"===t.nodeName?t:this.findPrevInput(t)},onFocus:function(e){e.target.select(),this.$emit("focus",e)},onBlur:function(e){this.$emit("blur",e)},onKeyDown:function(e){switch(e.code){case"ArrowLeft":this.moveToPrev(e),e.preventDefault();break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;case"Backspace":0===e.target.value.length&&(this.moveToPrev(e),e.preventDefault());break;case"ArrowRight":this.moveToNext(e),e.preventDefault();break;default:(this.integerOnly&&!(Number(e.key)>=0&&Number(e.key)<=9)||this.tokens.join("").length>=this.length&&"Delete"!==e.code)&&e.preventDefault()}},onPaste:function(e){var t=e.clipboardData.getData("text");if(t.length){var n=t.substring(0,this.length+1);this.integerOnly&&isNaN(n)||(this.tokens=n.split(""),this.updateModel(e))}e.preventDefault()}},computed:{inputMode:function(){return this.integerOnly?"numeric":"text"},inputType:function(){return this.mask?"password":"text"}},components:{OtpInputText:u.default}};return r.render=function(e,t,n,i,u,r){var a=o.resolveComponent("OtpInputText");return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.length,(function(n){return o.renderSlot(e.$slots,"default",{key:n,events:r.getTemplateEvents(n-1),attrs:r.getTemplateAttrs(n-1),index:n},(function(){return[o.createVNode(a,{value:u.tokens[n-1],type:r.inputType,class:o.normalizeClass(e.cx("input")),inputmode:r.inputMode,variant:e.variant,readonly:e.readonly,disabled:e.disabled,invalid:e.invalid,tabindex:e.tabindex,unstyled:e.unstyled,onInput:function(e){return r.onInput(e,n-1)},onFocus:t[0]||(t[0]=function(e){return r.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return r.onBlur(e)}),onPaste:t[2]||(t[2]=function(e){return r.onPaste(e)}),onKeydown:t[3]||(t[3]=function(e){return r.onKeyDown(e)}),pt:e.ptm("input")},null,8,["value","type","class","inputmode","variant","readonly","disabled","invalid","tabindex","unstyled","onInput","pt"])]}))})),128))],16)},r}(primevue.inputtext,primevue.basecomponent,primevue.inputotp.style,Vue);