vue-timeline-chart
Version:
Vue3 Timeline Chart component
4 lines (2 loc) • 20.9 kB
JavaScript
(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V["vue-timeline-chart"]={},V.Vue))})(this,function(V,e){"use strict";const ie=r=>{const o=e.ref(0),s=e.ref(0);let n;function u(p){n=new ResizeObserver(([i])=>{const d=i==null?void 0:i.contentRect;d&&([o.value,s.value]=[d.width,d.height])}),n.observe(p)}return e.watch(r,p=>{if(p){u(p);return}n==null||n.disconnect()}),{width:o,height:s}},T=function(r){return`${r}`.trim().padStart(2,"0")};function M(r){const o=Object.prototype.toString.call(r);return r instanceof Date||typeof r=="object"&&o==="[object Date]"?new r.constructor(+r):typeof r=="number"||o==="[object Number]"||typeof r=="string"||o==="[object String]"?new Date(r):new Date(NaN)}function C(r,o){return r instanceof Date?new r.constructor(o):new Date(o)}function le(r,o){const s=M(r);return isNaN(o)?C(r,NaN):(o&&s.setDate(s.getDate()+o),s)}function K(r,o){const s=+M(r);return C(r,s+o)}const ce=6048e5,ue=6e4,de=36e5;function fe(r,o){return K(r,o*de)}let pe={};function j(){return pe}function x(r,o){var d,c,f,v;const s=j(),n=(o==null?void 0:o.weekStartsOn)??((c=(d=o==null?void 0:o.locale)==null?void 0:d.options)==null?void 0:c.weekStartsOn)??s.weekStartsOn??((v=(f=s.locale)==null?void 0:f.options)==null?void 0:v.weekStartsOn)??0,u=M(r),p=u.getDay(),i=(p<n?7:0)+p-n;return u.setDate(u.getDate()-i),u.setHours(0,0,0,0),u}function R(r){const o=M(r);return o.setHours(0,0,0,0),o}function me(r,o){return K(r,o*ue)}function he(r,o){const s=o*7;return le(r,s)}function we(r,o){const s=M(r.start),n=M(r.end);let u=+s>+n;const p=u?+s:+n,i=u?n:s;i.setHours(0,0,0,0);let d=1;const c=[];for(;+i<=p;)c.push(M(i)),i.setDate(i.getDate()+d),i.setHours(0,0,0,0);return u?c.reverse():c}function ve(r,o){const s=M(r.start),n=M(r.end);let u=+s>+n;const p=u?+s:+n;let i=u?n:s;i.setMinutes(0,0,0);let d=1;const c=[];for(;+i<=p;)c.push(M(i)),i=fe(i,d);return u?c.reverse():c}function ke(r){const o=M(r);return o.setSeconds(0,0),o}function U(r,o){const s=ke(M(r.start)),n=M(r.end);let u=+s>+n;const p=u?+s:+n;let i=u?n:s,d=1;const c=[];for(;+i<=p;)c.push(M(i)),i=me(i,d);return u?c.reverse():c}function ye(r,o){const s=M(r.start),n=M(r.end);let u=+s>+n;const p=u?+s:+n,i=u?n:s;i.setHours(0,0,0,0),i.setDate(1);let d=1;const c=[];for(;+i<=p;)c.push(M(i)),i.setMonth(i.getMonth()+d);return u?c.reverse():c}function Me(r,o){const s=M(r.start),n=M(r.end);let u=+s>+n;const p=x(u?n:s,o),i=x(u?s:n,o);p.setHours(15),i.setHours(15);const d=+i.getTime();let c=p,f=(o==null?void 0:o.step)??1;if(!f)return[];f<0&&(f=-f,u=!u);const v=[];for(;+c<=d;)c.setHours(0),v.push(M(c)),c=he(c,f),c.setHours(15);return u?v.reverse():v}function ge(r){const o=M(r);return o.setDate(1),o.setHours(0,0,0,0),o}function X(r){const o=M(r),s=C(r,0);return s.setFullYear(o.getFullYear(),0,1),s.setHours(0,0,0,0),s}function Se(r,o){const s=M(r.start),n=M(r.end);let u=+s>+n;const p=u?+s:+n,i=u?n:s;i.setHours(0,0,0,0),i.setMonth(0,1);let d=1;const c=[];for(;+i<=p;)c.push(M(i)),i.setFullYear(i.getFullYear()+d);return u?c.reverse():c}function De(r,o){var v,g,m,w;const s=M(r),n=s.getFullYear(),u=j(),p=(o==null?void 0:o.firstWeekContainsDate)??((g=(v=o==null?void 0:o.locale)==null?void 0:v.options)==null?void 0:g.firstWeekContainsDate)??u.firstWeekContainsDate??((w=(m=u.locale)==null?void 0:m.options)==null?void 0:w.firstWeekContainsDate)??1,i=C(r,0);i.setFullYear(n+1,0,p),i.setHours(0,0,0,0);const d=x(i,o),c=C(r,0);c.setFullYear(n,0,p),c.setHours(0,0,0,0);const f=x(c,o);return s.getTime()>=d.getTime()?n+1:s.getTime()>=f.getTime()?n:n-1}function be(r,o){var d,c,f,v;const s=j(),n=(o==null?void 0:o.firstWeekContainsDate)??((c=(d=o==null?void 0:o.locale)==null?void 0:d.options)==null?void 0:c.firstWeekContainsDate)??s.firstWeekContainsDate??((v=(f=s.locale)==null?void 0:f.options)==null?void 0:v.firstWeekContainsDate)??1,u=De(r,o),p=C(r,0);return p.setFullYear(u,0,n),p.setHours(0,0,0,0),x(p,o)}function Oe(r,o){const s=M(r),n=+x(s,o)-+be(s,o);return Math.round(n/ce)+1}const I={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},J=r=>Object.keys(I).indexOf(r),Ee=(r,o,s,n,u,p)=>{const i=e.ref(s.value),d=e.ref(n.value),c=e.computed(()=>{var m;return((m=u.value)!=null&&m.length?u.value:[{unit:"seconds",steps:[.1,1,10]},{unit:"minutes",steps:[.25,.5,1,5,10]},{unit:"hours",steps:[.25,.5,1,2]},{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((w,k)=>J(w.unit)-J(k.unit)).flatMap(w=>w.steps.toSorted((k,S)=>k-S).map(k=>({unit:w.unit,step:k})))});e.watch(s,()=>{i.value=s.value}),e.watch(n,()=>{d.value=n.value});const f=e.computed(()=>{let[m]=c.value;for(const[w,k]of c.value.entries()){const S=i.value/(I[k.unit]*(k.step??1));if(S>=1&&S<=d.value){m=k;break}if(S<1){m=c.value[w-1]??k;break}S>=1&&w===c.value.length-1&&(m=k)}return{unit:m.unit,step:m.step??1}});function v(m){switch(f.value.unit){case"years":return m.getFullYear()%f.value.step===0;case"months":return m.getMonth()%f.value.step===0;case"weeks":return Oe(m,{weekStartsOn:p.value})%f.value.step===0;case"days":return m.getDate()%f.value.step===0;case"hours":return m.getHours()%f.value.step===0;case"minutes":return m.getMinutes()%f.value.step===0;case"seconds":return m.getSeconds()%f.value.step===0;case"ms":return m.getMilliseconds()%f.value.step===0}}const g=e.computed(()=>{const m=[],w=r.value,k=o.value;let S=[];switch(f.value.unit){case"ms":S=Array.from({length:k-w},(D,b)=>new Date(w+b));break;case"seconds":S=U({start:w,end:k}).flatMap(D=>{const b=[];for(let E=0;E<60;E++)b.push(new Date(D.valueOf()+E*I.seconds));return b});break;case"minutes":S=U({start:w,end:k});break;case"hours":S=ve({start:w,end:k});break;case"days":S=we({start:w,end:k});break;case"weeks":S=Me({start:w,end:k},{weekStartsOn:p.value});break;case"months":S=ye({start:w,end:k});break;case"years":S=Se({start:w,end:k});break}for(const D of S)if(!(f.value.step>1&&!v(D))&&(m.push(D.valueOf()),f.value.step<1))for(let b=1;b<1/f.value.step;b++)m.push(D.valueOf()+b*f.value.step*I[f.value.unit]);return m});return{scale:f,baseDividers:I,visibleTimestamps:g}};function q(r){return e.getCurrentScope()?(e.onScopeDispose(r),!0):!1}function N(r){return typeof r=="function"?r():e.unref(r)}const xe=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Ve=r=>r!=null,Be=Object.prototype.toString,Ce=r=>Be.call(r)==="[object Object]",$e=()=>{};function _e(r){return e.getCurrentInstance()}function We(r,o=!0,s){_e()?e.onMounted(r,s):o?r():e.nextTick(r)}const G=xe?window:void 0;function $(r){var o;const s=N(r);return(o=s==null?void 0:s.$el)!=null?o:s}function Q(...r){let o,s,n,u;if(typeof r[0]=="string"||Array.isArray(r[0])?([s,n,u]=r,o=G):[o,s,n,u]=r,!o)return $e;Array.isArray(s)||(s=[s]),Array.isArray(n)||(n=[n]);const p=[],i=()=>{p.forEach(v=>v()),p.length=0},d=(v,g,m,w)=>(v.addEventListener(g,m,w),()=>v.removeEventListener(g,m,w)),c=e.watch(()=>[$(o),N(u)],([v,g])=>{if(i(),!v)return;const m=Ce(g)?{...g}:g;p.push(...s.flatMap(w=>n.map(k=>d(v,w,k,m))))},{immediate:!0,flush:"post"}),f=()=>{c(),i()};return q(f),f}function Ie(){const r=e.ref(!1),o=e.getCurrentInstance();return o&&e.onMounted(()=>{r.value=!0},o),r}function ee(r){const o=Ie();return e.computed(()=>(o.value,!!r()))}function Pe(r,o,s={}){const{window:n=G,...u}=s;let p;const i=ee(()=>n&&"MutationObserver"in n),d=()=>{p&&(p.disconnect(),p=void 0)},c=e.computed(()=>{const m=N(r),w=(Array.isArray(m)?m:[m]).map($).filter(Ve);return new Set(w)}),f=e.watch(()=>c.value,m=>{d(),i.value&&m.size&&(p=new MutationObserver(o),m.forEach(w=>p.observe(w,u)))},{immediate:!0,flush:"post"}),v=()=>p==null?void 0:p.takeRecords(),g=()=>{f(),d()};return q(g),{isSupported:i,stop:g,takeRecords:v}}function Te(r,o,s={}){const{window:n=G,...u}=s;let p;const i=ee(()=>n&&"ResizeObserver"in n),d=()=>{p&&(p.disconnect(),p=void 0)},c=e.computed(()=>{const g=N(r);return Array.isArray(g)?g.map(m=>$(m)):[$(g)]}),f=e.watch(c,g=>{if(d(),i.value&&n){p=new ResizeObserver(o);for(const m of g)m&&p.observe(m,u)}},{immediate:!0,flush:"post"}),v=()=>{d(),f()};return q(v),{isSupported:i,stop:v}}function Ne(r,o={}){const{reset:s=!0,windowResize:n=!0,windowScroll:u=!0,immediate:p=!0,updateTiming:i="sync"}=o,d=e.ref(0),c=e.ref(0),f=e.ref(0),v=e.ref(0),g=e.ref(0),m=e.ref(0),w=e.ref(0),k=e.ref(0);function S(){const b=$(r);if(!b){s&&(d.value=0,c.value=0,f.value=0,v.value=0,g.value=0,m.value=0,w.value=0,k.value=0);return}const E=b.getBoundingClientRect();d.value=E.height,c.value=E.bottom,f.value=E.left,v.value=E.right,g.value=E.top,m.value=E.width,w.value=E.x,k.value=E.y}function D(){i==="sync"?S():i==="next-frame"&&requestAnimationFrame(()=>S())}return Te(r,D),e.watch(()=>$(r),b=>!b&&D()),Pe(r,D,{attributeFilter:["style","class"]}),u&&Q("scroll",D,{capture:!0,passive:!0}),n&&Q("resize",D,{passive:!0}),We(()=>{p&&D()}),{height:d,bottom:c,left:f,right:v,top:g,width:m,x:w,y:k,update:D}}const Fe={class:"timeline-wrapper"},Le={class:"timestamps"},Ye={class:"groups"},ze={class:"group-items"},He=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],Ae=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],je={key:0,class:"backgrounds"},Re=["onClick","onPointermove","onPointerdown","onPointerup","onContextmenu"],Xe={key:1,class:"markers"},qe=((r,o)=>{const s=r.__vccOpts||r;for(const[n,u]of o)s[n]=u;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:(r,o)=>{const s=new Date(r);let n="";return(!["hours","minutes","seconds","ms"].includes(o.unit)||R(s).valueOf()===r)&&(n+=`${s.toLocaleString("default",{month:o.unit!=="years"&&(ge(s).valueOf()===r||o.unit==="days"||R(s).valueOf()===r&&!(o.unit==="months"&&o.step===.25))?"short":void 0,year:X(s).valueOf()===r?"numeric":void 0,era:X(s).valueOf()===r&&X(s).getFullYear()<=0?"short":void 0,day:o.unit!=="years"&&!(o.unit==="months"&&o.step>=1)&&R(s).valueOf()===r?"numeric":void 0})} `),["hours","minutes","seconds","ms"].includes(o.unit)&&(n+=`${T(s.getHours())}:${T(s.getMinutes())}${s.getSeconds()>0?`:${T(s.getSeconds())}`:""}${s.getMilliseconds()>0?`.${T(s.getMilliseconds())}`:""}`),n}},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","mousemoveTimeline","mouseleaveTimeline","changeViewport","changeScale"],setup(r,{expose:o,emit:s}){const n=r,u=s;o({onWheel:ae});const p=e.ref(null),{width:i}=ie(p),d=e.ref(0),c=e.ref(1e4),f=e.computed(()=>c.value-d.value);e.watch([d,c],([t,h])=>{u("changeViewport",{start:t,end:h})}),e.watchEffect(()=>{try{se(),g()}catch(t){console.error(t)}});const{left:v}=Ne(p);function g(){var t,h;if(n.initialViewportStart===void 0&&n.viewportMin===void 0){const a=(t=n.items)==null?void 0:t.reduce((l,y)=>y.start<l?y.start:l,1/0);d.value=a??0}else d.value=n.initialViewportStart??n.viewportMin??0;if(n.initialViewportEnd===void 0&&n.viewportMax===void 0){const a=(h=n.items)==null?void 0:h.reduce((l,y)=>y.end!==void 0&&y.end>l||y.start>l?y.end??y.start:l,-1/0);c.value=a??1e4}else c.value=n.initialViewportEnd??n.viewportMax??1e4}const m=e.computed(()=>n.items.filter(t=>t.start<c.value&&(t.end??t.start)>d.value).sort((t,h)=>t.start-h.start)||[]),w=e.computed(()=>n.markers.filter(t=>t.start<c.value&&t.start>d.value).sort((t,h)=>t.start-h.start)||[]),k=e.computed(()=>w.value.filter(t=>!t.group)),S=e.computed(()=>m.value.filter(t=>t.type==="background"&&!t.group)),D=new Map,b=new Map;e.watch([d,c,i],()=>{D.clear(),b.clear()}),e.watch(m,()=>{D.clear()}),e.watch(w,()=>{b.clear()}),e.onMounted(()=>{e.nextTick(()=>{D.clear(),b.clear()})});function E(t){return{"--_left":`${re(t.start,t.end)}px`,"--_width":t.end!==void 0?`${Ue(t.start,t.end)}px`:null,...t.cssVariables}}function B(t,h=!1){const a=h?b:D,l=a.get(t.id??`${t.start}${t.type}${t.end||""}`);if(l)return l;const y=E(t);return a.set(t.id??`${t.start}${t.type}${t.end||""}`,y),y}const Ge=e.computed(()=>i.value/n.minTimestampWidth),{visibleTimestamps:te,scale:P}=Ee(d,c,f,Ge,e.computed(()=>n.scales),e.computed(()=>n.weekStartsOn)),Ze=e.computed(()=>te.value.map(t=>re(t)));e.watch(P,(t,h)=>{t.step===(h==null?void 0:h.step)&&t.unit===(h==null?void 0:h.unit)||u("changeScale",t)},{immediate:!0});function Ke(t){return{"is-second":t%1e3===0,"is-minute":t%6e4===0,"is-hour":t%36e5===0,"is-day":t%864e5===0}}const F=e.computed(()=>n.maxOffsetOutsideViewport/i.value*f.value),ne=e.computed(()=>i.value+2*(F.value/f.value)*i.value);function re(t,h){if(h!==void 0&&t<d.value-F.value&&(h-t)/f.value*i.value>ne.value){const O=-F.value/f.value*i.value,W=c.value+F.value;if(h>W)return O;const et=(W-h)/f.value*i.value;return O-et}return(t-d.value)/f.value*i.value}function Ue(t,h){const l=(h-t)/f.value*i.value;return Math.min(l,ne.value)}function oe(t,h){const a=t/i.value*f.value;t>0&&c.value===n.viewportMax||t<0&&d.value===n.viewportMin||(d.value=Math.round(n.viewportMin!==void 0?Math.max(d.value+a,n.viewportMin):d.value+a),c.value=Math.round(n.viewportMax!==void 0?Math.min(c.value+a,n.viewportMax):c.value+a),Z(h))}function se(){if(n.initialViewportStart!==void 0&&n.initialViewportEnd!==void 0&&n.initialViewportStart>=n.initialViewportEnd)throw new Error("[vue-timeline-chart] Invalid props: initialViewportStart must be smaller than initialViewportEnd");if(n.viewportMin!==void 0&&n.viewportMax!==void 0&&n.viewportMin>=n.viewportMax)throw new Error("[vue-timeline-chart] Invalid props: viewportMin must be smaller than viewportMax");if(n.initialViewportStart!==void 0&&n.viewportMin!==void 0&&n.initialViewportStart<n.viewportMin)throw new Error("[vue-timeline-chart] Invalid props: initialViewportStart must be greater than or equal to viewportMin");if(n.initialViewportEnd!==void 0&&n.viewportMax!==void 0&&n.initialViewportEnd>n.viewportMax)throw new Error("[vue-timeline-chart] Invalid props: initialViewportEnd must be smaller than or equal to viewportMax")}function ae(t){if(se(),u("wheel",t),t.deltaY===0&&t.preventDefault(),t.shiftKey){t.preventDefault();const y=t.deltaY===0&&t.deltaX!==0?t.deltaX:t.deltaY;oe(y*(t.deltaMode===0?1:18),t);return}if(t.deltaX!==0){oe(t.deltaX*(t.deltaMode===0?1:18),t);return}if(!(t.metaKey||t.ctrlKey))return;t.preventDefault();const h=(t.clientX-v.value)/i.value,a=n.maxZoomSpeed?Math.max(-n.maxZoomSpeed,Math.min(n.maxZoomSpeed,t.deltaY*(t.deltaMode===0?1:10))):t.deltaY*(t.deltaMode===0?1:10),l=Math.round(-f.value*.01*a);Je(l,h,t)}function Je(t,h=.5,a){t>0?t=f.value-t<n.minViewportDuration?f.value-n.minViewportDuration:t:n.maxViewportDuration&&(t=f.value-t>n.maxViewportDuration?-(n.maxViewportDuration-f.value):t);const l=t*h,y=t-l,O=d.value+l,W=c.value-y;if(O>=W){console.error(`Rounding issue probably occured while zooming.
Setting different values for minViewportDuration and maxViewportDuration might help.`);return}d.value=Math.round(n.viewportMin!==void 0?Math.max(O,n.viewportMin):O),c.value=Math.round(n.viewportMax!==void 0?Math.min(W,n.viewportMax):W),Z(a)}function _(t){const h=(t.clientX-v.value)/i.value;return d.value+f.value*h}function L(t,h=null){u("pointermove",{time:_(t),event:t,item:h})}function Y(t,h=null){u("pointerdown",{time:_(t),event:t,item:h})}function z(t,h=null){u("pointerup",{time:_(t),event:t,item:h})}function H(t,h=null){u("click",{time:_(t),event:t,item:h})}function A(t,h=null){u("contextmenu",{time:_(t),event:t,item:h})}function Z(t){u("mousemoveTimeline",{time:_(t),event:t})}function Qe(t){u("mouseleaveTimeline",{event:t})}return(t,h)=>(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("div",{ref_key:"timelineEl",ref:p,class:"timeline",onWheel:ae,onClick:H,onPointermove:L,onPointerdown:Y,onPointerup:z,onContextmenu:e.withModifiers(A,["prevent"]),onMousemove:Z,onMouseleave:Qe},[e.createElementVNode("div",Le,[e.renderSlot(t.$slots,"timestamps-before",{scale:e.unref(P)},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(te),(a,l)=>(e.openBlock(),e.createElementBlock("div",{key:a,class:e.normalizeClass(["timestamp",Ke(a)]),style:e.normalizeStyle({"--_left":`${Ze.value[l]}px`})},[e.renderSlot(t.$slots,"timestamp",{timestamp:a,scale:e.unref(P)},()=>[e.createTextVNode(e.toDisplayString(t.renderTimestampLabel(a,e.unref(P))),1)],!0)],6))),128)),e.renderSlot(t.$slots,"timestamps-after",{scale:e.unref(P)},void 0,!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value.filter(a=>a.group==="_timestamps"),a=>(e.openBlock(),e.createElementBlock("div",{key:a.id??`${a.start}${a.type}`,style:e.normalizeStyle(B(a)),class:e.normalizeClass([a.type,a.className])},[e.renderSlot(t.$slots,"marker",{item:a},void 0,!0)],6))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.filter(a=>a.group==="_timestamps"&&a.type==="marker"),a=>(e.openBlock(),e.createElementBlock("div",{key:a.id??`${a.start}${a.type}`,style:e.normalizeStyle(B(a)),class:e.normalizeClass([a.type,a.className])},[e.renderSlot(t.$slots,"marker",{item:a},void 0,!0)],6))),128))]),e.createElementVNode("div",Ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.groups,a=>(e.openBlock(),e.createElementBlock("div",{key:a.id,class:e.normalizeClass(["group",a.className]),style:e.normalizeStyle(a.cssVariables)},[e.createElementVNode("div",{class:e.normalizeClass(["group-label",{fixed:t.fixedLabels}])},[e.renderSlot(t.$slots,"group-label",{group:a},()=>[e.createTextVNode(e.toDisplayString(a.label),1)],!0)],2),e.createElementVNode("div",ze,[e.renderSlot(t.$slots,`items-${a.id}`,{group:a,itemsInViewport:m.value.filter(l=>l.group===a.id),viewportStart:d.value,viewportEnd:c.value},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.filter(l=>l.group===a.id&&l.type!=="background"),(l,y)=>(e.openBlock(),e.createElementBlock("div",{key:l.id??y,style:e.normalizeStyle(B(l)),class:e.normalizeClass(["item",l.type,l.className,{active:t.activeItems.includes(l.id)}]),onClick:e.withModifiers(O=>H(O,l),["stop"]),onPointermove:e.withModifiers(O=>L(O,l),["stop"]),onPointerdown:e.withModifiers(O=>Y(O,l),["stop"]),onPointerup:e.withModifiers(O=>z(O,l),["stop"]),onContextmenu:e.withModifiers(O=>A(O,l),["prevent","stop"])},[e.renderSlot(t.$slots,"item",{item:l},void 0,!0)],46,He))),128))],!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.filter(l=>l.group===a.id&&l.type==="background"),l=>(e.openBlock(),e.createElementBlock("div",{key:l.id??`${l.start}${l.type}${l.end||""}`,style:e.normalizeStyle(B(l)),class:e.normalizeClass([l.type,l.className]),onClick:e.withModifiers(y=>H(y,l),["stop"]),onPointermove:e.withModifiers(y=>L(y,l),["stop"]),onPointerdown:e.withModifiers(y=>Y(y,l),["stop"]),onPointerup:e.withModifiers(y=>z(y,l),["stop"]),onContextmenu:e.withModifiers(y=>A(y,l),["prevent","stop"])},null,46,Ae))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value.filter(l=>l.group===a.id),l=>(e.openBlock(),e.createElementBlock("div",{key:l.id??`${l.start}${l.type}`,style:e.normalizeStyle(B(l,!0)),class:e.normalizeClass([l.type,l.className])},[e.renderSlot(t.$slots,"marker",{item:l},void 0,!0)],6))),128))],6))),128)),S.value.length>0?(e.openBlock(),e.createElementBlock("div",je,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.id??`${a.start}${a.type}${a.end||""}`,style:e.normalizeStyle(B(a)),class:e.normalizeClass([a.type,a.className]),onClick:e.withModifiers(l=>H(l,a),["stop"]),onPointermove:e.withModifiers(l=>L(l,a),["stop"]),onPointerdown:e.withModifiers(l=>Y(l,a),["stop"]),onPointerup:e.withModifiers(l=>z(l,a),["stop"]),onContextmenu:e.withModifiers(l=>A(l,a),["prevent","stop"])},null,46,Re))),128))])):e.createCommentVNode("",!0),k.value.length>0?(e.openBlock(),e.createElementBlock("div",Xe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.id??`${a.start}${a.type}`,style:e.normalizeStyle(B(a,!0)),class:e.normalizeClass([a.type,a.className])},[e.renderSlot(t.$slots,"marker",{item:a},void 0,!0)],6))),128))])):e.createCommentVNode("",!0)])],544)]))}}),[["__scopeId","data-v-a2946618"]]);V.Timeline=qe,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});