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