accordions.3a59847e.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. import{c as q,_ as g,I as k}from"./icon-code.6d7a3662.js";import{d as w,o as b,c as f,a as e,u as L,e as _,f as a,j as o,g as u,L as i,w as d,W as y,l as C,K as m,X as p}from"./index.c685e846.js";import{I as $}from"./icon-bell.2e21c889.js";const j={key:0,width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},O=e("path",{opacity:"0.5",d:"M7.142 18.9706C5.18539 18.8995 3.99998 18.6568 3.17157 17.8284C2 16.6569 2 14.7712 2 11C2 7.22876 2 5.34315 3.17157 4.17157C4.34315 3 6.22876 3 10 3H14C17.7712 3 19.6569 3 20.8284 4.17157C22 5.34315 22 7.22876 22 11C22 14.7712 22 16.6569 20.8284 17.8284C20.0203 18.6366 18.8723 18.8873 17 18.965",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),A=e("path",{d:"M9.94955 16.0503C10.8806 15.1192 11.3461 14.6537 11.9209 14.6234C11.9735 14.6206 12.0261 14.6206 12.0787 14.6234C12.6535 14.6537 13.119 15.1192 14.0501 16.0503C16.0759 18.0761 17.0888 19.089 16.8053 19.963C16.7809 20.0381 16.7506 20.1112 16.7147 20.1815C16.2973 21 14.8648 21 11.9998 21C9.13482 21 7.70233 21 7.28489 20.1815C7.249 20.1112 7.21873 20.0381 7.19436 19.963C6.91078 19.089 7.92371 18.0761 9.94955 16.0503Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),V=[O,A],B={key:1,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},I=e("path",{opacity:"0.5",d:"M14 3H10C6.22876 3 4.34315 3 3.17157 4.17157C2 5.34315 2 7.22876 2 11C2 14.7712 2 16.6569 3.17157 17.8284C4.34315 19 6.22876 19 10 19H14C17.7712 19 19.6569 19 20.8284 17.8284C22 16.6569 22 14.7712 22 11C22 7.22876 22 5.34315 20.8284 4.17157C19.6569 3 17.7712 3 14 3Z",fill:"currentColor"},null,-1),G=e("path",{d:"M9.94955 16.0503C10.8806 15.1192 11.3461 14.6537 11.9209 14.6234C11.9735 14.6206 12.0261 14.6206 12.0787 14.6234C12.6535 14.6537 13.119 15.1192 14.0501 16.0503C16.0759 18.0761 17.0888 19.089 16.8053 19.963C16.7809 20.0381 16.7506 20.1112 16.7147 20.1815C16.2973 21 14.8648 21 11.9998 21C9.13482 21 7.70233 21 7.28489 20.1815C7.249 20.1112 7.21873 20.0381 7.19436 19.963C6.91078 19.089 7.92371 18.0761 9.94955 16.0503Z",fill:"currentColor"},null,-1),M=[I,G],H=w({__name:"icon-airplay",props:{fill:{type:Boolean,default:!1}},setup(x){return(v,h)=>x.fill?(b(),f("svg",B,M)):(b(),f("svg",j,V))}}),Z={key:0,width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg"},U=e("path",{d:"M11.2296 27.4907C13.5704 28.7191 14.7408 29.3333 15.9998 29.3333V16L3.51719 9.43018C3.49882 9.45971 3.48077 9.48953 3.46303 9.51965C2.6665 10.8723 2.6665 12.5555 2.6665 15.922V16.078C2.6665 19.4444 2.6665 21.1277 3.46303 22.4803C4.25956 23.833 5.69401 24.5858 8.5629 26.0913L11.2296 27.4907Z",fill:"currentColor"},null,-1),N=e("path",{opacity:"0.7",d:"M23.4367 5.90853L20.77 4.50913C18.4292 3.28071 17.2588 2.6665 15.9997 2.6665C14.7407 2.6665 13.5703 3.28071 11.2295 4.50912L8.56279 5.90853C5.75778 7.38053 4.32404 8.13292 3.51709 9.43002L15.9997 15.9998L28.4824 9.43002C27.6754 8.13292 26.2417 7.38054 23.4367 5.90853Z",fill:"currentColor"},null,-1),S=e("path",{opacity:"0.5",d:"M28.5368 9.51965C28.5191 9.48953 28.501 9.45971 28.4826 9.43018L16 16V29.3333C17.259 29.3333 18.4294 28.7191 20.7703 27.4907L23.4369 26.0913C26.3058 24.5858 27.7403 23.833 28.5368 22.4803C29.3333 21.1277 29.3333 19.4444 29.3333 16.078V15.922C29.3333 12.5555 29.3333 10.8723 28.5368 9.51965Z",fill:"currentColor"},null,-1),F=[U,N,S],D={key:1,width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},W=e("path",{d:"M15.5777 3.38197L17.5777 4.43152C19.7294 5.56066 20.8052 6.12523 21.4026 7.13974C22 8.15425 22 9.41667 22 11.9415V12.0585C22 14.5833 22 15.8458 21.4026 16.8603C20.8052 17.8748 19.7294 18.4393 17.5777 19.5685L15.5777 20.618C13.8221 21.5393 12.9443 22 12 22C11.0557 22 10.1779 21.5393 8.42229 20.618L6.42229 19.5685C4.27063 18.4393 3.19479 17.8748 2.5974 16.8603C2 15.8458 2 14.5833 2 12.0585V11.9415C2 9.41667 2 8.15425 2.5974 7.13974C3.19479 6.12523 4.27063 5.56066 6.42229 4.43152L8.42229 3.38197C10.1779 2.46066 11.0557 2 12 2C12.9443 2 13.8221 2.46066 15.5777 3.38197Z",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),z=e("path",{opacity:"0.5",d:"M21 7.5L12 12M12 12L3 7.5M12 12V21.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round"},null,-1),E=[W,z],K=w({__name:"icon-box",props:{fill:{type:Boolean,default:!1}},setup(x){return(v,h)=>x.fill?(b(),f("svg",Z,F)):(b(),f("svg",D,E))}}),P={key:0,width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},T=e("path",{d:"M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z",stroke:"currentColor","stroke-width":"1.5"},null,-1),X=e("path",{opacity:"0.5",d:"M2 8.75C1.58579 8.75 1.25 9.08579 1.25 9.5C1.25 9.91421 1.58579 10.25 2 10.25V8.75ZM22 10.25C22.4142 10.25 22.75 9.91421 22.75 9.5C22.75 9.08579 22.4142 8.75 22 8.75V10.25ZM8.25 21C8.25 21.4142 8.58579 21.75 9 21.75C9.41421 21.75 9.75 21.4142 9.75 21H8.25ZM9.75 10C9.75 9.58579 9.41421 9.25 9 9.25C8.58579 9.25 8.25 9.58579 8.25 10L9.75 10ZM2 10.25H22V8.75H2V10.25ZM9.75 21L9.75 10L8.25 10L8.25 21H9.75Z",fill:"currentColor"},null,-1),J=[T,X],Q={key:1,width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},R=e("path",{opacity:"0.5",d:"M11.9999 2C16.714 2 19.071 2 20.5355 3.46447C21.6157 4.54472 21.8991 6.11064 21.9735 8.75L21.9999 9.5H9.74992H8.99992H2.02637V8.75C2.10072 6.11064 2.38413 4.54472 3.46439 3.46447C4.92885 2 7.28588 2 11.9999 2Z",fill:"currentColor"},null,-1),Y=e("path",{opacity:"0.7",d:"M2 12C2 16.714 2 19.0711 3.46447 20.5355C4.47468 21.5458 5.90962 21.8591 8.25 21.9563L9 22V10.25V9.5H2.02645L2.00339 10.25C2 10.7944 2 11.3766 2 12Z",fill:"currentColor"},null,-1),ee=e("path",{d:"M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C11.1815 22 9.68405 22 9 21.9923V21L9 10.25V9.5L22 9.5L21.9966 10.25C22 10.7944 22 11.3766 22 12Z",fill:"currentColor"},null,-1),te=[R,Y,ee],ae=w({__name:"icon-layout",props:{fill:{type:Boolean,default:!1}},setup(x){return(v,h)=>x.fill?(b(),f("svg",Q,te)):(b(),f("svg",P,J))}}),ie=e("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[e("li",null,[e("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),e("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[e("span",null,"Accordians")])],-1),oe={class:"pt-5 space-y-8"},re={class:"panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},se={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},le=e("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),de=e("a",{href:"https://www.npmjs.com/package/vue-height-collapsible",target:"_blank",class:"block hover:underline"},"https://www.npmjs.com/package/vue-height-collapsible",-1),ne={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},ce={class:"panel"},ue={class:"flex items-center justify-between mb-5"},pe=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),be={class:"flex items-center"},me={class:"mb-5"},ve={class:"space-y-2 font-semibold"},he={class:"border border-[#d3d3d3] rounded dark:border-[#1b2e4b]"},fe=e("div",{class:"space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "),e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ")],-1),xe={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},ge=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("ul",{class:"space-y-1"},[e("li",null,[e("a",{href:"javascript:;"},"Apple")]),e("li",null,[e("a",{href:"javascript:;"},"Orange")]),e("li",null,[e("a",{href:"javascript:;"},"Banana")]),e("li",null,[e("a",{href:"javascript:;"},"list")])])],-1),ke={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},_e=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. "),e("button",{type:"button",class:"btn btn-primary mt-4"},"Accept")],-1),ye=e("pre",null,`<!-- basic -->
  2. <div class="space-y-2 font-semibold">
  3. <div class="border border-[#d3d3d3] rounded dark:border-[#1b2e4b]">
  4. <button
  5. type="button"
  6. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  7. :class="{ '!text-primary': accordians1 === 1 }"
  8. @click="accordians1 === 1 ? (accordians1 = null) : (accordians1 = 1)"
  9. >
  10. Collapsible Group Item #1
  11. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians1 === 1 }">
  12. <svg> ... </svg>
  13. </div>
  14. </button>
  15. <vue-collapsible :isOpen="accordians1 === 1">
  16. <div class="space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  17. <p>
  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  19. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  20. </p>
  21. <p>
  22. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  23. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  24. </p>
  25. </div>
  26. </vue-collapsible>
  27. </div>
  28. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  29. <button
  30. type="button"
  31. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  32. :class="{ '!text-primary': accordians1 === 2 }"
  33. @click="accordians1 === 2 ? (accordians1 = null) : (accordians1 = 2)"
  34. >
  35. Collapsible Group Item #2
  36. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians1 === 2 }">
  37. <svg> ... </svg>
  38. </div>
  39. </button>
  40. <vue-collapsible :isOpen="accordians1 === 2">
  41. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  42. <ul class="space-y-1">
  43. <li><a href="javascript:;">Apple</a></li>
  44. <li><a href="javascript:;">Orange</a></li>
  45. <li><a href="javascript:;">Banana</a></li>
  46. <li><a href="javascript:;">list</a></li>
  47. </ul>
  48. </div>
  49. </vue-collapsible>
  50. </div>
  51. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  52. <button
  53. type="button"
  54. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  55. :class="{ '!text-primary': accordians1 === 3 }"
  56. @click="accordians1 === 3 ? (accordians1 = null) : (accordians1 = 3)"
  57. >
  58. Collapsible Group Item #3
  59. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians1 === 3 }">
  60. <svg> ... </svg>
  61. </div>
  62. </button>
  63. <vue-collapsible :isOpen="accordians1 === 3">
  64. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  65. <p>
  66. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
  67. nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
  68. beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
  69. you probably haven't heard of them accusamus labore sustainable VHS.
  70. </p>
  71. <button type="button" class="btn btn-primary mt-4">Accept</button>
  72. </div>
  73. </vue-collapsible>
  74. </div>
  75. </div>
  76. <!-- script -->
  77. <script lang="ts" setup>
  78. import { ref } from 'vue';
  79. import VueCollapsible from 'vue-height-collapsible/vue3';
  80. const accordians1: any = ref(1);
  81. <\/script>
  82. `,-1),Ce={class:"panel"},we={class:"flex items-center justify-between mb-5"},qe=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Without Spacing",-1),Le={class:"flex items-center"},$e={class:"mb-5"},je={class:"border border-[#d3d3d3] dark:border-[#3b3f5c] rounded font-semibold"},Oe={class:"border-b border-[#d3d3d3] dark:border-[#3b3f5c]"},Ae=e("div",{class:"space-y-2 p-4 text-white-dark text-[13px]"},[e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "),e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ")],-1),Ve={class:"border-b border-[#d3d3d3] dark:border-[#3b3f5c]"},Be=e("div",{class:"p-4 text-[13px]"},[e("ul",{class:"space-y-1"},[e("li",null,[e("a",{href:"javascript:;"},"Apple")]),e("li",null,[e("a",{href:"javascript:;"},"Orange")]),e("li",null,[e("a",{href:"javascript:;"},"Banana")]),e("li",null,[e("a",{href:"javascript:;"},"list")])])],-1),Ie=e("div",{class:"p-4 text-[13px]"},[e("p",null," Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. "),e("button",{type:"button",class:"btn btn-primary mt-4"},"Accept")],-1),Ge=e("pre",null,`<!-- without spacing -->
  83. <div class="border border-[#d3d3d3] dark:border-[#3b3f5c] rounded font-semibold">
  84. <div class="border-b border-[#d3d3d3] dark:border-[#3b3f5c]">
  85. <button
  86. type="button"
  87. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  88. :class="{ '!text-primary': accordians2 === 1 }"
  89. @click="accordians2 === 1 ? (accordians2 = null) : (accordians2 = 1)"
  90. >
  91. Collapsible Group Item #1
  92. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians2 === 1 }">
  93. <svg> ... </svg>
  94. </div>
  95. </button>
  96. <vue-collapsible :isOpen="accordians2 === 1">
  97. <div class="space-y-2 p-4 text-white-dark text-[13px]">
  98. <p>
  99. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  100. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  101. </p>
  102. <p>
  103. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  104. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  105. </p>
  106. </div>
  107. </vue-collapsible>
  108. </div>
  109. <div class="border-b border-[#d3d3d3] dark:border-[#3b3f5c]">
  110. <button
  111. type="button"
  112. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  113. :class="{ '!text-primary': accordians2 === 2 }"
  114. @click="accordians2 === 2 ? (accordians2 = null) : (accordians2 = 2)"
  115. >
  116. Collapsible Group Item #2
  117. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians2 === 2 }">
  118. <svg> ... </svg>
  119. </div>
  120. </button>
  121. <vue-collapsible :isOpen="accordians2 === 2">
  122. <div class="p-4 text-[13px]">
  123. <ul class="space-y-1">
  124. <li><a href="javascript:;">Apple</a></li>
  125. <li><a href="javascript:;">Orange</a></li>
  126. <li><a href="javascript:;">Banana</a></li>
  127. <li><a href="javascript:;">list</a></li>
  128. </ul>
  129. </div>
  130. </vue-collapsible>
  131. </div>
  132. <div>
  133. <button
  134. type="button"
  135. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  136. :class="{ '!text-primary': accordians2 === 3 }"
  137. @click="accordians2 === 3 ? (accordians2 = null) : (accordians2 = 3)"
  138. >
  139. Collapsible Group Item #3
  140. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians2 === 3 }">
  141. <svg> ... </svg>
  142. </div>
  143. </button>
  144. <vue-collapsible :isOpen="accordians2 === 3">
  145. <div class="p-4 text-[13px]">
  146. <p>
  147. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
  148. nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
  149. beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
  150. you probably haven't heard of them accusamus labore sustainable VHS.
  151. </p>
  152. <button type="button" class="btn btn-primary mt-4">Accept</button>
  153. </div>
  154. </vue-collapsible>
  155. </div>
  156. </div>
  157. <!-- script -->
  158. <script lang="ts" setup>
  159. import { ref } from 'vue';
  160. import VueCollapsible from 'vue-height-collapsible/vue3';
  161. const accordians2: any = ref(1);
  162. <\/script>
  163. `,-1),Me={class:"panel"},He={class:"flex items-center justify-between mb-5"},Ze=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"Icons",-1),Ue={class:"flex items-center"},Ne={class:"mb-5"},Se={class:"space-y-2 font-semibold"},Fe={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},De=e("div",{class:"space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "),e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ")],-1),We={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},ze=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("ul",{class:"space-y-1"},[e("li",null,[e("a",{href:"javascript:;"},"Apple")]),e("li",null,[e("a",{href:"javascript:;"},"Orange")]),e("li",null,[e("a",{href:"javascript:;"},"Banana")]),e("li",null,[e("a",{href:"javascript:;"},"list")])])],-1),Ee={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},Ke=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. "),e("button",{type:"button",class:"btn btn-primary mt-4"},"Accept")],-1),Pe=e("pre",null,`<!-- icons -->
  164. <div class="space-y-2 font-semibold">
  165. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  166. <button
  167. type="button"
  168. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  169. :class="{ '!text-primary': accordians3 === 1 }"
  170. @click="accordians3 === 1 ? (accordians3 = null) : (accordians3 = 1)"
  171. >
  172. <svg> ... </svg>
  173. Collapsible Group Item #1
  174. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians3 === 1 }">
  175. <svg> ... </svg>
  176. </div>
  177. </button>
  178. <vue-collapsible :isOpen="accordians3 === 1">
  179. <div class="space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  180. <p>
  181. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  182. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  183. </p>
  184. <p>
  185. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  186. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  187. </p>
  188. </div>
  189. </vue-collapsible>
  190. </div>
  191. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  192. <button
  193. type="button"
  194. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  195. :class="{ '!text-primary': accordians3 === 2 }"
  196. @click="accordians3 === 2 ? (accordians3 = null) : (accordians3 = 2)"
  197. >
  198. <svg> ... </svg>
  199. Collapsible Group Item #2
  200. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians3 === 2 }">
  201. <svg> ... </svg>
  202. </div>
  203. </button>
  204. <vue-collapsible :isOpen="accordians3 === 2">
  205. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  206. <ul class="space-y-1">
  207. <li><a href="javascript:;">Apple</a></li>
  208. <li><a href="javascript:;">Orange</a></li>
  209. <li><a href="javascript:;">Banana</a></li>
  210. <li><a href="javascript:;">list</a></li>
  211. </ul>
  212. </div>
  213. </vue-collapsible>
  214. </div>
  215. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  216. <button
  217. type="button"
  218. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  219. :class="{ '!text-primary': accordians3 === 3 }"
  220. @click="accordians3 === 3 ? (accordians3 = null) : (accordians3 = 3)"
  221. >
  222. <svg> ... </svg>
  223. Collapsible Group Item #3
  224. <div class="ltr:ml-auto rtl:mr-auto" :class="{ 'rotate-180': accordians3 === 3 }">
  225. <svg> ... </svg>
  226. </div>
  227. </button>
  228. <vue-collapsible :isOpen="accordians3 === 3">
  229. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  230. <p>
  231. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
  232. nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
  233. beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
  234. you probably haven't heard of them accusamus labore sustainable VHS.
  235. </p>
  236. <button type="button" class="btn btn-primary mt-4">Accept</button>
  237. </div>
  238. </vue-collapsible>
  239. </div>
  240. </div>
  241. <!-- script -->
  242. <script lang="ts" setup>
  243. import { ref } from 'vue';
  244. import VueCollapsible from 'vue-height-collapsible/vue3';
  245. const accordians3: any = ref(1);
  246. <\/script>
  247. `,-1),Te={class:"panel"},Xe={class:"flex items-center justify-between mb-5"},Je=e("h5",{class:"font-semibold text-lg dark:text-white-light"},"No Icons",-1),Qe={class:"flex items-center"},Re={class:"mb-5"},Ye={class:"space-y-2 font-semibold"},et={class:"border border-[#d3d3d3] rounded dark:border-[#1b2e4b]"},tt=e("div",{class:"space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "),e("p",null," Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ")],-1),at={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},it=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("ul",{class:"space-y-1"},[e("li",null,[e("a",{href:"javascript:;"},"Apple")]),e("li",null,[e("a",{href:"javascript:;"},"Orange")]),e("li",null,[e("a",{href:"javascript:;"},"Banana")]),e("li",null,[e("a",{href:"javascript:;"},"list")])])],-1),ot={class:"border border-[#d3d3d3] dark:border-[#1b2e4b] rounded"},rt=e("div",{class:"p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]"},[e("p",null," Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. "),e("button",{type:"button",class:"btn btn-primary mt-4"},"Accept")],-1),st=e("pre",null,`<!-- no icon -->
  248. <div class="space-y-2 font-semibold">
  249. <div class="border border-[#d3d3d3] rounded dark:border-[#1b2e4b]">
  250. <button
  251. type="button"
  252. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  253. :class="{ '!text-primary': accordians4 === 1 }"
  254. @click="accordians4 === 1 ? (accordians4 = null) : (accordians4 = 1)"
  255. >
  256. Collapsible Group Item #1
  257. </button>
  258. <vue-collapsible :isOpen="accordians4 === 1">
  259. <div class="space-y-2 p-4 text-white-dark text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  260. <p>
  261. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  262. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  263. </p>
  264. <p>
  265. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  266. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  267. </p>
  268. </div>
  269. </vue-collapsible>
  270. </div>
  271. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  272. <button
  273. type="button"
  274. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  275. :class="{ '!text-primary': accordians4 === 2 }"
  276. @click="accordians4 === 2 ? (accordians4 = null) : (accordians4 = 2)"
  277. >
  278. Collapsible Group Item #2
  279. </button>
  280. <vue-collapsible :isOpen="accordians4 === 2">
  281. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  282. <ul class="space-y-1">
  283. <li><a href="javascript:;">Apple</a></li>
  284. <li><a href="javascript:;">Orange</a></li>
  285. <li><a href="javascript:;">Banana</a></li>
  286. <li><a href="javascript:;">list</a></li>
  287. </ul>
  288. </div>
  289. </vue-collapsible>
  290. </div>
  291. <div class="border border-[#d3d3d3] dark:border-[#1b2e4b] rounded">
  292. <button
  293. type="button"
  294. class="p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]"
  295. :class="{ '!text-primary': accordians4 === 3 }"
  296. @click="accordians4 === 3 ? (accordians4 = null) : (accordians4 = 3)"
  297. >
  298. Collapsible Group Item #3
  299. </button>
  300. <vue-collapsible :isOpen="accordians4 === 3">
  301. <div class="p-4 text-[13px] border-t border-[#d3d3d3] dark:border-[#1b2e4b]">
  302. <p>
  303. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
  304. nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft
  305. beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
  306. you probably haven't heard of them accusamus labore sustainable VHS.
  307. </p>
  308. <button type="button" class="btn btn-primary mt-4">Accept</button>
  309. </div>
  310. </vue-collapsible>
  311. </div>
  312. </div>
  313. <!-- script -->
  314. <script lang="ts" setup>
  315. import { ref } from 'vue';
  316. import VueCollapsible from 'vue-height-collapsible/vue3';
  317. const accordians4: any = ref(1);
  318. <\/script>
  319. `,-1),ut=w({__name:"accordions",setup(x){L({title:"Accordions"});const{codeArr:v,toggleCode:h}=q(),r=_(1),s=_(1),l=_(1),n=_(1);return(lt,t)=>(b(),f("div",null,[ie,e("div",oe,[e("div",re,[e("div",se,[a($)]),le,de]),e("div",ne,[e("div",ce,[e("div",ue,[pe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[0]||(t[0]=c=>o(h)("code1"))},[e("span",be,[a(k,{class:"me-2"}),u(" Code ")])])]),e("div",me,[e("div",ve,[e("div",he,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":r.value===1}]),onClick:t[1]||(t[1]=c=>r.value===1?r.value=null:r.value=1)},[u(" Collapsible Group Item #1 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":r.value===1}])},[a(m)],2)],2),a(o(p),{isOpen:r.value===1},{default:d(()=>[fe]),_:1},8,["isOpen"])]),e("div",xe,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":r.value===2}]),onClick:t[2]||(t[2]=c=>r.value===2?r.value=null:r.value=2)},[u(" Collapsible Group Item #2 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":r.value===2}])},[a(m)],2)],2),a(o(p),{isOpen:r.value===2},{default:d(()=>[ge]),_:1},8,["isOpen"])]),e("div",ke,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":r.value===3}]),onClick:t[3]||(t[3]=c=>r.value===3?r.value=null:r.value=3)},[u(" Collapsible Group Item #3 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":r.value===3}])},[a(m)],2)],2),a(o(p),{isOpen:r.value===3},{default:d(()=>[_e]),_:1},8,["isOpen"])])])]),o(v).includes("code1")?(b(),y(g,{key:0},{default:d(()=>[ye]),_:1})):C("",!0)]),e("div",Ce,[e("div",we,[qe,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[4]||(t[4]=c=>o(h)("code2"))},[e("span",Le,[a(k,{class:"me-2"}),u(" Code ")])])]),e("div",$e,[e("div",je,[e("div",Oe,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":s.value===1}]),onClick:t[5]||(t[5]=c=>s.value===1?s.value=null:s.value=1)},[u(" Collapsible Group Item #1 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":s.value===1}])},[a(m)],2)],2),a(o(p),{isOpen:s.value===1},{default:d(()=>[Ae]),_:1},8,["isOpen"])]),e("div",Ve,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":s.value===2}]),onClick:t[6]||(t[6]=c=>s.value===2?s.value=null:s.value=2)},[u(" Collapsible Group Item #2 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":s.value===2}])},[a(m)],2)],2),a(o(p),{isOpen:s.value===2},{default:d(()=>[Be]),_:1},8,["isOpen"])]),e("div",null,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":s.value===3}]),onClick:t[7]||(t[7]=c=>s.value===3?s.value=null:s.value=3)},[u(" Collapsible Group Item #3 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":s.value===3}])},[a(m)],2)],2),a(o(p),{isOpen:s.value===3},{default:d(()=>[Ie]),_:1},8,["isOpen"])])])]),o(v).includes("code2")?(b(),y(g,{key:0},{default:d(()=>[Ge]),_:1})):C("",!0)]),e("div",Me,[e("div",He,[Ze,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[8]||(t[8]=c=>o(h)("code3"))},[e("span",Ue,[a(k,{class:"me-2"}),u(" Code ")])])]),e("div",Ne,[e("div",Se,[e("div",Fe,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":l.value===1}]),onClick:t[9]||(t[9]=c=>l.value===1?l.value=null:l.value=1)},[a(H,{class:"ltr:mr-2 rtl:ml-2 text-primary shrink-0"}),u(" Collapsible Group Item #1 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":l.value===1}])},[a(m)],2)],2),a(o(p),{isOpen:l.value===1},{default:d(()=>[De]),_:1},8,["isOpen"])]),e("div",We,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":l.value===2}]),onClick:t[10]||(t[10]=c=>l.value===2?l.value=null:l.value=2)},[a(K,{class:"ltr:mr-2 rtl:ml-2 text-primary shrink-0"}),u(" Collapsible Group Item #2 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":l.value===2}])},[a(m)],2)],2),a(o(p),{isOpen:l.value===2},{default:d(()=>[ze]),_:1},8,["isOpen"])]),e("div",Ee,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":l.value===3}]),onClick:t[11]||(t[11]=c=>l.value===3?l.value=null:l.value=3)},[a(ae,{class:"ltr:mr-2 rtl:ml-2 text-primary shrink-0"}),u(" Collapsible Group Item #3 "),e("div",{class:i(["ltr:ml-auto rtl:mr-auto",{"rotate-180":l.value===3}])},[a(m)],2)],2),a(o(p),{isOpen:l.value===3},{default:d(()=>[Ke]),_:1},8,["isOpen"])])])]),o(v).includes("code3")?(b(),y(g,{key:0},{default:d(()=>[Pe]),_:1})):C("",!0)]),e("div",Te,[e("div",Xe,[Je,e("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:t[12]||(t[12]=c=>o(h)("code4"))},[e("span",Qe,[a(k,{class:"me-2"}),u(" Code ")])])]),e("div",Re,[e("div",Ye,[e("div",et,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":n.value===1}]),onClick:t[13]||(t[13]=c=>n.value===1?n.value=null:n.value=1)}," Collapsible Group Item #1 ",2),a(o(p),{isOpen:n.value===1},{default:d(()=>[tt]),_:1},8,["isOpen"])]),e("div",at,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":n.value===2}]),onClick:t[14]||(t[14]=c=>n.value===2?n.value=null:n.value=2)}," Collapsible Group Item #2 ",2),a(o(p),{isOpen:n.value===2},{default:d(()=>[it]),_:1},8,["isOpen"])]),e("div",ot,[e("button",{type:"button",class:i(["p-4 w-full flex items-center text-white-dark dark:bg-[#1b2e4b]",{"!text-primary":n.value===3}]),onClick:t[15]||(t[15]=c=>n.value===3?n.value=null:n.value=3)}," Collapsible Group Item #3 ",2),a(o(p),{isOpen:n.value===3},{default:d(()=>[rt]),_:1},8,["isOpen"])])])]),o(v).includes("code4")?(b(),y(g,{key:0},{default:d(()=>[st]),_:1})):C("",!0)])])])]))}});export{ut as default};