[{"data":1,"prerenderedAt":1749},["ShallowReactive",2],{"navigation_docs":3,"-guide-typescript":188,"-guide-typescript-surround":1744},[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":98,"body":190,"description":1738,"extension":1739,"links":1740,"meta":1741,"navigation":273,"path":99,"seo":1742,"stem":100,"__hash__":1743},"docs\u002F4.guide\u002F11.typescript.md",{"type":191,"value":192,"toc":1724},"minimark",[193,197,201,206,222,358,386,452,459,462,588,595,696,699,703,716,800,905,909,916,972,985,991,1085,1092,1099,1108,1276,1279,1356,1360,1462,1603,1609,1626,1720],[194,195,98],"h1",{"id":196},"typescript",[198,199,200],"p",{},"The package is written in TypeScript and ships full type declarations. This page covers the patterns that give end-to-end type safety.",[202,203,205],"h2",{"id":204},"registering-groups","Registering groups",[198,207,208,209,213,214,217,218,221],{},"Groups are validated at compile time via module augmentation. Without this step the package cannot be used — ",[210,211,212],"code",{},"ModalGroup"," resolves to ",[210,215,216],{},"never"," and every ",[210,219,220],{},"group"," reference is a type error.",[223,224,230],"pre",{"className":225,"code":226,"filename":227,"language":228,"meta":229,"style":229},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { type DefineGroups } from '@kolirt\u002Fvue-modal'\n\ndeclare module '@kolirt\u002Fvue-modal' {\n  interface ModalGroupRegistry extends DefineGroups\u003C['default', 'confirm', 'panel']> {}\n}\n","main.ts","ts","",[210,231,232,268,275,295,352],{"__ignoreMap":229},[233,234,237,241,245,248,252,255,258,261,265],"span",{"class":235,"line":236},"line",1,[233,238,240],{"class":239},"s7zQu","import",[233,242,244],{"class":243},"sMK4o"," {",[233,246,247],{"class":239}," type",[233,249,251],{"class":250},"sTEyZ"," DefineGroups",[233,253,254],{"class":243}," }",[233,256,257],{"class":239}," from",[233,259,260],{"class":243}," '",[233,262,264],{"class":263},"sfazB","@kolirt\u002Fvue-modal",[233,266,267],{"class":243},"'\n",[233,269,271],{"class":235,"line":270},2,[233,272,274],{"emptyLinePlaceholder":273},true,"\n",[233,276,278,282,285,287,289,292],{"class":235,"line":277},3,[233,279,281],{"class":280},"spNyl","declare",[233,283,284],{"class":280}," module",[233,286,260],{"class":243},[233,288,264],{"class":263},[233,290,291],{"class":243},"'",[233,293,294],{"class":243}," {\n",[233,296,298,301,305,308,310,313,317,319,322,324,327,329,332,334,336,338,341,343,346,349],{"class":235,"line":297},4,[233,299,300],{"class":280},"  interface",[233,302,304],{"class":303},"sBMFI"," ModalGroupRegistry",[233,306,307],{"class":280}," extends",[233,309,251],{"class":303},[233,311,312],{"class":243},"\u003C",[233,314,316],{"class":315},"swJcz","[",[233,318,291],{"class":243},[233,320,321],{"class":263},"default",[233,323,291],{"class":243},[233,325,326],{"class":243},",",[233,328,260],{"class":243},[233,330,331],{"class":263},"confirm",[233,333,291],{"class":243},[233,335,326],{"class":243},[233,337,260],{"class":243},[233,339,340],{"class":263},"panel",[233,342,291],{"class":243},[233,344,345],{"class":315},"]",[233,347,348],{"class":243},">",[233,350,351],{"class":243}," {}\n",[233,353,355],{"class":235,"line":354},5,[233,356,357],{"class":243},"}\n",[198,359,360,361,363,364,367,368,367,371,367,374,377,378,381,382,385],{},"After augmentation every ",[210,362,220],{}," field in ",[210,365,366],{},"openModal",", ",[210,369,370],{},"useModal",[210,372,373],{},"closeModalsByGroup",[210,375,376],{},"\u003CModalTarget>",", and ",[210,379,380],{},"createModal"," only accepts ",[210,383,384],{},"'default' | 'confirm' | 'panel'",".",[223,387,389],{"className":225,"code":388,"language":228,"meta":229,"style":229},"openModal(MyDialog, { group: 'default' })   \u002F\u002F ✓\nopenModal(MyDialog, { group: 'unknown' })   \u002F\u002F ✗ Type error\n",[210,390,391,424],{"__ignoreMap":229},[233,392,393,396,399,401,403,406,409,411,413,415,417,420],{"class":235,"line":236},[233,394,366],{"class":395},"s2Zo4",[233,397,398],{"class":250},"(MyDialog",[233,400,326],{"class":243},[233,402,244],{"class":243},[233,404,405],{"class":315}," group",[233,407,408],{"class":243},":",[233,410,260],{"class":243},[233,412,321],{"class":263},[233,414,291],{"class":243},[233,416,254],{"class":243},[233,418,419],{"class":250},")   ",[233,421,423],{"class":422},"sHwdD","\u002F\u002F ✓\n",[233,425,426,428,430,432,434,436,438,440,443,445,447,449],{"class":235,"line":270},[233,427,366],{"class":395},[233,429,398],{"class":250},[233,431,326],{"class":243},[233,433,244],{"class":243},[233,435,405],{"class":315},[233,437,408],{"class":243},[233,439,260],{"class":243},[233,441,442],{"class":263},"unknown",[233,444,291],{"class":243},[233,446,254],{"class":243},[233,448,419],{"class":250},[233,450,451],{"class":422},"\u002F\u002F ✗ Type error\n",[202,453,455,456],{"id":454},"typed-results-openmodaltresult","Typed results — ",[210,457,458],{},"openModal\u003CTResult>",[198,460,461],{},"The first generic is the type the modal resolves with:",[223,463,465],{"className":225,"code":464,"language":228,"meta":229,"style":229},"const result = await openModal\u003C{ id: number; name: string }>(SaveDialog, {\n  group: 'default'\n}).catch(() => null)\n\nresult?.id   \u002F\u002F number\nresult?.name \u002F\u002F string\n",[210,466,467,516,529,557,561,575],{"__ignoreMap":229},[233,468,469,472,475,478,481,484,487,490,492,495,498,501,503,506,509,512,514],{"class":235,"line":236},[233,470,471],{"class":280},"const",[233,473,474],{"class":250}," result ",[233,476,477],{"class":243},"=",[233,479,480],{"class":239}," await",[233,482,483],{"class":395}," openModal",[233,485,486],{"class":243},"\u003C{",[233,488,489],{"class":315}," id",[233,491,408],{"class":243},[233,493,494],{"class":303}," number",[233,496,497],{"class":243},";",[233,499,500],{"class":315}," name",[233,502,408],{"class":243},[233,504,505],{"class":303}," string",[233,507,508],{"class":243}," }>",[233,510,511],{"class":250},"(SaveDialog",[233,513,326],{"class":243},[233,515,294],{"class":243},[233,517,518,521,523,525,527],{"class":235,"line":270},[233,519,520],{"class":315},"  group",[233,522,408],{"class":243},[233,524,260],{"class":243},[233,526,321],{"class":263},[233,528,267],{"class":243},[233,530,531,534,537,539,542,545,548,551,554],{"class":235,"line":277},[233,532,533],{"class":243},"}",[233,535,536],{"class":250},")",[233,538,385],{"class":243},[233,540,541],{"class":395},"catch",[233,543,544],{"class":250},"(",[233,546,547],{"class":243},"()",[233,549,550],{"class":280}," =>",[233,552,553],{"class":243}," null",[233,555,556],{"class":250},")\n",[233,558,559],{"class":235,"line":297},[233,560,274],{"emptyLinePlaceholder":273},[233,562,563,566,569,572],{"class":235,"line":354},[233,564,565],{"class":250},"result",[233,567,568],{"class":243},"?.",[233,570,571],{"class":250},"id   ",[233,573,574],{"class":422},"\u002F\u002F number\n",[233,576,578,580,582,585],{"class":235,"line":577},6,[233,579,565],{"class":250},[233,581,568],{"class":243},[233,583,584],{"class":250},"name ",[233,586,587],{"class":422},"\u002F\u002F string\n",[198,589,590,591,594],{},"Inside the component, ",[210,592,593],{},"useModalContext\u003CTResult>()"," must use the same type:",[223,596,598],{"className":225,"code":597,"language":228,"meta":229,"style":229},"const { confirm } = useModalContext\u003C{ id: number; name: string }>()\nconfirm({ id: 1, name: 'Alice' })   \u002F\u002F ✓\nconfirm({ id: 1 })                  \u002F\u002F ✗ missing name\n",[210,599,600,638,674],{"__ignoreMap":229},[233,601,602,604,606,609,611,614,617,619,621,623,625,627,629,631,633,635],{"class":235,"line":236},[233,603,471],{"class":280},[233,605,244],{"class":243},[233,607,608],{"class":250}," confirm ",[233,610,533],{"class":243},[233,612,613],{"class":243}," =",[233,615,616],{"class":395}," useModalContext",[233,618,486],{"class":243},[233,620,489],{"class":315},[233,622,408],{"class":243},[233,624,494],{"class":303},[233,626,497],{"class":243},[233,628,500],{"class":315},[233,630,408],{"class":243},[233,632,505],{"class":303},[233,634,508],{"class":243},[233,636,637],{"class":250},"()\n",[233,639,640,642,644,647,649,651,655,657,659,661,663,666,668,670,672],{"class":235,"line":270},[233,641,331],{"class":395},[233,643,544],{"class":250},[233,645,646],{"class":243},"{",[233,648,489],{"class":315},[233,650,408],{"class":243},[233,652,654],{"class":653},"sbssI"," 1",[233,656,326],{"class":243},[233,658,500],{"class":315},[233,660,408],{"class":243},[233,662,260],{"class":243},[233,664,665],{"class":263},"Alice",[233,667,291],{"class":243},[233,669,254],{"class":243},[233,671,419],{"class":250},[233,673,423],{"class":422},[233,675,676,678,680,682,684,686,688,690,693],{"class":235,"line":277},[233,677,331],{"class":395},[233,679,544],{"class":250},[233,681,646],{"class":243},[233,683,489],{"class":315},[233,685,408],{"class":243},[233,687,654],{"class":653},[233,689,254],{"class":243},[233,691,692],{"class":250},")                  ",[233,694,695],{"class":422},"\u002F\u002F ✗ missing name\n",[198,697,698],{},"The type is not inferred from the component automatically — you annotate it explicitly on both sides.",[202,700,702],{"id":701},"typed-props","Typed props",[198,704,705,707,708,711,712,715],{},[210,706,366],{},"'s ",[210,709,710],{},"props"," option mirrors exactly what ",[210,713,714],{},"defineProps"," declares on the component:",[223,717,722],{"className":718,"code":719,"filename":720,"language":721,"meta":229,"style":229},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  title: string\n  message?: string\n}>()\n\u003C\u002Fscript>\n","ConfirmDialog.vue","vue",[210,723,724,749,764,774,784,791],{"__ignoreMap":229},[233,725,726,728,731,734,737,739,742,744,746],{"class":235,"line":236},[233,727,312],{"class":243},[233,729,730],{"class":315},"script",[233,732,733],{"class":280}," setup",[233,735,736],{"class":280}," lang",[233,738,477],{"class":243},[233,740,741],{"class":243},"\"",[233,743,228],{"class":263},[233,745,741],{"class":243},[233,747,748],{"class":243},">\n",[233,750,751,753,756,758,761],{"class":235,"line":270},[233,752,471],{"class":280},[233,754,755],{"class":250}," props ",[233,757,477],{"class":243},[233,759,760],{"class":395}," defineProps",[233,762,763],{"class":243},"\u003C{\n",[233,765,766,769,771],{"class":235,"line":277},[233,767,768],{"class":315},"  title",[233,770,408],{"class":243},[233,772,773],{"class":303}," string\n",[233,775,776,779,782],{"class":235,"line":297},[233,777,778],{"class":315},"  message",[233,780,781],{"class":243},"?:",[233,783,773],{"class":303},[233,785,786,789],{"class":235,"line":354},[233,787,788],{"class":243},"}>",[233,790,637],{"class":250},[233,792,793,796,798],{"class":235,"line":577},[233,794,795],{"class":243},"\u003C\u002F",[233,797,730],{"class":315},[233,799,748],{"class":243},[223,801,803],{"className":225,"code":802,"language":228,"meta":229,"style":229},"openModal(ConfirmDialog, {\n  group: 'confirm',\n  props: {\n    title: 'Delete?',     \u002F\u002F ✓ required string\n    message: 'Sure?',     \u002F\u002F ✓ optional string\n    unknown: true         \u002F\u002F ✗ Type error\n  }\n})\n",[210,804,805,816,831,840,859,878,892,898],{"__ignoreMap":229},[233,806,807,809,812,814],{"class":235,"line":236},[233,808,366],{"class":395},[233,810,811],{"class":250},"(ConfirmDialog",[233,813,326],{"class":243},[233,815,294],{"class":243},[233,817,818,820,822,824,826,828],{"class":235,"line":270},[233,819,520],{"class":315},[233,821,408],{"class":243},[233,823,260],{"class":243},[233,825,331],{"class":263},[233,827,291],{"class":243},[233,829,830],{"class":243},",\n",[233,832,833,836,838],{"class":235,"line":277},[233,834,835],{"class":315},"  props",[233,837,408],{"class":243},[233,839,294],{"class":243},[233,841,842,845,847,849,852,854,856],{"class":235,"line":297},[233,843,844],{"class":315},"    title",[233,846,408],{"class":243},[233,848,260],{"class":243},[233,850,851],{"class":263},"Delete?",[233,853,291],{"class":243},[233,855,326],{"class":243},[233,857,858],{"class":422},"     \u002F\u002F ✓ required string\n",[233,860,861,864,866,868,871,873,875],{"class":235,"line":354},[233,862,863],{"class":315},"    message",[233,865,408],{"class":243},[233,867,260],{"class":243},[233,869,870],{"class":263},"Sure?",[233,872,291],{"class":243},[233,874,326],{"class":243},[233,876,877],{"class":422},"     \u002F\u002F ✓ optional string\n",[233,879,880,883,885,889],{"class":235,"line":577},[233,881,882],{"class":315},"    unknown",[233,884,408],{"class":243},[233,886,888],{"class":887},"sfNiH"," true",[233,890,891],{"class":422},"         \u002F\u002F ✗ Type error\n",[233,893,895],{"class":235,"line":894},7,[233,896,897],{"class":243},"  }\n",[233,899,901,903],{"class":235,"line":900},8,[233,902,533],{"class":243},[233,904,556],{"class":250},[202,906,908],{"id":907},"declaring-a-components-group","Declaring a component's group",[198,910,911,912,915],{},"Use ",[210,913,914],{},"defineOptions"," to bind a component to a group at design time:",[223,917,919],{"className":718,"code":918,"filename":720,"language":721,"meta":229,"style":229},"\u003Cscript setup lang=\"ts\">\ndefineOptions({ modalGroup: 'confirm' })\n\u003C\u002Fscript>\n",[210,920,921,941,964],{"__ignoreMap":229},[233,922,923,925,927,929,931,933,935,937,939],{"class":235,"line":236},[233,924,312],{"class":243},[233,926,730],{"class":315},[233,928,733],{"class":280},[233,930,736],{"class":280},[233,932,477],{"class":243},[233,934,741],{"class":243},[233,936,228],{"class":263},[233,938,741],{"class":243},[233,940,748],{"class":243},[233,942,943,945,947,949,952,954,956,958,960,962],{"class":235,"line":270},[233,944,914],{"class":395},[233,946,544],{"class":250},[233,948,646],{"class":243},[233,950,951],{"class":315}," modalGroup",[233,953,408],{"class":243},[233,955,260],{"class":243},[233,957,331],{"class":263},[233,959,291],{"class":243},[233,961,254],{"class":243},[233,963,556],{"class":250},[233,965,966,968,970],{"class":235,"line":277},[233,967,795],{"class":243},[233,969,730],{"class":315},[233,971,748],{"class":243},[198,973,974,975,367,978,981,982,984],{},"After declaring ",[210,976,977],{},"modalGroup",[210,979,980],{},"openModal(ConfirmDialog)"," without a ",[210,983,220],{}," option is valid. Passing an undeclared group value is still a type error.",[202,986,988,990],{"id":987},"usemodal-type-inference",[210,989,370],{}," type inference",[223,992,994],{"className":225,"code":993,"language":228,"meta":229,"style":229},"const modal = useModal\u003CSaveResult>(SaveDialog, {\n  group: 'default'\n})\n\nawait modal.open({ props: { title: 'Save' } })\n",[210,995,996,1021,1033,1039,1043],{"__ignoreMap":229},[233,997,998,1000,1003,1005,1008,1010,1013,1015,1017,1019],{"class":235,"line":236},[233,999,471],{"class":280},[233,1001,1002],{"class":250}," modal ",[233,1004,477],{"class":243},[233,1006,1007],{"class":395}," useModal",[233,1009,312],{"class":243},[233,1011,1012],{"class":303},"SaveResult",[233,1014,348],{"class":243},[233,1016,511],{"class":250},[233,1018,326],{"class":243},[233,1020,294],{"class":243},[233,1022,1023,1025,1027,1029,1031],{"class":235,"line":270},[233,1024,520],{"class":315},[233,1026,408],{"class":243},[233,1028,260],{"class":243},[233,1030,321],{"class":263},[233,1032,267],{"class":243},[233,1034,1035,1037],{"class":235,"line":277},[233,1036,533],{"class":243},[233,1038,556],{"class":250},[233,1040,1041],{"class":235,"line":297},[233,1042,274],{"emptyLinePlaceholder":273},[233,1044,1045,1048,1051,1053,1056,1058,1060,1063,1065,1067,1070,1072,1074,1077,1079,1081,1083],{"class":235,"line":354},[233,1046,1047],{"class":239},"await",[233,1049,1050],{"class":250}," modal",[233,1052,385],{"class":243},[233,1054,1055],{"class":395},"open",[233,1057,544],{"class":250},[233,1059,646],{"class":243},[233,1061,1062],{"class":315}," props",[233,1064,408],{"class":243},[233,1066,244],{"class":243},[233,1068,1069],{"class":315}," title",[233,1071,408],{"class":243},[233,1073,260],{"class":243},[233,1075,1076],{"class":263},"Save",[233,1078,291],{"class":243},[233,1080,254],{"class":243},[233,1082,254],{"class":243},[233,1084,556],{"class":250},[198,1086,1087,1088,1091],{},"The second generic (",[210,1089,1090],{},"C",") is usually inferred — you only need it if TypeScript cannot resolve the component type from context.",[202,1093,1095,1098],{"id":1094},"modalhandle-typing",[210,1096,1097],{},"ModalHandle"," typing",[198,1100,1101,1104,1105,408],{},[210,1102,1103],{},"ModalHandle\u003CT>"," extends ",[210,1106,1107],{},"Promise\u003CT>",[223,1109,1111],{"className":225,"code":1110,"language":228,"meta":229,"style":229},"interface ModalHandle\u003CT> extends Promise\u003CT> {\n  id: number\n  group: ModalGroup\n  close(opts?: CloseModalOptions\u003CT>): void\n  on(event: string, handler: (...args: any[]) => void): void\n  off(event: string, handler: (...args: any[]) => void): void\n}\n",[210,1112,1113,1141,1151,1160,1186,1233,1272],{"__ignoreMap":229},[233,1114,1115,1118,1121,1123,1126,1128,1130,1133,1135,1137,1139],{"class":235,"line":236},[233,1116,1117],{"class":280},"interface",[233,1119,1120],{"class":303}," ModalHandle",[233,1122,312],{"class":243},[233,1124,1125],{"class":303},"T",[233,1127,348],{"class":243},[233,1129,307],{"class":280},[233,1131,1132],{"class":303}," Promise",[233,1134,312],{"class":243},[233,1136,1125],{"class":303},[233,1138,348],{"class":243},[233,1140,294],{"class":243},[233,1142,1143,1146,1148],{"class":235,"line":270},[233,1144,1145],{"class":315},"  id",[233,1147,408],{"class":243},[233,1149,1150],{"class":303}," number\n",[233,1152,1153,1155,1157],{"class":235,"line":277},[233,1154,520],{"class":315},[233,1156,408],{"class":243},[233,1158,1159],{"class":303}," ModalGroup\n",[233,1161,1162,1165,1167,1171,1173,1176,1178,1180,1183],{"class":235,"line":297},[233,1163,1164],{"class":315},"  close",[233,1166,544],{"class":243},[233,1168,1170],{"class":1169},"sHdIc","opts",[233,1172,781],{"class":243},[233,1174,1175],{"class":303}," CloseModalOptions",[233,1177,312],{"class":243},[233,1179,1125],{"class":303},[233,1181,1182],{"class":243},">):",[233,1184,1185],{"class":303}," void\n",[233,1187,1188,1191,1193,1196,1198,1200,1202,1205,1207,1210,1213,1215,1218,1221,1223,1225,1228,1231],{"class":235,"line":354},[233,1189,1190],{"class":315},"  on",[233,1192,544],{"class":243},[233,1194,1195],{"class":1169},"event",[233,1197,408],{"class":243},[233,1199,505],{"class":303},[233,1201,326],{"class":243},[233,1203,1204],{"class":395}," handler",[233,1206,408],{"class":243},[233,1208,1209],{"class":243}," (...",[233,1211,1212],{"class":1169},"args",[233,1214,408],{"class":243},[233,1216,1217],{"class":303}," any",[233,1219,1220],{"class":250},"[]",[233,1222,536],{"class":243},[233,1224,550],{"class":280},[233,1226,1227],{"class":303}," void",[233,1229,1230],{"class":243},"):",[233,1232,1185],{"class":303},[233,1234,1235,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270],{"class":235,"line":577},[233,1236,1237],{"class":315},"  off",[233,1239,544],{"class":243},[233,1241,1195],{"class":1169},[233,1243,408],{"class":243},[233,1245,505],{"class":303},[233,1247,326],{"class":243},[233,1249,1204],{"class":395},[233,1251,408],{"class":243},[233,1253,1209],{"class":243},[233,1255,1212],{"class":1169},[233,1257,408],{"class":243},[233,1259,1217],{"class":303},[233,1261,1220],{"class":250},[233,1263,536],{"class":243},[233,1265,550],{"class":280},[233,1267,1227],{"class":303},[233,1269,1230],{"class":243},[233,1271,1185],{"class":303},[233,1273,1274],{"class":235,"line":894},[233,1275,357],{"class":243},[198,1277,1278],{},"Store it typed when you need to close it later:",[223,1280,1282],{"className":225,"code":1281,"language":228,"meta":229,"style":229},"const handle = openModal\u003Cboolean>(ConfirmDialog, { group: 'confirm' })\nhandle.close({ success: true, data: true })\n",[210,1283,1284,1322],{"__ignoreMap":229},[233,1285,1286,1288,1291,1293,1295,1297,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320],{"class":235,"line":236},[233,1287,471],{"class":280},[233,1289,1290],{"class":250}," handle ",[233,1292,477],{"class":243},[233,1294,483],{"class":395},[233,1296,312],{"class":243},[233,1298,1299],{"class":303},"boolean",[233,1301,348],{"class":243},[233,1303,811],{"class":250},[233,1305,326],{"class":243},[233,1307,244],{"class":243},[233,1309,405],{"class":315},[233,1311,408],{"class":243},[233,1313,260],{"class":243},[233,1315,331],{"class":263},[233,1317,291],{"class":243},[233,1319,254],{"class":243},[233,1321,556],{"class":250},[233,1323,1324,1327,1329,1332,1334,1336,1339,1341,1343,1345,1348,1350,1352,1354],{"class":235,"line":270},[233,1325,1326],{"class":250},"handle",[233,1328,385],{"class":243},[233,1330,1331],{"class":395},"close",[233,1333,544],{"class":250},[233,1335,646],{"class":243},[233,1337,1338],{"class":315}," success",[233,1340,408],{"class":243},[233,1342,888],{"class":887},[233,1344,326],{"class":243},[233,1346,1347],{"class":315}," data",[233,1349,408],{"class":243},[233,1351,888],{"class":887},[233,1353,254],{"class":243},[233,1355,556],{"class":250},[202,1357,1359],{"id":1358},"full-registry-pattern-example","Full registry pattern example",[223,1361,1364],{"className":225,"code":1362,"filename":1363,"language":228,"meta":229,"style":229},"import { type DefineGroups } from '@kolirt\u002Fvue-modal'\n\ndeclare module '@kolirt\u002Fvue-modal' {\n  interface ModalGroupRegistry extends DefineGroups\u003C[\n    'default',\n    'confirm',\n    'panel'\n  ]> {}\n}\n","src\u002Fmodal-types.ts",[210,1365,1366,1386,1390,1404,1419,1430,1440,1448,1457],{"__ignoreMap":229},[233,1367,1368,1370,1372,1374,1376,1378,1380,1382,1384],{"class":235,"line":236},[233,1369,240],{"class":239},[233,1371,244],{"class":243},[233,1373,247],{"class":239},[233,1375,251],{"class":250},[233,1377,254],{"class":243},[233,1379,257],{"class":239},[233,1381,260],{"class":243},[233,1383,264],{"class":263},[233,1385,267],{"class":243},[233,1387,1388],{"class":235,"line":270},[233,1389,274],{"emptyLinePlaceholder":273},[233,1391,1392,1394,1396,1398,1400,1402],{"class":235,"line":277},[233,1393,281],{"class":280},[233,1395,284],{"class":280},[233,1397,260],{"class":243},[233,1399,264],{"class":263},[233,1401,291],{"class":243},[233,1403,294],{"class":243},[233,1405,1406,1408,1410,1412,1414,1416],{"class":235,"line":297},[233,1407,300],{"class":280},[233,1409,304],{"class":303},[233,1411,307],{"class":280},[233,1413,251],{"class":395},[233,1415,312],{"class":243},[233,1417,1418],{"class":315},"[\n",[233,1420,1421,1424,1426,1428],{"class":235,"line":354},[233,1422,1423],{"class":243},"    '",[233,1425,321],{"class":263},[233,1427,291],{"class":243},[233,1429,830],{"class":243},[233,1431,1432,1434,1436,1438],{"class":235,"line":577},[233,1433,1423],{"class":243},[233,1435,331],{"class":263},[233,1437,291],{"class":243},[233,1439,830],{"class":243},[233,1441,1442,1444,1446],{"class":235,"line":894},[233,1443,1423],{"class":243},[233,1445,340],{"class":263},[233,1447,267],{"class":243},[233,1449,1450,1453,1455],{"class":235,"line":900},[233,1451,1452],{"class":315},"  ]",[233,1454,348],{"class":243},[233,1456,351],{"class":243},[233,1458,1460],{"class":235,"line":1459},9,[233,1461,357],{"class":243},[223,1463,1466],{"className":225,"code":1464,"filename":1465,"language":228,"meta":229,"style":229},"import '.\u002Fmodal-types'   \u002F\u002F side-effect import to activate augmentation\nimport { createModal } from '@kolirt\u002Fvue-modal'\n\napp.use(createModal({\n  groups: {\n    default: {},\n    confirm: { disableCloseOnEscape: true },\n    panel:   { enableInteractOutside: true, disableLockBodyScroll: true }\n  }\n}))\n","src\u002Fmain.ts",[210,1467,1468,1482,1501,1505,1524,1533,1543,1562,1591,1595],{"__ignoreMap":229},[233,1469,1470,1472,1474,1477,1479],{"class":235,"line":236},[233,1471,240],{"class":239},[233,1473,260],{"class":243},[233,1475,1476],{"class":263},".\u002Fmodal-types",[233,1478,291],{"class":243},[233,1480,1481],{"class":422},"   \u002F\u002F side-effect import to activate augmentation\n",[233,1483,1484,1486,1488,1491,1493,1495,1497,1499],{"class":235,"line":270},[233,1485,240],{"class":239},[233,1487,244],{"class":243},[233,1489,1490],{"class":250}," createModal",[233,1492,254],{"class":243},[233,1494,257],{"class":239},[233,1496,260],{"class":243},[233,1498,264],{"class":263},[233,1500,267],{"class":243},[233,1502,1503],{"class":235,"line":277},[233,1504,274],{"emptyLinePlaceholder":273},[233,1506,1507,1510,1512,1515,1517,1519,1521],{"class":235,"line":297},[233,1508,1509],{"class":250},"app",[233,1511,385],{"class":243},[233,1513,1514],{"class":395},"use",[233,1516,544],{"class":250},[233,1518,380],{"class":395},[233,1520,544],{"class":250},[233,1522,1523],{"class":243},"{\n",[233,1525,1526,1529,1531],{"class":235,"line":354},[233,1527,1528],{"class":315},"  groups",[233,1530,408],{"class":243},[233,1532,294],{"class":243},[233,1534,1535,1538,1540],{"class":235,"line":577},[233,1536,1537],{"class":315},"    default",[233,1539,408],{"class":243},[233,1541,1542],{"class":243}," {},\n",[233,1544,1545,1548,1550,1552,1555,1557,1559],{"class":235,"line":894},[233,1546,1547],{"class":315},"    confirm",[233,1549,408],{"class":243},[233,1551,244],{"class":243},[233,1553,1554],{"class":315}," disableCloseOnEscape",[233,1556,408],{"class":243},[233,1558,888],{"class":887},[233,1560,1561],{"class":243}," },\n",[233,1563,1564,1567,1569,1572,1575,1577,1579,1581,1584,1586,1588],{"class":235,"line":900},[233,1565,1566],{"class":315},"    panel",[233,1568,408],{"class":243},[233,1570,1571],{"class":243},"   {",[233,1573,1574],{"class":315}," enableInteractOutside",[233,1576,408],{"class":243},[233,1578,888],{"class":887},[233,1580,326],{"class":243},[233,1582,1583],{"class":315}," disableLockBodyScroll",[233,1585,408],{"class":243},[233,1587,888],{"class":887},[233,1589,1590],{"class":243}," }\n",[233,1592,1593],{"class":235,"line":1459},[233,1594,897],{"class":243},[233,1596,1598,1600],{"class":235,"line":1597},10,[233,1599,533],{"class":243},[233,1601,1602],{"class":250},"))\n",[202,1604,1606,1098],{"id":1605},"closemodaloptionst-typing",[210,1607,1608],{},"CloseModalOptions\u003CT>",[198,1610,1611,1612,1615,1616,1619,1620,1623,1624,408],{},"When calling ",[210,1613,1614],{},"closeModalById"," with ",[210,1617,1618],{},"success: true"," the ",[210,1621,1622],{},"data"," field must match ",[210,1625,1125],{},[223,1627,1629],{"className":225,"code":1628,"language":228,"meta":229,"style":229},"closeModalById\u003Cboolean>(handle.id, { success: true, data: true })   \u002F\u002F ✓\ncloseModalById\u003Cboolean>(handle.id, { success: true, data: 'oops' }) \u002F\u002F ✗\n",[210,1630,1631,1673],{"__ignoreMap":229},[233,1632,1633,1635,1637,1639,1641,1644,1646,1649,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671],{"class":235,"line":236},[233,1634,1614],{"class":395},[233,1636,312],{"class":243},[233,1638,1299],{"class":303},[233,1640,348],{"class":243},[233,1642,1643],{"class":250},"(handle",[233,1645,385],{"class":243},[233,1647,1648],{"class":250},"id",[233,1650,326],{"class":243},[233,1652,244],{"class":243},[233,1654,1338],{"class":315},[233,1656,408],{"class":243},[233,1658,888],{"class":887},[233,1660,326],{"class":243},[233,1662,1347],{"class":315},[233,1664,408],{"class":243},[233,1666,888],{"class":887},[233,1668,254],{"class":243},[233,1670,419],{"class":250},[233,1672,423],{"class":422},[233,1674,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1710,1712,1714,1717],{"class":235,"line":270},[233,1676,1614],{"class":395},[233,1678,312],{"class":243},[233,1680,1299],{"class":303},[233,1682,348],{"class":243},[233,1684,1643],{"class":250},[233,1686,385],{"class":243},[233,1688,1648],{"class":250},[233,1690,326],{"class":243},[233,1692,244],{"class":243},[233,1694,1338],{"class":315},[233,1696,408],{"class":243},[233,1698,888],{"class":887},[233,1700,326],{"class":243},[233,1702,1347],{"class":315},[233,1704,408],{"class":243},[233,1706,260],{"class":243},[233,1708,1709],{"class":263},"oops",[233,1711,291],{"class":243},[233,1713,254],{"class":243},[233,1715,1716],{"class":250},") ",[233,1718,1719],{"class":422},"\u002F\u002F ✗\n",[1721,1722,1723],"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 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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":229,"searchDepth":270,"depth":270,"links":1725},[1726,1727,1729,1730,1731,1733,1735,1736],{"id":204,"depth":270,"text":205},{"id":454,"depth":270,"text":1728},"Typed results — openModal\u003CTResult>",{"id":701,"depth":270,"text":702},{"id":907,"depth":270,"text":908},{"id":987,"depth":270,"text":1732},"useModal type inference",{"id":1094,"depth":270,"text":1734},"ModalHandle typing",{"id":1358,"depth":270,"text":1359},{"id":1605,"depth":270,"text":1737},"CloseModalOptions\u003CT> typing","Full type-safety — group registry, typed promises, ExtractComponentProps, and useModalContext typing.","md",null,{},{"title":98,"description":1738},"4blVPSlLOmaslPHm9-UDfOXnld8JPIo5gt1laUKeXa8",[1745,1747],{"title":94,"path":95,"stem":96,"description":1746,"children":-1},"Keep heavy modal components out of the initial bundle with defineAsyncComponent.",{"title":107,"path":108,"stem":109,"description":1748,"children":-1},"A reusable ConfirmDialog component paired with a confirm() helper that returns Promise\u003Cboolean>. Covers loading state and destructive variants.",1779523619610]