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