[{"data":1,"prerenderedAt":571},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-otp":12,"i-ph:code":569},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":563,"meta":564,"navigation":120,"path":565,"seo":566,"stem":567,"__hash__":568},"docs\u002Fdocs\u002Fcomponents\u002Fotp.md","OTP",{"type":16,"value":17,"toc":558},"minimark",[18,22,26,390,395,464,468,512,516,519,554],[19,20,14],"h1",{"id":21},"otp",[23,24,25],"p",{},"A One-Time Password (OTP) input component that provides a user-friendly way to enter verification codes. It supports both numeric and alphanumeric inputs, with features like paste support and redacted display.",[27,28,30],"one-time-password-example",{"source-path":29},"OTP\u002FOTP.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { OTP, OTPItem } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst otpValue = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COTP v-model=\"otpValue\" mode=\"num\">\n    \u003COTPItem :i=\"0\" \u002F>\n    \u003COTPItem :i=\"1\" \u002F>\n    \u003COTPItem :i=\"2\" \u002F>\n    \u003Cdiv class=\"px-m y-center\">\n      -\n    \u003C\u002Fdiv>\n    \u003COTPItem :i=\"3\" \u002F>\n    \u003COTPItem :i=\"4\" \u002F>\n    \u003COTPItem :i=\"5\" \u002F>\n  \u003C\u002FOTP>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,115,122,147,157,162,172,208,232,252,272,294,301,311,331,351,371,381],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,81,84,88,92],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," OTP",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," OTPItem",[41,79,80],{"class":47}," }",[41,82,83],{"class":51}," from",[41,85,87],{"class":86},"sBR95"," '",[41,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[41,93,94],{"class":86},"'\n",[41,96,98,100,102,105,107,109,111,113],{"class":43,"line":97},3,[41,99,65],{"class":51},[41,101,68],{"class":47},[41,103,104],{"class":55}," ref",[41,106,80],{"class":47},[41,108,83],{"class":51},[41,110,87],{"class":86},[41,112,35],{"class":90},[41,114,94],{"class":86},[41,116,118],{"class":43,"line":117},4,[41,119,121],{"emptyLinePlaceholder":120},true,"\n",[41,123,125,129,132,135,138,141,144],{"class":43,"line":124},5,[41,126,128],{"class":127},"sCMWV","const",[41,130,131],{"class":55}," otpValue",[41,133,134],{"class":47}," =",[41,136,104],{"class":137},"sRTv0",[41,139,140],{"class":47},"(",[41,142,143],{"class":86},"''",[41,145,146],{"class":47},")\n",[41,148,150,153,155],{"class":43,"line":149},6,[41,151,152],{"class":47},"\u003C\u002F",[41,154,52],{"class":51},[41,156,59],{"class":47},[41,158,160],{"class":43,"line":159},7,[41,161,121],{"emptyLinePlaceholder":120},[41,163,165,167,170],{"class":43,"line":164},8,[41,166,48],{"class":47},[41,168,169],{"class":51},"template",[41,171,59],{"class":47},[41,173,175,178,180,183,186,189,192,194,197,199,201,204,206],{"class":43,"line":174},9,[41,176,177],{"class":47},"  \u003C",[41,179,14],{"class":51},[41,181,182],{"class":55}," v-model",[41,184,185],{"class":47},"=",[41,187,188],{"class":86},"\"",[41,190,191],{"class":90},"otpValue",[41,193,188],{"class":86},[41,195,196],{"class":55}," mode",[41,198,185],{"class":47},[41,200,188],{"class":86},[41,202,203],{"class":90},"num",[41,205,188],{"class":86},[41,207,59],{"class":47},[41,209,211,214,217,220,222,224,227,229],{"class":43,"line":210},10,[41,212,213],{"class":47},"    \u003C",[41,215,216],{"class":51},"OTPItem",[41,218,219],{"class":55}," :i",[41,221,185],{"class":47},[41,223,188],{"class":86},[41,225,226],{"class":90},"0",[41,228,188],{"class":86},[41,230,231],{"class":47}," \u002F>\n",[41,233,235,237,239,241,243,245,248,250],{"class":43,"line":234},11,[41,236,213],{"class":47},[41,238,216],{"class":51},[41,240,219],{"class":55},[41,242,185],{"class":47},[41,244,188],{"class":86},[41,246,247],{"class":90},"1",[41,249,188],{"class":86},[41,251,231],{"class":47},[41,253,255,257,259,261,263,265,268,270],{"class":43,"line":254},12,[41,256,213],{"class":47},[41,258,216],{"class":51},[41,260,219],{"class":55},[41,262,185],{"class":47},[41,264,188],{"class":86},[41,266,267],{"class":90},"2",[41,269,188],{"class":86},[41,271,231],{"class":47},[41,273,275,277,280,283,285,287,290,292],{"class":43,"line":274},13,[41,276,213],{"class":47},[41,278,279],{"class":51},"div",[41,281,282],{"class":55}," class",[41,284,185],{"class":47},[41,286,188],{"class":86},[41,288,289],{"class":90},"px-m y-center",[41,291,188],{"class":86},[41,293,59],{"class":47},[41,295,297],{"class":43,"line":296},14,[41,298,300],{"class":299},"sX1ls","      -\n",[41,302,304,307,309],{"class":43,"line":303},15,[41,305,306],{"class":47},"    \u003C\u002F",[41,308,279],{"class":51},[41,310,59],{"class":47},[41,312,314,316,318,320,322,324,327,329],{"class":43,"line":313},16,[41,315,213],{"class":47},[41,317,216],{"class":51},[41,319,219],{"class":55},[41,321,185],{"class":47},[41,323,188],{"class":86},[41,325,326],{"class":90},"3",[41,328,188],{"class":86},[41,330,231],{"class":47},[41,332,334,336,338,340,342,344,347,349],{"class":43,"line":333},17,[41,335,213],{"class":47},[41,337,216],{"class":51},[41,339,219],{"class":55},[41,341,185],{"class":47},[41,343,188],{"class":86},[41,345,346],{"class":90},"4",[41,348,188],{"class":86},[41,350,231],{"class":47},[41,352,354,356,358,360,362,364,367,369],{"class":43,"line":353},18,[41,355,213],{"class":47},[41,357,216],{"class":51},[41,359,219],{"class":55},[41,361,185],{"class":47},[41,363,188],{"class":86},[41,365,366],{"class":90},"5",[41,368,188],{"class":86},[41,370,231],{"class":47},[41,372,374,377,379],{"class":43,"line":373},19,[41,375,376],{"class":47},"  \u003C\u002F",[41,378,14],{"class":51},[41,380,59],{"class":47},[41,382,384,386,388],{"class":43,"line":383},20,[41,385,152],{"class":47},[41,387,169],{"class":51},[41,389,59],{"class":47},[391,392,394],"h3",{"id":393},"props","Props",[396,397,398,414],"table",{},[399,400,401],"thead",{},[402,403,404,408,411],"tr",{},[405,406,407],"th",{},"Name",[405,409,410],{},"Default",[405,412,413],{},"Type",[415,416,417,444],"tbody",{},[402,418,419,425,430],{},[420,421,422],"td",{},[38,423,424],{},"mode",[420,426,427],{},[38,428,429],{},"both",[420,431,432,434,435,434,438,434,440,443],{},[38,433,203],{}," ",[38,436,437],{},"char",[38,439,429],{},[441,442],"br",{}," Type of input allowed: numbers only, characters only, or both",[402,445,446,451,456],{},[420,447,448],{},[38,449,450],{},"redacted",[420,452,453],{},[38,454,455],{},"false",[420,457,458,434,461,463],{},[38,459,460],{},"boolean",[441,462],{}," Whether to show asterisks instead of the actual input",[391,465,467],{"id":466},"events","Events",[396,469,470,481],{},[399,471,472],{},[402,473,474,476,479],{},[405,475,407],{},[405,477,478],{},"Payload",[405,480,413],{},[415,482,483,498],{},[402,484,485,490,495],{},[420,486,487],{},[38,488,489],{},"change",[420,491,492],{},[38,493,494],{},"string",[420,496,497],{},"Emitted when the OTP value changes",[402,499,500,505,509],{},[420,501,502],{},[38,503,504],{},"complete",[420,506,507],{},[38,508,494],{},[420,510,511],{},"Emitted when all OTP fields are filled",[391,513,515],{"id":514},"tokens","Tokens",[23,517,518],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[396,520,521,533],{},[399,522,523],{},[402,524,525,528,530],{},[405,526,527],{},"Token",[405,529,410],{},[405,531,532],{},"Description",[415,534,535],{},[402,536,537,542,551],{},[420,538,539],{},[38,540,541],{},"--vui-otp-background-color",[420,543,544],{},[545,546,548],"a",{"href":547},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,549,550],{},"var(--color-bg-lowered)",[420,552,553],{},"Input cell background",[555,556,557],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":62,"depth":62,"links":559},[560,561,562],{"id":393,"depth":97,"text":394},{"id":466,"depth":97,"text":467},{"id":514,"depth":97,"text":515},"md",{},"\u002Fdocs\u002Fcomponents\u002Fotp",{"title":14,"description":25},"docs\u002Fcomponents\u002Fotp","J80zadioYtt6nFUnY14_J4Pe7ooKxFnTtkwDeDDfqAU",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":570},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882969]