[{"data":1,"prerenderedAt":871},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-modal":12,"i-ph:code":869},{"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":863,"meta":864,"navigation":139,"path":865,"seo":866,"stem":867,"__hash__":868},"docs\u002Fdocs\u002Fcomponents\u002Fmodal.md","Modal",{"type":16,"value":17,"toc":856},"minimark",[18,22,26,467,472,694,698,725,729,784,789,792,852],[19,20,14],"h1",{"id":21},"modal",[23,24,25],"p",{},"A modal component that displays content in a floating window over the main content. It supports various sizes, customization options, and can be used for dialogs, forms, or any other content that needs to be displayed in a focused context above the page content.",[27,28,30],"modal-example",{"source-path":29},"Modal\u002FModal.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 lang=\"ts\">\nimport { Button, Flex, Modal } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton @click=\"isOpen = true\">\n    Basic Modal\n  \u003C\u002FButton>\n  \u003CModal :open=\"isOpen\" size=\"m\" :card=\"{ separators: true }\" @close=\"isOpen = false\">\n    \u003Ctemplate #header>\n      \u003Ch4>Modal \u003C\u002Fh4>\n    \u003C\u002Ftemplate>\n    \u003Cp>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?\u003C\u002Fp>\n    \u003Ctemplate #footer=\"{ close }\">\n      \u003CFlex x-end>\n        \u003CButton @click=\"close\">\n          Close\n        \u003C\u002FButton>\n      \u003C\u002Fflex>\n    \u003C\u002Ftemplate>\n  \u003C\u002FModal>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,76,114,134,141,166,176,181,191,214,221,231,287,303,324,334,352,380,393,413,419,429,440,449,458],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,71,73],"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":55}," lang",[41,61,62],{"class":47},"=",[41,64,66],{"class":65},"sBR95","\"",[41,68,70],{"class":69},"sfmH-","ts",[41,72,66],{"class":65},[41,74,75],{"class":47},">\n",[41,77,79,82,85,88,91,94,96,99,102,105,108,111],{"class":43,"line":78},2,[41,80,81],{"class":51},"import",[41,83,84],{"class":47}," {",[41,86,87],{"class":55}," Button",[41,89,90],{"class":47},",",[41,92,93],{"class":55}," Flex",[41,95,90],{"class":47},[41,97,98],{"class":55}," Modal",[41,100,101],{"class":47}," }",[41,103,104],{"class":51}," from",[41,106,107],{"class":65}," '",[41,109,110],{"class":69},"@dolanske\u002Fvui",[41,112,113],{"class":65},"'\n",[41,115,117,119,121,124,126,128,130,132],{"class":43,"line":116},3,[41,118,81],{"class":51},[41,120,84],{"class":47},[41,122,123],{"class":55}," ref",[41,125,101],{"class":47},[41,127,104],{"class":51},[41,129,107],{"class":65},[41,131,35],{"class":69},[41,133,113],{"class":65},[41,135,137],{"class":43,"line":136},4,[41,138,140],{"emptyLinePlaceholder":139},true,"\n",[41,142,144,148,151,154,157,160,163],{"class":43,"line":143},5,[41,145,147],{"class":146},"sCMWV","const ",[41,149,150],{"class":55},"isOpen",[41,152,153],{"class":47}," =",[41,155,123],{"class":156},"sRTv0",[41,158,159],{"class":47},"(",[41,161,162],{"class":51},"false",[41,164,165],{"class":47},")\n",[41,167,169,172,174],{"class":43,"line":168},6,[41,170,171],{"class":47},"\u003C\u002F",[41,173,52],{"class":51},[41,175,75],{"class":47},[41,177,179],{"class":43,"line":178},7,[41,180,140],{"emptyLinePlaceholder":139},[41,182,184,186,189],{"class":43,"line":183},8,[41,185,48],{"class":47},[41,187,188],{"class":51},"template",[41,190,75],{"class":47},[41,192,194,197,200,203,205,207,210,212],{"class":43,"line":193},9,[41,195,196],{"class":47},"  \u003C",[41,198,199],{"class":51},"Button",[41,201,202],{"class":55}," @click",[41,204,62],{"class":47},[41,206,66],{"class":65},[41,208,209],{"class":69},"isOpen = true",[41,211,66],{"class":65},[41,213,75],{"class":47},[41,215,217],{"class":43,"line":216},10,[41,218,220],{"class":219},"sX1ls","    Basic Modal\n",[41,222,224,227,229],{"class":43,"line":223},11,[41,225,226],{"class":47},"  \u003C\u002F",[41,228,199],{"class":51},[41,230,75],{"class":47},[41,232,234,236,238,241,243,245,247,249,252,254,256,259,261,264,266,268,271,273,276,278,280,283,285],{"class":43,"line":233},12,[41,235,196],{"class":47},[41,237,14],{"class":51},[41,239,240],{"class":55}," :open",[41,242,62],{"class":47},[41,244,66],{"class":65},[41,246,150],{"class":69},[41,248,66],{"class":65},[41,250,251],{"class":55}," size",[41,253,62],{"class":47},[41,255,66],{"class":65},[41,257,258],{"class":69},"m",[41,260,66],{"class":65},[41,262,263],{"class":55}," :card",[41,265,62],{"class":47},[41,267,66],{"class":65},[41,269,270],{"class":69},"{ separators: true }",[41,272,66],{"class":65},[41,274,275],{"class":55}," @close",[41,277,62],{"class":47},[41,279,66],{"class":65},[41,281,282],{"class":69},"isOpen = false",[41,284,66],{"class":65},[41,286,75],{"class":47},[41,288,290,293,295,298,301],{"class":43,"line":289},13,[41,291,292],{"class":47},"    \u003C",[41,294,188],{"class":51},[41,296,297],{"class":47}," #",[41,299,300],{"class":156},"header",[41,302,75],{"class":47},[41,304,306,309,312,315,318,320,322],{"class":43,"line":305},14,[41,307,308],{"class":47},"      \u003C",[41,310,311],{"class":51},"h4",[41,313,314],{"class":47},">",[41,316,317],{"class":219},"Modal ",[41,319,171],{"class":47},[41,321,311],{"class":51},[41,323,75],{"class":47},[41,325,327,330,332],{"class":43,"line":326},15,[41,328,329],{"class":47},"    \u003C\u002F",[41,331,188],{"class":51},[41,333,75],{"class":47},[41,335,337,339,341,343,346,348,350],{"class":43,"line":336},16,[41,338,292],{"class":47},[41,340,23],{"class":51},[41,342,314],{"class":47},[41,344,345],{"class":219},"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad harum id, distinctio voluptatum repellat eveniet repellendus saepe velit rem illo facere aspernatur iste nam, quasi dolores expedita consectetur enim autem?",[41,347,171],{"class":47},[41,349,23],{"class":51},[41,351,75],{"class":47},[41,353,355,357,359,361,364,366,368,371,374,376,378],{"class":43,"line":354},17,[41,356,292],{"class":47},[41,358,188],{"class":51},[41,360,297],{"class":47},[41,362,363],{"class":156},"footer",[41,365,62],{"class":47},[41,367,66],{"class":47},[41,369,370],{"class":47},"{ ",[41,372,373],{"class":55},"close",[41,375,101],{"class":47},[41,377,66],{"class":47},[41,379,75],{"class":47},[41,381,383,385,388,391],{"class":43,"line":382},18,[41,384,308],{"class":47},[41,386,387],{"class":51},"Flex",[41,389,390],{"class":55}," x-end",[41,392,75],{"class":47},[41,394,396,399,401,403,405,407,409,411],{"class":43,"line":395},19,[41,397,398],{"class":47},"        \u003C",[41,400,199],{"class":51},[41,402,202],{"class":55},[41,404,62],{"class":47},[41,406,66],{"class":65},[41,408,373],{"class":69},[41,410,66],{"class":65},[41,412,75],{"class":47},[41,414,416],{"class":43,"line":415},20,[41,417,418],{"class":219},"          Close\n",[41,420,422,425,427],{"class":43,"line":421},21,[41,423,424],{"class":47},"        \u003C\u002F",[41,426,199],{"class":51},[41,428,75],{"class":47},[41,430,432,435,438],{"class":43,"line":431},22,[41,433,434],{"class":47},"      \u003C\u002F",[41,436,437],{"class":51},"flex",[41,439,75],{"class":47},[41,441,443,445,447],{"class":43,"line":442},23,[41,444,329],{"class":47},[41,446,188],{"class":51},[41,448,75],{"class":47},[41,450,452,454,456],{"class":43,"line":451},24,[41,453,226],{"class":47},[41,455,14],{"class":51},[41,457,75],{"class":47},[41,459,461,463,465],{"class":43,"line":460},25,[41,462,171],{"class":47},[41,464,188],{"class":51},[41,466,75],{"class":47},[468,469,471],"h2",{"id":470},"props","Props",[473,474,475,491],"table",{},[476,477,478],"thead",{},[479,480,481,485,488],"tr",{},[482,483,484],"th",{},"Name",[482,486,487],{},"Default",[482,489,490],{},"Type",[492,493,494,515,550,574,592,610,629,647,673],"tbody",{},[479,495,496,502,506],{},[497,498,499],"td",{},[38,500,501],{},"open",[497,503,504],{},[38,505,162],{},[497,507,508,511,514],{},[38,509,510],{},"boolean",[512,513],"br",{},"Controls the visibility of the modal",[479,516,517,522,527],{},[497,518,519],{},[38,520,521],{},"size",[497,523,524],{},[38,525,526],{},"'m'",[497,528,529,532,533,532,536,532,538,532,541,532,544,532,547,549],{},[38,530,531],{},"xs"," ",[38,534,535],{},"s",[38,537,258],{},[38,539,540],{},"l",[38,542,543],{},"xl",[38,545,546],{},"screen",[512,548],{}," Controls the width of the modal",[479,551,552,557,560],{},[497,553,554],{},[38,555,556],{},"card",[497,558,559],{},"-",[497,561,562,565,567,568,573],{},[38,563,564],{},"CardProps",[512,566],{},"Props to pass to the underlying ",[569,570,572],"a",{"href":571},"\u002Fdocs\u002Fcomponents\u002Fcard","Card"," component",[479,575,576,581,585],{},[497,577,578],{},[38,579,580],{},"scrollable",[497,582,583],{},[38,584,162],{},[497,586,587,589,591],{},[38,588,510],{},[512,590],{},"Makes the modal content scrollable instead of the modal itself",[479,593,594,599,603],{},[497,595,596],{},[38,597,598],{},"centered",[497,600,601],{},[38,602,162],{},[497,604,605,607,609],{},[38,606,510],{},[512,608],{},"Centers the modal vertically on the screen",[479,611,612,617,622],{},[497,613,614],{},[38,615,616],{},"canDismiss",[497,618,619],{},[38,620,621],{},"true",[497,623,624,626,628],{},[38,625,510],{},[512,627],{},"Whether the modal can be dismissed via Escape key or backdrop click",[479,630,631,636,640],{},[497,632,633],{},[38,634,635],{},"hideCloseButton",[497,637,638],{},[38,639,162],{},[497,641,642,644,646],{},[38,643,510],{},[512,645],{},"Hides the X button in the top right of the modal. The modal can still be closed by other means",[479,648,649,654,658],{},[497,650,651],{},[38,652,653],{},"transition-name",[497,655,656],{},[38,657,21],{},[497,659,660,532,663,532,666,668,669,672],{},[38,661,662],{},"string",[38,664,665],{},"none",[512,667],{}," Allows you to change or disable the vue transition for the modal appear. By default, a ",[38,670,671],{},"fade"," animation with a bit of scaling is applied",[479,674,675,680,684],{},[497,676,677],{},[38,678,679],{},"disableMobileFs",[497,681,682],{},[38,683,162],{},[497,685,686,688,690,691],{},[38,687,510],{},[512,689],{},"Disables the default behavior where the modal becomes fullscreen on mobile. The breakpoint can be configured via ",[38,692,693],{},"vuiBreakpoints",[468,695,697],{"id":696},"events","Events",[473,699,700,712],{},[476,701,702],{},[479,703,704,706,709],{},[482,705,484],{},[482,707,708],{},"Payload",[482,710,711],{},"Description",[492,713,714],{},[479,715,716,720,722],{},[497,717,718],{},[38,719,373],{},[497,721,559],{},[497,723,724],{},"Emitted when the modal is closed",[468,726,728],{"id":727},"slots","Slots",[473,730,731,741],{},[476,732,733],{},[479,734,735,737,739],{},[482,736,484],{},[482,738,471],{},[482,740,711],{},[492,742,743,758,771],{},[479,744,745,750,755],{},[497,746,747],{},[38,748,749],{},"default",[497,751,752],{},[38,753,754],{},"{ close: () => void }",[497,756,757],{},"The main content of the modal",[479,759,760,764,768],{},[497,761,762],{},[38,763,300],{},[497,765,766],{},[38,767,754],{},[497,769,770],{},"Custom header content",[479,772,773,777,781],{},[497,774,775],{},[38,776,363],{},[497,778,779],{},[38,780,754],{},[497,782,783],{},"Custom footer content",[785,786,788],"h3",{"id":787},"tokens","Tokens",[23,790,791],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[473,793,794,805],{},[476,795,796],{},[479,797,798,801,803],{},[482,799,800],{},"Token",[482,802,487],{},[482,804,711],{},[492,806,807,822,837],{},[479,808,809,814,819],{},[497,810,811],{},[38,812,813],{},"--vui-modal-max-width-s",[497,815,816],{},[38,817,818],{},"440px",[497,820,821],{},"Max width for small size",[479,823,824,829,834],{},[497,825,826],{},[38,827,828],{},"--vui-modal-max-width-m",[497,830,831],{},[38,832,833],{},"620px",[497,835,836],{},"Max width for medium size",[479,838,839,844,849],{},[497,840,841],{},[38,842,843],{},"--vui-modal-max-width-l",[497,845,846],{},[38,847,848],{},"728px",[497,850,851],{},"Max width for large size",[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);}",{"title":36,"searchDepth":78,"depth":78,"links":857},[858,859,860],{"id":470,"depth":78,"text":471},{"id":696,"depth":78,"text":697},{"id":727,"depth":78,"text":728,"children":861},[862],{"id":787,"depth":116,"text":788},"md",{},"\u002Fdocs\u002Fcomponents\u002Fmodal",{"title":14,"description":25},"docs\u002Fcomponents\u002Fmodal","3Q9RrvDi1A5TUNVHqqaSPfK07WoZwPs-uCx-OzzzEBc",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":870},"\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>",1782200882963]