[{"data":1,"prerenderedAt":2262},["ShallowReactive",2],{"navigation_docs":3,"-api-components-vue-final-dialog":128,"-api-components-vue-final-dialog-surround":2258},[4,33,75],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":32},"Get Started","heroicons-outline:book-open","\u002Fget-started","2.get-started",[10],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":32},"Guide","akar-icons:book","\u002Fget-started\u002Fguide","2.get-started\u002F1.guide",[16,20,24,28],{"title":17,"path":18,"stem":19},"Concepts","\u002Fget-started\u002Fguide\u002Fconcepts","2.get-started\u002F1.guide\u002F1.concepts",{"title":21,"path":22,"stem":23},"Setup","\u002Fget-started\u002Fguide\u002Fsetup","2.get-started\u002F1.guide\u002F2.setup",{"title":25,"path":26,"stem":27},"Migration Guide","\u002Fget-started\u002Fguide\u002Fmigration-guide","2.get-started\u002F1.guide\u002F3.migration-guide",{"title":29,"path":30,"stem":31},"Types","\u002Fget-started\u002Fguide\u002Ftypes","2.get-started\u002F1.guide\u002F4.types",false,{"title":34,"icon":35,"path":36,"stem":37,"children":38,"page":32},"API","heroicons-outline:bookmark-alt","\u002Fapi","3.api",[39,57],{"title":40,"icon":41,"path":42,"stem":43,"children":44,"page":32},"Components","heroicons-outline:cube","\u002Fapi\u002Fcomponents","3.api\u002F1.components",[45,49,53],{"title":46,"path":47,"stem":48},"\u003CModalsContainer>","\u002Fapi\u002Fcomponents\u002Fmodals-container","3.api\u002F1.components\u002F1.modals-container",{"title":50,"path":51,"stem":52},"\u003CVueFinalModal>","\u002Fapi\u002Fcomponents\u002Fvue-final-modal","3.api\u002F1.components\u002F2.vue-final-modal",{"title":54,"path":55,"stem":56},"\u003CVueFinalDialog>","\u002Fapi\u002Fcomponents\u002Fvue-final-dialog","3.api\u002F1.components\u002F3.vue-final-dialog",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":32},"Composables","heroicons-outline:switch-horizontal","\u002Fapi\u002Fcomposables","3.api\u002F2.composables",[63,67,71],{"title":64,"path":65,"stem":66},"useModal()","\u002Fapi\u002Fcomposables\u002Fuse-modal","3.api\u002F2.composables\u002F1.use-modal",{"title":68,"path":69,"stem":70},"useVfm()","\u002Fapi\u002Fcomposables\u002Fuse-vfm","3.api\u002F2.composables\u002F2.use-vfm",{"title":72,"path":73,"stem":74},"useModalLifecycle()","\u002Fapi\u002Fcomposables\u002Fuse-modal-lifecycle","3.api\u002F2.composables\u002F3.use-modal-lifecycle",{"title":76,"path":77,"stem":78,"children":79,"page":32},"Use Cases","\u002Fuse-cases","4.use-cases",[80,84,88,92,96,100,104,108,112,116,120,124],{"title":81,"path":82,"stem":83},"Playground","\u002Fuse-cases\u002Fplayground","4.use-cases\u002F1.playground",{"title":85,"path":86,"stem":87},"Modal Keep Alive","\u002Fuse-cases\u002Fmodal-keep-alive","4.use-cases\u002F10.modal-keep-alive",{"title":89,"path":90,"stem":91},"Await a Confirm","\u002Fuse-cases\u002Fmodal-await-confirm","4.use-cases\u002F11.modal-await-confirm",{"title":93,"path":94,"stem":95},"Native Dialog","\u002Fuse-cases\u002Fnative-dialog","4.use-cases\u002F12.native-dialog",{"title":97,"path":98,"stem":99},"Modal in a Dialog","\u002Fuse-cases\u002Fmodal-in-dialog","4.use-cases\u002F13.modal-in-dialog",{"title":101,"path":102,"stem":103},"Modal Confirm","\u002Fuse-cases\u002Fconfirm-modal","4.use-cases\u002F3.confirm-modal",{"title":105,"path":106,"stem":107},"Modal Nested","\u002Fuse-cases\u002Fmodal-nested","4.use-cases\u002F4.modal-nested",{"title":109,"path":110,"stem":111},"Modal Fullscreen","\u002Fuse-cases\u002Fmodal-fullscreen","4.use-cases\u002F5.modal-fullscreen",{"title":113,"path":114,"stem":115},"Modal Bottom","\u002Fuse-cases\u002Fmodal-bottom","4.use-cases\u002F6.modal-bottom",{"title":117,"path":118,"stem":119},"Modal Login Form","\u002Fuse-cases\u002Fmodal-login-form","4.use-cases\u002F7.modal-login-form",{"title":121,"path":122,"stem":123},"Modal Drag Resize","\u002Fuse-cases\u002Fmodal-drag-resize","4.use-cases\u002F8.modal-drag-resize",{"title":125,"path":126,"stem":127},"Modal Long Scroll","\u002Fuse-cases\u002Fmodal-long-scroll","4.use-cases\u002F9.modal-long-scroll",{"id":129,"title":54,"body":130,"description":2252,"extension":2253,"links":2254,"meta":2255,"navigation":556,"path":55,"seo":2256,"stem":56,"__hash__":2257},"docs\u002F3.api\u002F1.components\u002F3.vue-final-dialog.md",{"type":131,"value":132,"toc":2228},"minimark",[133,215,235,240,271,283,389,393,481,504,508,515,717,722,1005,1058,1062,1106,1255,1258,1262,1266,1269,1307,1311,1344,1386,1388,1410,1441,1445,1477,1530,1534,1543,1573,1577,1924,1958,2051,2055,2070,2073,2094,2099,2160,2184,2199,2203,2224],[134,135,136,154,155,164,165,174,175,177,178,181,182,184,185,194,195,181,202,209,210,214],"p",{},[137,138,142,147,151],"code",{"className":139,"language":140,"style":141},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[143,144,146],"span",{"class":145},"sTEyZ","\u003C",[143,148,150],{"class":149},"sBMFI","VueFinalDialog",[143,152,153],{"class":145},">"," renders a native ",[156,157,161],"a",{"href":158,"rel":159},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fdialog",[160],"nofollow",[137,162,163],{},"\u003Cdialog>"," and opens it with ",[137,166,167,171],{"className":139,"language":140,"style":141},[143,168,170],{"class":169},"s2Zo4","showModal",[143,172,173],{"class":145},"()",". It plugs into ",[156,176,64],{"href":65},", ",[137,179,180],{},"v-model"," and ",[156,183,68],{"href":69}," like ",[137,186,187,189,192],{"className":139,"language":140,"style":141},[143,188,146],{"class":145},[143,190,191],{"class":149},"VueFinalModal",[143,193,153],{"class":145},", and its ",[137,196,197,200],{"className":139,"language":140,"style":141},[143,198,199],{"class":169},"open",[143,201,173],{"class":145},[137,203,204,207],{"className":139,"language":140,"style":141},[143,205,206],{"class":169},"close",[143,208,173],{"class":145}," resolve with ",[156,211,213],{"href":212},"\u002Fapi\u002Fcomposables\u002Fuse-modal#what-open-and-close-resolve-with","the same results",".",[134,216,217,218,221,222,225,226,234],{},"The browser does the rest: the dialog sits in the top layer, so it needs no ",[137,219,220],{},"z-index",", the page behind it is inert, ",[137,223,224],{},"Esc"," closes it, the focus moves into it on open and back on close. ",[137,227,228,230,232],{"className":139,"language":140,"style":141},[143,229,146],{"class":145},[143,231,150],{"class":149},[143,233,153],{"class":145}," ships no styles and no transitions of its own.",[236,237,239],"h2",{"id":238},"when-to-use-it","When to use it",[134,241,242,250,251,258,259,267,268,270],{},[137,243,244,246,248],{"className":139,"language":140,"style":141},[143,245,146],{"class":145},[143,247,191],{"class":149},[143,249,153],{"class":145}," stays the default of ",[137,252,253,256],{"className":139,"language":140,"style":141},[143,254,255],{"class":169},"useModal",[143,257,173],{"class":145}," and the one to customize: it is a plain element you can place, layer and animate as you like. Use ",[137,260,261,263,265],{"className":139,"language":140,"style":141},[143,262,146],{"class":145},[143,264,150],{"class":149},[143,266,153],{"class":145}," when you want what the browser gives a modal ",[137,269,163],{},": focus moved in and back, the page behind it inert and hidden from screen readers, and on Android the back gesture closing it. Simple confirmations and forms are a good fit.",[134,272,273,274,282],{},"The top layer and the inert page come with limits that ",[137,275,276,278,280],{"className":139,"language":140,"style":141},[143,277,146],{"class":145},[143,279,191],{"class":149},[143,281,153],{"class":145}," does not have:",[284,285,286,322,356,377,384],"ul",{},[287,288,289,290,292,293,306,307,315,316,214],"li",{},"Nothing outside the dialog can be used while it is open, whatever its ",[137,291,220],{},". A dropdown, a date picker or a toast that a UI library teleports to ",[137,294,297,300,304],{"className":295,"language":296,"style":141},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","html",[143,298,146],{"class":299},"sMK4o",[143,301,303],{"class":302},"swJcz","body",[143,305,153],{"class":299}," shows behind the dialog and cannot be clicked: point its teleport target at the dialog instead. A ",[137,308,309,311,313],{"className":139,"language":140,"style":141},[143,310,146],{"class":145},[143,312,191],{"class":149},[143,314,153],{"class":145}," is moved in for you, see ",[156,317,319,320],{"href":318},"#next-to-vuefinalmodal","Next to ",[137,321,50],{},[287,323,324,325,343,344,355],{},"The page behind a modal dialog cannot stay interactive, like with ",[137,326,327,330,333,336,340],{"className":139,"language":140,"style":141},[143,328,329],{"class":149},"background",[143,331,332],{"class":299},":",[143,334,335],{"class":299}," '",[143,337,339],{"class":338},"sfazB","interactive",[143,341,342],{"class":299},"'",". A non-modal dialog, with ",[137,345,346,349,351],{"className":139,"language":140,"style":141},[143,347,348],{"class":149},"modal",[143,350,332],{"class":299},[143,352,354],{"class":353},"sfNiH"," false",", leaves it interactive but is not in the top layer either.",[287,357,358,359,367,368,214],{},"A modal dialog always covers the whole viewport: it cannot be kept inside a container, like ",[137,360,361,363,365],{"className":139,"language":140,"style":141},[143,362,146],{"class":145},[143,364,191],{"class":149},[143,366,153],{"class":145}," with ",[137,369,370,373,375],{"className":139,"language":140,"style":141},[143,371,372],{"class":149},"teleportTo",[143,374,332],{"class":299},[143,376,354],{"class":353},[287,378,379,380,214],{},"It opens once the app has hydrated, so it is never part of the first paint, see ",[156,381,383],{"href":382},"#server-side-rendering","Server-side rendering",[287,385,386,388],{},[137,387,220],{}," and the JavaScript hooks of Vue transitions have no effect: dialogs stack in the order they opened and animate with CSS.",[236,390,392],{"id":391},"template-structure","Template structure",[394,395,398],"pre",{"className":295,"code":396,"filename":397,"language":296,"meta":141,"style":141},"\u003Ctemplate>\n  \u003Cdialog :closedby=\"closedby\">\n    \u003Cslot :close=\"close\" \u002F>\n  \u003C\u002Fdialog>\n\u003C\u002Ftemplate>\n","VueFinalDialog.vue",[137,399,400,412,438,461,471],{"__ignoreMap":141},[143,401,404,406,409],{"class":402,"line":403},"line",1,[143,405,146],{"class":299},[143,407,408],{"class":302},"template",[143,410,411],{"class":299},">\n",[143,413,415,418,421,425,428,431,434,436],{"class":402,"line":414},2,[143,416,417],{"class":299},"  \u003C",[143,419,420],{"class":302},"dialog",[143,422,424],{"class":423},"spNyl"," :closedby",[143,426,427],{"class":299},"=",[143,429,430],{"class":299},"\"",[143,432,433],{"class":338},"closedby",[143,435,430],{"class":299},[143,437,411],{"class":299},[143,439,441,444,447,450,452,454,456,458],{"class":402,"line":440},3,[143,442,443],{"class":299},"    \u003C",[143,445,446],{"class":302},"slot",[143,448,449],{"class":423}," :close",[143,451,427],{"class":299},[143,453,430],{"class":299},[143,455,206],{"class":338},[143,457,430],{"class":299},[143,459,460],{"class":299}," \u002F>\n",[143,462,464,467,469],{"class":402,"line":463},4,[143,465,466],{"class":299},"  \u003C\u002F",[143,468,420],{"class":302},[143,470,411],{"class":299},[143,472,474,477,479],{"class":402,"line":473},5,[143,475,476],{"class":299},"\u003C\u002F",[143,478,408],{"class":302},[143,480,411],{"class":299},[134,482,483,484,489,490,501,502,214],{},"Every attr you pass, such as ",[137,485,486],{"className":139,"language":140,"style":141},[143,487,488],{"class":423},"class"," or ",[137,491,492,495,498],{"className":139,"language":140,"style":141},[143,493,494],{"class":145},"aria",[143,496,497],{"class":299},"-",[143,499,500],{"class":145},"labelledby",", falls through to the ",[137,503,163],{},[236,505,507],{"id":506},"usage","Usage",[509,510,512,513],"h3",{"id":511},"with-usemodal","With ",[137,514,64],{},[394,516,518],{"className":139,"code":517,"language":140,"meta":141,"style":141},"import { useModal, VueFinalDialog } from 'vue-final-modal'\n\nconst { open, close } = useModal({\n  component: VueFinalDialog,\n  attrs: {\n    class: 'my-dialog',\n    closedby: 'any',\n    onClosed() { \u002F* on closed *\u002F },\n  },\n  slots: { default: '\u003Cp>Hello from a native dialog\u003C\u002Fp>' },\n})\n\nawait open() \u002F\u002F 'opened'\n",[137,519,520,552,558,587,599,609,626,643,660,666,690,698,703],{"__ignoreMap":141},[143,521,522,526,529,532,535,538,541,544,546,549],{"class":402,"line":403},[143,523,525],{"class":524},"s7zQu","import",[143,527,528],{"class":299}," {",[143,530,531],{"class":145}," useModal",[143,533,534],{"class":299},",",[143,536,537],{"class":145}," VueFinalDialog",[143,539,540],{"class":299}," }",[143,542,543],{"class":524}," from",[143,545,335],{"class":299},[143,547,548],{"class":338},"vue-final-modal",[143,550,551],{"class":299},"'\n",[143,553,554],{"class":402,"line":414},[143,555,557],{"emptyLinePlaceholder":556},true,"\n",[143,559,560,563,565,568,570,573,576,579,581,584],{"class":402,"line":440},[143,561,562],{"class":423},"const",[143,564,528],{"class":299},[143,566,567],{"class":145}," open",[143,569,534],{"class":299},[143,571,572],{"class":145}," close ",[143,574,575],{"class":299},"}",[143,577,578],{"class":299}," =",[143,580,531],{"class":169},[143,582,583],{"class":145},"(",[143,585,586],{"class":299},"{\n",[143,588,589,592,594,596],{"class":402,"line":463},[143,590,591],{"class":302},"  component",[143,593,332],{"class":299},[143,595,537],{"class":145},[143,597,598],{"class":299},",\n",[143,600,601,604,606],{"class":402,"line":473},[143,602,603],{"class":302},"  attrs",[143,605,332],{"class":299},[143,607,608],{"class":299}," {\n",[143,610,612,615,617,619,622,624],{"class":402,"line":611},6,[143,613,614],{"class":302},"    class",[143,616,332],{"class":299},[143,618,335],{"class":299},[143,620,621],{"class":338},"my-dialog",[143,623,342],{"class":299},[143,625,598],{"class":299},[143,627,629,632,634,636,639,641],{"class":402,"line":628},7,[143,630,631],{"class":302},"    closedby",[143,633,332],{"class":299},[143,635,335],{"class":299},[143,637,638],{"class":338},"any",[143,640,342],{"class":299},[143,642,598],{"class":299},[143,644,646,649,651,653,657],{"class":402,"line":645},8,[143,647,648],{"class":302},"    onClosed",[143,650,173],{"class":299},[143,652,528],{"class":299},[143,654,656],{"class":655},"sHwdD"," \u002F* on closed *\u002F",[143,658,659],{"class":299}," },\n",[143,661,663],{"class":402,"line":662},9,[143,664,665],{"class":299},"  },\n",[143,667,669,672,674,676,679,681,683,686,688],{"class":402,"line":668},10,[143,670,671],{"class":302},"  slots",[143,673,332],{"class":299},[143,675,528],{"class":299},[143,677,678],{"class":302}," default",[143,680,332],{"class":299},[143,682,335],{"class":299},[143,684,685],{"class":338},"\u003Cp>Hello from a native dialog\u003C\u002Fp>",[143,687,342],{"class":299},[143,689,659],{"class":299},[143,691,693,695],{"class":402,"line":692},11,[143,694,575],{"class":299},[143,696,697],{"class":145},")\n",[143,699,701],{"class":402,"line":700},12,[143,702,557],{"emptyLinePlaceholder":556},[143,704,706,709,711,714],{"class":402,"line":705},13,[143,707,708],{"class":524},"await",[143,710,567],{"class":169},[143,712,713],{"class":145},"() ",[143,715,716],{"class":655},"\u002F\u002F 'opened'\n",[509,718,512,720],{"id":719},"with-v-model",[137,721,180],{},[394,723,727],{"className":724,"code":725,"language":726,"meta":141,"style":141},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VueFinalDialog } from 'vue-final-modal'\n\nconst show = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"show = true\">\n    Open\n  \u003C\u002Fbutton>\n  \u003CVueFinalDialog v-model=\"show\" class=\"my-dialog\">\n    \u003Ctemplate #default=\"{ close }\">\n      \u003Cp>Hello from a native dialog\u003C\u002Fp>\n      \u003Cbutton @click=\"close\">\n        Close\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVueFinalDialog>\n\u003C\u002Ftemplate>\n","vue",[137,728,729,752,771,789,793,811,819,823,831,852,857,865,896,923,942,961,967,977,987,996],{"__ignoreMap":141},[143,730,731,733,736,739,742,744,746,748,750],{"class":402,"line":403},[143,732,146],{"class":299},[143,734,735],{"class":302},"script",[143,737,738],{"class":423}," setup",[143,740,741],{"class":423}," lang",[143,743,427],{"class":299},[143,745,430],{"class":299},[143,747,140],{"class":338},[143,749,430],{"class":299},[143,751,411],{"class":299},[143,753,754,756,758,761,763,765,767,769],{"class":402,"line":414},[143,755,525],{"class":524},[143,757,528],{"class":299},[143,759,760],{"class":145}," ref",[143,762,540],{"class":299},[143,764,543],{"class":524},[143,766,335],{"class":299},[143,768,726],{"class":338},[143,770,551],{"class":299},[143,772,773,775,777,779,781,783,785,787],{"class":402,"line":440},[143,774,525],{"class":524},[143,776,528],{"class":299},[143,778,537],{"class":145},[143,780,540],{"class":299},[143,782,543],{"class":524},[143,784,335],{"class":299},[143,786,548],{"class":338},[143,788,551],{"class":299},[143,790,791],{"class":402,"line":463},[143,792,557],{"emptyLinePlaceholder":556},[143,794,795,797,800,802,804,806,809],{"class":402,"line":473},[143,796,562],{"class":423},[143,798,799],{"class":145}," show ",[143,801,427],{"class":299},[143,803,760],{"class":169},[143,805,583],{"class":145},[143,807,808],{"class":353},"false",[143,810,697],{"class":145},[143,812,813,815,817],{"class":402,"line":611},[143,814,476],{"class":299},[143,816,735],{"class":302},[143,818,411],{"class":299},[143,820,821],{"class":402,"line":628},[143,822,557],{"emptyLinePlaceholder":556},[143,824,825,827,829],{"class":402,"line":645},[143,826,146],{"class":299},[143,828,408],{"class":302},[143,830,411],{"class":299},[143,832,833,835,838,841,843,845,848,850],{"class":402,"line":662},[143,834,417],{"class":299},[143,836,837],{"class":302},"button",[143,839,840],{"class":423}," @click",[143,842,427],{"class":299},[143,844,430],{"class":299},[143,846,847],{"class":338},"show = true",[143,849,430],{"class":299},[143,851,411],{"class":299},[143,853,854],{"class":402,"line":668},[143,855,856],{"class":145},"    Open\n",[143,858,859,861,863],{"class":402,"line":692},[143,860,466],{"class":299},[143,862,837],{"class":302},[143,864,411],{"class":299},[143,866,867,869,871,874,876,878,881,883,886,888,890,892,894],{"class":402,"line":700},[143,868,417],{"class":299},[143,870,150],{"class":302},[143,872,873],{"class":423}," v-model",[143,875,427],{"class":299},[143,877,430],{"class":299},[143,879,880],{"class":338},"show",[143,882,430],{"class":299},[143,884,885],{"class":423}," class",[143,887,427],{"class":299},[143,889,430],{"class":299},[143,891,621],{"class":338},[143,893,430],{"class":299},[143,895,411],{"class":299},[143,897,898,900,902,905,908,910,912,915,917,919,921],{"class":402,"line":705},[143,899,443],{"class":299},[143,901,408],{"class":302},[143,903,904],{"class":299}," #",[143,906,907],{"class":423},"default",[143,909,427],{"class":299},[143,911,430],{"class":299},[143,913,914],{"class":299},"{",[143,916,572],{"class":145},[143,918,575],{"class":299},[143,920,430],{"class":299},[143,922,411],{"class":299},[143,924,926,929,931,933,936,938,940],{"class":402,"line":925},14,[143,927,928],{"class":299},"      \u003C",[143,930,134],{"class":302},[143,932,153],{"class":299},[143,934,935],{"class":145},"Hello from a native dialog",[143,937,476],{"class":299},[143,939,134],{"class":302},[143,941,411],{"class":299},[143,943,945,947,949,951,953,955,957,959],{"class":402,"line":944},15,[143,946,928],{"class":299},[143,948,837],{"class":302},[143,950,840],{"class":423},[143,952,427],{"class":299},[143,954,430],{"class":299},[143,956,206],{"class":338},[143,958,430],{"class":299},[143,960,411],{"class":299},[143,962,964],{"class":402,"line":963},16,[143,965,966],{"class":145},"        Close\n",[143,968,970,973,975],{"class":402,"line":969},17,[143,971,972],{"class":299},"      \u003C\u002F",[143,974,837],{"class":302},[143,976,411],{"class":299},[143,978,980,983,985],{"class":402,"line":979},18,[143,981,982],{"class":299},"    \u003C\u002F",[143,984,408],{"class":302},[143,986,411],{"class":299},[143,988,990,992,994],{"class":402,"line":989},19,[143,991,466],{"class":299},[143,993,150],{"class":302},[143,995,411],{"class":299},[143,997,999,1001,1003],{"class":402,"line":998},20,[143,1000,476],{"class":299},[143,1002,408],{"class":302},[143,1004,411],{"class":299},[134,1006,1007,1009,1010,1022,1023,1043,1044,1052,1053,1055,1056,214],{},[137,1008,224],{},", a click outside with ",[137,1011,1012,1014,1016,1018,1020],{"className":139,"language":140,"style":141},[143,1013,433],{"class":145},[143,1015,427],{"class":299},[143,1017,430],{"class":299},[143,1019,638],{"class":338},[143,1021,430],{"class":299}," and a ",[137,1024,1025,1027,1030,1033,1035,1037,1039,1041],{"className":295,"language":296,"style":141},[143,1026,146],{"class":299},[143,1028,1029],{"class":302},"form",[143,1031,1032],{"class":423}," method",[143,1034,427],{"class":299},[143,1036,430],{"class":299},[143,1038,420],{"class":338},[143,1040,430],{"class":299},[143,1042,153],{"class":299}," all close the dialog in the browser, and ",[137,1045,1046,1048,1050],{"className":139,"language":140,"style":141},[143,1047,146],{"class":145},[143,1049,150],{"class":149},[143,1051,153],{"class":145}," writes ",[137,1054,808],{}," back to ",[137,1057,180],{},[509,1059,1061],{"id":1060},"transitions","Transitions",[134,1063,1064,1065,1068,1069,181,1074,1079,1080,181,1086,1092,1093,1095,1096,1098,1099,1105],{},"Animate the dialog and its ",[137,1066,1067],{},"::backdrop"," with CSS. ",[137,1070,1071],{"className":139,"language":140,"style":141},[143,1072,1073],{"class":145},"opened",[137,1075,1076],{"className":139,"language":140,"style":141},[143,1077,1078],{"class":145},"closed",", and so ",[137,1081,1082,1084],{"className":139,"language":140,"style":141},[143,1083,199],{"class":169},[143,1085,173],{"class":145},[137,1087,1088,1090],{"className":139,"language":140,"style":141},[143,1089,206],{"class":169},[143,1091,173],{"class":145},", wait for the transitions and animations that run on the ",[137,1094,163],{}," itself and on its ",[137,1097,1067],{},", so a dialog opened by ",[137,1100,1101,1103],{"className":139,"language":140,"style":141},[143,1102,255],{"class":169},[143,1104,173],{"class":145}," is unmounted only after it faded out:",[394,1107,1111],{"className":1108,"code":1109,"language":1110,"meta":141,"style":141},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".my-dialog {\n  opacity: 1;\n  transition: opacity .3s, overlay .3s allow-discrete, display .3s allow-discrete;\n}\n.my-dialog:not([open]) {\n  opacity: 0;\n}\n@starting-style {\n  .my-dialog[open] {\n    opacity: 0;\n  }\n}\n","css",[137,1112,1113,1121,1136,1170,1175,1196,1207,1211,1218,1235,1246,1251],{"__ignoreMap":141},[143,1114,1115,1117,1119],{"class":402,"line":403},[143,1116,214],{"class":299},[143,1118,621],{"class":149},[143,1120,608],{"class":299},[143,1122,1123,1127,1129,1133],{"class":402,"line":414},[143,1124,1126],{"class":1125},"sqsOY","  opacity",[143,1128,332],{"class":299},[143,1130,1132],{"class":1131},"sbssI"," 1",[143,1134,1135],{"class":299},";\n",[143,1137,1138,1141,1143,1146,1149,1151,1154,1156,1159,1161,1164,1166,1168],{"class":402,"line":440},[143,1139,1140],{"class":1125},"  transition",[143,1142,332],{"class":299},[143,1144,1145],{"class":145}," opacity ",[143,1147,1148],{"class":1131},".3s",[143,1150,534],{"class":299},[143,1152,1153],{"class":145}," overlay ",[143,1155,1148],{"class":1131},[143,1157,1158],{"class":145}," allow-discrete",[143,1160,534],{"class":299},[143,1162,1163],{"class":145}," display ",[143,1165,1148],{"class":1131},[143,1167,1158],{"class":145},[143,1169,1135],{"class":299},[143,1171,1172],{"class":402,"line":463},[143,1173,1174],{"class":299},"}\n",[143,1176,1177,1179,1181,1183,1186,1189,1191,1194],{"class":402,"line":473},[143,1178,214],{"class":299},[143,1180,621],{"class":149},[143,1182,332],{"class":299},[143,1184,1185],{"class":423},"not",[143,1187,1188],{"class":299},"([",[143,1190,199],{"class":423},[143,1192,1193],{"class":299},"])",[143,1195,608],{"class":299},[143,1197,1198,1200,1202,1205],{"class":402,"line":611},[143,1199,1126],{"class":1125},[143,1201,332],{"class":299},[143,1203,1204],{"class":1131}," 0",[143,1206,1135],{"class":299},[143,1208,1209],{"class":402,"line":628},[143,1210,1174],{"class":299},[143,1212,1213,1216],{"class":402,"line":645},[143,1214,1215],{"class":524},"@starting-style",[143,1217,608],{"class":299},[143,1219,1220,1223,1225,1228,1230,1233],{"class":402,"line":662},[143,1221,1222],{"class":299},"  .",[143,1224,621],{"class":149},[143,1226,1227],{"class":299},"[",[143,1229,199],{"class":423},[143,1231,1232],{"class":299},"]",[143,1234,608],{"class":299},[143,1236,1237,1240,1242,1244],{"class":402,"line":668},[143,1238,1239],{"class":1125},"    opacity",[143,1241,332],{"class":299},[143,1243,1204],{"class":1131},[143,1245,1135],{"class":299},[143,1247,1248],{"class":402,"line":692},[143,1249,1250],{"class":299},"  }\n",[143,1252,1253],{"class":402,"line":700},[143,1254,1174],{"class":299},[134,1256,1257],{},"The animations of the content inside the dialog, and animations that never end, are not waited for.",[236,1259,1261],{"id":1260},"props","Props",[509,1263,1265],{"id":1264},"modelvalue-optional","modelValue (optional)",[134,1267,1268],{},"Display the dialog or not.",[284,1270,1271,1299],{},[287,1272,1273,1274],{},"Type:\n",[284,1275,1276,1284],{},[287,1277,1278,1279],{},"JS: ",[137,1280,1281],{"className":139,"language":140,"style":141},[143,1282,1283],{"class":145},"Boolean",[287,1285,1286,1287],{},"TS: ",[137,1288,1289,1292,1294,1297],{"className":139,"language":140,"style":141},[143,1290,1291],{"class":145},"PropType",[143,1293,146],{"class":299},[143,1295,1296],{"class":145},"boolean",[143,1298,153],{"class":299},[287,1300,1301,1302],{},"Default: ",[137,1303,1304],{"className":139,"language":140,"style":141},[143,1305,1306],{"class":299},"undefined",[509,1308,1310],{"id":1309},"modalid-optional","modalId (optional)",[134,1312,1313,1314,1316,1317,177,1324,177,1330,181,1337,214],{},"An uniq value to open and close the dialog with ",[156,1315,68],{"href":69},": ",[137,1318,1319,1321],{"className":139,"language":140,"style":141},[143,1320,199],{"class":169},[143,1322,1323],{"class":145},"(modalId)",[137,1325,1326,1328],{"className":139,"language":140,"style":141},[143,1327,206],{"class":169},[143,1329,1323],{"class":145},[137,1331,1332,1335],{"className":139,"language":140,"style":141},[143,1333,1334],{"class":169},"toggle",[143,1336,1323],{"class":145},[137,1338,1339,1342],{"className":139,"language":140,"style":141},[143,1340,1341],{"class":169},"closeAll",[143,1343,173],{"class":145},[284,1345,1346,1380],{},[287,1347,1273,1348],{},[284,1349,1350,1367],{},[287,1351,1278,1352],{},[137,1353,1354,1357,1359,1362,1364],{"className":139,"language":140,"style":141},[143,1355,1356],{"class":145},"[String",[143,1358,534],{"class":299},[143,1360,1361],{"class":145}," Number",[143,1363,534],{"class":299},[143,1365,1366],{"class":145}," Symbol]",[287,1368,1286,1369],{},[137,1370,1371,1373,1375,1378],{"className":139,"language":140,"style":141},[143,1372,1291],{"class":145},[143,1374,146],{"class":299},[143,1376,1377],{"class":145},"ModalId",[143,1379,153],{"class":299},[287,1381,1301,1382],{},[137,1383,1384],{"className":139,"language":140,"style":141},[143,1385,1306],{"class":299},[509,1387,348],{"id":348},[134,1389,1390,1391,1397,1398,1402,1403,1409],{},"Open the dialog with ",[137,1392,1393,1395],{"className":139,"language":140,"style":141},[143,1394,170],{"class":169},[143,1396,173],{"class":145},". Set it to ",[137,1399,1400],{"className":139,"language":140,"style":141},[143,1401,808],{"class":353}," to open it with ",[137,1404,1405,1407],{"className":139,"language":140,"style":141},[143,1406,880],{"class":169},[143,1408,173],{"class":145}," instead: a non-modal dialog leaves the page interactive and is not in the top layer. It applies the next time the dialog opens.",[284,1411,1412,1434],{},[287,1413,1273,1414],{},[284,1415,1416,1422],{},[287,1417,1278,1418],{},[137,1419,1420],{"className":139,"language":140,"style":141},[143,1421,1283],{"class":145},[287,1423,1286,1424],{},[137,1425,1426,1428,1430,1432],{"className":139,"language":140,"style":141},[143,1427,1291],{"class":145},[143,1429,146],{"class":299},[143,1431,1296],{"class":145},[143,1433,153],{"class":299},[287,1435,1301,1436],{},[137,1437,1438],{"className":139,"language":140,"style":141},[143,1439,1440],{"class":353},"true",[509,1442,1444],{"id":1443},"closedby-optional","closedby (optional)",[134,1446,1447,1448,1454,1455,1463,1464,1473,1474,1476],{},"The native ",[156,1449,1452],{"href":1450,"rel":1451},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fdialog#closedby",[160],[137,1453,433],{}," attribute: ",[137,1456,1457,1459,1461],{"className":139,"language":140,"style":141},[143,1458,342],{"class":299},[143,1460,638],{"class":338},[143,1462,342],{"class":299}," also closes the dialog on a click outside, ",[137,1465,1466,1468,1471],{"className":139,"language":140,"style":141},[143,1467,342],{"class":299},[143,1469,1470],{"class":338},"none",[143,1472,342],{"class":299}," keeps it open on ",[137,1475,224],{},". Browsers that do not support it ignore it.",[284,1478,1479,1524],{},[287,1480,1273,1481],{},[284,1482,1483,1490],{},[287,1484,1278,1485],{},[137,1486,1487],{"className":139,"language":140,"style":141},[143,1488,1489],{"class":145},"String",[287,1491,1286,1492],{},[137,1493,1494,1496,1498,1500,1502,1504,1507,1509,1512,1514,1516,1518,1520,1522],{"className":139,"language":140,"style":141},[143,1495,1291],{"class":145},[143,1497,146],{"class":299},[143,1499,342],{"class":299},[143,1501,638],{"class":338},[143,1503,342],{"class":299},[143,1505,1506],{"class":299}," |",[143,1508,335],{"class":299},[143,1510,1511],{"class":338},"closerequest",[143,1513,342],{"class":299},[143,1515,1506],{"class":299},[143,1517,335],{"class":299},[143,1519,1470],{"class":338},[143,1521,342],{"class":299},[143,1523,153],{"class":299},[287,1525,1301,1526],{},[137,1527,1528],{"className":139,"language":140,"style":141},[143,1529,1306],{"class":299},[509,1531,1533],{"id":1532},"lockscroll","lockScroll",[134,1535,1536,1537,1542],{},"Lock the scroll of the page while the dialog is open, with ",[156,1538,1541],{"href":1539,"rel":1540},"https:\u002F\u002Fhunterliu.tw\u002Fscroll-lock\u002F",[160],"@hunterliu\u002Fscroll-lock",". A modal dialog makes the page inert but does not stop it from scrolling. The page keeps the room of its scrollbar, so its content does not shift.",[284,1544,1545,1567],{},[287,1546,1273,1547],{},[284,1548,1549,1555],{},[287,1550,1278,1551],{},[137,1552,1553],{"className":139,"language":140,"style":141},[143,1554,1283],{"class":145},[287,1556,1286,1557],{},[137,1558,1559,1561,1563,1565],{"className":139,"language":140,"style":141},[143,1560,1291],{"class":145},[143,1562,146],{"class":299},[143,1564,1296],{"class":145},[143,1566,153],{"class":299},[287,1568,1301,1569],{},[137,1570,1571],{"className":139,"language":140,"style":141},[143,1572,808],{"class":353},[236,1574,1576],{"id":1575},"events","Events",[284,1578,1579,1660,1682,1802,1835,1890],{},[287,1580,1581,1626,1627],{},[137,1582,1583,1585,1589,1591,1593,1596,1598,1600,1603,1605,1607,1610,1612,1615,1618,1621,1624],{"className":139,"language":140,"style":141},[143,1584,583],{"class":299},[143,1586,1588],{"class":1587},"sHdIc","e",[143,1590,332],{"class":299},[143,1592,335],{"class":299},[143,1594,1595],{"class":338},"beforeOpen",[143,1597,342],{"class":299},[143,1599,534],{"class":299},[143,1601,1602],{"class":1587}," event",[143,1604,332],{"class":299},[143,1606,528],{"class":299},[143,1608,1609],{"class":302}," stop",[143,1611,332],{"class":299},[143,1613,1614],{"class":299}," ()",[143,1616,1617],{"class":423}," =>",[143,1619,1620],{"class":149}," void",[143,1622,1623],{"class":299}," }):",[143,1625,1620],{"class":149},": Emits before the dialog opens.",[284,1628,1629],{},[287,1630,1631,1634,1635,1641,1642,1651,1652,214],{},[137,1632,1633],{},"event.stop()"," keeps it closed. The pending ",[137,1636,1637,1639],{"className":139,"language":140,"style":141},[143,1638,199],{"class":169},[143,1640,173],{"class":145}," then resolves with ",[137,1643,1644,1646,1649],{"className":139,"language":140,"style":141},[143,1645,342],{"class":299},[143,1647,1648],{"class":338},"stopped",[143,1650,342],{"class":299}," instead of ",[137,1653,1654,1656,1658],{"className":139,"language":140,"style":141},[143,1655,342],{"class":299},[143,1657,1073],{"class":338},[143,1659,342],{"class":299},[287,1661,1662,1681],{},[137,1663,1664,1666,1668,1670,1672,1674,1676,1679],{"className":139,"language":140,"style":141},[143,1665,583],{"class":299},[143,1667,1588],{"class":1587},[143,1669,332],{"class":299},[143,1671,335],{"class":299},[143,1673,1073],{"class":338},[143,1675,342],{"class":299},[143,1677,1678],{"class":299},"):",[143,1680,1620],{"class":149},": Emits after the dialog opened and its transitions ended.",[287,1683,1684,1721,1722,1724,1725,214,1737],{},[137,1685,1686,1688,1690,1692,1694,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719],{"className":139,"language":140,"style":141},[143,1687,583],{"class":299},[143,1689,1588],{"class":1587},[143,1691,332],{"class":299},[143,1693,335],{"class":299},[143,1695,1696],{"class":338},"beforeClose",[143,1698,342],{"class":299},[143,1700,534],{"class":299},[143,1702,1602],{"class":1587},[143,1704,332],{"class":299},[143,1706,528],{"class":299},[143,1708,1609],{"class":302},[143,1710,332],{"class":299},[143,1712,1614],{"class":299},[143,1714,1617],{"class":423},[143,1716,1620],{"class":149},[143,1718,1623],{"class":299},[143,1720,1620],{"class":149},": Emits before the dialog closes, also on ",[137,1723,224],{}," and on a click outside with ",[137,1726,1727,1729,1731,1733,1735],{"className":139,"language":140,"style":141},[143,1728,433],{"class":145},[143,1730,427],{"class":299},[143,1732,430],{"class":299},[143,1734,638],{"class":338},[143,1736,430],{"class":299},[284,1738,1739,1766,1775],{},[287,1740,1741,1743,1744,1641,1750,1651,1758,214],{},[137,1742,1633],{}," keeps it open. The pending ",[137,1745,1746,1748],{"className":139,"language":140,"style":141},[143,1747,206],{"class":169},[143,1749,173],{"class":145},[137,1751,1752,1754,1756],{"className":139,"language":140,"style":141},[143,1753,342],{"class":299},[143,1755,1648],{"class":338},[143,1757,342],{"class":299},[137,1759,1760,1762,1764],{"className":139,"language":140,"style":141},[143,1761,342],{"class":299},[143,1763,1078],{"class":338},[143,1765,342],{"class":299},[287,1767,1768,1769,1771,1772,1774],{},"On ",[137,1770,224],{}," the browser lets the page keep the dialog open only after the user interacted with the page, and not for a second ",[137,1773,224],{}," in a row: then the dialog closes anyway.",[287,1776,1777,1778,1796,1797,1801],{},"A ",[137,1779,1780,1782,1784,1786,1788,1790,1792,1794],{"className":295,"language":296,"style":141},[143,1781,146],{"class":299},[143,1783,1029],{"class":302},[143,1785,1032],{"class":423},[143,1787,427],{"class":299},[143,1789,430],{"class":299},[143,1791,420],{"class":338},[143,1793,430],{"class":299},[143,1795,153],{"class":299}," closes the dialog without asking, so ",[137,1798,1799],{"className":139,"language":140,"style":141},[143,1800,1696],{"class":145}," is not emitted for it.",[287,1803,1804,1822,1823,1829,1830,214],{},[137,1805,1806,1808,1810,1812,1814,1816,1818,1820],{"className":139,"language":140,"style":141},[143,1807,583],{"class":299},[143,1809,1588],{"class":1587},[143,1811,332],{"class":299},[143,1813,335],{"class":299},[143,1815,1078],{"class":338},[143,1817,342],{"class":299},[143,1819,1678],{"class":299},[143,1821,1620],{"class":149},": Emits after the dialog closed and its transitions ended. A dialog opened by ",[137,1824,1825,1827],{"className":139,"language":140,"style":141},[143,1826,255],{"class":169},[143,1828,173],{"class":145}," is unmounted right after, unless it has ",[137,1831,1832],{"className":139,"language":140,"style":141},[143,1833,1834],{"class":145},"keepAlive",[287,1836,1837,1865,1866,1868,1869,1871,1872,1884,1885,1889],{},[137,1838,1839,1841,1843,1845,1847,1850,1852,1854,1856,1858,1861,1863],{"className":139,"language":140,"style":141},[143,1840,583],{"class":299},[143,1842,1588],{"class":1587},[143,1844,332],{"class":299},[143,1846,335],{"class":299},[143,1848,1849],{"class":338},"cancel",[143,1851,342],{"class":299},[143,1853,534],{"class":299},[143,1855,1602],{"class":1587},[143,1857,332],{"class":299},[143,1859,1860],{"class":149}," Event",[143,1862,1678],{"class":299},[143,1864,1620],{"class":149},": The native ",[137,1867,1849],{}," event of a close request, such as ",[137,1870,224],{},". ",[137,1873,1874,1877,1879,1882],{"className":139,"language":140,"style":141},[143,1875,1876],{"class":145},"event",[143,1878,214],{"class":299},[143,1880,1881],{"class":169},"preventDefault",[143,1883,173],{"class":145}," keeps the dialog open without asking ",[137,1886,1887],{"className":139,"language":140,"style":141},[143,1888,1696],{"class":145},", within the same limits as above.",[287,1891,1892,1865,1918,1920,1921,1923],{},[137,1893,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916],{"className":139,"language":140,"style":141},[143,1895,583],{"class":299},[143,1897,1588],{"class":1587},[143,1899,332],{"class":299},[143,1901,335],{"class":299},[143,1903,206],{"class":338},[143,1905,342],{"class":299},[143,1907,534],{"class":299},[143,1909,1602],{"class":1587},[143,1911,332],{"class":299},[143,1913,1860],{"class":149},[143,1915,1678],{"class":299},[143,1917,1620],{"class":149},[137,1919,206],{}," event, fired once the ",[137,1922,163],{}," closed and before its transitions end.",[134,1925,1926,1927,1934,1935,1953,1954,332],{},"Read the ",[156,1928,1931],{"href":1929,"rel":1930},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLDialogElement\u002FreturnValue",[160],[137,1932,1933],{},"returnValue"," of a ",[137,1936,1937,1939,1941,1943,1945,1947,1949,1951],{"className":295,"language":296,"style":141},[143,1938,146],{"class":299},[143,1940,1029],{"class":302},[143,1942,1032],{"class":423},[143,1944,427],{"class":299},[143,1946,430],{"class":299},[143,1948,420],{"class":338},[143,1950,430],{"class":299},[143,1952,153],{"class":299}," in ",[137,1955,1956],{"className":139,"language":140,"style":141},[143,1957,206],{"class":145},[394,1959,1961],{"className":139,"code":1960,"language":140,"meta":141,"style":141},"useModal({\n  component: VueFinalDialog,\n  attrs: {\n    onClose: (event: Event) => console.log((event.target as HTMLDialogElement).returnValue),\n  },\n})\n",[137,1962,1963,1971,1981,1989,2041,2045],{"__ignoreMap":141},[143,1964,1965,1967,1969],{"class":402,"line":403},[143,1966,255],{"class":169},[143,1968,583],{"class":145},[143,1970,586],{"class":299},[143,1972,1973,1975,1977,1979],{"class":402,"line":414},[143,1974,591],{"class":302},[143,1976,332],{"class":299},[143,1978,537],{"class":145},[143,1980,598],{"class":299},[143,1982,1983,1985,1987],{"class":402,"line":440},[143,1984,603],{"class":302},[143,1986,332],{"class":299},[143,1988,608],{"class":299},[143,1990,1991,1994,1996,1999,2001,2003,2005,2008,2010,2013,2015,2018,2021,2023,2026,2029,2032,2034,2036,2039],{"class":402,"line":463},[143,1992,1993],{"class":169},"    onClose",[143,1995,332],{"class":299},[143,1997,1998],{"class":299}," (",[143,2000,1876],{"class":1587},[143,2002,332],{"class":299},[143,2004,1860],{"class":149},[143,2006,2007],{"class":299},")",[143,2009,1617],{"class":423},[143,2011,2012],{"class":145}," console",[143,2014,214],{"class":299},[143,2016,2017],{"class":169},"log",[143,2019,2020],{"class":145},"((event",[143,2022,214],{"class":299},[143,2024,2025],{"class":145},"target ",[143,2027,2028],{"class":524},"as",[143,2030,2031],{"class":149}," HTMLDialogElement",[143,2033,2007],{"class":145},[143,2035,214],{"class":299},[143,2037,2038],{"class":145},"returnValue)",[143,2040,598],{"class":299},[143,2042,2043],{"class":402,"line":473},[143,2044,665],{"class":299},[143,2046,2047,2049],{"class":402,"line":611},[143,2048,575],{"class":299},[143,2050,697],{"class":145},[236,2052,2054],{"id":2053},"slots","Slots",[284,2056,2057],{},[287,2058,2059,2060,2064,2065,2069],{},"The ",[137,2061,2062],{"className":139,"language":140,"style":141},[143,2063,907],{"class":524}," slot renders the content of the dialog. Its ",[137,2066,2067],{"className":139,"language":140,"style":141},[143,2068,206],{"class":145}," closes the dialog.",[236,2071,383],{"id":2072},"server-side-rendering",[134,2074,2075,2076,2078,2079,2085,2086,214],{},"The dialog is rendered closed on the server, with its content, and opens once the app has hydrated: an open ",[137,2077,163],{}," in the server HTML could not become a modal one. ",[137,2080,2081,2083],{"className":139,"language":140,"style":141},[143,2082,199],{"class":169},[143,2084,173],{"class":145}," resolves on the server right away, like for ",[137,2087,2088,2090,2092],{"className":139,"language":140,"style":141},[143,2089,146],{"class":145},[143,2091,191],{"class":149},[143,2093,153],{"class":145},[236,2095,319,2097],{"id":2096},"next-to-vuefinalmodal",[137,2098,50],{},[134,2100,2101,2102,2110,2111,2119,2120,2124,2125,2127,2128,2130,2131,2135,2136,177,2140,2142,2143,367,2151,2159],{},"A modal dialog makes everything outside it inert, so a ",[137,2103,2104,2106,2108],{"className":139,"language":140,"style":141},[143,2105,146],{"class":145},[143,2107,191],{"class":149},[143,2109,153],{"class":145}," opened while a modal ",[137,2112,2113,2115,2117],{"className":139,"language":140,"style":141},[143,2114,146],{"class":145},[143,2116,150],{"class":149},[143,2118,153],{"class":145}," is open is rendered inside the topmost dialog instead of its ",[137,2121,2122],{"className":139,"language":140,"style":141},[143,2123,372],{"class":145}," target. It can be used there, and ",[137,2126,224],{}," closes it alone: the dialog closes on the next ",[137,2129,224],{},". With ",[156,2132,2134],{"href":2133},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#esctoclose","escToClose"," ",[137,2137,2138],{"className":139,"language":140,"style":141},[143,2139,808],{"class":353},[137,2141,224],{}," closes neither. A ",[137,2144,2145,2147,2149],{"className":139,"language":140,"style":141},[143,2146,146],{"class":145},[143,2148,191],{"class":149},[143,2150,153],{"class":145},[137,2152,2153,2155,2157],{"className":139,"language":140,"style":141},[143,2154,372],{"class":149},[143,2156,332],{"class":299},[143,2158,354],{"class":353}," stays where it is rendered.",[284,2161,2162,2167,2177],{},[287,2163,2164,2166],{},[137,2165,224],{}," reaches the modal that has the focus, which its focus trap moves in once it has opened.",[287,2168,2169,2170,2172,2173,2176],{},"The browser keeps the dialog open on ",[137,2171,224],{}," only after the user interacted with the page, as for ",[156,2174,1696],{"href":2175},"#events",". A modal opened by a click, such as a confirm, always is.",[287,2178,2179,2180,2183],{},"While the dialog runs a ",[137,2181,2182],{},"transform"," transition, the modal inside it is laid out within the dialog until the transition ends.",[134,2185,2186,2187,2195,2196,2198],{},"Another ",[137,2188,2189,2191,2193],{"className":139,"language":140,"style":141},[143,2190,146],{"class":145},[143,2192,150],{"class":149},[143,2194,153],{"class":145}," opened on top of a dialog needs none of this: the browser stacks dialogs in the order they opened, only the topmost one can be used, and ",[137,2197,224],{}," closes one at a time.",[236,2200,2202],{"id":2201},"your-own-dialog-component","Your own dialog component",[134,2204,2205,2213,2214,2216,2217,2223],{},[137,2206,2207,2209,2211],{"className":139,"language":140,"style":141},[143,2208,146],{"class":145},[143,2210,150],{"class":149},[143,2212,153],{"class":145}," is built on ",[156,2215,72],{"href":73},", which you can use to build your own modal component that ",[137,2218,2219,2221],{"className":139,"language":140,"style":141},[143,2220,255],{"class":169},[143,2222,173],{"class":145}," can open and await.",[2225,2226,2227],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":141,"searchDepth":414,"depth":414,"links":2229},[2230,2231,2232,2239,2246,2247,2248,2249,2251],{"id":238,"depth":414,"text":239},{"id":391,"depth":414,"text":392},{"id":506,"depth":414,"text":507,"children":2233},[2234,2236,2238],{"id":511,"depth":440,"text":2235},"With useModal()",{"id":719,"depth":440,"text":2237},"With v-model",{"id":1060,"depth":440,"text":1061},{"id":1260,"depth":414,"text":1261,"children":2240},[2241,2242,2243,2244,2245],{"id":1264,"depth":440,"text":1265},{"id":1309,"depth":440,"text":1310},{"id":348,"depth":440,"text":348},{"id":1443,"depth":440,"text":1444},{"id":1532,"depth":440,"text":1533},{"id":1575,"depth":414,"text":1576},{"id":2053,"depth":414,"text":2054},{"id":2072,"depth":414,"text":383},{"id":2096,"depth":414,"text":2250},"Next to \u003CVueFinalModal>",{"id":2201,"depth":414,"text":2202},"A headless modal built on the native \u003Cdialog> element.","md",null,{},{"title":54,"description":2252},"LE50tbNBZD_y27Xa4HWWhpansT8F5fma5n-jGnL5bLk",[2259,2260],{"title":50,"path":51,"stem":52,"description":141,"children":-1},{"title":64,"path":65,"stem":66,"description":2261,"children":-1},"A composable function to define a dynamic modal.",1791989780954]