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