[{"data":1,"prerenderedAt":721},["ShallowReactive",2],{"navigation_docs":3,"-api-composables-use-vfm":108,"-api-composables-use-vfm-surround":717},[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":64,"body":110,"description":711,"extension":712,"links":713,"meta":714,"navigation":197,"path":65,"seo":715,"stem":66,"__hash__":716},"docs\u002F3.api\u002F2.composables\u002F2.use-vfm.md",{"type":111,"value":112,"toc":705},"minimark",[113,118,303,307,338,342,354,634,694,698,701],[114,115,117],"h2",{"id":116},"usage","Usage",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useVfm } from 'vue-final-modal'\n\nconst vfm = useVfm()\nconst {\n  modals,\n  openedModals,\n  get,\n  toggle,\n  open,\n  close,\n  closeAll,\n} = vfm\n\u003C\u002Fscript>\n","vue","",[126,127,128,163,192,199,216,224,233,241,249,257,265,273,281,293],"code",{"__ignoreMap":124},[129,130,133,137,141,145,148,151,154,158,160],"span",{"class":131,"line":132},"line",1,[129,134,136],{"class":135},"sMK4o","\u003C",[129,138,140],{"class":139},"swJcz","script",[129,142,144],{"class":143},"spNyl"," setup",[129,146,147],{"class":143}," lang",[129,149,150],{"class":135},"=",[129,152,153],{"class":135},"\"",[129,155,157],{"class":156},"sfazB","ts",[129,159,153],{"class":135},[129,161,162],{"class":135},">\n",[129,164,166,170,173,177,180,183,186,189],{"class":131,"line":165},2,[129,167,169],{"class":168},"s7zQu","import",[129,171,172],{"class":135}," {",[129,174,176],{"class":175},"sTEyZ"," useVfm",[129,178,179],{"class":135}," }",[129,181,182],{"class":168}," from",[129,184,185],{"class":135}," '",[129,187,188],{"class":156},"vue-final-modal",[129,190,191],{"class":135},"'\n",[129,193,195],{"class":131,"line":194},3,[129,196,198],{"emptyLinePlaceholder":197},true,"\n",[129,200,202,205,208,210,213],{"class":131,"line":201},4,[129,203,204],{"class":143},"const",[129,206,207],{"class":175}," vfm ",[129,209,150],{"class":135},[129,211,176],{"class":212},"s2Zo4",[129,214,215],{"class":175},"()\n",[129,217,219,221],{"class":131,"line":218},5,[129,220,204],{"class":143},[129,222,223],{"class":135}," {\n",[129,225,227,230],{"class":131,"line":226},6,[129,228,229],{"class":175},"  modals",[129,231,232],{"class":135},",\n",[129,234,236,239],{"class":131,"line":235},7,[129,237,238],{"class":175},"  openedModals",[129,240,232],{"class":135},[129,242,244,247],{"class":131,"line":243},8,[129,245,246],{"class":175},"  get",[129,248,232],{"class":135},[129,250,252,255],{"class":131,"line":251},9,[129,253,254],{"class":175},"  toggle",[129,256,232],{"class":135},[129,258,260,263],{"class":131,"line":259},10,[129,261,262],{"class":175},"  open",[129,264,232],{"class":135},[129,266,268,271],{"class":131,"line":267},11,[129,269,270],{"class":175},"  close",[129,272,232],{"class":135},[129,274,276,279],{"class":131,"line":275},12,[129,277,278],{"class":175},"  closeAll",[129,280,232],{"class":135},[129,282,284,287,290],{"class":131,"line":283},13,[129,285,286],{"class":135},"}",[129,288,289],{"class":135}," =",[129,291,292],{"class":175}," vfm\n",[129,294,296,299,301],{"class":131,"line":295},14,[129,297,298],{"class":135},"\u003C\u002F",[129,300,140],{"class":139},[129,302,162],{"class":135},[114,304,306],{"id":305},"global-state","Global state",[308,309,310,326],"ul",{},[311,312,313,325],"li",{},[126,314,316,319,322],{"className":315,"language":157,"style":124},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",[129,317,318],{"class":175},"vfm",[129,320,321],{"class":135},".",[129,323,324],{"class":175},"modals",": All modals including opened and closed modals.",[311,327,328,337],{},[126,329,330,332,334],{"className":315,"language":157,"style":124},[129,331,318],{"class":175},[129,333,321],{"class":135},[129,335,336],{"class":175},"openedModals",": All opened modals.",[114,339,341],{"id":340},"functions","Functions",[343,344,345,347,348,353],"p",{},[126,346,318],{}," instance provides some utility functions that allows you to operate a modal (see ",[349,350,352],"a",{"href":351},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#modalid-optional","modalId",") or modals.",[308,355,356,371,465,517,569],{},[311,357,358,370],{},[126,359,360,362,364,367],{"className":315,"language":157,"style":124},[129,361,318],{"class":175},[129,363,321],{"class":135},[129,365,366],{"class":212},"get",[129,368,369],{"class":175},"(modalId)",": Get a modal instance by given a modalId",[311,372,373,397,398,411,412,421],{},[126,374,375,377,379,382,385,388,391,394],{"className":315,"language":157,"style":124},[129,376,318],{"class":175},[129,378,321],{"class":135},[129,380,381],{"class":212},"toggle",[129,383,384],{"class":175},"(modalId",[129,386,387],{"class":135},",",[129,389,390],{"class":175}," show",[129,392,393],{"class":135},"?",[129,395,396],{"class":175},")",": Toggle a modal by given a modalId, or open it with ",[126,399,400,404,407],{"className":315,"language":157,"style":124},[129,401,403],{"class":402},"sBMFI","show",[129,405,406],{"class":135},":",[129,408,410],{"class":409},"sfNiH"," true"," and close it with ",[126,413,414,416,418],{"className":315,"language":157,"style":124},[129,415,403],{"class":402},[129,417,406],{"class":135},[129,419,420],{"class":409}," false",[119,422,424],{"className":315,"code":423,"language":157,"meta":124,"style":124},"vfm.toggle(modalId).then(() => {\n  \u002F\u002F Do something after the modal opened or closed\n})\n",[126,425,426,452,458],{"__ignoreMap":124},[129,427,428,430,432,434,436,438,441,444,447,450],{"class":131,"line":132},[129,429,318],{"class":175},[129,431,321],{"class":135},[129,433,381],{"class":212},[129,435,369],{"class":175},[129,437,321],{"class":135},[129,439,440],{"class":212},"then",[129,442,443],{"class":175},"(",[129,445,446],{"class":135},"()",[129,448,449],{"class":143}," =>",[129,451,223],{"class":135},[129,453,454],{"class":131,"line":165},[129,455,457],{"class":456},"sHwdD","  \u002F\u002F Do something after the modal opened or closed\n",[129,459,460,462],{"class":131,"line":194},[129,461,286],{"class":135},[129,463,464],{"class":175},")\n",[311,466,467,478,479],{},[126,468,469,471,473,476],{"className":315,"language":157,"style":124},[129,470,318],{"class":175},[129,472,321],{"class":135},[129,474,475],{"class":212},"open",[129,477,369],{"class":175},": Open a modal by given a modalId\n",[119,480,482],{"className":315,"code":481,"language":157,"meta":124,"style":124},"vfm.open(modalId).then(() => {\n  \u002F\u002F Do something after the modal opened\n})\n",[126,483,484,506,511],{"__ignoreMap":124},[129,485,486,488,490,492,494,496,498,500,502,504],{"class":131,"line":132},[129,487,318],{"class":175},[129,489,321],{"class":135},[129,491,475],{"class":212},[129,493,369],{"class":175},[129,495,321],{"class":135},[129,497,440],{"class":212},[129,499,443],{"class":175},[129,501,446],{"class":135},[129,503,449],{"class":143},[129,505,223],{"class":135},[129,507,508],{"class":131,"line":165},[129,509,510],{"class":456},"  \u002F\u002F Do something after the modal opened\n",[129,512,513,515],{"class":131,"line":194},[129,514,286],{"class":135},[129,516,464],{"class":175},[311,518,519,530,531],{},[126,520,521,523,525,528],{"className":315,"language":157,"style":124},[129,522,318],{"class":175},[129,524,321],{"class":135},[129,526,527],{"class":212},"close",[129,529,369],{"class":175},": Close a modal by given a modalId\n",[119,532,534],{"className":315,"code":533,"language":157,"meta":124,"style":124},"vfm.close(modalId).then(() => {\n  \u002F\u002F Do something after the modal closed\n})\n",[126,535,536,558,563],{"__ignoreMap":124},[129,537,538,540,542,544,546,548,550,552,554,556],{"class":131,"line":132},[129,539,318],{"class":175},[129,541,321],{"class":135},[129,543,527],{"class":212},[129,545,369],{"class":175},[129,547,321],{"class":135},[129,549,440],{"class":212},[129,551,443],{"class":175},[129,553,446],{"class":135},[129,555,449],{"class":143},[129,557,223],{"class":135},[129,559,560],{"class":131,"line":165},[129,561,562],{"class":456},"  \u002F\u002F Do something after the modal closed\n",[129,564,565,567],{"class":131,"line":194},[129,566,286],{"class":135},[129,568,464],{"class":175},[311,570,571,582,583,595,596],{},[126,572,573,575,577,580],{"className":315,"language":157,"style":124},[129,574,318],{"class":175},[129,576,321],{"class":135},[129,578,579],{"class":212},"closeAll",[129,581,446],{"class":175},": Close all opened modals. It resolves with the ",[126,584,585,588,590,593],{"className":315,"language":157,"style":124},[129,586,587],{"class":402},"Promise",[129,589,321],{"class":135},[129,591,592],{"class":212},"allSettled",[129,594,446],{"class":175}," results of their closing.\n",[119,597,599],{"className":315,"code":598,"language":157,"meta":124,"style":124},"vfm.closeAll().then(() => {\n  \u002F\u002F Do something after all modals closed\n})\n",[126,600,601,623,628],{"__ignoreMap":124},[129,602,603,605,607,609,611,613,615,617,619,621],{"class":131,"line":132},[129,604,318],{"class":175},[129,606,321],{"class":135},[129,608,579],{"class":212},[129,610,446],{"class":175},[129,612,321],{"class":135},[129,614,440],{"class":212},[129,616,443],{"class":175},[129,618,446],{"class":135},[129,620,449],{"class":143},[129,622,223],{"class":135},[129,624,625],{"class":131,"line":165},[129,626,627],{"class":456},"  \u002F\u002F Do something after all modals closed\n",[129,629,630,632],{"class":131,"line":194},[129,631,286],{"class":135},[129,633,464],{"class":175},[343,635,636,642,643,642,649,655,656,662,663,668,669,679,680,689,690,321],{},[126,637,638,640],{"className":315,"language":157,"style":124},[129,639,366],{"class":212},[129,641,446],{"class":175},", ",[126,644,645,647],{"className":315,"language":157,"style":124},[129,646,381],{"class":212},[129,648,446],{"class":175},[126,650,651,653],{"className":315,"language":157,"style":124},[129,652,475],{"class":212},[129,654,446],{"class":175}," and ",[126,657,658,660],{"className":315,"language":157,"style":124},[129,659,527],{"class":212},[129,661,446],{"class":175}," return ",[126,664,665],{"className":315,"language":157,"style":124},[129,666,667],{"class":135},"undefined"," when no modal has that modalId. Their promises always settle: with ",[126,670,671,674,677],{"className":315,"language":157,"style":124},[129,672,673],{"class":135},"'",[129,675,676],{"class":156},"opened",[129,678,673],{"class":135}," or ",[126,681,682,684,687],{"className":315,"language":157,"style":124},[129,683,673],{"class":135},[129,685,686],{"class":156},"closed",[129,688,673],{"class":135},", or with a message when the modal did not get there, see ",[349,691,693],{"href":692},"\u002Fapi\u002Fcomposables\u002Fuse-modal#what-open-and-close-resolve-with","what open() and close() resolve with",[114,695,697],{"id":696},"type-declarations","Type Declarations",[699,700],"read-more",{"link":30},[702,703,704],"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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":124,"searchDepth":165,"depth":165,"links":706},[707,708,709,710],{"id":116,"depth":165,"text":117},{"id":305,"depth":165,"text":306},{"id":340,"depth":165,"text":341},{"id":696,"depth":165,"text":697},"useVfm(){lang=ts} provides global state for the modal components and also provides functions that can be used to control the modal components.","md",null,{},{"title":64,"description":711},"9v0obKXv7tVu_h8SzjVqY3Kt4yYAjDjOs1IIIGrUYfg",[718,720],{"title":60,"path":61,"stem":62,"description":719,"children":-1},"A composable function to define a dynamic modal.",{"title":73,"path":74,"stem":75,"description":124,"children":-1},1791743380015]