2 lines
9.3 KiB
JavaScript
2 lines
9.3 KiB
JavaScript
import{c as f}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as v,U as $,g as b,o as r,c as E,r as w,L as U,_ as q,M as C,n as F,Y as G,k as p,H as s,w as a,l as n,a as l,Q as A}from"./chunks/framework.3f630664.js";const P="relative border-gray-200 dark:border-gray-700",N="border-l",W="flex",D=v({__name:"FwbTimeline",props:{horizontal:{type:Boolean,default:!1}},setup(e){const o=e;$("horizontal",o.horizontal);const t=b(()=>f(P,o.horizontal?W:N));return(c,h)=>(r(),E("ol",U({class:t.value},c.$attrs),[w(c.$slots,"default")],16))}}),j={},R={class:"font-normal mb-4 text-base text-gray-500 dark:text-gray-400"};function O(e,o){return r(),E("p",R,[w(e.$slots,"default")])}const i=q(j,[["render",O]]),y=v({__name:"FwbTimelineContent",setup(e){const o=C("horizontal"),t=b(()=>f(o?"mt-3 sm:pr-8":""));return(c,h)=>(r(),E("div",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Y="mb-10",J="mb-6 sm:mb-0 relative",L="ml-6",d=v({__name:"FwbTimelineItem",setup(e){const o=C("horizontal"),t=b(()=>f(Y,o?J:L));return(c,h)=>(r(),E("li",{class:F(t.value)},[w(c.$slots,"default")],2))}}),Q="h-0.5 w-full bg-gray-200 dark:bg-gray-700 sm:flex",u=v({__name:"FwbTimelinePoint",setup(e){const o=G(),t=b(()=>!!o.default),c=C("horizontal"),h=b(()=>f(c?"flex items-center":"")),T=b(()=>f(Q,{"sm:hidden hidden":!c})),k=b(()=>{const _="absolute rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",B="mt-1.5 w-3 h-3 bg-gray-200",x="mt-1.5 w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",V="w-3 h-3 bg-gray-200",S="w-6 h-6 -left-3 flex justify-center items-center bg-blue-200 ring-8 ring-white dark:ring-gray-900",H=!c&&!t.value,z=!c&&t.value,I=c&&!t.value,M=c&&t.value;return f(_,{[B]:H,[x]:z,[V]:I,[S]:M})});return(_,B)=>(r(),E("div",{class:F(h.value)},[p("div",{class:F(k.value)},[w(_.$slots,"default")],2),p("div",{class:F(T.value)},null,2)],2))}}),K={},X={class:"font-normal leading-none mb-1 text-gray-400 dark:text-gray-500 text-sm"};function Z(e,o){return r(),E("time",X,[w(e.$slots,"default")])}const m=q(K,[["render",Z]]),ss={},ns={class:"font-semibold text-gray-900 dark:text-white text-lg"};function as(e,o){return r(),E("h3",ns,[w(e.$slots,"default")])}const g=q(ss,[["render",as]]),ls={class:"vp-raw"},ps={__name:"FwbTimelineExample",setup(e){return(o,t)=>(r(),E("div",ls,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u)),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2020 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},es=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ts=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),cs=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),rs={__name:"FwbTimelineExampleWithIcons",setup(e){return(o,t)=>(r(),E("div",os,[s(n(D),null,{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[es]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ts]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[cs]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},Es={class:"vp-raw"},is=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ys=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),ds=p("svg",{"aria-hidden":"true",class:"w-3 h-3 text-blue-600 dark:text-blue-400",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[p("path",{"clip-rule":"evenodd",d:"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z","fill-rule":"evenodd"})],-1),us={__name:"FwbTimelineExampleHorizontal",setup(e){return(o,t)=>(r(),E("div",Es,[s(n(D),{horizontal:""},{default:a(()=>[s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[is]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ys]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1}),s(n(d),null,{default:a(()=>[s(n(u),null,{default:a(()=>[ds]),_:1}),s(n(y),null,{default:a(()=>[s(n(m),null,{default:a(()=>[l(" February 2022 ")]),_:1}),s(n(g),null,{default:a(()=>[l(" Application UI code in Tailwind CSS ")]),_:1}),s(n(i),null,{default:a(()=>[l(" Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages. ")]),_:1})]),_:1})]),_:1})]),_:1})]))}},ms=p("h1",{id:"vue-timeline-flowbite",tabindex:"-1"},[l("Vue Timeline - Flowbite "),p("a",{class:"header-anchor",href:"#vue-timeline-flowbite","aria-label":'Permalink to "Vue Timeline - Flowbite"'},"")],-1),gs=p("h2",{id:"default-timeline-usage",tabindex:"-1"},[l("Default timeline usage "),p("a",{class:"header-anchor",href:"#default-timeline-usage","aria-label":'Permalink to "Default timeline usage"'},"")],-1),bs=A("",3),ws=A("",3),fs=A("",1),_s=JSON.parse('{"title":"Vue Timeline - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/timeline.md","filePath":"components/timeline.md"}'),Fs={name:"components/timeline.md"},qs=Object.assign(Fs,{setup(e){return(o,t)=>(r(),E("div",null,[ms,gs,s(ps),bs,s(rs),ws,s(us),fs]))}});export{_s as __pageData,qs as default};
|