[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"navigation_docs":3,"-concepts-groups":188,"-concepts-groups-surround":678},[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":45,"body":190,"description":672,"extension":673,"links":674,"meta":675,"navigation":609,"path":46,"seo":676,"stem":47,"__hash__":677},"docs\u002F3.concepts\u002F4.groups.md",{"type":191,"value":192,"toc":666},"minimark",[193,197,218,232,237,266,270,276,320,330,334,337,427,432,482,568,572,659,662],[194,195,45],"h1",{"id":196},"groups",[198,199,200,201,205,206,210,211,210,214,217],"p",{},"Every modal belongs to exactly one ",[202,203,204],"strong",{},"group",". A group is a named bucket that pairs a stack with a mount point — ",[207,208,209],"code",{},"'default'",", ",[207,212,213],{},"'confirm'",[207,215,216],{},"'panel'",", whatever you declare.",[198,219,220,221,223,224,227,228,231],{},"There is no implicit ",[207,222,209],{}," group. ",[207,225,226],{},"openModal"," without a resolvable group throws at runtime. See ",[229,230,19],"a",{"href":20}," for registration mechanics.",[233,234,236],"h2",{"id":235},"what-a-group-gives-you","What a group gives you",[238,239,240,247,257],"ul",{},[241,242,243,246],"li",{},[202,244,245],{},"A separate stack."," Modals in one group don't interfere with another group's Esc routing or stack sequencing.",[241,248,249,252,253,256],{},[202,250,251],{},"A separate DOM mount point."," Each group has its own ",[207,254,255],{},"\u003CModalTarget>",", placeable anywhere in your template — main view, sidebar, drawer.",[241,258,259,262,263,265],{},[202,260,261],{},"Per-group behavior."," Scroll lock, Esc, overlay-click, and interact-outside can be tuned per group at registration. See ",[229,264,70],{"href":71},".",[233,267,269],{"id":268},"when-to-use-multiple-groups","When to use multiple groups",[198,271,272,273,275],{},"Most apps start with a single ",[207,274,209],{}," group and add more only when behavior or layout needs to differ.",[277,278,279,292],"table",{},[280,281,282],"thead",{},[283,284,285,289],"tr",{},[286,287,288],"th",{},"Use case",[286,290,291],{},"Why a separate group",[293,294,295,304,312],"tbody",{},[283,296,297,301],{},[298,299,300],"td",{},"Confirm dialog above a form modal",[298,302,303],{},"Distinct overlay, can disable Esc\u002Foverlay-click independently",[283,305,306,309],{},[298,307,308],{},"Side panel",[298,310,311],{},"Non-modal mode, no body scroll lock, different position",[283,313,314,317],{},[298,315,316],{},"Notifications \u002F toasts",[298,318,319],{},"Doesn't trap focus or block the page",[198,321,322,323,326,327,329],{},"A confirm-on-top-of-form flow does ",[202,324,325],{},"not"," require a separate group — same-group stacking handles that. Reach for a new group when you need a different ",[207,328,255],{}," placement, different behavior flags, or visually distinct overlay\u002Fanimation.",[233,331,333],{"id":332},"default-group-on-a-component","Default group on a component",[198,335,336],{},"If a modal is always opened in the same group, declare it on the component:",[338,339,345],"pre",{"className":340,"code":341,"filename":342,"language":343,"meta":344,"style":344},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineOptions({ modalGroup: 'default' })\n\u003C\u002Fscript>\n","SettingsDialog.vue","vue","",[207,346,347,382,417],{"__ignoreMap":344},[348,349,352,356,360,364,367,370,373,377,379],"span",{"class":350,"line":351},"line",1,[348,353,355],{"class":354},"sMK4o","\u003C",[348,357,359],{"class":358},"swJcz","script",[348,361,363],{"class":362},"spNyl"," setup",[348,365,366],{"class":362}," lang",[348,368,369],{"class":354},"=",[348,371,372],{"class":354},"\"",[348,374,376],{"class":375},"sfazB","ts",[348,378,372],{"class":354},[348,380,381],{"class":354},">\n",[348,383,385,389,393,396,399,402,405,408,411,414],{"class":350,"line":384},2,[348,386,388],{"class":387},"s2Zo4","defineOptions",[348,390,392],{"class":391},"sTEyZ","(",[348,394,395],{"class":354},"{",[348,397,398],{"class":358}," modalGroup",[348,400,401],{"class":354},":",[348,403,404],{"class":354}," '",[348,406,407],{"class":375},"default",[348,409,410],{"class":354},"'",[348,412,413],{"class":354}," }",[348,415,416],{"class":391},")\n",[348,418,420,423,425],{"class":350,"line":419},3,[348,421,422],{"class":354},"\u003C\u002F",[348,424,359],{"class":358},[348,426,381],{"class":354},[198,428,429,430,401],{},"Callers can then omit ",[207,431,204],{},[338,433,436],{"className":434,"code":435,"language":376,"meta":344,"style":344},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","openModal(SettingsDialog)                     \u002F\u002F uses 'default'\nopenModal(SettingsDialog, { group: 'panel' }) \u002F\u002F overrides\n",[207,437,438,449],{"__ignoreMap":344},[348,439,440,442,445],{"class":350,"line":351},[348,441,226],{"class":387},[348,443,444],{"class":391},"(SettingsDialog)                     ",[348,446,448],{"class":447},"sHwdD","\u002F\u002F uses 'default'\n",[348,450,451,453,456,459,462,465,467,469,472,474,476,479],{"class":350,"line":384},[348,452,226],{"class":387},[348,454,455],{"class":391},"(SettingsDialog",[348,457,458],{"class":354},",",[348,460,461],{"class":354}," {",[348,463,464],{"class":358}," group",[348,466,401],{"class":354},[348,468,404],{"class":354},[348,470,471],{"class":375},"panel",[348,473,410],{"class":354},[348,475,413],{"class":354},[348,477,478],{"class":391},") ",[348,480,481],{"class":447},"\u002F\u002F overrides\n",[483,484,487,505],"callout",{"color":485,"icon":486},"warning","i-lucide-triangle-alert",[198,488,489,495,496,498,499,501,502,504],{},[202,490,491,492,265],{},"Async components don't pick up ",[207,493,494],{},"defineOptions({ modalGroup })"," The ",[207,497,204],{}," lookup happens synchronously when ",[207,500,226],{}," is called — the inner component hasn't loaded yet. Pass ",[207,503,204],{}," explicitly:",[338,506,508],{"className":434,"code":507,"language":376,"meta":344,"style":344},"openModal(defineAsyncComponent(() => import('.\u002FHeavyDialog.vue')), {\n  group: 'default'\n})\n",[207,509,510,547,561],{"__ignoreMap":344},[348,511,512,514,516,519,521,524,527,530,532,534,537,539,542,544],{"class":350,"line":351},[348,513,226],{"class":387},[348,515,392],{"class":391},[348,517,518],{"class":387},"defineAsyncComponent",[348,520,392],{"class":391},[348,522,523],{"class":354},"()",[348,525,526],{"class":362}," =>",[348,528,529],{"class":354}," import",[348,531,392],{"class":391},[348,533,410],{"class":354},[348,535,536],{"class":375},".\u002FHeavyDialog.vue",[348,538,410],{"class":354},[348,540,541],{"class":391},"))",[348,543,458],{"class":354},[348,545,546],{"class":354}," {\n",[348,548,549,552,554,556,558],{"class":350,"line":384},[348,550,551],{"class":358},"  group",[348,553,401],{"class":354},[348,555,404],{"class":354},[348,557,407],{"class":375},[348,559,560],{"class":354},"'\n",[348,562,563,566],{"class":350,"line":419},[348,564,565],{"class":354},"}",[348,567,416],{"class":391},[233,569,571],{"id":570},"inspecting-group-state","Inspecting group state",[338,573,575],{"className":434,"code":574,"language":376,"meta":344,"style":344},"import { groupModals, isGroupOpen } from '@kolirt\u002Fvue-modal'\n\ngroupModals('confirm').value  \u002F\u002F ModalItem[] currently open in this group\nisGroupOpen('confirm').value  \u002F\u002F boolean\n",[207,576,577,605,611,636],{"__ignoreMap":344},[348,578,579,583,585,588,590,593,595,598,600,603],{"class":350,"line":351},[348,580,582],{"class":581},"s7zQu","import",[348,584,461],{"class":354},[348,586,587],{"class":391}," groupModals",[348,589,458],{"class":354},[348,591,592],{"class":391}," isGroupOpen",[348,594,413],{"class":354},[348,596,597],{"class":581}," from",[348,599,404],{"class":354},[348,601,602],{"class":375},"@kolirt\u002Fvue-modal",[348,604,560],{"class":354},[348,606,607],{"class":350,"line":384},[348,608,610],{"emptyLinePlaceholder":609},true,"\n",[348,612,613,616,618,620,623,625,628,630,633],{"class":350,"line":419},[348,614,615],{"class":387},"groupModals",[348,617,392],{"class":391},[348,619,410],{"class":354},[348,621,622],{"class":375},"confirm",[348,624,410],{"class":354},[348,626,627],{"class":391},")",[348,629,265],{"class":354},[348,631,632],{"class":391},"value  ",[348,634,635],{"class":447},"\u002F\u002F ModalItem[] currently open in this group\n",[348,637,639,642,644,646,648,650,652,654,656],{"class":350,"line":638},4,[348,640,641],{"class":387},"isGroupOpen",[348,643,392],{"class":391},[348,645,410],{"class":354},[348,647,622],{"class":375},[348,649,410],{"class":354},[348,651,627],{"class":391},[348,653,265],{"class":354},[348,655,632],{"class":391},[348,657,658],{"class":447},"\u002F\u002F boolean\n",[198,660,661],{},"Both are computed refs — reactive in templates and watchers.",[663,664,665],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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":344,"searchDepth":384,"depth":384,"links":667},[668,669,670,671],{"id":235,"depth":384,"text":236},{"id":268,"depth":384,"text":269},{"id":332,"depth":384,"text":333},{"id":570,"depth":384,"text":571},"Why modals belong to named groups and what isolation that provides.","md",null,{},{"title":45,"description":672},"yrpo9NUy0ZsVkFpFcY0Qy29inBVGEvQDuEuXlDNBKKw",[679,681],{"title":41,"path":42,"stem":43,"description":680,"children":-1},"How multiple modals stack and what \"topmost\" means globally vs per-group.",{"title":49,"path":50,"stem":51,"description":682,"children":-1},"Why the package ships no visual styles and how to drive animations with data attributes.",1779523617515]