[{"data":1,"prerenderedAt":1203},["ShallowReactive",2],{"navigation_docs":3,"-use-cases-modal-in-dialog":128,"-use-cases-modal-in-dialog-surround":1198},[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":97,"body":130,"description":1190,"extension":1191,"links":1192,"meta":1193,"navigation":307,"path":98,"seo":1196,"stem":99,"__hash__":1197},"docs\u002F4.use-cases\u002F13.modal-in-dialog.md",{"type":131,"value":132,"toc":1187},"minimark",[133,193,210,220,225,1183],[134,135,136,137,155,156,169,170,179,180,188,189,192],"p",{},"A modal ",[138,139,143,148,152],"code",{"className":140,"language":141,"style":142},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","html","",[144,145,147],"span",{"class":146},"sMK4o","\u003C",[144,149,151],{"class":150},"swJcz","dialog",[144,153,154],{"class":146},">"," makes everything outside it inert, so a ",[138,157,160,163,167],{"className":158,"language":159,"style":142},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts",[144,161,147],{"class":162},"sTEyZ",[144,164,166],{"class":165},"sBMFI","VueFinalModal",[144,168,154],{"class":162}," teleported to the ",[138,171,172,174,177],{"className":140,"language":141,"style":142},[144,173,147],{"class":146},[144,175,176],{"class":150},"body",[144,178,154],{"class":146}," could not be used on top of it. A ",[138,181,182,184,186],{"className":158,"language":159,"style":142},[144,183,147],{"class":162},[144,185,166],{"class":165},[144,187,154],{"class":162}," that opens while a ",[190,191,54],"a",{"href":55}," is open is rendered inside the dialog instead, so the confirm below just works:",[194,195,196,203],"ul",{},[197,198,199,200,202],"li",{},"Change the name and click Discard: the confirm from ",[190,201,89],{"href":90}," opens on top of the dialog. Confirm drops the change, and Save keeps it.",[197,204,205,206,209],{},"Press ",[138,207,208],{},"Esc",": only the confirm closes. Press it again to close the dialog.",[134,211,212,213,219],{},"See ",[190,214,216,217],{"href":215},"\u002Fapi\u002Fcomponents\u002Fvue-final-dialog#next-to-vuefinalmodal","Next to ",[138,218,50],{}," for the details.",[221,222,224],"h2",{"id":223},"preview","Preview",[226,227,228,231],"code-preview",{},[229,230],"modal-in-dialog-preview",{},[232,233,234],"template",{"v-slot:code":142},[235,236,241],"pre",{"className":237,"code":238,"filename":239,"language":240,"meta":142,"style":142},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003Cscript setup lang=\"ts\">\n  import { VueFinalDialog } from 'vue-final-modal'\n\n  const initialName = 'Hunter'\n  const name = ref(initialName)\n  const draft = ref('')\n  const show = ref(false)\n  const confirm = useConfirm()\n\n  function edit() {\n    draft.value = name.value\n    show.value = true\n  }\n\n  function save() {\n    name.value = draft.value\n    show.value = false\n  }\n\n  async function discard() {\n    if (draft.value === name.value || await confirm('Discard your changes?'))\n      show.value = false\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003Cdiv class=\"flex flex-wrap items-center justify-center gap-3\">\n      \u003CVButton @click=\"edit\">\n        Edit Profile\n      \u003C\u002FVButton>\n      \u003Coutput class=\"inline-flex items-center gap-1.5 rounded-md border border-default px-2 py-1 text-sm text-muted\">\n        Name: \u003Cspan class=\"font-medium text-highlighted\">{{ name }}\u003C\u002Fspan>\n      \u003C\u002Foutput>\n      \u003Cbutton type=\"button\" class=\"rounded-md border border-default px-2 py-1 text-sm text-muted hover:bg-elevated\u002F50 hover:text-highlighted disabled:pointer-events-none disabled:opacity-50\" :disabled=\"name === initialName\" @click=\"name = initialName\">\n        Reset\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003CVueFinalDialog\n      v-model=\"show\"\n      aria-labelledby=\"modal-in-dialog-title\"\n      class=\"m-auto w-[calc(100%-2rem)] max-w-md p-4 rounded-lg border bg-white text-gray-900 dark:bg-gray-900 dark:text-white dark:border-gray-700 backdrop:bg-black\u002F50\"\n    >\n      \u003Cdiv class=\"flex flex-col gap-2\">\n        \u003Ch2 id=\"modal-in-dialog-title\" class=\"text-xl\">\n          Edit profile\n        \u003C\u002Fh2>\n        \u003Cinput v-model=\"draft\" aria-label=\"Name\" class=\"px-2 py-1 border rounded-lg bg-transparent\">\n        \u003Cdiv class=\"flex justify-end gap-2\">\n          \u003Cbutton type=\"button\" class=\"px-2 border rounded-lg\" @click=\"discard\">\n            Discard\n          \u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" class=\"px-2 border rounded-lg\" @click=\"save\">\n            Save\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FVueFinalDialog>\n  \u003C\u002Ftemplate>\n","Preview.vue","vue",[138,242,243,274,302,309,327,344,365,385,401,406,421,444,459,465,470,482,501,515,520,525,541,588,602,607,617,622,631,654,677,683,693,714,747,756,811,817,826,836,841,849,865,880,895,901,921,953,959,969,1013,1033,1075,1081,1091,1131,1137,1146,1155,1164,1174],{"__ignoreMap":142},[144,244,247,250,253,257,260,263,266,269,271],{"class":245,"line":246},"line",1,[144,248,249],{"class":146},"  \u003C",[144,251,252],{"class":150},"script",[144,254,256],{"class":255},"spNyl"," setup",[144,258,259],{"class":255}," lang",[144,261,262],{"class":146},"=",[144,264,265],{"class":146},"\"",[144,267,159],{"class":268},"sfazB",[144,270,265],{"class":146},[144,272,273],{"class":146},">\n",[144,275,277,281,284,287,290,293,296,299],{"class":245,"line":276},2,[144,278,280],{"class":279},"s7zQu","  import",[144,282,283],{"class":146}," {",[144,285,286],{"class":162}," VueFinalDialog",[144,288,289],{"class":146}," }",[144,291,292],{"class":279}," from",[144,294,295],{"class":146}," '",[144,297,298],{"class":268},"vue-final-modal",[144,300,301],{"class":146},"'\n",[144,303,305],{"class":245,"line":304},3,[144,306,308],{"emptyLinePlaceholder":307},true,"\n",[144,310,312,315,318,320,322,325],{"class":245,"line":311},4,[144,313,314],{"class":255},"  const",[144,316,317],{"class":162}," initialName ",[144,319,262],{"class":146},[144,321,295],{"class":146},[144,323,324],{"class":268},"Hunter",[144,326,301],{"class":146},[144,328,330,332,335,337,341],{"class":245,"line":329},5,[144,331,314],{"class":255},[144,333,334],{"class":162}," name ",[144,336,262],{"class":146},[144,338,340],{"class":339},"s2Zo4"," ref",[144,342,343],{"class":162},"(initialName)\n",[144,345,347,349,352,354,356,359,362],{"class":245,"line":346},6,[144,348,314],{"class":255},[144,350,351],{"class":162}," draft ",[144,353,262],{"class":146},[144,355,340],{"class":339},[144,357,358],{"class":162},"(",[144,360,361],{"class":146},"''",[144,363,364],{"class":162},")\n",[144,366,368,370,373,375,377,379,383],{"class":245,"line":367},7,[144,369,314],{"class":255},[144,371,372],{"class":162}," show ",[144,374,262],{"class":146},[144,376,340],{"class":339},[144,378,358],{"class":162},[144,380,382],{"class":381},"sfNiH","false",[144,384,364],{"class":162},[144,386,388,390,393,395,398],{"class":245,"line":387},8,[144,389,314],{"class":255},[144,391,392],{"class":162}," confirm ",[144,394,262],{"class":146},[144,396,397],{"class":339}," useConfirm",[144,399,400],{"class":162},"()\n",[144,402,404],{"class":245,"line":403},9,[144,405,308],{"emptyLinePlaceholder":307},[144,407,409,412,415,418],{"class":245,"line":408},10,[144,410,411],{"class":255},"  function",[144,413,414],{"class":339}," edit",[144,416,417],{"class":146},"()",[144,419,420],{"class":146}," {\n",[144,422,424,427,430,433,436,439,441],{"class":245,"line":423},11,[144,425,426],{"class":162},"    draft",[144,428,429],{"class":146},".",[144,431,432],{"class":162},"value",[144,434,435],{"class":146}," =",[144,437,438],{"class":162}," name",[144,440,429],{"class":146},[144,442,443],{"class":162},"value\n",[144,445,447,450,452,454,456],{"class":245,"line":446},12,[144,448,449],{"class":162},"    show",[144,451,429],{"class":146},[144,453,432],{"class":162},[144,455,435],{"class":146},[144,457,458],{"class":381}," true\n",[144,460,462],{"class":245,"line":461},13,[144,463,464],{"class":146},"  }\n",[144,466,468],{"class":245,"line":467},14,[144,469,308],{"emptyLinePlaceholder":307},[144,471,473,475,478,480],{"class":245,"line":472},15,[144,474,411],{"class":255},[144,476,477],{"class":339}," save",[144,479,417],{"class":146},[144,481,420],{"class":146},[144,483,485,488,490,492,494,497,499],{"class":245,"line":484},16,[144,486,487],{"class":162},"    name",[144,489,429],{"class":146},[144,491,432],{"class":162},[144,493,435],{"class":146},[144,495,496],{"class":162}," draft",[144,498,429],{"class":146},[144,500,443],{"class":162},[144,502,504,506,508,510,512],{"class":245,"line":503},17,[144,505,449],{"class":162},[144,507,429],{"class":146},[144,509,432],{"class":162},[144,511,435],{"class":146},[144,513,514],{"class":381}," false\n",[144,516,518],{"class":245,"line":517},18,[144,519,464],{"class":146},[144,521,523],{"class":245,"line":522},19,[144,524,308],{"emptyLinePlaceholder":307},[144,526,528,531,534,537,539],{"class":245,"line":527},20,[144,529,530],{"class":255},"  async",[144,532,533],{"class":255}," function",[144,535,536],{"class":339}," discard",[144,538,417],{"class":146},[144,540,420],{"class":146},[144,542,544,547,550,553,555,557,560,562,564,566,569,572,575,577,580,583,585],{"class":245,"line":543},21,[144,545,546],{"class":279},"    if",[144,548,549],{"class":150}," (",[144,551,552],{"class":162},"draft",[144,554,429],{"class":146},[144,556,432],{"class":162},[144,558,559],{"class":146}," ===",[144,561,438],{"class":162},[144,563,429],{"class":146},[144,565,432],{"class":162},[144,567,568],{"class":146}," ||",[144,570,571],{"class":279}," await",[144,573,574],{"class":339}," confirm",[144,576,358],{"class":150},[144,578,579],{"class":146},"'",[144,581,582],{"class":268},"Discard your changes?",[144,584,579],{"class":146},[144,586,587],{"class":150},"))\n",[144,589,591,594,596,598,600],{"class":245,"line":590},22,[144,592,593],{"class":162},"      show",[144,595,429],{"class":146},[144,597,432],{"class":162},[144,599,435],{"class":146},[144,601,514],{"class":381},[144,603,605],{"class":245,"line":604},23,[144,606,464],{"class":146},[144,608,610,613,615],{"class":245,"line":609},24,[144,611,612],{"class":146},"  \u003C\u002F",[144,614,252],{"class":150},[144,616,273],{"class":146},[144,618,620],{"class":245,"line":619},25,[144,621,308],{"emptyLinePlaceholder":307},[144,623,625,627,629],{"class":245,"line":624},26,[144,626,249],{"class":146},[144,628,232],{"class":150},[144,630,273],{"class":146},[144,632,634,637,640,643,645,647,650,652],{"class":245,"line":633},27,[144,635,636],{"class":146},"    \u003C",[144,638,639],{"class":150},"div",[144,641,642],{"class":255}," class",[144,644,262],{"class":146},[144,646,265],{"class":146},[144,648,649],{"class":268},"flex flex-wrap items-center justify-center gap-3",[144,651,265],{"class":146},[144,653,273],{"class":146},[144,655,657,660,663,666,668,670,673,675],{"class":245,"line":656},28,[144,658,659],{"class":146},"      \u003C",[144,661,662],{"class":150},"VButton",[144,664,665],{"class":255}," @click",[144,667,262],{"class":146},[144,669,265],{"class":146},[144,671,672],{"class":268},"edit",[144,674,265],{"class":146},[144,676,273],{"class":146},[144,678,680],{"class":245,"line":679},29,[144,681,682],{"class":162},"        Edit Profile\n",[144,684,686,689,691],{"class":245,"line":685},30,[144,687,688],{"class":146},"      \u003C\u002F",[144,690,662],{"class":150},[144,692,273],{"class":146},[144,694,696,698,701,703,705,707,710,712],{"class":245,"line":695},31,[144,697,659],{"class":146},[144,699,700],{"class":150},"output",[144,702,642],{"class":255},[144,704,262],{"class":146},[144,706,265],{"class":146},[144,708,709],{"class":268},"inline-flex items-center gap-1.5 rounded-md border border-default px-2 py-1 text-sm text-muted",[144,711,265],{"class":146},[144,713,273],{"class":146},[144,715,717,720,722,724,726,728,730,733,735,737,740,743,745],{"class":245,"line":716},32,[144,718,719],{"class":162},"        Name: ",[144,721,147],{"class":146},[144,723,144],{"class":150},[144,725,642],{"class":255},[144,727,262],{"class":146},[144,729,265],{"class":146},[144,731,732],{"class":268},"font-medium text-highlighted",[144,734,265],{"class":146},[144,736,154],{"class":146},[144,738,739],{"class":162},"{{ name }}",[144,741,742],{"class":146},"\u003C\u002F",[144,744,144],{"class":150},[144,746,273],{"class":146},[144,748,750,752,754],{"class":245,"line":749},33,[144,751,688],{"class":146},[144,753,700],{"class":150},[144,755,273],{"class":146},[144,757,759,761,764,767,769,771,773,775,777,779,781,784,786,789,791,793,796,798,800,802,804,807,809],{"class":245,"line":758},34,[144,760,659],{"class":146},[144,762,763],{"class":150},"button",[144,765,766],{"class":255}," type",[144,768,262],{"class":146},[144,770,265],{"class":146},[144,772,763],{"class":268},[144,774,265],{"class":146},[144,776,642],{"class":255},[144,778,262],{"class":146},[144,780,265],{"class":146},[144,782,783],{"class":268},"rounded-md border border-default px-2 py-1 text-sm text-muted hover:bg-elevated\u002F50 hover:text-highlighted disabled:pointer-events-none disabled:opacity-50",[144,785,265],{"class":146},[144,787,788],{"class":255}," :disabled",[144,790,262],{"class":146},[144,792,265],{"class":146},[144,794,795],{"class":268},"name === initialName",[144,797,265],{"class":146},[144,799,665],{"class":255},[144,801,262],{"class":146},[144,803,265],{"class":146},[144,805,806],{"class":268},"name = initialName",[144,808,265],{"class":146},[144,810,273],{"class":146},[144,812,814],{"class":245,"line":813},35,[144,815,816],{"class":162},"        Reset\n",[144,818,820,822,824],{"class":245,"line":819},36,[144,821,688],{"class":146},[144,823,763],{"class":150},[144,825,273],{"class":146},[144,827,829,832,834],{"class":245,"line":828},37,[144,830,831],{"class":146},"    \u003C\u002F",[144,833,639],{"class":150},[144,835,273],{"class":146},[144,837,839],{"class":245,"line":838},38,[144,840,308],{"emptyLinePlaceholder":307},[144,842,844,846],{"class":245,"line":843},39,[144,845,636],{"class":146},[144,847,848],{"class":150},"VueFinalDialog\n",[144,850,852,855,857,859,862],{"class":245,"line":851},40,[144,853,854],{"class":255},"      v-model",[144,856,262],{"class":146},[144,858,265],{"class":146},[144,860,861],{"class":268},"show",[144,863,864],{"class":146},"\"\n",[144,866,868,871,873,875,878],{"class":245,"line":867},41,[144,869,870],{"class":255},"      aria-labelledby",[144,872,262],{"class":146},[144,874,265],{"class":146},[144,876,877],{"class":268},"modal-in-dialog-title",[144,879,864],{"class":146},[144,881,883,886,888,890,893],{"class":245,"line":882},42,[144,884,885],{"class":255},"      class",[144,887,262],{"class":146},[144,889,265],{"class":146},[144,891,892],{"class":268},"m-auto w-[calc(100%-2rem)] max-w-md p-4 rounded-lg border bg-white text-gray-900 dark:bg-gray-900 dark:text-white dark:border-gray-700 backdrop:bg-black\u002F50",[144,894,864],{"class":146},[144,896,898],{"class":245,"line":897},43,[144,899,900],{"class":146},"    >\n",[144,902,904,906,908,910,912,914,917,919],{"class":245,"line":903},44,[144,905,659],{"class":146},[144,907,639],{"class":150},[144,909,642],{"class":255},[144,911,262],{"class":146},[144,913,265],{"class":146},[144,915,916],{"class":268},"flex flex-col gap-2",[144,918,265],{"class":146},[144,920,273],{"class":146},[144,922,924,927,929,932,934,936,938,940,942,944,946,949,951],{"class":245,"line":923},45,[144,925,926],{"class":146},"        \u003C",[144,928,221],{"class":150},[144,930,931],{"class":255}," id",[144,933,262],{"class":146},[144,935,265],{"class":146},[144,937,877],{"class":268},[144,939,265],{"class":146},[144,941,642],{"class":255},[144,943,262],{"class":146},[144,945,265],{"class":146},[144,947,948],{"class":268},"text-xl",[144,950,265],{"class":146},[144,952,273],{"class":146},[144,954,956],{"class":245,"line":955},46,[144,957,958],{"class":162},"          Edit profile\n",[144,960,962,965,967],{"class":245,"line":961},47,[144,963,964],{"class":146},"        \u003C\u002F",[144,966,221],{"class":150},[144,968,273],{"class":146},[144,970,972,974,977,980,982,984,986,988,991,993,995,998,1000,1002,1004,1006,1009,1011],{"class":245,"line":971},48,[144,973,926],{"class":146},[144,975,976],{"class":150},"input",[144,978,979],{"class":255}," v-model",[144,981,262],{"class":146},[144,983,265],{"class":146},[144,985,552],{"class":268},[144,987,265],{"class":146},[144,989,990],{"class":255}," aria-label",[144,992,262],{"class":146},[144,994,265],{"class":146},[144,996,997],{"class":268},"Name",[144,999,265],{"class":146},[144,1001,642],{"class":255},[144,1003,262],{"class":146},[144,1005,265],{"class":146},[144,1007,1008],{"class":268},"px-2 py-1 border rounded-lg bg-transparent",[144,1010,265],{"class":146},[144,1012,273],{"class":146},[144,1014,1016,1018,1020,1022,1024,1026,1029,1031],{"class":245,"line":1015},49,[144,1017,926],{"class":146},[144,1019,639],{"class":150},[144,1021,642],{"class":255},[144,1023,262],{"class":146},[144,1025,265],{"class":146},[144,1027,1028],{"class":268},"flex justify-end gap-2",[144,1030,265],{"class":146},[144,1032,273],{"class":146},[144,1034,1036,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1060,1062,1064,1066,1068,1071,1073],{"class":245,"line":1035},50,[144,1037,1038],{"class":146},"          \u003C",[144,1040,763],{"class":150},[144,1042,766],{"class":255},[144,1044,262],{"class":146},[144,1046,265],{"class":146},[144,1048,763],{"class":268},[144,1050,265],{"class":146},[144,1052,642],{"class":255},[144,1054,262],{"class":146},[144,1056,265],{"class":146},[144,1058,1059],{"class":268},"px-2 border rounded-lg",[144,1061,265],{"class":146},[144,1063,665],{"class":255},[144,1065,262],{"class":146},[144,1067,265],{"class":146},[144,1069,1070],{"class":268},"discard",[144,1072,265],{"class":146},[144,1074,273],{"class":146},[144,1076,1078],{"class":245,"line":1077},51,[144,1079,1080],{"class":162},"            Discard\n",[144,1082,1084,1087,1089],{"class":245,"line":1083},52,[144,1085,1086],{"class":146},"          \u003C\u002F",[144,1088,763],{"class":150},[144,1090,273],{"class":146},[144,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1127,1129],{"class":245,"line":1093},53,[144,1095,1038],{"class":146},[144,1097,763],{"class":150},[144,1099,766],{"class":255},[144,1101,262],{"class":146},[144,1103,265],{"class":146},[144,1105,763],{"class":268},[144,1107,265],{"class":146},[144,1109,642],{"class":255},[144,1111,262],{"class":146},[144,1113,265],{"class":146},[144,1115,1059],{"class":268},[144,1117,265],{"class":146},[144,1119,665],{"class":255},[144,1121,262],{"class":146},[144,1123,265],{"class":146},[144,1125,1126],{"class":268},"save",[144,1128,265],{"class":146},[144,1130,273],{"class":146},[144,1132,1134],{"class":245,"line":1133},54,[144,1135,1136],{"class":162},"            Save\n",[144,1138,1140,1142,1144],{"class":245,"line":1139},55,[144,1141,1086],{"class":146},[144,1143,763],{"class":150},[144,1145,273],{"class":146},[144,1147,1149,1151,1153],{"class":245,"line":1148},56,[144,1150,964],{"class":146},[144,1152,639],{"class":150},[144,1154,273],{"class":146},[144,1156,1158,1160,1162],{"class":245,"line":1157},57,[144,1159,688],{"class":146},[144,1161,639],{"class":150},[144,1163,273],{"class":146},[144,1165,1167,1169,1172],{"class":245,"line":1166},58,[144,1168,831],{"class":146},[144,1170,1171],{"class":150},"VueFinalDialog",[144,1173,273],{"class":146},[144,1175,1177,1179,1181],{"class":245,"line":1176},59,[144,1178,612],{"class":146},[144,1180,232],{"class":150},[144,1182,273],{"class":146},[1184,1185,1186],"style",{},"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 .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 .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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":142,"searchDepth":276,"depth":276,"links":1188},[1189],{"id":223,"depth":276,"text":224},"Open a \u003CVueFinalModal> confirm from inside a \u003CVueFinalDialog>.","md",null,{"head":1194},{"title":1195},"Modal in a Dialog | Examples",{"title":97,"description":1190},"tBRq2yonb-k_26XdgHXJIBNJ8VHlmVYASJeV9ffAd7E",[1199,1201],{"title":93,"path":94,"stem":95,"description":1200,"children":-1},"A question on the native \u003Cdialog> with \u003CVueFinalDialog>, a form with method=\"dialog\" and a CSS fade.",{"title":101,"path":102,"stem":103,"description":1202,"children":-1},"Create a \u003CModalConfirm> component with \u003CVueFinalModal> and TailwindCSS.",1791989778366]