[{"data":1,"prerenderedAt":1004},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-input":12,"i-ph:code":1002},{"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":996,"meta":997,"navigation":114,"path":998,"seo":999,"stem":1000,"__hash__":1001},"docs\u002Fdocs\u002Fcomponents\u002Finput.md","Input",{"type":16,"value":17,"toc":989},"minimark",[18,22,26,259,264,607,611,643,647,719,723,730,758,762,765,985],[19,20,14],"h1",{"id":21},"input",[23,24,25],"p",{},"A versatile input component that supports various input types, validation, and customization options. It includes features like character limits, error messages, and custom slots for additional content.",[27,28,30],"input-example",{"source-path":29},"Input\u002FInput.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 { Input } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst email = ref()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CInput\n    v-model=\"email\"\n    expand\n    label=\"Email\"\n    placeholder=\"example@email.com\"\n    :limit=\"32\"\n    required\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,89,109,116,135,145,150,160,169,187,193,208,223,238,244,250],"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,82,86],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Input",[41,73,74],{"class":47}," }",[41,76,77],{"class":51}," from",[41,79,81],{"class":80},"sBR95"," '",[41,83,85],{"class":84},"sfmH-","@dolanske\u002Fvui",[41,87,88],{"class":80},"'\n",[41,90,92,94,96,99,101,103,105,107],{"class":43,"line":91},3,[41,93,65],{"class":51},[41,95,68],{"class":47},[41,97,98],{"class":55}," ref",[41,100,74],{"class":47},[41,102,77],{"class":51},[41,104,81],{"class":80},[41,106,35],{"class":84},[41,108,88],{"class":80},[41,110,112],{"class":43,"line":111},4,[41,113,115],{"emptyLinePlaceholder":114},true,"\n",[41,117,119,123,126,129,132],{"class":43,"line":118},5,[41,120,122],{"class":121},"sCMWV","const",[41,124,125],{"class":55}," email",[41,127,128],{"class":47}," =",[41,130,98],{"class":131},"sRTv0",[41,133,134],{"class":47},"()\n",[41,136,138,141,143],{"class":43,"line":137},6,[41,139,140],{"class":47},"\u003C\u002F",[41,142,52],{"class":51},[41,144,59],{"class":47},[41,146,148],{"class":43,"line":147},7,[41,149,115],{"emptyLinePlaceholder":114},[41,151,153,155,158],{"class":43,"line":152},8,[41,154,48],{"class":47},[41,156,157],{"class":51},"template",[41,159,59],{"class":47},[41,161,163,166],{"class":43,"line":162},9,[41,164,165],{"class":47},"  \u003C",[41,167,168],{"class":51},"Input\n",[41,170,172,175,178,181,184],{"class":43,"line":171},10,[41,173,174],{"class":55},"    v-model",[41,176,177],{"class":47},"=",[41,179,180],{"class":80},"\"",[41,182,183],{"class":84},"email",[41,185,186],{"class":80},"\"\n",[41,188,190],{"class":43,"line":189},11,[41,191,192],{"class":55},"    expand\n",[41,194,196,199,201,203,206],{"class":43,"line":195},12,[41,197,198],{"class":55},"    label",[41,200,177],{"class":47},[41,202,180],{"class":80},[41,204,205],{"class":84},"Email",[41,207,186],{"class":80},[41,209,211,214,216,218,221],{"class":43,"line":210},13,[41,212,213],{"class":55},"    placeholder",[41,215,177],{"class":47},[41,217,180],{"class":80},[41,219,220],{"class":84},"example@email.com",[41,222,186],{"class":80},[41,224,226,229,231,233,236],{"class":43,"line":225},14,[41,227,228],{"class":55},"    :limit",[41,230,177],{"class":47},[41,232,180],{"class":80},[41,234,235],{"class":84},"32",[41,237,186],{"class":80},[41,239,241],{"class":43,"line":240},15,[41,242,243],{"class":55},"    required\n",[41,245,247],{"class":43,"line":246},16,[41,248,249],{"class":47},"  \u002F>\n",[41,251,253,255,257],{"class":43,"line":252},17,[41,254,140],{"class":47},[41,256,157],{"class":51},[41,258,59],{"class":47},[260,261,263],"h3",{"id":262},"props","Props",[265,266,267,283],"table",{},[268,269,270],"thead",{},[271,272,273,277,280],"tr",{},[274,275,276],"th",{},"Name",[274,278,279],{},"Default",[274,281,282],{},"Type",[284,285,286,340,358,374,392,412,428,446,467,485,503,523,539,557,573,589],"tbody",{},[271,287,288,294,299],{},[289,290,291],"td",{},[38,292,293],{},"type",[289,295,296],{},[38,297,298],{},"text",[289,300,301,303,304,303,307,303,310,303,313,303,315,303,318,303,321,303,324,303,327,303,330,303,333,303,336,339],{},[38,302,298],{}," ",[38,305,306],{},"password",[38,308,309],{},"color",[38,311,312],{},"date",[38,314,183],{},[38,316,317],{},"number",[38,319,320],{},"range",[38,322,323],{},"search",[38,325,326],{},"tel",[38,328,329],{},"time",[38,331,332],{},"url",[38,334,335],{},"file",[337,338],"br",{}," Type of input field",[271,341,342,347,350],{},[289,343,344],{},[38,345,346],{},"label",[289,348,349],{},"—",[289,351,352,303,355,357],{},[38,353,354],{},"string",[337,356],{}," Label text for the input",[271,359,360,365,367],{},[289,361,362],{},[38,363,364],{},"hint",[289,366,349],{},[289,368,369,303,371,373],{},[38,370,354],{},[337,372],{}," Helper text displayed below the input",[271,375,376,381,383],{},[289,377,378],{},[38,379,380],{},"limit",[289,382,349],{},[289,384,385,303,387,303,389,391],{},[38,386,317],{},[38,388,354],{},[337,390],{}," Maximum number of characters allowed",[271,393,394,399,404],{},[289,395,396],{},[38,397,398],{},"expand",[289,400,401],{},[38,402,403],{},"false",[289,405,406,303,409,411],{},[38,407,408],{},"boolean",[337,410],{}," Makes the input expand to full width",[271,413,414,419,421],{},[289,415,416],{},[38,417,418],{},"placeholder",[289,420,349],{},[289,422,423,303,425,427],{},[38,424,354],{},[337,426],{}," Placeholder text when input is empty",[271,429,430,435,439],{},[289,431,432],{},[38,433,434],{},"required",[289,436,437],{},[38,438,403],{},[289,440,441,303,443,445],{},[38,442,408],{},[337,444],{}," Makes the input required",[271,447,448,453,458],{},[289,449,450],{},[38,451,452],{},"modelValue",[289,454,455],{},[38,456,457],{},"''",[289,459,460,303,462,303,464,466],{},[38,461,354],{},[38,463,317],{},[337,465],{}," Value of the input (for v-model)",[271,468,469,474,478],{},[289,470,471],{},[38,472,473],{},"readonly",[289,475,476],{},[38,477,403],{},[289,479,480,303,482,484],{},[38,481,408],{},[337,483],{}," Makes the input readonly",[271,486,487,492,496],{},[289,488,489],{},[38,490,491],{},"focus",[289,493,494],{},[38,495,403],{},[289,497,498,303,500,502],{},[38,499,408],{},[337,501],{}," Focuses the input when mounted",[271,504,505,510,515],{},[289,506,507],{},[38,508,509],{},"errors",[289,511,512],{},[38,513,514],{},"[]",[289,516,517,303,520,522],{},[38,518,519],{},"string[]",[337,521],{}," Array of error messages to display",[271,524,525,530,532],{},[289,526,527],{},[38,528,529],{},"accept",[289,531,349],{},[289,533,534,303,536,538],{},[38,535,354],{},[337,537],{}," File types to accept (for file inputs)",[271,540,541,546,550],{},[289,542,543],{},[38,544,545],{},"multiple",[289,547,548],{},[38,549,403],{},[289,551,552,303,554,556],{},[38,553,408],{},[337,555],{}," Allows multiple file selection (for file inputs)",[271,558,559,564,566],{},[289,560,561],{},[38,562,563],{},"min",[289,565,349],{},[289,567,568,303,570,572],{},[38,569,317],{},[337,571],{}," Minimum value (for number inputs)",[271,574,575,580,582],{},[289,576,577],{},[38,578,579],{},"max",[289,581,349],{},[289,583,584,303,586,588],{},[38,585,317],{},[337,587],{}," Maximum value (for number inputs)",[271,590,591,596,600],{},[289,592,593],{},[38,594,595],{},"disabled",[289,597,598],{},[38,599,403],{},[289,601,602,303,604,606],{},[38,603,408],{},[337,605],{}," Disables the input",[260,608,610],{"id":609},"events","Events",[265,612,613,625],{},[268,614,615],{},[271,616,617,619,622],{},[274,618,276],{},[274,620,621],{},"Payload",[274,623,624],{},"Description",[284,626,627],{},[271,628,629,634,640],{},[289,630,631],{},[38,632,633],{},"update:modelValue",[289,635,636,303,638],{},[38,637,354],{},[38,639,317],{},[289,641,642],{},"Emitted when the input value changes",[260,644,646],{"id":645},"slots","Slots",[265,648,649,660],{},[268,650,651],{},[271,652,653,655,658],{},[274,654,276],{},[274,656,657],{},"Accepts",[274,659,624],{},[284,661,662,677,691,705],{},[271,663,664,669,674],{},[289,665,666],{},[38,667,668],{},"before",[289,670,671],{},[38,672,673],{},"any",[289,675,676],{},"Content to be displayed before any of the input content",[271,678,679,684,688],{},[289,680,681],{},[38,682,683],{},"start",[289,685,686],{},[38,687,673],{},[289,689,690],{},"Content to be displayed at the start of the input",[271,692,693,698,702],{},[289,694,695],{},[38,696,697],{},"end",[289,699,700],{},[38,701,673],{},[289,703,704],{},"Content to be displayed at the end of the input",[271,706,707,712,716],{},[289,708,709],{},[38,710,711],{},"after",[289,713,714],{},[38,715,673],{},[289,717,718],{},"Content to be displayed after the all the input content",[260,720,722],{"id":721},"exposes","Exposes",[23,724,725,726,729],{},"When queried via ",[38,727,728],{},"useTemplateRef",", this component exposes",[265,731,732,742],{},[268,733,734],{},[271,735,736,738,740],{},[274,737,276],{},[274,739,282],{},[274,741,624],{},[284,743,744],{},[271,745,746,750,755],{},[289,747,748],{},[38,749,491],{},[289,751,752],{},[38,753,754],{},"method",[289,756,757],{},"Focuses the input element",[260,759,761],{"id":760},"tokens","Tokens",[23,763,764],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[265,766,767,778],{},[268,768,769],{},[271,770,771,774,776],{},[274,772,773],{},"Token",[274,775,279],{},[274,777,624],{},[284,779,780,799,816,833,850,867,884,901,918,936,954,970],{},[271,781,782,787,796],{},[289,783,784],{},[38,785,786],{},"--vui-input-color-text-red",[289,788,789],{},[790,791,793],"a",{"href":792},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,794,795],{},"var(--color-text-red)",[289,797,798],{},"Error text color",[271,800,801,806,813],{},[289,802,803],{},[38,804,805],{},"--vui-input-color-text",[289,807,808],{},[790,809,810],{"href":792},[38,811,812],{},"var(--color-text)",[289,814,815],{},"Input text color",[271,817,818,823,830],{},[289,819,820],{},[38,821,822],{},"--vui-input-color-text-light",[289,824,825],{},[790,826,827],{"href":792},[38,828,829],{},"var(--color-text-light)",[289,831,832],{},"Placeholder text color",[271,834,835,840,847],{},[289,836,837],{},[38,838,839],{},"--vui-input-color-text-lighter",[289,841,842],{},[790,843,844],{"href":792},[38,845,846],{},"var(--color-text-lighter)",[289,848,849],{},"Dim text color",[271,851,852,857,864],{},[289,853,854],{},[38,855,856],{},"--vui-input-color-border",[289,858,859],{},[790,860,861],{"href":792},[38,862,863],{},"var(--color-border)",[289,865,866],{},"Border color",[271,868,869,874,881],{},[289,870,871],{},[38,872,873],{},"--vui-input-color-border-strong",[289,875,876],{},[790,877,878],{"href":792},[38,879,880],{},"var(--color-border-strong)",[289,882,883],{},"Focused border color",[271,885,886,891,898],{},[289,887,888],{},[38,889,890],{},"--vui-input-color-border-weak",[289,892,893],{},[790,894,895],{"href":792},[38,896,897],{},"var(--color-border-weak)",[289,899,900],{},"Subtle border color",[271,902,903,908,915],{},[289,904,905],{},[38,906,907],{},"--vui-input-background-color",[289,909,910],{},[790,911,912],{"href":792},[38,913,914],{},"var(--color-bg-raised)",[289,916,917],{},"Input background",[271,919,920,925,933],{},[289,921,922],{},[38,923,924],{},"--vui-input-height",[289,926,927],{},[790,928,930],{"href":929},"\u002Fdocs\u002Ftokens\u002Flayout#interactive-element-height",[38,931,932],{},"var(--interactive-el-height)",[289,934,935],{},"Input height",[271,937,938,943,951],{},[289,939,940],{},[38,941,942],{},"--vui-input-padding",[289,944,945],{},[790,946,948],{"href":947},"\u002Fdocs\u002Ftokens\u002Fspacing",[38,949,950],{},"var(--space-xs)",[289,952,953],{},"Input padding",[271,955,956,961,967],{},[289,957,958],{},[38,959,960],{},"--vui-textarea-padding",[289,962,963],{},[790,964,965],{"href":947},[38,966,950],{},[289,968,969],{},"Textarea padding",[271,971,972,977,982],{},[289,973,974],{},[38,975,976],{},"--vui-input-width",[289,978,979],{},[38,980,981],{},"224px",[289,983,984],{},"Default input width",[986,987,988],"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 .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":990},[991,992,993,994,995],{"id":262,"depth":91,"text":263},{"id":609,"depth":91,"text":610},{"id":645,"depth":91,"text":646},{"id":721,"depth":91,"text":722},{"id":760,"depth":91,"text":761},"md",{},"\u002Fdocs\u002Fcomponents\u002Finput",{"title":14,"description":25},"docs\u002Fcomponents\u002Finput","n0EzczwI_UOWLe-h0anG3NIW-kSIDuNHllVb_gF-Q0g",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1003},"\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>",1782200882866]