[{"data":1,"prerenderedAt":797},["ShallowReactive",2],{"navigation_docs":3,"-use-cases-confirm-modal":108,"-use-cases-confirm-modal-surround":792},[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":81,"body":110,"description":784,"extension":785,"links":786,"meta":787,"navigation":204,"path":82,"seo":790,"stem":83,"__hash__":791},"docs\u002F4.use-cases\u002F3.confirm-modal.md",{"type":111,"value":112,"toc":779},"minimark",[113,118,414,421,775],[114,115,117],"h2",{"id":116},"preview","Preview",[119,120,121,124],"code-preview",{},[122,123],"modal-confirm-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  const show = ref(false)\n\n  function confirm() {\n    show.value = false\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"show = true\">\n      Open Modal\n    \u003C\u002FVButton>\n\n    \u003CModalConfirm\n      v-model=\"show\"\n      title=\"Hello World!\"\n      @confirm=\"() => confirm()\"\n    >\n      \u003Cp>The content of the modal\u003C\u002Fp>\n    \u003C\u002FModalConfirm>\n  \u003C\u002Ftemplate>\n","Preview.vue","vue",[136,137,138,173,199,206,221,239,245,255,260,269,292,298,308,313,321,337,352,367,373,395,405],"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,179,183,185,189,192,196],{"class":141,"line":175},2,[139,177,178],{"class":153},"  const",[139,180,182],{"class":181},"sTEyZ"," show ",[139,184,160],{"class":145},[139,186,188],{"class":187},"s2Zo4"," ref",[139,190,191],{"class":181},"(",[139,193,195],{"class":194},"sfNiH","false",[139,197,198],{"class":181},")\n",[139,200,202],{"class":141,"line":201},3,[139,203,205],{"emptyLinePlaceholder":204},true,"\n",[139,207,209,212,215,218],{"class":141,"line":208},4,[139,210,211],{"class":153},"  function",[139,213,214],{"class":187}," confirm",[139,216,217],{"class":145},"()",[139,219,220],{"class":145}," {\n",[139,222,224,227,230,233,236],{"class":141,"line":223},5,[139,225,226],{"class":181},"    show",[139,228,229],{"class":145},".",[139,231,232],{"class":181},"value",[139,234,235],{"class":145}," =",[139,237,238],{"class":194}," false\n",[139,240,242],{"class":141,"line":241},6,[139,243,244],{"class":145},"  }\n",[139,246,248,251,253],{"class":141,"line":247},7,[139,249,250],{"class":145},"  \u003C\u002F",[139,252,150],{"class":149},[139,254,172],{"class":145},[139,256,258],{"class":141,"line":257},8,[139,259,205],{"emptyLinePlaceholder":204},[139,261,263,265,267],{"class":141,"line":262},9,[139,264,146],{"class":145},[139,266,125],{"class":149},[139,268,172],{"class":145},[139,270,272,275,278,281,283,285,288,290],{"class":141,"line":271},10,[139,273,274],{"class":145},"    \u003C",[139,276,277],{"class":149},"VButton",[139,279,280],{"class":153}," @click",[139,282,160],{"class":145},[139,284,163],{"class":145},[139,286,287],{"class":166},"show = true",[139,289,163],{"class":145},[139,291,172],{"class":145},[139,293,295],{"class":141,"line":294},11,[139,296,297],{"class":181},"      Open Modal\n",[139,299,301,304,306],{"class":141,"line":300},12,[139,302,303],{"class":145},"    \u003C\u002F",[139,305,277],{"class":149},[139,307,172],{"class":145},[139,309,311],{"class":141,"line":310},13,[139,312,205],{"emptyLinePlaceholder":204},[139,314,316,318],{"class":141,"line":315},14,[139,317,274],{"class":145},[139,319,320],{"class":149},"ModalConfirm\n",[139,322,324,327,329,331,334],{"class":141,"line":323},15,[139,325,326],{"class":153},"      v-model",[139,328,160],{"class":145},[139,330,163],{"class":145},[139,332,333],{"class":166},"show",[139,335,336],{"class":145},"\"\n",[139,338,340,343,345,347,350],{"class":141,"line":339},16,[139,341,342],{"class":153},"      title",[139,344,160],{"class":145},[139,346,163],{"class":145},[139,348,349],{"class":166},"Hello World!",[139,351,336],{"class":145},[139,353,355,358,360,362,365],{"class":141,"line":354},17,[139,356,357],{"class":153},"      @confirm",[139,359,160],{"class":145},[139,361,163],{"class":145},[139,363,364],{"class":166},"() => confirm()",[139,366,336],{"class":145},[139,368,370],{"class":141,"line":369},18,[139,371,372],{"class":145},"    >\n",[139,374,376,379,382,385,388,391,393],{"class":141,"line":375},19,[139,377,378],{"class":145},"      \u003C",[139,380,381],{"class":149},"p",[139,383,384],{"class":145},">",[139,386,387],{"class":181},"The content of the modal",[139,389,390],{"class":145},"\u003C\u002F",[139,392,381],{"class":149},[139,394,172],{"class":145},[139,396,398,400,403],{"class":141,"line":397},20,[139,399,303],{"class":145},[139,401,402],{"class":149},"ModalConfirm",[139,404,172],{"class":145},[139,406,408,410,412],{"class":141,"line":407},21,[139,409,250],{"class":145},[139,411,125],{"class":149},[139,413,172],{"class":145},[114,415,417,420],{"id":416},"modalconfirm-component",[136,418,419],{},"\u003CModalConfirm>"," component",[422,423,424],"code-group",{},[129,425,428],{"className":131,"code":426,"filename":427,"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\n  const emit = defineEmits\u003C{\n    (e: 'update:modelValue', modelValue: boolean): void\n    (e: 'confirm'): void\n  }>()\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      class=\"flex justify-center items-center\"\n      content-class=\"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2\"\n      @update:model-value=\"val => emit('update:modelValue', val)\"\n    >\n      \u003Ch1 class=\"text-xl\">\n        {{ title }}\n      \u003C\u002Fh1>\n      \u003Cslot \u002F>\n      \u003Cbutton class=\"mt-1 ml-auto px-2 border rounded-lg\" @click=\"emit('confirm')\">\n        Confirm\n      \u003C\u002Fbutton>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n","ModalConfirm.vue",[136,429,430,450,477,481,489,501,509,513,527,564,583,589,597,601,609,616,630,644,658,662,683,688,698,709,741,747,756,766],{"__ignoreMap":127},[139,431,432,434,436,438,440,442,444,446,448],{"class":141,"line":142},[139,433,146],{"class":145},[139,435,150],{"class":149},[139,437,154],{"class":153},[139,439,157],{"class":153},[139,441,160],{"class":145},[139,443,163],{"class":145},[139,445,167],{"class":166},[139,447,163],{"class":145},[139,449,172],{"class":145},[139,451,452,456,459,462,465,468,471,474],{"class":141,"line":175},[139,453,455],{"class":454},"s7zQu","  import",[139,457,458],{"class":145}," {",[139,460,461],{"class":181}," VueFinalModal",[139,463,464],{"class":145}," }",[139,466,467],{"class":454}," from",[139,469,470],{"class":145}," '",[139,472,473],{"class":166},"vue-final-modal",[139,475,476],{"class":145},"'\n",[139,478,479],{"class":141,"line":201},[139,480,205],{"emptyLinePlaceholder":204},[139,482,483,486],{"class":141,"line":208},[139,484,485],{"class":187},"  defineProps",[139,487,488],{"class":145},"\u003C{\n",[139,490,491,494,497],{"class":141,"line":223},[139,492,493],{"class":149},"    title",[139,495,496],{"class":145},"?:",[139,498,500],{"class":499},"sBMFI"," string\n",[139,502,503,506],{"class":141,"line":241},[139,504,505],{"class":145},"  }>",[139,507,508],{"class":181},"()\n",[139,510,511],{"class":141,"line":247},[139,512,205],{"emptyLinePlaceholder":204},[139,514,515,517,520,522,525],{"class":141,"line":257},[139,516,178],{"class":153},[139,518,519],{"class":181}," emit ",[139,521,160],{"class":145},[139,523,524],{"class":187}," defineEmits",[139,526,488],{"class":145},[139,528,529,532,536,539,541,544,547,550,553,555,558,561],{"class":141,"line":262},[139,530,531],{"class":145},"    (",[139,533,535],{"class":534},"sHdIc","e",[139,537,538],{"class":145},":",[139,540,470],{"class":145},[139,542,543],{"class":166},"update:modelValue",[139,545,546],{"class":145},"'",[139,548,549],{"class":145},",",[139,551,552],{"class":534}," modelValue",[139,554,538],{"class":145},[139,556,557],{"class":499}," boolean",[139,559,560],{"class":145},"):",[139,562,563],{"class":499}," void\n",[139,565,566,568,570,572,574,577,579,581],{"class":141,"line":271},[139,567,531],{"class":145},[139,569,535],{"class":534},[139,571,538],{"class":145},[139,573,470],{"class":145},[139,575,576],{"class":166},"confirm",[139,578,546],{"class":145},[139,580,560],{"class":145},[139,582,563],{"class":499},[139,584,585,587],{"class":141,"line":294},[139,586,505],{"class":145},[139,588,508],{"class":181},[139,590,591,593,595],{"class":141,"line":300},[139,592,250],{"class":145},[139,594,150],{"class":149},[139,596,172],{"class":145},[139,598,599],{"class":141,"line":310},[139,600,205],{"emptyLinePlaceholder":204},[139,602,603,605,607],{"class":141,"line":315},[139,604,146],{"class":145},[139,606,125],{"class":149},[139,608,172],{"class":145},[139,610,611,613],{"class":141,"line":323},[139,612,274],{"class":145},[139,614,615],{"class":149},"VueFinalModal\n",[139,617,618,621,623,625,628],{"class":141,"line":339},[139,619,620],{"class":153},"      class",[139,622,160],{"class":145},[139,624,163],{"class":145},[139,626,627],{"class":166},"flex justify-center items-center",[139,629,336],{"class":145},[139,631,632,635,637,639,642],{"class":141,"line":354},[139,633,634],{"class":153},"      content-class",[139,636,160],{"class":145},[139,638,163],{"class":145},[139,640,641],{"class":166},"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2",[139,643,336],{"class":145},[139,645,646,649,651,653,656],{"class":141,"line":369},[139,647,648],{"class":153},"      @update:model-value",[139,650,160],{"class":145},[139,652,163],{"class":145},[139,654,655],{"class":166},"val => emit('update:modelValue', val)",[139,657,336],{"class":145},[139,659,660],{"class":141,"line":375},[139,661,372],{"class":145},[139,663,664,666,669,672,674,676,679,681],{"class":141,"line":397},[139,665,378],{"class":145},[139,667,668],{"class":149},"h1",[139,670,671],{"class":153}," class",[139,673,160],{"class":145},[139,675,163],{"class":145},[139,677,678],{"class":166},"text-xl",[139,680,163],{"class":145},[139,682,172],{"class":145},[139,684,685],{"class":141,"line":407},[139,686,687],{"class":181},"        {{ title }}\n",[139,689,691,694,696],{"class":141,"line":690},22,[139,692,693],{"class":145},"      \u003C\u002F",[139,695,668],{"class":149},[139,697,172],{"class":145},[139,699,701,703,706],{"class":141,"line":700},23,[139,702,378],{"class":145},[139,704,705],{"class":149},"slot",[139,707,708],{"class":145}," \u002F>\n",[139,710,712,714,717,719,721,723,726,728,730,732,734,737,739],{"class":141,"line":711},24,[139,713,378],{"class":145},[139,715,716],{"class":149},"button",[139,718,671],{"class":153},[139,720,160],{"class":145},[139,722,163],{"class":145},[139,724,725],{"class":166},"mt-1 ml-auto px-2 border rounded-lg",[139,727,163],{"class":145},[139,729,280],{"class":153},[139,731,160],{"class":145},[139,733,163],{"class":145},[139,735,736],{"class":166},"emit('confirm')",[139,738,163],{"class":145},[139,740,172],{"class":145},[139,742,744],{"class":141,"line":743},25,[139,745,746],{"class":181},"        Confirm\n",[139,748,750,752,754],{"class":141,"line":749},26,[139,751,693],{"class":145},[139,753,716],{"class":149},[139,755,172],{"class":145},[139,757,759,761,764],{"class":141,"line":758},27,[139,760,303],{"class":145},[139,762,763],{"class":149},"VueFinalModal",[139,765,172],{"class":145},[139,767,769,771,773],{"class":141,"line":768},28,[139,770,250],{"class":145},[139,772,125],{"class":149},[139,774,172],{"class":145},[776,777,778],"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 .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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":127,"searchDepth":175,"depth":175,"links":780},[781,782],{"id":116,"depth":175,"text":117},{"id":416,"depth":175,"text":783},"\u003CModalConfirm> component","Create a \u003CModalConfirm> component with \u003CVueFinalModal> and TailwindCSS.","md",null,{"head":788},{"title":789},"Modal Confirm | Examples",{"title":81,"description":784},"jZTpvVvVqD2dBCBILzZx2dt-iNg_6Z3ssUXIEcfhWRM",[793,795],{"title":77,"path":78,"stem":79,"description":794,"children":-1},"Keep a dynamic modal mounted after it is closed, so its state survives the next open().",{"title":85,"path":86,"stem":87,"description":796,"children":-1},"Use \u003CModalConfirm> to demo how to use nested modal.",1791803993414]