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