[{"data":1,"prerenderedAt":1815},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-first-modal":188,"-getting-started-first-modal-surround":1810},[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":23,"body":190,"description":1804,"extension":1805,"links":1806,"meta":1807,"navigation":334,"path":24,"seo":1808,"stem":25,"__hash__":1809},"docs\u002F2.getting-started\u002F3.first-modal.md",{"type":191,"value":192,"toc":1799},"minimark",[193,197,202,234,1556,1569,1591,1595,1614,1759,1789,1793,1796],[194,195,23],"h1",{"id":196},"first-modal",[198,199,201],"h2",{"id":200},"writing-a-modal-component","Writing a modal component",[203,204,205,206,210,211,214,215,218,219,210,222,225,226,229,230,233],"p",{},"A modal component is a regular Vue component. Wrap your markup in ",[207,208,209],"code",{},"\u003CModalRoot>"," and ",[207,212,213],{},"\u003CModalContent>",". Use ",[207,216,217],{},"useModalContext\u003CT>()"," to access ",[207,220,221],{},"close()",[207,223,224],{},"confirm(data)"," — these reject and resolve the promise returned by ",[207,227,228],{},"openModal",". The argument you pass to ",[207,231,232],{},"confirm(...)"," becomes the resolved value of that promise.",[235,236,242],"pre",{"className":237,"code":238,"filename":239,"language":240,"meta":241,"style":241},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ModalRoot, ModalContent, ModalTitle, ModalDescription, useModalContext } from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst props = defineProps\u003C{ message: string }>()\n\nconst { close, confirm } = useModalContext\u003Cboolean>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"root\">\n    \u003CModalContent class=\"card\">\n      \u003CModalTitle>Confirm\u003C\u002FModalTitle>\n      \u003CModalDescription>{{ props.message }}\u003C\u002FModalDescription>\n\n      \u003Cdiv class=\"actions\">\n        \u003Cbutton class=\"btn btn--cancel\" @click=\"close()\">Cancel\u003C\u002Fbutton>\n        \u003Cbutton class=\"btn btn--confirm\" @click=\"confirm(true)\">OK\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F* Center the card; padding keeps it from touching screen edges. *\u002F\n.root {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n}\n\n.card {\n  width: 100%;\n  max-width: 24rem;\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: white;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n}\n.card[data-state='open'] {\n  animation: card-slide-up 250ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n.card[data-state='closed'] {\n  animation: card-slide-down 200ms cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes card-slide-up {\n  from { opacity: 0; transform: translateY(24px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n@keyframes card-slide-down {\n  from { opacity: 1; transform: translateY(0); }\n  to { opacity: 0; transform: translateY(24px); }\n}\n\n.actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 1.5rem;\n}\n.btn {\n  padding: 0.5rem 1rem;\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  border: 1px solid transparent;\n  transition: background-color 150ms ease;\n}\n.btn--cancel {\n  background: transparent;\n  color: #525252;\n  border-color: #d4d4d4;\n}\n.btn--cancel:hover { background: #f5f5f5; }\n.btn--confirm {\n  background: #2563eb;\n  color: white;\n}\n.btn--confirm:hover { background: #1d4ed8; }\n\u003C\u002Fstyle>\n","ConfirmDialog.vue","vue","",[207,243,244,279,329,336,368,373,405,410,443,453,458,468,491,513,533,552,557,578,620,660,670,680,690,699,704,717,724,735,750,763,775,789,795,800,809,822,835,847,860,873,914,919,946,984,989,1013,1053,1058,1070,1107,1137,1142,1152,1181,1210,1215,1220,1229,1240,1252,1264,1276,1281,1291,1304,1316,1329,1342,1355,1371,1390,1395,1405,1417,1433,1448,1453,1481,1491,1505,1516,1521,1547],{"__ignoreMap":241},[245,246,249,253,257,261,264,267,270,274,276],"span",{"class":247,"line":248},"line",1,[245,250,252],{"class":251},"sMK4o","\u003C",[245,254,256],{"class":255},"swJcz","script",[245,258,260],{"class":259},"spNyl"," setup",[245,262,263],{"class":259}," lang",[245,265,266],{"class":251},"=",[245,268,269],{"class":251},"\"",[245,271,273],{"class":272},"sfazB","ts",[245,275,269],{"class":251},[245,277,278],{"class":251},">\n",[245,280,282,286,289,293,296,299,301,304,306,309,311,314,317,320,323,326],{"class":247,"line":281},2,[245,283,285],{"class":284},"s7zQu","import",[245,287,288],{"class":251}," {",[245,290,292],{"class":291},"sTEyZ"," ModalRoot",[245,294,295],{"class":251},",",[245,297,298],{"class":291}," ModalContent",[245,300,295],{"class":251},[245,302,303],{"class":291}," ModalTitle",[245,305,295],{"class":251},[245,307,308],{"class":291}," ModalDescription",[245,310,295],{"class":251},[245,312,313],{"class":291}," useModalContext",[245,315,316],{"class":251}," }",[245,318,319],{"class":284}," from",[245,321,322],{"class":251}," '",[245,324,325],{"class":272},"@kolirt\u002Fvue-modal",[245,327,328],{"class":251},"'\n",[245,330,332],{"class":247,"line":331},3,[245,333,335],{"emptyLinePlaceholder":334},true,"\n",[245,337,339,343,346,349,352,355,357,360,363,365],{"class":247,"line":338},4,[245,340,342],{"class":341},"s2Zo4","defineOptions",[245,344,345],{"class":291},"(",[245,347,348],{"class":251},"{",[245,350,351],{"class":255}," modalGroup",[245,353,354],{"class":251},":",[245,356,322],{"class":251},[245,358,359],{"class":272},"default",[245,361,362],{"class":251},"'",[245,364,316],{"class":251},[245,366,367],{"class":291},")\n",[245,369,371],{"class":247,"line":370},5,[245,372,335],{"emptyLinePlaceholder":334},[245,374,376,379,382,384,387,390,393,395,399,402],{"class":247,"line":375},6,[245,377,378],{"class":259},"const",[245,380,381],{"class":291}," props ",[245,383,266],{"class":251},[245,385,386],{"class":341}," defineProps",[245,388,389],{"class":251},"\u003C{",[245,391,392],{"class":255}," message",[245,394,354],{"class":251},[245,396,398],{"class":397},"sBMFI"," string",[245,400,401],{"class":251}," }>",[245,403,404],{"class":291},"()\n",[245,406,408],{"class":247,"line":407},7,[245,409,335],{"emptyLinePlaceholder":334},[245,411,413,415,417,420,422,425,428,431,433,435,438,441],{"class":247,"line":412},8,[245,414,378],{"class":259},[245,416,288],{"class":251},[245,418,419],{"class":291}," close",[245,421,295],{"class":251},[245,423,424],{"class":291}," confirm ",[245,426,427],{"class":251},"}",[245,429,430],{"class":251}," =",[245,432,313],{"class":341},[245,434,252],{"class":251},[245,436,437],{"class":397},"boolean",[245,439,440],{"class":251},">",[245,442,404],{"class":291},[245,444,446,449,451],{"class":247,"line":445},9,[245,447,448],{"class":251},"\u003C\u002F",[245,450,256],{"class":255},[245,452,278],{"class":251},[245,454,456],{"class":247,"line":455},10,[245,457,335],{"emptyLinePlaceholder":334},[245,459,461,463,466],{"class":247,"line":460},11,[245,462,252],{"class":251},[245,464,465],{"class":255},"template",[245,467,278],{"class":251},[245,469,471,474,477,480,482,484,487,489],{"class":247,"line":470},12,[245,472,473],{"class":251},"  \u003C",[245,475,476],{"class":255},"ModalRoot",[245,478,479],{"class":259}," class",[245,481,266],{"class":251},[245,483,269],{"class":251},[245,485,486],{"class":272},"root",[245,488,269],{"class":251},[245,490,278],{"class":251},[245,492,494,497,500,502,504,506,509,511],{"class":247,"line":493},13,[245,495,496],{"class":251},"    \u003C",[245,498,499],{"class":255},"ModalContent",[245,501,479],{"class":259},[245,503,266],{"class":251},[245,505,269],{"class":251},[245,507,508],{"class":272},"card",[245,510,269],{"class":251},[245,512,278],{"class":251},[245,514,516,519,522,524,527,529,531],{"class":247,"line":515},14,[245,517,518],{"class":251},"      \u003C",[245,520,521],{"class":255},"ModalTitle",[245,523,440],{"class":251},[245,525,526],{"class":291},"Confirm",[245,528,448],{"class":251},[245,530,521],{"class":255},[245,532,278],{"class":251},[245,534,536,538,541,543,546,548,550],{"class":247,"line":535},15,[245,537,518],{"class":251},[245,539,540],{"class":255},"ModalDescription",[245,542,440],{"class":251},[245,544,545],{"class":291},"{{ props.message }}",[245,547,448],{"class":251},[245,549,540],{"class":255},[245,551,278],{"class":251},[245,553,555],{"class":247,"line":554},16,[245,556,335],{"emptyLinePlaceholder":334},[245,558,560,562,565,567,569,571,574,576],{"class":247,"line":559},17,[245,561,518],{"class":251},[245,563,564],{"class":255},"div",[245,566,479],{"class":259},[245,568,266],{"class":251},[245,570,269],{"class":251},[245,572,573],{"class":272},"actions",[245,575,269],{"class":251},[245,577,278],{"class":251},[245,579,581,584,587,589,591,593,596,598,601,603,605,607,609,611,614,616,618],{"class":247,"line":580},18,[245,582,583],{"class":251},"        \u003C",[245,585,586],{"class":255},"button",[245,588,479],{"class":259},[245,590,266],{"class":251},[245,592,269],{"class":251},[245,594,595],{"class":272},"btn btn--cancel",[245,597,269],{"class":251},[245,599,600],{"class":259}," @click",[245,602,266],{"class":251},[245,604,269],{"class":251},[245,606,221],{"class":272},[245,608,269],{"class":251},[245,610,440],{"class":251},[245,612,613],{"class":291},"Cancel",[245,615,448],{"class":251},[245,617,586],{"class":255},[245,619,278],{"class":251},[245,621,623,625,627,629,631,633,636,638,640,642,644,647,649,651,654,656,658],{"class":247,"line":622},19,[245,624,583],{"class":251},[245,626,586],{"class":255},[245,628,479],{"class":259},[245,630,266],{"class":251},[245,632,269],{"class":251},[245,634,635],{"class":272},"btn btn--confirm",[245,637,269],{"class":251},[245,639,600],{"class":259},[245,641,266],{"class":251},[245,643,269],{"class":251},[245,645,646],{"class":272},"confirm(true)",[245,648,269],{"class":251},[245,650,440],{"class":251},[245,652,653],{"class":291},"OK",[245,655,448],{"class":251},[245,657,586],{"class":255},[245,659,278],{"class":251},[245,661,663,666,668],{"class":247,"line":662},20,[245,664,665],{"class":251},"      \u003C\u002F",[245,667,564],{"class":255},[245,669,278],{"class":251},[245,671,673,676,678],{"class":247,"line":672},21,[245,674,675],{"class":251},"    \u003C\u002F",[245,677,499],{"class":255},[245,679,278],{"class":251},[245,681,683,686,688],{"class":247,"line":682},22,[245,684,685],{"class":251},"  \u003C\u002F",[245,687,476],{"class":255},[245,689,278],{"class":251},[245,691,693,695,697],{"class":247,"line":692},23,[245,694,448],{"class":251},[245,696,465],{"class":255},[245,698,278],{"class":251},[245,700,702],{"class":247,"line":701},24,[245,703,335],{"emptyLinePlaceholder":334},[245,705,707,709,712,715],{"class":247,"line":706},25,[245,708,252],{"class":251},[245,710,711],{"class":255},"style",[245,713,714],{"class":259}," scoped",[245,716,278],{"class":251},[245,718,720],{"class":247,"line":719},26,[245,721,723],{"class":722},"sHwdD","\u002F* Center the card; padding keeps it from touching screen edges. *\u002F\n",[245,725,727,730,732],{"class":247,"line":726},27,[245,728,729],{"class":251},".",[245,731,486],{"class":397},[245,733,734],{"class":251}," {\n",[245,736,738,742,744,747],{"class":247,"line":737},28,[245,739,741],{"class":740},"sqsOY","  display",[245,743,354],{"class":251},[245,745,746],{"class":291}," flex",[245,748,749],{"class":251},";\n",[245,751,753,756,758,761],{"class":247,"line":752},29,[245,754,755],{"class":740},"  justify-content",[245,757,354],{"class":251},[245,759,760],{"class":291}," center",[245,762,749],{"class":251},[245,764,766,769,771,773],{"class":247,"line":765},30,[245,767,768],{"class":740},"  align-items",[245,770,354],{"class":251},[245,772,760],{"class":291},[245,774,749],{"class":251},[245,776,778,781,783,787],{"class":247,"line":777},31,[245,779,780],{"class":740},"  padding",[245,782,354],{"class":251},[245,784,786],{"class":785},"sbssI"," 1rem",[245,788,749],{"class":251},[245,790,792],{"class":247,"line":791},32,[245,793,794],{"class":251},"}\n",[245,796,798],{"class":247,"line":797},33,[245,799,335],{"emptyLinePlaceholder":334},[245,801,803,805,807],{"class":247,"line":802},34,[245,804,729],{"class":251},[245,806,508],{"class":397},[245,808,734],{"class":251},[245,810,812,815,817,820],{"class":247,"line":811},35,[245,813,814],{"class":740},"  width",[245,816,354],{"class":251},[245,818,819],{"class":785}," 100%",[245,821,749],{"class":251},[245,823,825,828,830,833],{"class":247,"line":824},36,[245,826,827],{"class":740},"  max-width",[245,829,354],{"class":251},[245,831,832],{"class":785}," 24rem",[245,834,749],{"class":251},[245,836,838,840,842,845],{"class":247,"line":837},37,[245,839,780],{"class":740},[245,841,354],{"class":251},[245,843,844],{"class":785}," 1.5rem",[245,846,749],{"class":251},[245,848,850,853,855,858],{"class":247,"line":849},38,[245,851,852],{"class":740},"  border-radius",[245,854,354],{"class":251},[245,856,857],{"class":785}," 0.5rem",[245,859,749],{"class":251},[245,861,863,866,868,871],{"class":247,"line":862},39,[245,864,865],{"class":740},"  background",[245,867,354],{"class":251},[245,869,870],{"class":291}," white",[245,872,749],{"class":251},[245,874,876,879,881,884,887,890,893,895,898,900,902,904,906,908,911],{"class":247,"line":875},40,[245,877,878],{"class":740},"  box-shadow",[245,880,354],{"class":251},[245,882,883],{"class":785}," 0",[245,885,886],{"class":785}," 10px",[245,888,889],{"class":785}," 30px",[245,891,892],{"class":341}," rgba",[245,894,345],{"class":251},[245,896,897],{"class":785},"0",[245,899,295],{"class":251},[245,901,883],{"class":785},[245,903,295],{"class":251},[245,905,883],{"class":785},[245,907,295],{"class":251},[245,909,910],{"class":785}," 0.2",[245,912,913],{"class":251},");\n",[245,915,917],{"class":247,"line":916},41,[245,918,794],{"class":251},[245,920,922,924,926,929,932,934,936,939,941,944],{"class":247,"line":921},42,[245,923,729],{"class":251},[245,925,508],{"class":397},[245,927,928],{"class":251},"[",[245,930,931],{"class":259},"data-state",[245,933,266],{"class":251},[245,935,362],{"class":251},[245,937,938],{"class":272},"open",[245,940,362],{"class":251},[245,942,943],{"class":251},"]",[245,945,734],{"class":251},[245,947,949,952,954,957,960,963,965,968,970,973,975,978,980,982],{"class":247,"line":948},43,[245,950,951],{"class":740},"  animation",[245,953,354],{"class":251},[245,955,956],{"class":291}," card-slide-up ",[245,958,959],{"class":785},"250ms",[245,961,962],{"class":341}," cubic-bezier",[245,964,345],{"class":251},[245,966,967],{"class":785},"0.16",[245,969,295],{"class":251},[245,971,972],{"class":785}," 1",[245,974,295],{"class":251},[245,976,977],{"class":785}," 0.3",[245,979,295],{"class":251},[245,981,972],{"class":785},[245,983,913],{"class":251},[245,985,987],{"class":247,"line":986},44,[245,988,794],{"class":251},[245,990,992,994,996,998,1000,1002,1004,1007,1009,1011],{"class":247,"line":991},45,[245,993,729],{"class":251},[245,995,508],{"class":397},[245,997,928],{"class":251},[245,999,931],{"class":259},[245,1001,266],{"class":251},[245,1003,362],{"class":251},[245,1005,1006],{"class":272},"closed",[245,1008,362],{"class":251},[245,1010,943],{"class":251},[245,1012,734],{"class":251},[245,1014,1016,1018,1020,1023,1026,1028,1030,1033,1035,1037,1039,1041,1043,1045,1048,1051],{"class":247,"line":1015},46,[245,1017,951],{"class":740},[245,1019,354],{"class":251},[245,1021,1022],{"class":291}," card-slide-down ",[245,1024,1025],{"class":785},"200ms",[245,1027,962],{"class":341},[245,1029,345],{"class":251},[245,1031,1032],{"class":785},"0.4",[245,1034,295],{"class":251},[245,1036,883],{"class":785},[245,1038,295],{"class":251},[245,1040,972],{"class":785},[245,1042,295],{"class":251},[245,1044,972],{"class":785},[245,1046,1047],{"class":251},")",[245,1049,1050],{"class":291}," forwards",[245,1052,749],{"class":251},[245,1054,1056],{"class":247,"line":1055},47,[245,1057,794],{"class":251},[245,1059,1061,1064,1068],{"class":247,"line":1060},48,[245,1062,1063],{"class":284},"@keyframes",[245,1065,1067],{"class":1066},"sHdIc"," card-slide-up",[245,1069,734],{"class":251},[245,1071,1073,1076,1078,1081,1083,1085,1088,1091,1093,1096,1098,1101,1104],{"class":247,"line":1072},49,[245,1074,1075],{"class":397},"  from",[245,1077,288],{"class":251},[245,1079,1080],{"class":740}," opacity",[245,1082,354],{"class":251},[245,1084,883],{"class":785},[245,1086,1087],{"class":251},";",[245,1089,1090],{"class":740}," transform",[245,1092,354],{"class":251},[245,1094,1095],{"class":341}," translateY",[245,1097,345],{"class":251},[245,1099,1100],{"class":785},"24px",[245,1102,1103],{"class":251},");",[245,1105,1106],{"class":251}," }\n",[245,1108,1110,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135],{"class":247,"line":1109},50,[245,1111,1112],{"class":397},"  to",[245,1114,288],{"class":251},[245,1116,1080],{"class":740},[245,1118,354],{"class":251},[245,1120,972],{"class":785},[245,1122,1087],{"class":251},[245,1124,1090],{"class":740},[245,1126,354],{"class":251},[245,1128,1095],{"class":341},[245,1130,345],{"class":251},[245,1132,897],{"class":785},[245,1134,1103],{"class":251},[245,1136,1106],{"class":251},[245,1138,1140],{"class":247,"line":1139},51,[245,1141,794],{"class":251},[245,1143,1145,1147,1150],{"class":247,"line":1144},52,[245,1146,1063],{"class":284},[245,1148,1149],{"class":1066}," card-slide-down",[245,1151,734],{"class":251},[245,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179],{"class":247,"line":1154},53,[245,1156,1075],{"class":397},[245,1158,288],{"class":251},[245,1160,1080],{"class":740},[245,1162,354],{"class":251},[245,1164,972],{"class":785},[245,1166,1087],{"class":251},[245,1168,1090],{"class":740},[245,1170,354],{"class":251},[245,1172,1095],{"class":341},[245,1174,345],{"class":251},[245,1176,897],{"class":785},[245,1178,1103],{"class":251},[245,1180,1106],{"class":251},[245,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208],{"class":247,"line":1183},54,[245,1185,1112],{"class":397},[245,1187,288],{"class":251},[245,1189,1080],{"class":740},[245,1191,354],{"class":251},[245,1193,883],{"class":785},[245,1195,1087],{"class":251},[245,1197,1090],{"class":740},[245,1199,354],{"class":251},[245,1201,1095],{"class":341},[245,1203,345],{"class":251},[245,1205,1100],{"class":785},[245,1207,1103],{"class":251},[245,1209,1106],{"class":251},[245,1211,1213],{"class":247,"line":1212},55,[245,1214,794],{"class":251},[245,1216,1218],{"class":247,"line":1217},56,[245,1219,335],{"emptyLinePlaceholder":334},[245,1221,1223,1225,1227],{"class":247,"line":1222},57,[245,1224,729],{"class":251},[245,1226,573],{"class":397},[245,1228,734],{"class":251},[245,1230,1232,1234,1236,1238],{"class":247,"line":1231},58,[245,1233,741],{"class":740},[245,1235,354],{"class":251},[245,1237,746],{"class":291},[245,1239,749],{"class":251},[245,1241,1243,1245,1247,1250],{"class":247,"line":1242},59,[245,1244,755],{"class":740},[245,1246,354],{"class":251},[245,1248,1249],{"class":291}," flex-end",[245,1251,749],{"class":251},[245,1253,1255,1258,1260,1262],{"class":247,"line":1254},60,[245,1256,1257],{"class":740},"  gap",[245,1259,354],{"class":251},[245,1261,857],{"class":785},[245,1263,749],{"class":251},[245,1265,1267,1270,1272,1274],{"class":247,"line":1266},61,[245,1268,1269],{"class":740},"  margin-top",[245,1271,354],{"class":251},[245,1273,844],{"class":785},[245,1275,749],{"class":251},[245,1277,1279],{"class":247,"line":1278},62,[245,1280,794],{"class":251},[245,1282,1284,1286,1289],{"class":247,"line":1283},63,[245,1285,729],{"class":251},[245,1287,1288],{"class":397},"btn",[245,1290,734],{"class":251},[245,1292,1294,1296,1298,1300,1302],{"class":247,"line":1293},64,[245,1295,780],{"class":740},[245,1297,354],{"class":251},[245,1299,857],{"class":785},[245,1301,786],{"class":785},[245,1303,749],{"class":251},[245,1305,1307,1309,1311,1314],{"class":247,"line":1306},65,[245,1308,852],{"class":740},[245,1310,354],{"class":251},[245,1312,1313],{"class":785}," 0.375rem",[245,1315,749],{"class":251},[245,1317,1319,1322,1324,1327],{"class":247,"line":1318},66,[245,1320,1321],{"class":740},"  font-size",[245,1323,354],{"class":251},[245,1325,1326],{"class":785}," 0.875rem",[245,1328,749],{"class":251},[245,1330,1332,1335,1337,1340],{"class":247,"line":1331},67,[245,1333,1334],{"class":740},"  font-weight",[245,1336,354],{"class":251},[245,1338,1339],{"class":785}," 500",[245,1341,749],{"class":251},[245,1343,1345,1348,1350,1353],{"class":247,"line":1344},68,[245,1346,1347],{"class":740},"  cursor",[245,1349,354],{"class":251},[245,1351,1352],{"class":291}," pointer",[245,1354,749],{"class":251},[245,1356,1358,1361,1363,1366,1369],{"class":247,"line":1357},69,[245,1359,1360],{"class":740},"  border",[245,1362,354],{"class":251},[245,1364,1365],{"class":785}," 1px",[245,1367,1368],{"class":291}," solid transparent",[245,1370,749],{"class":251},[245,1372,1374,1377,1379,1382,1385,1388],{"class":247,"line":1373},70,[245,1375,1376],{"class":740},"  transition",[245,1378,354],{"class":251},[245,1380,1381],{"class":291}," background-color ",[245,1383,1384],{"class":785},"150ms",[245,1386,1387],{"class":291}," ease",[245,1389,749],{"class":251},[245,1391,1393],{"class":247,"line":1392},71,[245,1394,794],{"class":251},[245,1396,1398,1400,1403],{"class":247,"line":1397},72,[245,1399,729],{"class":251},[245,1401,1402],{"class":397},"btn--cancel",[245,1404,734],{"class":251},[245,1406,1408,1410,1412,1415],{"class":247,"line":1407},73,[245,1409,865],{"class":740},[245,1411,354],{"class":251},[245,1413,1414],{"class":291}," transparent",[245,1416,749],{"class":251},[245,1418,1420,1423,1425,1428,1431],{"class":247,"line":1419},74,[245,1421,1422],{"class":740},"  color",[245,1424,354],{"class":251},[245,1426,1427],{"class":251}," #",[245,1429,1430],{"class":291},"525252",[245,1432,749],{"class":251},[245,1434,1436,1439,1441,1443,1446],{"class":247,"line":1435},75,[245,1437,1438],{"class":740},"  border-color",[245,1440,354],{"class":251},[245,1442,1427],{"class":251},[245,1444,1445],{"class":291},"d4d4d4",[245,1447,749],{"class":251},[245,1449,1451],{"class":247,"line":1450},76,[245,1452,794],{"class":251},[245,1454,1456,1458,1460,1462,1465,1467,1470,1472,1474,1477,1479],{"class":247,"line":1455},77,[245,1457,729],{"class":251},[245,1459,1402],{"class":397},[245,1461,354],{"class":251},[245,1463,1464],{"class":259},"hover",[245,1466,288],{"class":251},[245,1468,1469],{"class":740}," background",[245,1471,354],{"class":251},[245,1473,1427],{"class":251},[245,1475,1476],{"class":291},"f5f5f5",[245,1478,1087],{"class":251},[245,1480,1106],{"class":251},[245,1482,1484,1486,1489],{"class":247,"line":1483},78,[245,1485,729],{"class":251},[245,1487,1488],{"class":397},"btn--confirm",[245,1490,734],{"class":251},[245,1492,1494,1496,1498,1500,1503],{"class":247,"line":1493},79,[245,1495,865],{"class":740},[245,1497,354],{"class":251},[245,1499,1427],{"class":251},[245,1501,1502],{"class":291},"2563eb",[245,1504,749],{"class":251},[245,1506,1508,1510,1512,1514],{"class":247,"line":1507},80,[245,1509,1422],{"class":740},[245,1511,354],{"class":251},[245,1513,870],{"class":291},[245,1515,749],{"class":251},[245,1517,1519],{"class":247,"line":1518},81,[245,1520,794],{"class":251},[245,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1543,1545],{"class":247,"line":1523},82,[245,1525,729],{"class":251},[245,1527,1488],{"class":397},[245,1529,354],{"class":251},[245,1531,1464],{"class":259},[245,1533,288],{"class":251},[245,1535,1469],{"class":740},[245,1537,354],{"class":251},[245,1539,1427],{"class":251},[245,1541,1542],{"class":291},"1d4ed8",[245,1544,1087],{"class":251},[245,1546,1106],{"class":251},[245,1548,1550,1552,1554],{"class":247,"line":1549},83,[245,1551,448],{"class":251},[245,1553,711],{"class":255},[245,1555,278],{"class":251},[203,1557,1558,1560,1561,1565,1566,1568],{},[207,1559,209],{}," ",[1562,1563,1564],"strong",{},"must"," contain a ",[207,1567,213],{}," — without it the exit animation never finalizes and the modal hangs in the DOM.",[1570,1571,1573,1576,1577,1579,1580,1583,1584,1587,1588,1590],"callout",{"icon":1572},"i-lucide-info",[207,1574,1575],{},"defineOptions({ modalGroup: 'default' })"," binds this component to the ",[207,1578,359],{}," group, so ",[207,1581,1582],{},"openModal(ConfirmDialog)"," works without passing ",[207,1585,1586],{},"group",". Drop it if you'd rather pass ",[207,1589,1586],{}," on every call.",[198,1592,1594],{"id":1593},"opening-a-modal","Opening a modal",[203,1596,1597,1599,1600,1602,1603,1606,1607,1609,1610,1613],{},[207,1598,228],{}," returns a promise. ",[207,1601,224],{}," resolves it with ",[207,1604,1605],{},"data","; ",[207,1608,221],{}," rejects it with a ",[207,1611,1612],{},"ModalClosedError",". The simplest pattern catches the rejection and treats it as a falsy result:",[235,1615,1619],{"className":1616,"code":1617,"filename":1618,"language":273,"meta":241,"style":241},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { openModal } from '@kolirt\u002Fvue-modal'\nimport ConfirmDialog from '.\u002FConfirmDialog.vue'\n\nconst ok = await openModal\u003Cboolean>(ConfirmDialog, {\n  props: { message: 'Delete this project?' }\n}).catch(() => false)\n\nif (ok) {\n  \u002F\u002F user pressed OK\n}\n","DeleteButton.vue",[207,1620,1621,1640,1657,1661,1688,1710,1735,1739,1750,1755],{"__ignoreMap":241},[245,1622,1623,1625,1627,1630,1632,1634,1636,1638],{"class":247,"line":248},[245,1624,285],{"class":284},[245,1626,288],{"class":251},[245,1628,1629],{"class":291}," openModal",[245,1631,316],{"class":251},[245,1633,319],{"class":284},[245,1635,322],{"class":251},[245,1637,325],{"class":272},[245,1639,328],{"class":251},[245,1641,1642,1644,1647,1650,1652,1655],{"class":247,"line":281},[245,1643,285],{"class":284},[245,1645,1646],{"class":291}," ConfirmDialog ",[245,1648,1649],{"class":284},"from",[245,1651,322],{"class":251},[245,1653,1654],{"class":272},".\u002FConfirmDialog.vue",[245,1656,328],{"class":251},[245,1658,1659],{"class":247,"line":331},[245,1660,335],{"emptyLinePlaceholder":334},[245,1662,1663,1665,1668,1670,1673,1675,1677,1679,1681,1684,1686],{"class":247,"line":338},[245,1664,378],{"class":259},[245,1666,1667],{"class":291}," ok ",[245,1669,266],{"class":251},[245,1671,1672],{"class":284}," await",[245,1674,1629],{"class":341},[245,1676,252],{"class":251},[245,1678,437],{"class":397},[245,1680,440],{"class":251},[245,1682,1683],{"class":291},"(ConfirmDialog",[245,1685,295],{"class":251},[245,1687,734],{"class":251},[245,1689,1690,1693,1695,1697,1699,1701,1703,1706,1708],{"class":247,"line":370},[245,1691,1692],{"class":255},"  props",[245,1694,354],{"class":251},[245,1696,288],{"class":251},[245,1698,392],{"class":255},[245,1700,354],{"class":251},[245,1702,322],{"class":251},[245,1704,1705],{"class":272},"Delete this project?",[245,1707,362],{"class":251},[245,1709,1106],{"class":251},[245,1711,1712,1714,1716,1718,1721,1723,1726,1729,1733],{"class":247,"line":375},[245,1713,427],{"class":251},[245,1715,1047],{"class":291},[245,1717,729],{"class":251},[245,1719,1720],{"class":341},"catch",[245,1722,345],{"class":291},[245,1724,1725],{"class":251},"()",[245,1727,1728],{"class":259}," =>",[245,1730,1732],{"class":1731},"sfNiH"," false",[245,1734,367],{"class":291},[245,1736,1737],{"class":247,"line":407},[245,1738,335],{"emptyLinePlaceholder":334},[245,1740,1741,1744,1747],{"class":247,"line":412},[245,1742,1743],{"class":284},"if",[245,1745,1746],{"class":291}," (ok) ",[245,1748,1749],{"class":251},"{\n",[245,1751,1752],{"class":247,"line":445},[245,1753,1754],{"class":722},"  \u002F\u002F user pressed OK\n",[245,1756,1757],{"class":247,"line":455},[245,1758,794],{"class":251},[203,1760,1761,1762,1764,1765,1768,1769,1772,1773,1775,1776,1779,1780,1783,1784,1768,1786,729],{},"Press ",[1562,1763,653],{}," → ",[207,1766,1767],{},"ok"," is ",[207,1770,1771],{},"true",". Press ",[1562,1774,613],{},", ",[1562,1777,1778],{},"Esc",", or click outside → the promise rejects, ",[207,1781,1782],{},".catch"," swallows it, and ",[207,1785,1767],{},[207,1787,1788],{},"false",[198,1790,1792],{"id":1791},"try-it","Try it",[1794,1795],"first-modal-demo",{},[711,1797,1798],{},"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 .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 .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 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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":241,"searchDepth":281,"depth":281,"links":1800},[1801,1802,1803],{"id":200,"depth":281,"text":201},{"id":1593,"depth":281,"text":1594},{"id":1791,"depth":281,"text":1792},"Write a modal component, open it imperatively, handle the result.","md",null,{},{"title":23,"description":1804},"JZmW9SK94B2eUrssj4S8OAnIKhmH2QhMQ_8N-IKqlI0",[1811,1813],{"title":19,"path":20,"stem":21,"description":1812,"children":-1},"Install the package and register your modal groups.",{"title":33,"path":34,"stem":35,"description":1814,"children":-1},"How ModalTarget, ModalRoot, and the headless primitives fit together.",1779523617515]