[{"data":1,"prerenderedAt":503},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-context-menu":12,"i-ph:code":501},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":494,"extension":495,"meta":496,"navigation":166,"path":497,"seo":498,"stem":499,"__hash__":500},"docs\u002Fdocs\u002Fcomponents\u002Fcontext-menu.md","Context Menu",{"type":16,"value":17,"toc":491},"minimark",[18,22,32,64,430,435,487],[19,20,14],"h1",{"id":21},"context-menu",[23,24,25,26,31],"p",{},"A context menu component that listens for right-click events on its content and displays a floating menu at the cursor's position. It uses the ",[27,28,30],"a",{"href":29},"\u002Fdocs\u002Fcomponents\u002Fpopout","Popout"," component which does not come with any default styles.",[33,34,35],"blockquote",{},[23,36,37,38,42,43,47,48,50,51,55,56,59,60,63],{},"Plese note: components using popout (",[27,39,41],{"href":40},"\u002Fdocs\u002Fcomponents\u002Ftooltip","Tooltip",", ",[27,44,46],{"href":45},"\u002Fdocs\u002Fcomponents\u002Fdropdown","Dropdown"," & ",[27,49,30],{"href":29},") cannot be styled using ",[52,53,54],"code",{},"scoped"," CSS in Vue SFC. However, you can just define a new ",[52,57,58],{},"\u003Cstyle>"," tag, style the popout inside and keep rest of your CSS scoped in a separate ",[52,61,62],{},"\u003Cstyle scoped>",".",[65,66,68],"context-menu-example",{"source-path":67},"ContextMenu\u002FContextMenu.vue",[69,70,75],"pre",{"className":71,"code":72,"language":73,"meta":74,"style":74},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup lang=\"ts\">\nimport { Card, ContextMenu, DropdownItem } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CContextMenu>\n    \u003CCard separators>\n      \u003Ctemplate #header>\n        \u003Ch4>Right click anywhere\u003C\u002Fh4>\n      \u003C\u002Ftemplate>\n      \u003Cp class=\"text-color-light\">\n        Right click anywhere on this card to open a context menu with a set of actions. You can close it by clicking outside or by pressing the Escape key.\n      \u003C\u002Fp>\n    \u003C\u002FCard>\n\n    \u003Ctemplate #popout>\n      \u003Cdiv class=\"p-xxs\">\n        \u003CDropdownItem>New user\u003C\u002FDropdownItem>\n        \u003CDropdownItem>Update\u003C\u002FDropdownItem>\n        \u003CDropdownItem>Delete\u003C\u002FDropdownItem>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FContextMenu>\n\u003C\u002Ftemplate>\n","vue","",[52,76,77,113,151,161,168,178,189,203,220,242,252,273,279,288,298,303,317,338,357,375,393,402,411,421],{"__ignoreMap":74},[78,79,82,86,90,94,97,100,104,108,110],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sP76a","\u003C",[78,87,89],{"class":88},"sKpE2","script",[78,91,93],{"class":92},"sflEz"," setup",[78,95,96],{"class":92}," lang",[78,98,99],{"class":84},"=",[78,101,103],{"class":102},"sBR95","\"",[78,105,107],{"class":106},"sfmH-","ts",[78,109,103],{"class":102},[78,111,112],{"class":84},">\n",[78,114,116,119,122,125,128,131,133,136,139,142,145,148],{"class":80,"line":115},2,[78,117,118],{"class":88},"import",[78,120,121],{"class":84}," {",[78,123,124],{"class":92}," Card",[78,126,127],{"class":84},",",[78,129,130],{"class":92}," ContextMenu",[78,132,127],{"class":84},[78,134,135],{"class":92}," DropdownItem",[78,137,138],{"class":84}," }",[78,140,141],{"class":88}," from",[78,143,144],{"class":102}," '",[78,146,147],{"class":106},"@dolanske\u002Fvui",[78,149,150],{"class":102},"'\n",[78,152,154,157,159],{"class":80,"line":153},3,[78,155,156],{"class":84},"\u003C\u002F",[78,158,89],{"class":88},[78,160,112],{"class":84},[78,162,164],{"class":80,"line":163},4,[78,165,167],{"emptyLinePlaceholder":166},true,"\n",[78,169,171,173,176],{"class":80,"line":170},5,[78,172,85],{"class":84},[78,174,175],{"class":88},"template",[78,177,112],{"class":84},[78,179,181,184,187],{"class":80,"line":180},6,[78,182,183],{"class":84},"  \u003C",[78,185,186],{"class":88},"ContextMenu",[78,188,112],{"class":84},[78,190,192,195,198,201],{"class":80,"line":191},7,[78,193,194],{"class":84},"    \u003C",[78,196,197],{"class":88},"Card",[78,199,200],{"class":92}," separators",[78,202,112],{"class":84},[78,204,206,209,211,214,218],{"class":80,"line":205},8,[78,207,208],{"class":84},"      \u003C",[78,210,175],{"class":88},[78,212,213],{"class":84}," #",[78,215,217],{"class":216},"sRTv0","header",[78,219,112],{"class":84},[78,221,223,226,229,232,236,238,240],{"class":80,"line":222},9,[78,224,225],{"class":84},"        \u003C",[78,227,228],{"class":88},"h4",[78,230,231],{"class":84},">",[78,233,235],{"class":234},"sX1ls","Right click anywhere",[78,237,156],{"class":84},[78,239,228],{"class":88},[78,241,112],{"class":84},[78,243,245,248,250],{"class":80,"line":244},10,[78,246,247],{"class":84},"      \u003C\u002F",[78,249,175],{"class":88},[78,251,112],{"class":84},[78,253,255,257,259,262,264,266,269,271],{"class":80,"line":254},11,[78,256,208],{"class":84},[78,258,23],{"class":88},[78,260,261],{"class":92}," class",[78,263,99],{"class":84},[78,265,103],{"class":102},[78,267,268],{"class":106},"text-color-light",[78,270,103],{"class":102},[78,272,112],{"class":84},[78,274,276],{"class":80,"line":275},12,[78,277,278],{"class":234},"        Right click anywhere on this card to open a context menu with a set of actions. You can close it by clicking outside or by pressing the Escape key.\n",[78,280,282,284,286],{"class":80,"line":281},13,[78,283,247],{"class":84},[78,285,23],{"class":88},[78,287,112],{"class":84},[78,289,291,294,296],{"class":80,"line":290},14,[78,292,293],{"class":84},"    \u003C\u002F",[78,295,197],{"class":88},[78,297,112],{"class":84},[78,299,301],{"class":80,"line":300},15,[78,302,167],{"emptyLinePlaceholder":166},[78,304,306,308,310,312,315],{"class":80,"line":305},16,[78,307,194],{"class":84},[78,309,175],{"class":88},[78,311,213],{"class":84},[78,313,314],{"class":216},"popout",[78,316,112],{"class":84},[78,318,320,322,325,327,329,331,334,336],{"class":80,"line":319},17,[78,321,208],{"class":84},[78,323,324],{"class":88},"div",[78,326,261],{"class":92},[78,328,99],{"class":84},[78,330,103],{"class":102},[78,332,333],{"class":106},"p-xxs",[78,335,103],{"class":102},[78,337,112],{"class":84},[78,339,341,343,346,348,351,353,355],{"class":80,"line":340},18,[78,342,225],{"class":84},[78,344,345],{"class":88},"DropdownItem",[78,347,231],{"class":84},[78,349,350],{"class":234},"New user",[78,352,156],{"class":84},[78,354,345],{"class":88},[78,356,112],{"class":84},[78,358,360,362,364,366,369,371,373],{"class":80,"line":359},19,[78,361,225],{"class":84},[78,363,345],{"class":88},[78,365,231],{"class":84},[78,367,368],{"class":234},"Update",[78,370,156],{"class":84},[78,372,345],{"class":88},[78,374,112],{"class":84},[78,376,378,380,382,384,387,389,391],{"class":80,"line":377},20,[78,379,225],{"class":84},[78,381,345],{"class":88},[78,383,231],{"class":84},[78,385,386],{"class":234},"Delete",[78,388,156],{"class":84},[78,390,345],{"class":88},[78,392,112],{"class":84},[78,394,396,398,400],{"class":80,"line":395},21,[78,397,247],{"class":84},[78,399,324],{"class":88},[78,401,112],{"class":84},[78,403,405,407,409],{"class":80,"line":404},22,[78,406,293],{"class":84},[78,408,175],{"class":88},[78,410,112],{"class":84},[78,412,414,417,419],{"class":80,"line":413},23,[78,415,416],{"class":84},"  \u003C\u002F",[78,418,186],{"class":88},[78,420,112],{"class":84},[78,422,424,426,428],{"class":80,"line":423},24,[78,425,156],{"class":84},[78,427,175],{"class":88},[78,429,112],{"class":84},[431,432,434],"h3",{"id":433},"slots","Slots",[436,437,438,454],"table",{},[439,440,441],"thead",{},[442,443,444,448,451],"tr",{},[445,446,447],"th",{},"Name",[445,449,450],{},"Accepts",[445,452,453],{},"Description",[455,456,457,473],"tbody",{},[442,458,459,465,470],{},[460,461,462],"td",{},[52,463,464],{},"default",[460,466,467],{},[52,468,469],{},"any",[460,471,472],{},"The content area that listens for right-click events",[442,474,475,480,484],{},[460,476,477],{},[52,478,479],{},"menu",[460,481,482],{},[52,483,469],{},[460,485,486],{},"The content rendered inside the floating context menu popout",[488,489,490],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .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);}",{"title":74,"searchDepth":115,"depth":115,"links":492},[493],{"id":433,"depth":153,"text":434},"A context menu component that listens for right-click events on its content and displays a floating menu at the cursor's position. It uses the Popout component which does not come with any default styles.","md",{},"\u002Fdocs\u002Fcomponents\u002Fcontext-menu",{"title":14,"description":494},"docs\u002Fcomponents\u002Fcontext-menu","T5QbtCcy4Qj3du_L-0S01sPpOvjZyjuBwPskt6wdwPg",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":502},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882625]