@lbgm/otp-widget-vue/dist/otp-widget-vue.umd.js

OTP code input widget for Vue

(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.OtpWidgetVue={},l.Vue))})(this,function(l,e){"use strict";const x=["placeholder"],B=["placeholder"],b=e.defineComponent({__name:"otp-widget",props:{childs:{default:4},type:{default:"number"},placeholder:{default:""},gap:{default:"otp-gap-16"}},emits:["code","filled"],setup(c,{expose:f,emit:s}){const p=c,a=e.ref(null),r=e.ref([]),g=e.toRef(p,"childs"),i=e.toRef(p,"type"),v=n=>{const t=n.parentNode.children;return[...Array.from(t)].indexOf(n)},h=n=>{const t=n.target;t.value=String(t.value)[0]||""},m=n=>{n.preventDefault(),n.stopPropagation();const t=n.target,d=v(t),o=/^\d$/i.test(n.key)&&i.value==="number",u=/(^\D)|(^\d)$/i.test(n.key)&&i.value==="text",y=a.value.children[d+1],_=a.value.children[d-1];n.key!=="Backspace"&&(o||u)?(r.value.push(String(t.value)),t.value&&t.classList.add("hasvalue"),y&&y.focus()):n.key==="Backspace"&&(t.value="",r.value.splice(r.value.indexOf(String(t.value),1)),t.classList.remove("hasvalue"),_&&_.focus())};e.watch(r,()=>{const n=r.value.length,t=r.value.join("");n===g.value?(s("code",t),s("filled")):n===0&&s("code","")},{deep:!0});const k=n=>{const t=String(n.clipboardData.getData("Text")).trim(),d=a.value.querySelectorAll("input");t&&t.length===g.value&&(i.value==="text"&&/^[a-zA-Z0-9]*$/.test(t)||i.value==="number"&&/^[0-9]*$/.test(t))&&d.forEach((o,u)=>{o.value=t[u],r.value.push(String(t[u])),o.focus()})};return f({parent:a}),(n,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"parent",ref:a,class:e.normalizeClass(["widget-otp-parent",{[c.gap]:!0}]),"data-widget":"widget-otp-parent"},[e.unref(i)==="number"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(c.childs,(d,o)=>(e.openBlock(),e.createElementBlock("input",{key:o,ref_for:!0,ref:`widget-otp-input-${o}`,type:"number",min:"0",max:"9",step:"1",maxlength:"1",autocomplete:"off",spellcheck:"false",inputmode:"decimal",placeholder:c.placeholder,onKeyup:m,onInput:h,onPaste:k},null,40,x))),128)):e.createCommentVNode("",!0),e.unref(i)==="text"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(c.childs,(d,o)=>(e.openBlock(),e.createElementBlock("input",{key:o,ref_for:!0,ref:`widget-otp-input-${o}`,type:"text",maxlength:"1",autocomplete:"off",spellcheck:"false",onKeyup:m,onInput:h,placeholder:c.placeholder,onPaste:k},null,40,B))),128)):e.createCommentVNode("",!0)],2))}}),w="",S=((c,f)=>{const s=c.__vccOpts||c;for(const[p,a]of f)s[p]=a;return s})(b,[["__scopeId","data-v-27fa7e78"]]);l.OtpWidget=S,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});