[{"data":1,"prerenderedAt":1610},["ShallowReactive",2],{"navigation_docs":3,"-use-cases-modal-await-confirm":128,"-use-cases-modal-await-confirm-surround":1605},[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":89,"body":130,"description":1597,"extension":1598,"links":1599,"meta":1600,"navigation":344,"path":90,"seo":1603,"stem":91,"__hash__":1604},"docs\u002F4.use-cases\u002F11.modal-await-confirm.md",{"type":131,"value":132,"toc":1592},"minimark",[133,233,238,659,666,1588],[134,135,136,137,152,153,156,157,182,183,189,190,195,196,199,200,205,206,213,214,189,223,227,228,232],"p",{},"A ",[138,139,143,148],"code",{"className":140,"language":141,"style":142},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[144,145,147],"span",{"class":146},"s2Zo4","useConfirm",[144,149,151],{"class":150},"sTEyZ","()"," composable wraps ",[154,155,64],"a",{"href":65},", so ",[138,158,159,163,166,169,173,177,179],{"className":140,"language":141,"style":142},[144,160,162],{"class":161},"s7zQu","await",[144,164,165],{"class":146}," confirm",[144,167,168],{"class":150},"(",[144,170,172],{"class":171},"sMK4o","'",[144,174,176],{"class":175},"sfazB","Delete this item?",[144,178,172],{"class":171},[144,180,181],{"class":150},")"," gives ",[138,184,185],{"className":140,"language":141,"style":142},[144,186,188],{"class":187},"sfNiH","true"," or ",[138,191,192],{"className":140,"language":141,"style":142},[144,193,194],{"class":187},"false",". The answer comes once the modal has closed: Confirm, Cancel, ",[138,197,198],{},"Esc"," and a click outside all end in ",[138,201,202],{"className":140,"language":141,"style":142},[144,203,204],{"class":150},"closed",". ",[138,207,208,211],{"className":140,"language":141,"style":142},[144,209,210],{"class":146},"open",[144,212,151],{"class":150}," always resolves, with ",[138,215,216,218,221],{"className":140,"language":141,"style":142},[144,217,172],{"class":171},[144,219,220],{"class":175},"opened",[144,222,172],{"class":171},[154,224,226],{"href":225},"\u002Fapi\u002Fcomposables\u002Fuse-modal#what-open-and-close-resolve-with","a message",", so a confirm that did not open answers ",[138,229,230],{"className":140,"language":141,"style":142},[144,231,194],{"class":187},".",[234,235,237],"h2",{"id":236},"preview","Preview",[239,240,241,244],"code-preview",{},[242,243],"modal-await-confirm-preview",{},[245,246,247],"template",{"v-slot:code":142},[248,249,254],"pre",{"className":250,"code":251,"filename":252,"language":253,"meta":142,"style":142},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003Cscript setup lang=\"ts\">\n  const initialResult = 'not asked yet'\n  const confirm = useConfirm()\n  const result = ref(initialResult)\n\n  async function deleteItem() {\n    result.value = await confirm('Delete this item?') ? 'Deleted' : 'Kept'\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003Cdiv class=\"flex flex-wrap items-center justify-center gap-3\">\n      \u003CVButton @click=\"deleteItem\">\n        Delete Item\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        Result: \u003Cspan class=\"font-medium text-highlighted\">{{ result }}\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=\"result === initialResult\" @click=\"result = initialResult\">\n        Reset\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n","Preview.vue","vue",[138,255,256,287,307,323,339,346,363,413,419,429,434,443,466,489,495,505,526,561,570,625,631,640,650],{"__ignoreMap":142},[144,257,260,263,267,271,274,277,280,282,284],{"class":258,"line":259},"line",1,[144,261,262],{"class":171},"  \u003C",[144,264,266],{"class":265},"swJcz","script",[144,268,270],{"class":269},"spNyl"," setup",[144,272,273],{"class":269}," lang",[144,275,276],{"class":171},"=",[144,278,279],{"class":171},"\"",[144,281,141],{"class":175},[144,283,279],{"class":171},[144,285,286],{"class":171},">\n",[144,288,290,293,296,298,301,304],{"class":258,"line":289},2,[144,291,292],{"class":269},"  const",[144,294,295],{"class":150}," initialResult ",[144,297,276],{"class":171},[144,299,300],{"class":171}," '",[144,302,303],{"class":175},"not asked yet",[144,305,306],{"class":171},"'\n",[144,308,310,312,315,317,320],{"class":258,"line":309},3,[144,311,292],{"class":269},[144,313,314],{"class":150}," confirm ",[144,316,276],{"class":171},[144,318,319],{"class":146}," useConfirm",[144,321,322],{"class":150},"()\n",[144,324,326,328,331,333,336],{"class":258,"line":325},4,[144,327,292],{"class":269},[144,329,330],{"class":150}," result ",[144,332,276],{"class":171},[144,334,335],{"class":146}," ref",[144,337,338],{"class":150},"(initialResult)\n",[144,340,342],{"class":258,"line":341},5,[144,343,345],{"emptyLinePlaceholder":344},true,"\n",[144,347,349,352,355,358,360],{"class":258,"line":348},6,[144,350,351],{"class":269},"  async",[144,353,354],{"class":269}," function",[144,356,357],{"class":146}," deleteItem",[144,359,151],{"class":171},[144,361,362],{"class":171}," {\n",[144,364,366,369,371,374,377,380,382,384,386,388,390,393,396,398,401,403,406,408,411],{"class":258,"line":365},7,[144,367,368],{"class":150},"    result",[144,370,232],{"class":171},[144,372,373],{"class":150},"value",[144,375,376],{"class":171}," =",[144,378,379],{"class":161}," await",[144,381,165],{"class":146},[144,383,168],{"class":265},[144,385,172],{"class":171},[144,387,176],{"class":175},[144,389,172],{"class":171},[144,391,392],{"class":265},") ",[144,394,395],{"class":171},"?",[144,397,300],{"class":171},[144,399,400],{"class":175},"Deleted",[144,402,172],{"class":171},[144,404,405],{"class":171}," :",[144,407,300],{"class":171},[144,409,410],{"class":175},"Kept",[144,412,306],{"class":171},[144,414,416],{"class":258,"line":415},8,[144,417,418],{"class":171},"  }\n",[144,420,422,425,427],{"class":258,"line":421},9,[144,423,424],{"class":171},"  \u003C\u002F",[144,426,266],{"class":265},[144,428,286],{"class":171},[144,430,432],{"class":258,"line":431},10,[144,433,345],{"emptyLinePlaceholder":344},[144,435,437,439,441],{"class":258,"line":436},11,[144,438,262],{"class":171},[144,440,245],{"class":265},[144,442,286],{"class":171},[144,444,446,449,452,455,457,459,462,464],{"class":258,"line":445},12,[144,447,448],{"class":171},"    \u003C",[144,450,451],{"class":265},"div",[144,453,454],{"class":269}," class",[144,456,276],{"class":171},[144,458,279],{"class":171},[144,460,461],{"class":175},"flex flex-wrap items-center justify-center gap-3",[144,463,279],{"class":171},[144,465,286],{"class":171},[144,467,469,472,475,478,480,482,485,487],{"class":258,"line":468},13,[144,470,471],{"class":171},"      \u003C",[144,473,474],{"class":265},"VButton",[144,476,477],{"class":269}," @click",[144,479,276],{"class":171},[144,481,279],{"class":171},[144,483,484],{"class":175},"deleteItem",[144,486,279],{"class":171},[144,488,286],{"class":171},[144,490,492],{"class":258,"line":491},14,[144,493,494],{"class":150},"        Delete Item\n",[144,496,498,501,503],{"class":258,"line":497},15,[144,499,500],{"class":171},"      \u003C\u002F",[144,502,474],{"class":265},[144,504,286],{"class":171},[144,506,508,510,513,515,517,519,522,524],{"class":258,"line":507},16,[144,509,471],{"class":171},[144,511,512],{"class":265},"output",[144,514,454],{"class":269},[144,516,276],{"class":171},[144,518,279],{"class":171},[144,520,521],{"class":175},"inline-flex items-center gap-1.5 rounded-md border border-default px-2 py-1 text-sm text-muted",[144,523,279],{"class":171},[144,525,286],{"class":171},[144,527,529,532,535,537,539,541,543,546,548,551,554,557,559],{"class":258,"line":528},17,[144,530,531],{"class":150},"        Result: ",[144,533,534],{"class":171},"\u003C",[144,536,144],{"class":265},[144,538,454],{"class":269},[144,540,276],{"class":171},[144,542,279],{"class":171},[144,544,545],{"class":175},"font-medium text-highlighted",[144,547,279],{"class":171},[144,549,550],{"class":171},">",[144,552,553],{"class":150},"{{ result }}",[144,555,556],{"class":171},"\u003C\u002F",[144,558,144],{"class":265},[144,560,286],{"class":171},[144,562,564,566,568],{"class":258,"line":563},18,[144,565,500],{"class":171},[144,567,512],{"class":265},[144,569,286],{"class":171},[144,571,573,575,578,581,583,585,587,589,591,593,595,598,600,603,605,607,610,612,614,616,618,621,623],{"class":258,"line":572},19,[144,574,471],{"class":171},[144,576,577],{"class":265},"button",[144,579,580],{"class":269}," type",[144,582,276],{"class":171},[144,584,279],{"class":171},[144,586,577],{"class":175},[144,588,279],{"class":171},[144,590,454],{"class":269},[144,592,276],{"class":171},[144,594,279],{"class":171},[144,596,597],{"class":175},"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,599,279],{"class":171},[144,601,602],{"class":269}," :disabled",[144,604,276],{"class":171},[144,606,279],{"class":171},[144,608,609],{"class":175},"result === initialResult",[144,611,279],{"class":171},[144,613,477],{"class":269},[144,615,276],{"class":171},[144,617,279],{"class":171},[144,619,620],{"class":175},"result = initialResult",[144,622,279],{"class":171},[144,624,286],{"class":171},[144,626,628],{"class":258,"line":627},20,[144,629,630],{"class":150},"        Reset\n",[144,632,634,636,638],{"class":258,"line":633},21,[144,635,500],{"class":171},[144,637,577],{"class":265},[144,639,286],{"class":171},[144,641,643,646,648],{"class":258,"line":642},22,[144,644,645],{"class":171},"    \u003C\u002F",[144,647,451],{"class":265},[144,649,286],{"class":171},[144,651,653,655,657],{"class":258,"line":652},23,[144,654,424],{"class":171},[144,656,245],{"class":265},[144,658,286],{"class":171},[234,660,662,665],{"id":661},"useconfirm-composable",[138,663,664],{},"useConfirm()"," composable",[667,668,669,1113],"code-group",{},[248,670,673],{"className":140,"code":671,"filename":672,"language":141,"meta":142,"style":142},"  import { useModal } from 'vue-final-modal'\n  import ModalAwaitConfirm from '~\u002Fcomponents\u002Fcontent\u002FModalAwaitConfirm.vue'\n\n  export function useConfirm() {\n    const title = ref('')\n    let confirmed = false\n    let answer: (confirmed: boolean) => void = () => {}\n\n    const { open, close } = useModal({\n      component: ModalAwaitConfirm,\n      attrs: {\n        title,\n        onConfirm() {\n          confirmed = true\n          close()\n        },\n        onCancel() {\n          close()\n        },\n        onClosed() {\n          answer(confirmed)\n        },\n      },\n    })\n\n    return async function confirm(message: string): Promise\u003Cboolean> {\n      title.value = message\n      confirmed = false\n      const answered = new Promise\u003Cboolean>(resolve => answer = resolve)\n      if (await open() !== 'opened')\n        return false\n      return answered\n    }\n  }\n","composables\u002FuseConfirm.ts",[138,674,675,699,716,720,733,753,766,807,811,837,850,859,866,875,885,892,897,906,912,916,925,936,940,945,953,958,996,1011,1021,1059,1085,1093,1102,1108],{"__ignoreMap":142},[144,676,677,680,683,686,689,692,694,697],{"class":258,"line":259},[144,678,679],{"class":161},"  import",[144,681,682],{"class":171}," {",[144,684,685],{"class":150}," useModal",[144,687,688],{"class":171}," }",[144,690,691],{"class":161}," from",[144,693,300],{"class":171},[144,695,696],{"class":175},"vue-final-modal",[144,698,306],{"class":171},[144,700,701,703,706,709,711,714],{"class":258,"line":289},[144,702,679],{"class":161},[144,704,705],{"class":150}," ModalAwaitConfirm ",[144,707,708],{"class":161},"from",[144,710,300],{"class":171},[144,712,713],{"class":175},"~\u002Fcomponents\u002Fcontent\u002FModalAwaitConfirm.vue",[144,715,306],{"class":171},[144,717,718],{"class":258,"line":309},[144,719,345],{"emptyLinePlaceholder":344},[144,721,722,725,727,729,731],{"class":258,"line":325},[144,723,724],{"class":161},"  export",[144,726,354],{"class":269},[144,728,319],{"class":146},[144,730,151],{"class":171},[144,732,362],{"class":171},[144,734,735,738,741,743,745,747,750],{"class":258,"line":341},[144,736,737],{"class":269},"    const",[144,739,740],{"class":150}," title",[144,742,376],{"class":171},[144,744,335],{"class":146},[144,746,168],{"class":265},[144,748,749],{"class":171},"''",[144,751,752],{"class":265},")\n",[144,754,755,758,761,763],{"class":258,"line":348},[144,756,757],{"class":269},"    let",[144,759,760],{"class":150}," confirmed",[144,762,376],{"class":171},[144,764,765],{"class":187}," false\n",[144,767,768,770,773,776,779,783,785,789,791,794,797,799,802,804],{"class":258,"line":365},[144,769,757],{"class":269},[144,771,772],{"class":150}," answer",[144,774,775],{"class":171},":",[144,777,778],{"class":171}," (",[144,780,782],{"class":781},"sHdIc","confirmed",[144,784,775],{"class":171},[144,786,788],{"class":787},"sBMFI"," boolean",[144,790,181],{"class":171},[144,792,793],{"class":269}," =>",[144,795,796],{"class":787}," void",[144,798,376],{"class":171},[144,800,801],{"class":171}," ()",[144,803,793],{"class":269},[144,805,806],{"class":171}," {}\n",[144,808,809],{"class":258,"line":415},[144,810,345],{"emptyLinePlaceholder":344},[144,812,813,815,817,820,823,826,828,830,832,834],{"class":258,"line":421},[144,814,737],{"class":269},[144,816,682],{"class":171},[144,818,819],{"class":150}," open",[144,821,822],{"class":171},",",[144,824,825],{"class":150}," close",[144,827,688],{"class":171},[144,829,376],{"class":171},[144,831,685],{"class":146},[144,833,168],{"class":265},[144,835,836],{"class":171},"{\n",[144,838,839,842,844,847],{"class":258,"line":431},[144,840,841],{"class":265},"      component",[144,843,775],{"class":171},[144,845,846],{"class":150}," ModalAwaitConfirm",[144,848,849],{"class":171},",\n",[144,851,852,855,857],{"class":258,"line":436},[144,853,854],{"class":265},"      attrs",[144,856,775],{"class":171},[144,858,362],{"class":171},[144,860,861,864],{"class":258,"line":445},[144,862,863],{"class":150},"        title",[144,865,849],{"class":171},[144,867,868,871,873],{"class":258,"line":468},[144,869,870],{"class":265},"        onConfirm",[144,872,151],{"class":171},[144,874,362],{"class":171},[144,876,877,880,882],{"class":258,"line":491},[144,878,879],{"class":150},"          confirmed",[144,881,376],{"class":171},[144,883,884],{"class":187}," true\n",[144,886,887,890],{"class":258,"line":497},[144,888,889],{"class":146},"          close",[144,891,322],{"class":265},[144,893,894],{"class":258,"line":507},[144,895,896],{"class":171},"        },\n",[144,898,899,902,904],{"class":258,"line":528},[144,900,901],{"class":265},"        onCancel",[144,903,151],{"class":171},[144,905,362],{"class":171},[144,907,908,910],{"class":258,"line":563},[144,909,889],{"class":146},[144,911,322],{"class":265},[144,913,914],{"class":258,"line":572},[144,915,896],{"class":171},[144,917,918,921,923],{"class":258,"line":627},[144,919,920],{"class":265},"        onClosed",[144,922,151],{"class":171},[144,924,362],{"class":171},[144,926,927,930,932,934],{"class":258,"line":633},[144,928,929],{"class":146},"          answer",[144,931,168],{"class":265},[144,933,782],{"class":150},[144,935,752],{"class":265},[144,937,938],{"class":258,"line":642},[144,939,896],{"class":171},[144,941,942],{"class":258,"line":652},[144,943,944],{"class":171},"      },\n",[144,946,948,951],{"class":258,"line":947},24,[144,949,950],{"class":171},"    }",[144,952,752],{"class":265},[144,954,956],{"class":258,"line":955},25,[144,957,345],{"emptyLinePlaceholder":344},[144,959,961,964,967,969,971,973,976,978,981,984,987,989,992,994],{"class":258,"line":960},26,[144,962,963],{"class":161},"    return",[144,965,966],{"class":269}," async",[144,968,354],{"class":269},[144,970,165],{"class":146},[144,972,168],{"class":171},[144,974,975],{"class":781},"message",[144,977,775],{"class":171},[144,979,980],{"class":787}," string",[144,982,983],{"class":171},"):",[144,985,986],{"class":787}," Promise",[144,988,534],{"class":171},[144,990,991],{"class":787},"boolean",[144,993,550],{"class":171},[144,995,362],{"class":171},[144,997,999,1002,1004,1006,1008],{"class":258,"line":998},27,[144,1000,1001],{"class":150},"      title",[144,1003,232],{"class":171},[144,1005,373],{"class":150},[144,1007,376],{"class":171},[144,1009,1010],{"class":150}," message\n",[144,1012,1014,1017,1019],{"class":258,"line":1013},28,[144,1015,1016],{"class":150},"      confirmed",[144,1018,376],{"class":171},[144,1020,765],{"class":187},[144,1022,1024,1027,1030,1032,1035,1037,1039,1041,1043,1045,1048,1050,1052,1054,1057],{"class":258,"line":1023},29,[144,1025,1026],{"class":269},"      const",[144,1028,1029],{"class":150}," answered",[144,1031,376],{"class":171},[144,1033,1034],{"class":171}," new",[144,1036,986],{"class":787},[144,1038,534],{"class":171},[144,1040,991],{"class":787},[144,1042,550],{"class":171},[144,1044,168],{"class":265},[144,1046,1047],{"class":781},"resolve",[144,1049,793],{"class":269},[144,1051,772],{"class":150},[144,1053,376],{"class":171},[144,1055,1056],{"class":150}," resolve",[144,1058,752],{"class":265},[144,1060,1062,1065,1067,1069,1071,1074,1077,1079,1081,1083],{"class":258,"line":1061},30,[144,1063,1064],{"class":161},"      if",[144,1066,778],{"class":265},[144,1068,162],{"class":161},[144,1070,819],{"class":146},[144,1072,1073],{"class":265},"() ",[144,1075,1076],{"class":171},"!==",[144,1078,300],{"class":171},[144,1080,220],{"class":175},[144,1082,172],{"class":171},[144,1084,752],{"class":265},[144,1086,1088,1091],{"class":258,"line":1087},31,[144,1089,1090],{"class":161},"        return",[144,1092,765],{"class":187},[144,1094,1096,1099],{"class":258,"line":1095},32,[144,1097,1098],{"class":161},"      return",[144,1100,1101],{"class":150}," answered\n",[144,1103,1105],{"class":258,"line":1104},33,[144,1106,1107],{"class":171},"    }\n",[144,1109,1111],{"class":258,"line":1110},34,[144,1112,418],{"class":171},[248,1114,1117],{"className":250,"code":1115,"filename":1116,"language":253,"meta":142,"style":142},"  \u003Cscript setup lang=\"ts\">\n  import { useId } from 'vue'\n  import { VueFinalModal } from 'vue-final-modal'\n\n  defineProps\u003C{\n    title: string\n  }>()\n\n  const emit = defineEmits\u003C{\n    (e: 'confirm'): void\n    (e: 'cancel'): void\n  }>()\n\n  const titleId = useId()\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      class=\"flex justify-center items-center\"\n      content-class=\"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2\"\n      content-transition=\"vfm-fade\"\n      overlay-transition=\"vfm-fade\"\n      :aria-labelledby=\"titleId\"\n    >\n      \u003Ch1 :id=\"titleId\" class=\"text-xl\">\n        {{ title }}\n      \u003C\u002Fh1>\n      \u003Cdiv class=\"flex justify-end gap-2\">\n        \u003Cbutton type=\"button\" class=\"px-2 border rounded-lg\" @click=\"emit('cancel')\">\n          Cancel\n        \u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" class=\"px-2 border rounded-lg\" @click=\"emit('confirm')\">\n          Confirm\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n","ModalAwaitConfirm.vue",[138,1118,1119,1139,1158,1177,1181,1189,1199,1206,1210,1224,1246,1265,1271,1275,1288,1296,1300,1308,1315,1330,1344,1358,1371,1385,1390,1421,1426,1434,1453,1494,1499,1508,1547,1552,1560,1569,1579],{"__ignoreMap":142},[144,1120,1121,1123,1125,1127,1129,1131,1133,1135,1137],{"class":258,"line":259},[144,1122,262],{"class":171},[144,1124,266],{"class":265},[144,1126,270],{"class":269},[144,1128,273],{"class":269},[144,1130,276],{"class":171},[144,1132,279],{"class":171},[144,1134,141],{"class":175},[144,1136,279],{"class":171},[144,1138,286],{"class":171},[144,1140,1141,1143,1145,1148,1150,1152,1154,1156],{"class":258,"line":289},[144,1142,679],{"class":161},[144,1144,682],{"class":171},[144,1146,1147],{"class":150}," useId",[144,1149,688],{"class":171},[144,1151,691],{"class":161},[144,1153,300],{"class":171},[144,1155,253],{"class":175},[144,1157,306],{"class":171},[144,1159,1160,1162,1164,1167,1169,1171,1173,1175],{"class":258,"line":309},[144,1161,679],{"class":161},[144,1163,682],{"class":171},[144,1165,1166],{"class":150}," VueFinalModal",[144,1168,688],{"class":171},[144,1170,691],{"class":161},[144,1172,300],{"class":171},[144,1174,696],{"class":175},[144,1176,306],{"class":171},[144,1178,1179],{"class":258,"line":325},[144,1180,345],{"emptyLinePlaceholder":344},[144,1182,1183,1186],{"class":258,"line":341},[144,1184,1185],{"class":146},"  defineProps",[144,1187,1188],{"class":171},"\u003C{\n",[144,1190,1191,1194,1196],{"class":258,"line":348},[144,1192,1193],{"class":265},"    title",[144,1195,775],{"class":171},[144,1197,1198],{"class":787}," string\n",[144,1200,1201,1204],{"class":258,"line":365},[144,1202,1203],{"class":171},"  }>",[144,1205,322],{"class":150},[144,1207,1208],{"class":258,"line":415},[144,1209,345],{"emptyLinePlaceholder":344},[144,1211,1212,1214,1217,1219,1222],{"class":258,"line":421},[144,1213,292],{"class":269},[144,1215,1216],{"class":150}," emit ",[144,1218,276],{"class":171},[144,1220,1221],{"class":146}," defineEmits",[144,1223,1188],{"class":171},[144,1225,1226,1229,1232,1234,1236,1239,1241,1243],{"class":258,"line":431},[144,1227,1228],{"class":171},"    (",[144,1230,1231],{"class":781},"e",[144,1233,775],{"class":171},[144,1235,300],{"class":171},[144,1237,1238],{"class":175},"confirm",[144,1240,172],{"class":171},[144,1242,983],{"class":171},[144,1244,1245],{"class":787}," void\n",[144,1247,1248,1250,1252,1254,1256,1259,1261,1263],{"class":258,"line":436},[144,1249,1228],{"class":171},[144,1251,1231],{"class":781},[144,1253,775],{"class":171},[144,1255,300],{"class":171},[144,1257,1258],{"class":175},"cancel",[144,1260,172],{"class":171},[144,1262,983],{"class":171},[144,1264,1245],{"class":787},[144,1266,1267,1269],{"class":258,"line":445},[144,1268,1203],{"class":171},[144,1270,322],{"class":150},[144,1272,1273],{"class":258,"line":468},[144,1274,345],{"emptyLinePlaceholder":344},[144,1276,1277,1279,1282,1284,1286],{"class":258,"line":491},[144,1278,292],{"class":269},[144,1280,1281],{"class":150}," titleId ",[144,1283,276],{"class":171},[144,1285,1147],{"class":146},[144,1287,322],{"class":150},[144,1289,1290,1292,1294],{"class":258,"line":497},[144,1291,424],{"class":171},[144,1293,266],{"class":265},[144,1295,286],{"class":171},[144,1297,1298],{"class":258,"line":507},[144,1299,345],{"emptyLinePlaceholder":344},[144,1301,1302,1304,1306],{"class":258,"line":528},[144,1303,262],{"class":171},[144,1305,245],{"class":265},[144,1307,286],{"class":171},[144,1309,1310,1312],{"class":258,"line":563},[144,1311,448],{"class":171},[144,1313,1314],{"class":265},"VueFinalModal\n",[144,1316,1317,1320,1322,1324,1327],{"class":258,"line":572},[144,1318,1319],{"class":269},"      class",[144,1321,276],{"class":171},[144,1323,279],{"class":171},[144,1325,1326],{"class":175},"flex justify-center items-center",[144,1328,1329],{"class":171},"\"\n",[144,1331,1332,1335,1337,1339,1342],{"class":258,"line":627},[144,1333,1334],{"class":269},"      content-class",[144,1336,276],{"class":171},[144,1338,279],{"class":171},[144,1340,1341],{"class":175},"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2",[144,1343,1329],{"class":171},[144,1345,1346,1349,1351,1353,1356],{"class":258,"line":633},[144,1347,1348],{"class":269},"      content-transition",[144,1350,276],{"class":171},[144,1352,279],{"class":171},[144,1354,1355],{"class":175},"vfm-fade",[144,1357,1329],{"class":171},[144,1359,1360,1363,1365,1367,1369],{"class":258,"line":642},[144,1361,1362],{"class":269},"      overlay-transition",[144,1364,276],{"class":171},[144,1366,279],{"class":171},[144,1368,1355],{"class":175},[144,1370,1329],{"class":171},[144,1372,1373,1376,1378,1380,1383],{"class":258,"line":652},[144,1374,1375],{"class":269},"      :aria-labelledby",[144,1377,276],{"class":171},[144,1379,279],{"class":171},[144,1381,1382],{"class":175},"titleId",[144,1384,1329],{"class":171},[144,1386,1387],{"class":258,"line":947},[144,1388,1389],{"class":171},"    >\n",[144,1391,1392,1394,1397,1400,1402,1404,1406,1408,1410,1412,1414,1417,1419],{"class":258,"line":955},[144,1393,471],{"class":171},[144,1395,1396],{"class":265},"h1",[144,1398,1399],{"class":269}," :id",[144,1401,276],{"class":171},[144,1403,279],{"class":171},[144,1405,1382],{"class":175},[144,1407,279],{"class":171},[144,1409,454],{"class":269},[144,1411,276],{"class":171},[144,1413,279],{"class":171},[144,1415,1416],{"class":175},"text-xl",[144,1418,279],{"class":171},[144,1420,286],{"class":171},[144,1422,1423],{"class":258,"line":960},[144,1424,1425],{"class":150},"        {{ title }}\n",[144,1427,1428,1430,1432],{"class":258,"line":998},[144,1429,500],{"class":171},[144,1431,1396],{"class":265},[144,1433,286],{"class":171},[144,1435,1436,1438,1440,1442,1444,1446,1449,1451],{"class":258,"line":1013},[144,1437,471],{"class":171},[144,1439,451],{"class":265},[144,1441,454],{"class":269},[144,1443,276],{"class":171},[144,1445,279],{"class":171},[144,1447,1448],{"class":175},"flex justify-end gap-2",[144,1450,279],{"class":171},[144,1452,286],{"class":171},[144,1454,1455,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1479,1481,1483,1485,1487,1490,1492],{"class":258,"line":1023},[144,1456,1457],{"class":171},"        \u003C",[144,1459,577],{"class":265},[144,1461,580],{"class":269},[144,1463,276],{"class":171},[144,1465,279],{"class":171},[144,1467,577],{"class":175},[144,1469,279],{"class":171},[144,1471,454],{"class":269},[144,1473,276],{"class":171},[144,1475,279],{"class":171},[144,1477,1478],{"class":175},"px-2 border rounded-lg",[144,1480,279],{"class":171},[144,1482,477],{"class":269},[144,1484,276],{"class":171},[144,1486,279],{"class":171},[144,1488,1489],{"class":175},"emit('cancel')",[144,1491,279],{"class":171},[144,1493,286],{"class":171},[144,1495,1496],{"class":258,"line":1061},[144,1497,1498],{"class":150},"          Cancel\n",[144,1500,1501,1504,1506],{"class":258,"line":1087},[144,1502,1503],{"class":171},"        \u003C\u002F",[144,1505,577],{"class":265},[144,1507,286],{"class":171},[144,1509,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1543,1545],{"class":258,"line":1095},[144,1511,1457],{"class":171},[144,1513,577],{"class":265},[144,1515,580],{"class":269},[144,1517,276],{"class":171},[144,1519,279],{"class":171},[144,1521,577],{"class":175},[144,1523,279],{"class":171},[144,1525,454],{"class":269},[144,1527,276],{"class":171},[144,1529,279],{"class":171},[144,1531,1478],{"class":175},[144,1533,279],{"class":171},[144,1535,477],{"class":269},[144,1537,276],{"class":171},[144,1539,279],{"class":171},[144,1541,1542],{"class":175},"emit('confirm')",[144,1544,279],{"class":171},[144,1546,286],{"class":171},[144,1548,1549],{"class":258,"line":1104},[144,1550,1551],{"class":150},"          Confirm\n",[144,1553,1554,1556,1558],{"class":258,"line":1110},[144,1555,1503],{"class":171},[144,1557,577],{"class":265},[144,1559,286],{"class":171},[144,1561,1563,1565,1567],{"class":258,"line":1562},35,[144,1564,500],{"class":171},[144,1566,451],{"class":265},[144,1568,286],{"class":171},[144,1570,1572,1574,1577],{"class":258,"line":1571},36,[144,1573,645],{"class":171},[144,1575,1576],{"class":265},"VueFinalModal",[144,1578,286],{"class":171},[144,1580,1582,1584,1586],{"class":258,"line":1581},37,[144,1583,424],{"class":171},[144,1585,245],{"class":265},[144,1587,286],{"class":171},[1589,1590,1591],"style",{},"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 .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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":142,"searchDepth":289,"depth":289,"links":1593},[1594,1595],{"id":236,"depth":289,"text":237},{"id":661,"depth":289,"text":1596},"useConfirm() composable","Ask for a confirmation with useModal() and await the answer.","md",null,{"head":1601},{"title":1602},"Await a Confirm | Examples",{"title":89,"description":1597},"Wm1R7UvqbocgJtWY4hIOhXSZ95UrA7XZGOBtVyJfDm8",[1606,1608],{"title":85,"path":86,"stem":87,"description":1607,"children":-1},"Keep a dynamic modal mounted after it is closed, so its state survives the next open().",{"title":93,"path":94,"stem":95,"description":1609,"children":-1},"A question on the native \u003Cdialog> with \u003CVueFinalDialog>, a form with method=\"dialog\" and a CSS fade.",1791989777857]