[{"data":1,"prerenderedAt":1931},["ShallowReactive",2],{"navigation_docs":3,"-guide-modal-context":188,"-guide-modal-context-surround":1926},[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":82,"body":190,"description":1920,"extension":1921,"links":1922,"meta":1923,"navigation":927,"path":83,"seo":1924,"stem":84,"__hash__":1925},"docs\u002F4.guide\u002F07.modal-context.md",{"type":191,"value":192,"toc":1904},"minimark",[193,197,205,210,458,469,479,485,553,559,565,630,640,684,697,703,713,792,803,809,823,873,879,887,955,962,967,986,1029,1032,1037,1311,1315,1328,1383,1387,1900],[194,195,82],"h1",{"id":196},"modal-context",[198,199,200,204],"p",{},[201,202,203],"code",{},"useModalContext\u003CT>()"," is the primary API inside a modal component. It returns everything the component needs to interact with the modal system.",[206,207,209],"h2",{"id":208},"signature","Signature",[211,212,217],"pre",{"className":213,"code":214,"language":215,"meta":216,"style":216},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useModalContext\u003CT = unknown>(): {\n  id: number\n  group: ModalGroup\n  isClosing: ComputedRef\u003Cboolean>\n  isTopmost: ComputedRef\u003Cboolean>\n  isTopmostGlobal: ComputedRef\u003Cboolean>\n  effectiveOptions: ComputedRef\u003CModalEffectiveOptions>\n  close(opts?: { ignoreGuard?: boolean; instantExit?: boolean }): void\n  confirm(data: T, opts?: { ignoreGuard?: boolean; instantExit?: boolean }): void\n  onBeforeClose(handler: BeforeCloseHandler): void\n}\n","ts","",[201,218,219,252,265,276,295,311,327,344,387,431,452],{"__ignoreMap":216},[220,221,224,228,232,236,240,243,246,249],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"spNyl","function",[220,229,231],{"class":230},"s2Zo4"," useModalContext",[220,233,235],{"class":234},"sMK4o","\u003C",[220,237,239],{"class":238},"sBMFI","T",[220,241,242],{"class":234}," =",[220,244,245],{"class":238}," unknown",[220,247,248],{"class":234},">():",[220,250,251],{"class":234}," {\n",[220,253,255,259,262],{"class":222,"line":254},2,[220,256,258],{"class":257},"swJcz","  id",[220,260,261],{"class":234},":",[220,263,264],{"class":238}," number\n",[220,266,268,271,273],{"class":222,"line":267},3,[220,269,270],{"class":257},"  group",[220,272,261],{"class":234},[220,274,275],{"class":238}," ModalGroup\n",[220,277,279,282,284,287,289,292],{"class":222,"line":278},4,[220,280,281],{"class":257},"  isClosing",[220,283,261],{"class":234},[220,285,286],{"class":238}," ComputedRef",[220,288,235],{"class":234},[220,290,291],{"class":238},"boolean",[220,293,294],{"class":234},">\n",[220,296,298,301,303,305,307,309],{"class":222,"line":297},5,[220,299,300],{"class":257},"  isTopmost",[220,302,261],{"class":234},[220,304,286],{"class":238},[220,306,235],{"class":234},[220,308,291],{"class":238},[220,310,294],{"class":234},[220,312,314,317,319,321,323,325],{"class":222,"line":313},6,[220,315,316],{"class":257},"  isTopmostGlobal",[220,318,261],{"class":234},[220,320,286],{"class":238},[220,322,235],{"class":234},[220,324,291],{"class":238},[220,326,294],{"class":234},[220,328,330,333,335,337,339,342],{"class":222,"line":329},7,[220,331,332],{"class":257},"  effectiveOptions",[220,334,261],{"class":234},[220,336,286],{"class":238},[220,338,235],{"class":234},[220,340,341],{"class":238},"ModalEffectiveOptions",[220,343,294],{"class":234},[220,345,347,350,353,357,360,363,366,368,371,374,377,379,381,384],{"class":222,"line":346},8,[220,348,349],{"class":257},"  close",[220,351,352],{"class":234},"(",[220,354,356],{"class":355},"sHdIc","opts",[220,358,359],{"class":234},"?:",[220,361,362],{"class":234}," {",[220,364,365],{"class":257}," ignoreGuard",[220,367,359],{"class":234},[220,369,370],{"class":238}," boolean",[220,372,373],{"class":234},";",[220,375,376],{"class":257}," instantExit",[220,378,359],{"class":234},[220,380,370],{"class":238},[220,382,383],{"class":234}," }):",[220,385,386],{"class":238}," void\n",[220,388,390,393,395,398,400,403,406,409,411,413,415,417,419,421,423,425,427,429],{"class":222,"line":389},9,[220,391,392],{"class":257},"  confirm",[220,394,352],{"class":234},[220,396,397],{"class":355},"data",[220,399,261],{"class":234},[220,401,402],{"class":238}," T",[220,404,405],{"class":234},",",[220,407,408],{"class":355}," opts",[220,410,359],{"class":234},[220,412,362],{"class":234},[220,414,365],{"class":257},[220,416,359],{"class":234},[220,418,370],{"class":238},[220,420,373],{"class":234},[220,422,376],{"class":257},[220,424,359],{"class":234},[220,426,370],{"class":238},[220,428,383],{"class":234},[220,430,386],{"class":238},[220,432,434,437,439,442,444,447,450],{"class":222,"line":433},10,[220,435,436],{"class":257},"  onBeforeClose",[220,438,352],{"class":234},[220,440,441],{"class":355},"handler",[220,443,261],{"class":234},[220,445,446],{"class":238}," BeforeCloseHandler",[220,448,449],{"class":234},"):",[220,451,386],{"class":238},[220,453,455],{"class":222,"line":454},11,[220,456,457],{"class":234},"}\n",[198,459,460,461,464,465,468],{},"Throws if called outside a modal opened via ",[201,462,463],{},"openModal"," \u002F ",[201,466,467],{},"useModal",".",[206,470,472,475,476],{"id":471},"id-and-group",[201,473,474],{},"id"," and ",[201,477,478],{},"group",[198,480,481,482,484],{},"Numeric id and group name for this instance. Stable for the modal's lifetime. Pass ",[201,483,474],{}," outward when something else needs to close this modal:",[211,486,488],{"className":213,"code":487,"language":215,"meta":216,"style":216},"const { id } = useModalContext()\n\u002F\u002F elsewhere:\ncloseModalById(id, { success: true, data: result })\n",[201,489,490,511,517],{"__ignoreMap":216},[220,491,492,495,497,501,504,506,508],{"class":222,"line":223},[220,493,494],{"class":226},"const",[220,496,362],{"class":234},[220,498,500],{"class":499},"sTEyZ"," id ",[220,502,503],{"class":234},"}",[220,505,242],{"class":234},[220,507,231],{"class":230},[220,509,510],{"class":499},"()\n",[220,512,513],{"class":222,"line":254},[220,514,516],{"class":515},"sHwdD","\u002F\u002F elsewhere:\n",[220,518,519,522,525,527,529,532,534,538,540,543,545,548,550],{"class":222,"line":267},[220,520,521],{"class":230},"closeModalById",[220,523,524],{"class":499},"(id",[220,526,405],{"class":234},[220,528,362],{"class":234},[220,530,531],{"class":257}," success",[220,533,261],{"class":234},[220,535,537],{"class":536},"sfNiH"," true",[220,539,405],{"class":234},[220,541,542],{"class":257}," data",[220,544,261],{"class":234},[220,546,547],{"class":499}," result ",[220,549,503],{"class":234},[220,551,552],{"class":499},")\n",[206,554,556],{"id":555},"isclosing",[201,557,558],{},"isClosing",[198,560,561,564],{},[201,562,563],{},"true"," once a close is requested and the exit animation begins. The component is still mounted — use it to disable interactions during exit:",[211,566,570],{"className":567,"code":568,"language":569,"meta":216,"style":216},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton :disabled=\"isClosing\" @click=\"confirm(true)\">OK\u003C\u002Fbutton>\n","vue",[201,571,572],{"__ignoreMap":216},[220,573,574,576,579,582,585,588,591,593,595,598,601,603,605,608,610,612,615,617,620,623,626,628],{"class":222,"line":223},[220,575,235],{"class":234},[220,577,578],{"class":257},"button",[220,580,581],{"class":234}," :",[220,583,584],{"class":226},"disabled",[220,586,587],{"class":234},"=",[220,589,590],{"class":234},"\"",[220,592,558],{"class":499},[220,594,590],{"class":234},[220,596,597],{"class":234}," @",[220,599,600],{"class":226},"click",[220,602,587],{"class":234},[220,604,590],{"class":234},[220,606,607],{"class":230},"confirm",[220,609,352],{"class":499},[220,611,563],{"class":536},[220,613,614],{"class":499},")",[220,616,590],{"class":234},[220,618,619],{"class":234},">",[220,621,622],{"class":499},"OK",[220,624,625],{"class":234},"\u003C\u002F",[220,627,578],{"class":257},[220,629,294],{"class":234},[206,631,633,636,637],{"id":632},"istopmost-vs-istopmostglobal",[201,634,635],{},"isTopmost"," vs ",[201,638,639],{},"isTopmostGlobal",[641,642,643,656],"table",{},[644,645,646],"thead",{},[647,648,649,653],"tr",{},[650,651,652],"th",{},"Property",[650,654,655],{},"True when…",[657,658,659,673],"tbody",{},[647,660,661,666],{},[662,663,664],"td",{},[201,665,635],{},[662,667,668,669,468],{},"This modal is the topmost ",[670,671,672],"strong",{},"within its own group",[647,674,675,679],{},[662,676,677],{},[201,678,639],{},[662,680,668,681,468],{},[670,682,683],{},"across all groups",[198,685,686,687,689,690,692,693,696],{},"Use ",[201,688,635],{}," to gate group-local UI; ",[201,691,639],{}," for app-wide concerns (e.g. updating ",[201,694,695],{},"document.title",").",[206,698,700],{"id":699},"effectiveoptions",[201,701,702],{},"effectiveOptions",[198,704,705,708,709,712],{},[201,706,707],{},"ComputedRef\u003CModalEffectiveOptions>"," — the resolved behavior for this modal, combining ",[201,710,711],{},"\u003CModalTarget>"," props and the registered group config.",[211,714,716],{"className":213,"code":715,"language":215,"meta":216,"style":216},"interface ModalEffectiveOptions {\n  interactOutside: boolean         \u002F\u002F non-modal mode (no focus trap)\n  closeOnInteractOutside: boolean  \u002F\u002F click outside region closes\n  closeOnInteractOverlay: boolean  \u002F\u002F click on overlay area closes\n  lockBodyScroll: boolean          \u002F\u002F body scroll is locked\n  closeOnEscape: boolean           \u002F\u002F Esc closes\n}\n",[201,717,718,728,740,752,764,776,788],{"__ignoreMap":216},[220,719,720,723,726],{"class":222,"line":223},[220,721,722],{"class":226},"interface",[220,724,725],{"class":238}," ModalEffectiveOptions",[220,727,251],{"class":234},[220,729,730,733,735,737],{"class":222,"line":254},[220,731,732],{"class":257},"  interactOutside",[220,734,261],{"class":234},[220,736,370],{"class":238},[220,738,739],{"class":515},"         \u002F\u002F non-modal mode (no focus trap)\n",[220,741,742,745,747,749],{"class":222,"line":267},[220,743,744],{"class":257},"  closeOnInteractOutside",[220,746,261],{"class":234},[220,748,370],{"class":238},[220,750,751],{"class":515},"  \u002F\u002F click outside region closes\n",[220,753,754,757,759,761],{"class":222,"line":278},[220,755,756],{"class":257},"  closeOnInteractOverlay",[220,758,261],{"class":234},[220,760,370],{"class":238},[220,762,763],{"class":515},"  \u002F\u002F click on overlay area closes\n",[220,765,766,769,771,773],{"class":222,"line":297},[220,767,768],{"class":257},"  lockBodyScroll",[220,770,261],{"class":234},[220,772,370],{"class":238},[220,774,775],{"class":515},"          \u002F\u002F body scroll is locked\n",[220,777,778,781,783,785],{"class":222,"line":313},[220,779,780],{"class":257},"  closeOnEscape",[220,782,261],{"class":234},[220,784,370],{"class":238},[220,786,787],{"class":515},"           \u002F\u002F Esc closes\n",[220,789,790],{"class":222,"line":329},[220,791,457],{"class":234},[198,793,794,795,798,799,802],{},"Values are in the ",[670,796,797],{},"positive form"," (already negated from the ",[201,800,801],{},"disable*"," flags). Read-only.",[206,804,806],{"id":805},"closeopts",[201,807,808],{},"close(opts?)",[198,810,811,812,815,816,819,820,468],{},"Rejects the modal's promise with ",[201,813,814],{},"ModalClosedError",". Runs ",[201,817,818],{},"onBeforeClose"," guards unless ",[201,821,822],{},"ignoreGuard: true",[211,824,826],{"className":213,"code":825,"language":215,"meta":216,"style":216},"close()\nclose({ ignoreGuard: true })\nclose({ instantExit: true })\n",[201,827,828,835,855],{"__ignoreMap":216},[220,829,830,833],{"class":222,"line":223},[220,831,832],{"class":230},"close",[220,834,510],{"class":499},[220,836,837,839,841,844,846,848,850,853],{"class":222,"line":254},[220,838,832],{"class":230},[220,840,352],{"class":499},[220,842,843],{"class":234},"{",[220,845,365],{"class":257},[220,847,261],{"class":234},[220,849,537],{"class":536},[220,851,852],{"class":234}," }",[220,854,552],{"class":499},[220,856,857,859,861,863,865,867,869,871],{"class":222,"line":267},[220,858,832],{"class":230},[220,860,352],{"class":499},[220,862,843],{"class":234},[220,864,376],{"class":257},[220,866,261],{"class":234},[220,868,537],{"class":536},[220,870,852],{"class":234},[220,872,552],{"class":499},[206,874,876],{"id":875},"confirmdata-opts",[201,877,878],{},"confirm(data, opts?)",[198,880,881,882,884,885,468],{},"Resolves the modal's promise with ",[201,883,397],{},". Type must match the generic on ",[201,886,203],{},[211,888,890],{"className":213,"code":889,"language":215,"meta":216,"style":216},"const { confirm } = useModalContext\u003C{ value: string }>()\n\nconfirm({ value: 'hello' })\n",[201,891,892,923,929],{"__ignoreMap":216},[220,893,894,896,898,901,903,905,907,910,913,915,918,921],{"class":222,"line":223},[220,895,494],{"class":226},[220,897,362],{"class":234},[220,899,900],{"class":499}," confirm ",[220,902,503],{"class":234},[220,904,242],{"class":234},[220,906,231],{"class":230},[220,908,909],{"class":234},"\u003C{",[220,911,912],{"class":257}," value",[220,914,261],{"class":234},[220,916,917],{"class":238}," string",[220,919,920],{"class":234}," }>",[220,922,510],{"class":499},[220,924,925],{"class":222,"line":254},[220,926,928],{"emptyLinePlaceholder":927},true,"\n",[220,930,931,933,935,937,939,941,944,948,951,953],{"class":222,"line":267},[220,932,607],{"class":230},[220,934,352],{"class":499},[220,936,843],{"class":234},[220,938,912],{"class":257},[220,940,261],{"class":234},[220,942,943],{"class":234}," '",[220,945,947],{"class":946},"sfazB","hello",[220,949,950],{"class":234},"'",[220,952,852],{"class":234},[220,954,552],{"class":499},[198,956,957,475,959,961],{},[201,958,832],{},[201,960,607],{}," are no-ops if the modal is already closing.",[206,963,965],{"id":964},"onbeforeclose",[201,966,818],{},[198,968,969,970,973,974,977,978,981,982,985],{},"Register a guard. Runs on every close path — ",[201,971,972],{},"close()",", ",[201,975,976],{},"confirm()",", Esc, overlay click. Return ",[201,979,980],{},"false"," (or ",[201,983,984],{},"Promise\u003Cfalse>",") to veto.",[211,987,989],{"className":213,"code":988,"language":215,"meta":216,"style":216},"type BeforeCloseHandler = () => boolean | void | Promise\u003Cboolean | void>\n",[201,990,991],{"__ignoreMap":216},[220,992,993,996,998,1000,1003,1006,1008,1011,1014,1016,1019,1021,1023,1025,1027],{"class":222,"line":223},[220,994,995],{"class":226},"type",[220,997,446],{"class":238},[220,999,242],{"class":234},[220,1001,1002],{"class":234}," ()",[220,1004,1005],{"class":226}," =>",[220,1007,370],{"class":238},[220,1009,1010],{"class":234}," |",[220,1012,1013],{"class":238}," void",[220,1015,1010],{"class":234},[220,1017,1018],{"class":238}," Promise",[220,1020,235],{"class":234},[220,1022,291],{"class":238},[220,1024,1010],{"class":234},[220,1026,1013],{"class":238},[220,1028,294],{"class":234},[198,1030,1031],{},"The guard is auto-unregistered when the component unmounts.",[1033,1034,1036],"h3",{"id":1035},"dirty-form-guard","Dirty-form guard",[211,1038,1041],{"className":567,"code":1039,"filename":1040,"language":569,"meta":216,"style":216},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { openModal, useModalContext } from '@kolirt\u002Fvue-modal'\nimport ConfirmLeave from '.\u002FConfirmLeave.vue'\n\nconst { onBeforeClose } = useModalContext\u003C{ saved: boolean }>()\nconst isDirty = ref(false)\n\nonBeforeClose(async () => {\n  if (!isDirty.value) return\n\n  const ok = await openModal\u003Cboolean>(ConfirmLeave).catch(() => false)\n  if (!ok) return false  \u002F\u002F veto\n})\n\u003C\u002Fscript>\n","EditDialog.vue",[201,1042,1043,1066,1089,1113,1130,1134,1162,1179,1183,1198,1223,1227,1273,1295,1302],{"__ignoreMap":216},[220,1044,1045,1047,1050,1053,1056,1058,1060,1062,1064],{"class":222,"line":223},[220,1046,235],{"class":234},[220,1048,1049],{"class":257},"script",[220,1051,1052],{"class":226}," setup",[220,1054,1055],{"class":226}," lang",[220,1057,587],{"class":234},[220,1059,590],{"class":234},[220,1061,215],{"class":946},[220,1063,590],{"class":234},[220,1065,294],{"class":234},[220,1067,1068,1072,1074,1077,1079,1082,1084,1086],{"class":222,"line":254},[220,1069,1071],{"class":1070},"s7zQu","import",[220,1073,362],{"class":234},[220,1075,1076],{"class":499}," ref",[220,1078,852],{"class":234},[220,1080,1081],{"class":1070}," from",[220,1083,943],{"class":234},[220,1085,569],{"class":946},[220,1087,1088],{"class":234},"'\n",[220,1090,1091,1093,1095,1098,1100,1102,1104,1106,1108,1111],{"class":222,"line":267},[220,1092,1071],{"class":1070},[220,1094,362],{"class":234},[220,1096,1097],{"class":499}," openModal",[220,1099,405],{"class":234},[220,1101,231],{"class":499},[220,1103,852],{"class":234},[220,1105,1081],{"class":1070},[220,1107,943],{"class":234},[220,1109,1110],{"class":946},"@kolirt\u002Fvue-modal",[220,1112,1088],{"class":234},[220,1114,1115,1117,1120,1123,1125,1128],{"class":222,"line":278},[220,1116,1071],{"class":1070},[220,1118,1119],{"class":499}," ConfirmLeave ",[220,1121,1122],{"class":1070},"from",[220,1124,943],{"class":234},[220,1126,1127],{"class":946},".\u002FConfirmLeave.vue",[220,1129,1088],{"class":234},[220,1131,1132],{"class":222,"line":297},[220,1133,928],{"emptyLinePlaceholder":927},[220,1135,1136,1138,1140,1143,1145,1147,1149,1151,1154,1156,1158,1160],{"class":222,"line":313},[220,1137,494],{"class":226},[220,1139,362],{"class":234},[220,1141,1142],{"class":499}," onBeforeClose ",[220,1144,503],{"class":234},[220,1146,242],{"class":234},[220,1148,231],{"class":230},[220,1150,909],{"class":234},[220,1152,1153],{"class":257}," saved",[220,1155,261],{"class":234},[220,1157,370],{"class":238},[220,1159,920],{"class":234},[220,1161,510],{"class":499},[220,1163,1164,1166,1169,1171,1173,1175,1177],{"class":222,"line":329},[220,1165,494],{"class":226},[220,1167,1168],{"class":499}," isDirty ",[220,1170,587],{"class":234},[220,1172,1076],{"class":230},[220,1174,352],{"class":499},[220,1176,980],{"class":536},[220,1178,552],{"class":499},[220,1180,1181],{"class":222,"line":346},[220,1182,928],{"emptyLinePlaceholder":927},[220,1184,1185,1187,1189,1192,1194,1196],{"class":222,"line":389},[220,1186,818],{"class":230},[220,1188,352],{"class":499},[220,1190,1191],{"class":226},"async",[220,1193,1002],{"class":234},[220,1195,1005],{"class":226},[220,1197,251],{"class":234},[220,1199,1200,1203,1206,1209,1212,1214,1217,1220],{"class":222,"line":433},[220,1201,1202],{"class":1070},"  if",[220,1204,1205],{"class":257}," (",[220,1207,1208],{"class":234},"!",[220,1210,1211],{"class":499},"isDirty",[220,1213,468],{"class":234},[220,1215,1216],{"class":499},"value",[220,1218,1219],{"class":257},") ",[220,1221,1222],{"class":1070},"return\n",[220,1224,1225],{"class":222,"line":454},[220,1226,928],{"emptyLinePlaceholder":927},[220,1228,1230,1233,1236,1238,1241,1243,1245,1247,1249,1251,1254,1256,1258,1261,1263,1266,1268,1271],{"class":222,"line":1229},12,[220,1231,1232],{"class":226},"  const",[220,1234,1235],{"class":499}," ok",[220,1237,242],{"class":234},[220,1239,1240],{"class":1070}," await",[220,1242,1097],{"class":230},[220,1244,235],{"class":234},[220,1246,291],{"class":238},[220,1248,619],{"class":234},[220,1250,352],{"class":257},[220,1252,1253],{"class":499},"ConfirmLeave",[220,1255,614],{"class":257},[220,1257,468],{"class":234},[220,1259,1260],{"class":230},"catch",[220,1262,352],{"class":257},[220,1264,1265],{"class":234},"()",[220,1267,1005],{"class":226},[220,1269,1270],{"class":536}," false",[220,1272,552],{"class":257},[220,1274,1276,1278,1280,1282,1285,1287,1290,1292],{"class":222,"line":1275},13,[220,1277,1202],{"class":1070},[220,1279,1205],{"class":257},[220,1281,1208],{"class":234},[220,1283,1284],{"class":499},"ok",[220,1286,1219],{"class":257},[220,1288,1289],{"class":1070},"return",[220,1291,1270],{"class":536},[220,1293,1294],{"class":515},"  \u002F\u002F veto\n",[220,1296,1298,1300],{"class":222,"line":1297},14,[220,1299,503],{"class":234},[220,1301,552],{"class":499},[220,1303,1305,1307,1309],{"class":222,"line":1304},15,[220,1306,625],{"class":234},[220,1308,1049],{"class":257},[220,1310,294],{"class":234},[1033,1312,1314],{"id":1313},"bypassing-guards","Bypassing guards",[198,1316,1317,1318,1320,1321,1324,1325,261],{},"Pass ",[201,1319,822],{}," from the caller side — ",[201,1322,1323],{},"replaceModal"," does this internally; route guards typically pair it with ",[201,1326,1327],{},"instantExit",[211,1329,1331],{"className":213,"code":1330,"language":215,"meta":216,"style":216},"closeAllModals({ ignoreGuard: true, instantExit: true })\nhandle.close({ ignoreGuard: true })\n",[201,1332,1333,1360],{"__ignoreMap":216},[220,1334,1335,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358],{"class":222,"line":223},[220,1336,1337],{"class":230},"closeAllModals",[220,1339,352],{"class":499},[220,1341,843],{"class":234},[220,1343,365],{"class":257},[220,1345,261],{"class":234},[220,1347,537],{"class":536},[220,1349,405],{"class":234},[220,1351,376],{"class":257},[220,1353,261],{"class":234},[220,1355,537],{"class":536},[220,1357,852],{"class":234},[220,1359,552],{"class":499},[220,1361,1362,1365,1367,1369,1371,1373,1375,1377,1379,1381],{"class":222,"line":254},[220,1363,1364],{"class":499},"handle",[220,1366,468],{"class":234},[220,1368,832],{"class":230},[220,1370,352],{"class":499},[220,1372,843],{"class":234},[220,1374,365],{"class":257},[220,1376,261],{"class":234},[220,1378,537],{"class":536},[220,1380,852],{"class":234},[220,1382,552],{"class":499},[206,1384,1386],{"id":1385},"full-example","Full example",[211,1388,1391],{"className":567,"code":1389,"filename":1390,"language":569,"meta":216,"style":216},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  ModalContent,\n  ModalRoot,\n  ModalTitle,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst props = defineProps\u003C{ userId: number }>()\n\nconst { isClosing, close, confirm, onBeforeClose } = useModalContext\u003C{ name: string }>()\n\nconst name = ref('')\nconst dirty = ref(false)\n\nonBeforeClose(() => {\n  if (dirty.value) return false\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"root\">\n    \u003CModalContent class=\"card\">\n      \u003CModalTitle>Edit profile #{{ props.userId }}\u003C\u002FModalTitle>\n      \u003Cinput v-model=\"name\" @input=\"dirty = true\" \u002F>\n      \u003Cbutton :disabled=\"isClosing\" @click=\"close()\">Cancel\u003C\u002Fbutton>\n      \u003Cbutton :disabled=\"isClosing\" @click=\"confirm({ name })\">Save\u003C\u002Fbutton>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","ProfileEditor.vue",[201,1392,1393,1413,1431,1437,1445,1452,1459,1464,1476,1480,1505,1509,1535,1539,1581,1585,1604,1622,1627,1640,1661,1668,1677,1682,1692,1715,1737,1757,1792,1832,1871,1881,1891],{"__ignoreMap":216},[220,1394,1395,1397,1399,1401,1403,1405,1407,1409,1411],{"class":222,"line":223},[220,1396,235],{"class":234},[220,1398,1049],{"class":257},[220,1400,1052],{"class":226},[220,1402,1055],{"class":226},[220,1404,587],{"class":234},[220,1406,590],{"class":234},[220,1408,215],{"class":946},[220,1410,590],{"class":234},[220,1412,294],{"class":234},[220,1414,1415,1417,1419,1421,1423,1425,1427,1429],{"class":222,"line":254},[220,1416,1071],{"class":1070},[220,1418,362],{"class":234},[220,1420,1076],{"class":499},[220,1422,852],{"class":234},[220,1424,1081],{"class":1070},[220,1426,943],{"class":234},[220,1428,569],{"class":946},[220,1430,1088],{"class":234},[220,1432,1433,1435],{"class":222,"line":267},[220,1434,1071],{"class":1070},[220,1436,251],{"class":234},[220,1438,1439,1442],{"class":222,"line":278},[220,1440,1441],{"class":499},"  ModalContent",[220,1443,1444],{"class":234},",\n",[220,1446,1447,1450],{"class":222,"line":297},[220,1448,1449],{"class":499},"  ModalRoot",[220,1451,1444],{"class":234},[220,1453,1454,1457],{"class":222,"line":313},[220,1455,1456],{"class":499},"  ModalTitle",[220,1458,1444],{"class":234},[220,1460,1461],{"class":222,"line":329},[220,1462,1463],{"class":499},"  useModalContext\n",[220,1465,1466,1468,1470,1472,1474],{"class":222,"line":346},[220,1467,503],{"class":234},[220,1469,1081],{"class":1070},[220,1471,943],{"class":234},[220,1473,1110],{"class":946},[220,1475,1088],{"class":234},[220,1477,1478],{"class":222,"line":389},[220,1479,928],{"emptyLinePlaceholder":927},[220,1481,1482,1485,1487,1489,1492,1494,1496,1499,1501,1503],{"class":222,"line":433},[220,1483,1484],{"class":230},"defineOptions",[220,1486,352],{"class":499},[220,1488,843],{"class":234},[220,1490,1491],{"class":257}," modalGroup",[220,1493,261],{"class":234},[220,1495,943],{"class":234},[220,1497,1498],{"class":946},"default",[220,1500,950],{"class":234},[220,1502,852],{"class":234},[220,1504,552],{"class":499},[220,1506,1507],{"class":222,"line":454},[220,1508,928],{"emptyLinePlaceholder":927},[220,1510,1511,1513,1516,1518,1521,1523,1526,1528,1531,1533],{"class":222,"line":1229},[220,1512,494],{"class":226},[220,1514,1515],{"class":499}," props ",[220,1517,587],{"class":234},[220,1519,1520],{"class":230}," defineProps",[220,1522,909],{"class":234},[220,1524,1525],{"class":257}," userId",[220,1527,261],{"class":234},[220,1529,1530],{"class":238}," number",[220,1532,920],{"class":234},[220,1534,510],{"class":499},[220,1536,1537],{"class":222,"line":1275},[220,1538,928],{"emptyLinePlaceholder":927},[220,1540,1541,1543,1545,1548,1550,1553,1555,1558,1560,1562,1564,1566,1568,1570,1573,1575,1577,1579],{"class":222,"line":1297},[220,1542,494],{"class":226},[220,1544,362],{"class":234},[220,1546,1547],{"class":499}," isClosing",[220,1549,405],{"class":234},[220,1551,1552],{"class":499}," close",[220,1554,405],{"class":234},[220,1556,1557],{"class":499}," confirm",[220,1559,405],{"class":234},[220,1561,1142],{"class":499},[220,1563,503],{"class":234},[220,1565,242],{"class":234},[220,1567,231],{"class":230},[220,1569,909],{"class":234},[220,1571,1572],{"class":257}," name",[220,1574,261],{"class":234},[220,1576,917],{"class":238},[220,1578,920],{"class":234},[220,1580,510],{"class":499},[220,1582,1583],{"class":222,"line":1304},[220,1584,928],{"emptyLinePlaceholder":927},[220,1586,1588,1590,1593,1595,1597,1599,1602],{"class":222,"line":1587},16,[220,1589,494],{"class":226},[220,1591,1592],{"class":499}," name ",[220,1594,587],{"class":234},[220,1596,1076],{"class":230},[220,1598,352],{"class":499},[220,1600,1601],{"class":234},"''",[220,1603,552],{"class":499},[220,1605,1607,1609,1612,1614,1616,1618,1620],{"class":222,"line":1606},17,[220,1608,494],{"class":226},[220,1610,1611],{"class":499}," dirty ",[220,1613,587],{"class":234},[220,1615,1076],{"class":230},[220,1617,352],{"class":499},[220,1619,980],{"class":536},[220,1621,552],{"class":499},[220,1623,1625],{"class":222,"line":1624},18,[220,1626,928],{"emptyLinePlaceholder":927},[220,1628,1630,1632,1634,1636,1638],{"class":222,"line":1629},19,[220,1631,818],{"class":230},[220,1633,352],{"class":499},[220,1635,1265],{"class":234},[220,1637,1005],{"class":226},[220,1639,251],{"class":234},[220,1641,1643,1645,1647,1650,1652,1654,1656,1658],{"class":222,"line":1642},20,[220,1644,1202],{"class":1070},[220,1646,1205],{"class":257},[220,1648,1649],{"class":499},"dirty",[220,1651,468],{"class":234},[220,1653,1216],{"class":499},[220,1655,1219],{"class":257},[220,1657,1289],{"class":1070},[220,1659,1660],{"class":536}," false\n",[220,1662,1664,1666],{"class":222,"line":1663},21,[220,1665,503],{"class":234},[220,1667,552],{"class":499},[220,1669,1671,1673,1675],{"class":222,"line":1670},22,[220,1672,625],{"class":234},[220,1674,1049],{"class":257},[220,1676,294],{"class":234},[220,1678,1680],{"class":222,"line":1679},23,[220,1681,928],{"emptyLinePlaceholder":927},[220,1683,1685,1687,1690],{"class":222,"line":1684},24,[220,1686,235],{"class":234},[220,1688,1689],{"class":257},"template",[220,1691,294],{"class":234},[220,1693,1695,1698,1701,1704,1706,1708,1711,1713],{"class":222,"line":1694},25,[220,1696,1697],{"class":234},"  \u003C",[220,1699,1700],{"class":257},"ModalRoot",[220,1702,1703],{"class":226}," class",[220,1705,587],{"class":234},[220,1707,590],{"class":234},[220,1709,1710],{"class":946},"root",[220,1712,590],{"class":234},[220,1714,294],{"class":234},[220,1716,1718,1721,1724,1726,1728,1730,1733,1735],{"class":222,"line":1717},26,[220,1719,1720],{"class":234},"    \u003C",[220,1722,1723],{"class":257},"ModalContent",[220,1725,1703],{"class":226},[220,1727,587],{"class":234},[220,1729,590],{"class":234},[220,1731,1732],{"class":946},"card",[220,1734,590],{"class":234},[220,1736,294],{"class":234},[220,1738,1740,1743,1746,1748,1751,1753,1755],{"class":222,"line":1739},27,[220,1741,1742],{"class":234},"      \u003C",[220,1744,1745],{"class":257},"ModalTitle",[220,1747,619],{"class":234},[220,1749,1750],{"class":499},"Edit profile #{{ props.userId }}",[220,1752,625],{"class":234},[220,1754,1745],{"class":257},[220,1756,294],{"class":234},[220,1758,1760,1762,1765,1768,1770,1772,1775,1777,1780,1782,1784,1787,1789],{"class":222,"line":1759},28,[220,1761,1742],{"class":234},[220,1763,1764],{"class":257},"input",[220,1766,1767],{"class":226}," v-model",[220,1769,587],{"class":234},[220,1771,590],{"class":234},[220,1773,1774],{"class":946},"name",[220,1776,590],{"class":234},[220,1778,1779],{"class":226}," @input",[220,1781,587],{"class":234},[220,1783,590],{"class":234},[220,1785,1786],{"class":946},"dirty = true",[220,1788,590],{"class":234},[220,1790,1791],{"class":234}," \u002F>\n",[220,1793,1795,1797,1799,1802,1804,1806,1808,1810,1813,1815,1817,1819,1821,1823,1826,1828,1830],{"class":222,"line":1794},29,[220,1796,1742],{"class":234},[220,1798,578],{"class":257},[220,1800,1801],{"class":226}," :disabled",[220,1803,587],{"class":234},[220,1805,590],{"class":234},[220,1807,558],{"class":946},[220,1809,590],{"class":234},[220,1811,1812],{"class":226}," @click",[220,1814,587],{"class":234},[220,1816,590],{"class":234},[220,1818,972],{"class":946},[220,1820,590],{"class":234},[220,1822,619],{"class":234},[220,1824,1825],{"class":499},"Cancel",[220,1827,625],{"class":234},[220,1829,578],{"class":257},[220,1831,294],{"class":234},[220,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1858,1860,1862,1865,1867,1869],{"class":222,"line":1834},30,[220,1836,1742],{"class":234},[220,1838,578],{"class":257},[220,1840,1801],{"class":226},[220,1842,587],{"class":234},[220,1844,590],{"class":234},[220,1846,558],{"class":946},[220,1848,590],{"class":234},[220,1850,1812],{"class":226},[220,1852,587],{"class":234},[220,1854,590],{"class":234},[220,1856,1857],{"class":946},"confirm({ name })",[220,1859,590],{"class":234},[220,1861,619],{"class":234},[220,1863,1864],{"class":499},"Save",[220,1866,625],{"class":234},[220,1868,578],{"class":257},[220,1870,294],{"class":234},[220,1872,1874,1877,1879],{"class":222,"line":1873},31,[220,1875,1876],{"class":234},"    \u003C\u002F",[220,1878,1723],{"class":257},[220,1880,294],{"class":234},[220,1882,1884,1887,1889],{"class":222,"line":1883},32,[220,1885,1886],{"class":234},"  \u003C\u002F",[220,1888,1700],{"class":257},[220,1890,294],{"class":234},[220,1892,1894,1896,1898],{"class":222,"line":1893},33,[220,1895,625],{"class":234},[220,1897,1689],{"class":257},[220,1899,294],{"class":234},[1901,1902,1903],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":216,"searchDepth":254,"depth":254,"links":1905},[1906,1907,1909,1910,1912,1913,1914,1915,1919],{"id":208,"depth":254,"text":209},{"id":471,"depth":254,"text":1908},"id and group",{"id":555,"depth":254,"text":558},{"id":632,"depth":254,"text":1911},"isTopmost vs isTopmostGlobal",{"id":699,"depth":254,"text":702},{"id":805,"depth":254,"text":808},{"id":875,"depth":254,"text":878},{"id":964,"depth":254,"text":818,"children":1916},[1917,1918],{"id":1035,"depth":267,"text":1036},{"id":1313,"depth":267,"text":1314},{"id":1385,"depth":254,"text":1386},"Full reference for useModalContext — id, group, isTopmost, effectiveOptions, close, confirm, onBeforeClose.","md",null,{},{"title":82,"description":1920},"xwANp2mdwA66bNVsSUIAzhf8rDE_aV7k8GObbwonKYg",[1927,1929],{"title":78,"path":79,"stem":80,"description":1928,"children":-1},"Bind a modal component to a reactive controller — persistent listeners, reactive isOpen, auto-cleanup.",{"title":86,"path":87,"stem":88,"description":1930,"children":-1},"When and how to use more than one ModalTarget — visual layering, scroll-lock policies, separate DOM positions.",1779523618024]