2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{u as A,t as S}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as q,o as b,c as f,r as _,l as n,g as c,h as v,j as T,n as B,e as I,k as s,H as a,w as l,a as o,Q as m}from"./chunks/framework.3f630664.js";let P=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((t,p)=>(p&=63,p<36?t+=p.toString(36):p<62?t+=(p-26).toString(36).toUpperCase():p>62?t+="-":t+="_",t),"");const H=["data-accordion-id"],x=q({__name:"FwbAccordion",props:{alwaysOpen:{type:Boolean,default:!1},openFirstItem:{type:Boolean,default:!0},flush:{type:Boolean,default:!1}},setup(r){const t=r,p=P();return A(p,{...t}),(y,E)=>(b(),f("div",{"data-accordion-id":n(p)},[_(y.$slots,"default")],8,H))}}),N="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900";function O(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>y[t.value].panels[p.value]),i=c(()=>Object.keys(y[t.value].panels[p.value]).length);return{contentClasses:c(()=>S(N,!e.value.isVisible&&"hidden",(e.value.order!==i.value-1||E.value.flush)&&"border-b-0",e.value.order===i.value-1&&"border-t-0",E.value.flush&&"border-x-0"))}}const d=q({__name:"FwbAccordionContent",setup(r){const t=v(!1),p=v();let y;return T(()=>{y=O(p).contentClasses,t.value=!0}),(E,e)=>(b(),f("div",{ref_key:"content",ref:p},[t.value?(b(),f("div",{key:0,class:B(n(y))},[_(E.$slots,"default")],2)):I("",!0)],512))}}),j="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",R="w-6 h-6 shrink-0";function U(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>E.value.panels[p.value]),i=c(()=>Object.keys(e.value).length),h=c(()=>e.value.order!==i.value-1),F=c(()=>h.value||E.value.flush&&e.value.order===i.value-1&&!e.value.isVisible),C=c(()=>S(j,e.value.isVisible&&"bg-gray-100 dark:bg-gray-800",e.value.order===0&&!E.value.flush&&"rounded-t-xl",e.value.order===0&&E.value.flush&&"border-t-0",F.value&&"border-b-0",E.value.flush&&"border-x-0")),D=c(()=>S(R,e.value.isVisible&&"rotate-180"));return{headerClasses:C,arrowClasses:D}}const L={class:"w-full"},M=s("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"},null,-1),J=[M],g=q({__name:"FwbAccordionHeader",setup(r){const t=v(!1),p=v(),y=c(()=>p.value.parentElement.parentElement.dataset.accordionId),E=c(()=>p.value.parentElement.dataset.panelId),{accordionsStates:e}=A(),i=c(()=>e[y.value]),h=c(()=>i.value.panels[E.value]);let F,C;function D(){const w=h.value.isVisible;for(const $ in i.value.panels){const k=i.value.panels[$];k.id!==E.value?k.isVisible=!1:k.isVisible=!w}}function V(){h.value.isVisible=!h.value.isVisible}function z(){if(i.value.alwaysOpen)return V();D()}return T(()=>{const w=U(p);F=w.headerClasses,C=w.arrowClasses,t.value=!0}),(w,$)=>(b(),f("div",{ref_key:"header",ref:p},[t.value?(b(),f("button",{key:0,type:"button",class:B(n(F)),onClick:z},[s("span",L,[_(w.$slots,"default")]),(b(),f("svg",{"data-accordion-icon":"",class:B(n(C)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},J,2))],2)):I("",!0)],512))}}),Q=["data-panel-id"],u=q({__name:"FwbAccordionPanel",setup(r){const{accordionsStates:t}=A(),p=P(),y=v(),E=c(()=>y.value?y.value.parentElement.dataset.accordionId:null),e=c(()=>t[E.value]);return T(()=>{var h,F;const i=(F=Object.keys((h=e==null?void 0:e.value)==null?void 0:h.panels))==null?void 0:F.length;e.value.panels[p]={id:p,order:i,isVisible:(e.value.openFirstItem&&i===0)??!1}}),(i,h)=>(b(),f("div",{ref_key:"panel",ref:y,"data-panel-id":n(p)},[E.value?_(i.$slots,"default",{key:0}):I("",!0)],8,Q))}}),Y={class:"vp-raw"},G=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),K=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),W=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),X={__name:"FwbAccordionExample",setup(r){return(t,p)=>(b(),f("div",Y,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[G]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[K]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[W]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ns=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),as=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ls={__name:"FwbAccordionExampleAlwaysOpen",setup(r){return(t,p)=>(b(),f("div",Z,[a(n(x),{"always-open":""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ss]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ns]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[as]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},ps=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ts=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),es=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),cs={__name:"FwbAccordionExampleFlush",setup(r){return(t,p)=>(b(),f("div",os,[a(n(x),{flush:""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ps]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ts]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[es]),_:1})]),_:1})]),_:1})]))}},rs={class:"vp-raw"},Es=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ys=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),is=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ds={__name:"FwbAccordionExampleStyledHeaders",setup(r){return(t,p)=>(b(),f("div",rs,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[Es]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),{class:"bg-pink-200 dark:bg-pink-900 dark:text-gray-50"},{default:l(()=>[o(" another header ")]),_:1}),a(n(d),null,{default:l(()=>[ys]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[is]),_:1})]),_:1})]),_:1})]))}},gs={class:"vp-raw"},us=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{href:"/docs/getting-started/introduction/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),bs=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),fs=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),hs={__name:"FwbAccordionExampleFirstItemClosed",setup(r){return(t,p)=>(b(),f("div",gs,[a(n(x),{"open-first-item":!1},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[us]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[bs]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[fs]),_:1})]),_:1})]),_:1})]))}},Fs=m("",6),ws=m("",3),ms=m("",3),vs=m("",3),As=m("",2),xs=m("",1),Ds=JSON.parse('{"title":"Vue Accordion - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/accordion.md","filePath":"components/accordion.md"}'),Cs={name:"components/accordion.md"},ks=Object.assign(Cs,{setup(r){return(t,p)=>(b(),f("div",null,[Fs,a(X),ws,a(ls),ms,a(cs),vs,a(ds),As,a(hs),xs]))}});export{Ds as __pageData,ks as default};
|