[{"data":1,"prerenderedAt":1620},["ShallowReactive",2],{"navigation_docs":3,"-guide-passing-props-and-results":188,"-guide-passing-props-and-results-surround":1615},[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":66,"body":190,"description":1609,"extension":1610,"links":1611,"meta":1612,"navigation":791,"path":67,"seo":1613,"stem":68,"__hash__":1614},"docs\u002F4.guide\u002F03.passing-props-and-results.md",{"type":191,"value":192,"toc":1602},"minimark",[193,197,209,214,228,336,417,420,424,434,573,576,669,681,685,688,725,1162,1346,1361,1365,1372,1469,1474,1483,1598],[194,195,66],"h1",{"id":196},"props-results",[198,199,200,204,205,208],"p",{},[201,202,203],"code",{},"openModal"," accepts a typed ",[201,206,207],{},"props"," object and returns a typed promise. With one explicit generic on each side, the entire flow is type-checked.",[210,211,213],"h2",{"id":212},"passing-props","Passing props",[198,215,216,219,220,223,224,227],{},[201,217,218],{},"OpenModalOptions.props"," is typed as ",[201,221,222],{},"ExtractComponentProps\u003CC>"," — derived from the component's ",[201,225,226],{},"defineProps",", so TypeScript enforces the same contract as a normal usage:",[229,230,236],"pre",{"className":231,"code":232,"filename":233,"language":234,"meta":235,"style":235},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  userId: number\n  readonly?: boolean\n}>()\n\u003C\u002Fscript>\n","UserModal.vue","vue","",[201,237,238,273,292,305,317,326],{"__ignoreMap":235},[239,240,243,247,251,255,258,261,264,268,270],"span",{"class":241,"line":242},"line",1,[239,244,246],{"class":245},"sMK4o","\u003C",[239,248,250],{"class":249},"swJcz","script",[239,252,254],{"class":253},"spNyl"," setup",[239,256,257],{"class":253}," lang",[239,259,260],{"class":245},"=",[239,262,263],{"class":245},"\"",[239,265,267],{"class":266},"sfazB","ts",[239,269,263],{"class":245},[239,271,272],{"class":245},">\n",[239,274,276,279,283,285,289],{"class":241,"line":275},2,[239,277,278],{"class":253},"const",[239,280,282],{"class":281},"sTEyZ"," props ",[239,284,260],{"class":245},[239,286,288],{"class":287},"s2Zo4"," defineProps",[239,290,291],{"class":245},"\u003C{\n",[239,293,295,298,301],{"class":241,"line":294},3,[239,296,297],{"class":249},"  userId",[239,299,300],{"class":245},":",[239,302,304],{"class":303},"sBMFI"," number\n",[239,306,308,311,314],{"class":241,"line":307},4,[239,309,310],{"class":249},"  readonly",[239,312,313],{"class":245},"?:",[239,315,316],{"class":303}," boolean\n",[239,318,320,323],{"class":241,"line":319},5,[239,321,322],{"class":245},"}>",[239,324,325],{"class":281},"()\n",[239,327,329,332,334],{"class":241,"line":328},6,[239,330,331],{"class":245},"\u003C\u002F",[239,333,250],{"class":249},[239,335,272],{"class":245},[229,337,340],{"className":338,"code":339,"language":267,"meta":235,"style":235},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","openModal(UserModal, {\n  props: {\n    userId: 42,      \u002F\u002F required: number ✓\n    readonly: true   \u002F\u002F optional: boolean ✓\n    \u002F\u002F badProp: 'x'  \u002F\u002F ✗ Type error\n  }\n})\n",[201,341,342,355,364,381,395,403,408],{"__ignoreMap":235},[239,343,344,346,349,352],{"class":241,"line":242},[239,345,203],{"class":287},[239,347,348],{"class":281},"(UserModal",[239,350,351],{"class":245},",",[239,353,354],{"class":245}," {\n",[239,356,357,360,362],{"class":241,"line":275},[239,358,359],{"class":249},"  props",[239,361,300],{"class":245},[239,363,354],{"class":245},[239,365,366,369,371,375,377],{"class":241,"line":294},[239,367,368],{"class":249},"    userId",[239,370,300],{"class":245},[239,372,374],{"class":373},"sbssI"," 42",[239,376,351],{"class":245},[239,378,380],{"class":379},"sHwdD","      \u002F\u002F required: number ✓\n",[239,382,383,386,388,392],{"class":241,"line":307},[239,384,385],{"class":249},"    readonly",[239,387,300],{"class":245},[239,389,391],{"class":390},"sfNiH"," true",[239,393,394],{"class":379},"   \u002F\u002F optional: boolean ✓\n",[239,396,397,400],{"class":241,"line":319},[239,398,399],{"class":379},"    \u002F\u002F badProp: 'x'",[239,401,402],{"class":379},"  \u002F\u002F ✗ Type error\n",[239,404,405],{"class":241,"line":328},[239,406,407],{"class":245},"  }\n",[239,409,411,414],{"class":241,"line":410},7,[239,412,413],{"class":245},"}",[239,415,416],{"class":281},")\n",[198,418,419],{},"Props are plain data — they are not reactive after the modal opens. For live updates, use event listeners or a shared store.",[210,421,423],{"id":422},"event-listeners","Event listeners",[198,425,426,427,430,431,433],{},"Pass an ",[201,428,429],{},"on"," map alongside ",[201,432,207],{},". Keys are emit event names; the package wires them through to the rendered component.",[229,435,437],{"className":338,"code":436,"language":267,"meta":235,"style":235},"openModal(EditDialog, {\n  props: { id: 42 },\n  on: {\n    progress: (pct: number) => console.log('progress', pct),\n    'update:value': (v: string) => setValue(v)\n  }\n})\n",[201,438,439,450,469,478,531,563,567],{"__ignoreMap":235},[239,440,441,443,446,448],{"class":241,"line":242},[239,442,203],{"class":287},[239,444,445],{"class":281},"(EditDialog",[239,447,351],{"class":245},[239,449,354],{"class":245},[239,451,452,454,456,459,462,464,466],{"class":241,"line":275},[239,453,359],{"class":249},[239,455,300],{"class":245},[239,457,458],{"class":245}," {",[239,460,461],{"class":249}," id",[239,463,300],{"class":245},[239,465,374],{"class":373},[239,467,468],{"class":245}," },\n",[239,470,471,474,476],{"class":241,"line":294},[239,472,473],{"class":249},"  on",[239,475,300],{"class":245},[239,477,354],{"class":245},[239,479,480,483,485,488,492,494,497,500,503,506,509,512,515,518,521,523,525,528],{"class":241,"line":307},[239,481,482],{"class":287},"    progress",[239,484,300],{"class":245},[239,486,487],{"class":245}," (",[239,489,491],{"class":490},"sHdIc","pct",[239,493,300],{"class":245},[239,495,496],{"class":303}," number",[239,498,499],{"class":245},")",[239,501,502],{"class":253}," =>",[239,504,505],{"class":281}," console",[239,507,508],{"class":245},".",[239,510,511],{"class":287},"log",[239,513,514],{"class":281},"(",[239,516,517],{"class":245},"'",[239,519,520],{"class":266},"progress",[239,522,517],{"class":245},[239,524,351],{"class":245},[239,526,527],{"class":281}," pct)",[239,529,530],{"class":245},",\n",[239,532,533,536,539,541,543,545,548,550,553,555,557,560],{"class":241,"line":319},[239,534,535],{"class":245},"    '",[239,537,538],{"class":249},"update:value",[239,540,517],{"class":245},[239,542,300],{"class":245},[239,544,487],{"class":245},[239,546,547],{"class":490},"v",[239,549,300],{"class":245},[239,551,552],{"class":303}," string",[239,554,499],{"class":245},[239,556,502],{"class":253},[239,558,559],{"class":287}," setValue",[239,561,562],{"class":281},"(v)\n",[239,564,565],{"class":241,"line":328},[239,566,407],{"class":245},[239,568,569,571],{"class":241,"line":410},[239,570,413],{"class":245},[239,572,416],{"class":281},[198,574,575],{},"Inside the modal, emit normally:",[229,577,579],{"className":231,"code":578,"language":234,"meta":235,"style":235},"\u003Cscript setup lang=\"ts\">\nconst emit = defineEmits\u003C{\n  progress: [pct: number]\n  'update:value': [v: string]\n}>()\n\u003C\u002Fscript>\n",[201,580,581,601,615,634,655,661],{"__ignoreMap":235},[239,582,583,585,587,589,591,593,595,597,599],{"class":241,"line":242},[239,584,246],{"class":245},[239,586,250],{"class":249},[239,588,254],{"class":253},[239,590,257],{"class":253},[239,592,260],{"class":245},[239,594,263],{"class":245},[239,596,267],{"class":266},[239,598,263],{"class":245},[239,600,272],{"class":245},[239,602,603,605,608,610,613],{"class":241,"line":275},[239,604,278],{"class":253},[239,606,607],{"class":281}," emit ",[239,609,260],{"class":245},[239,611,612],{"class":287}," defineEmits",[239,614,291],{"class":245},[239,616,617,620,622,625,627,629,631],{"class":241,"line":294},[239,618,619],{"class":249},"  progress",[239,621,300],{"class":245},[239,623,624],{"class":281}," [",[239,626,491],{"class":303},[239,628,300],{"class":245},[239,630,496],{"class":303},[239,632,633],{"class":281},"]\n",[239,635,636,639,641,643,645,647,649,651,653],{"class":241,"line":307},[239,637,638],{"class":245},"  '",[239,640,538],{"class":266},[239,642,517],{"class":245},[239,644,300],{"class":245},[239,646,624],{"class":281},[239,648,547],{"class":303},[239,650,300],{"class":245},[239,652,552],{"class":303},[239,654,633],{"class":281},[239,656,657,659],{"class":241,"line":319},[239,658,322],{"class":245},[239,660,325],{"class":281},[239,662,663,665,667],{"class":241,"line":328},[239,664,331],{"class":245},[239,666,250],{"class":249},[239,668,272],{"class":245},[198,670,671,672,674,675,508],{},"Listeners passed to ",[201,673,203],{}," live for the lifetime of that handle and are discarded when the modal closes. For listeners that survive across re-opens, use ",[676,677,678],"a",{"href":79},[201,679,680],{},"useModal",[210,682,684],{"id":683},"returning-a-result","Returning a result",[198,686,687],{},"The flow:",[689,690,691,701,707,716],"ol",{},[692,693,694,697,698,508],"li",{},[201,695,696],{},"openModal\u003CTResult>(Component)"," returns a ",[201,699,700],{},"ModalHandle\u003CTResult>",[692,702,703,704,508],{},"Inside the modal: ",[201,705,706],{},"const { confirm, close } = useModalContext\u003CTResult>()",[692,708,709,712,713,508],{},[201,710,711],{},"confirm(data)"," → handle resolves with ",[201,714,715],{},"data",[692,717,718,721,722,508],{},[201,719,720],{},"close()"," → handle rejects with ",[201,723,724],{},"ModalClosedError",[229,726,729],{"className":231,"code":727,"filename":728,"language":234,"meta":235,"style":235},"\u003Cscript setup lang=\"ts\">\nimport { ModalRoot, ModalContent, useModalContext } from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst props = defineProps\u003C{ title: string }>()\n\ninterface SaveResult {\n  id: number\n  slug: string\n}\n\nconst { confirm, close } = useModalContext\u003CSaveResult>()\n\nfunction save() {\n  confirm({ id: 1, slug: 'my-post' })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"root\">\n    \u003CModalContent class=\"card\">\n      \u003Ch2>{{ props.title }}\u003C\u002Fh2>\n      \u003Cbutton @click=\"close()\">Cancel\u003C\u002Fbutton>\n      \u003Cbutton @click=\"save\">Save\u003C\u002Fbutton>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n","SaveDialog.vue",[201,730,731,751,787,793,819,823,848,852,863,873,884,890,895,927,932,946,981,986,995,1000,1010,1033,1055,1074,1104,1133,1143,1153],{"__ignoreMap":235},[239,732,733,735,737,739,741,743,745,747,749],{"class":241,"line":242},[239,734,246],{"class":245},[239,736,250],{"class":249},[239,738,254],{"class":253},[239,740,257],{"class":253},[239,742,260],{"class":245},[239,744,263],{"class":245},[239,746,267],{"class":266},[239,748,263],{"class":245},[239,750,272],{"class":245},[239,752,753,757,759,762,764,767,769,772,775,778,781,784],{"class":241,"line":275},[239,754,756],{"class":755},"s7zQu","import",[239,758,458],{"class":245},[239,760,761],{"class":281}," ModalRoot",[239,763,351],{"class":245},[239,765,766],{"class":281}," ModalContent",[239,768,351],{"class":245},[239,770,771],{"class":281}," useModalContext",[239,773,774],{"class":245}," }",[239,776,777],{"class":755}," from",[239,779,780],{"class":245}," '",[239,782,783],{"class":266},"@kolirt\u002Fvue-modal",[239,785,786],{"class":245},"'\n",[239,788,789],{"class":241,"line":294},[239,790,792],{"emptyLinePlaceholder":791},true,"\n",[239,794,795,798,800,803,806,808,810,813,815,817],{"class":241,"line":307},[239,796,797],{"class":287},"defineOptions",[239,799,514],{"class":281},[239,801,802],{"class":245},"{",[239,804,805],{"class":249}," modalGroup",[239,807,300],{"class":245},[239,809,780],{"class":245},[239,811,812],{"class":266},"default",[239,814,517],{"class":245},[239,816,774],{"class":245},[239,818,416],{"class":281},[239,820,821],{"class":241,"line":319},[239,822,792],{"emptyLinePlaceholder":791},[239,824,825,827,829,831,833,836,839,841,843,846],{"class":241,"line":328},[239,826,278],{"class":253},[239,828,282],{"class":281},[239,830,260],{"class":245},[239,832,288],{"class":287},[239,834,835],{"class":245},"\u003C{",[239,837,838],{"class":249}," title",[239,840,300],{"class":245},[239,842,552],{"class":303},[239,844,845],{"class":245}," }>",[239,847,325],{"class":281},[239,849,850],{"class":241,"line":410},[239,851,792],{"emptyLinePlaceholder":791},[239,853,855,858,861],{"class":241,"line":854},8,[239,856,857],{"class":253},"interface",[239,859,860],{"class":303}," SaveResult",[239,862,354],{"class":245},[239,864,866,869,871],{"class":241,"line":865},9,[239,867,868],{"class":249},"  id",[239,870,300],{"class":245},[239,872,304],{"class":303},[239,874,876,879,881],{"class":241,"line":875},10,[239,877,878],{"class":249},"  slug",[239,880,300],{"class":245},[239,882,883],{"class":303}," string\n",[239,885,887],{"class":241,"line":886},11,[239,888,889],{"class":245},"}\n",[239,891,893],{"class":241,"line":892},12,[239,894,792],{"emptyLinePlaceholder":791},[239,896,898,900,902,905,907,910,912,915,917,919,922,925],{"class":241,"line":897},13,[239,899,278],{"class":253},[239,901,458],{"class":245},[239,903,904],{"class":281}," confirm",[239,906,351],{"class":245},[239,908,909],{"class":281}," close ",[239,911,413],{"class":245},[239,913,914],{"class":245}," =",[239,916,771],{"class":287},[239,918,246],{"class":245},[239,920,921],{"class":303},"SaveResult",[239,923,924],{"class":245},">",[239,926,325],{"class":281},[239,928,930],{"class":241,"line":929},14,[239,931,792],{"emptyLinePlaceholder":791},[239,933,935,938,941,944],{"class":241,"line":934},15,[239,936,937],{"class":253},"function",[239,939,940],{"class":287}," save",[239,942,943],{"class":245},"()",[239,945,354],{"class":245},[239,947,949,952,954,956,958,960,963,965,968,970,972,975,977,979],{"class":241,"line":948},16,[239,950,951],{"class":287},"  confirm",[239,953,514],{"class":249},[239,955,802],{"class":245},[239,957,461],{"class":249},[239,959,300],{"class":245},[239,961,962],{"class":373}," 1",[239,964,351],{"class":245},[239,966,967],{"class":249}," slug",[239,969,300],{"class":245},[239,971,780],{"class":245},[239,973,974],{"class":266},"my-post",[239,976,517],{"class":245},[239,978,774],{"class":245},[239,980,416],{"class":249},[239,982,984],{"class":241,"line":983},17,[239,985,889],{"class":245},[239,987,989,991,993],{"class":241,"line":988},18,[239,990,331],{"class":245},[239,992,250],{"class":249},[239,994,272],{"class":245},[239,996,998],{"class":241,"line":997},19,[239,999,792],{"emptyLinePlaceholder":791},[239,1001,1003,1005,1008],{"class":241,"line":1002},20,[239,1004,246],{"class":245},[239,1006,1007],{"class":249},"template",[239,1009,272],{"class":245},[239,1011,1013,1016,1019,1022,1024,1026,1029,1031],{"class":241,"line":1012},21,[239,1014,1015],{"class":245},"  \u003C",[239,1017,1018],{"class":249},"ModalRoot",[239,1020,1021],{"class":253}," class",[239,1023,260],{"class":245},[239,1025,263],{"class":245},[239,1027,1028],{"class":266},"root",[239,1030,263],{"class":245},[239,1032,272],{"class":245},[239,1034,1036,1039,1042,1044,1046,1048,1051,1053],{"class":241,"line":1035},22,[239,1037,1038],{"class":245},"    \u003C",[239,1040,1041],{"class":249},"ModalContent",[239,1043,1021],{"class":253},[239,1045,260],{"class":245},[239,1047,263],{"class":245},[239,1049,1050],{"class":266},"card",[239,1052,263],{"class":245},[239,1054,272],{"class":245},[239,1056,1058,1061,1063,1065,1068,1070,1072],{"class":241,"line":1057},23,[239,1059,1060],{"class":245},"      \u003C",[239,1062,210],{"class":249},[239,1064,924],{"class":245},[239,1066,1067],{"class":281},"{{ props.title }}",[239,1069,331],{"class":245},[239,1071,210],{"class":249},[239,1073,272],{"class":245},[239,1075,1077,1079,1082,1085,1087,1089,1091,1093,1095,1098,1100,1102],{"class":241,"line":1076},24,[239,1078,1060],{"class":245},[239,1080,1081],{"class":249},"button",[239,1083,1084],{"class":253}," @click",[239,1086,260],{"class":245},[239,1088,263],{"class":245},[239,1090,720],{"class":266},[239,1092,263],{"class":245},[239,1094,924],{"class":245},[239,1096,1097],{"class":281},"Cancel",[239,1099,331],{"class":245},[239,1101,1081],{"class":249},[239,1103,272],{"class":245},[239,1105,1107,1109,1111,1113,1115,1117,1120,1122,1124,1127,1129,1131],{"class":241,"line":1106},25,[239,1108,1060],{"class":245},[239,1110,1081],{"class":249},[239,1112,1084],{"class":253},[239,1114,260],{"class":245},[239,1116,263],{"class":245},[239,1118,1119],{"class":266},"save",[239,1121,263],{"class":245},[239,1123,924],{"class":245},[239,1125,1126],{"class":281},"Save",[239,1128,331],{"class":245},[239,1130,1081],{"class":249},[239,1132,272],{"class":245},[239,1134,1136,1139,1141],{"class":241,"line":1135},26,[239,1137,1138],{"class":245},"    \u003C\u002F",[239,1140,1041],{"class":249},[239,1142,272],{"class":245},[239,1144,1146,1149,1151],{"class":241,"line":1145},27,[239,1147,1148],{"class":245},"  \u003C\u002F",[239,1150,1018],{"class":249},[239,1152,272],{"class":245},[239,1154,1156,1158,1160],{"class":241,"line":1155},28,[239,1157,331],{"class":245},[239,1159,1007],{"class":249},[239,1161,272],{"class":245},[229,1163,1166],{"className":338,"code":1164,"filename":1165,"language":267,"meta":235,"style":235},"import { openModal } from '@kolirt\u002Fvue-modal'\nimport SaveDialog from '.\u002FSaveDialog.vue'\n\nconst result = await openModal\u003C{ id: number; slug: string }>(SaveDialog, {\n  props: { title: 'Save post' }\n}).catch(() => null)\n\nif (result) {\n  console.log(result.id, result.slug) \u002F\u002F fully typed\n}\n","caller.ts",[201,1167,1168,1187,1204,1208,1248,1270,1292,1296,1307,1342],{"__ignoreMap":235},[239,1169,1170,1172,1174,1177,1179,1181,1183,1185],{"class":241,"line":242},[239,1171,756],{"class":755},[239,1173,458],{"class":245},[239,1175,1176],{"class":281}," openModal",[239,1178,774],{"class":245},[239,1180,777],{"class":755},[239,1182,780],{"class":245},[239,1184,783],{"class":266},[239,1186,786],{"class":245},[239,1188,1189,1191,1194,1197,1199,1202],{"class":241,"line":275},[239,1190,756],{"class":755},[239,1192,1193],{"class":281}," SaveDialog ",[239,1195,1196],{"class":755},"from",[239,1198,780],{"class":245},[239,1200,1201],{"class":266},".\u002FSaveDialog.vue",[239,1203,786],{"class":245},[239,1205,1206],{"class":241,"line":294},[239,1207,792],{"emptyLinePlaceholder":791},[239,1209,1210,1212,1215,1217,1220,1222,1224,1226,1228,1230,1233,1235,1237,1239,1241,1244,1246],{"class":241,"line":307},[239,1211,278],{"class":253},[239,1213,1214],{"class":281}," result ",[239,1216,260],{"class":245},[239,1218,1219],{"class":755}," await",[239,1221,1176],{"class":287},[239,1223,835],{"class":245},[239,1225,461],{"class":249},[239,1227,300],{"class":245},[239,1229,496],{"class":303},[239,1231,1232],{"class":245},";",[239,1234,967],{"class":249},[239,1236,300],{"class":245},[239,1238,552],{"class":303},[239,1240,845],{"class":245},[239,1242,1243],{"class":281},"(SaveDialog",[239,1245,351],{"class":245},[239,1247,354],{"class":245},[239,1249,1250,1252,1254,1256,1258,1260,1262,1265,1267],{"class":241,"line":319},[239,1251,359],{"class":249},[239,1253,300],{"class":245},[239,1255,458],{"class":245},[239,1257,838],{"class":249},[239,1259,300],{"class":245},[239,1261,780],{"class":245},[239,1263,1264],{"class":266},"Save post",[239,1266,517],{"class":245},[239,1268,1269],{"class":245}," }\n",[239,1271,1272,1274,1276,1278,1281,1283,1285,1287,1290],{"class":241,"line":328},[239,1273,413],{"class":245},[239,1275,499],{"class":281},[239,1277,508],{"class":245},[239,1279,1280],{"class":287},"catch",[239,1282,514],{"class":281},[239,1284,943],{"class":245},[239,1286,502],{"class":253},[239,1288,1289],{"class":245}," null",[239,1291,416],{"class":281},[239,1293,1294],{"class":241,"line":410},[239,1295,792],{"emptyLinePlaceholder":791},[239,1297,1298,1301,1304],{"class":241,"line":854},[239,1299,1300],{"class":755},"if",[239,1302,1303],{"class":281}," (result) ",[239,1305,1306],{"class":245},"{\n",[239,1308,1309,1312,1314,1316,1318,1321,1323,1326,1328,1331,1333,1336,1339],{"class":241,"line":865},[239,1310,1311],{"class":281},"  console",[239,1313,508],{"class":245},[239,1315,511],{"class":287},[239,1317,514],{"class":249},[239,1319,1320],{"class":281},"result",[239,1322,508],{"class":245},[239,1324,1325],{"class":281},"id",[239,1327,351],{"class":245},[239,1329,1330],{"class":281}," result",[239,1332,508],{"class":245},[239,1334,1335],{"class":281},"slug",[239,1337,1338],{"class":249},") ",[239,1340,1341],{"class":379},"\u002F\u002F fully typed\n",[239,1343,1344],{"class":241,"line":875},[239,1345,889],{"class":245},[198,1347,1348,1349,1353,1354,1357,1358,508],{},"The result type is ",[1350,1351,1352],"strong",{},"not"," inferred from the component — annotate the same generic on both ",[201,1355,1356],{},"openModal\u003CT>"," and ",[201,1359,1360],{},"useModalContext\u003CT>",[210,1362,1364],{"id":1363},"resolving-from-outside-the-modal","Resolving from outside the modal",[198,1366,1367,1368,1371],{},"Pass ",[201,1369,1370],{},"{ success: true, data }"," to any close call to resolve from the outside:",[229,1373,1375],{"className":338,"code":1374,"language":267,"meta":235,"style":235},"const handle = openModal\u003Cstring>(MyDialog)\n\n\u002F\u002F later, from anywhere:\ncloseModalById(handle.id, { success: true, data: 'resolved externally' })\n\nconst value = await handle  \u002F\u002F 'resolved externally'\n",[201,1376,1377,1398,1402,1407,1448,1452],{"__ignoreMap":235},[239,1378,1379,1381,1384,1386,1388,1390,1393,1395],{"class":241,"line":242},[239,1380,278],{"class":253},[239,1382,1383],{"class":281}," handle ",[239,1385,260],{"class":245},[239,1387,1176],{"class":287},[239,1389,246],{"class":245},[239,1391,1392],{"class":303},"string",[239,1394,924],{"class":245},[239,1396,1397],{"class":281},"(MyDialog)\n",[239,1399,1400],{"class":241,"line":275},[239,1401,792],{"emptyLinePlaceholder":791},[239,1403,1404],{"class":241,"line":294},[239,1405,1406],{"class":379},"\u002F\u002F later, from anywhere:\n",[239,1408,1409,1412,1415,1417,1419,1421,1423,1426,1428,1430,1432,1435,1437,1439,1442,1444,1446],{"class":241,"line":307},[239,1410,1411],{"class":287},"closeModalById",[239,1413,1414],{"class":281},"(handle",[239,1416,508],{"class":245},[239,1418,1325],{"class":281},[239,1420,351],{"class":245},[239,1422,458],{"class":245},[239,1424,1425],{"class":249}," success",[239,1427,300],{"class":245},[239,1429,391],{"class":390},[239,1431,351],{"class":245},[239,1433,1434],{"class":249}," data",[239,1436,300],{"class":245},[239,1438,780],{"class":245},[239,1440,1441],{"class":266},"resolved externally",[239,1443,517],{"class":245},[239,1445,774],{"class":245},[239,1447,416],{"class":281},[239,1449,1450],{"class":241,"line":319},[239,1451,792],{"emptyLinePlaceholder":791},[239,1453,1454,1456,1459,1461,1463,1466],{"class":241,"line":328},[239,1455,278],{"class":253},[239,1457,1458],{"class":281}," value ",[239,1460,260],{"class":245},[239,1462,1219],{"class":755},[239,1464,1465],{"class":281}," handle  ",[239,1467,1468],{"class":379},"\u002F\u002F 'resolved externally'\n",[210,1470,1472],{"id":1471},"modalclosederror",[201,1473,724],{},[198,1475,1476,1477,1479,1480,1482],{},"Dismissed modals (Esc, overlay click, ",[201,1478,720],{},") reject with ",[201,1481,724],{},". Import it to distinguish dismiss from unexpected errors:",[229,1484,1486],{"className":338,"code":1485,"language":267,"meta":235,"style":235},"import { openModal, ModalClosedError } from '@kolirt\u002Fvue-modal'\n\ntry {\n  await openModal(MyDialog)\n} catch (e) {\n  if (e instanceof ModalClosedError) {\n    \u002F\u002F normal dismiss\n  } else {\n    throw e\n  }\n}\n",[201,1487,1488,1511,1515,1522,1536,1548,1567,1572,1582,1590,1594],{"__ignoreMap":235},[239,1489,1490,1492,1494,1496,1498,1501,1503,1505,1507,1509],{"class":241,"line":242},[239,1491,756],{"class":755},[239,1493,458],{"class":245},[239,1495,1176],{"class":281},[239,1497,351],{"class":245},[239,1499,1500],{"class":281}," ModalClosedError",[239,1502,774],{"class":245},[239,1504,777],{"class":755},[239,1506,780],{"class":245},[239,1508,783],{"class":266},[239,1510,786],{"class":245},[239,1512,1513],{"class":241,"line":275},[239,1514,792],{"emptyLinePlaceholder":791},[239,1516,1517,1520],{"class":241,"line":294},[239,1518,1519],{"class":755},"try",[239,1521,354],{"class":245},[239,1523,1524,1527,1529,1531,1534],{"class":241,"line":307},[239,1525,1526],{"class":755},"  await",[239,1528,1176],{"class":287},[239,1530,514],{"class":249},[239,1532,1533],{"class":281},"MyDialog",[239,1535,416],{"class":249},[239,1537,1538,1540,1543,1546],{"class":241,"line":319},[239,1539,413],{"class":245},[239,1541,1542],{"class":755}," catch",[239,1544,1545],{"class":281}," (e) ",[239,1547,1306],{"class":245},[239,1549,1550,1553,1555,1558,1561,1563,1565],{"class":241,"line":328},[239,1551,1552],{"class":755},"  if",[239,1554,487],{"class":249},[239,1556,1557],{"class":281},"e",[239,1559,1560],{"class":245}," instanceof",[239,1562,1500],{"class":303},[239,1564,1338],{"class":249},[239,1566,1306],{"class":245},[239,1568,1569],{"class":241,"line":410},[239,1570,1571],{"class":379},"    \u002F\u002F normal dismiss\n",[239,1573,1574,1577,1580],{"class":241,"line":854},[239,1575,1576],{"class":245},"  }",[239,1578,1579],{"class":755}," else",[239,1581,354],{"class":245},[239,1583,1584,1587],{"class":241,"line":865},[239,1585,1586],{"class":755},"    throw",[239,1588,1589],{"class":281}," e\n",[239,1591,1592],{"class":241,"line":875},[239,1593,407],{"class":245},[239,1595,1596],{"class":241,"line":886},[239,1597,889],{"class":245},[1599,1600,1601],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .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":235,"searchDepth":275,"depth":275,"links":1603},[1604,1605,1606,1607,1608],{"id":212,"depth":275,"text":213},{"id":422,"depth":275,"text":423},{"id":683,"depth":275,"text":684},{"id":1363,"depth":275,"text":1364},{"id":1471,"depth":275,"text":724},"How props flow into a modal and how to type the result promise end-to-end.","md",null,{},{"title":66,"description":1609},"lxmY6eKcLkxrfC3fzq8y0qMeEDIstn4Rn46-VQP3qT4",[1616,1618],{"title":62,"path":63,"stem":64,"description":1617,"children":-1},"openModal, closeModal, replaceModal — signatures, return values, and pitfalls.",{"title":70,"path":71,"stem":72,"description":1619,"children":-1},"Modal mode, close triggers, scroll lock, focus trap.",1779523617515]