[{"data":1,"prerenderedAt":1971},["ShallowReactive",2],{"navigation_docs":3,"-resources-migration-from-v1":188,"-resources-migration-from-v1-surround":1966},[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":169,"body":190,"description":1960,"extension":1961,"links":1962,"meta":1963,"navigation":506,"path":170,"seo":1964,"stem":171,"__hash__":1965},"docs\u002F7.resources\u002F1.migration-from-v1.md",{"type":191,"value":192,"toc":1940},"minimark",[193,197,201,206,421,424,428,433,458,462,685,691,695,702,800,816,823,937,943,954,1163,1172,1334,1347,1351,1364,1454,1465,1473,1713,1719,1724,1731,1746,1748,1752,1908,1936],[194,195,169],"h1",{"id":196},"migration-from-v1",[198,199,200],"p",{},"v2 is a ground-up rewrite. The imperative promise-based approach stays, but nearly every API surface changed. Plan an afternoon — the migration is mechanical, not architectural.",[202,203,205],"h2",{"id":204},"breaking-changes-at-a-glance","Breaking changes at a glance",[207,208,209,225],"table",{},[210,211,212],"thead",{},[213,214,215,219,222],"tr",{},[216,217,218],"th",{},"Area",[216,220,221],{},"v1",[216,223,224],{},"v2",[226,227,228,246,263,280,302,325,355,377,391,404],"tbody",{},[213,229,230,234,241],{},[231,232,233],"td",{},"Source layout",[231,235,236,240],{},[237,238,239],"code",{},"lib\u002F"," flat",[231,242,243],{},[237,244,245],{},"packages\u002Fcore\u002Fsrc\u002F",[213,247,248,251,257],{},[231,249,250],{},"Plugin options",[231,252,253,256],{},[237,254,255],{},"createModal(Options)"," (animation, style)",[231,258,259,262],{},[237,260,261],{},"createModal({ groups })"," (behavior per group)",[213,264,265,267,274],{},[231,266,45],{},[231,268,269,270,273],{},"optional ",[237,271,272],{},"'default'"," implicit",[231,275,276,277],{},"mandatory; declared via ",[237,278,279],{},"ModalGroupRegistry",[213,281,282,288,293],{},[231,283,284,287],{},[237,285,286],{},"openModal"," signature",[231,289,290],{},[237,291,292],{},"openModal(Component, props, options?)",[231,294,295,298,299],{},[237,296,297],{},"openModal(Component, options?)"," — props inside ",[237,300,301],{},"options.props",[213,303,304,307,317],{},[231,305,306],{},"Confirm \u002F close inside modal",[231,308,309,310,313,314],{},"global ",[237,311,312],{},"confirmModal(data)"," \u002F ",[237,315,316],{},"closeModal()",[231,318,319,313,322],{},[237,320,321],{},"useModalContext().confirm(data)",[237,323,324],{},".close()",[213,326,327,330,345],{},[231,328,329],{},"Event bus",[231,331,332,313,335,313,338,341,342],{},[237,333,334],{},"$on",[237,336,337],{},"$off",[237,339,340],{},"$emit"," from ",[237,343,344],{},"event.ts",[231,346,347,348,351,352],{},"removed; replaced by ",[237,349,350],{},"options.on"," map and ",[237,353,354],{},"ModalHandle.on\u002Foff",[213,356,357,360,369],{},[231,358,359],{},"Template component",[231,361,362,365,366],{},[237,363,364],{},"\u003CModalTarget group=\"…\">"," + scoped slot \u002F ",[237,367,368],{},"BaseModal",[231,370,371,373,374],{},[237,372,364],{}," wrapping your ",[237,375,376],{},"\u003CModalRoot>…\u003CModalContent>",[213,378,379,382,388],{},[231,380,381],{},"Built-in layout",[231,383,384,387],{},[237,385,386],{},"SimpleModal"," shipped",[231,389,390],{},"removed; headless only",[213,392,393,396,399],{},[231,394,395],{},"TypeScript groups",[231,397,398],{},"untyped strings",[231,400,401],{},[237,402,403],{},"declare module '@kolirt\u002Fvue-modal' { interface ModalGroupRegistry { … } }",[213,405,406,409,412],{},[231,407,408],{},"Peer deps",[231,410,411],{},"none",[231,413,414,417,418],{},[237,415,416],{},"reka-ui >=2",", ",[237,419,420],{},"vue >=3.4",[422,423],"hr",{},[202,425,427],{"id":426},"step-by-step-checklist","Step-by-step checklist",[429,430,432],"h3",{"id":431},"_1-install-the-new-peer-dependency","1. Install the new peer dependency",[434,435,440],"pre",{"className":436,"code":437,"language":438,"meta":439,"style":439},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install reka-ui@^2\n","bash","",[237,441,442],{"__ignoreMap":439},[443,444,447,451,455],"span",{"class":445,"line":446},"line",1,[443,448,450],{"class":449},"sBMFI","npm",[443,452,454],{"class":453},"sfazB"," install",[443,456,457],{"class":453}," reka-ui@^2\n",[429,459,461],{"id":460},"_2-update-the-plugin-registration","2. Update the plugin registration",[463,464,465,601],"code-group",{},[434,466,470],{"className":467,"code":468,"filename":221,"language":469,"meta":439,"style":439},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createModal } from '@kolirt\u002Fvue-modal'\n\napp.use(createModal({\n  transitionTime: 300,\n  animationType: 'slideDown',\n  modalStyle: { align: 'center' }\n}))\n","ts",[237,471,472,501,508,532,549,567,592],{"__ignoreMap":439},[443,473,474,478,482,486,489,492,495,498],{"class":445,"line":446},[443,475,477],{"class":476},"s7zQu","import",[443,479,481],{"class":480},"sMK4o"," {",[443,483,485],{"class":484},"sTEyZ"," createModal",[443,487,488],{"class":480}," }",[443,490,491],{"class":476}," from",[443,493,494],{"class":480}," '",[443,496,497],{"class":453},"@kolirt\u002Fvue-modal",[443,499,500],{"class":480},"'\n",[443,502,504],{"class":445,"line":503},2,[443,505,507],{"emptyLinePlaceholder":506},true,"\n",[443,509,511,514,517,521,524,527,529],{"class":445,"line":510},3,[443,512,513],{"class":484},"app",[443,515,516],{"class":480},".",[443,518,520],{"class":519},"s2Zo4","use",[443,522,523],{"class":484},"(",[443,525,526],{"class":519},"createModal",[443,528,523],{"class":484},[443,530,531],{"class":480},"{\n",[443,533,535,539,542,546],{"class":445,"line":534},4,[443,536,538],{"class":537},"swJcz","  transitionTime",[443,540,541],{"class":480},":",[443,543,545],{"class":544},"sbssI"," 300",[443,547,548],{"class":480},",\n",[443,550,552,555,557,559,562,565],{"class":445,"line":551},5,[443,553,554],{"class":537},"  animationType",[443,556,541],{"class":480},[443,558,494],{"class":480},[443,560,561],{"class":453},"slideDown",[443,563,564],{"class":480},"'",[443,566,548],{"class":480},[443,568,570,573,575,577,580,582,584,587,589],{"class":445,"line":569},6,[443,571,572],{"class":537},"  modalStyle",[443,574,541],{"class":480},[443,576,481],{"class":480},[443,578,579],{"class":537}," align",[443,581,541],{"class":480},[443,583,494],{"class":480},[443,585,586],{"class":453},"center",[443,588,564],{"class":480},[443,590,591],{"class":480}," }\n",[443,593,595,598],{"class":445,"line":594},7,[443,596,597],{"class":480},"}",[443,599,600],{"class":484},"))\n",[434,602,604],{"className":467,"code":603,"filename":224,"language":469,"meta":439,"style":439},"import { createModal } from '@kolirt\u002Fvue-modal'\n\napp.use(createModal({\n  groups: {\n    default: { disableCloseOnEscape: false }\n  }\n}))\n",[237,605,606,624,628,644,654,674,679],{"__ignoreMap":439},[443,607,608,610,612,614,616,618,620,622],{"class":445,"line":446},[443,609,477],{"class":476},[443,611,481],{"class":480},[443,613,485],{"class":484},[443,615,488],{"class":480},[443,617,491],{"class":476},[443,619,494],{"class":480},[443,621,497],{"class":453},[443,623,500],{"class":480},[443,625,626],{"class":445,"line":503},[443,627,507],{"emptyLinePlaceholder":506},[443,629,630,632,634,636,638,640,642],{"class":445,"line":510},[443,631,513],{"class":484},[443,633,516],{"class":480},[443,635,520],{"class":519},[443,637,523],{"class":484},[443,639,526],{"class":519},[443,641,523],{"class":484},[443,643,531],{"class":480},[443,645,646,649,651],{"class":445,"line":534},[443,647,648],{"class":537},"  groups",[443,650,541],{"class":480},[443,652,653],{"class":480}," {\n",[443,655,656,659,661,663,666,668,672],{"class":445,"line":551},[443,657,658],{"class":537},"    default",[443,660,541],{"class":480},[443,662,481],{"class":480},[443,664,665],{"class":537}," disableCloseOnEscape",[443,667,541],{"class":480},[443,669,671],{"class":670},"sfNiH"," false",[443,673,591],{"class":480},[443,675,676],{"class":445,"line":569},[443,677,678],{"class":480},"  }\n",[443,680,681,683],{"class":445,"line":594},[443,682,597],{"class":480},[443,684,600],{"class":484},[198,686,687,688,516],{},"Animation and style options are removed. Apply CSS transitions directly on ",[237,689,690],{},"\u003CModalContent>",[429,692,694],{"id":693},"_3-declare-groups-in-typescript","3. Declare groups in TypeScript",[198,696,697,698,701],{},"Add a global augmentation file (e.g., ",[237,699,700],{},"src\u002Fmodal-groups.d.ts","):",[434,703,705],{"className":467,"code":704,"language":469,"meta":439,"style":439},"import type { DefineGroups } from '@kolirt\u002Fvue-modal'\n\ndeclare module '@kolirt\u002Fvue-modal' {\n  interface ModalGroupRegistry extends DefineGroups\u003C['default', 'confirm']> {}\n}\n",[237,706,707,729,733,750,795],{"__ignoreMap":439},[443,708,709,711,714,716,719,721,723,725,727],{"class":445,"line":446},[443,710,477],{"class":476},[443,712,713],{"class":476}," type",[443,715,481],{"class":480},[443,717,718],{"class":484}," DefineGroups",[443,720,488],{"class":480},[443,722,491],{"class":476},[443,724,494],{"class":480},[443,726,497],{"class":453},[443,728,500],{"class":480},[443,730,731],{"class":445,"line":503},[443,732,507],{"emptyLinePlaceholder":506},[443,734,735,739,742,744,746,748],{"class":445,"line":510},[443,736,738],{"class":737},"spNyl","declare",[443,740,741],{"class":737}," module",[443,743,494],{"class":480},[443,745,497],{"class":453},[443,747,564],{"class":480},[443,749,653],{"class":480},[443,751,752,755,758,761,763,766,769,771,774,776,779,781,784,786,789,792],{"class":445,"line":534},[443,753,754],{"class":737},"  interface",[443,756,757],{"class":449}," ModalGroupRegistry",[443,759,760],{"class":737}," extends",[443,762,718],{"class":449},[443,764,765],{"class":480},"\u003C",[443,767,768],{"class":537},"[",[443,770,564],{"class":480},[443,772,773],{"class":453},"default",[443,775,564],{"class":480},[443,777,778],{"class":480},",",[443,780,494],{"class":480},[443,782,783],{"class":453},"confirm",[443,785,564],{"class":480},[443,787,788],{"class":537},"]",[443,790,791],{"class":480},">",[443,793,794],{"class":480}," {}\n",[443,796,797],{"class":445,"line":551},[443,798,799],{"class":480},"}\n",[198,801,802,803,806,807,417,809,812,813,815],{},"Every ",[237,804,805],{},"group"," value in ",[237,808,286],{},[237,810,811],{},"\u003CModalTarget>",", and ",[237,814,526],{}," is now checked at compile time.",[429,817,819,820,822],{"id":818},"_4-update-openmodal-call-sites","4. Update ",[237,821,286],{}," call sites",[463,824,825,878],{},[434,826,828],{"className":467,"code":827,"filename":221,"language":469,"meta":439,"style":439},"await openModal(ConfirmDialog, { title: 'Delete?' }, { group: 'confirm' })\n",[237,829,830],{"__ignoreMap":439},[443,831,832,835,838,841,843,845,848,850,852,855,857,860,862,865,867,869,871,873,875],{"class":445,"line":446},[443,833,834],{"class":476},"await",[443,836,837],{"class":519}," openModal",[443,839,840],{"class":484},"(ConfirmDialog",[443,842,778],{"class":480},[443,844,481],{"class":480},[443,846,847],{"class":537}," title",[443,849,541],{"class":480},[443,851,494],{"class":480},[443,853,854],{"class":453},"Delete?",[443,856,564],{"class":480},[443,858,859],{"class":480}," },",[443,861,481],{"class":480},[443,863,864],{"class":537}," group",[443,866,541],{"class":480},[443,868,494],{"class":480},[443,870,783],{"class":453},[443,872,564],{"class":480},[443,874,488],{"class":480},[443,876,877],{"class":484},")\n",[434,879,881],{"className":467,"code":880,"filename":224,"language":469,"meta":439,"style":439},"await openModal(ConfirmDialog, {\n  group: 'confirm',\n  props: { title: 'Delete?' }\n})\n",[237,882,883,895,910,931],{"__ignoreMap":439},[443,884,885,887,889,891,893],{"class":445,"line":446},[443,886,834],{"class":476},[443,888,837],{"class":519},[443,890,840],{"class":484},[443,892,778],{"class":480},[443,894,653],{"class":480},[443,896,897,900,902,904,906,908],{"class":445,"line":503},[443,898,899],{"class":537},"  group",[443,901,541],{"class":480},[443,903,494],{"class":480},[443,905,783],{"class":453},[443,907,564],{"class":480},[443,909,548],{"class":480},[443,911,912,915,917,919,921,923,925,927,929],{"class":445,"line":510},[443,913,914],{"class":537},"  props",[443,916,541],{"class":480},[443,918,481],{"class":480},[443,920,847],{"class":537},[443,922,541],{"class":480},[443,924,494],{"class":480},[443,926,854],{"class":453},[443,928,564],{"class":480},[443,930,591],{"class":480},[443,932,933,935],{"class":445,"line":534},[443,934,597],{"class":480},[443,936,877],{"class":484},[198,938,939,940,942],{},"Props are now inside ",[237,941,301],{},". The standalone second argument is gone.",[429,944,946,947,313,950,953],{"id":945},"_5-replace-confirmmodal-closemodal-inside-modal-components","5. Replace ",[237,948,949],{},"confirmModal",[237,951,952],{},"closeModal"," inside modal components",[463,955,956,1051],{},[434,957,960],{"className":467,"code":958,"filename":959,"language":469,"meta":439,"style":439},"import { confirmModal, closeModal } from '@kolirt\u002Fvue-modal'\n\nasync function onConfirm() {\n  await confirmModal(true)\n}\nasync function onCancel() {\n  await closeModal()\n}\n","v1 — inside a modal component",[237,961,962,986,990,1006,1020,1024,1037,1046],{"__ignoreMap":439},[443,963,964,966,968,971,973,976,978,980,982,984],{"class":445,"line":446},[443,965,477],{"class":476},[443,967,481],{"class":480},[443,969,970],{"class":484}," confirmModal",[443,972,778],{"class":480},[443,974,975],{"class":484}," closeModal",[443,977,488],{"class":480},[443,979,491],{"class":476},[443,981,494],{"class":480},[443,983,497],{"class":453},[443,985,500],{"class":480},[443,987,988],{"class":445,"line":503},[443,989,507],{"emptyLinePlaceholder":506},[443,991,992,995,998,1001,1004],{"class":445,"line":510},[443,993,994],{"class":737},"async",[443,996,997],{"class":737}," function",[443,999,1000],{"class":519}," onConfirm",[443,1002,1003],{"class":480},"()",[443,1005,653],{"class":480},[443,1007,1008,1011,1013,1015,1018],{"class":445,"line":534},[443,1009,1010],{"class":476},"  await",[443,1012,970],{"class":519},[443,1014,523],{"class":537},[443,1016,1017],{"class":670},"true",[443,1019,877],{"class":537},[443,1021,1022],{"class":445,"line":551},[443,1023,799],{"class":480},[443,1025,1026,1028,1030,1033,1035],{"class":445,"line":569},[443,1027,994],{"class":737},[443,1029,997],{"class":737},[443,1031,1032],{"class":519}," onCancel",[443,1034,1003],{"class":480},[443,1036,653],{"class":480},[443,1038,1039,1041,1043],{"class":445,"line":594},[443,1040,1010],{"class":476},[443,1042,975],{"class":519},[443,1044,1045],{"class":537},"()\n",[443,1047,1049],{"class":445,"line":1048},8,[443,1050,799],{"class":480},[434,1052,1055],{"className":467,"code":1053,"filename":1054,"language":469,"meta":439,"style":439},"import { useModalContext } from '@kolirt\u002Fvue-modal'\n\nconst modal = useModalContext\u003Cboolean>()\n\nfunction onConfirm() {\n  modal.confirm(true)\n}\nfunction onCancel() {\n  modal.close()\n}\n","v2 — inside a modal component",[237,1056,1057,1076,1080,1102,1106,1117,1132,1136,1146,1158],{"__ignoreMap":439},[443,1058,1059,1061,1063,1066,1068,1070,1072,1074],{"class":445,"line":446},[443,1060,477],{"class":476},[443,1062,481],{"class":480},[443,1064,1065],{"class":484}," useModalContext",[443,1067,488],{"class":480},[443,1069,491],{"class":476},[443,1071,494],{"class":480},[443,1073,497],{"class":453},[443,1075,500],{"class":480},[443,1077,1078],{"class":445,"line":503},[443,1079,507],{"emptyLinePlaceholder":506},[443,1081,1082,1085,1088,1091,1093,1095,1098,1100],{"class":445,"line":510},[443,1083,1084],{"class":737},"const",[443,1086,1087],{"class":484}," modal ",[443,1089,1090],{"class":480},"=",[443,1092,1065],{"class":519},[443,1094,765],{"class":480},[443,1096,1097],{"class":449},"boolean",[443,1099,791],{"class":480},[443,1101,1045],{"class":484},[443,1103,1104],{"class":445,"line":534},[443,1105,507],{"emptyLinePlaceholder":506},[443,1107,1108,1111,1113,1115],{"class":445,"line":551},[443,1109,1110],{"class":737},"function",[443,1112,1000],{"class":519},[443,1114,1003],{"class":480},[443,1116,653],{"class":480},[443,1118,1119,1122,1124,1126,1128,1130],{"class":445,"line":569},[443,1120,1121],{"class":484},"  modal",[443,1123,516],{"class":480},[443,1125,783],{"class":519},[443,1127,523],{"class":537},[443,1129,1017],{"class":670},[443,1131,877],{"class":537},[443,1133,1134],{"class":445,"line":594},[443,1135,799],{"class":480},[443,1137,1138,1140,1142,1144],{"class":445,"line":1048},[443,1139,1110],{"class":737},[443,1141,1032],{"class":519},[443,1143,1003],{"class":480},[443,1145,653],{"class":480},[443,1147,1149,1151,1153,1156],{"class":445,"line":1148},9,[443,1150,1121],{"class":484},[443,1152,516],{"class":480},[443,1154,1155],{"class":519},"close",[443,1157,1045],{"class":537},[443,1159,1161],{"class":445,"line":1160},10,[443,1162,799],{"class":480},[429,1164,1166,1167,313,1169,1171],{"id":1165},"_6-replace-on-off-event-bus-usage","6. Replace ",[237,1168,334],{},[237,1170,337],{}," event bus usage",[463,1173,1174,1243],{},[434,1175,1177],{"className":467,"code":1176,"filename":221,"language":469,"meta":439,"style":439},"import { $on, $off } from '@kolirt\u002Fvue-modal'\nimport { Events } from '@kolirt\u002Fvue-modal'\n\n$on(Events.Closed, handler)\n",[237,1178,1179,1203,1222,1226],{"__ignoreMap":439},[443,1180,1181,1183,1185,1188,1190,1193,1195,1197,1199,1201],{"class":445,"line":446},[443,1182,477],{"class":476},[443,1184,481],{"class":480},[443,1186,1187],{"class":484}," $on",[443,1189,778],{"class":480},[443,1191,1192],{"class":484}," $off",[443,1194,488],{"class":480},[443,1196,491],{"class":476},[443,1198,494],{"class":480},[443,1200,497],{"class":453},[443,1202,500],{"class":480},[443,1204,1205,1207,1209,1212,1214,1216,1218,1220],{"class":445,"line":503},[443,1206,477],{"class":476},[443,1208,481],{"class":480},[443,1210,1211],{"class":484}," Events",[443,1213,488],{"class":480},[443,1215,491],{"class":476},[443,1217,494],{"class":480},[443,1219,497],{"class":453},[443,1221,500],{"class":480},[443,1223,1224],{"class":445,"line":510},[443,1225,507],{"emptyLinePlaceholder":506},[443,1227,1228,1230,1233,1235,1238,1240],{"class":445,"line":534},[443,1229,334],{"class":519},[443,1231,1232],{"class":484},"(Events",[443,1234,516],{"class":480},[443,1236,1237],{"class":484},"Closed",[443,1239,778],{"class":480},[443,1241,1242],{"class":484}," handler)\n",[434,1244,1246],{"className":467,"code":1245,"filename":224,"language":469,"meta":439,"style":439},"const handle = openModal(MyModal, {\n  group: 'default',\n  on: { myEvent: handler }\n})\n\u002F\u002F or subscribe after open:\nhandle.on('myEvent', handler)\n",[237,1247,1248,1266,1280,1299,1305,1311],{"__ignoreMap":439},[443,1249,1250,1252,1255,1257,1259,1262,1264],{"class":445,"line":446},[443,1251,1084],{"class":737},[443,1253,1254],{"class":484}," handle ",[443,1256,1090],{"class":480},[443,1258,837],{"class":519},[443,1260,1261],{"class":484},"(MyModal",[443,1263,778],{"class":480},[443,1265,653],{"class":480},[443,1267,1268,1270,1272,1274,1276,1278],{"class":445,"line":503},[443,1269,899],{"class":537},[443,1271,541],{"class":480},[443,1273,494],{"class":480},[443,1275,773],{"class":453},[443,1277,564],{"class":480},[443,1279,548],{"class":480},[443,1281,1282,1285,1287,1289,1292,1294,1297],{"class":445,"line":510},[443,1283,1284],{"class":537},"  on",[443,1286,541],{"class":480},[443,1288,481],{"class":480},[443,1290,1291],{"class":537}," myEvent",[443,1293,541],{"class":480},[443,1295,1296],{"class":484}," handler ",[443,1298,799],{"class":480},[443,1300,1301,1303],{"class":445,"line":534},[443,1302,597],{"class":480},[443,1304,877],{"class":484},[443,1306,1307],{"class":445,"line":551},[443,1308,1310],{"class":1309},"sHwdD","\u002F\u002F or subscribe after open:\n",[443,1312,1313,1316,1318,1321,1323,1325,1328,1330,1332],{"class":445,"line":569},[443,1314,1315],{"class":484},"handle",[443,1317,516],{"class":480},[443,1319,1320],{"class":519},"on",[443,1322,523],{"class":484},[443,1324,564],{"class":480},[443,1326,1327],{"class":453},"myEvent",[443,1329,564],{"class":480},[443,1331,778],{"class":480},[443,1333,1242],{"class":484},[198,1335,1336,1337,417,1339,417,1341,417,1343,1346],{},"The global event bus (",[237,1338,334],{},[237,1340,337],{},[237,1342,340],{},[237,1344,1345],{},"Events"," enum) is removed.",[429,1348,1350],{"id":1349},"_7-rewrite-modal-template-components","7. Rewrite modal template components",[198,1352,1353,1354,1356,1357,1360,1361,1363],{},"v1 used ",[237,1355,368],{}," internally with a scoped slot. v2 is fully headless — you compose ",[237,1358,1359],{},"\u003CModalRoot>"," → ",[237,1362,690],{}," yourself.",[463,1365,1366,1429],{},[434,1367,1372],{"className":1368,"code":1369,"filename":1370,"language":1371,"meta":439,"style":439},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CModalTarget group=\"default\">\n  \u003Ctemplate #default=\"{ modal, close }\">\n    \u003Cdiv class=\"modal-wrapper\">\n      \u003Ccomponent :is=\"modal.component\" v-bind=\"modal.props\" @close=\"close\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FModalTarget>\n","v1 — ModalTarget usage","vue",[237,1373,1374,1395,1400,1405,1410,1415,1420],{"__ignoreMap":439},[443,1375,1376,1378,1381,1383,1385,1388,1390,1392],{"class":445,"line":446},[443,1377,765],{"class":480},[443,1379,1380],{"class":537},"ModalTarget",[443,1382,864],{"class":737},[443,1384,1090],{"class":480},[443,1386,1387],{"class":480},"\"",[443,1389,773],{"class":453},[443,1391,1387],{"class":480},[443,1393,1394],{"class":480},">\n",[443,1396,1397],{"class":445,"line":503},[443,1398,1399],{"class":484},"  \u003Ctemplate #default=\"{ modal, close }\">\n",[443,1401,1402],{"class":445,"line":510},[443,1403,1404],{"class":484},"    \u003Cdiv class=\"modal-wrapper\">\n",[443,1406,1407],{"class":445,"line":534},[443,1408,1409],{"class":484},"      \u003Ccomponent :is=\"modal.component\" v-bind=\"modal.props\" @close=\"close\" \u002F>\n",[443,1411,1412],{"class":445,"line":551},[443,1413,1414],{"class":484},"    \u003C\u002Fdiv>\n",[443,1416,1417],{"class":445,"line":569},[443,1418,1419],{"class":484},"  \u003C\u002Ftemplate>\n",[443,1421,1422,1425,1427],{"class":445,"line":594},[443,1423,1424],{"class":480},"\u003C\u002F",[443,1426,1380],{"class":537},[443,1428,1394],{"class":480},[434,1430,1433],{"className":1368,"code":1431,"filename":1432,"language":1371,"meta":439,"style":439},"\u003CModalTarget group=\"default\" \u002F>\n","v2 — ModalTarget usage",[237,1434,1435],{"__ignoreMap":439},[443,1436,1437,1439,1441,1443,1445,1447,1449,1451],{"class":445,"line":446},[443,1438,765],{"class":480},[443,1440,1380],{"class":537},[443,1442,864],{"class":737},[443,1444,1090],{"class":480},[443,1446,1387],{"class":480},[443,1448,773],{"class":453},[443,1450,1387],{"class":480},[443,1452,1453],{"class":480}," \u002F>\n",[198,1455,1456,1457,1459,1460,313,1462,1464],{},"The ",[237,1458,811],{}," in v2 renders modals automatically from the ",[237,1461,1359],{},[237,1463,690],{}," in each modal component. No scoped slot needed.",[198,1466,1467,1468,1470,1471,541],{},"Modal components must now include ",[237,1469,1359],{}," and ",[237,1472,690],{},[434,1474,1477],{"className":1368,"code":1475,"filename":1476,"language":1371,"meta":439,"style":439},"\u003Cscript setup lang=\"ts\">\nimport { ModalContent, ModalRoot, useModalContext } from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst modal = useModalContext\u003Cboolean>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot>\n    \u003CModalContent>\n      \u003Cbutton @click=\"modal.confirm(true)\">OK\u003C\u002Fbutton>\n      \u003Cbutton @click=\"modal.close()\">Cancel\u003C\u002Fbutton>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","MyModal.vue — v2",[237,1478,1479,1502,1530,1534,1559,1563,1581,1589,1593,1602,1612,1623,1655,1684,1694,1704],{"__ignoreMap":439},[443,1480,1481,1483,1486,1489,1492,1494,1496,1498,1500],{"class":445,"line":446},[443,1482,765],{"class":480},[443,1484,1485],{"class":537},"script",[443,1487,1488],{"class":737}," setup",[443,1490,1491],{"class":737}," lang",[443,1493,1090],{"class":480},[443,1495,1387],{"class":480},[443,1497,469],{"class":453},[443,1499,1387],{"class":480},[443,1501,1394],{"class":480},[443,1503,1504,1506,1508,1511,1513,1516,1518,1520,1522,1524,1526,1528],{"class":445,"line":503},[443,1505,477],{"class":476},[443,1507,481],{"class":480},[443,1509,1510],{"class":484}," ModalContent",[443,1512,778],{"class":480},[443,1514,1515],{"class":484}," ModalRoot",[443,1517,778],{"class":480},[443,1519,1065],{"class":484},[443,1521,488],{"class":480},[443,1523,491],{"class":476},[443,1525,494],{"class":480},[443,1527,497],{"class":453},[443,1529,500],{"class":480},[443,1531,1532],{"class":445,"line":510},[443,1533,507],{"emptyLinePlaceholder":506},[443,1535,1536,1539,1541,1544,1547,1549,1551,1553,1555,1557],{"class":445,"line":534},[443,1537,1538],{"class":519},"defineOptions",[443,1540,523],{"class":484},[443,1542,1543],{"class":480},"{",[443,1545,1546],{"class":537}," modalGroup",[443,1548,541],{"class":480},[443,1550,494],{"class":480},[443,1552,773],{"class":453},[443,1554,564],{"class":480},[443,1556,488],{"class":480},[443,1558,877],{"class":484},[443,1560,1561],{"class":445,"line":551},[443,1562,507],{"emptyLinePlaceholder":506},[443,1564,1565,1567,1569,1571,1573,1575,1577,1579],{"class":445,"line":569},[443,1566,1084],{"class":737},[443,1568,1087],{"class":484},[443,1570,1090],{"class":480},[443,1572,1065],{"class":519},[443,1574,765],{"class":480},[443,1576,1097],{"class":449},[443,1578,791],{"class":480},[443,1580,1045],{"class":484},[443,1582,1583,1585,1587],{"class":445,"line":594},[443,1584,1424],{"class":480},[443,1586,1485],{"class":537},[443,1588,1394],{"class":480},[443,1590,1591],{"class":445,"line":1048},[443,1592,507],{"emptyLinePlaceholder":506},[443,1594,1595,1597,1600],{"class":445,"line":1148},[443,1596,765],{"class":480},[443,1598,1599],{"class":537},"template",[443,1601,1394],{"class":480},[443,1603,1604,1607,1610],{"class":445,"line":1160},[443,1605,1606],{"class":480},"  \u003C",[443,1608,1609],{"class":537},"ModalRoot",[443,1611,1394],{"class":480},[443,1613,1615,1618,1621],{"class":445,"line":1614},11,[443,1616,1617],{"class":480},"    \u003C",[443,1619,1620],{"class":537},"ModalContent",[443,1622,1394],{"class":480},[443,1624,1626,1629,1632,1635,1637,1639,1642,1644,1646,1649,1651,1653],{"class":445,"line":1625},12,[443,1627,1628],{"class":480},"      \u003C",[443,1630,1631],{"class":537},"button",[443,1633,1634],{"class":737}," @click",[443,1636,1090],{"class":480},[443,1638,1387],{"class":480},[443,1640,1641],{"class":453},"modal.confirm(true)",[443,1643,1387],{"class":480},[443,1645,791],{"class":480},[443,1647,1648],{"class":484},"OK",[443,1650,1424],{"class":480},[443,1652,1631],{"class":537},[443,1654,1394],{"class":480},[443,1656,1658,1660,1662,1664,1666,1668,1671,1673,1675,1678,1680,1682],{"class":445,"line":1657},13,[443,1659,1628],{"class":480},[443,1661,1631],{"class":537},[443,1663,1634],{"class":737},[443,1665,1090],{"class":480},[443,1667,1387],{"class":480},[443,1669,1670],{"class":453},"modal.close()",[443,1672,1387],{"class":480},[443,1674,791],{"class":480},[443,1676,1677],{"class":484},"Cancel",[443,1679,1424],{"class":480},[443,1681,1631],{"class":537},[443,1683,1394],{"class":480},[443,1685,1687,1690,1692],{"class":445,"line":1686},14,[443,1688,1689],{"class":480},"    \u003C\u002F",[443,1691,1620],{"class":537},[443,1693,1394],{"class":480},[443,1695,1697,1700,1702],{"class":445,"line":1696},15,[443,1698,1699],{"class":480},"  \u003C\u002F",[443,1701,1609],{"class":537},[443,1703,1394],{"class":480},[443,1705,1707,1709,1711],{"class":445,"line":1706},16,[443,1708,1424],{"class":480},[443,1710,1599],{"class":537},[443,1712,1394],{"class":480},[429,1714,1716,1717],{"id":1715},"_8-remove-simplemodal","8. Remove ",[237,1718,386],{},[198,1720,1721,1723],{},[237,1722,386],{}," was the only built-in layout in v1. It is not included in v2. Copy its template into your own component or use a design-system dialog.",[429,1725,1727,1728],{"id":1726},"_9-replace-uselock","9. Replace ",[237,1729,1730],{},"useLock",[198,1732,1733,1735,1736,1738,1739,1742,1743,516],{},[237,1734,1730],{}," (scroll lock composable) is no longer exported. Scroll locking is automatic — ",[237,1737,811],{}," handles it via ",[237,1740,1741],{},"useScrollLock",". If you needed it for other purposes, implement it with ",[237,1744,1745],{},"document.body.style.overflow",[422,1747],{},[202,1749,1751],{"id":1750},"quick-reference-renamed-removed-exports","Quick reference — renamed \u002F removed exports",[207,1753,1754,1764],{},[210,1755,1756],{},[213,1757,1758,1761],{},[216,1759,1760],{},"v1 export",[216,1762,1763],{},"v2 equivalent",[226,1765,1766,1778,1793,1803,1815,1826,1839,1848,1857,1875,1884,1896],{},[213,1767,1768,1773],{},[231,1769,1770],{},[237,1771,1772],{},"openModal(C, props, opts)",[231,1774,1775],{},[237,1776,1777],{},"openModal(C, { props, ...opts })",[213,1779,1780,1784],{},[231,1781,1782],{},[237,1783,316],{},[231,1785,1786,1789,1790],{},[237,1787,1788],{},"useModalContext().close()"," or ",[237,1791,1792],{},"closeModal({ group })",[213,1794,1795,1799],{},[231,1796,1797],{},[237,1798,312],{},[231,1800,1801],{},[237,1802,321],{},[213,1804,1805,1810],{},[231,1806,1807],{},[237,1808,1809],{},"closeAllModals()",[231,1811,1812,1814],{},[237,1813,1809],{}," ✓ (same name)",[213,1816,1817,1821],{},[231,1818,1819],{},[237,1820,1380],{},[231,1822,1823,1825],{},[237,1824,1380],{}," ✓ (different behavior)",[213,1827,1828,1832],{},[231,1829,1830],{},[237,1831,368],{},[231,1833,1834,1836,1837],{},[237,1835,1609],{}," + ",[237,1838,1620],{},[213,1840,1841,1845],{},[231,1842,1843],{},[237,1844,386],{},[231,1846,1847],{},"removed",[213,1849,1850,1854],{},[231,1851,1852],{},[237,1853,1730],{},[231,1855,1856],{},"removed (automatic)",[213,1858,1859,1867],{},[231,1860,1861,313,1863,313,1865],{},[237,1862,334],{},[237,1864,337],{},[237,1866,340],{},[231,1868,1869,313,1872],{},[237,1870,1871],{},"handle.on",[237,1873,1874],{},"handle.off",[213,1876,1877,1882],{},[231,1878,1879,1881],{},[237,1880,1345],{}," enum",[231,1883,1847],{},[213,1885,1886,1891],{},[231,1887,1888],{},[237,1889,1890],{},"modals",[231,1892,1893,1895],{},[237,1894,1890],{}," ✓ (same name, computed ref)",[213,1897,1898,1903],{},[231,1899,1900],{},[237,1901,1902],{},"isOpened",[231,1904,1905,1907],{},[237,1906,1902],{}," ✓",[1909,1910,1911,1915,1916,1918,1919,1922,1923,1925,1926,1929,1930,1932,1933,516],"callout",{},[1912,1913,1914],"strong",{},"TypeScript note."," v1 typed ",[237,1917,286],{}," with a bare ",[237,1920,1921],{},"props"," argument; v2 infers props from ",[237,1924,301],{},". If you hit ",[237,1927,1928],{},"Type … is not assignable to type 'never'",", check that your group is declared in ",[237,1931,279],{}," and that the augmentation file is included in ",[237,1934,1935],{},"tsconfig.json",[1937,1938,1939],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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":439,"searchDepth":503,"depth":503,"links":1941},[1942,1943,1959],{"id":204,"depth":503,"text":205},{"id":426,"depth":503,"text":427,"children":1944},[1945,1946,1947,1948,1950,1952,1954,1955,1957],{"id":431,"depth":510,"text":432},{"id":460,"depth":510,"text":461},{"id":693,"depth":510,"text":694},{"id":818,"depth":510,"text":1949},"4. Update openModal call sites",{"id":945,"depth":510,"text":1951},"5. Replace confirmModal \u002F closeModal inside modal components",{"id":1165,"depth":510,"text":1953},"6. Replace $on \u002F $off event bus usage",{"id":1349,"depth":510,"text":1350},{"id":1715,"depth":510,"text":1956},"8. Remove SimpleModal",{"id":1726,"depth":510,"text":1958},"9. Replace useLock",{"id":1750,"depth":503,"text":1751},"Step-by-step guide to upgrading from @kolirt\u002Fvue-modal v1 to v2.","md",null,{},{"title":169,"description":1960},"DLdfRT5odnFdBv6zmKos8BO65UxkToEROKerAyHPw70",[1967,1969],{"title":160,"path":161,"stem":162,"description":1968,"children":-1},"Complete public type surface for @kolirt\u002Fvue-modal — all exported interfaces, type aliases, and utility types.",{"title":173,"path":174,"stem":175,"description":1970,"children":-1},"Frequently asked questions about @kolirt\u002Fvue-modal v2.",1779523621797]