2 lines
5.0 KiB
JavaScript
2 lines
5.0 KiB
JavaScript
import{d as O,r as v,a0 as B,z as d,A as m,T as F,a1 as M,a2 as z,G as E,l as H,o as K,B as T,a3 as V}from"./CE4SaZgW.js";const q={style:{display:"flex","align-items":"center"}},G=["type","inputmode","placeholder","disabled","maxlength","value"],N={key:0},S=["innerHTML"],$=O({__name:"single-otp-input",props:{inputType:{default:"tel"},inputmode:{default:"numeric"},value:{default:""},separator:{default:""},focus:{type:Boolean,default:!1},inputClasses:{default:""},conditionalClass:{default:""},shouldAutoFocus:{type:Boolean,default:!1},isLastChild:{type:Boolean,default:!1},placeholder:{default:""},isDisabled:{type:Boolean,default:!1}},emits:["on-change","on-keydown","on-paste","on-focus","on-blur"],setup(C,{emit:k}){const s=C,n=k,i=v(s.value||""),t=v(null),l=e=>{const u=e.target.value;return u&&u.trim().length>1?(e.clipboardData={getData:()=>u.trim()},n("on-paste",e)):n("on-change",u)},f=e=>e>=65&&e<=90,D=e=>e>=48&&e<=57||e>=96&&e<=105,I=e=>{s.isDisabled&&e.preventDefault();const u=e||window.event,c=u.which?u.which:u.keyCode;if(/iPhone|iPad|iPod/.test(navigator.userAgent)){n("on-keydown",e);return}D(c)||s.inputType==="letter-numeric"&&f(c)||[8,9,13,37,39,46,86].includes(c)?n("on-keydown",e):u.preventDefault()},h=e=>n("on-paste",e),r=()=>(t.value.select(),n("on-focus")),y=()=>n("on-blur"),g=H(()=>["letter-numeric","number"].includes(s.inputType)?"text":s.inputType);return B(()=>s.value,(e,u)=>{e!==u&&(i.value=e)}),B(()=>s.focus,(e,u)=>{u!==e&&t.value&&s.focus&&(t.value.focus(),t.value.select())}),K(()=>{t.value&&s.focus&&s.shouldAutoFocus&&(t.value.focus(),t.value.select())}),(e,u)=>(d(),m("div",q,[T("input",{"data-test":"single-input",type:g.value,inputmode:e.inputmode,placeholder:e.placeholder,disabled:e.isDisabled,ref_key:"input",ref:t,min:"0",max:"9",maxlength:e.isLastChild?1:void 0,pattern:"[0-9]",value:i.value,class:V([e.inputClasses,e.conditionalClass,{"is-complete":i.value}]),onInput:l,onKeydown:I,onPaste:h,onFocus:r,onBlur:y},null,42,G),!e.isLastChild&&e.separator?(d(),m("span",N,[T("span",{innerHTML:e.separator},null,8,S)])):F("",!0)]))}}),J={style:{display:"flex"},class:"otp-input-container"},Q={key:0,autocomplete:"off",name:"hidden",type:"text",style:{display:"none"}},U=8,W=37,X=39,Y=46,Z=O({__name:"vue3-otp-input",props:{value:{default:""},numInputs:{default:4},separator:{default:""},inputClasses:{default:""},conditionalClass:{default:()=>[]},inputType:{},inputmode:{default:"text"},shouldAutoFocus:{type:Boolean,default:!1},placeholder:{default:()=>[]},isDisabled:{type:Boolean,default:!1},shouldFocusOrder:{type:Boolean}},emits:["update:value","on-change","on-complete"],setup(C,{expose:k,emit:s}){const n=C,i=s,t=v(0),l=v([]),f=v([]);B(()=>n.value,a=>{if(a.length===n.numInputs||l.value.length===0){const o=a.split("");l.value=o}},{immediate:!0});const D=a=>{t.value=a},I=()=>{t.value!==n.numInputs-1&&(t.value=-1)},h=()=>l.value.join("").length===n.numInputs?(i("update:value",l.value.join("")),i("on-complete",l.value.join(""))):"Wait until the user enters the required number of characters",r=a=>{t.value=Math.max(Math.min(n.numInputs-1,a),0)},y=()=>{r(t.value+1)},g=()=>{r(t.value-1)},e=a=>{f.value=Object.assign([],l.value),l.value[t.value]=a.toString(),f.value.join("")!==l.value.join("")&&(i("update:value",l.value.join("")),i("on-change",l.value.join("")),h())},u=a=>{a.preventDefault();const o=a.clipboardData.getData("text/plain").slice(0,n.numInputs-t.value).split("");if(n.inputType==="number"&&!o.join("").match(/^\d+$/)||n.inputType==="letter-numeric"&&!o.join("").match(/^\w+$/))return"Invalid pasted data";const w=l.value.slice(0,t.value).concat(o);return w.slice(0,n.numInputs).forEach(function(p,b){l.value[b]=p}),r(w.slice(0,n.numInputs).length),h()},c=a=>{e(a),t.value<n.numInputs-1&&y()},A=()=>{l.value.length>0&&(i("update:value",""),i("on-change","")),l.value=[],t.value=0},L=a=>{const o=a.split("");o.length===n.numInputs&&(l.value=o,i("update:value",l.value.join("")),i("on-complete",l.value.join("")))},P=(a,o)=>{switch(a.keyCode){case U:a.preventDefault(),e(""),g();break;case Y:a.preventDefault(),e("");break;case W:a.preventDefault(),g();break;case X:a.preventDefault(),y();break;default:_(o);break}},_=a=>{n.shouldFocusOrder&&setTimeout(()=>{const o=l.value.join("").length;a-o>=0&&(t.value=o,l.value[a]="")},100)};return k({clearInput:A,fillInput:L}),(a,o)=>(d(),m("div",J,[a.inputType==="password"?(d(),m("input",Q)):F("",!0),(d(!0),m(M,null,z(a.numInputs,(w,p)=>{var b,j;return d(),E($,{key:p,focus:t.value===p,value:l.value[p],separator:a.separator,"input-type":a.inputType,inputmode:a.inputmode,"input-classes":a.inputClasses,conditionalClass:(b=a.conditionalClass)==null?void 0:b[p],"is-last-child":p===a.numInputs-1,"should-auto-focus":a.shouldAutoFocus,placeholder:(j=a.placeholder)==null?void 0:j[p],"is-disabled":a.isDisabled,onOnChange:c,onOnKeydown:x=>P(x,p),onOnPaste:u,onOnFocus:x=>D(p),onOnBlur:I},null,8,["focus","value","separator","input-type","inputmode","input-classes","conditionalClass","is-last-child","should-auto-focus","placeholder","is-disabled","onOnKeydown","onOnFocus"])}),128))]))}});export{Z as x};
|