[{"data":1,"prerenderedAt":725},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-sheet":12,"i-ph:code":723},{"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":717,"meta":718,"navigation":120,"path":719,"seo":720,"stem":721,"__hash__":722},"docs\u002Fdocs\u002Fcomponents\u002Fsheet.md","Sheet",{"type":16,"value":17,"toc":711},"minimark",[18,22,26,415,420,564,568,596,600,655,659,662,707],[19,20,14],"h1",{"id":21},"sheet",[23,24,25],"p",{},"The Sheet component is a slide-out panel that can be positioned on any side of the screen. It's commonly used for displaying additional content, forms, or navigation menus.",[27,28,30],"sheet-example",{"source-path":29},"Sheet\u002FSheet.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 { Button, Sheet } 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 Sheet\n  \u003C\u002FButton>\n\n  \u003CSheet\n    :open=\"isOpen\"\n    @close=\"isOpen = false\"\n  >\n    \u003Ctemplate #header>\n      \u003Ch2>Sheet Title\u003C\u002Fh2>\n    \u003C\u002Ftemplate>\n\n    \u003Cp>Sheet content goes here\u003C\u002Fp>\n\n    \u003Ctemplate #footer>\n      \u003CButton @click=\"isOpen = false\">\n        Close\n      \u003C\u002FButton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FSheet>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,115,122,147,157,162,172,197,204,214,219,227,243,258,264,280,301,311,316,334,339,353,372,378,388,397,406],"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}," Button",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Sheet",[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}," isOpen",[41,133,134],{"class":47}," =",[41,136,104],{"class":137},"sRTv0",[41,139,140],{"class":47},"(",[41,142,143],{"class":51},"false",[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,181,184,187,190,193,195],{"class":43,"line":174},9,[41,176,177],{"class":47},"  \u003C",[41,179,180],{"class":51},"Button",[41,182,183],{"class":55}," @click",[41,185,186],{"class":47},"=",[41,188,189],{"class":86},"\"",[41,191,192],{"class":90},"isOpen = true",[41,194,189],{"class":86},[41,196,59],{"class":47},[41,198,200],{"class":43,"line":199},10,[41,201,203],{"class":202},"sX1ls","    Open Sheet\n",[41,205,207,210,212],{"class":43,"line":206},11,[41,208,209],{"class":47},"  \u003C\u002F",[41,211,180],{"class":51},[41,213,59],{"class":47},[41,215,217],{"class":43,"line":216},12,[41,218,121],{"emptyLinePlaceholder":120},[41,220,222,224],{"class":43,"line":221},13,[41,223,177],{"class":47},[41,225,226],{"class":51},"Sheet\n",[41,228,230,233,235,237,240],{"class":43,"line":229},14,[41,231,232],{"class":55},"    :open",[41,234,186],{"class":47},[41,236,189],{"class":86},[41,238,239],{"class":90},"isOpen",[41,241,242],{"class":86},"\"\n",[41,244,246,249,251,253,256],{"class":43,"line":245},15,[41,247,248],{"class":55},"    @close",[41,250,186],{"class":47},[41,252,189],{"class":86},[41,254,255],{"class":90},"isOpen = false",[41,257,242],{"class":86},[41,259,261],{"class":43,"line":260},16,[41,262,263],{"class":47},"  >\n",[41,265,267,270,272,275,278],{"class":43,"line":266},17,[41,268,269],{"class":47},"    \u003C",[41,271,169],{"class":51},[41,273,274],{"class":47}," #",[41,276,277],{"class":137},"header",[41,279,59],{"class":47},[41,281,283,286,289,292,295,297,299],{"class":43,"line":282},18,[41,284,285],{"class":47},"      \u003C",[41,287,288],{"class":51},"h2",[41,290,291],{"class":47},">",[41,293,294],{"class":202},"Sheet Title",[41,296,152],{"class":47},[41,298,288],{"class":51},[41,300,59],{"class":47},[41,302,304,307,309],{"class":43,"line":303},19,[41,305,306],{"class":47},"    \u003C\u002F",[41,308,169],{"class":51},[41,310,59],{"class":47},[41,312,314],{"class":43,"line":313},20,[41,315,121],{"emptyLinePlaceholder":120},[41,317,319,321,323,325,328,330,332],{"class":43,"line":318},21,[41,320,269],{"class":47},[41,322,23],{"class":51},[41,324,291],{"class":47},[41,326,327],{"class":202},"Sheet content goes here",[41,329,152],{"class":47},[41,331,23],{"class":51},[41,333,59],{"class":47},[41,335,337],{"class":43,"line":336},22,[41,338,121],{"emptyLinePlaceholder":120},[41,340,342,344,346,348,351],{"class":43,"line":341},23,[41,343,269],{"class":47},[41,345,169],{"class":51},[41,347,274],{"class":47},[41,349,350],{"class":137},"footer",[41,352,59],{"class":47},[41,354,356,358,360,362,364,366,368,370],{"class":43,"line":355},24,[41,357,285],{"class":47},[41,359,180],{"class":51},[41,361,183],{"class":55},[41,363,186],{"class":47},[41,365,189],{"class":86},[41,367,255],{"class":90},[41,369,189],{"class":86},[41,371,59],{"class":47},[41,373,375],{"class":43,"line":374},25,[41,376,377],{"class":202},"        Close\n",[41,379,381,384,386],{"class":43,"line":380},26,[41,382,383],{"class":47},"      \u003C\u002F",[41,385,180],{"class":51},[41,387,59],{"class":47},[41,389,391,393,395],{"class":43,"line":390},27,[41,392,306],{"class":47},[41,394,169],{"class":51},[41,396,59],{"class":47},[41,398,400,402,404],{"class":43,"line":399},28,[41,401,209],{"class":47},[41,403,14],{"class":51},[41,405,59],{"class":47},[41,407,409,411,413],{"class":43,"line":408},29,[41,410,152],{"class":47},[41,412,169],{"class":51},[41,414,59],{"class":47},[416,417,419],"h3",{"id":418},"props","Props",[421,422,423,439],"table",{},[424,425,426],"thead",{},[427,428,429,433,436],"tr",{},[430,431,432],"th",{},"Name",[430,434,435],{},"Default",[430,437,438],{},"Type",[440,441,442,463,492,515,539],"tbody",{},[427,443,444,450,454],{},[445,446,447],"td",{},[38,448,449],{},"open",[445,451,452],{},[38,453,143],{},[445,455,456,459,462],{},[38,457,458],{},"boolean",[460,461],"br",{},"Controls the visibility of the sheet",[427,464,465,470,475],{},[445,466,467],{},[38,468,469],{},"position",[445,471,472],{},[38,473,474],{},"right",[445,476,477,480,481,480,483,480,486,489,491],{},[38,478,479],{},"left"," ",[38,482,474],{},[38,484,485],{},"top",[38,487,488],{},"bottom",[460,490],{},"Controls the position of the sheet",[427,493,494,499,504],{},[445,495,496],{},[38,497,498],{},"size",[445,500,501],{},[38,502,503],{},"398",[445,505,506,480,509,512,514],{},[38,507,508],{},"number",[38,510,511],{},"string",[460,513],{},"Sets the width of the sheet (for left\u002Fright) or height (for top\u002Fbottom)",[427,516,517,522,525],{},[445,518,519],{},[38,520,521],{},"card",[445,523,524],{},"-",[445,526,527,530,532,533,538],{},[38,528,529],{},"CardProps",[460,531],{},"Props to pass to the underlying ",[534,535,537],"a",{"href":536},"\u002Fdocs\u002Fcomponents\u002Fcard","Card"," component",[427,540,541,546,550],{},[445,542,543],{},[38,544,545],{},"transition-name",[445,547,548],{},[38,549,21],{},[445,551,552,480,554,480,557,559,560,563],{},[38,553,511],{},[38,555,556],{},"none",[460,558],{}," Allows you to change or disable the vue transition for the sheet appear.By default, a ",[38,561,562],{},"fade"," animation with direction depending on the placement is used.",[416,565,567],{"id":566},"events","Events",[421,569,570,582],{},[424,571,572],{},[427,573,574,576,579],{},[430,575,432],{},[430,577,578],{},"Payload",[430,580,581],{},"Description",[440,583,584],{},[427,585,586,591,593],{},[445,587,588],{},[38,589,590],{},"close",[445,592,524],{},[445,594,595],{},"Emitted when the sheet is closed",[416,597,599],{"id":598},"slots","Slots",[421,601,602,612],{},[424,603,604],{},[427,605,606,608,610],{},[430,607,432],{},[430,609,419],{},[430,611,581],{},[440,613,614,629,642],{},[427,615,616,621,626],{},[445,617,618],{},[38,619,620],{},"default",[445,622,623],{},[38,624,625],{},"{ close: () => void }",[445,627,628],{},"The main content of the sheet",[427,630,631,635,639],{},[445,632,633],{},[38,634,277],{},[445,636,637],{},[38,638,625],{},[445,640,641],{},"The header content of the sheet",[427,643,644,648,652],{},[445,645,646],{},[38,647,350],{},[445,649,650],{},[38,651,625],{},[445,653,654],{},"The footer content of the sheet",[416,656,658],{"id":657},"tokens","Tokens",[23,660,661],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[421,663,664,675],{},[424,665,666],{},[427,667,668,671,673],{},[430,669,670],{},"Token",[430,672,435],{},[430,674,581],{},[440,676,677,692],{},[427,678,679,684,689],{},[445,680,681],{},[38,682,683],{},"--vui-sheet-inline-offset",[445,685,686],{},[38,687,688],{},"24px",[445,690,691],{},"Horizontal offset from screen edge",[427,693,694,699,704],{},[445,695,696],{},[38,697,698],{},"--vui-sheet-max-height",[445,700,701],{},[38,702,703],{},"35dvh",[445,705,706],{},"Max height in bottom sheet mode",[708,709,710],"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":712},[713,714,715,716],{"id":418,"depth":97,"text":419},{"id":566,"depth":97,"text":567},{"id":598,"depth":97,"text":599},{"id":657,"depth":97,"text":658},"md",{},"\u002Fdocs\u002Fcomponents\u002Fsheet",{"title":14,"description":25},"docs\u002Fcomponents\u002Fsheet","gUd2QyQdg1NSAxpd2RlTdEI1uQSFtpA8aPEm2m_34yo",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":724},"\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>",1782200883159]