[{"data":1,"prerenderedAt":1174},["ShallowReactive",2],{"navigation_docs":3,"-api-composables-use-modal-lifecycle":128,"-api-composables-use-modal-lifecycle-surround":1170},[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":72,"body":130,"description":1164,"extension":1165,"links":1166,"meta":1167,"navigation":364,"path":73,"seo":1168,"stem":74,"__hash__":1169},"docs\u002F3.api\u002F2.composables\u002F3.use-modal-lifecycle.md",{"type":131,"value":132,"toc":1158},"minimark",[133,192,197,240,695,753,776,780,921,925,955,1045,1049,1126,1154],[134,135,136,151,152,157,158,163,164,171,172,179,180,187,188,191],"p",{},[137,138,142,147],"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},"s2Zo4","useModal",[143,148,150],{"class":149},"sTEyZ","()"," renders any ",[137,153,154],{"className":139,"language":140,"style":141},[143,155,156],{"class":149},"component"," you give it. It passes the component a ",[137,159,160],{"className":139,"language":140,"style":141},[143,161,162],{"class":149},"modelValue",", and settles ",[137,165,166,169],{"className":139,"language":140,"style":141},[143,167,168],{"class":145},"open",[143,170,150],{"class":149}," and ",[137,173,174,177],{"className":139,"language":140,"style":141},[143,175,176],{"class":145},"close",[143,178,150],{"class":149}," on the events the component emits once it has opened or closed. ",[137,181,182,185],{"className":139,"language":140,"style":141},[143,183,184],{"class":145},"useModalLifecycle",[143,186,150],{"class":149}," emits them for you, so your component only shows and hides itself. ",[189,190,54],"a",{"href":55}," is built on it.",[193,194,196],"h2",{"id":195},"usage","Usage",[134,198,199,200,171,205,210,211,217,218,222,223,227,228,233,234,239],{},"Declare ",[137,201,202],{"className":139,"language":140,"style":141},[143,203,204],{"class":149},"modalComponentProps",[137,206,207],{"className":139,"language":140,"style":141},[143,208,209],{"class":149},"ModalComponentEmits",", and give ",[137,212,213,215],{"className":139,"language":140,"style":141},[143,214,184],{"class":145},[143,216,150],{"class":149}," an ",[137,219,220],{"className":139,"language":140,"style":141},[143,221,168],{"class":149}," and a ",[137,224,225],{"className":139,"language":140,"style":141},[143,226,176],{"class":149}," hook. A hook that returns a promise holds ",[137,229,230],{"className":139,"language":140,"style":141},[143,231,232],{"class":149},"opened"," or ",[137,235,236],{"className":139,"language":140,"style":141},[143,237,238],{"class":149},"closed"," back until it settles, for example until a transition ends:",[241,242,247],"pre",{"className":243,"code":244,"filename":245,"language":246,"meta":141,"style":141},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { ModalComponentEmits } from 'vue-final-modal'\nimport { ref } from 'vue'\nimport { modalComponentProps, useModalLifecycle } from 'vue-final-modal'\n\nconst props = defineProps(modalComponentProps)\nconst emit = defineEmits\u003CModalComponentEmits>()\n\nconst dialog = ref\u003CHTMLDialogElement>()\nconst { isOpen, reportClosed } = useModalLifecycle(props, emit, {\n  open: () => dialog.value!.showModal(),\n  close: () => dialog.value!.close(),\n})\n\nfunction onClose() {\n  if (!dialog.value!.open)\n    reportClosed()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdialog ref=\"dialog\" @cancel.prevent=\"isOpen = false\" @close=\"onClose\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdialog>\n\u003C\u002Ftemplate>\n","MyDialog.vue","vue",[137,248,249,282,313,333,359,366,383,407,412,433,469,504,530,538,543,556,581,589,595,605,610,620,664,676,686],{"__ignoreMap":141},[143,250,253,257,261,265,268,271,274,277,279],{"class":251,"line":252},"line",1,[143,254,256],{"class":255},"sMK4o","\u003C",[143,258,260],{"class":259},"swJcz","script",[143,262,264],{"class":263},"spNyl"," setup",[143,266,267],{"class":263}," lang",[143,269,270],{"class":255},"=",[143,272,273],{"class":255},"\"",[143,275,140],{"class":276},"sfazB",[143,278,273],{"class":255},[143,280,281],{"class":255},">\n",[143,283,285,289,292,295,298,301,304,307,310],{"class":251,"line":284},2,[143,286,288],{"class":287},"s7zQu","import",[143,290,291],{"class":287}," type",[143,293,294],{"class":255}," {",[143,296,297],{"class":149}," ModalComponentEmits",[143,299,300],{"class":255}," }",[143,302,303],{"class":287}," from",[143,305,306],{"class":255}," '",[143,308,309],{"class":276},"vue-final-modal",[143,311,312],{"class":255},"'\n",[143,314,316,318,320,323,325,327,329,331],{"class":251,"line":315},3,[143,317,288],{"class":287},[143,319,294],{"class":255},[143,321,322],{"class":149}," ref",[143,324,300],{"class":255},[143,326,303],{"class":287},[143,328,306],{"class":255},[143,330,246],{"class":276},[143,332,312],{"class":255},[143,334,336,338,340,343,346,349,351,353,355,357],{"class":251,"line":335},4,[143,337,288],{"class":287},[143,339,294],{"class":255},[143,341,342],{"class":149}," modalComponentProps",[143,344,345],{"class":255},",",[143,347,348],{"class":149}," useModalLifecycle",[143,350,300],{"class":255},[143,352,303],{"class":287},[143,354,306],{"class":255},[143,356,309],{"class":276},[143,358,312],{"class":255},[143,360,362],{"class":251,"line":361},5,[143,363,365],{"emptyLinePlaceholder":364},true,"\n",[143,367,369,372,375,377,380],{"class":251,"line":368},6,[143,370,371],{"class":263},"const",[143,373,374],{"class":149}," props ",[143,376,270],{"class":255},[143,378,379],{"class":145}," defineProps",[143,381,382],{"class":149},"(modalComponentProps)\n",[143,384,386,388,391,393,396,398,401,404],{"class":251,"line":385},7,[143,387,371],{"class":263},[143,389,390],{"class":149}," emit ",[143,392,270],{"class":255},[143,394,395],{"class":145}," defineEmits",[143,397,256],{"class":255},[143,399,209],{"class":400},"sBMFI",[143,402,403],{"class":255},">",[143,405,406],{"class":149},"()\n",[143,408,410],{"class":251,"line":409},8,[143,411,365],{"emptyLinePlaceholder":364},[143,413,415,417,420,422,424,426,429,431],{"class":251,"line":414},9,[143,416,371],{"class":263},[143,418,419],{"class":149}," dialog ",[143,421,270],{"class":255},[143,423,322],{"class":145},[143,425,256],{"class":255},[143,427,428],{"class":400},"HTMLDialogElement",[143,430,403],{"class":255},[143,432,406],{"class":149},[143,434,436,438,440,443,445,448,451,454,456,459,461,464,466],{"class":251,"line":435},10,[143,437,371],{"class":263},[143,439,294],{"class":255},[143,441,442],{"class":149}," isOpen",[143,444,345],{"class":255},[143,446,447],{"class":149}," reportClosed ",[143,449,450],{"class":255},"}",[143,452,453],{"class":255}," =",[143,455,348],{"class":145},[143,457,458],{"class":149},"(props",[143,460,345],{"class":255},[143,462,463],{"class":149}," emit",[143,465,345],{"class":255},[143,467,468],{"class":255}," {\n",[143,470,472,475,478,481,484,487,490,493,496,499,501],{"class":251,"line":471},11,[143,473,474],{"class":145},"  open",[143,476,477],{"class":255},":",[143,479,480],{"class":255}," ()",[143,482,483],{"class":263}," =>",[143,485,486],{"class":149}," dialog",[143,488,489],{"class":255},".",[143,491,492],{"class":149},"value",[143,494,495],{"class":255},"!.",[143,497,498],{"class":145},"showModal",[143,500,150],{"class":149},[143,502,503],{"class":255},",\n",[143,505,507,510,512,514,516,518,520,522,524,526,528],{"class":251,"line":506},12,[143,508,509],{"class":145},"  close",[143,511,477],{"class":255},[143,513,480],{"class":255},[143,515,483],{"class":263},[143,517,486],{"class":149},[143,519,489],{"class":255},[143,521,492],{"class":149},[143,523,495],{"class":255},[143,525,176],{"class":145},[143,527,150],{"class":149},[143,529,503],{"class":255},[143,531,533,535],{"class":251,"line":532},13,[143,534,450],{"class":255},[143,536,537],{"class":149},")\n",[143,539,541],{"class":251,"line":540},14,[143,542,365],{"emptyLinePlaceholder":364},[143,544,546,549,552,554],{"class":251,"line":545},15,[143,547,548],{"class":263},"function",[143,550,551],{"class":145}," onClose",[143,553,150],{"class":255},[143,555,468],{"class":255},[143,557,559,562,565,568,571,573,575,577,579],{"class":251,"line":558},16,[143,560,561],{"class":287},"  if",[143,563,564],{"class":259}," (",[143,566,567],{"class":255},"!",[143,569,570],{"class":149},"dialog",[143,572,489],{"class":255},[143,574,492],{"class":149},[143,576,495],{"class":255},[143,578,168],{"class":149},[143,580,537],{"class":259},[143,582,584,587],{"class":251,"line":583},17,[143,585,586],{"class":145},"    reportClosed",[143,588,406],{"class":259},[143,590,592],{"class":251,"line":591},18,[143,593,594],{"class":255},"}\n",[143,596,598,601,603],{"class":251,"line":597},19,[143,599,600],{"class":255},"\u003C\u002F",[143,602,260],{"class":259},[143,604,281],{"class":255},[143,606,608],{"class":251,"line":607},20,[143,609,365],{"emptyLinePlaceholder":364},[143,611,613,615,618],{"class":251,"line":612},21,[143,614,256],{"class":255},[143,616,617],{"class":259},"template",[143,619,281],{"class":255},[143,621,623,626,628,630,632,634,636,638,641,643,645,648,650,653,655,657,660,662],{"class":251,"line":622},22,[143,624,625],{"class":255},"  \u003C",[143,627,570],{"class":259},[143,629,322],{"class":263},[143,631,270],{"class":255},[143,633,273],{"class":255},[143,635,570],{"class":276},[143,637,273],{"class":255},[143,639,640],{"class":263}," @cancel.prevent",[143,642,270],{"class":255},[143,644,273],{"class":255},[143,646,647],{"class":276},"isOpen = false",[143,649,273],{"class":255},[143,651,652],{"class":263}," @close",[143,654,270],{"class":255},[143,656,273],{"class":255},[143,658,659],{"class":276},"onClose",[143,661,273],{"class":255},[143,663,281],{"class":255},[143,665,667,670,673],{"class":251,"line":666},23,[143,668,669],{"class":255},"    \u003C",[143,671,672],{"class":259},"slot",[143,674,675],{"class":255}," \u002F>\n",[143,677,679,682,684],{"class":251,"line":678},24,[143,680,681],{"class":255},"  \u003C\u002F",[143,683,570],{"class":259},[143,685,281],{"class":255},[143,687,689,691,693],{"class":251,"line":688},25,[143,690,600],{"class":255},[143,692,617],{"class":259},[143,694,281],{"class":255},[241,696,698],{"className":139,"code":697,"language":140,"meta":141,"style":141},"const { open } = useModal({ component: MyDialog })\n\nawait open() \u002F\u002F 'opened'\n",[137,699,700,734,738],{"__ignoreMap":141},[143,701,702,704,706,709,711,713,716,719,722,725,727,730,732],{"class":251,"line":252},[143,703,371],{"class":263},[143,705,294],{"class":255},[143,707,708],{"class":149}," open ",[143,710,450],{"class":255},[143,712,453],{"class":255},[143,714,715],{"class":145}," useModal",[143,717,718],{"class":149},"(",[143,720,721],{"class":255},"{",[143,723,724],{"class":259}," component",[143,726,477],{"class":255},[143,728,729],{"class":149}," MyDialog ",[143,731,450],{"class":255},[143,733,537],{"class":149},[143,735,736],{"class":251,"line":284},[143,737,365],{"emptyLinePlaceholder":364},[143,739,740,743,746,749],{"class":251,"line":315},[143,741,742],{"class":287},"await",[143,744,745],{"class":145}," open",[143,747,748],{"class":149},"() ",[143,750,752],{"class":751},"sHwdD","\u002F\u002F 'opened'\n",[134,754,755,756,759,760,765,766,770,771,775],{},"The hooks run once the component has mounted and rendered the new state. The browser may close the dialog on ",[137,757,758],{},"Esc"," although ",[137,761,762],{"className":139,"language":140,"style":141},[143,763,764],{"class":149},"cancel"," was prevented, which ",[137,767,768],{"className":139,"language":140,"style":141},[143,769,659],{"class":149}," reports. It skips the ",[137,772,773],{"className":139,"language":140,"style":141},[143,774,176],{"class":149}," event of a dialog opened again before the event fired.",[193,777,779],{"id":778},"return-value","Return value",[781,782,783,813,851,872],"ul",{},[784,785,786,791,792,233,797,802,803,812],"li",{},[137,787,788],{"className":139,"language":140,"style":141},[143,789,790],{"class":149},"isOpen",": whether the modal is open. Set it to open or close the modal from inside, for example from a close button: ",[137,793,794],{"className":139,"language":140,"style":141},[143,795,796],{"class":149},"beforeOpen",[137,798,799],{"className":139,"language":140,"style":141},[143,800,801],{"class":149},"beforeClose"," is emitted first, and ",[137,804,805,808,810],{"className":139,"language":140,"style":141},[143,806,807],{"class":400},"update",[143,809,477],{"class":255},[143,811,162],{"class":149}," after.",[784,814,815,822,823,845,846,850],{},[137,816,817,820],{"className":139,"language":140,"style":141},[143,818,819],{"class":145},"reportClosed",[143,821,150],{"class":149},": reports a modal that already closed by itself, such as a dialog a ",[137,824,827,829,832,835,837,839,841,843],{"className":825,"language":826,"style":141},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","html",[143,828,256],{"class":255},[143,830,831],{"class":259},"form",[143,833,834],{"class":263}," method",[143,836,270],{"class":255},[143,838,273],{"class":255},[143,840,570],{"class":276},[143,842,273],{"class":255},[143,844,403],{"class":255}," closed, so ",[137,847,848],{"className":139,"language":140,"style":141},[143,849,801],{"class":149}," is not asked.",[784,852,853,867,868,871],{},[137,854,855,858,861,864],{"className":139,"language":140,"style":141},[143,856,857],{"class":145},"toggle",[143,859,860],{"class":149},"(show",[143,862,863],{"class":255},"?",[143,865,866],{"class":149},")",": opens or closes the modal and resolves once it has, like ",[189,869,870],{"href":69},"useVfm().toggle()",". Called while the modal is heading there, it settles with that change.",[784,873,874,879,880,889,890,889,899,233,907,916,917,489],{},[137,875,876],{"className":139,"language":140,"style":141},[143,877,878],{"class":149},"status",": a read-only ref of where the modal is, ",[137,881,882,885,887],{"className":139,"language":140,"style":141},[143,883,884],{"class":255},"'",[143,886,238],{"class":276},[143,888,884],{"class":255},", ",[137,891,892,894,897],{"className":139,"language":140,"style":141},[143,893,884],{"class":255},[143,895,896],{"class":276},"opening",[143,898,884],{"class":255},[137,900,901,903,905],{"className":139,"language":140,"style":141},[143,902,884],{"class":255},[143,904,232],{"class":276},[143,906,884],{"class":255},[137,908,909,911,914],{"className":139,"language":140,"style":141},[143,910,884],{"class":255},[143,912,913],{"class":276},"closing",[143,915,884],{"class":255},", like the ",[189,918,920],{"href":919},"\u002Fapi\u002Fcomposables\u002Fuse-modal#status","status of useModal()",[193,922,924],{"id":923},"what-it-guarantees","What it guarantees",[134,926,927,928,171,934,940,941,945,946,477],{},"Your component's ",[137,929,930,932],{"className":139,"language":140,"style":141},[143,931,168],{"class":145},[143,933,150],{"class":149},[137,935,936,938],{"className":139,"language":140,"style":141},[143,937,176],{"class":145},[143,939,150],{"class":149}," resolve with ",[189,942,944],{"href":943},"\u002Fapi\u002Fcomposables\u002Fuse-modal#what-open-and-close-resolve-with","the same results"," as those of ",[137,947,948,950,953],{"className":139,"language":140,"style":141},[143,949,256],{"class":149},[143,951,952],{"class":400},"VueFinalModal",[143,954,403],{"class":149},[781,956,957,976,1013,1033],{},[784,958,959,171,967,975],{},[137,960,961,963,965],{"className":139,"language":140,"style":141},[143,962,884],{"class":255},[143,964,232],{"class":276},[143,966,884],{"class":255},[137,968,969,971,973],{"className":139,"language":140,"style":141},[143,970,884],{"class":255},[143,972,238],{"class":276},[143,974,884],{"class":255}," once the hook settled,",[784,977,978,987,988,233,992,996,997,1009,1010,345],{},[137,979,980,982,985],{"className":139,"language":140,"style":141},[143,981,884],{"class":255},[143,983,984],{"class":276},"stopped",[143,986,884],{"class":255}," when ",[137,989,990],{"className":139,"language":140,"style":141},[143,991,796],{"class":149},[137,993,994],{"className":139,"language":140,"style":141},[143,995,801],{"class":149}," called ",[137,998,999,1002,1004,1007],{"className":139,"language":140,"style":141},[143,1000,1001],{"class":149},"event",[143,1003,489],{"class":255},[143,1005,1006],{"class":145},"stop",[143,1008,150],{"class":149},", which also writes the previous value back to ",[137,1011,1012],{},"v-model",[784,1014,1015,1024,1025,233,1029,345],{},[137,1016,1017,1019,1022],{"className":139,"language":140,"style":141},[143,1018,884],{"class":255},[143,1020,1021],{"class":276},"toggled-again",[143,1023,884],{"class":255}," when the modal was toggled again before its hook settled: the late hook does not emit ",[137,1026,1027],{"className":139,"language":140,"style":141},[143,1028,232],{"class":149},[137,1030,1031],{"className":139,"language":140,"style":141},[143,1032,238],{"class":149},[784,1034,1035,1044],{},[137,1036,1037,1039,1042],{"className":139,"language":140,"style":141},[143,1038,884],{"class":255},[143,1040,1041],{"class":276},"destroyed",[143,1043,884],{"class":255}," when the component unmounted before its hook settled.",[193,1046,1048],{"id":1047},"events","Events",[134,1050,1051,1055,1056,1062,1063,889,1071,889,1075,889,1079,171,1083,1087,1088,889,1093,889,1098,171,1103,1108,1109,1115,1116,489],{},[137,1052,1053],{"className":139,"language":140,"style":141},[143,1054,209],{"class":149}," lists the events ",[137,1057,1058,1060],{"className":139,"language":140,"style":141},[143,1059,184],{"class":145},[143,1061,150],{"class":149}," emits: ",[137,1064,1065,1067,1069],{"className":139,"language":140,"style":141},[143,1066,807],{"class":400},[143,1068,477],{"class":255},[143,1070,162],{"class":149},[137,1072,1073],{"className":139,"language":140,"style":141},[143,1074,796],{"class":149},[137,1076,1077],{"className":139,"language":140,"style":141},[143,1078,232],{"class":149},[137,1080,1081],{"className":139,"language":140,"style":141},[143,1082,801],{"class":149},[137,1084,1085],{"className":139,"language":140,"style":141},[143,1086,238],{"class":149},", plus the internal ",[137,1089,1090],{"className":139,"language":140,"style":141},[143,1091,1092],{"class":149},"_opened",[137,1094,1095],{"className":139,"language":140,"style":141},[143,1096,1097],{"class":149},"_closed",[137,1099,1100],{"className":139,"language":140,"style":141},[143,1101,1102],{"class":149},"_stopped",[137,1104,1105],{"className":139,"language":140,"style":141},[143,1106,1107],{"class":149},"_status"," that ",[137,1110,1111,1113],{"className":139,"language":140,"style":141},[143,1112,146],{"class":145},[143,1114,150],{"class":149}," listens to. In the Options API, use ",[137,1117,1118,1121,1123],{"className":139,"language":140,"style":141},[143,1119,1120],{"class":400},"emits",[143,1122,477],{"class":255},[143,1124,1125],{"class":149}," modalComponentEmits",[134,1127,1128,1129,233,1138,1146,1147,1153],{},"Declare them only on the component that shows the modal. A wrapper around ",[137,1130,1131,1133,1136],{"className":139,"language":140,"style":141},[143,1132,256],{"class":149},[143,1134,1135],{"class":400},"VueFinalDialog",[143,1137,403],{"class":149},[137,1139,1140,1142,1144],{"className":139,"language":140,"style":141},[143,1141,256],{"class":149},[143,1143,952],{"class":400},[143,1145,403],{"class":149}," that declares them swallows the internal listeners of ",[137,1148,1149,1151],{"className":139,"language":140,"style":141},[143,1150,146],{"class":145},[143,1152,150],{"class":149},": let them fall through to the inner component instead.",[1155,1156,1157],"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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":141,"searchDepth":284,"depth":284,"links":1159},[1160,1161,1162,1163],{"id":195,"depth":284,"text":196},{"id":778,"depth":284,"text":779},{"id":923,"depth":284,"text":924},{"id":1047,"depth":284,"text":1048},"Build your own modal component that useModal() can open and await.","md",null,{},{"title":72,"description":1164},"aaeGGezrKemTSVCx2kHjJbz2cQYlXU_UuT5vxqCzgdI",[1171,1173],{"title":68,"path":69,"stem":70,"description":1172,"children":-1},"useVfm() provides global state for the modal components and also provides functions that can be used to control the modal components.",{"title":81,"path":82,"stem":83,"description":141,"children":-1},1791989777551]