vue-timeline-chart/dist/vue-timeline-chart.umd.cjs

Vue3 Timeline Chart component

(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C["vue-timeline-chart"]={},C.Vue))})(this,(function(C,e){"use strict";const Me=n=>{const r=e.ref(0),s=e.ref(0);let o;function c(f){o=new ResizeObserver(([a])=>{const h=a?.contentRect;h&&([r.value,s.value]=[h.width,h.height])}),o.observe(f)}return e.watch(n,f=>{if(f){c(f);return}o?.disconnect()}),{width:r,height:s}},L=function(n){return`${n}`.trim().padStart(2,"0")};function g(n){const r=Object.prototype.toString.call(n);return n instanceof Date||typeof n=="object"&&r==="[object Date]"?new n.constructor(+n):typeof n=="number"||r==="[object Number]"||typeof n=="string"||r==="[object String]"?new Date(n):new Date(NaN)}function _(n,r){return n instanceof Date?new n.constructor(r):new Date(r)}function Se(n,r){const s=g(n);return isNaN(r)?_(n,NaN):(r&&s.setDate(s.getDate()+r),s)}function ie(n,r){const s=+g(n);return _(n,s+r)}const be=6048e5,Ve=6e4,Te=36e5;function Oe(n,r){return ie(n,r*Te)}let Ee={};function j(){return Ee}function E(n,r){const s=j(),o=r?.weekStartsOn??r?.locale?.options?.weekStartsOn??s.weekStartsOn??s.locale?.options?.weekStartsOn??0,c=g(n),f=c.getDay(),a=(f<o?7:0)+f-o;return c.setDate(c.getDate()-a),c.setHours(0,0,0,0),c}function Z(n){const r=g(n);return r.setHours(0,0,0,0),r}function xe(n,r){return ie(n,r*Ve)}function Ce(n,r){const s=r*7;return Se(n,s)}function Pe(n,r){const s=g(n.start),o=g(n.end);let c=+s>+o;const f=c?+s:+o,a=c?o:s;a.setHours(0,0,0,0);let h=1;const u=[];for(;+a<=f;)u.push(g(a)),a.setDate(a.getDate()+h),a.setHours(0,0,0,0);return c?u.reverse():u}function Be(n,r){const s=g(n.start),o=g(n.end);let c=+s>+o;const f=c?+s:+o;let a=c?o:s;a.setMinutes(0,0,0);let h=1;const u=[];for(;+a<=f;)u.push(g(a)),a=Oe(a,h);return c?u.reverse():u}function $e(n){const r=g(n);return r.setSeconds(0,0),r}function ae(n,r){const s=$e(g(n.start)),o=g(n.end);let c=+s>+o;const f=c?+s:+o;let a=c?o:s,h=1;const u=[];for(;+a<=f;)u.push(g(a)),a=xe(a,h);return c?u.reverse():u}function _e(n,r){const s=g(n.start),o=g(n.end);let c=+s>+o;const f=c?+s:+o,a=c?o:s;a.setHours(0,0,0,0),a.setDate(1);let h=1;const u=[];for(;+a<=f;)u.push(g(a)),a.setMonth(a.getMonth()+h);return c?u.reverse():u}function Ie(n,r){const s=g(n.start),o=g(n.end);let c=+s>+o;const f=E(c?o:s,r),a=E(c?s:o,r);f.setHours(15),a.setHours(15);const h=+a.getTime();let u=f,p=r?.step??1;if(!p)return[];p<0&&(p=-p,c=!c);const w=[];for(;+u<=h;)u.setHours(0),w.push(g(u)),u=Ce(u,p),u.setHours(15);return c?w.reverse():w}function We(n){const r=g(n);return r.setDate(1),r.setHours(0,0,0,0),r}function G(n){const r=g(n),s=_(n,0);return s.setFullYear(r.getFullYear(),0,1),s.setHours(0,0,0,0),s}function Xe(n,r){const s=g(n.start),o=g(n.end);let c=+s>+o;const f=c?+s:+o,a=c?o:s;a.setHours(0,0,0,0),a.setMonth(0,1);let h=1;const u=[];for(;+a<=f;)u.push(g(a)),a.setFullYear(a.getFullYear()+h);return c?u.reverse():u}function Le(n,r){const s=g(n),o=s.getFullYear(),c=j(),f=r?.firstWeekContainsDate??r?.locale?.options?.firstWeekContainsDate??c.firstWeekContainsDate??c.locale?.options?.firstWeekContainsDate??1,a=_(n,0);a.setFullYear(o+1,0,f),a.setHours(0,0,0,0);const h=E(a,r),u=_(n,0);u.setFullYear(o,0,f),u.setHours(0,0,0,0);const p=E(u,r);return s.getTime()>=h.getTime()?o+1:s.getTime()>=p.getTime()?o:o-1}function Ne(n,r){const s=j(),o=r?.firstWeekContainsDate??r?.locale?.options?.firstWeekContainsDate??s.firstWeekContainsDate??s.locale?.options?.firstWeekContainsDate??1,c=Le(n,r),f=_(n,0);return f.setFullYear(c,0,o),f.setHours(0,0,0,0),E(f,r)}function Ye(n,r){const s=g(n),o=+E(s,r)-+Ne(s,r);return Math.round(o/be)+1}const W={ms:1,seconds:1e3,minutes:1e3*60,hours:1e3*60*60,days:1e3*60*60*24,weeks:1e3*60*60*24*7,months:1e3*60*60*24*7*4,years:1e3*60*60*24*7*4*12},le=n=>Object.keys(W).indexOf(n),Fe=(n,r,s,o,c,f)=>{const a=e.ref(s.value),h=e.ref(o.value),u=e.computed(()=>(c.value?.length?c.value:[{unit:"seconds",steps:[.1,1,2,5,10]},{unit:"minutes",steps:[.25,.5,1,2,5,10]},{unit:"hours",steps:[.25,.5,1,2,4,6,12]},{unit:"days",steps:[1]},{unit:"weeks",steps:[1]},{unit:"months",steps:[1,2]},{unit:"years",steps:[1,5,10,25,50,100,250,500,1e3]}]).toSorted((m,k)=>le(m.unit)-le(k.unit)).flatMap(m=>m.steps.toSorted((k,D)=>k-D).map(k=>({unit:m.unit,step:k}))));e.watch(s,()=>{a.value=s.value}),e.watch(o,()=>{h.value=o.value});const p=e.computed(()=>{let[m]=u.value;for(const[k,D]of u.value.entries()){const M=a.value/(W[D.unit]*(D.step??1));if(M>=1&&M<=h.value){m=D;break}if(M<1){m=u.value[k-1]??D;break}M>=1&&k===u.value.length-1&&(m=D)}return{unit:m.unit,step:m.step??1}});function w(m){switch(p.value.unit){case"years":return m.getFullYear()%p.value.step===0;case"months":return m.getMonth()%p.value.step===0;case"weeks":return Ye(m,{weekStartsOn:f.value})%p.value.step===0;case"days":return m.getDate()%p.value.step===0;case"hours":return m.getHours()%p.value.step===0;case"minutes":return m.getMinutes()%p.value.step===0;case"seconds":return m.getSeconds()%p.value.step===0;case"ms":return m.getMilliseconds()%p.value.step===0}}const y=e.computed(()=>{const m=[],k=n.value,D=r.value;let M=[];switch(p.value.unit){case"ms":M=Array.from({length:D-k},(b,V)=>new Date(k+V));break;case"seconds":M=ae({start:k,end:D}).flatMap(b=>{const V=[];for(let T=0;T<60;T++)V.push(new Date(b.valueOf()+T*W.seconds));return V});break;case"minutes":M=ae({start:k,end:D});break;case"hours":M=Be({start:k,end:D});break;case"days":M=Pe({start:k,end:D});break;case"weeks":M=Ie({start:k,end:D},{weekStartsOn:f.value});break;case"months":M=_e({start:k,end:D});break;case"years":M=Xe({start:k,end:D});break}for(const b of M)if(!(p.value.step>1&&!w(b))&&(m.push(b.valueOf()),p.value.step<1))for(let V=1;V<1/p.value.step;V++)m.push(b.valueOf()+V*p.value.step*W[p.value.unit]);return m});return{scale:p,baseDividers:W,visibleTimestamps:y}};function q(n){return e.getCurrentScope()?(e.onScopeDispose(n),!0):!1}function N(n){return typeof n=="function"?n():e.unref(n)}const ze=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const He=n=>n!=null,Ae=Object.prototype.toString,Re=n=>Ae.call(n)==="[object Object]",je=()=>{};function Ze(n){return e.getCurrentInstance()}function Ge(n,r=!0,s){Ze()?e.onMounted(n,s):r?n():e.nextTick(n)}const K=ze?window:void 0;function I(n){var r;const s=N(n);return(r=s?.$el)!=null?r:s}function ce(...n){let r,s,o,c;if(typeof n[0]=="string"||Array.isArray(n[0])?([s,o,c]=n,r=K):[r,s,o,c]=n,!r)return je;Array.isArray(s)||(s=[s]),Array.isArray(o)||(o=[o]);const f=[],a=()=>{f.forEach(w=>w()),f.length=0},h=(w,y,m,k)=>(w.addEventListener(y,m,k),()=>w.removeEventListener(y,m,k)),u=e.watch(()=>[I(r),N(c)],([w,y])=>{if(a(),!w)return;const m=Re(y)?{...y}:y;f.push(...s.flatMap(k=>o.map(D=>h(w,k,D,m))))},{immediate:!0,flush:"post"}),p=()=>{u(),a()};return q(p),p}function qe(){const n=e.ref(!1),r=e.getCurrentInstance();return r&&e.onMounted(()=>{n.value=!0},r),n}function ue(n){const r=qe();return e.computed(()=>(r.value,!!n()))}function Ke(n,r,s={}){const{window:o=K,...c}=s;let f;const a=ue(()=>o&&"MutationObserver"in o),h=()=>{f&&(f.disconnect(),f=void 0)},u=e.computed(()=>{const m=N(n),k=(Array.isArray(m)?m:[m]).map(I).filter(He);return new Set(k)}),p=e.watch(()=>u.value,m=>{h(),a.value&&m.size&&(f=new MutationObserver(r),m.forEach(k=>f.observe(k,c)))},{immediate:!0,flush:"post"}),w=()=>f?.takeRecords(),y=()=>{p(),h()};return q(y),{isSupported:a,stop:y,takeRecords:w}}function Ue(n,r,s={}){const{window:o=K,...c}=s;let f;const a=ue(()=>o&&"ResizeObserver"in o),h=()=>{f&&(f.disconnect(),f=void 0)},u=e.computed(()=>{const y=N(n);return Array.isArray(y)?y.map(m=>I(m)):[I(y)]}),p=e.watch(u,y=>{if(h(),a.value&&o){f=new ResizeObserver(r);for(const m of y)m&&f.observe(m,c)}},{immediate:!0,flush:"post"}),w=()=>{h(),p()};return q(w),{isSupported:a,stop:w}}function Je(n,r={}){const{reset:s=!0,windowResize:o=!0,windowScroll:c=!0,immediate:f=!0,updateTiming:a="sync"}=r,h=e.ref(0),u=e.ref(0),p=e.ref(0),w=e.ref(0),y=e.ref(0),m=e.ref(0),k=e.ref(0),D=e.ref(0);function M(){const V=I(n);if(!V){s&&(h.value=0,u.value=0,p.value=0,w.value=0,y.value=0,m.value=0,k.value=0,D.value=0);return}const T=V.getBoundingClientRect();h.value=T.height,u.value=T.bottom,p.value=T.left,w.value=T.right,y.value=T.top,m.value=T.width,k.value=T.x,D.value=T.y}function b(){a==="sync"?M():a==="next-frame"&&requestAnimationFrame(()=>M())}return Ue(n,b),e.watch(()=>I(n),V=>!V&&b()),Ke(n,b,{attributeFilter:["style","class"]}),c&&ce("scroll",b,{capture:!0,passive:!0}),o&&ce("resize",b,{passive:!0}),Ge(()=>{f&&b()}),{height:h,bottom:u,left:p,right:w,top:y,width:m,x:k,y:D,update:b}}function de(n,r){return Math.hypot(r.clientX-n.clientX,r.clientY-n.clientY)}function Qe({viewportStart:n,viewportEnd:r}){let s=null,o=null,c=null,f=null,a=null;function h(w){if(w.touches.length<2){const[y]=Array.from(w.touches);s=y?.clientX||null}}function u(w){p.initialTouchList=w.touches;const[y,m]=Array.from(w.touches);p.initialTouchViewportStart=n.value,p.initialTouchViewportEnd=r.value,p.initialPinchDistance=y&&m?de(y,m):null}const p={get lastTouchX(){return s},set lastTouchX(w){s=w},get initialTouchList(){return o},set initialTouchList(w){o=w},get initialTouchViewportStart(){return c},set initialTouchViewportStart(w){c=w},get initialTouchViewportEnd(){return f},set initialTouchViewportEnd(w){f=w},get initialPinchDistance(){return a},set initialPinchDistance(w){a=w}};return{setLastTouchX:h,setInitialTouchList:u,state:p}}const et={class:"timeline-wrapper"},tt={class:"timestamps"},nt={class:"groups"},ot={class:"group-items"},rt=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],st=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],it={key:0,class:"backgrounds"},at=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],lt={key:1,class:"markers"},ct=((n,r)=>{const s=n.__vccOpts||n;for(const[o,c]of r)s[o]=c;return s})(e.defineComponent({__name:"Timeline",props:{groups:{default:()=>[]},items:{default:()=>[]},markers:{default:()=>[]},viewportMin:{default:void 0},viewportMax:{default:void 0},minViewportDuration:{default:1e3},maxViewportDuration:{default:void 0},initialViewportStart:{default:void 0},initialViewportEnd:{default:void 0},renderTimestampLabel:{type:Function,default:(n,r)=>{const s=new Date(n);let o="";return(!["hours","minutes","seconds","ms"].includes(r.unit)||Z(s).valueOf()===n)&&(o+=`${s.toLocaleString("default",{month:r.unit!=="years"&&(We(s).valueOf()===n||r.unit==="days"||Z(s).valueOf()===n&&!(r.unit==="months"&&r.step===.25))?"short":void 0,year:G(s).valueOf()===n?"numeric":void 0,era:G(s).valueOf()===n&&G(s).getFullYear()<=0?"short":void 0,day:r.unit!=="years"&&!(r.unit==="months"&&r.step>=1)&&Z(s).valueOf()===n?"numeric":void 0})} `),["hours","minutes","seconds","ms"].includes(r.unit)&&(o+=`${L(s.getHours())}:${L(s.getMinutes())}${s.getSeconds()>0?`:${L(s.getSeconds())}`:""}${s.getMilliseconds()>0?`.${L(s.getMilliseconds())}`:""}`),o}},fixedLabels:{type:Boolean,default:!1},minTimestampWidth:{default:100},maxZoomSpeed:{default:60},activeItems:{default:()=>[]},maxOffsetOutsideViewport:{default:50},scales:{default:()=>[]},weekStartsOn:{default:0}},emits:["pointermove","pointerdown","pointerup","wheel","click","contextmenu","touchmove","touchstart","touchend","mousemoveTimeline","mouseleaveTimeline","changeViewport","changeScale"],setup(n,{expose:r,emit:s}){const o=n,c=s;r({setViewport:B,onWheel:we,clearCache:Q});const f=e.ref(null),{width:a}=Me(f),h=e.ref(0),u=e.ref(1e4),p=e.computed(()=>u.value-h.value),w=e.computed(()=>a.value/p.value);e.watch([h,u],([t,d])=>{c("changeViewport",{start:t,end:d})}),e.watchEffect(()=>{try{me()}catch(t){console.error(t)}});const{left:y}=Je(f);function m(){return o.items?.reduce((t,d)=>d.start<t?d.start:t,1/0)}function k(){return o.items?.reduce((t,d)=>d.end!==void 0&&d.end>t||d.start>t?d.end??d.start:t,-1/0)}function D(){B(o.initialViewportStart??o.viewportMin??m()??0,o.initialViewportEnd??o.viewportMax??k()??1e4)}e.watch([()=>o.viewportMin,()=>o.viewportMax],()=>{B(h.value,u.value)}),e.watch([()=>o.initialViewportStart,()=>o.initialViewportEnd],()=>{B(o.initialViewportStart,o.initialViewportEnd)});const M=e.computed(()=>o.items.filter(t=>t.start<u.value&&(t.end??t.start)>h.value).sort((t,d)=>t.start-d.start)||[]),b=e.computed(()=>o.markers.filter(t=>t.start<u.value&&t.start>h.value).sort((t,d)=>t.start-d.start)||[]),V=e.computed(()=>b.value.filter(t=>!t.group)),T=e.computed(()=>M.value.filter(t=>t.type==="background"&&!t.group)),U=new Map,J=new Map;function Q(){U.clear(),J.clear()}e.watch([h,u,a],()=>{Q()}),e.watch(M,()=>{U.clear()}),e.watch(b,()=>{J.clear()}),e.onMounted(()=>{D(),e.nextTick(()=>{Q()})});function ut(t){return{"--_left":`${he(t.start,t.end)}px`,"--_width":t.end!==void 0?`${ht(t.start,t.end)}px`:void 0,...t.cssVariables}}function P(t,d=!1){const i=d?J:U,l=i.get(t.id??`${t.start}${t.type}${t.end||""}`);if(l)return l;const v=ut(t);return i.set(t.id??`${t.start}${t.type}${t.end||""}`,v),v}const dt=e.computed(()=>a.value/o.minTimestampWidth),{visibleTimestamps:pe,scale:X}=Fe(h,u,p,dt,e.computed(()=>o.scales),e.computed(()=>o.weekStartsOn)),pt=e.computed(()=>pe.value.map(t=>he(t)));e.watch(X,(t,d)=>{t.step===d?.step&&t.unit===d?.unit||c("changeScale",t)},{immediate:!0});function ft(t){return{"is-second":t%1e3===0,"is-minute":t%6e4===0,"is-hour":t%36e5===0,"is-day":t%864e5===0}}const Y=e.computed(()=>o.maxOffsetOutsideViewport/a.value*p.value),fe=e.computed(()=>a.value+2*(Y.value/p.value)*a.value);function he(t,d){if(d!==void 0&&t<h.value-Y.value&&(d-t)/p.value*a.value>fe.value){const S=-Y.value/p.value*a.value,$=u.value+Y.value;if(d>$)return S;const ye=($-d)/p.value*a.value;return S-ye}return(t-h.value)/p.value*a.value}function ht(t,d){const l=(d-t)/p.value*a.value;return Math.min(l,fe.value)}function ee(t,d){const i=t/a.value*p.value;t>0&&u.value===o.viewportMax||t<0&&h.value===o.viewportMin||(B(h.value+i,u.value+i),d.type==="wheel"&&ne(d))}function me(){if(o.initialViewportStart!==void 0&&o.initialViewportEnd!==void 0&&o.initialViewportStart>=o.initialViewportEnd)throw new Error("[vue-timeline-chart] Invalid props: initialViewportStart must be smaller than initialViewportEnd");if(o.viewportMin!==void 0&&o.viewportMax!==void 0&&o.viewportMin>=o.viewportMax)throw new Error("[vue-timeline-chart] Invalid props: viewportMin must be smaller than viewportMax")}function B(t,d){if(t===void 0&&d===void 0){console.warn("[vue-timeline-chart] setViewport: both start and end are undefined. No viewport will be set.");return}let i=t===void 0?h.value:o.viewportMin!==void 0?Math.max(t,o.viewportMin):t,l=d===void 0?u.value:o.viewportMax!==void 0?Math.min(d,o.viewportMax):d;const v=l-i;if(o.minViewportDuration!==void 0&&v<o.minViewportDuration){const S=o.minViewportDuration-v;i-=S*.5,l+=S*.5}else if(o.maxViewportDuration!==void 0&&v>o.maxViewportDuration){const S=o.maxViewportDuration-v;i-=S*.5,l+=S*.5}h.value=Math.round(i),u.value=Math.round(l)}function we(t){if(me(),c("wheel",t),t.deltaY===0&&t.preventDefault(),t.shiftKey){t.preventDefault();const v=t.deltaY===0&&t.deltaX!==0?t.deltaX:t.deltaY;ee(v*(t.deltaMode===0?1:18),t);return}if(t.deltaX!==0){ee(t.deltaX*(t.deltaMode===0?1:18),t);return}if(!(t.metaKey||t.ctrlKey))return;t.preventDefault();const d=(t.clientX-y.value)/a.value,i=o.maxZoomSpeed?Math.max(-o.maxZoomSpeed,Math.min(o.maxZoomSpeed,t.deltaY*(t.deltaMode===0?1:10))):t.deltaY*(t.deltaMode===0?1:10),l=Math.round(-p.value*.01*i);mt(l,d,t)}function mt(t,d=.5,i){t>0?t=p.value-t<o.minViewportDuration?p.value-o.minViewportDuration:t:o.maxViewportDuration&&(t=p.value-t>o.maxViewportDuration?-(o.maxViewportDuration-p.value):t);const l=t*d,v=t-l,S=h.value+l,$=u.value-v;if(S>=$){console.error(`Rounding issue probably occured while zooming.

Setting different values for minViewportDuration and maxViewportDuration might help.`);return}B(S,$),ne(i)}function x(t){let d;"touches"in t?d=Array.from(t.touches).reduce((v,S)=>v+S.clientX,0)/t.touches.length:d=t.clientX;const i=(d-y.value)/a.value;return h.value+p.value*i}const{state:O,setLastTouchX:te,setInitialTouchList:ke}=Qe({viewportStart:h,viewportEnd:u});function wt(t){if(t.touches.length===2&&O.initialPinchDistance!==null&&O.initialTouchViewportStart!==null&&O.initialTouchViewportEnd!==null){const[d,i]=[...t.touches].sort((re,se)=>re.clientX-se.clientX),[l,v]=[d,i].map(re=>[...O.initialTouchList].find(se=>se.identifier===re.identifier)),$=de(d,i)/O.initialPinchDistance,oe=(l.screenX+v.screenX)/2,gt=-((d.screenX+i.screenX)/2-oe)/w.value,Dt=(oe-y.value)/a.value,ve=O.initialTouchViewportEnd-O.initialTouchViewportStart,ge=ve/$,Mt=ge-ve,De=O.initialTouchViewportStart-Mt*Dt+gt,St=De+ge;B(De,St)}else if(t.touches.length===1){const[d]=t.touches;if(O.lastTouchX===null)O.lastTouchX=d.clientX;else{const i=O.lastTouchX-d.clientX;ee(i,t),te(t)}}c("touchmove",{time:x(t),event:t})}function kt(t){ke(t),te(t),c("touchstart",{time:x(t),event:t})}function yt(t){te(t),ke(t),c("touchend",{event:t})}function F(t,d=null){c("pointerdown",{time:x(t),event:t,item:d})}function z(t,d=null){c("pointermove",{time:x(t),event:t,item:d})}function H(t,d=null){c("pointerup",{time:x(t),event:t,item:d})}function A(t,d=null){c("click",{time:x(t),event:t,item:d})}function R(t,d=null){c("contextmenu",{time:x(t),event:t,item:d})}function ne(t){c("mousemoveTimeline",{time:x(t),event:t})}function vt(t){c("mouseleaveTimeline",{event:t})}return(t,d)=>(e.openBlock(),e.createElementBlock("div",et,[e.createElementVNode("div",{ref_key:"timelineEl",ref:f,class:"timeline",onWheel:we,onClick:A,onTouchmove:wt,onTouchstart:kt,onTouchend:yt,onPointermove:z,onPointerdown:F,onPointerup:H,onContextmenu:e.withModifiers(R,["prevent"]),onMousemove:ne,onMouseleave:vt},[e.createElementVNode("div",tt,[e.renderSlot(t.$slots,"timestamps-before",{scale:e.unref(X)},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(pe),(i,l)=>(e.openBlock(),e.createElementBlock("div",{key:i,class:e.normalizeClass(["timestamp",ft(i)]),style:e.normalizeStyle({"--_left":`${pt.value[l]}px`})},[e.renderSlot(t.$slots,"timestamp",{timestamp:i,scale:e.unref(X)},()=>[e.createTextVNode(e.toDisplayString(t.renderTimestampLabel(i,e.unref(X))),1)],!0)],6))),128)),e.renderSlot(t.$slots,"timestamps-after",{scale:e.unref(X)},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value.filter(i=>i.group==="_timestamps"),i=>(e.openBlock(),e.createElementBlock("div",{key:i.id??`${i.start}${i.type}`,style:e.normalizeStyle(P(i)),class:e.normalizeClass([i.type,i.className])},[e.renderSlot(t.$slots,"marker",{item:i},void 0,!0)],6))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value.filter(i=>i.group==="_timestamps"&&i.type==="marker"),i=>(e.openBlock(),e.createElementBlock("div",{key:i.id??`${i.start}${i.type}`,style:e.normalizeStyle(P(i)),class:e.normalizeClass([i.type,i.className])},[e.renderSlot(t.$slots,"marker",{item:i},void 0,!0)],6))),128))]),e.createElementVNode("div",nt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.groups,i=>(e.openBlock(),e.createElementBlock("div",{key:i.id,class:e.normalizeClass(["group",i.className]),style:e.normalizeStyle(i.cssVariables)},[e.createElementVNode("div",{class:e.normalizeClass(["group-label",{fixed:t.fixedLabels}])},[e.renderSlot(t.$slots,"group-label",{group:i},()=>[e.createTextVNode(e.toDisplayString(i.label),1)],!0)],2),e.createElementVNode("div",ot,[e.renderSlot(t.$slots,`items-${i.id}`,{group:i,itemsInViewport:M.value.filter(l=>l.group===i.id),viewportStart:h.value,viewportEnd:u.value},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value.filter(l=>l.group===i.id&&l.type!=="background"),(l,v)=>(e.openBlock(),e.createElementBlock("div",{key:l.id??v,style:e.normalizeStyle(P(l)),class:e.normalizeClass(["item",l.type,l.className,{active:t.activeItems.includes(l.id)}]),onClick:e.withModifiers(S=>A(S,l),["stop"]),onPointermove:e.withModifiers(S=>z(S,l),["stop"]),onPointerdown:e.withModifiers(S=>F(S,l),["stop"]),onPointerup:e.withModifiers(S=>H(S,l),["stop"]),onContextmenu:e.withModifiers(S=>R(S,l),["prevent","stop"])},[e.renderSlot(t.$slots,"item",{item:l},void 0,!0)],46,rt))),128))],!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value.filter(l=>l.group===i.id&&l.type==="background"),l=>(e.openBlock(),e.createElementBlock("div",{key:l.id??`${l.start}${l.type}${l.end||""}`,style:e.normalizeStyle(P(l)),class:e.normalizeClass([l.type,l.className]),onClick:e.withModifiers(v=>A(v,l),["stop"]),onPointermove:e.withModifiers(v=>z(v,l),["stop"]),onPointerdown:e.withModifiers(v=>F(v,l),["stop"]),onPointerup:e.withModifiers(v=>H(v,l),["stop"]),onContextmenu:e.withModifiers(v=>R(v,l),["prevent","stop"])},null,46,st))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value.filter(l=>l.group===i.id),l=>(e.openBlock(),e.createElementBlock("div",{key:l.id??`${l.start}${l.type}`,style:e.normalizeStyle(P(l,!0)),class:e.normalizeClass([l.type,l.className])},[e.renderSlot(t.$slots,"marker",{item:l},void 0,!0)],6))),128))],6))),128)),T.value.length>0?(e.openBlock(),e.createElementBlock("div",it,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(T.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.id??`${i.start}${i.type}${i.end||""}`,style:e.normalizeStyle(P(i)),class:e.normalizeClass([i.type,i.className]),onClick:e.withModifiers(l=>A(l,i),["stop"]),onPointermove:e.withModifiers(l=>z(l,i),["stop"]),onPointerdown:e.withModifiers(l=>F(l,i),["stop"]),onPointerup:e.withModifiers(l=>H(l,i),["stop"]),onContextmenu:e.withModifiers(l=>R(l,i),["prevent","stop"])},null,46,at))),128))])):e.createCommentVNode("",!0),V.value.length>0?(e.openBlock(),e.createElementBlock("div",lt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,i=>(e.openBlock(),e.createElementBlock("div",{key:i.id??`${i.start}${i.type}`,style:e.normalizeStyle(P(i,!0)),class:e.normalizeClass([i.type,i.className])},[e.renderSlot(t.$slots,"marker",{item:i},void 0,!0)],6))),128))])):e.createCommentVNode("",!0)])],544)]))}}),[["__scopeId","data-v-2779bce4"]]);C.Timeline=ct,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));