[{"data":1,"prerenderedAt":872},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-drawer":12,"i-ph:code":870},{"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":863,"extension":864,"meta":865,"navigation":128,"path":866,"seo":867,"stem":868,"__hash__":869},"docs\u002Fdocs\u002Fcomponents\u002Fdrawer.md","Drawer",{"type":16,"value":17,"toc":856},"minimark",[18,22,34,350,355,362,408,412,653,657,704,708,752,756,759,852],[19,20,14],"h1",{"id":21},"drawer",[23,24,25,26,33],"p",{},"A drawer component that slides in from the side of the screen. It's built on top of the ",[27,28,32],"a",{"href":29,"rel":30},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fvaul-vue",[31],"nofollow","Vaul"," library and provides a customizable container for content.",[35,36,38],"drawer-example",{"source-path":37},"Drawer\u002FDrawer.vue",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Button, Drawer } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton @click=\"isOpen = true\">\n    Open Drawer\n  \u003C\u002FButton>\n\n  \u003CDrawer v-model:open=\"isOpen\" title=\"Settings\">\n    \u003Cdiv class=\"p-md\">\n      \u003Ch2>Drawer Content\u003C\u002Fh2>\n      \u003Cp>This is the content of the drawer.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002FDrawer>\n\u003C\u002Ftemplate>\n","vue","",[46,47,48,68,103,123,130,155,165,170,180,205,212,222,227,260,283,304,322,332,341],"code",{"__ignoreMap":44},[49,50,53,57,61,65],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sP76a","\u003C",[49,58,60],{"class":59},"sKpE2","script",[49,62,64],{"class":63},"sflEz"," setup",[49,66,67],{"class":55},">\n",[49,69,71,74,77,80,83,86,89,92,96,100],{"class":51,"line":70},2,[49,72,73],{"class":59},"import",[49,75,76],{"class":55}," {",[49,78,79],{"class":63}," Button",[49,81,82],{"class":55},",",[49,84,85],{"class":63}," Drawer",[49,87,88],{"class":55}," }",[49,90,91],{"class":59}," from",[49,93,95],{"class":94},"sBR95"," '",[49,97,99],{"class":98},"sfmH-","@dolanske\u002Fvui",[49,101,102],{"class":94},"'\n",[49,104,106,108,110,113,115,117,119,121],{"class":51,"line":105},3,[49,107,73],{"class":59},[49,109,76],{"class":55},[49,111,112],{"class":63}," ref",[49,114,88],{"class":55},[49,116,91],{"class":59},[49,118,95],{"class":94},[49,120,43],{"class":98},[49,122,102],{"class":94},[49,124,126],{"class":51,"line":125},4,[49,127,129],{"emptyLinePlaceholder":128},true,"\n",[49,131,133,137,140,143,146,149,152],{"class":51,"line":132},5,[49,134,136],{"class":135},"sCMWV","const",[49,138,139],{"class":63}," isOpen",[49,141,142],{"class":55}," =",[49,144,112],{"class":145},"sRTv0",[49,147,148],{"class":55},"(",[49,150,151],{"class":59},"false",[49,153,154],{"class":55},")\n",[49,156,158,161,163],{"class":51,"line":157},6,[49,159,160],{"class":55},"\u003C\u002F",[49,162,60],{"class":59},[49,164,67],{"class":55},[49,166,168],{"class":51,"line":167},7,[49,169,129],{"emptyLinePlaceholder":128},[49,171,173,175,178],{"class":51,"line":172},8,[49,174,56],{"class":55},[49,176,177],{"class":59},"template",[49,179,67],{"class":55},[49,181,183,186,189,192,195,198,201,203],{"class":51,"line":182},9,[49,184,185],{"class":55},"  \u003C",[49,187,188],{"class":59},"Button",[49,190,191],{"class":63}," @click",[49,193,194],{"class":55},"=",[49,196,197],{"class":94},"\"",[49,199,200],{"class":98},"isOpen = true",[49,202,197],{"class":94},[49,204,67],{"class":55},[49,206,208],{"class":51,"line":207},10,[49,209,211],{"class":210},"sX1ls","    Open Drawer\n",[49,213,215,218,220],{"class":51,"line":214},11,[49,216,217],{"class":55},"  \u003C\u002F",[49,219,188],{"class":59},[49,221,67],{"class":55},[49,223,225],{"class":51,"line":224},12,[49,226,129],{"emptyLinePlaceholder":128},[49,228,230,232,234,237,239,241,244,246,249,251,253,256,258],{"class":51,"line":229},13,[49,231,185],{"class":55},[49,233,14],{"class":59},[49,235,236],{"class":63}," v-model:open",[49,238,194],{"class":55},[49,240,197],{"class":94},[49,242,243],{"class":98},"isOpen",[49,245,197],{"class":94},[49,247,248],{"class":63}," title",[49,250,194],{"class":55},[49,252,197],{"class":94},[49,254,255],{"class":98},"Settings",[49,257,197],{"class":94},[49,259,67],{"class":55},[49,261,263,266,269,272,274,276,279,281],{"class":51,"line":262},14,[49,264,265],{"class":55},"    \u003C",[49,267,268],{"class":59},"div",[49,270,271],{"class":63}," class",[49,273,194],{"class":55},[49,275,197],{"class":94},[49,277,278],{"class":98},"p-md",[49,280,197],{"class":94},[49,282,67],{"class":55},[49,284,286,289,292,295,298,300,302],{"class":51,"line":285},15,[49,287,288],{"class":55},"      \u003C",[49,290,291],{"class":59},"h2",[49,293,294],{"class":55},">",[49,296,297],{"class":210},"Drawer Content",[49,299,160],{"class":55},[49,301,291],{"class":59},[49,303,67],{"class":55},[49,305,307,309,311,313,316,318,320],{"class":51,"line":306},16,[49,308,288],{"class":55},[49,310,23],{"class":59},[49,312,294],{"class":55},[49,314,315],{"class":210},"This is the content of the drawer.",[49,317,160],{"class":55},[49,319,23],{"class":59},[49,321,67],{"class":55},[49,323,325,328,330],{"class":51,"line":324},17,[49,326,327],{"class":55},"    \u003C\u002F",[49,329,268],{"class":59},[49,331,67],{"class":55},[49,333,335,337,339],{"class":51,"line":334},18,[49,336,217],{"class":55},[49,338,14],{"class":59},[49,340,67],{"class":55},[49,342,344,346,348],{"class":51,"line":343},19,[49,345,160],{"class":55},[49,347,177],{"class":59},[49,349,67],{"class":55},[351,352,354],"h3",{"id":353},"important-note","Important Note",[23,356,357,358,361],{},"The drawer component requires a root element with the ",[46,359,360],{},"vaul-drawer-wrapper"," attribute to function properly. Make sure your app's root component has this attribute:",[39,363,365],{"className":41,"code":364,"language":43,"meta":44,"style":44},"\u003Ctemplate>\n  \u003Cdiv vaul-drawer-wrapper>\n    \u003C!-- Your app content -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[46,366,367,375,386,392,400],{"__ignoreMap":44},[49,368,369,371,373],{"class":51,"line":52},[49,370,56],{"class":55},[49,372,177],{"class":59},[49,374,67],{"class":55},[49,376,377,379,381,384],{"class":51,"line":70},[49,378,185],{"class":55},[49,380,268],{"class":59},[49,382,383],{"class":63}," vaul-drawer-wrapper",[49,385,67],{"class":55},[49,387,388],{"class":51,"line":105},[49,389,391],{"class":390},"sR5Ys","    \u003C!-- Your app content -->\n",[49,393,394,396,398],{"class":51,"line":125},[49,395,217],{"class":55},[49,397,268],{"class":59},[49,399,67],{"class":55},[49,401,402,404,406],{"class":51,"line":132},[49,403,160],{"class":55},[49,405,177],{"class":59},[49,407,67],{"class":55},[351,409,411],{"id":410},"props","Props",[413,414,415,431],"table",{},[416,417,418],"thead",{},[419,420,421,425,428],"tr",{},[422,423,424],"th",{},"Name",[422,426,427],{},"Default",[422,429,430],{},"Type",[432,433,434,456,474,496,530,549,567,592,614,635],"tbody",{},[419,435,436,442,446],{},[437,438,439],"td",{},[46,440,441],{},"open",[437,443,444],{},[46,445,151],{},[437,447,448,451,452,455],{},[46,449,450],{},"boolean"," ",[453,454],"br",{}," Controls the visibility of the drawer",[419,457,458,463,466],{},[437,459,460],{},[46,461,462],{},"title",[437,464,465],{},"—",[437,467,468,451,471,473],{},[46,469,470],{},"string",[453,472],{}," Title for accessibility",[419,475,476,481,483],{},[437,477,478],{},[46,479,480],{},"containerClass",[437,482,465],{},[437,484,485,451,487,451,490,451,493,495],{},[46,486,470],{},[46,488,489],{},"object",[46,491,492],{},"array",[453,494],{}," CSS class applied to the container of the drawer content",[419,497,498,503,508],{},[437,499,500],{},[46,501,502],{},"containerSize",[437,504,505],{},[46,506,507],{},"m",[437,509,510,451,513,451,515,451,518,451,521,451,524,451,527,529],{},[46,511,512],{},"s",[46,514,507],{},[46,516,517],{},"l",[46,519,520],{},"xl",[46,522,523],{},"full",[46,525,526],{},"number",[453,528],{}," Size of the container or max-width in pixels",[419,531,532,537,542],{},[437,533,534],{},[46,535,536],{},"handle",[437,538,539],{},[46,540,541],{},"true",[437,543,544,451,546,548],{},[46,545,450],{},[453,547],{}," Whether to display the handle symbol at the top of the drawer",[419,550,551,556,560],{},[437,552,553],{},[46,554,555],{},"nested",[437,557,558],{},[46,559,151],{},[437,561,562,451,564,566],{},[46,563,450],{},[453,565],{}," Uses Vaul's nested drawer root. Required when rendering a drawer inside another drawer",[419,568,569,574,576],{},[437,570,571],{},[46,572,573],{},"activeSnapPoint",[437,575,465],{},[437,577,578,451,580,451,582,451,585,587,588,591],{},[46,579,526],{},[46,581,470],{},[46,583,584],{},"null",[453,586],{}," Active snap point in controlled mode (",[46,589,590],{},"v-model:activeSnapPoint",")",[419,593,594,599,601],{},[437,595,596],{},[46,597,598],{},"rootProps",[437,600,465],{},[437,602,603,451,606,608,609],{},[46,604,605],{},"DrawerRootProps",[453,607],{}," Props to pass to the underlying Vaul root component. ",[27,610,613],{"href":611,"rel":612},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fvaul-vue\u002Fblob\u002F1b1f6dfdba6a775410508884097443d35c9a8690\u002Fpackages\u002Fvaul-vue\u002Fsrc\u002Fcontrols.ts#L24",[31],"Type definitions",[419,615,616,621,623],{},[437,617,618],{},[46,619,620],{},"portalProps",[437,622,465],{},[437,624,625,451,628,630,631],{},[46,626,627],{},"DrawerPortalProps",[453,629],{}," Props to pass to the underlying Vaul portal component. ",[27,632,613],{"href":633,"rel":634},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fdialog#portal",[31],[419,636,637,642,646],{},[437,638,639],{},[46,640,641],{},"overlay",[437,643,644],{},[46,645,541],{},[437,647,648,451,650,652],{},[46,649,450],{},[453,651],{}," Whether to render the drawer backdrop",[351,654,656],{"id":655},"events","Events",[413,658,659,671],{},[416,660,661],{},[419,662,663,665,668],{},[422,664,424],{},[422,666,667],{},"Payload",[422,669,670],{},"Description",[432,672,673,686],{},[419,674,675,680,683],{},[437,676,677],{},[46,678,679],{},"close",[437,681,682],{},"-",[437,684,685],{},"Emitted when the drawer is closed",[419,687,688,693,701],{},[437,689,690],{},[46,691,692],{},"update:activeSnapPoint",[437,694,695,451,697,451,699],{},[46,696,526],{},[46,698,470],{},[46,700,584],{},[437,702,703],{},"Emitted when the active snap point changes",[351,705,707],{"id":706},"slots","Slots",[413,709,710,721],{},[416,711,712],{},[419,713,714,716,719],{},[422,715,424],{},[422,717,718],{},"Accepts",[422,720,670],{},[432,722,723,738],{},[419,724,725,730,735],{},[437,726,727],{},[46,728,729],{},"header",[437,731,732],{},[46,733,734],{},"any",[437,736,737],{},"Optional header content rendered above drawer content",[419,739,740,745,749],{},[437,741,742],{},[46,743,744],{},"default",[437,746,747],{},[46,748,734],{},[437,750,751],{},"The content of the drawer",[351,753,755],{"id":754},"tokens","Tokens",[23,757,758],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[413,760,761,772],{},[416,762,763],{},[419,764,765,768,770],{},[422,766,767],{},"Token",[422,769,427],{},[422,771,670],{},[432,773,774,789,804,819,834],{},[419,775,776,781,786],{},[437,777,778],{},[46,779,780],{},"--vui-drawer-top-offset",[437,782,783],{},[46,784,785],{},"28px",[437,787,788],{},"Top content padding",[419,790,791,796,801],{},[437,792,793],{},[46,794,795],{},"--vui-drawer-shadow-open",[437,797,798],{},[46,799,800],{},"0px -12px 48px 24px var(--color-bg-lowered)",[437,802,803],{},"Shadow when open",[419,805,806,811,816],{},[437,807,808],{},[46,809,810],{},"--vui-drawer-shadow-closed",[437,812,813],{},[46,814,815],{},"0px 0px 0px 0px transparent",[437,817,818],{},"Shadow when closed",[419,820,821,826,831],{},[437,822,823],{},[46,824,825],{},"--vui-drawer-overlay-max-opacity",[437,827,828],{},[46,829,830],{},"75%",[437,832,833],{},"Max overlay opacity",[419,835,836,841,849],{},[437,837,838],{},[46,839,840],{},"--vui-drawer-overlay-color",[437,842,843],{},[27,844,846],{"href":845},"\u002Fdocs\u002Ftokens\u002Fcolors",[46,847,848],{},"var(--color-bg-raised)",[437,850,851],{},"Overlay color",[853,854,855],"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);}html pre.shiki code .sR5Ys, html code.shiki .sR5Ys{--shiki-dark:#758575DD;--shiki-light:#A0ADA0;--shiki-default:#758575DD}",{"title":44,"searchDepth":70,"depth":70,"links":857},[858,859,860,861,862],{"id":353,"depth":105,"text":354},{"id":410,"depth":105,"text":411},{"id":655,"depth":105,"text":656},{"id":706,"depth":105,"text":707},{"id":754,"depth":105,"text":755},"A drawer component that slides in from the side of the screen. It's built on top of the Vaul library and provides a customizable container for content.","md",{},"\u002Fdocs\u002Fcomponents\u002Fdrawer",{"title":14,"description":863},"docs\u002Fcomponents\u002Fdrawer","NDdV8D3vtl-5M9vWuMhBNQN_ubI8arXwPIlwhG6Sfx0",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":871},"\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>",1782200882662]