2 lines
11 KiB
JavaScript
2 lines
11 KiB
JavaScript
|
import{d as T,g as F,H as M,D as Q,i as y,c as k,w as j,J as ee,b as c,e as N,f as E,F as A,r as te,x as U,y as q,K as se,G as ne,v as K,k as a,s as v,I as H,t as V,u as s,M as ae,E as W,C as B,q as P,N as oe,h as le,_ as z}from"./index-DAH9biZS.js";import{P as G}from"./PageBar-LUK1_bA9.js";import{_ as ue}from"./NotifyVant.vue_vue_type_script_setup_true_lang-CDbw_NBZ.js";import{a as J,F as x,I as $,T as ie}from"./index-CPQtCaRL.js";import{a as re}from"./Spinner.vue_vue_type_style_index_0_lang-V0MPrlo2.js";import{_ as ce}from"./DialogVant.vue_vue_type_style_index_0_lang-C5L98I2P.js";import"./FormItemContext-DwqRsrU-.js";import"./classCallCheck-CSZsSBLe.js";import"./_commonjsHelpers-Cpj98o6Y.js";const de={class:"otp-single-input"},pe=["type","placeholder","disabled"],me={key:0},ve=["innerHTML"],fe=T({__name:"SingleOtpInput",props:{inputType:{default:"tel"},value:{},separator:{},focus:{type:Boolean},inputClasses:{},shouldAutoFocus:{type:Boolean},isLastChild:{type:Boolean},placeholder:{},disabled:{type:Boolean}},emits:["on-change","on-keydown","on-paste","on-focus","on-blur"],setup(o,{emit:g}){const r=o,f=g,n=F(r.value||""),l=F(null),u=()=>(n.value=n.value.toString(),n.value.length>1&&(n.value=n.value.slice(0,1)),f("on-change",n.value)),h=d=>d>=48&&d<=57||d>=96&&d<=105,p=d=>{r.disabled&&d.preventDefault();const m=d||window.event,I=m.which?m.which:m.keyCode;h(I)||[8,9,13,37,39,46,86].includes(I)?f("on-keydown",d):m.preventDefault()},e=d=>f("on-paste",d),b=()=>(l.value.select(),f("on-focus")),i=()=>f("on-blur");return M(()=>r.value,(d,m)=>{d!==m&&(n.value=d??"")}),M(()=>r.focus,(d,m)=>{m!==d&&l.value&&r.focus&&(l.value.focus(),l.value.select())}),Q(()=>{l.value&&r.focus&&r.shouldAutoFocus&&(l.value.focus(),l.value.select())}),(d,m)=>(y(),k("div",de,[j(c("input",{type:o.inputType,placeholder:o.placeholder,disabled:o.disabled,ref_key:"input",ref:l,min:"0",max:"9",maxlength:"1",pattern:"[0-9]","onUpdate:modelValue":m[0]||(m[0]=I=>n.value=I),class:N(o.inputClasses),onInput:u,onKeydown:p,onPaste:e,onFocus:b,onBlur:i},null,42,pe),[[ee,n.value]]),!o.isLastChild&&o.separator?(y(),k("span",me,[c("span",{innerHTML:o.separator},null,8,ve)])):E("",!0)]))}}),he={class:"flex ltr justify-around w-full"},_e=8,ye=37,ge=39,be=46,we=T({__name:"OtpInput",props:{defaultFocus:{type:Boolean},numInputs:{default:4},separator:{},inputClasses:{},inputType:{},shouldAutoFocus:{type:Boolean,default:!1},placeholder:{},disabled:{type:Boolean,default:!1}},emits:["on-change","on-complete"],setup(o,{emit:g}){const r=o,f=g,n=F(0),l=F([]),u=F([]),h=t=>{r.defaultFocus&&t<r.numInputs&&!l.value[t]?n.value=l.value.length:n.value=t},p=()=>{n.value=-1},e=()=>l.value.join("").length===r.numInputs?f("on-complete",l.value.join("")):"Wait until the user enters the required number of characters",b=t=>{n.value=Math.max(Math.min(r.numInputs-1,t),0)},i=()=>b(n.value+1),d=()=>b(n.value-1),m=t=>{u.value=Object.assign([],l.value),typeof t=="string"&&t===""?l.value.splice(n.value,1):l.value[n.value]=t,u.value.join("")!==l.value.join("")&&(f("on-change",l.value.join("")),e())},I=t=>{var L;t.preventDefault();const w=(((L=t.clipboardData)==null?void 0:L.getData("text/plain"))??"").slice(0,r.numInputs-n.value).split("");if(r.inputType==="number"&&!w.join("").match(/^\d+$/))return"Invalid pasted data";const S=l.value.slice(0,n.value).concat(w);return S.slice(0,r.numInputs).forEach((Y,Z)=>{l.value[Z]=Y}),b(S.slice(0,r.numInputs).length),e()},R=t=>{m(t),i()},_=t=>{switch(t.keyCode){case _e:t.preventDefault(),m(""),d();break;case be:t.preventDefault(),m("");break;case ye:t.preventDefault(),d();break;case ge:t.preventDefault(),i();break}};return(t,O)=>(y(),k("div",null,[c("div",he,[(y(!0),k(A,null,te(o.numInputs,(w,D)=>(y(),U(fe,{key:D,focus:n.value===D,value:l.value[D],separator:o.separator,"input-type":o.inputType,"input-classes":o.inputClasses,"is-last-child":D===o.numInputs-1,"should-auto-focus":o.shouldAutoFocus,placeholder:o.placeholder,disabled:o.disabled,onOnChange:R,onOnKeydown:_,onOnPaste:I,onOnFocus:S=>h(D),onOnBlur:p},null,8,["focus","value","separator","input-type","input-cla
|