[{"data":1,"prerenderedAt":1721},["ShallowReactive",2],{"navigation_docs":3,"-api-events":188,"-api-events-surround":1716},[4,9,27,52,101,130,163],{"title":5,"path":6,"stem":7,"icon":8},"Playground","\u002Fplayground","1.playground","i-lucide-flask-conical",{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fgetting-started","2.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fgetting-started\u002Fintroduction","2.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fgetting-started\u002Finstallation","2.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"First modal","\u002Fgetting-started\u002Ffirst-modal","2.getting-started\u002F3.first-modal",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Concepts","\u002Fconcepts","3.concepts",[32,36,40,44,48],{"title":33,"path":34,"stem":35},"Architecture","\u002Fconcepts\u002Farchitecture","3.concepts\u002F1.architecture",{"title":37,"path":38,"stem":39},"Imperative flow","\u002Fconcepts\u002Fimperative-flow","3.concepts\u002F2.imperative-flow",{"title":41,"path":42,"stem":43},"Stacking","\u002Fconcepts\u002Fstacking","3.concepts\u002F3.stacking",{"title":45,"path":46,"stem":47},"Groups","\u002Fconcepts\u002Fgroups","3.concepts\u002F4.groups",{"title":49,"path":50,"stem":51},"Headless primitives","\u002Fconcepts\u002Fheadless-primitives","3.concepts\u002F5.headless-primitives",{"title":53,"path":54,"stem":55,"children":56,"page":26},"Guide","\u002Fguide","4.guide",[57,61,65,69,73,77,81,85,89,93,97],{"title":58,"path":59,"stem":60},"Writing a modal","\u002Fguide\u002Fwriting-a-modal","4.guide\u002F01.writing-a-modal",{"title":62,"path":63,"stem":64},"Opening & closing","\u002Fguide\u002Fopening-and-closing","4.guide\u002F02.opening-and-closing",{"title":66,"path":67,"stem":68},"Props & results","\u002Fguide\u002Fpassing-props-and-results","4.guide\u002F03.passing-props-and-results",{"title":70,"path":71,"stem":72},"Behavior options","\u002Fguide\u002Fbehavior-options","4.guide\u002F04.behavior-options",{"title":74,"path":75,"stem":76},"Animations & styling","\u002Fguide\u002Fstyling-and-animations","4.guide\u002F05.styling-and-animations",{"title":78,"path":79,"stem":80},"useModal composable","\u002Fguide\u002Fusemodal-composable","4.guide\u002F06.usemodal-composable",{"title":82,"path":83,"stem":84},"Modal context","\u002Fguide\u002Fmodal-context","4.guide\u002F07.modal-context",{"title":86,"path":87,"stem":88},"Multiple targets","\u002Fguide\u002Fmultiple-targets","4.guide\u002F08.multiple-targets",{"title":90,"path":91,"stem":92},"Overlay","\u002Fguide\u002Foverlay","4.guide\u002F09.overlay",{"title":94,"path":95,"stem":96},"Async components","\u002Fguide\u002Fasync-components","4.guide\u002F10.async-components",{"title":98,"path":99,"stem":100},"TypeScript","\u002Fguide\u002Ftypescript","4.guide\u002F11.typescript",{"title":102,"path":103,"stem":104,"children":105,"page":26},"Recipes","\u002Frecipes","5.recipes",[106,110,114,118,122,126],{"title":107,"path":108,"stem":109},"Confirm dialog","\u002Frecipes\u002Fconfirm-dialog","5.recipes\u002F1.confirm-dialog",{"title":111,"path":112,"stem":113},"Form modal with validation","\u002Frecipes\u002Fform-modal-with-validation","5.recipes\u002F2.form-modal-with-validation",{"title":115,"path":116,"stem":117},"Image lightbox","\u002Frecipes\u002Fimage-lightbox","5.recipes\u002F3.image-lightbox",{"title":119,"path":120,"stem":121},"Command palette","\u002Frecipes\u002Fcommand-palette","5.recipes\u002F4.command-palette",{"title":123,"path":124,"stem":125},"Nested flows \u002F wizards","\u002Frecipes\u002Fnested-flows","5.recipes\u002F5.nested-flows",{"title":127,"path":128,"stem":129},"Global error modal","\u002Frecipes\u002Fglobal-error-modal","5.recipes\u002F6.global-error-modal",{"title":131,"path":132,"stem":133,"children":134,"page":26},"Api","\u002Fapi","6.api",[135,139,143,147,151,155,159],{"title":136,"path":137,"stem":138},"Functions","\u002Fapi\u002Ffunctions","6.api\u002F1.functions",{"title":140,"path":141,"stem":142},"Components","\u002Fapi\u002Fcomponents","6.api\u002F2.components",{"title":144,"path":145,"stem":146},"Composables","\u002Fapi\u002Fcomposables","6.api\u002F3.composables",{"title":148,"path":149,"stem":150},"Plugin","\u002Fapi\u002Fplugin","6.api\u002F4.plugin",{"title":152,"path":153,"stem":154},"State helpers","\u002Fapi\u002Fstate","6.api\u002F5.state",{"title":156,"path":157,"stem":158},"Global events","\u002Fapi\u002Fevents","6.api\u002F6.events",{"title":160,"path":161,"stem":162},"Types","\u002Fapi\u002Ftypes","6.api\u002F7.types",{"title":164,"path":165,"stem":166,"children":167,"page":26},"Resources","\u002Fresources","7.resources",[168,172,176,180,184],{"title":169,"path":170,"stem":171},"Migration from v1","\u002Fresources\u002Fmigration-from-v1","7.resources\u002F1.migration-from-v1",{"title":173,"path":174,"stem":175},"FAQ","\u002Fresources\u002Ffaq","7.resources\u002F2.faq",{"title":177,"path":178,"stem":179},"Troubleshooting","\u002Fresources\u002Ftroubleshooting","7.resources\u002F3.troubleshooting",{"title":181,"path":182,"stem":183},"Comparison","\u002Fresources\u002Fcomparison","7.resources\u002F4.comparison",{"title":185,"path":186,"stem":187},"Changelog","\u002Fresources\u002Fchangelog","7.resources\u002F5.changelog",{"id":189,"title":156,"body":190,"description":1710,"extension":1711,"links":1712,"meta":1713,"navigation":419,"path":157,"seo":1714,"stem":158,"__hash__":1715},"docs\u002F6.api\u002F6.events.md",{"type":191,"value":192,"toc":1691},"minimark",[193,197,206,255,307,348,351,362,369,374,484,510,514,579,583,718,722,849,867,869,878,903,906,990,993,1046,1050,1072,1246,1250,1455,1459,1622,1624,1628,1657,1661,1687],[194,195,156],"h1",{"id":196},"global-events",[198,199,200,201,205],"p",{},"The package emits two global lifecycle events you can subscribe to from anywhere — outside any specific modal component. Both come in a global form (every modal) and a group-scoped form (one group only), and both return an ",[202,203,204],"strong",{},"unsubscribe function",".",[207,208,213],"pre",{"className":209,"code":210,"language":211,"meta":212,"style":212},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { onModalOpen, onModalClose } from '@kolirt\u002Fvue-modal'\n","ts","",[214,215,216],"code",{"__ignoreMap":212},[217,218,221,225,229,233,236,239,242,245,248,252],"span",{"class":219,"line":220},"line",1,[217,222,224],{"class":223},"s7zQu","import",[217,226,228],{"class":227},"sMK4o"," {",[217,230,232],{"class":231},"sTEyZ"," onModalOpen",[217,234,235],{"class":227},",",[217,237,238],{"class":231}," onModalClose",[217,240,241],{"class":227}," }",[217,243,244],{"class":223}," from",[217,246,247],{"class":227}," '",[217,249,251],{"class":250},"sfazB","@kolirt\u002Fvue-modal",[217,253,254],{"class":227},"'\n",[256,257,258,274],"table",{},[259,260,261],"thead",{},[262,263,264,268,271],"tr",{},[265,266,267],"th",{},"Event",[265,269,270],{},"Fires when…",[265,272,273],{},"Handler argument",[275,276,277,293],"tbody",{},[262,278,279,285,288],{},[280,281,282],"td",{},[214,283,284],{},"onModalOpen",[280,286,287],{},"A modal has just been pushed onto the stack.",[280,289,290],{},[214,291,292],{},"ModalItem",[262,294,295,300,303],{},[280,296,297],{},[214,298,299],{},"onModalClose",[280,301,302],{},"A modal has just been finalized and removed from the stack.",[280,304,305],{},[214,306,292],{},[308,309,311,312,315,316,319,320,323,324,327,328,331,332,335,336,339,340,343,344,347],"callout",{"icon":310},"i-lucide-info","For per-instance events emitted by a modal ",[202,313,314],{},"component"," (via Vue ",[214,317,318],{},"emit('eventName', …)","), use ",[214,321,322],{},"ModalHandle.on\u002Foff",", the ",[214,325,326],{},"on"," option of ",[214,329,330],{},"openModal",", or ",[214,333,334],{},"useModal(...).on",". For pre-close interception inside the modal itself, use ",[214,337,338],{},"onBeforeClose"," from ",[214,341,342],{},"useModalContext",". The functions on this page are the only ",[202,345,346],{},"global"," listeners exposed by the package.",[349,350],"hr",{},[352,353,355,358,359],"h2",{"id":354},"onmodalopenhandler-void-onmodalopengroup-handler-void",[214,356,357],{},"onModalOpen(handler) → () => void"," \u002F ",[214,360,361],{},"onModalOpen(group, handler) → () => void",[198,363,364,365,368],{},"Subscribes to modal-open events. The handler runs ",[202,366,367],{},"synchronously"," every time a modal is pushed onto the stack, immediately after it is added to state.",[370,371,373],"h3",{"id":372},"signature","Signature",[207,375,377],{"className":209,"code":376,"language":211,"meta":212,"style":212},"type ModalOpenHandler = (modal: ModalItem) => void\n\nfunction onModalOpen(handler: ModalOpenHandler): () => void\nfunction onModalOpen(group: ModalGroup, handler: ModalOpenHandler): () => void\n",[214,378,379,414,421,450],{"__ignoreMap":212},[217,380,381,385,389,392,395,399,402,405,408,411],{"class":219,"line":220},[217,382,384],{"class":383},"spNyl","type",[217,386,388],{"class":387},"sBMFI"," ModalOpenHandler",[217,390,391],{"class":227}," =",[217,393,394],{"class":227}," (",[217,396,398],{"class":397},"sHdIc","modal",[217,400,401],{"class":227},":",[217,403,404],{"class":387}," ModalItem",[217,406,407],{"class":227},")",[217,409,410],{"class":383}," =>",[217,412,413],{"class":387}," void\n",[217,415,417],{"class":219,"line":416},2,[217,418,420],{"emptyLinePlaceholder":419},true,"\n",[217,422,424,427,430,433,436,438,440,443,446,448],{"class":219,"line":423},3,[217,425,426],{"class":383},"function",[217,428,232],{"class":429},"s2Zo4",[217,431,432],{"class":227},"(",[217,434,435],{"class":397},"handler",[217,437,401],{"class":227},[217,439,388],{"class":387},[217,441,442],{"class":227},"):",[217,444,445],{"class":227}," ()",[217,447,410],{"class":383},[217,449,413],{"class":387},[217,451,453,455,457,459,462,464,467,469,472,474,476,478,480,482],{"class":219,"line":452},4,[217,454,426],{"class":383},[217,456,232],{"class":429},[217,458,432],{"class":227},[217,460,461],{"class":397},"group",[217,463,401],{"class":227},[217,465,466],{"class":387}," ModalGroup",[217,468,235],{"class":227},[217,470,471],{"class":397}," handler",[217,473,401],{"class":227},[217,475,388],{"class":387},[217,477,442],{"class":227},[217,479,445],{"class":227},[217,481,410],{"class":383},[217,483,413],{"class":387},[198,485,486,487,489,490,493,494,493,496,493,498,501,502,505,506,205],{},"The ",[214,488,292],{}," passed to the handler exposes ",[214,491,492],{},"id",", ",[214,495,461],{},[214,497,314],{},[214,499,500],{},"props",", and ",[214,503,504],{},"listeners"," — see ",[507,508,160],"a",{"href":509},"\u002Fapi\u002Ftypes#modalitem",[370,511,513],{"id":512},"parameters","Parameters",[256,515,516,532],{},[259,517,518],{},[262,519,520,523,526,529],{},[265,521,522],{},"Parameter",[265,524,525],{},"Type",[265,527,528],{},"Required",[265,530,531],{},"Description",[275,533,534,555],{},[262,535,536,540,545,548],{},[280,537,538],{},[214,539,461],{},[280,541,542],{},[214,543,544],{},"ModalGroup",[280,546,547],{},"no",[280,549,550,551,554],{},"Scopes the subscription to a single group (typed by your ",[214,552,553],{},"ModalGroupRegistry","). Omit for a global subscription across all groups.",[262,556,557,561,566,569],{},[280,558,559],{},[214,560,435],{},[280,562,563],{},[214,564,565],{},"ModalOpenHandler",[280,567,568],{},"yes",[280,570,571,572,574,575,578],{},"Called with the freshly opened ",[214,573,292],{},". Errors thrown inside the handler are caught and logged via ",[214,576,577],{},"console.error"," — they never break the open flow or other subscribers.",[370,580,582],{"id":581},"example-close-one-group-when-another-opens","Example — close one group when another opens",[207,584,586],{"className":209,"code":585,"language":211,"meta":212,"style":212},"import { onModalOpen, closeModalsByGroup } from '@kolirt\u002Fvue-modal'\n\n\u002F\u002F Whenever a 'main' modal opens, drop everything in 'sidebar'.\nconst off = onModalOpen('main', () => {\n  closeModalsByGroup('sidebar', { ignoreGuard: true })\n})\n\n\u002F\u002F later:\noff() \u002F\u002F unsubscribe\n",[214,587,588,611,615,621,653,687,695,700,706],{"__ignoreMap":212},[217,589,590,592,594,596,598,601,603,605,607,609],{"class":219,"line":220},[217,591,224],{"class":223},[217,593,228],{"class":227},[217,595,232],{"class":231},[217,597,235],{"class":227},[217,599,600],{"class":231}," closeModalsByGroup",[217,602,241],{"class":227},[217,604,244],{"class":223},[217,606,247],{"class":227},[217,608,251],{"class":250},[217,610,254],{"class":227},[217,612,613],{"class":219,"line":416},[217,614,420],{"emptyLinePlaceholder":419},[217,616,617],{"class":219,"line":423},[217,618,620],{"class":619},"sHwdD","\u002F\u002F Whenever a 'main' modal opens, drop everything in 'sidebar'.\n",[217,622,623,626,629,632,634,636,639,642,644,646,648,650],{"class":219,"line":452},[217,624,625],{"class":383},"const",[217,627,628],{"class":231}," off ",[217,630,631],{"class":227},"=",[217,633,232],{"class":429},[217,635,432],{"class":231},[217,637,638],{"class":227},"'",[217,640,641],{"class":250},"main",[217,643,638],{"class":227},[217,645,235],{"class":227},[217,647,445],{"class":227},[217,649,410],{"class":383},[217,651,652],{"class":227}," {\n",[217,654,656,659,662,664,667,669,671,673,676,678,682,684],{"class":219,"line":655},5,[217,657,658],{"class":429},"  closeModalsByGroup",[217,660,432],{"class":661},"swJcz",[217,663,638],{"class":227},[217,665,666],{"class":250},"sidebar",[217,668,638],{"class":227},[217,670,235],{"class":227},[217,672,228],{"class":227},[217,674,675],{"class":661}," ignoreGuard",[217,677,401],{"class":227},[217,679,681],{"class":680},"sfNiH"," true",[217,683,241],{"class":227},[217,685,686],{"class":661},")\n",[217,688,690,693],{"class":219,"line":689},6,[217,691,692],{"class":227},"}",[217,694,686],{"class":231},[217,696,698],{"class":219,"line":697},7,[217,699,420],{"emptyLinePlaceholder":419},[217,701,703],{"class":219,"line":702},8,[217,704,705],{"class":619},"\u002F\u002F later:\n",[217,707,709,712,715],{"class":219,"line":708},9,[217,710,711],{"class":429},"off",[217,713,714],{"class":231},"() ",[217,716,717],{"class":619},"\u002F\u002F unsubscribe\n",[370,719,721],{"id":720},"example-global-telemetry","Example — global telemetry",[207,723,725],{"className":209,"code":724,"language":211,"meta":212,"style":212},"onModalOpen((modal) => {\n  analytics.track('modal_open', {\n    id: modal.id,\n    group: modal.group,\n    component: (modal.component as { __name?: string }).__name\n  })\n})\n",[214,726,727,743,766,783,798,836,843],{"__ignoreMap":212},[217,728,729,731,733,735,737,739,741],{"class":219,"line":220},[217,730,284],{"class":429},[217,732,432],{"class":231},[217,734,432],{"class":227},[217,736,398],{"class":397},[217,738,407],{"class":227},[217,740,410],{"class":383},[217,742,652],{"class":227},[217,744,745,748,750,753,755,757,760,762,764],{"class":219,"line":416},[217,746,747],{"class":231},"  analytics",[217,749,205],{"class":227},[217,751,752],{"class":429},"track",[217,754,432],{"class":661},[217,756,638],{"class":227},[217,758,759],{"class":250},"modal_open",[217,761,638],{"class":227},[217,763,235],{"class":227},[217,765,652],{"class":227},[217,767,768,771,773,776,778,780],{"class":219,"line":423},[217,769,770],{"class":661},"    id",[217,772,401],{"class":227},[217,774,775],{"class":231}," modal",[217,777,205],{"class":227},[217,779,492],{"class":231},[217,781,782],{"class":227},",\n",[217,784,785,788,790,792,794,796],{"class":219,"line":452},[217,786,787],{"class":661},"    group",[217,789,401],{"class":227},[217,791,775],{"class":231},[217,793,205],{"class":227},[217,795,461],{"class":231},[217,797,782],{"class":227},[217,799,800,803,805,807,809,811,813,816,818,821,824,827,829,831,833],{"class":219,"line":655},[217,801,802],{"class":661},"    component",[217,804,401],{"class":227},[217,806,394],{"class":661},[217,808,398],{"class":231},[217,810,205],{"class":227},[217,812,314],{"class":231},[217,814,815],{"class":223}," as",[217,817,228],{"class":227},[217,819,820],{"class":661}," __name",[217,822,823],{"class":227},"?:",[217,825,826],{"class":387}," string",[217,828,241],{"class":227},[217,830,407],{"class":661},[217,832,205],{"class":227},[217,834,835],{"class":231},"__name\n",[217,837,838,841],{"class":219,"line":689},[217,839,840],{"class":227},"  }",[217,842,686],{"class":661},[217,844,845,847],{"class":219,"line":697},[217,846,692],{"class":227},[217,848,686],{"class":231},[308,850,851,852,855,856,859,860,863,864,205],{"icon":310},"Handlers fire ",[202,853,854],{},"after"," the modal is pushed to state — so reading ",[214,857,858],{},"modals.value"," or ",[214,861,862],{},"groupModals(g).value"," from inside the handler already includes the newly opened modal. The call is synchronous, so it's safe to act on the open immediately (e.g. close other groups) without waiting for ",[214,865,866],{},"nextTick",[349,868],{},[352,870,872,358,875],{"id":871},"onmodalclosehandler-void-onmodalclosegroup-handler-void",[214,873,874],{},"onModalClose(handler) → () => void",[214,876,877],{},"onModalClose(group, handler) → () => void",[198,879,880,881,883,884,887,888,891,892,493,895,898,899,902],{},"Subscribes to modal-close events. The handler runs ",[202,882,367],{}," when a modal is finalized — after ",[214,885,886],{},"beforeClose"," guards have passed, the exit animation completed (or was skipped via ",[214,889,890],{},"instantExit","), and the modal has been removed from the stack. It fires exactly once per modal instance, regardless of close cause (user dismiss, ",[214,893,894],{},"confirm(...)",[214,896,897],{},"closeModalById",", bulk close, ",[214,900,901],{},"replaceModal",").",[370,904,373],{"id":905},"signature-1",[207,907,909],{"className":209,"code":908,"language":211,"meta":212,"style":212},"type ModalCloseHandler = (modal: ModalItem) => void\n\nfunction onModalClose(handler: ModalCloseHandler): () => void\nfunction onModalClose(group: ModalGroup, handler: ModalCloseHandler): () => void\n",[214,910,911,934,938,960],{"__ignoreMap":212},[217,912,913,915,918,920,922,924,926,928,930,932],{"class":219,"line":220},[217,914,384],{"class":383},[217,916,917],{"class":387}," ModalCloseHandler",[217,919,391],{"class":227},[217,921,394],{"class":227},[217,923,398],{"class":397},[217,925,401],{"class":227},[217,927,404],{"class":387},[217,929,407],{"class":227},[217,931,410],{"class":383},[217,933,413],{"class":387},[217,935,936],{"class":219,"line":416},[217,937,420],{"emptyLinePlaceholder":419},[217,939,940,942,944,946,948,950,952,954,956,958],{"class":219,"line":423},[217,941,426],{"class":383},[217,943,238],{"class":429},[217,945,432],{"class":227},[217,947,435],{"class":397},[217,949,401],{"class":227},[217,951,917],{"class":387},[217,953,442],{"class":227},[217,955,445],{"class":227},[217,957,410],{"class":383},[217,959,413],{"class":387},[217,961,962,964,966,968,970,972,974,976,978,980,982,984,986,988],{"class":219,"line":452},[217,963,426],{"class":383},[217,965,238],{"class":429},[217,967,432],{"class":227},[217,969,461],{"class":397},[217,971,401],{"class":227},[217,973,466],{"class":387},[217,975,235],{"class":227},[217,977,471],{"class":397},[217,979,401],{"class":227},[217,981,917],{"class":387},[217,983,442],{"class":227},[217,985,445],{"class":227},[217,987,410],{"class":383},[217,989,413],{"class":387},[370,991,513],{"id":992},"parameters-1",[256,994,995,1007],{},[259,996,997],{},[262,998,999,1001,1003,1005],{},[265,1000,522],{},[265,1002,525],{},[265,1004,528],{},[265,1006,531],{},[275,1008,1009,1024],{},[262,1010,1011,1015,1019,1021],{},[280,1012,1013],{},[214,1014,461],{},[280,1016,1017],{},[214,1018,544],{},[280,1020,547],{},[280,1022,1023],{},"Scopes the subscription to a single group. Omit for a global subscription.",[262,1025,1026,1030,1035,1037],{},[280,1027,1028],{},[214,1029,435],{},[280,1031,1032],{},[214,1033,1034],{},"ModalCloseHandler",[280,1036,568],{},[280,1038,1039,1040,1042,1043,1045],{},"Called with the just-finalized ",[214,1041,292],{}," (the same shape ",[214,1044,284],{}," received earlier). Errors thrown inside the handler are caught and logged — they never block the modal promise resolution.",[370,1047,1049],{"id":1048},"timing-relative-to-the-modal-promise","Timing relative to the modal promise",[198,1051,1052,1054,1055,1058,1059,358,1061,1064,1065,1068,1069,1071],{},[214,1053,299],{}," fires ",[202,1056,1057],{},"before"," the ",[214,1060,330],{},[214,1062,1063],{},"useModal.open"," promise resolves or rejects. If you ",[214,1066,1067],{},"await openModal(...)"," and also subscribe via ",[214,1070,299],{},", the global handler runs first.",[207,1073,1075],{"className":209,"code":1074,"language":211,"meta":212,"style":212},"const handle = openModal(MyDialog, { group: 'main' })\n\nonModalClose('main', (m) => {\n  if (m.id === handle.id) console.log('global handler runs first')\n})\n\ntry {\n  await handle\n} finally {\n  console.log('handle settled second')\n}\n",[214,1076,1077,1111,1115,1140,1185,1191,1195,1202,1210,1219,1240],{"__ignoreMap":212},[217,1078,1079,1081,1084,1086,1089,1092,1094,1096,1099,1101,1103,1105,1107,1109],{"class":219,"line":220},[217,1080,625],{"class":383},[217,1082,1083],{"class":231}," handle ",[217,1085,631],{"class":227},[217,1087,1088],{"class":429}," openModal",[217,1090,1091],{"class":231},"(MyDialog",[217,1093,235],{"class":227},[217,1095,228],{"class":227},[217,1097,1098],{"class":661}," group",[217,1100,401],{"class":227},[217,1102,247],{"class":227},[217,1104,641],{"class":250},[217,1106,638],{"class":227},[217,1108,241],{"class":227},[217,1110,686],{"class":231},[217,1112,1113],{"class":219,"line":416},[217,1114,420],{"emptyLinePlaceholder":419},[217,1116,1117,1119,1121,1123,1125,1127,1129,1131,1134,1136,1138],{"class":219,"line":423},[217,1118,299],{"class":429},[217,1120,432],{"class":231},[217,1122,638],{"class":227},[217,1124,641],{"class":250},[217,1126,638],{"class":227},[217,1128,235],{"class":227},[217,1130,394],{"class":227},[217,1132,1133],{"class":397},"m",[217,1135,407],{"class":227},[217,1137,410],{"class":383},[217,1139,652],{"class":227},[217,1141,1142,1145,1147,1149,1151,1153,1156,1159,1161,1163,1166,1169,1171,1174,1176,1178,1181,1183],{"class":219,"line":452},[217,1143,1144],{"class":223},"  if",[217,1146,394],{"class":661},[217,1148,1133],{"class":231},[217,1150,205],{"class":227},[217,1152,492],{"class":231},[217,1154,1155],{"class":227}," ===",[217,1157,1158],{"class":231}," handle",[217,1160,205],{"class":227},[217,1162,492],{"class":231},[217,1164,1165],{"class":661},") ",[217,1167,1168],{"class":231},"console",[217,1170,205],{"class":227},[217,1172,1173],{"class":429},"log",[217,1175,432],{"class":661},[217,1177,638],{"class":227},[217,1179,1180],{"class":250},"global handler runs first",[217,1182,638],{"class":227},[217,1184,686],{"class":661},[217,1186,1187,1189],{"class":219,"line":655},[217,1188,692],{"class":227},[217,1190,686],{"class":231},[217,1192,1193],{"class":219,"line":689},[217,1194,420],{"emptyLinePlaceholder":419},[217,1196,1197,1200],{"class":219,"line":697},[217,1198,1199],{"class":223},"try",[217,1201,652],{"class":227},[217,1203,1204,1207],{"class":219,"line":702},[217,1205,1206],{"class":223},"  await",[217,1208,1209],{"class":231}," handle\n",[217,1211,1212,1214,1217],{"class":219,"line":708},[217,1213,692],{"class":227},[217,1215,1216],{"class":223}," finally",[217,1218,652],{"class":227},[217,1220,1222,1225,1227,1229,1231,1233,1236,1238],{"class":219,"line":1221},10,[217,1223,1224],{"class":231},"  console",[217,1226,205],{"class":227},[217,1228,1173],{"class":429},[217,1230,432],{"class":661},[217,1232,638],{"class":227},[217,1234,1235],{"class":250},"handle settled second",[217,1237,638],{"class":227},[217,1239,686],{"class":661},[217,1241,1243],{"class":219,"line":1242},11,[217,1244,1245],{"class":227},"}\n",[370,1247,1249],{"id":1248},"example-restore-focus-on-close","Example — restore focus on close",[207,1251,1253],{"className":209,"code":1252,"language":211,"meta":212,"style":212},"import { onModalClose } from '@kolirt\u002Fvue-modal'\n\nlet lastTrigger: HTMLElement | null = null\n\ndocument.addEventListener('click', (e) => {\n  if ((e.target as HTMLElement).matches('[data-open-modal]')) {\n    lastTrigger = e.target as HTMLElement\n  }\n})\n\nonModalClose(() => {\n  lastTrigger?.focus()\n  lastTrigger = null\n})\n",[214,1254,1255,1273,1277,1301,1305,1337,1377,1396,1401,1407,1411,1424,1439,1448],{"__ignoreMap":212},[217,1256,1257,1259,1261,1263,1265,1267,1269,1271],{"class":219,"line":220},[217,1258,224],{"class":223},[217,1260,228],{"class":227},[217,1262,238],{"class":231},[217,1264,241],{"class":227},[217,1266,244],{"class":223},[217,1268,247],{"class":227},[217,1270,251],{"class":250},[217,1272,254],{"class":227},[217,1274,1275],{"class":219,"line":416},[217,1276,420],{"emptyLinePlaceholder":419},[217,1278,1279,1282,1285,1287,1290,1293,1296,1298],{"class":219,"line":423},[217,1280,1281],{"class":383},"let",[217,1283,1284],{"class":231}," lastTrigger",[217,1286,401],{"class":227},[217,1288,1289],{"class":387}," HTMLElement",[217,1291,1292],{"class":227}," |",[217,1294,1295],{"class":387}," null",[217,1297,391],{"class":227},[217,1299,1300],{"class":227}," null\n",[217,1302,1303],{"class":219,"line":452},[217,1304,420],{"emptyLinePlaceholder":419},[217,1306,1307,1310,1312,1315,1317,1319,1322,1324,1326,1328,1331,1333,1335],{"class":219,"line":655},[217,1308,1309],{"class":231},"document",[217,1311,205],{"class":227},[217,1313,1314],{"class":429},"addEventListener",[217,1316,432],{"class":231},[217,1318,638],{"class":227},[217,1320,1321],{"class":250},"click",[217,1323,638],{"class":227},[217,1325,235],{"class":227},[217,1327,394],{"class":227},[217,1329,1330],{"class":397},"e",[217,1332,407],{"class":227},[217,1334,410],{"class":383},[217,1336,652],{"class":227},[217,1338,1339,1341,1344,1346,1348,1351,1353,1355,1357,1359,1362,1364,1366,1369,1371,1374],{"class":219,"line":689},[217,1340,1144],{"class":223},[217,1342,1343],{"class":661}," ((",[217,1345,1330],{"class":231},[217,1347,205],{"class":227},[217,1349,1350],{"class":231},"target",[217,1352,815],{"class":223},[217,1354,1289],{"class":387},[217,1356,407],{"class":661},[217,1358,205],{"class":227},[217,1360,1361],{"class":429},"matches",[217,1363,432],{"class":661},[217,1365,638],{"class":227},[217,1367,1368],{"class":250},"[data-open-modal]",[217,1370,638],{"class":227},[217,1372,1373],{"class":661},")) ",[217,1375,1376],{"class":227},"{\n",[217,1378,1379,1382,1384,1387,1389,1391,1393],{"class":219,"line":697},[217,1380,1381],{"class":231},"    lastTrigger",[217,1383,391],{"class":227},[217,1385,1386],{"class":231}," e",[217,1388,205],{"class":227},[217,1390,1350],{"class":231},[217,1392,815],{"class":223},[217,1394,1395],{"class":387}," HTMLElement\n",[217,1397,1398],{"class":219,"line":702},[217,1399,1400],{"class":227},"  }\n",[217,1402,1403,1405],{"class":219,"line":708},[217,1404,692],{"class":227},[217,1406,686],{"class":231},[217,1408,1409],{"class":219,"line":1221},[217,1410,420],{"emptyLinePlaceholder":419},[217,1412,1413,1415,1417,1420,1422],{"class":219,"line":1242},[217,1414,299],{"class":429},[217,1416,432],{"class":231},[217,1418,1419],{"class":227},"()",[217,1421,410],{"class":383},[217,1423,652],{"class":227},[217,1425,1427,1430,1433,1436],{"class":219,"line":1426},12,[217,1428,1429],{"class":231},"  lastTrigger",[217,1431,1432],{"class":227},"?.",[217,1434,1435],{"class":429},"focus",[217,1437,1438],{"class":661},"()\n",[217,1440,1442,1444,1446],{"class":219,"line":1441},13,[217,1443,1429],{"class":231},[217,1445,391],{"class":227},[217,1447,1300],{"class":227},[217,1449,1451,1453],{"class":219,"line":1450},14,[217,1452,692],{"class":227},[217,1454,686],{"class":231},[370,1456,1458],{"id":1457},"example-clean-up-per-group-side-effects","Example — clean up per-group side effects",[207,1460,1462],{"className":209,"code":1461,"language":211,"meta":212,"style":212},"import { onModalOpen, onModalClose } from '@kolirt\u002Fvue-modal'\n\nconst offOpen = onModalOpen('overlay', () => document.body.classList.add('has-overlay'))\nconst offClose = onModalClose('overlay', (_modal) => {\n  \u002F\u002F last 'overlay' modal closed? drop the class\n  \u002F\u002F (use `groupModals('overlay').value.length` if you import it)\n  document.body.classList.remove('has-overlay')\n})\n",[214,1463,1464,1486,1490,1546,1578,1583,1588,1616],{"__ignoreMap":212},[217,1465,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484],{"class":219,"line":220},[217,1467,224],{"class":223},[217,1469,228],{"class":227},[217,1471,232],{"class":231},[217,1473,235],{"class":227},[217,1475,238],{"class":231},[217,1477,241],{"class":227},[217,1479,244],{"class":223},[217,1481,247],{"class":227},[217,1483,251],{"class":250},[217,1485,254],{"class":227},[217,1487,1488],{"class":219,"line":416},[217,1489,420],{"emptyLinePlaceholder":419},[217,1491,1492,1494,1497,1499,1501,1503,1505,1508,1510,1512,1514,1516,1519,1521,1524,1526,1529,1531,1534,1536,1538,1541,1543],{"class":219,"line":423},[217,1493,625],{"class":383},[217,1495,1496],{"class":231}," offOpen ",[217,1498,631],{"class":227},[217,1500,232],{"class":429},[217,1502,432],{"class":231},[217,1504,638],{"class":227},[217,1506,1507],{"class":250},"overlay",[217,1509,638],{"class":227},[217,1511,235],{"class":227},[217,1513,445],{"class":227},[217,1515,410],{"class":383},[217,1517,1518],{"class":231}," document",[217,1520,205],{"class":227},[217,1522,1523],{"class":231},"body",[217,1525,205],{"class":227},[217,1527,1528],{"class":231},"classList",[217,1530,205],{"class":227},[217,1532,1533],{"class":429},"add",[217,1535,432],{"class":231},[217,1537,638],{"class":227},[217,1539,1540],{"class":250},"has-overlay",[217,1542,638],{"class":227},[217,1544,1545],{"class":231},"))\n",[217,1547,1548,1550,1553,1555,1557,1559,1561,1563,1565,1567,1569,1572,1574,1576],{"class":219,"line":452},[217,1549,625],{"class":383},[217,1551,1552],{"class":231}," offClose ",[217,1554,631],{"class":227},[217,1556,238],{"class":429},[217,1558,432],{"class":231},[217,1560,638],{"class":227},[217,1562,1507],{"class":250},[217,1564,638],{"class":227},[217,1566,235],{"class":227},[217,1568,394],{"class":227},[217,1570,1571],{"class":397},"_modal",[217,1573,407],{"class":227},[217,1575,410],{"class":383},[217,1577,652],{"class":227},[217,1579,1580],{"class":219,"line":655},[217,1581,1582],{"class":619},"  \u002F\u002F last 'overlay' modal closed? drop the class\n",[217,1584,1585],{"class":219,"line":689},[217,1586,1587],{"class":619},"  \u002F\u002F (use `groupModals('overlay').value.length` if you import it)\n",[217,1589,1590,1593,1595,1597,1599,1601,1603,1606,1608,1610,1612,1614],{"class":219,"line":697},[217,1591,1592],{"class":231},"  document",[217,1594,205],{"class":227},[217,1596,1523],{"class":231},[217,1598,205],{"class":227},[217,1600,1528],{"class":231},[217,1602,205],{"class":227},[217,1604,1605],{"class":429},"remove",[217,1607,432],{"class":661},[217,1609,638],{"class":227},[217,1611,1540],{"class":250},[217,1613,638],{"class":227},[217,1615,686],{"class":661},[217,1617,1618,1620],{"class":219,"line":702},[217,1619,692],{"class":227},[217,1621,686],{"class":231},[349,1623],{},[352,1625,1627],{"id":1626},"symmetry-and-lifetime","Symmetry and lifetime",[1629,1630,1631,1649,1652],"ul",{},[1632,1633,1634,1635,1638,1639,1642,1643,358,1646,205],"li",{},"Both subscriptions live for the lifetime of the JavaScript module unless you call the returned unsubscribe function. They are ",[202,1636,1637],{},"not"," tied to a Vue component scope — if you call them inside ",[214,1640,1641],{},"setup()",", register the cleanup yourself in ",[214,1644,1645],{},"onScopeDispose",[214,1647,1648],{},"onBeforeUnmount",[1632,1650,1651],{},"Handlers are invoked in registration order. Global subscribers fire first, then group-scoped subscribers for the matching group.",[1632,1653,1654,1655,205],{},"One throwing handler does not affect others: each handler is wrapped in try\u002Fcatch and exceptions are reported via ",[214,1656,577],{},[352,1658,1660],{"id":1659},"when-to-prefer-reactive-state-instead","When to prefer reactive state instead",[198,1662,1663,1664,394,1666,493,1669,493,1672,493,1675,1678,1679,1682,1683,1686],{},"If you only need to render derived UI from the open stack, prefer the reactive ",[507,1665,152],{"href":153},[214,1667,1668],{},"modals",[214,1670,1671],{},"isOpened",[214,1673,1674],{},"groupModals",[214,1676,1677],{},"isGroupOpen",") and ",[214,1680,1681],{},"watch"," them. The event API is for ",[202,1684,1685],{},"side effects"," that must run exactly when the transition happens — analytics, focus restoration, cross-group coordination, manual DOM tweaks.",[1688,1689,1690],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":212,"searchDepth":416,"depth":416,"links":1692},[1693,1700,1708,1709],{"id":354,"depth":416,"text":1694,"children":1695},"onModalOpen(handler) → () => void \u002F onModalOpen(group, handler) → () => void",[1696,1697,1698,1699],{"id":372,"depth":423,"text":373},{"id":512,"depth":423,"text":513},{"id":581,"depth":423,"text":582},{"id":720,"depth":423,"text":721},{"id":871,"depth":416,"text":1701,"children":1702},"onModalClose(handler) → () => void \u002F onModalClose(group, handler) → () => void",[1703,1704,1705,1706,1707],{"id":905,"depth":423,"text":373},{"id":992,"depth":423,"text":513},{"id":1048,"depth":423,"text":1049},{"id":1248,"depth":423,"text":1249},{"id":1457,"depth":423,"text":1458},{"id":1626,"depth":416,"text":1627},{"id":1659,"depth":416,"text":1660},"Subscribe to modal-open and modal-close events globally or per group — onModalOpen, onModalClose.","md",null,{},{"title":156,"description":1710},"WsYO7X6iJqwNviVAvGYFhYAusNXIiJMvruEyCGW5kzQ",[1717,1719],{"title":152,"path":153,"stem":154,"description":1718,"children":-1},"Reactive read-only exports for observing the modal stack — modals, isOpened, groupModals, isGroupOpen.",{"title":160,"path":161,"stem":162,"description":1720,"children":-1},"Complete public type surface for @kolirt\u002Fvue-modal — all exported interfaces, type aliases, and utility types.",1779523621183]