[{"data":1,"prerenderedAt":1914},["ShallowReactive",2],{"navigation_docs":3,"-api-composables-use-modal":108,"-api-composables-use-modal-surround":1909},[4,33,67],{"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,53],{"title":40,"icon":41,"path":42,"stem":43,"children":44,"page":32},"Components","heroicons-outline:cube","\u002Fapi\u002Fcomponents","3.api\u002F1.components",[45,49],{"title":46,"path":47,"stem":48},"\u003CVueFinalModal>","\u002Fapi\u002Fcomponents\u002Fvue-final-modal","3.api\u002F1.components\u002F1.vue-final-modal",{"title":50,"path":51,"stem":52},"\u003CModalsContainer>","\u002Fapi\u002Fcomponents\u002Fmodals-container","3.api\u002F1.components\u002F2.modals-container",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":32},"Composables","heroicons-outline:switch-horizontal","\u002Fapi\u002Fcomposables","3.api\u002F2.composables",[59,63],{"title":60,"path":61,"stem":62},"useModal()","\u002Fapi\u002Fcomposables\u002Fuse-modal","3.api\u002F2.composables\u002F1.use-modal",{"title":64,"path":65,"stem":66},"useVfm()","\u002Fapi\u002Fcomposables\u002Fuse-vfm","3.api\u002F2.composables\u002F2.use-vfm",{"title":68,"path":69,"stem":70,"children":71,"page":32},"Use Cases","\u002Fuse-cases","4.use-cases",[72,76,80,84,88,92,96,100,104],{"title":73,"path":74,"stem":75},"Playground","\u002Fuse-cases\u002Fplayground","4.use-cases\u002F1.playground",{"title":77,"path":78,"stem":79},"Modal Keep Alive","\u002Fuse-cases\u002Fmodal-keep-alive","4.use-cases\u002F10.modal-keep-alive",{"title":81,"path":82,"stem":83},"Modal Confirm","\u002Fuse-cases\u002Fconfirm-modal","4.use-cases\u002F3.confirm-modal",{"title":85,"path":86,"stem":87},"Modal Nested","\u002Fuse-cases\u002Fmodal-nested","4.use-cases\u002F4.modal-nested",{"title":89,"path":90,"stem":91},"Modal Fullscreen","\u002Fuse-cases\u002Fmodal-fullscreen","4.use-cases\u002F5.modal-fullscreen",{"title":93,"path":94,"stem":95},"Modal Bottom","\u002Fuse-cases\u002Fmodal-bottom","4.use-cases\u002F6.modal-bottom",{"title":97,"path":98,"stem":99},"Modal Login Form","\u002Fuse-cases\u002Fmodal-login-form","4.use-cases\u002F7.modal-login-form",{"title":101,"path":102,"stem":103},"Modal Drag Resize","\u002Fuse-cases\u002Fmodal-drag-resize","4.use-cases\u002F8.modal-drag-resize",{"title":105,"path":106,"stem":107},"Modal Long Scroll","\u002Fuse-cases\u002Fmodal-long-scroll","4.use-cases\u002F9.modal-long-scroll",{"id":109,"title":60,"body":110,"description":1903,"extension":1904,"links":1905,"meta":1906,"navigation":240,"path":61,"seo":1907,"stem":62,"__hash__":1908},"docs\u002F3.api\u002F2.composables\u002F1.use-modal.md",{"type":111,"value":112,"toc":1890},"minimark",[113,144,149,155,280,284,289,315,632,636,656,842,846,903,1048,1052,1060,1170,1180,1186,1318,1329,1526,1549,1560,1595,1672,1675,1726,1765,1769,1812,1829,1876,1880,1886],[114,115,116,117,132,133,138,139,143],"p",{},"With ",[118,119,123,128],"code",{"className":120,"language":121,"style":122},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[124,125,127],"span",{"class":126},"s2Zo4","useModal",[124,129,131],{"class":130},"sTEyZ","()",", that means you don't have to add the modal to your Vue template and you don't have to use ",[134,135,137],"a",{"href":136},"\u002Fget-started\u002Fguide\u002Fsetup#v-model","v-model"," or ",[134,140,142],{"href":141},"\u002Fget-started\u002Fguide\u002Fsetup#modalid","modalId"," to open or close the modal. You can simply use it to create a dynamic modal everywhere and control it programmatically.",[145,146,148],"h2",{"id":147},"prerequisite","Prerequisite",[114,150,151,152,154],{},"Dynamic modals are rendered by ",[134,153,50],{"href":51},", so make sure it is included in your app once:",[156,157,162],"pre",{"className":158,"code":159,"filename":160,"language":161,"meta":122,"style":122},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ModalsContainer } from 'vue-final-modal'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Your app -->\n  \u003CModalsContainer \u002F>\n\u003C\u002Ftemplate>\n","App.vue","vue",[118,163,164,197,225,235,242,252,259,271],{"__ignoreMap":122},[124,165,168,172,176,180,183,186,189,192,194],{"class":166,"line":167},"line",1,[124,169,171],{"class":170},"sMK4o","\u003C",[124,173,175],{"class":174},"swJcz","script",[124,177,179],{"class":178},"spNyl"," setup",[124,181,182],{"class":178}," lang",[124,184,185],{"class":170},"=",[124,187,188],{"class":170},"\"",[124,190,121],{"class":191},"sfazB",[124,193,188],{"class":170},[124,195,196],{"class":170},">\n",[124,198,200,204,207,210,213,216,219,222],{"class":166,"line":199},2,[124,201,203],{"class":202},"s7zQu","import",[124,205,206],{"class":170}," {",[124,208,209],{"class":130}," ModalsContainer",[124,211,212],{"class":170}," }",[124,214,215],{"class":202}," from",[124,217,218],{"class":170}," '",[124,220,221],{"class":191},"vue-final-modal",[124,223,224],{"class":170},"'\n",[124,226,228,231,233],{"class":166,"line":227},3,[124,229,230],{"class":170},"\u003C\u002F",[124,232,175],{"class":174},[124,234,196],{"class":170},[124,236,238],{"class":166,"line":237},4,[124,239,241],{"emptyLinePlaceholder":240},true,"\n",[124,243,245,247,250],{"class":166,"line":244},5,[124,246,171],{"class":170},[124,248,249],{"class":174},"template",[124,251,196],{"class":170},[124,253,255],{"class":166,"line":254},6,[124,256,258],{"class":257},"sHwdD","  \u003C!-- Your app -->\n",[124,260,262,265,268],{"class":166,"line":261},7,[124,263,264],{"class":170},"  \u003C",[124,266,267],{"class":174},"ModalsContainer",[124,269,270],{"class":170}," \u002F>\n",[124,272,274,276,278],{"class":166,"line":273},8,[124,275,230],{"class":170},[124,277,249],{"class":174},[124,279,196],{"class":170},[145,281,283],{"id":282},"usage","Usage",[285,286,288],"h3",{"id":287},"passing-props-and-events","Passing Props and Events",[114,290,291,298,299,306,307,314],{},[118,292,293,295],{"className":120,"language":121,"style":122},[124,294,127],{"class":126},[124,296,297],{"class":130},"(options)"," takes the options that describe the modal component, and returns ",[118,300,301,304],{"className":120,"language":121,"style":122},[124,302,303],{"class":126},"open",[124,305,131],{"class":130}," and ",[118,308,309,312],{"className":120,"language":121,"style":122},[124,310,311],{"class":126},"close",[124,313,131],{"class":130}," functions to control it.",[156,316,318],{"className":120,"code":317,"language":121,"meta":122,"style":122},"import { VueFinalModal, useModal } from 'vue-final-modal'\n\nconst { open, close } = useModal({\n  \u002F\u002F Open the modal right after it was created, the default value is `false`.\n  defaultModelValue: false,\n  \u002F\u002F Keep the modal mounted after it was closed, the default value is `false`.\n  keepAlive: false,\n  \u002F\u002F The modal component. Use `\u003CVueFinalModal>` directly or your own styled modal component.\n  component: VueFinalModal,\n  attrs: {\n    \u002F\u002F Bind props to the modal component (VueFinalModal in this case).\n    clickToClose: true,\n    escToClose: true,\n    \u002F\u002F Bind events to the modal component (VueFinalModal in this case).\n    \u002F\u002F Any custom events can be listened for when prefixed with \"on\", e.g. \"onEventName\".\n    onBeforeOpen() { \u002F* on before open *\u002F },\n    onOpened() { \u002F* on opened *\u002F },\n    onBeforeClose() { \u002F* on before close *\u002F },\n    onClosed() { \u002F* on closed *\u002F },\n  },\n})\n\n\u002F\u002F Open the modal\nopen().then(() => { \u002F* Do something after modal opened *\u002F })\n\u002F\u002F Close the modal\nclose().then(() => { \u002F* Do something after modal closed *\u002F })\n",[118,319,320,345,349,378,383,398,403,414,419,431,442,448,461,473,479,485,501,516,531,546,552,560,565,571,600,606],{"__ignoreMap":122},[124,321,322,324,326,329,332,335,337,339,341,343],{"class":166,"line":167},[124,323,203],{"class":202},[124,325,206],{"class":170},[124,327,328],{"class":130}," VueFinalModal",[124,330,331],{"class":170},",",[124,333,334],{"class":130}," useModal",[124,336,212],{"class":170},[124,338,215],{"class":202},[124,340,218],{"class":170},[124,342,221],{"class":191},[124,344,224],{"class":170},[124,346,347],{"class":166,"line":199},[124,348,241],{"emptyLinePlaceholder":240},[124,350,351,354,356,359,361,364,367,370,372,375],{"class":166,"line":227},[124,352,353],{"class":178},"const",[124,355,206],{"class":170},[124,357,358],{"class":130}," open",[124,360,331],{"class":170},[124,362,363],{"class":130}," close ",[124,365,366],{"class":170},"}",[124,368,369],{"class":170}," =",[124,371,334],{"class":126},[124,373,374],{"class":130},"(",[124,376,377],{"class":170},"{\n",[124,379,380],{"class":166,"line":237},[124,381,382],{"class":257},"  \u002F\u002F Open the modal right after it was created, the default value is `false`.\n",[124,384,385,388,391,395],{"class":166,"line":244},[124,386,387],{"class":174},"  defaultModelValue",[124,389,390],{"class":170},":",[124,392,394],{"class":393},"sfNiH"," false",[124,396,397],{"class":170},",\n",[124,399,400],{"class":166,"line":254},[124,401,402],{"class":257},"  \u002F\u002F Keep the modal mounted after it was closed, the default value is `false`.\n",[124,404,405,408,410,412],{"class":166,"line":261},[124,406,407],{"class":174},"  keepAlive",[124,409,390],{"class":170},[124,411,394],{"class":393},[124,413,397],{"class":170},[124,415,416],{"class":166,"line":273},[124,417,418],{"class":257},"  \u002F\u002F The modal component. Use `\u003CVueFinalModal>` directly or your own styled modal component.\n",[124,420,422,425,427,429],{"class":166,"line":421},9,[124,423,424],{"class":174},"  component",[124,426,390],{"class":170},[124,428,328],{"class":130},[124,430,397],{"class":170},[124,432,434,437,439],{"class":166,"line":433},10,[124,435,436],{"class":174},"  attrs",[124,438,390],{"class":170},[124,440,441],{"class":170}," {\n",[124,443,445],{"class":166,"line":444},11,[124,446,447],{"class":257},"    \u002F\u002F Bind props to the modal component (VueFinalModal in this case).\n",[124,449,451,454,456,459],{"class":166,"line":450},12,[124,452,453],{"class":174},"    clickToClose",[124,455,390],{"class":170},[124,457,458],{"class":393}," true",[124,460,397],{"class":170},[124,462,464,467,469,471],{"class":166,"line":463},13,[124,465,466],{"class":174},"    escToClose",[124,468,390],{"class":170},[124,470,458],{"class":393},[124,472,397],{"class":170},[124,474,476],{"class":166,"line":475},14,[124,477,478],{"class":257},"    \u002F\u002F Bind events to the modal component (VueFinalModal in this case).\n",[124,480,482],{"class":166,"line":481},15,[124,483,484],{"class":257},"    \u002F\u002F Any custom events can be listened for when prefixed with \"on\", e.g. \"onEventName\".\n",[124,486,488,491,493,495,498],{"class":166,"line":487},16,[124,489,490],{"class":174},"    onBeforeOpen",[124,492,131],{"class":170},[124,494,206],{"class":170},[124,496,497],{"class":257}," \u002F* on before open *\u002F",[124,499,500],{"class":170}," },\n",[124,502,504,507,509,511,514],{"class":166,"line":503},17,[124,505,506],{"class":174},"    onOpened",[124,508,131],{"class":170},[124,510,206],{"class":170},[124,512,513],{"class":257}," \u002F* on opened *\u002F",[124,515,500],{"class":170},[124,517,519,522,524,526,529],{"class":166,"line":518},18,[124,520,521],{"class":174},"    onBeforeClose",[124,523,131],{"class":170},[124,525,206],{"class":170},[124,527,528],{"class":257}," \u002F* on before close *\u002F",[124,530,500],{"class":170},[124,532,534,537,539,541,544],{"class":166,"line":533},19,[124,535,536],{"class":174},"    onClosed",[124,538,131],{"class":170},[124,540,206],{"class":170},[124,542,543],{"class":257}," \u002F* on closed *\u002F",[124,545,500],{"class":170},[124,547,549],{"class":166,"line":548},20,[124,550,551],{"class":170},"  },\n",[124,553,555,557],{"class":166,"line":554},21,[124,556,366],{"class":170},[124,558,559],{"class":130},")\n",[124,561,563],{"class":166,"line":562},22,[124,564,241],{"emptyLinePlaceholder":240},[124,566,568],{"class":166,"line":567},23,[124,569,570],{"class":257},"\u002F\u002F Open the modal\n",[124,572,574,576,578,581,584,586,588,591,593,596,598],{"class":166,"line":573},24,[124,575,303],{"class":126},[124,577,131],{"class":130},[124,579,580],{"class":170},".",[124,582,583],{"class":126},"then",[124,585,374],{"class":130},[124,587,131],{"class":170},[124,589,590],{"class":178}," =>",[124,592,206],{"class":170},[124,594,595],{"class":257}," \u002F* Do something after modal opened *\u002F",[124,597,212],{"class":170},[124,599,559],{"class":130},[124,601,603],{"class":166,"line":602},25,[124,604,605],{"class":257},"\u002F\u002F Close the modal\n",[124,607,609,611,613,615,617,619,621,623,625,628,630],{"class":166,"line":608},26,[124,610,311],{"class":126},[124,612,131],{"class":130},[124,614,580],{"class":170},[124,616,583],{"class":126},[124,618,374],{"class":130},[124,620,131],{"class":170},[124,622,590],{"class":178},[124,624,206],{"class":170},[124,626,627],{"class":257}," \u002F* Do something after modal closed *\u002F",[124,629,212],{"class":170},[124,631,559],{"class":130},[285,633,635],{"id":634},"reactive-attrs","Reactive attrs",[114,637,638,643,644,649,650,655],{},[118,639,640],{"className":120,"language":121,"style":122},[124,641,642],{"class":130},"attrs"," can also be a ",[118,645,646],{"className":120,"language":121,"style":122},[124,647,648],{"class":130},"ref",", ",[118,651,652],{"className":120,"language":121,"style":122},[124,653,654],{"class":130},"computed"," or a getter function. The modal will keep in sync with it, so you can update the modal's props dynamically without any extra API:",[156,657,659],{"className":120,"code":658,"language":121,"meta":122,"style":122},"import { ref } from 'vue'\nimport { VueFinalModal, useModal } from 'vue-final-modal'\n\nconst title = ref('Hello World!')\n\nconst { open, close } = useModal({\n  component: VueFinalModal,\n  attrs: () => ({\n    title: title.value,\n  }),\n})\n\n\u002F\u002F Updating the ref updates the opened modal as well\ntitle.value = 'Hello Vue!'\n",[118,660,661,680,702,706,729,733,755,765,781,798,808,814,818,823],{"__ignoreMap":122},[124,662,663,665,667,670,672,674,676,678],{"class":166,"line":167},[124,664,203],{"class":202},[124,666,206],{"class":170},[124,668,669],{"class":130}," ref",[124,671,212],{"class":170},[124,673,215],{"class":202},[124,675,218],{"class":170},[124,677,161],{"class":191},[124,679,224],{"class":170},[124,681,682,684,686,688,690,692,694,696,698,700],{"class":166,"line":199},[124,683,203],{"class":202},[124,685,206],{"class":170},[124,687,328],{"class":130},[124,689,331],{"class":170},[124,691,334],{"class":130},[124,693,212],{"class":170},[124,695,215],{"class":202},[124,697,218],{"class":170},[124,699,221],{"class":191},[124,701,224],{"class":170},[124,703,704],{"class":166,"line":227},[124,705,241],{"emptyLinePlaceholder":240},[124,707,708,710,713,715,717,719,722,725,727],{"class":166,"line":237},[124,709,353],{"class":178},[124,711,712],{"class":130}," title ",[124,714,185],{"class":170},[124,716,669],{"class":126},[124,718,374],{"class":130},[124,720,721],{"class":170},"'",[124,723,724],{"class":191},"Hello World!",[124,726,721],{"class":170},[124,728,559],{"class":130},[124,730,731],{"class":166,"line":244},[124,732,241],{"emptyLinePlaceholder":240},[124,734,735,737,739,741,743,745,747,749,751,753],{"class":166,"line":254},[124,736,353],{"class":178},[124,738,206],{"class":170},[124,740,358],{"class":130},[124,742,331],{"class":170},[124,744,363],{"class":130},[124,746,366],{"class":170},[124,748,369],{"class":170},[124,750,334],{"class":126},[124,752,374],{"class":130},[124,754,377],{"class":170},[124,756,757,759,761,763],{"class":166,"line":261},[124,758,424],{"class":174},[124,760,390],{"class":170},[124,762,328],{"class":130},[124,764,397],{"class":170},[124,766,767,769,771,774,776,779],{"class":166,"line":273},[124,768,436],{"class":126},[124,770,390],{"class":170},[124,772,773],{"class":170}," ()",[124,775,590],{"class":178},[124,777,778],{"class":130}," (",[124,780,377],{"class":170},[124,782,783,786,788,791,793,796],{"class":166,"line":421},[124,784,785],{"class":174},"    title",[124,787,390],{"class":170},[124,789,790],{"class":130}," title",[124,792,580],{"class":170},[124,794,795],{"class":130},"value",[124,797,397],{"class":170},[124,799,800,803,806],{"class":166,"line":433},[124,801,802],{"class":170},"  }",[124,804,805],{"class":130},")",[124,807,397],{"class":170},[124,809,810,812],{"class":166,"line":444},[124,811,366],{"class":170},[124,813,559],{"class":130},[124,815,816],{"class":166,"line":450},[124,817,241],{"emptyLinePlaceholder":240},[124,819,820],{"class":166,"line":463},[124,821,822],{"class":257},"\u002F\u002F Updating the ref updates the opened modal as well\n",[124,824,825,828,830,833,835,837,840],{"class":166,"line":475},[124,826,827],{"class":130},"title",[124,829,580],{"class":170},[124,831,832],{"class":130},"value ",[124,834,185],{"class":170},[124,836,218],{"class":170},[124,838,839],{"class":191},"Hello Vue!",[124,841,224],{"class":170},[285,843,845],{"id":844},"keeping-the-modal-alive","Keeping the modal alive",[114,847,848,849,855,856,866,867,873,874,884,885,892,893,899,900,902],{},"By default the modal is unmounted when it closes and mounted again by the next ",[118,850,851,853],{"className":120,"language":121,"style":122},[124,852,303],{"class":126},[124,854,131],{"class":130},". With ",[118,857,858,862,864],{"className":120,"language":121,"style":122},[124,859,861],{"class":860},"sBMFI","keepAlive",[124,863,390],{"class":170},[124,865,458],{"class":393}," it stays mounted after ",[118,868,869,871],{"className":120,"language":121,"style":122},[124,870,311],{"class":126},[124,872,131],{"class":130},", hidden with ",[118,875,876,879,881],{"className":120,"language":121,"style":122},[124,877,878],{"class":860},"display",[124,880,390],{"class":170},[124,882,883],{"class":130}," none",", so its state survives. ",[118,886,887,890],{"className":120,"language":121,"style":122},[124,888,889],{"class":126},"destroy",[124,891,131],{"class":130}," unmounts it when you are done with it. A kept-alive modal is not destroyed when the component that created it unmounts, so call ",[118,894,895,897],{"className":120,"language":121,"style":122},[124,896,889],{"class":126},[124,898,131],{"class":130}," yourself. See the ",[134,901,77],{"href":78}," example.",[156,904,906],{"className":120,"code":905,"language":121,"meta":122,"style":122},"import { useModal } from 'vue-final-modal'\nimport ModalDraft from '.\u002FModalDraft.vue'\n\nconst { open, close, destroy } = useModal({\n  keepAlive: true,\n  component: ModalDraft,\n})\n\nawait open()\nawait close() \u002F\u002F Still mounted, the draft inside is kept\nawait open() \u002F\u002F The draft is still there\ndestroy() \u002F\u002F Unmounted, the next open() starts from a fresh component\n",[118,907,908,926,943,947,975,985,996,1002,1006,1016,1028,1039],{"__ignoreMap":122},[124,909,910,912,914,916,918,920,922,924],{"class":166,"line":167},[124,911,203],{"class":202},[124,913,206],{"class":170},[124,915,334],{"class":130},[124,917,212],{"class":170},[124,919,215],{"class":202},[124,921,218],{"class":170},[124,923,221],{"class":191},[124,925,224],{"class":170},[124,927,928,930,933,936,938,941],{"class":166,"line":199},[124,929,203],{"class":202},[124,931,932],{"class":130}," ModalDraft ",[124,934,935],{"class":202},"from",[124,937,218],{"class":170},[124,939,940],{"class":191},".\u002FModalDraft.vue",[124,942,224],{"class":170},[124,944,945],{"class":166,"line":227},[124,946,241],{"emptyLinePlaceholder":240},[124,948,949,951,953,955,957,960,962,965,967,969,971,973],{"class":166,"line":237},[124,950,353],{"class":178},[124,952,206],{"class":170},[124,954,358],{"class":130},[124,956,331],{"class":170},[124,958,959],{"class":130}," close",[124,961,331],{"class":170},[124,963,964],{"class":130}," destroy ",[124,966,366],{"class":170},[124,968,369],{"class":170},[124,970,334],{"class":126},[124,972,374],{"class":130},[124,974,377],{"class":170},[124,976,977,979,981,983],{"class":166,"line":244},[124,978,407],{"class":174},[124,980,390],{"class":170},[124,982,458],{"class":393},[124,984,397],{"class":170},[124,986,987,989,991,994],{"class":166,"line":254},[124,988,424],{"class":174},[124,990,390],{"class":170},[124,992,993],{"class":130}," ModalDraft",[124,995,397],{"class":170},[124,997,998,1000],{"class":166,"line":261},[124,999,366],{"class":170},[124,1001,559],{"class":130},[124,1003,1004],{"class":166,"line":273},[124,1005,241],{"emptyLinePlaceholder":240},[124,1007,1008,1011,1013],{"class":166,"line":421},[124,1009,1010],{"class":202},"await",[124,1012,358],{"class":126},[124,1014,1015],{"class":130},"()\n",[124,1017,1018,1020,1022,1025],{"class":166,"line":433},[124,1019,1010],{"class":202},[124,1021,959],{"class":126},[124,1023,1024],{"class":130},"() ",[124,1026,1027],{"class":257},"\u002F\u002F Still mounted, the draft inside is kept\n",[124,1029,1030,1032,1034,1036],{"class":166,"line":444},[124,1031,1010],{"class":202},[124,1033,358],{"class":126},[124,1035,1024],{"class":130},[124,1037,1038],{"class":257},"\u002F\u002F The draft is still there\n",[124,1040,1041,1043,1045],{"class":166,"line":450},[124,1042,889],{"class":126},[124,1044,1024],{"class":130},[124,1046,1047],{"class":257},"\u002F\u002F Unmounted, the next open() starts from a fresh component\n",[285,1049,1051],{"id":1050},"passing-slots","Passing Slots",[1053,1054,1056,1057],"h4",{"id":1055},"with-string","with ",[118,1058,1059],{},"String",[156,1061,1063],{"className":120,"code":1062,"language":121,"meta":122,"style":122},"import { VueFinalModal, useModal } from 'vue-final-modal'\n\nconst { open, close } = useModal({\n  component: VueFinalModal,\n  attrs: { ... },\n  slots: {\n    default: '\u003Cp>The content of the modal\u003C\u002Fp>'\n  }\n})\n",[118,1064,1065,1087,1091,1113,1123,1136,1145,1159,1164],{"__ignoreMap":122},[124,1066,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085],{"class":166,"line":167},[124,1068,203],{"class":202},[124,1070,206],{"class":170},[124,1072,328],{"class":130},[124,1074,331],{"class":170},[124,1076,334],{"class":130},[124,1078,212],{"class":170},[124,1080,215],{"class":202},[124,1082,218],{"class":170},[124,1084,221],{"class":191},[124,1086,224],{"class":170},[124,1088,1089],{"class":166,"line":199},[124,1090,241],{"emptyLinePlaceholder":240},[124,1092,1093,1095,1097,1099,1101,1103,1105,1107,1109,1111],{"class":166,"line":227},[124,1094,353],{"class":178},[124,1096,206],{"class":170},[124,1098,358],{"class":130},[124,1100,331],{"class":170},[124,1102,363],{"class":130},[124,1104,366],{"class":170},[124,1106,369],{"class":170},[124,1108,334],{"class":126},[124,1110,374],{"class":130},[124,1112,377],{"class":170},[124,1114,1115,1117,1119,1121],{"class":166,"line":237},[124,1116,424],{"class":174},[124,1118,390],{"class":170},[124,1120,328],{"class":130},[124,1122,397],{"class":170},[124,1124,1125,1127,1129,1131,1134],{"class":166,"line":244},[124,1126,436],{"class":174},[124,1128,390],{"class":170},[124,1130,206],{"class":170},[124,1132,1133],{"class":170}," ...",[124,1135,500],{"class":170},[124,1137,1138,1141,1143],{"class":166,"line":254},[124,1139,1140],{"class":174},"  slots",[124,1142,390],{"class":170},[124,1144,441],{"class":170},[124,1146,1147,1150,1152,1154,1157],{"class":166,"line":261},[124,1148,1149],{"class":174},"    default",[124,1151,390],{"class":170},[124,1153,218],{"class":170},[124,1155,1156],{"class":191},"\u003Cp>The content of the modal\u003C\u002Fp>",[124,1158,224],{"class":170},[124,1160,1161],{"class":166,"line":273},[124,1162,1163],{"class":170},"  }\n",[124,1165,1166,1168],{"class":166,"line":421},[124,1167,366],{"class":170},[124,1169,559],{"class":130},[1171,1172,1173,1174,1179],"warning",{},"Security Note: ",[134,1175,1176],{"href":1176,"rel":1177},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fbuilt-in-directives.html#v-html",[1178],"nofollow","\nDynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.",[1053,1181,1056,1183],{"id":1182},"with-component",[118,1184,1185],{},"Component",[156,1187,1189],{"className":120,"code":1188,"language":121,"meta":122,"style":122},"import { VueFinalModal, useModal } from 'vue-final-modal'\n\u002F\u002F ModalContent is the component you want to put into the modal content\nimport ModalContent from '.\u002FModalContent.vue'\n\n\nconst { open, close } = useModal({\n  component: VueFinalModal,\n  attrs: { ... },\n  slots: {\n    \u002F\u002F You can import your own component as a slot and put it to `slots.default` without binding props and events.\n    default: ModalContent\n  }\n})\n",[118,1190,1191,1213,1218,1234,1238,1242,1264,1274,1286,1294,1299,1308,1312],{"__ignoreMap":122},[124,1192,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211],{"class":166,"line":167},[124,1194,203],{"class":202},[124,1196,206],{"class":170},[124,1198,328],{"class":130},[124,1200,331],{"class":170},[124,1202,334],{"class":130},[124,1204,212],{"class":170},[124,1206,215],{"class":202},[124,1208,218],{"class":170},[124,1210,221],{"class":191},[124,1212,224],{"class":170},[124,1214,1215],{"class":166,"line":199},[124,1216,1217],{"class":257},"\u002F\u002F ModalContent is the component you want to put into the modal content\n",[124,1219,1220,1222,1225,1227,1229,1232],{"class":166,"line":227},[124,1221,203],{"class":202},[124,1223,1224],{"class":130}," ModalContent ",[124,1226,935],{"class":202},[124,1228,218],{"class":170},[124,1230,1231],{"class":191},".\u002FModalContent.vue",[124,1233,224],{"class":170},[124,1235,1236],{"class":166,"line":237},[124,1237,241],{"emptyLinePlaceholder":240},[124,1239,1240],{"class":166,"line":244},[124,1241,241],{"emptyLinePlaceholder":240},[124,1243,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262],{"class":166,"line":254},[124,1245,353],{"class":178},[124,1247,206],{"class":170},[124,1249,358],{"class":130},[124,1251,331],{"class":170},[124,1253,363],{"class":130},[124,1255,366],{"class":170},[124,1257,369],{"class":170},[124,1259,334],{"class":126},[124,1261,374],{"class":130},[124,1263,377],{"class":170},[124,1265,1266,1268,1270,1272],{"class":166,"line":261},[124,1267,424],{"class":174},[124,1269,390],{"class":170},[124,1271,328],{"class":130},[124,1273,397],{"class":170},[124,1275,1276,1278,1280,1282,1284],{"class":166,"line":273},[124,1277,436],{"class":174},[124,1279,390],{"class":170},[124,1281,206],{"class":170},[124,1283,1133],{"class":170},[124,1285,500],{"class":170},[124,1287,1288,1290,1292],{"class":166,"line":421},[124,1289,1140],{"class":174},[124,1291,390],{"class":170},[124,1293,441],{"class":170},[124,1295,1296],{"class":166,"line":433},[124,1297,1298],{"class":257},"    \u002F\u002F You can import your own component as a slot and put it to `slots.default` without binding props and events.\n",[124,1300,1301,1303,1305],{"class":166,"line":444},[124,1302,1149],{"class":174},[124,1304,390],{"class":170},[124,1306,1307],{"class":130}," ModalContent\n",[124,1309,1310],{"class":166,"line":450},[124,1311,1163],{"class":170},[124,1313,1314,1316],{"class":166,"line":463},[124,1315,366],{"class":170},[124,1317,559],{"class":130},[1053,1319,1056,1321,649,1323,306,1326],{"id":1320},"with-component-props-and-events",[118,1322,1185],{},[118,1324,1325],{},"Props",[118,1327,1328],{},"Events",[156,1330,1332],{"className":120,"code":1331,"language":121,"meta":122,"style":122},"import { VueFinalModal, defineTemplate, useModal } from 'vue-final-modal'\n\u002F\u002F ModalContent is the component you want to put into the modal content\nimport ModalContent from '.\u002FModalContent.vue'\n\nconst { open, close } = useModal({\n  component: VueFinalModal,\n  attrs: { ... },\n  slots: {\n    default: defineTemplate({\n      component: ModalContent,\n      attrs: {\n        \u002F\u002F Bind ModalContent props\n        title: 'Hello world!'\n        \u002F\u002F Bind ModalContent events\n        onConfirm() {  }\n      }\n    })\n  }\n})\n",[118,1333,1334,1361,1365,1379,1383,1405,1415,1427,1435,1447,1459,1468,1473,1487,1492,1504,1509,1516,1520],{"__ignoreMap":122},[124,1335,1336,1338,1340,1342,1344,1347,1349,1351,1353,1355,1357,1359],{"class":166,"line":167},[124,1337,203],{"class":202},[124,1339,206],{"class":170},[124,1341,328],{"class":130},[124,1343,331],{"class":170},[124,1345,1346],{"class":130}," defineTemplate",[124,1348,331],{"class":170},[124,1350,334],{"class":130},[124,1352,212],{"class":170},[124,1354,215],{"class":202},[124,1356,218],{"class":170},[124,1358,221],{"class":191},[124,1360,224],{"class":170},[124,1362,1363],{"class":166,"line":199},[124,1364,1217],{"class":257},[124,1366,1367,1369,1371,1373,1375,1377],{"class":166,"line":227},[124,1368,203],{"class":202},[124,1370,1224],{"class":130},[124,1372,935],{"class":202},[124,1374,218],{"class":170},[124,1376,1231],{"class":191},[124,1378,224],{"class":170},[124,1380,1381],{"class":166,"line":237},[124,1382,241],{"emptyLinePlaceholder":240},[124,1384,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403],{"class":166,"line":244},[124,1386,353],{"class":178},[124,1388,206],{"class":170},[124,1390,358],{"class":130},[124,1392,331],{"class":170},[124,1394,363],{"class":130},[124,1396,366],{"class":170},[124,1398,369],{"class":170},[124,1400,334],{"class":126},[124,1402,374],{"class":130},[124,1404,377],{"class":170},[124,1406,1407,1409,1411,1413],{"class":166,"line":254},[124,1408,424],{"class":174},[124,1410,390],{"class":170},[124,1412,328],{"class":130},[124,1414,397],{"class":170},[124,1416,1417,1419,1421,1423,1425],{"class":166,"line":261},[124,1418,436],{"class":174},[124,1420,390],{"class":170},[124,1422,206],{"class":170},[124,1424,1133],{"class":170},[124,1426,500],{"class":170},[124,1428,1429,1431,1433],{"class":166,"line":273},[124,1430,1140],{"class":174},[124,1432,390],{"class":170},[124,1434,441],{"class":170},[124,1436,1437,1439,1441,1443,1445],{"class":166,"line":421},[124,1438,1149],{"class":174},[124,1440,390],{"class":170},[124,1442,1346],{"class":126},[124,1444,374],{"class":130},[124,1446,377],{"class":170},[124,1448,1449,1452,1454,1457],{"class":166,"line":433},[124,1450,1451],{"class":174},"      component",[124,1453,390],{"class":170},[124,1455,1456],{"class":130}," ModalContent",[124,1458,397],{"class":170},[124,1460,1461,1464,1466],{"class":166,"line":444},[124,1462,1463],{"class":174},"      attrs",[124,1465,390],{"class":170},[124,1467,441],{"class":170},[124,1469,1470],{"class":166,"line":450},[124,1471,1472],{"class":257},"        \u002F\u002F Bind ModalContent props\n",[124,1474,1475,1478,1480,1482,1485],{"class":166,"line":463},[124,1476,1477],{"class":174},"        title",[124,1479,390],{"class":170},[124,1481,218],{"class":170},[124,1483,1484],{"class":191},"Hello world!",[124,1486,224],{"class":170},[124,1488,1489],{"class":166,"line":475},[124,1490,1491],{"class":257},"        \u002F\u002F Bind ModalContent events\n",[124,1493,1494,1497,1499,1502],{"class":166,"line":481},[124,1495,1496],{"class":126},"        onConfirm",[124,1498,1024],{"class":130},[124,1500,1501],{"class":170},"{",[124,1503,1163],{"class":170},[124,1505,1506],{"class":166,"line":487},[124,1507,1508],{"class":170},"      }\n",[124,1510,1511,1514],{"class":166,"line":503},[124,1512,1513],{"class":170},"    }",[124,1515,559],{"class":130},[124,1517,1518],{"class":166,"line":518},[124,1519,1163],{"class":170},[124,1521,1522,1524],{"class":166,"line":533},[124,1523,366],{"class":170},[124,1525,559],{"class":130},[1527,1528,1529,1532,1533,1540,1541,1548],"note",{},[118,1530,1531],{},"defineTemplate()"," is a function that provides better DX for type checking. It just returns the same object you passed in. ",[118,1534,1535,1538],{"className":120,"language":121,"style":122},[124,1536,1537],{"class":126},"useModalSlot",[124,1539,131],{"class":130}," from 4.x does the same and keeps working, and ",[118,1542,1543,1546],{"className":120,"language":121,"style":122},[124,1544,1545],{"class":126},"defineModal",[124,1547,131],{"class":130}," is the same kind of helper for the template of a whole modal: its component, attrs and slots.",[145,1550,1552,1553,306,1556,1559],{"id":1551},"what-open-and-close-resolve-with","What ",[118,1554,1555],{},"open()",[118,1557,1558],{},"close()"," resolve with",[114,1561,1562,1568,1569,1578,1579,1568,1585,1594],{},[118,1563,1564,1566],{"className":120,"language":121,"style":122},[124,1565,303],{"class":126},[124,1567,131],{"class":130}," resolves with ",[118,1570,1571,1573,1576],{"className":120,"language":121,"style":122},[124,1572,721],{"class":170},[124,1574,1575],{"class":191},"opened",[124,1577,721],{"class":170}," once the enter transition has finished, and ",[118,1580,1581,1583],{"className":120,"language":121,"style":122},[124,1582,311],{"class":126},[124,1584,131],{"class":130},[118,1586,1587,1589,1592],{"className":120,"language":121,"style":122},[124,1588,721],{"class":170},[124,1590,1591],{"class":191},"closed",[124,1593,721],{"class":170}," once the leave transition has finished. They never stay pending: when the modal does not get there, they resolve with a message that says why, so compare the result to know what happened.",[156,1596,1598],{"className":120,"code":1597,"language":121,"meta":122,"style":122},"const { open } = useModal({ component: ModalConfirm })\n\nif (await open() === 'opened') {\n  \u002F\u002F The modal is opened and its enter transition has finished\n}\n",[118,1599,1600,1631,1635,1662,1667],{"__ignoreMap":122},[124,1601,1602,1604,1606,1609,1611,1613,1615,1617,1619,1622,1624,1627,1629],{"class":166,"line":167},[124,1603,353],{"class":178},[124,1605,206],{"class":170},[124,1607,1608],{"class":130}," open ",[124,1610,366],{"class":170},[124,1612,369],{"class":170},[124,1614,334],{"class":126},[124,1616,374],{"class":130},[124,1618,1501],{"class":170},[124,1620,1621],{"class":174}," component",[124,1623,390],{"class":170},[124,1625,1626],{"class":130}," ModalConfirm ",[124,1628,366],{"class":170},[124,1630,559],{"class":130},[124,1632,1633],{"class":166,"line":199},[124,1634,241],{"emptyLinePlaceholder":240},[124,1636,1637,1640,1642,1644,1646,1648,1651,1653,1655,1657,1660],{"class":166,"line":227},[124,1638,1639],{"class":202},"if",[124,1641,778],{"class":130},[124,1643,1010],{"class":202},[124,1645,358],{"class":126},[124,1647,1024],{"class":130},[124,1649,1650],{"class":170},"===",[124,1652,218],{"class":170},[124,1654,1575],{"class":191},[124,1656,721],{"class":170},[124,1658,1659],{"class":130},") ",[124,1661,377],{"class":170},[124,1663,1664],{"class":166,"line":237},[124,1665,1666],{"class":257},"  \u002F\u002F The modal is opened and its enter transition has finished\n",[124,1668,1669],{"class":166,"line":244},[124,1670,1671],{"class":170},"}\n",[114,1673,1674],{},"They resolve with a message when:",[1676,1677,1678,1682,1707,1716],"ul",{},[1679,1680,1681],"li",{},"the modal is already opened, or already closed,",[1679,1683,1684,138,1689,1694,1695,331],{},[118,1685,1686],{"className":120,"language":121,"style":122},[124,1687,1688],{"class":130},"beforeOpen",[118,1690,1691],{"className":120,"language":121,"style":122},[124,1692,1693],{"class":130},"beforeClose"," called ",[118,1696,1697,1700,1702,1705],{"className":120,"language":121,"style":122},[124,1698,1699],{"class":130},"event",[124,1701,580],{"class":170},[124,1703,1704],{"class":126},"stop",[124,1706,131],{"class":130},[1679,1708,1709,1710,1715],{},"the modal was toggled again before it finished, for example closed by the ",[118,1711,1712],{"className":120,"language":121,"style":122},[124,1713,1714],{"class":130},"esc"," key while it was still opening,",[1679,1717,1718,1719,1725],{},"the modal was destroyed before it finished, by ",[118,1720,1721,1723],{"className":120,"language":121,"style":122},[124,1722,889],{"class":126},[124,1724,131],{"class":130}," or because the component that created it unmounted.",[114,1727,1728,1729,1735,1736,1568,1742,306,1750,1756,1757,580],{},"A ",[118,1730,1731,1733],{"className":120,"language":121,"style":122},[124,1732,311],{"class":126},[124,1734,131],{"class":130}," called while the modal is still opening waits until it has opened, then closes it: ",[118,1737,1738,1740],{"className":120,"language":121,"style":122},[124,1739,303],{"class":126},[124,1741,131],{"class":130},[118,1743,1744,1746,1748],{"className":120,"language":121,"style":122},[124,1745,721],{"class":170},[124,1747,1575],{"class":191},[124,1749,721],{"class":170},[118,1751,1752,1754],{"className":120,"language":121,"style":122},[124,1753,311],{"class":126},[124,1755,131],{"class":130}," with ",[118,1758,1759,1761,1763],{"className":120,"language":121,"style":122},[124,1760,721],{"class":170},[124,1762,1591],{"class":191},[124,1764,721],{"class":170},[145,1766,1768],{"id":1767},"server-side-rendering","Server-side rendering",[114,1770,1771,1772,1781,1782,1788,1789,1796,1797,1568,1803,1811],{},"A modal opened while a component sets up, with ",[118,1773,1774,1777,1779],{"className":120,"language":121,"style":122},[124,1775,1776],{"class":860},"defaultModelValue",[124,1778,390],{"class":170},[124,1780,458],{"class":393}," or an ",[118,1783,1784,1786],{"className":120,"language":121,"style":122},[124,1785,303],{"class":126},[124,1787,131],{"class":130}," called in ",[118,1790,1791,1794],{"className":120,"language":121,"style":122},[124,1792,1793],{"class":126},"setup",[124,1795,131],{"class":130},", is part of the server HTML and hydrates already open. On the server its ",[118,1798,1799,1801],{"className":120,"language":121,"style":122},[124,1800,303],{"class":126},[124,1802,131],{"class":130},[118,1804,1805,1807,1809],{"className":120,"language":121,"style":122},[124,1806,721],{"class":170},[124,1808,1575],{"class":191},[124,1810,721],{"class":170}," right away.",[114,1813,1814,1815,1821,1822,1828],{},"A modal opened outside a component, for example from a Nuxt plugin or a route middleware, is skipped on the server with a warning, and its ",[118,1816,1817,1819],{"className":120,"language":121,"style":122},[124,1818,303],{"class":126},[124,1820,131],{"class":130}," resolves right away there. In the browser it opens once the app has mounted. Do not await that ",[118,1823,1824,1826],{"className":120,"language":121,"style":122},[124,1825,303],{"class":126},[124,1827,131],{"class":130}," before the app mounts: it settles once the modal has opened.",[114,1830,1831,1832,1834,1835,1841,1842,1851,1852,1855,1856,1862,1863,1865,1866,1875],{},"After an ",[118,1833,1010],{}," in ",[118,1836,1837,1839],{"className":120,"language":121,"style":122},[124,1838,1793],{"class":126},[124,1840,131],{"class":130},", it depends on where the component sits. A component around ",[118,1843,1844,1846,1848],{"className":120,"language":121,"style":122},[124,1845,171],{"class":130},[124,1847,267],{"class":860},[124,1849,1850],{"class":130},">",", such as ",[118,1853,1854],{},"app.vue",", finishes its setup before the container renders, so its modal is still part of the server HTML, as long as it calls ",[118,1857,1858,1860],{"className":120,"language":121,"style":122},[124,1859,127],{"class":126},[124,1861,131],{"class":130}," before the ",[118,1864,1010],{}," or uses ",[118,1867,1868,1870,1873],{"className":120,"language":121,"style":122},[124,1869,171],{"class":170},[124,1871,1872],{"class":130},"script setup",[124,1874,1850],{"class":170},". The server does not wait for a component next to the container, such as a page: its modal shows in the browser only, after hydration.",[145,1877,1879],{"id":1878},"type-declarations","Type Declarations",[1527,1881,1882,1883,580],{},"Checkout ",[134,1884,1885],{"href":30},"Types section",[1887,1888,1889],"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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":122,"searchDepth":199,"depth":199,"links":1891},[1892,1893,1899,1901,1902],{"id":147,"depth":199,"text":148},{"id":282,"depth":199,"text":283,"children":1894},[1895,1896,1897,1898],{"id":287,"depth":227,"text":288},{"id":634,"depth":227,"text":635},{"id":844,"depth":227,"text":845},{"id":1050,"depth":227,"text":1051},{"id":1551,"depth":199,"text":1900},"What open() and close() resolve with",{"id":1767,"depth":199,"text":1768},{"id":1878,"depth":199,"text":1879},"A composable function to define a dynamic modal.","md",null,{},{"title":60,"description":1903},"GsJgRDUWhMiE60q3ulH8Nb94VmjnlJkZSKXk7jVPqWE",[1910,1912],{"title":50,"path":51,"stem":52,"description":1911,"children":-1},"A container for the dynamic modals created by useModal().",{"title":64,"path":65,"stem":66,"description":1913,"children":-1},"useVfm(){lang=ts} provides global state for the modal components and also provides functions that can be used to control the modal components.",1791743377608]