@hauzhengyi/vue3-otp-input/dist/vue3-otp-input.min.js

A fully customizable, OTP (one-time password) input component built with Vue 3.x and Vue Composition API.

var Vue3OtpInput=function(e){"use strict";function n(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var u,a,l,o,r=[],i=!0,c=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;i=!1}else for(;!(i=(u=l.call(t)).done)&&(r.push(u.value),r.length!==n);i=!0);}catch(e){c=!0,a=e}finally{try{if(!i&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw a}}return r}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var u=Object.prototype.toString.call(e).slice(8,-1);"Object"===u&&e.constructor&&(u=e.constructor.name);if("Map"===u||"Set"===u)return Array.from(e);if("Arguments"===u||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(u))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,u=new Array(n);t<n;t++)u[t]=e[t];return u}var u=e.defineComponent({name:"SingleOtpInput",props:{inputType:{type:String,validator:function(e){return["number","tel","letter-numeric","password"].includes(e)},default:"tel"},inputmode:{type:String,default:"numeric"},value:{type:[String,Number]},separator:{type:String},focus:{type:Boolean},inputClasses:{type:[String,Array]},conditionalClass:{type:String},shouldAutoFocus:{type:Boolean},isLastChild:{type:Boolean},placeholder:{type:String},isDisabled:{type:Boolean}},emits:["on-change","on-keydown","on-paste","on-focus","on-blur"],setup:function(n,t){var u=t.emit,a=e.ref(n.value||""),l=e.ref(null);return e.watch((function(){return n.value}),(function(e,n){e!==n&&(a.value=e)})),e.watch((function(){return n.focus}),(function(e,t){t!==e&&l.value&&n.focus&&(l.value.focus(),l.value.select())})),e.onMounted((function(){l.value&&n.focus&&n.shouldAutoFocus&&(l.value.focus(),l.value.select())})),{handleOnChange:function(){return a.value=a.value.toString(),a.value.length>1?u("on-paste",a.value):u("on-change",a.value)},handleOnKeyDown:function(e){n.isDisabled&&e.preventDefault();var t=e||window.event,a=t.which?t.which:t.keyCode;(function(e){return e>=48&&e<=57||e>=96&&e<=105})(a)||"letter-numeric"===n.inputType&&function(e){return e>=65&&e<=90}(a)||[8,9,13,37,39,46,86].includes(a)?u("on-keydown",e):t.preventDefault()},handleOnPaste:function(e){var n;e.preventDefault();var t=null===(n=e.clipboardData)||void 0===n?void 0:n.getData("text/plain");u("on-paste",t)},handleOnFocus:function(){return l.value.select(),u("on-focus")},handleOnBlur:function(){return u("on-blur")},input:l,model:a,inputTypeValue:["letter-numeric","number"].includes(n.inputType)?"text":n.inputType}}}),a={style:{display:"flex","align-items":"center"}},l=["type","inputmode","placeholder","disabled","maxlength"],o={key:0},r=["innerHTML"];u.render=function(n,t,u,i,c,s){return e.openBlock(),e.createElementBlock("div",a,[e.withDirectives(e.createElementVNode("input",{"data-test":"single-input",type:n.inputTypeValue,inputmode:n.inputmode,placeholder:n.placeholder,disabled:n.isDisabled,ref:"input",min:"0",max:"9",maxlength:n.isLastChild?"1":"9",pattern:"[0-9]","onUpdate:modelValue":t[0]||(t[0]=function(e){return n.model=e}),class:e.normalizeClass([n.inputClasses,n.conditionalClass,{"is-complete":n.model}]),onInput:t[1]||(t[1]=function(){return n.handleOnChange&&n.handleOnChange.apply(n,arguments)}),onKeydown:t[2]||(t[2]=function(){return n.handleOnKeyDown&&n.handleOnKeyDown.apply(n,arguments)}),onPaste:t[3]||(t[3]=function(){return n.handleOnPaste&&n.handleOnPaste.apply(n,arguments)}),onFocus:t[4]||(t[4]=function(){return n.handleOnFocus&&n.handleOnFocus.apply(n,arguments)}),onBlur:t[5]||(t[5]=function(){return n.handleOnBlur&&n.handleOnBlur.apply(n,arguments)})},null,42,l),[[e.vModelDynamic,n.model]]),!n.isLastChild&&n.separator?(e.openBlock(),e.createElementBlock("span",o,[e.createElementVNode("span",{innerHTML:n.separator},null,8,r)])):e.createCommentVNode("",!0)])};var i=e.defineComponent({name:"Vue3OtpInput",components:{SingleOtpInput:u},props:{value:{type:String,default:"",required:!0},numInputs:{default:4},separator:{type:String,default:""},inputClasses:{type:[String,Array]},conditionalClass:{type:Array,default:[]},inputType:{type:String,validator:function(e){return["number","tel","letter-numeric","password"].includes(e)}},inputmode:{type:String,validator:function(e){return["numeric","text","tel","none"].includes(e)},default:"text"},shouldAutoFocus:{type:Boolean,default:!1},placeholder:{type:Array,default:[]},isDisabled:{type:Boolean,default:!1},shouldFocusOrder:{type:Boolean,default:!1}},setup:function(n,t){var u=t.emit,a=e.ref(0),l=e.ref([]),o=e.ref([]);e.watch((function(){return n.value}),(function(e){if(e.length===n.numInputs||0===l.value.length){var t=e.split("");l.value=t}}),{immediate:!0});var r=function(){return l.value.join("").length===n.numInputs?(u("update:value",l.value.join("")),u("on-complete",l.value.join(""))):"Wait until the user enters the required number of characters"},i=function(e){a.value=Math.max(Math.min(n.numInputs-1,e),0)},c=function(){i(a.value+1)},s=function(){i(a.value-1)},p=function(e){o.value=Object.assign([],l.value),l.value[a.value]=e,o.value.join("")!==l.value.join("")&&(u("update:value",l.value.join("")),u("on-change",l.value.join("")),r())},d=function(e){n.shouldFocusOrder&&setTimeout((function(){var n=l.value.join("").length;e-n>=0&&(a.value=n,l.value[e]="")}),100)};return{activeInput:a,otp:l,oldOtp:o,clearInput:function(){l.value.length>0&&(u("update:value",""),u("on-change","")),l.value=[],a.value=0},handleOnPaste:function(e){var t=e.slice(0,n.numInputs-a.value).split("");if("number"===n.inputType&&!t.join("").match(/^\d+$/))return"Invalid pasted data";if("letter-numeric"===n.inputType&&!t.join("").match(/^\w+$/))return"Invalid pasted data";var u=l.value.slice(0,a.value).concat(t);return u.slice(0,n.numInputs).forEach((function(e,n){l.value[n]=e})),i(u.slice(0,n.numInputs).length),r()},handleOnKeyDown:function(e,n){switch(e.keyCode){case 8:e.preventDefault(),p(""),s();break;case 46:e.preventDefault(),p("");break;case 37:e.preventDefault(),s();break;case 39:e.preventDefault(),c();break;default:d(n)}},handleOnBlur:function(){a.value=-1},changeCodeAtFocus:p,focusInput:i,focusNextInput:c,focusPrevInput:s,handleOnFocus:function(e){a.value=e},checkFilledAllInputs:r,handleOnChange:function(e){p(e),c()},fillInput:function(e){var t=e.split("");t.length===n.numInputs&&(l.value=t,u("update:value",l.value.join("")),u("on-complete",l.value.join("")))}}}}),c={style:{display:"flex"},class:"otp-input-container"},s={key:0,autocomplete:"off",name:"hidden",type:"text",style:{display:"none"}};i.render=function(n,t,u,a,l,o){var r=e.resolveComponent("SingleOtpInput");return e.openBlock(),e.createElementBlock("div",c,["password"===n.inputType?(e.openBlock(),e.createElementBlock("input",s)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.numInputs,(function(t,u){return e.openBlock(),e.createBlock(r,{key:u,focus:n.activeInput===u,value:n.otp[u],separator:n.separator,"input-type":n.inputType,inputmode:n.inputmode,"input-classes":n.inputClasses,conditionalClass:n.conditionalClass[u],"is-last-child":u===n.numInputs-1,"should-auto-focus":n.shouldAutoFocus,placeholder:n.placeholder[u],"is-disabled":n.isDisabled,onOnChange:n.handleOnChange,onOnKeydown:function(e){return n.handleOnKeyDown(e,u)},onOnPaste:n.handleOnPaste,onOnFocus:function(e){return n.handleOnFocus(u)},onOnBlur:n.handleOnBlur},null,8,["focus","value","separator","input-type","inputmode","input-classes","conditionalClass","is-last-child","should-auto-focus","placeholder","is-disabled","onOnChange","onOnKeydown","onOnPaste","onOnFocus","onOnBlur"])})),128))])};var p=function(){var e=i;return e.install=function(n){n.component("Vue3OtpInput",e)},e}(),d=Object.freeze({__proto__:null,default:p});return Object.entries(d).forEach((function(e){var t=n(e,2),u=t[0],a=t[1];"default"!==u&&(p[u]=a)})),p}(Vue);