[{"data":1,"prerenderedAt":739},["ShallowReactive",2],{"navigation_docs":3,"-use-cases-modal-bottom":108,"-use-cases-modal-bottom-surround":734},[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":93,"body":110,"description":726,"extension":727,"links":728,"meta":729,"navigation":384,"path":94,"seo":732,"stem":95,"__hash__":733},"docs\u002F4.use-cases\u002F6.modal-bottom.md",{"type":111,"value":112,"toc":721},"minimark",[113,118,448,455,717],[114,115,117],"h2",{"id":116},"preview","Preview",[119,120,121,124],"code-preview",{},[122,123],"modal-bottom-preview",{},[125,126,128],"template",{"v-slot:code":127},"",[129,130,135],"pre",{"className":131,"code":132,"filename":133,"language":134,"meta":127,"style":127},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003Cscript setup lang=\"ts\">\n  import { useModal } from 'vue-final-modal'\n  import ModalBottom from '.\u002FModalBottom.vue'\n  const { open, close } = useModal({\n    component: ModalBottom,\n    attrs: {\n      title: 'Hello World!',\n      onClose() {\n        close()\n      },\n    },\n    slots: {\n      default: '\u003Cp>ModalBottom: The content of the modal\u003C\u002Fp>',\n    },\n  })\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"() => open()\">\n      Open Modal\n    \u003C\u002FVButton>\n\n  \u003C\u002Ftemplate>\n","Preview.vue","vue",[136,137,138,173,202,220,252,267,278,296,307,316,322,328,338,355,360,369,379,386,395,418,424,434,439],"code",{"__ignoreMap":127},[139,140,143,147,151,155,158,161,164,168,170],"span",{"class":141,"line":142},"line",1,[139,144,146],{"class":145},"sMK4o","  \u003C",[139,148,150],{"class":149},"swJcz","script",[139,152,154],{"class":153},"spNyl"," setup",[139,156,157],{"class":153}," lang",[139,159,160],{"class":145},"=",[139,162,163],{"class":145},"\"",[139,165,167],{"class":166},"sfazB","ts",[139,169,163],{"class":145},[139,171,172],{"class":145},">\n",[139,174,176,180,183,187,190,193,196,199],{"class":141,"line":175},2,[139,177,179],{"class":178},"s7zQu","  import",[139,181,182],{"class":145}," {",[139,184,186],{"class":185},"sTEyZ"," useModal",[139,188,189],{"class":145}," }",[139,191,192],{"class":178}," from",[139,194,195],{"class":145}," '",[139,197,198],{"class":166},"vue-final-modal",[139,200,201],{"class":145},"'\n",[139,203,205,207,210,213,215,218],{"class":141,"line":204},3,[139,206,179],{"class":178},[139,208,209],{"class":185}," ModalBottom ",[139,211,212],{"class":178},"from",[139,214,195],{"class":145},[139,216,217],{"class":166},".\u002FModalBottom.vue",[139,219,201],{"class":145},[139,221,223,226,228,231,234,237,240,243,246,249],{"class":141,"line":222},4,[139,224,225],{"class":153},"  const",[139,227,182],{"class":145},[139,229,230],{"class":185}," open",[139,232,233],{"class":145},",",[139,235,236],{"class":185}," close ",[139,238,239],{"class":145},"}",[139,241,242],{"class":145}," =",[139,244,186],{"class":245},"s2Zo4",[139,247,248],{"class":185},"(",[139,250,251],{"class":145},"{\n",[139,253,255,258,261,264],{"class":141,"line":254},5,[139,256,257],{"class":149},"    component",[139,259,260],{"class":145},":",[139,262,263],{"class":185}," ModalBottom",[139,265,266],{"class":145},",\n",[139,268,270,273,275],{"class":141,"line":269},6,[139,271,272],{"class":149},"    attrs",[139,274,260],{"class":145},[139,276,277],{"class":145}," {\n",[139,279,281,284,286,288,291,294],{"class":141,"line":280},7,[139,282,283],{"class":149},"      title",[139,285,260],{"class":145},[139,287,195],{"class":145},[139,289,290],{"class":166},"Hello World!",[139,292,293],{"class":145},"'",[139,295,266],{"class":145},[139,297,299,302,305],{"class":141,"line":298},8,[139,300,301],{"class":149},"      onClose",[139,303,304],{"class":145},"()",[139,306,277],{"class":145},[139,308,310,313],{"class":141,"line":309},9,[139,311,312],{"class":245},"        close",[139,314,315],{"class":149},"()\n",[139,317,319],{"class":141,"line":318},10,[139,320,321],{"class":145},"      },\n",[139,323,325],{"class":141,"line":324},11,[139,326,327],{"class":145},"    },\n",[139,329,331,334,336],{"class":141,"line":330},12,[139,332,333],{"class":149},"    slots",[139,335,260],{"class":145},[139,337,277],{"class":145},[139,339,341,344,346,348,351,353],{"class":141,"line":340},13,[139,342,343],{"class":149},"      default",[139,345,260],{"class":145},[139,347,195],{"class":145},[139,349,350],{"class":166},"\u003Cp>ModalBottom: The content of the modal\u003C\u002Fp>",[139,352,293],{"class":145},[139,354,266],{"class":145},[139,356,358],{"class":141,"line":357},14,[139,359,327],{"class":145},[139,361,363,366],{"class":141,"line":362},15,[139,364,365],{"class":145},"  }",[139,367,368],{"class":185},")\n",[139,370,372,375,377],{"class":141,"line":371},16,[139,373,374],{"class":145},"  \u003C\u002F",[139,376,150],{"class":149},[139,378,172],{"class":145},[139,380,382],{"class":141,"line":381},17,[139,383,385],{"emptyLinePlaceholder":384},true,"\n",[139,387,389,391,393],{"class":141,"line":388},18,[139,390,146],{"class":145},[139,392,125],{"class":149},[139,394,172],{"class":145},[139,396,398,401,404,407,409,411,414,416],{"class":141,"line":397},19,[139,399,400],{"class":145},"    \u003C",[139,402,403],{"class":149},"VButton",[139,405,406],{"class":153}," @click",[139,408,160],{"class":145},[139,410,163],{"class":145},[139,412,413],{"class":166},"() => open()",[139,415,163],{"class":145},[139,417,172],{"class":145},[139,419,421],{"class":141,"line":420},20,[139,422,423],{"class":185},"      Open Modal\n",[139,425,427,430,432],{"class":141,"line":426},21,[139,428,429],{"class":145},"    \u003C\u002F",[139,431,403],{"class":149},[139,433,172],{"class":145},[139,435,437],{"class":141,"line":436},22,[139,438,385],{"emptyLinePlaceholder":384},[139,440,442,444,446],{"class":141,"line":441},23,[139,443,374],{"class":145},[139,445,125],{"class":149},[139,447,172],{"class":145},[114,449,451,454],{"id":450},"modalbottom-component",[136,452,453],{},"\u003CModalBottom>"," component",[456,457,458],"code-group",{},[129,459,462],{"className":131,"code":460,"filename":461,"language":134,"meta":127,"style":127},"  \u003Cscript setup lang=\"ts\">\n  import { VueFinalModal } from 'vue-final-modal'\n\n  defineProps\u003C{\n    title?: string\n  }>()\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      content-class=\"absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2\"\n      swipe-to-close=\"down\"\n      content-transition=\"vfm-slide-down\"\n      overlay-transition=\"vfm-fade\"\n    >\n      \u003Ch1 class=\"text-xl\">\n        {{ title }}\n      \u003C\u002Fh1>\n      \u003Cdiv class=\"text-3xl\">Swipe down to close the modal\u003C\u002Fdiv>\n      \u003Cslot \u002F>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n","ModalBottom.vue",[136,463,464,484,503,507,515,527,534,542,546,554,561,576,590,604,618,623,645,650,659,690,700,709],{"__ignoreMap":127},[139,465,466,468,470,472,474,476,478,480,482],{"class":141,"line":142},[139,467,146],{"class":145},[139,469,150],{"class":149},[139,471,154],{"class":153},[139,473,157],{"class":153},[139,475,160],{"class":145},[139,477,163],{"class":145},[139,479,167],{"class":166},[139,481,163],{"class":145},[139,483,172],{"class":145},[139,485,486,488,490,493,495,497,499,501],{"class":141,"line":175},[139,487,179],{"class":178},[139,489,182],{"class":145},[139,491,492],{"class":185}," VueFinalModal",[139,494,189],{"class":145},[139,496,192],{"class":178},[139,498,195],{"class":145},[139,500,198],{"class":166},[139,502,201],{"class":145},[139,504,505],{"class":141,"line":204},[139,506,385],{"emptyLinePlaceholder":384},[139,508,509,512],{"class":141,"line":222},[139,510,511],{"class":245},"  defineProps",[139,513,514],{"class":145},"\u003C{\n",[139,516,517,520,523],{"class":141,"line":254},[139,518,519],{"class":149},"    title",[139,521,522],{"class":145},"?:",[139,524,526],{"class":525},"sBMFI"," string\n",[139,528,529,532],{"class":141,"line":269},[139,530,531],{"class":145},"  }>",[139,533,315],{"class":185},[139,535,536,538,540],{"class":141,"line":280},[139,537,374],{"class":145},[139,539,150],{"class":149},[139,541,172],{"class":145},[139,543,544],{"class":141,"line":298},[139,545,385],{"emptyLinePlaceholder":384},[139,547,548,550,552],{"class":141,"line":309},[139,549,146],{"class":145},[139,551,125],{"class":149},[139,553,172],{"class":145},[139,555,556,558],{"class":141,"line":318},[139,557,400],{"class":145},[139,559,560],{"class":149},"VueFinalModal\n",[139,562,563,566,568,570,573],{"class":141,"line":324},[139,564,565],{"class":153},"      content-class",[139,567,160],{"class":145},[139,569,163],{"class":145},[139,571,572],{"class":166},"absolute bottom-0 w-full p-4 bg-white dark:bg-gray-900 space-y-2",[139,574,575],{"class":145},"\"\n",[139,577,578,581,583,585,588],{"class":141,"line":330},[139,579,580],{"class":153},"      swipe-to-close",[139,582,160],{"class":145},[139,584,163],{"class":145},[139,586,587],{"class":166},"down",[139,589,575],{"class":145},[139,591,592,595,597,599,602],{"class":141,"line":340},[139,593,594],{"class":153},"      content-transition",[139,596,160],{"class":145},[139,598,163],{"class":145},[139,600,601],{"class":166},"vfm-slide-down",[139,603,575],{"class":145},[139,605,606,609,611,613,616],{"class":141,"line":357},[139,607,608],{"class":153},"      overlay-transition",[139,610,160],{"class":145},[139,612,163],{"class":145},[139,614,615],{"class":166},"vfm-fade",[139,617,575],{"class":145},[139,619,620],{"class":141,"line":362},[139,621,622],{"class":145},"    >\n",[139,624,625,628,631,634,636,638,641,643],{"class":141,"line":371},[139,626,627],{"class":145},"      \u003C",[139,629,630],{"class":149},"h1",[139,632,633],{"class":153}," class",[139,635,160],{"class":145},[139,637,163],{"class":145},[139,639,640],{"class":166},"text-xl",[139,642,163],{"class":145},[139,644,172],{"class":145},[139,646,647],{"class":141,"line":381},[139,648,649],{"class":185},"        {{ title }}\n",[139,651,652,655,657],{"class":141,"line":388},[139,653,654],{"class":145},"      \u003C\u002F",[139,656,630],{"class":149},[139,658,172],{"class":145},[139,660,661,663,666,668,670,672,675,677,680,683,686,688],{"class":141,"line":397},[139,662,627],{"class":145},[139,664,665],{"class":149},"div",[139,667,633],{"class":153},[139,669,160],{"class":145},[139,671,163],{"class":145},[139,673,674],{"class":166},"text-3xl",[139,676,163],{"class":145},[139,678,679],{"class":145},">",[139,681,682],{"class":185},"Swipe down to close the modal",[139,684,685],{"class":145},"\u003C\u002F",[139,687,665],{"class":149},[139,689,172],{"class":145},[139,691,692,694,697],{"class":141,"line":420},[139,693,627],{"class":145},[139,695,696],{"class":149},"slot",[139,698,699],{"class":145}," \u002F>\n",[139,701,702,704,707],{"class":141,"line":426},[139,703,429],{"class":145},[139,705,706],{"class":149},"VueFinalModal",[139,708,172],{"class":145},[139,710,711,713,715],{"class":141,"line":436},[139,712,374],{"class":145},[139,714,125],{"class":149},[139,716,172],{"class":145},[718,719,720],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html 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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}",{"title":127,"searchDepth":175,"depth":175,"links":722},[723,724],{"id":116,"depth":175,"text":117},{"id":450,"depth":175,"text":725},"\u003CModalBottom> component","Create a \u003CModalBottom> component with \u003CVueFinalModal> and TailwindCSS.","md",null,{"head":730},{"title":731},"Modal Bottom | Examples",{"title":93,"description":726},"pjEGEYS_Ga_xRmgEzfKTbf_UPUywnhbUsw10s2khDRc",[735,737],{"title":89,"path":90,"stem":91,"description":736,"children":-1},"Create a \u003CModalFullscreen> component with \u003CVueFinalModal> and TailwindCSS.",{"title":97,"path":98,"stem":99,"description":738,"children":-1},"Create a \u003CModalLoginForm> component with \u003CVueFinalModal> and TailwindCSS.",1791803994083]