https://qanoniah.com/_nuxt/DUTMONN2.js

1import{_ as m,o as r,c as a,t as i,p as x,e as o,F as c,g as f,n as d}from"./CmVSntq3.js";const h=["sm","md","lg"],g={name:"VerificationCodeInput",props:{modelValue:{type:String,default:""},count:{type:Number,default:4,validator:n=>[4,6].includes(n)},size:{type:String,default:"sm",validator:n=>h.includes(n)},label:{type:String,default:""},hintText:{type:String,default:""},error:{type:Boolean,default:!1}},emits:["update:modelValue","complete"],data(){return{focusedIndex:-1}},watch:{modelValue(n){this.focusedIndex!==-1&&(this.focusedIndex=Math.min((n||"").length,this.count-1))}},computed:{digits(){return Array.from({length:this.count})},values(){return(this.modelValue||"").split("").slice(0,this.count)},cellClasses(){return{sm:this.count===6?"w-[64px] min-h-[64px] px-[8px] py-[2px] rounded-[10px]":"w-[66px] h-[56px] px-[8px] py-[2px] rounded-[10px]",md:"w-[80px] min-h-[80px] p-[8px] rounded-[12px]",lg:"w-[96px] min-h-[96px] px-[8px] py-[12px] rounded-[12px]"}[this.size]},innerClasses(){return this.size==="lg"?"h-[60px]":"h-[50px]"},separatorClasses(){return{sm:"text-[60px] h-[64px] w-[28px]",md:"text-[60px] w-[26px]",lg:"text-[60px] whitespace-nowrap"}[this.size]}},methods:{focusInput(){this.$refs.hiddenInput.focus()},onFocus(){this.focusedIndex=Math.min(this.values.length,this.count-1)},onBlur(){this.focusedIndex=-1},onInput(n){const e=n.target.value.replace(/\D/g,"").slice(0,this.count);n.target.value=e,this.$emit("update:modelValue",e),this.focusedIndex=Math.min(e.length,this.count-1),e.length===this.count&&this.$emit("complete",e)},onKeydown(n){n.key==="Backspace"&&!this.modelValue&&(this.focusedIndex=0)}}},y={class:"flex flex-col gap-1.5 select-none"},I={key:0,class:"text-sm font-medium leading-[22px] text-gray-600 w-full"},w=["maxlength","value"];function v(n,e,l,V,p,t){return r(),a("div",y,[l.label?(r(),a("p",I,i(l.label),1)):x("",!0),o("div",{dir:"ltr",class:"flex gap-3.5 items-center",onClick:e[0]||(e[0]=(...s)=>t.focusInput&&t.focusInput(...s))},[(r(!0),a(c,null,f(t.digits,(s,u)=>(r(),a(c,{key:"cell-"+u},[l.count===6&&u===3?(r(),a("span",{key:0,class:d(["text-gray-300 text-center leading-[72px] shrink-0",t.separatorClasses])},"—",2)):x("",!0),o("div",{class:d(["flex flex-col items-center justify-center border bg-white overflow-clip shrink-0 transition-colors",[t.cellClasses,l.error?"border-red-600":p.focusedIndex===u?"border-brandV2-500 ring-1 ring-brandV2-500":"border-gray-200"]])},[o("span",{class:d(["flex flex-col justify-center text-[18px] font-medium leading-[28px] text-center w-full",[t.innerClasses,t.values[u]?"text-gray-800":"text-gray-400"]])},i(t.values[u]||"-"),3)],2)],64))),128))]),o("input",{ref:"hiddenInput",type:"text",inputmode:"numeric",maxlength:l.count,value:l.modelValue,class:"sr-only absolute",autocomplete:"one-time-code",onInput:e[1]||(e[1]=(...s)=>t.onInput&&t.onInput(...s)),onKeydown:e[2]||(e[2]=(...s)=>t.onKeydown&&t.onKeydown(...s)),onFocus:e[3]||(e[3]=(...s)=>t.onFocus&&t.onFocus(...s)),onBlur:e[4]||(e[4]=(...s)=>t.onBlur&&t.onBlur(...s))},null,40,w),l.hintText?(r(),a("p",{key:1,class:d(["text-xs font-normal leading-4 w-full",l.error?"text-red-600":"text-gray-600"])},i(l.hintText),3)):x("",!0)])}const k=m(g,[["render",v]]);export{k as V};