[{"data":1,"prerenderedAt":831},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-copy-clipboard":12,"i-ph:code":829},{"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":823,"meta":824,"navigation":110,"path":825,"seo":826,"stem":827,"__hash__":828},"docs\u002Fdocs\u002Fcomponents\u002Fcopy-clipboard.md","Copy Clipboard",{"type":16,"value":17,"toc":817},"minimark",[18,22,26,197,202,336,341,394,464,468,471,813],[19,20,14],"h1",{"id":21},"copy-clipboard",[23,24,25],"p",{},"A component that provides a simple way to copy text to the clipboard with a confirmation tooltip. It uses the Clipboard API and provides a flexible way to customize the copy confirmation UI.",[27,28,30],"copy-clipboard-example",{"source-path":29},"CopyClipboard\u002FCopyClipboard.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Button, CopyClipboard } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCopyClipboard text=\"Hello world!\" confirm>\n    \u003CButton>\n      Copy Text\n    \u003C\u002FButton>\n  \u003C\u002FCopyClipboard>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,105,112,122,150,161,168,178,188],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,81,84,88,92],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Button",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," CopyClipboard",[41,79,80],{"class":47}," }",[41,82,83],{"class":51}," from",[41,85,87],{"class":86},"sBR95"," '",[41,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[41,93,94],{"class":86},"'\n",[41,96,98,101,103],{"class":43,"line":97},3,[41,99,100],{"class":47},"\u003C\u002F",[41,102,52],{"class":51},[41,104,59],{"class":47},[41,106,108],{"class":43,"line":107},4,[41,109,111],{"emptyLinePlaceholder":110},true,"\n",[41,113,115,117,120],{"class":43,"line":114},5,[41,116,48],{"class":47},[41,118,119],{"class":51},"template",[41,121,59],{"class":47},[41,123,125,128,131,134,137,140,143,145,148],{"class":43,"line":124},6,[41,126,127],{"class":47},"  \u003C",[41,129,130],{"class":51},"CopyClipboard",[41,132,133],{"class":55}," text",[41,135,136],{"class":47},"=",[41,138,139],{"class":86},"\"",[41,141,142],{"class":90},"Hello world!",[41,144,139],{"class":86},[41,146,147],{"class":55}," confirm",[41,149,59],{"class":47},[41,151,153,156,159],{"class":43,"line":152},7,[41,154,155],{"class":47},"    \u003C",[41,157,158],{"class":51},"Button",[41,160,59],{"class":47},[41,162,164],{"class":43,"line":163},8,[41,165,167],{"class":166},"sX1ls","      Copy Text\n",[41,169,171,174,176],{"class":43,"line":170},9,[41,172,173],{"class":47},"    \u003C\u002F",[41,175,158],{"class":51},[41,177,59],{"class":47},[41,179,181,184,186],{"class":43,"line":180},10,[41,182,183],{"class":47},"  \u003C\u002F",[41,185,130],{"class":51},[41,187,59],{"class":47},[41,189,191,193,195],{"class":43,"line":190},11,[41,192,100],{"class":47},[41,194,119],{"class":51},[41,196,59],{"class":47},[198,199,201],"h3",{"id":200},"props","Props",[203,204,205,221],"table",{},[206,207,208],"thead",{},[209,210,211,215,218],"tr",{},[212,213,214],"th",{},"Name",[212,216,217],{},"Default",[212,219,220],{},"Type",[222,223,224,245,267,287,311],"tbody",{},[209,225,226,232,235],{},[227,228,229],"td",{},[38,230,231],{},"text",[227,233,234],{},"-",[227,236,237,240,241,244],{},[38,238,239],{},"string"," ",[242,243],"br",{}," The text to copy to the clipboard",[209,246,247,252,257],{},[227,248,249],{},[38,250,251],{},"confirm",[227,253,254],{},[38,255,256],{},"false",[227,258,259,240,261,240,264,266],{},[38,260,239],{},[38,262,263],{},"boolean",[242,265],{}," Whether to show a confirmation tooltip. If set to string, uses it as the confirmation message",[209,268,269,274,279],{},[227,270,271],{},[38,272,273],{},"confirm-time",[227,275,276],{},[38,277,278],{},"1500",[227,280,281,240,284,286],{},[38,282,283],{},"number",[242,285],{}," How long the confirmation tooltip should be visible in milliseconds",[209,288,289,294,299],{},[227,290,291],{},[38,292,293],{},"confirm-placement",[227,295,296],{},[38,297,298],{},"top",[227,300,301,240,304,306,307,310],{},[38,302,303],{},"Placement",[242,305],{}," Position of the confirmation tooltip (from ",[38,308,309],{},"@floating-ui\u002Fvue"," library)",[209,312,313,318,323],{},[227,314,315],{},[38,316,317],{},"transition-name",[227,319,320],{},[38,321,322],{},"fade",[227,324,325,240,327,240,330,332,333,335],{},[38,326,239],{},[38,328,329],{},"none",[242,331],{}," Allows you to change or disable the vue transition for the confirmation tooltip. By default, a ",[38,334,322],{}," animation with direction depending on the placement is used.",[337,338,340],"h2",{"id":339},"slots","Slots",[203,342,343,357],{},[206,344,345],{},[209,346,347,349,352,354],{},[212,348,214],{},[212,350,351],{},"Accepts",[212,353,201],{},[212,355,356],{},"Description",[222,358,359,379],{},[209,360,361,366,371,376],{},[227,362,363],{},[38,364,365],{},"default",[227,367,368],{},[38,369,370],{},"any",[227,372,373],{},[38,374,375],{},"DefaultSlotProps",[227,377,378],{},"Main content of the copy button",[209,380,381,385,389,391],{},[227,382,383],{},[38,384,251],{},[227,386,387],{},[38,388,370],{},[227,390,234],{},[227,392,393],{},"Custom confirmation tooltip content",[31,395,399],{"className":396,"code":397,"language":398,"meta":36,"style":36},"language-ts shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","interface DefaultSlotProps {\n  \u002F\u002F Manually call the copying function\n  copy: () => void\n  \u002F\u002F Tracks whether the text has been copied\n  \u002F\u002F for the set amount of duration by confirm-time\n  copied: Ref\u003Cboolean>\n}\n","ts",[38,400,401,414,420,432,437,442,459],{"__ignoreMap":36},[41,402,403,407,411],{"class":43,"line":44},[41,404,406],{"class":405},"sCMWV","interface",[41,408,410],{"class":409},"sTIxS"," DefaultSlotProps",[41,412,413],{"class":47}," {\n",[41,415,416],{"class":43,"line":62},[41,417,419],{"class":418},"sR5Ys","  \u002F\u002F Manually call the copying function\n",[41,421,422,426,429],{"class":43,"line":97},[41,423,425],{"class":424},"sRTv0","  copy",[41,427,428],{"class":47},": () => ",[41,430,431],{"class":409},"void\n",[41,433,434],{"class":43,"line":107},[41,435,436],{"class":418},"  \u002F\u002F Tracks whether the text has been copied\n",[41,438,439],{"class":43,"line":114},[41,440,441],{"class":418},"  \u002F\u002F for the set amount of duration by confirm-time\n",[41,443,444,447,450,453,455,457],{"class":43,"line":124},[41,445,446],{"class":55},"  copied",[41,448,449],{"class":47},": ",[41,451,452],{"class":409},"Ref",[41,454,48],{"class":47},[41,456,263],{"class":409},[41,458,59],{"class":47},[41,460,461],{"class":43,"line":152},[41,462,463],{"class":47},"}\n",[198,465,467],{"id":466},"customized","Customized",[23,469,470],{},"Here's a heavily customized copy-clipboard using all the props",[472,473,474],"copy-clipboard-custom-example",{},[31,475,477],{"className":33,"code":476,"language":35,"meta":36,"style":36},"\u003Cscript setup>\nimport { Badge, Button, Card, CopyClipboard } from '@dolanske\u002Fvui'\n\nconst textToCopy = 'Hello, World!'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCopyClipboard\n    text=\"Hello world!\"\n    confirm\n    confirm-placement=\"bottom-end\"\n    :confirm-time=\"3500\"\n  >\n    \u003CButton>\n      Click me\n    \u003C\u002FButton>\n    \u003Ctemplate #confirm>\n      \u003CCard separators>\n        \u003Ctemplate #header>\n          \u003CBadge variant=\"accent\">\n            Copied\n          \u003C\u002FBadge>\n        \u003C\u002Ftemplate>\n        \u003Cp class=\"m-0\">\n          Lorem ipsum dolor sit amet.\n        \u003C\u002Fp>\n      \u003C\u002FCard>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCopyClipboard>\n\u003C\u002Ftemplate>\n",[38,478,479,489,521,525,543,551,555,563,570,584,589,603,618,624,633,639,648,662,676,691,714,720,730,740,761,767,776,786,795,804],{"__ignoreMap":36},[41,480,481,483,485,487],{"class":43,"line":44},[41,482,48],{"class":47},[41,484,52],{"class":51},[41,486,56],{"class":55},[41,488,59],{"class":47},[41,490,491,493,495,498,500,502,504,507,509,511,513,515,517,519],{"class":43,"line":62},[41,492,65],{"class":51},[41,494,68],{"class":47},[41,496,497],{"class":55}," Badge",[41,499,74],{"class":47},[41,501,71],{"class":55},[41,503,74],{"class":47},[41,505,506],{"class":55}," Card",[41,508,74],{"class":47},[41,510,77],{"class":55},[41,512,80],{"class":47},[41,514,83],{"class":51},[41,516,87],{"class":86},[41,518,91],{"class":90},[41,520,94],{"class":86},[41,522,523],{"class":43,"line":97},[41,524,111],{"emptyLinePlaceholder":110},[41,526,527,530,533,536,538,541],{"class":43,"line":107},[41,528,529],{"class":405},"const",[41,531,532],{"class":55}," textToCopy",[41,534,535],{"class":47}," =",[41,537,87],{"class":86},[41,539,540],{"class":90},"Hello, World!",[41,542,94],{"class":86},[41,544,545,547,549],{"class":43,"line":114},[41,546,100],{"class":47},[41,548,52],{"class":51},[41,550,59],{"class":47},[41,552,553],{"class":43,"line":124},[41,554,111],{"emptyLinePlaceholder":110},[41,556,557,559,561],{"class":43,"line":152},[41,558,48],{"class":47},[41,560,119],{"class":51},[41,562,59],{"class":47},[41,564,565,567],{"class":43,"line":163},[41,566,127],{"class":47},[41,568,569],{"class":51},"CopyClipboard\n",[41,571,572,575,577,579,581],{"class":43,"line":170},[41,573,574],{"class":55},"    text",[41,576,136],{"class":47},[41,578,139],{"class":86},[41,580,142],{"class":90},[41,582,583],{"class":86},"\"\n",[41,585,586],{"class":43,"line":180},[41,587,588],{"class":55},"    confirm\n",[41,590,591,594,596,598,601],{"class":43,"line":190},[41,592,593],{"class":55},"    confirm-placement",[41,595,136],{"class":47},[41,597,139],{"class":86},[41,599,600],{"class":90},"bottom-end",[41,602,583],{"class":86},[41,604,606,609,611,613,616],{"class":43,"line":605},12,[41,607,608],{"class":55},"    :confirm-time",[41,610,136],{"class":47},[41,612,139],{"class":86},[41,614,615],{"class":90},"3500",[41,617,583],{"class":86},[41,619,621],{"class":43,"line":620},13,[41,622,623],{"class":47},"  >\n",[41,625,627,629,631],{"class":43,"line":626},14,[41,628,155],{"class":47},[41,630,158],{"class":51},[41,632,59],{"class":47},[41,634,636],{"class":43,"line":635},15,[41,637,638],{"class":166},"      Click me\n",[41,640,642,644,646],{"class":43,"line":641},16,[41,643,173],{"class":47},[41,645,158],{"class":51},[41,647,59],{"class":47},[41,649,651,653,655,658,660],{"class":43,"line":650},17,[41,652,155],{"class":47},[41,654,119],{"class":51},[41,656,657],{"class":47}," #",[41,659,251],{"class":424},[41,661,59],{"class":47},[41,663,665,668,671,674],{"class":43,"line":664},18,[41,666,667],{"class":47},"      \u003C",[41,669,670],{"class":51},"Card",[41,672,673],{"class":55}," separators",[41,675,59],{"class":47},[41,677,679,682,684,686,689],{"class":43,"line":678},19,[41,680,681],{"class":47},"        \u003C",[41,683,119],{"class":51},[41,685,657],{"class":47},[41,687,688],{"class":424},"header",[41,690,59],{"class":47},[41,692,694,697,700,703,705,707,710,712],{"class":43,"line":693},20,[41,695,696],{"class":47},"          \u003C",[41,698,699],{"class":51},"Badge",[41,701,702],{"class":55}," variant",[41,704,136],{"class":47},[41,706,139],{"class":86},[41,708,709],{"class":90},"accent",[41,711,139],{"class":86},[41,713,59],{"class":47},[41,715,717],{"class":43,"line":716},21,[41,718,719],{"class":166},"            Copied\n",[41,721,723,726,728],{"class":43,"line":722},22,[41,724,725],{"class":47},"          \u003C\u002F",[41,727,699],{"class":51},[41,729,59],{"class":47},[41,731,733,736,738],{"class":43,"line":732},23,[41,734,735],{"class":47},"        \u003C\u002F",[41,737,119],{"class":51},[41,739,59],{"class":47},[41,741,743,745,747,750,752,754,757,759],{"class":43,"line":742},24,[41,744,681],{"class":47},[41,746,23],{"class":51},[41,748,749],{"class":55}," class",[41,751,136],{"class":47},[41,753,139],{"class":86},[41,755,756],{"class":90},"m-0",[41,758,139],{"class":86},[41,760,59],{"class":47},[41,762,764],{"class":43,"line":763},25,[41,765,766],{"class":166},"          Lorem ipsum dolor sit amet.\n",[41,768,770,772,774],{"class":43,"line":769},26,[41,771,735],{"class":47},[41,773,23],{"class":51},[41,775,59],{"class":47},[41,777,779,782,784],{"class":43,"line":778},27,[41,780,781],{"class":47},"      \u003C\u002F",[41,783,670],{"class":51},[41,785,59],{"class":47},[41,787,789,791,793],{"class":43,"line":788},28,[41,790,173],{"class":47},[41,792,119],{"class":51},[41,794,59],{"class":47},[41,796,798,800,802],{"class":43,"line":797},29,[41,799,183],{"class":47},[41,801,130],{"class":51},[41,803,59],{"class":47},[41,805,807,809,811],{"class":43,"line":806},30,[41,808,100],{"class":47},[41,810,119],{"class":51},[41,812,59],{"class":47},[814,815,816],"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 .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);}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sTIxS, html code.shiki .sTIxS{--shiki-dark:#5DA994;--shiki-light:#2E8F82;--shiki-default:#5DA994}html pre.shiki code .sR5Ys, html code.shiki .sR5Ys{--shiki-dark:#758575DD;--shiki-light:#A0ADA0;--shiki-default:#758575DD}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}",{"title":36,"searchDepth":62,"depth":62,"links":818},[819,820],{"id":200,"depth":97,"text":201},{"id":339,"depth":62,"text":340,"children":821},[822],{"id":466,"depth":97,"text":467},"md",{},"\u002Fdocs\u002Fcomponents\u002Fcopy-clipboard",{"title":14,"description":25},"docs\u002Fcomponents\u002Fcopy-clipboard","TANS9Pf7kMD8lGLCoIY8_217h3XSBfet4LFViSsyoUA",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":830},"\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>",1782200882639]