[{"data":1,"prerenderedAt":754},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-right":8,"i-ph:caret-left":10,"components-accordion":12,"i-ph:code":750,"i-ph:caret-down":752},{"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=\"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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\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>",{"id":13,"title":14,"body":15,"description":743,"extension":744,"meta":745,"navigation":110,"path":746,"seo":747,"stem":748,"__hash__":749},"docs\u002Fdocs\u002Fcomponents\u002Faccordion.md","Accordion",{"type":16,"value":17,"toc":736},"minimark",[18,22,32,201,206,305,309,347,351,404,407,414,485,489,492,732],[19,20,14],"h1",{"id":21},"accordion",[23,24,25,26,31],"p",{},"An accordion is an interactive heading that reveals an associated section of content when clicked. It can be grouped together with multiple accordions using the ",[27,28,30],"a",{"href":29},"\u002Fdocs\u002Fcomponents\u002Faccordion-group","AccordionGroup"," component.",[33,34,36],"accordion-example",{"source-path":35},"Accordion\u002FAccordion.vue",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Accordion } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAccordion label=\"About Vui\" card class=\"mb-xs\">\n    \u003Cp>Vui is a vu3 component library\u003C\u002Fp>\n  \u003C\u002FAccordion>\n\u003C\u002Ftemplate>\n","vue","",[44,45,46,66,95,105,112,122,161,182,192],"code",{"__ignoreMap":42},[47,48,51,55,59,63],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sP76a","\u003C",[47,56,58],{"class":57},"sKpE2","script",[47,60,62],{"class":61},"sflEz"," setup",[47,64,65],{"class":53},">\n",[47,67,69,72,75,78,81,84,88,92],{"class":49,"line":68},2,[47,70,71],{"class":57},"import",[47,73,74],{"class":53}," {",[47,76,77],{"class":61}," Accordion",[47,79,80],{"class":53}," }",[47,82,83],{"class":57}," from",[47,85,87],{"class":86},"sBR95"," '",[47,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[47,93,94],{"class":86},"'\n",[47,96,98,101,103],{"class":49,"line":97},3,[47,99,100],{"class":53},"\u003C\u002F",[47,102,58],{"class":57},[47,104,65],{"class":53},[47,106,108],{"class":49,"line":107},4,[47,109,111],{"emptyLinePlaceholder":110},true,"\n",[47,113,115,117,120],{"class":49,"line":114},5,[47,116,54],{"class":53},[47,118,119],{"class":57},"template",[47,121,65],{"class":53},[47,123,125,128,130,133,136,139,142,144,147,150,152,154,157,159],{"class":49,"line":124},6,[47,126,127],{"class":53},"  \u003C",[47,129,14],{"class":57},[47,131,132],{"class":61}," label",[47,134,135],{"class":53},"=",[47,137,138],{"class":86},"\"",[47,140,141],{"class":90},"About Vui",[47,143,138],{"class":86},[47,145,146],{"class":61}," card",[47,148,149],{"class":61}," class",[47,151,135],{"class":53},[47,153,138],{"class":86},[47,155,156],{"class":90},"mb-xs",[47,158,138],{"class":86},[47,160,65],{"class":53},[47,162,164,167,169,172,176,178,180],{"class":49,"line":163},7,[47,165,166],{"class":53},"    \u003C",[47,168,23],{"class":57},[47,170,171],{"class":53},">",[47,173,175],{"class":174},"sX1ls","Vui is a vu3 component library",[47,177,100],{"class":53},[47,179,23],{"class":57},[47,181,65],{"class":53},[47,183,185,188,190],{"class":49,"line":184},8,[47,186,187],{"class":53},"  \u003C\u002F",[47,189,14],{"class":57},[47,191,65],{"class":53},[47,193,195,197,199],{"class":49,"line":194},9,[47,196,100],{"class":53},[47,198,119],{"class":57},[47,200,65],{"class":53},[202,203,205],"h3",{"id":204},"props","Props",[207,208,209,225],"table",{},[210,211,212],"thead",{},[213,214,215,219,222],"tr",{},[216,217,218],"th",{},"Name",[216,220,221],{},"Default",[216,223,224],{},"Type",[226,227,228,249,266,286],"tbody",{},[213,229,230,236,239],{},[231,232,233],"td",{},[44,234,235],{},"open",[231,237,238],{},"—",[231,240,241,244,245,248],{},[44,242,243],{},"boolean"," ",[246,247],"br",{}," Controls whether the accordion is open from the outside",[213,250,251,256,258],{},[231,252,253],{},[44,254,255],{},"label",[231,257,238],{},[231,259,260,244,263,265],{},[44,261,262],{},"string",[246,264],{}," If provided, the accordion will display the text in the header",[213,267,268,273,275],{},[231,269,270],{},[44,271,272],{},"card",[231,274,238],{},[231,276,277,244,279,281,282],{},[44,278,243],{},[246,280],{}," If set as true, the accordion will look like the ",[27,283,285],{"href":284},"\u002Fdocs\u002Fcomponents\u002Fcard","card component",[213,287,288,293,298],{},[231,289,290],{},[44,291,292],{},"unstyled",[231,294,295],{},[44,296,297],{},"false",[231,299,300,244,302,304],{},[44,301,243],{},[246,303],{}," Removes default styling and allows fully custom trigger\u002Fcontent styling",[202,306,308],{"id":307},"events","Events",[207,310,311,322],{},[210,312,313],{},[213,314,315,317,320],{},[216,316,218],{},[216,318,319],{},"Payload",[216,321,224],{},[226,323,324,335],{},[213,325,326,330,332],{},[231,327,328],{},[44,329,235],{},[231,331,238],{},[231,333,334],{},"Called whenever the accordion opens",[213,336,337,342,344],{},[231,338,339],{},[44,340,341],{},"close",[231,343,238],{},[231,345,346],{},"Called when the accordion closes",[202,348,350],{"id":349},"slots","Slots",[207,352,353,365],{},[210,354,355],{},[213,356,357,359,362],{},[216,358,218],{},[216,360,361],{},"Accepts",[216,363,364],{},"Description",[226,366,367,382],{},[213,368,369,374,379],{},[231,370,371],{},[44,372,373],{},"default",[231,375,376],{},[44,377,378],{},"any",[231,380,381],{},"The content inside the accordion",[213,383,384,389,393],{},[231,385,386],{},[44,387,388],{},"trigger",[231,390,391],{},[44,392,378],{},[231,394,395,396,398,399,403],{},"Allows user to define custom header which opens the accordion when clicked. It will replace the ",[44,397,255],{}," prop if provided. This slot also exposes all the properties defined in the ",[27,400,402],{"href":401},"#exposes","Exposes"," section",[202,405,402],{"id":406},"exposes",[23,408,409,410,413],{},"When queried via ",[44,411,412],{},"useTemplateRef",", this component exposes",[207,415,416,427],{},[210,417,418],{},[213,419,420,422,424],{},[216,421,218],{},[216,423,224],{},[216,425,426],{},"Usage",[226,428,429,443,456,470],{},[213,430,431,435,440],{},[231,432,433],{},[44,434,235],{},[231,436,437],{},[44,438,439],{},"method",[231,441,442],{},"When called, the accordion will open",[213,444,445,449,453],{},[231,446,447],{},[44,448,341],{},[231,450,451],{},[44,452,439],{},[231,454,455],{},"When called, the accordion will close",[213,457,458,463,467],{},[231,459,460],{},[44,461,462],{},"toggle",[231,464,465],{},[44,466,439],{},[231,468,469],{},"Toggles between opened and closed state",[213,471,472,477,482],{},[231,473,474],{},[44,475,476],{},"isOpen",[231,478,479],{},[44,480,481],{},"Ref\u003Cboolean",[231,483,484],{},"Ref which tracks whether the boolean is open or not",[202,486,488],{"id":487},"examples","Examples",[23,490,491],{},"The following example shows the implementation of an unstyled element with a custom header.",[493,494,495],"accordion-custom-header-example",{},[37,496,498],{"className":39,"code":497,"language":41,"meta":42,"style":42},"\u003Cscript setup>\nimport { Accordion, Button } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAccordion unstyled>\n    \u003Ctemplate #trigger=\"{ isOpen, toggle }\">\n      \u003CButton @click=\"toggle\">\n        Details\n        \u003CIconCaretUp v-if=\"isOpen\" \u002F>\n        \u003CIconCaretDown v-else \u002F>\n      \u003C\u002FButton>\n    \u003C\u002Ftemplate>\n    \u003Cp class=\"m-0\">\n      Vui provides a lot of customization.\n    \u003C\u002Fp>\n  \u003C\u002FAccordion>\n\u003C\u002Ftemplate>\n",[44,499,500,510,534,542,546,554,565,597,618,623,646,659,669,679,699,705,714,723],{"__ignoreMap":42},[47,501,502,504,506,508],{"class":49,"line":50},[47,503,54],{"class":53},[47,505,58],{"class":57},[47,507,62],{"class":61},[47,509,65],{"class":53},[47,511,512,514,516,518,521,524,526,528,530,532],{"class":49,"line":68},[47,513,71],{"class":57},[47,515,74],{"class":53},[47,517,77],{"class":61},[47,519,520],{"class":53},",",[47,522,523],{"class":61}," Button",[47,525,80],{"class":53},[47,527,83],{"class":57},[47,529,87],{"class":86},[47,531,91],{"class":90},[47,533,94],{"class":86},[47,535,536,538,540],{"class":49,"line":97},[47,537,100],{"class":53},[47,539,58],{"class":57},[47,541,65],{"class":53},[47,543,544],{"class":49,"line":107},[47,545,111],{"emptyLinePlaceholder":110},[47,547,548,550,552],{"class":49,"line":114},[47,549,54],{"class":53},[47,551,119],{"class":57},[47,553,65],{"class":53},[47,555,556,558,560,563],{"class":49,"line":124},[47,557,127],{"class":53},[47,559,14],{"class":57},[47,561,562],{"class":61}," unstyled",[47,564,65],{"class":53},[47,566,567,569,571,574,577,579,581,584,586,589,591,593,595],{"class":49,"line":163},[47,568,166],{"class":53},[47,570,119],{"class":57},[47,572,573],{"class":53}," #",[47,575,388],{"class":576},"sRTv0",[47,578,135],{"class":53},[47,580,138],{"class":53},[47,582,583],{"class":53},"{ ",[47,585,476],{"class":61},[47,587,588],{"class":53},", ",[47,590,462],{"class":61},[47,592,80],{"class":53},[47,594,138],{"class":53},[47,596,65],{"class":53},[47,598,599,602,605,608,610,612,614,616],{"class":49,"line":184},[47,600,601],{"class":53},"      \u003C",[47,603,604],{"class":57},"Button",[47,606,607],{"class":61}," @click",[47,609,135],{"class":53},[47,611,138],{"class":86},[47,613,462],{"class":90},[47,615,138],{"class":86},[47,617,65],{"class":53},[47,619,620],{"class":49,"line":194},[47,621,622],{"class":174},"        Details\n",[47,624,626,629,632,635,637,639,641,643],{"class":49,"line":625},10,[47,627,628],{"class":53},"        \u003C",[47,630,631],{"class":57},"IconCaretUp",[47,633,634],{"class":61}," v-if",[47,636,135],{"class":53},[47,638,138],{"class":86},[47,640,476],{"class":90},[47,642,138],{"class":86},[47,644,645],{"class":53}," \u002F>\n",[47,647,649,651,654,657],{"class":49,"line":648},11,[47,650,628],{"class":53},[47,652,653],{"class":57},"IconCaretDown",[47,655,656],{"class":61}," v-else",[47,658,645],{"class":53},[47,660,662,665,667],{"class":49,"line":661},12,[47,663,664],{"class":53},"      \u003C\u002F",[47,666,604],{"class":57},[47,668,65],{"class":53},[47,670,672,675,677],{"class":49,"line":671},13,[47,673,674],{"class":53},"    \u003C\u002F",[47,676,119],{"class":57},[47,678,65],{"class":53},[47,680,682,684,686,688,690,692,695,697],{"class":49,"line":681},14,[47,683,166],{"class":53},[47,685,23],{"class":57},[47,687,149],{"class":61},[47,689,135],{"class":53},[47,691,138],{"class":86},[47,693,694],{"class":90},"m-0",[47,696,138],{"class":86},[47,698,65],{"class":53},[47,700,702],{"class":49,"line":701},15,[47,703,704],{"class":174},"      Vui provides a lot of customization.\n",[47,706,708,710,712],{"class":49,"line":707},16,[47,709,674],{"class":53},[47,711,23],{"class":57},[47,713,65],{"class":53},[47,715,717,719,721],{"class":49,"line":716},17,[47,718,187],{"class":53},[47,720,14],{"class":57},[47,722,65],{"class":53},[47,724,726,728,730],{"class":49,"line":725},18,[47,727,100],{"class":53},[47,729,119],{"class":57},[47,731,65],{"class":53},[733,734,735],"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 .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}",{"title":42,"searchDepth":68,"depth":68,"links":737},[738,739,740,741,742],{"id":204,"depth":97,"text":205},{"id":307,"depth":97,"text":308},{"id":349,"depth":97,"text":350},{"id":406,"depth":97,"text":402},{"id":487,"depth":97,"text":488},"An accordion is an interactive heading that reveals an associated section of content when clicked. It can be grouped together with multiple accordions using the AccordionGroup component.","md",{},"\u002Fdocs\u002Fcomponents\u002Faccordion",{"title":14,"description":743},"docs\u002Fcomponents\u002Faccordion","xDc9PERFbI4dxO70ZayTWi_0xg8FpLGtTpHydu-lzas",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":751},"\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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":753},"\u003Cpath fill=\"currentColor\" d=\"m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32\"\u002F>",1782200881951]