[{"data":1,"prerenderedAt":713},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-popout":12,"i-ph:code":711},{"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":25,"extension":706,"meta":707,"navigation":153,"path":45,"seo":708,"stem":709,"__hash__":710},"docs\u002Fdocs\u002Fcomponents\u002Fpopout.md","Popout",{"type":16,"value":17,"toc":701},"minimark",[18,22,26,60,433,437,631,635,662,666,697],[19,20,14],"h1",{"id":21},"popout",[23,24,25],"p",{},"A flexible popout component that can be used to create tooltips, dropdowns, or any other floating content. It uses the Floating UI library for positioning and provides smooth animations.",[27,28,29],"blockquote",{},[23,30,31,32,37,38,42,43,46,47,51,52,55,56,59],{},"Plese note: components using popout (",[33,34,36],"a",{"href":35},"\u002Fdocs\u002Fcomponents\u002Ftooltip","Tooltip",", ",[33,39,41],{"href":40},"\u002Fdocs\u002Fcomponents\u002Fdropdown","Dropdown"," & ",[33,44,14],{"href":45},"\u002Fdocs\u002Fcomponents\u002Fpopout",") cannot be styled using ",[48,49,50],"code",{},"scoped"," CSS in Vue SFC. However, you can just define a new ",[48,53,54],{},"\u003Cstyle>"," tag, style the popout inside and keep rest of your CSS scoped in a separate ",[48,57,58],{},"\u003Cstyle scoped>",".",[61,62,64],"popout-example",{"source-path":63},"Popout\u002FPopout.vue",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Button, Popout } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst isVisible = ref(false)\nconst anchorRef = ref(null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton @click=\"isVisible = !isVisible\">\n    Toggle Popout\n  \u003C\u002FButton>\n\n  \u003CPopout\n    :anchor=\"anchorRef\"\n    :visible=\"isVisible\"\n    placement=\"bottom\"\n    class=\"p-l\"\n    style=\"max-width: 256px\"\n    @click-outside=\"isVisible = false\"\n  >\n    \u003Ch3>Popout content\u003C\u002Fh3>\n    \u003Cp>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!\u003C\u002Fp>\n  \u003C\u002FPopout>\n\u003C\u002Ftemplate>\n","vue","",[48,72,73,93,128,148,155,180,199,209,214,224,249,256,266,271,279,295,310,325,340,355,370,376,397,415,424],{"__ignoreMap":70},[74,75,78,82,86,90],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"sP76a","\u003C",[74,83,85],{"class":84},"sKpE2","script",[74,87,89],{"class":88},"sflEz"," setup",[74,91,92],{"class":80},">\n",[74,94,96,99,102,105,108,111,114,117,121,125],{"class":76,"line":95},2,[74,97,98],{"class":84},"import",[74,100,101],{"class":80}," {",[74,103,104],{"class":88}," Button",[74,106,107],{"class":80},",",[74,109,110],{"class":88}," Popout",[74,112,113],{"class":80}," }",[74,115,116],{"class":84}," from",[74,118,120],{"class":119},"sBR95"," '",[74,122,124],{"class":123},"sfmH-","@dolanske\u002Fvui",[74,126,127],{"class":119},"'\n",[74,129,131,133,135,138,140,142,144,146],{"class":76,"line":130},3,[74,132,98],{"class":84},[74,134,101],{"class":80},[74,136,137],{"class":88}," ref",[74,139,113],{"class":80},[74,141,116],{"class":84},[74,143,120],{"class":119},[74,145,69],{"class":123},[74,147,127],{"class":119},[74,149,151],{"class":76,"line":150},4,[74,152,154],{"emptyLinePlaceholder":153},true,"\n",[74,156,158,162,165,168,171,174,177],{"class":76,"line":157},5,[74,159,161],{"class":160},"sCMWV","const",[74,163,164],{"class":88}," isVisible",[74,166,167],{"class":80}," =",[74,169,137],{"class":170},"sRTv0",[74,172,173],{"class":80},"(",[74,175,176],{"class":84},"false",[74,178,179],{"class":80},")\n",[74,181,183,185,188,190,192,194,197],{"class":76,"line":182},6,[74,184,161],{"class":160},[74,186,187],{"class":88}," anchorRef",[74,189,167],{"class":80},[74,191,137],{"class":170},[74,193,173],{"class":80},[74,195,196],{"class":160},"null",[74,198,179],{"class":80},[74,200,202,205,207],{"class":76,"line":201},7,[74,203,204],{"class":80},"\u003C\u002F",[74,206,85],{"class":84},[74,208,92],{"class":80},[74,210,212],{"class":76,"line":211},8,[74,213,154],{"emptyLinePlaceholder":153},[74,215,217,219,222],{"class":76,"line":216},9,[74,218,81],{"class":80},[74,220,221],{"class":84},"template",[74,223,92],{"class":80},[74,225,227,230,233,236,239,242,245,247],{"class":76,"line":226},10,[74,228,229],{"class":80},"  \u003C",[74,231,232],{"class":84},"Button",[74,234,235],{"class":88}," @click",[74,237,238],{"class":80},"=",[74,240,241],{"class":119},"\"",[74,243,244],{"class":123},"isVisible = !isVisible",[74,246,241],{"class":119},[74,248,92],{"class":80},[74,250,252],{"class":76,"line":251},11,[74,253,255],{"class":254},"sX1ls","    Toggle Popout\n",[74,257,259,262,264],{"class":76,"line":258},12,[74,260,261],{"class":80},"  \u003C\u002F",[74,263,232],{"class":84},[74,265,92],{"class":80},[74,267,269],{"class":76,"line":268},13,[74,270,154],{"emptyLinePlaceholder":153},[74,272,274,276],{"class":76,"line":273},14,[74,275,229],{"class":80},[74,277,278],{"class":84},"Popout\n",[74,280,282,285,287,289,292],{"class":76,"line":281},15,[74,283,284],{"class":88},"    :anchor",[74,286,238],{"class":80},[74,288,241],{"class":119},[74,290,291],{"class":123},"anchorRef",[74,293,294],{"class":119},"\"\n",[74,296,298,301,303,305,308],{"class":76,"line":297},16,[74,299,300],{"class":88},"    :visible",[74,302,238],{"class":80},[74,304,241],{"class":119},[74,306,307],{"class":123},"isVisible",[74,309,294],{"class":119},[74,311,313,316,318,320,323],{"class":76,"line":312},17,[74,314,315],{"class":88},"    placement",[74,317,238],{"class":80},[74,319,241],{"class":119},[74,321,322],{"class":123},"bottom",[74,324,294],{"class":119},[74,326,328,331,333,335,338],{"class":76,"line":327},18,[74,329,330],{"class":88},"    class",[74,332,238],{"class":80},[74,334,241],{"class":119},[74,336,337],{"class":123},"p-l",[74,339,294],{"class":119},[74,341,343,346,348,350,353],{"class":76,"line":342},19,[74,344,345],{"class":88},"    style",[74,347,238],{"class":80},[74,349,241],{"class":119},[74,351,352],{"class":123},"max-width: 256px",[74,354,294],{"class":119},[74,356,358,361,363,365,368],{"class":76,"line":357},20,[74,359,360],{"class":88},"    @click-outside",[74,362,238],{"class":80},[74,364,241],{"class":119},[74,366,367],{"class":123},"isVisible = false",[74,369,294],{"class":119},[74,371,373],{"class":76,"line":372},21,[74,374,375],{"class":80},"  >\n",[74,377,379,382,385,388,391,393,395],{"class":76,"line":378},22,[74,380,381],{"class":80},"    \u003C",[74,383,384],{"class":84},"h3",[74,386,387],{"class":80},">",[74,389,390],{"class":254},"Popout content",[74,392,204],{"class":80},[74,394,384],{"class":84},[74,396,92],{"class":80},[74,398,400,402,404,406,409,411,413],{"class":76,"line":399},23,[74,401,381],{"class":80},[74,403,23],{"class":84},[74,405,387],{"class":80},[74,407,408],{"class":254},"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!",[74,410,204],{"class":80},[74,412,23],{"class":84},[74,414,92],{"class":80},[74,416,418,420,422],{"class":76,"line":417},24,[74,419,261],{"class":80},[74,421,14],{"class":84},[74,423,92],{"class":80},[74,425,427,429,431],{"class":76,"line":426},25,[74,428,204],{"class":80},[74,430,221],{"class":84},[74,432,92],{"class":80},[384,434,436],{"id":435},"props","Props",[438,439,440,456],"table",{},[441,442,443],"thead",{},[444,445,446,450,453],"tr",{},[447,448,449],"th",{},"Name",[447,451,452],{},"Default",[447,454,455],{},"Type",[457,458,459,480,500,520,537,566,588,610],"tbody",{},[444,460,461,467,470],{},[462,463,464],"td",{},[48,465,466],{},"anchor",[462,468,469],{},"—",[462,471,472,475,476,479],{},[48,473,474],{},"HTMLElement"," ",[477,478],"br",{}," Reference to the HTML element the Popout is anchored to",[444,481,482,487,492],{},[462,483,484],{},[48,485,486],{},"placement",[462,488,489],{},[48,490,491],{},"top",[462,493,494,475,497,499],{},[48,495,496],{},"string",[477,498],{}," Position of the popout relative to the anchor",[444,501,502,507,512],{},[462,503,504],{},[48,505,506],{},"offset",[462,508,509],{},[48,510,511],{},"8",[462,513,514,475,517,519],{},[48,515,516],{},"number",[477,518],{}," Distance between the anchor and the popout in pixels",[444,521,522,527,529],{},[462,523,524],{},[48,525,526],{},"visible",[462,528,469],{},[462,530,531,475,534,536],{},[48,532,533],{},"boolean",[477,535],{}," Whether the popout is visible",[444,538,539,544,546],{},[462,540,541],{},[48,542,543],{},"transition-name",[462,545,469],{},[462,547,548,475,550,475,553,555,556,558,559,565],{},[48,549,496],{},[48,551,552],{},"none",[477,554],{}," Allows you to change or disable the Vue transition for the popout appear. By default, placement-based transition is used. Set to ",[48,557,552],{}," when using the ",[33,560,564],{"href":561,"rel":562},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transitions_API",[563],"nofollow","View Transitions API"," to prevent the default animation from conflicting with your view transition.",[444,567,568,573,578],{},[462,569,570],{},[48,571,572],{},"teleport",[462,574,575],{},[48,576,577],{},"true",[462,579,580,475,582,584,585],{},[48,581,533],{},[477,583],{}," Whether the popout is teleported to ",[48,586,587],{},"body",[444,589,590,595,600],{},[462,591,592],{},[48,593,594],{},"enter-delay",[462,596,597],{},[48,598,599],{},"0",[462,601,602,475,604,606,607,609],{},[48,603,516],{},[477,605],{}," Delay in milliseconds before the popout becomes visible after ",[48,608,526],{}," turns true",[444,611,612,617,621],{},[462,613,614],{},[48,615,616],{},"leave-delay",[462,618,619],{},[48,620,599],{},[462,622,623,475,625,627,628,630],{},[48,624,516],{},[477,626],{}," Delay in milliseconds before the popout hides after ",[48,629,526],{}," turns false",[384,632,634],{"id":633},"events","Events",[438,636,637,648],{},[441,638,639],{},[444,640,641,643,646],{},[447,642,449],{},[447,644,645],{},"Payload",[447,647,455],{},[457,649,650],{},[444,651,652,657,659],{},[462,653,654],{},[48,655,656],{},"clickOutside",[462,658,469],{},[462,660,661],{},"Called when clicking outside the popout",[384,663,665],{"id":664},"slots","Slots",[438,667,668,680],{},[441,669,670],{},[444,671,672,674,677],{},[447,673,449],{},[447,675,676],{},"Accepts",[447,678,679],{},"Description",[457,681,682],{},[444,683,684,689,694],{},[462,685,686],{},[48,687,688],{},"default",[462,690,691],{},[48,692,693],{},"any",[462,695,696],{},"The content inside the popout",[698,699,700],"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 .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}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":70,"searchDepth":95,"depth":95,"links":702},[703,704,705],{"id":435,"depth":130,"text":436},{"id":633,"depth":130,"text":634},{"id":664,"depth":130,"text":665},"md",{},{"title":14,"description":25},"docs\u002Fcomponents\u002Fpopout","T9klTHqR38uHW4GkP8RYAM3OXS3XQ9unVUqCMYTnlU4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":712},"\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>",1782200883129]