UNPKG

@lui297/vue-ganttastic

Version:

A simple and customizable Gantt chart component for Vue.js

github.com/lui297/vue-ganttastic

lui297/vue-ganttastic

3 lines (2 loc) • 30.5 kB
1
2
3
(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("luxon")):typeof define=="function"&&define.amd?define(["exports","vue","luxon"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.VueGanttastic={},L.Vue,L.Luxon))})(this,function(L,e,v){"use strict";var G=document.createElement("style");G.textContent=`.g-grid-container{position:absolute;top:0;left:0%;width:100%;height:100%;display:flex;justify-content:space-between}.g-grid-line{width:1px;height:100%;border-left:1px solid #eaeaea}.g-label-column{display:flex;align-items:center;flex-direction:column;color:#404040;font-variant-numeric:tabular-nums;font-size:.9em}.g-label-column-header{width:100%;height:80px;min-height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:5px}.g-label-column-rows{width:100%;height:100%;display:flex;flex-direction:column;border-bottom-left-radius:5px}.g-label-column-row{width:100%;height:100%;display:flex;padding:.1rem .3rem;overflow:hidden;white-space:normal;box-sizing:border-box;text-align:center;align-items:center;justify-content:center}.g-label-column-row:last-child{border-bottom-left-radius:5px}.g-timeaxis{position:sticky;top:0;width:100%;height:80px;background:#fff;z-index:4;display:flex;flex-direction:column}.g-timeunits-container{display:flex;width:100%;height:50%}.g-timeunit{height:100%;font-size:65%;display:flex;flex-direction:column;justify-content:center}.g-upper-timeunit{display:flex;height:100%;justify-content:center;align-items:center}.g-timeaxis-hour-pin{width:1px;height:10px}.g-gantt-tooltip{position:fixed;background:#000;color:#fff;z-index:4;font-size:.85em;padding:5px;border-radius:3px;transition:opacity .2s;display:flex;align-items:center;font-variant-numeric:tabular-nums}.g-gantt-tooltip:before{content:"";position:absolute;top:0;left:10%;width:0;height:0;border:10px solid transparent;border-bottom-color:#000;border-top:0;margin-left:-5px;margin-top:-5px}.g-gantt-tooltip-color-dot{width:8px;height:8px;border-radius:100%;margin-right:4px}.g-fade-enter-active,.g-fade-leave-active{transition:opacity .3s ease}.g-fade-enter-from,.g-fade-leave-to{opacity:0}.g-grid-current-time{position:absolute;height:100%;display:flex;z-index:5;pointer-events:none}.g-grid-current-time-marker{width:0px;height:calc(100% - 2px);display:flex}.g-grid-current-time-text{font-size:x-small}.g-gantt-chart{position:relative;display:flex;flex-direction:column;overflow-x:hidden;-webkit-touch-callout:none;user-select:none;font-variant-numeric:tabular-nums;border-radius:5px}.with-column{border-radius:0 5px 5px 0/0px 5px 5px 0px}.g-gantt-rows-container{position:relative}.labels-in-column{display:flex;flex-direction:row}.g-gantt-bar{display:flex;justify-content:center;align-items:center;background:#5f9ea0;overflow:hidden}.g-gantt-bar-label{width:100%;height:100%;box-sizing:border-box;padding:0 14px;display:flex;justify-content:center;align-items:center}.g-gantt-bar-label>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-gantt-bar-handle-left,.g-gantt-bar-handle-right{position:absolute;width:10px;height:100%;background:#fff;opacity:.7;border-radius:0;cursor:ew-resize;top:0}.g-gantt-bar-handle-left{left:0}.g-gantt-bar-handle-right{right:0}.g-gantt-bar-label img{pointer-events:none}.g-gantt-row{width:100%;transition:background .4s;position:relative}.g-gantt-row>.g-gantt-row-bars-container{position:relative;border-top:1px solid #eaeaea;width:100%;border-bottom:1px solid #eaeaea}.g-gantt-row-label{position:absolute;top:0;left:0;padding:0 8px;display:flex;align-items:center;height:60%;min-height:20px;font-size:.8em;font-weight:700;border-bottom-right-radius:6px;background:#f2f2f2;z-index:3;box-shadow:0 1px 4px #0009}.bar-transition-leave-active,.bar-transition-enter-active{transition:all .2s}.bar-transition-enter-from,.bar-transition-leave-to{transform:scale(.8);opacity:0} /*$vite$:1*/`,document.head.appendChild(G);const z=Symbol("CHART_ROWS_KEY"),H=Symbol("CONFIG_KEY"),F=Symbol("EMIT_BAR_EVENT_KEY"),A=Symbol("BAR_CONTAINER_KEY");function _(){const r=e.inject(H);if(!r)throw Error("Failed to inject config!");return r}function $(r=_()){const{chartStart:f,chartEnd:s,barStart:h,barEnd:B}=r,p=e.computed(()=>f.value?m(f.value):null),l=e.computed(()=>s.value?m(s.value):null);function m(a,b){let t=a;if(b!==void 0&&typeof a=="object"&&!(a instanceof Date)&&(t=b==="start"?a[h.value]:a[B.value]),v.DateTime.isDateTime(t))return t;if(t instanceof Date)return v.DateTime.fromJSDate(t);if(typeof t=="string"){const o=v.DateTime.fromISO(t);return o.isValid?o:v.DateTime.invalid("Invalid ISO string")}else return v.DateTime.invalid("Invalid input type")}function c(a){return a instanceof Date?v.DateTime.fromJSDate(a):typeof a=="string"?v.DateTime.fromISO(a):a.toISO()}return{chartStartDateTime:p,chartEndDateTime:l,toDateTime:m,format:c}}function U(){const{precision:r}=_(),{chartStartDateTime:f,chartEndDateTime:s}=$(),h=e.computed(()=>{switch(r?.value){case"hour":return"day";case"day":return"month";case"date":case"week":return"month";case"month":return"year";default:throw new Error("Precision prop incorrect. Must be one of the following: 'hour', 'day', 'date', 'week', 'month'")}}),B=e.computed(()=>{switch(r.value){case"date":return"day";case"week":return"isoWeek";default:return r.value}}),p={hour:"hh",date:"dd.MMM",day:"dd.MMM",week:"WW",month:"MMMM yyyy",year:"yyyy"};return{timeaxisUnits:e.computed(()=>{const m=[],c=[],a=s.value.diff(f.value,"minutes").minutes,b=h.value,t=B.value;let o=f.value,u=f.value;for(;u<=s.value;){let y=u.endOf("hour");t==="month"&&(y=u.endOf("month")),t==="isoWeek"&&(y=u.endOf("week")),t==="day"&&(y=u.endOf("day")),t==="hour"&&(y=u.endOf("hour"));const k=y>s.value?s.value.diff(u,"minutes").minutes/a*100:y.diff(u,"minutes").minutes/a*100;c.push({label:u.toFormat(p[r?.value]),value:String(u),date:u.toJSDate(),dateTime:u,width:String(k)+"%"}),t==="month"&&(u=u.plus({month:1}).startOf("month")),t==="isoWeek"&&(u=u.plus({week:1}).startOf("week")),t==="day"&&(u=u.plus({day:1}).startOf("day")),t==="hour"&&(u=u.plus({hour:1}).startOf("hour"))}for(;o<=s.value;){const y=o.endOf(b),k=y>s.value?s.value.diff(o,"minutes").minutes/a*100:y.diff(o,"minutes").minutes/a*100;m.push({label:o.toFormat(p[b]),value:String(o),date:o.toJSDate(),dateTime:o,width:String(k)+"%"}),b==="year"&&(o=o.plus({year:1}).startOf("year")),b==="month"&&(o=o.plus({month:1}).startOf("month")),b==="day"&&(o=o.plus({day:1}).startOf("day"))}return{upperUnits:m,lowerUnits:c}})}}const Q={class:"g-grid-container"},ee=e.defineComponent({__name:"GGanttGrid",props:{highlightedUnits:{}},setup(r){const{colors:f}=_(),{timeaxisUnits:s}=U();return(h,B)=>(e.openBlock(),e.createElementBlock("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s).lowerUnits,({label:p,value:l,width:m})=>(e.openBlock(),e.createElementBlock("div",{key:p,class:"g-grid-line",style:e.normalizeStyle({width:m,background:h.highlightedUnits?.includes(Number(l))?e.unref(f).hoverHighlight:void 0})},null,4))),128))]))}});function I(){const r=e.inject(z);if(!r)throw Error("Failed to inject getChartRows!");return r}const te={class:"g-label-column-rows"},ne=e.defineComponent({__name:"GGanttLabelColumn",setup(r){const{font:f,colors:s,labelColumnTitle:h,rowHeight:B}=_(),p=I();return(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:"g-label-column",style:e.normalizeStyle({fontFamily:e.unref(f),color:e.unref(s).text})},[e.renderSlot(l.$slots,"label-column-title",{},()=>[e.createElementVNode("div",{class:"g-label-column-header",style:e.normalizeStyle({background:e.unref(s).primary})},e.toDisplayString(e.unref(h)),5)]),e.createElementVNode("div",te,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p)(),({label:c},a)=>(e.openBlock(),e.createElementBlock("div",{key:`${c}_${a}`,class:"g-label-column-row",style:e.normalizeStyle({background:a%2===0?e.unref(s).ternary:e.unref(s).quartenary,height:`${e.unref(B)}px`})},[e.renderSlot(l.$slots,"label-column-row",{label:c},()=>[e.createElementVNode("span",null,e.toDisplayString(c),1)])],4))),128))])],4))}}),re={class:"g-timeaxis"},oe={class:"g-timeunits-container"},ae={class:"g-timeunits-container"},ie=e.defineComponent({__name:"GGanttTimeaxis",setup(r){const{precision:f,colors:s}=_(),{timeaxisUnits:h}=U();return(B,p)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(h).upperUnits,({label:l,value:m,date:c,width:a,dateTime:b},t)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:"g-upper-timeunit",style:e.normalizeStyle({background:t%2===0?e.unref(s).primary:e.unref(s).secondary,color:e.unref(s).text,width:a})},[e.renderSlot(B.$slots,"upper-timeunit",{label:l,value:m,date:c,dateTime:b},()=>[e.createTextVNode(e.toDisplayString(l),1)])],4))),128))]),e.createElementVNode("div",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(h).lowerUnits,({label:l,value:m,date:c,width:a,dateTime:b},t)=>(e.openBlock(),e.createElementBlock("div",{key:l,class:"g-timeunit",style:e.normalizeStyle({background:t%2===0?e.unref(s).ternary:e.unref(s).quartenary,color:e.unref(s).text,flexDirection:e.unref(f)==="hour"?"column":"row",alignItems:e.unref(f)==="hour"?"":"center",width:a})},[e.renderSlot(B.$slots,"timeunit",{label:l,value:m,date:c,dateTime:b},()=>[e.createTextVNode(e.toDisplayString(l),1)]),e.unref(f)==="hour"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"g-timeaxis-hour-pin",style:e.normalizeStyle({background:e.unref(s).text})},null,4)):e.createCommentVNode("",!0)],4))),128))])]))}}),le="cadetblue",se=e.defineComponent({__name:"GGanttBarTooltip",props:{bar:{},modelValue:{type:Boolean}},setup(r){const f={hour:"hh:mm",day:"dd. MMM HH:mm",date:"dd. MMMM yyyy",month:"dd. MMMM yyyy",week:"d. MMMM yyyy (WW)"},s=r,{bar:h}=e.toRefs(s),{precision:B,font:p,barStart:l,barEnd:m,rowHeight:c}=_(),a=e.ref("0px"),b=e.ref("0px");e.watch(()=>s.bar,async()=>{await e.nextTick();const k=h?.value?.ganttBarConfig.id||"";if(!k)return;const x=document.getElementById(k),{top:S,left:d}=x?.getBoundingClientRect()||{top:0,left:0},n=Math.max(d,10);a.value=`${S+c.value-10}px`,b.value=`${n}px`},{deep:!0,immediate:!0});const t=e.computed(()=>h?.value?.ganttBarConfig.style?.background||le),{toDateTime:o}=$(),u=e.computed(()=>h.value?.[l.value]),y=e.computed(()=>h.value?.[m.value]),C=e.computed(()=>{if(!h?.value)return"";const k=f[B.value],x=o(u.value).toFormat(k),S=o(y.value).toFormat(k);return`${x} – ${S}`});return(k,x)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"g-fade",mode:"out-in"},{default:e.withCtx(()=>[k.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:"g-gantt-tooltip",style:e.normalizeStyle({top:a.value,left:b.value,fontFamily:e.unref(p)})},[e.createElementVNode("div",{class:"g-gantt-tooltip-color-dot",style:e.normalizeStyle({background:t.value})},null,4),e.renderSlot(k.$slots,"default",{bar:e.unref(h),barStart:u.value,barEnd:y.value},()=>[e.createTextVNode(e.toDisplayString(C.value),1)])],4)):e.createCommentVNode("",!0)]),_:3})]))}});function V(r=_()){const{chartSize:f}=r,{chartStartDateTime:s,chartEndDateTime:h,toDateTime:B,format:p}=$(r),l=e.computed(()=>h.value.diff(s.value,"minutes").minutes);return{mapTimeToPosition:a=>{const b=Number.isNaN(f.width.value)?0:f.width.value,t=B(a).diff(s.value,"minutes").minutes;return t&&!Number.isNaN(t)?Math.ceil(t/l.value*b):0},mapPositionToTime:a=>{const b=Number.isNaN(f.width.value)?0:f.width.value,t=a/b*l.value;return t&&!Number.isNaN(t)?p(s.value.plus({minutes:t})):""}}}const ce=e.defineComponent({__name:"GGanttCurrentTime",setup(r){const{mapTimeToPosition:f}=V(),s=e.ref(v.DateTime.now()),{colors:h,currentTimeLabel:B}=_(),p=e.computed(()=>f(s.value.toISO({extendedZone:!0})));return(l,m)=>(e.openBlock(),e.createElementBlock("div",{class:"g-grid-current-time",style:e.normalizeStyle({left:`${p.value}px`})},[e.createElementVNode("div",{class:"g-grid-current-time-marker",style:e.normalizeStyle({border:`1px dashed ${e.unref(h).markerCurrentTime}`})},null,4),e.createElementVNode("span",{class:"g-grid-current-time-text",style:e.normalizeStyle({color:e.unref(h).markerCurrentTime})},[e.renderSlot(l.$slots,"current-time-label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(B)),1)])],4)],4))}});function de(r){return e.getCurrentScope()?(e.onScopeDispose(r),!0):!1}const fe=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function ue(r){return Array.isArray(r)?r:[r]}function me(r){return e.getCurrentInstance()}function ge(r,f=!0,s){me()?e.onMounted(r,s):f?r():e.nextTick(r)}const W=fe?window:void 0;function R(r){var f;const s=e.toValue(r);return(f=s?.$el)!=null?f:s}function pe(){const r=e.shallowRef(!1),f=e.getCurrentInstance();return f&&e.onMounted(()=>{r.value=!0},f),r}function he(r){const f=pe();return e.computed(()=>(f.value,!!r()))}function be(r,f,s={}){const{window:h=W,...B}=s;let p;const l=he(()=>h&&"ResizeObserver"in h),m=()=>{p&&(p.disconnect(),p=void 0)},c=e.computed(()=>{const t=e.toValue(r);return Array.isArray(t)?t.map(o=>R(o)):[R(t)]}),a=e.watch(c,t=>{if(m(),l.value&&h){p=new ResizeObserver(f);for(const o of t)o&&p.observe(o,B)}},{immediate:!0,flush:"post"}),b=()=>{m(),a()};return de(b),{isSupported:l,stop:b}}function ye(r,f={width:0,height:0},s={}){const{window:h=W,box:B="content-box"}=s,p=e.computed(()=>{var t,o;return(o=(t=R(r))==null?void 0:t.namespaceURI)==null?void 0:o.includes("svg")}),l=e.shallowRef(f.width),m=e.shallowRef(f.height),{stop:c}=be(r,([t])=>{const o=B==="border-box"?t.borderBoxSize:B==="content-box"?t.contentBoxSize:t.devicePixelContentBoxSize;if(h&&p.value){const u=R(r);if(u){const y=u.getBoundingClientRect();l.value=y.width,m.value=y.height}}else if(o){const u=ue(o);l.value=u.reduce((y,{inlineSize:C})=>y+C,0),m.value=u.reduce((y,{blockSize:C})=>y+C,0)}else l.value=t.contentRect.width,m.value=t.contentRect.height},s);ge(()=>{const t=R(r);t&&(l.value="offsetWidth"in t?t.offsetWidth:f.width,m.value="offsetHeight"in t?t.offsetHeight:f.height)});const a=e.watch(()=>R(r),t=>{l.value=t?f.width:0,m.value=t?f.height:0});function b(){c(),a()}return{width:l,height:m,stop:b}}const P={default:{primary:"#eeeeee",secondary:"#E0E0E0",ternary:"#F5F5F5",quartenary:"#ededed",hoverHighlight:"rgba(204, 216, 219, 0.5)",markerCurrentTime:"#000",text:"#404040",background:"white"},creamy:{primary:"#ffe8d9",secondary:"#fcdcc5",ternary:"#fff6f0",quartenary:"#f7ece6",hoverHighlight:"rgba(230, 221, 202, 0.5)",markerCurrentTime:"#000",text:"#542d05",background:"white"},crimson:{primary:"#a82039",secondary:"#c41238",ternary:"#db4f56",quartenary:"#ce5f64",hoverHighlight:"rgba(196, 141, 141, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"},dark:{primary:"#404040",secondary:"#303030",ternary:"#353535",quartenary:"#383838",hoverHighlight:"rgba(159, 160, 161, 0.5)",markerCurrentTime:"#fff",text:"white",background:"#525252",toast:"#1f1f1f"},flare:{primary:"#e08a38",secondary:"#e67912",ternary:"#5e5145",quartenary:"#665648",hoverHighlight:"rgba(196, 141, 141, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"},fuchsia:{primary:"#de1d5a",secondary:"#b50b41",ternary:"#ff7da6",quartenary:"#f2799f",hoverHighlight:"rgba(196, 141, 141, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"},grove:{primary:"#3d9960",secondary:"#288542",ternary:"#72b585",quartenary:"#65a577",hoverHighlight:"rgba(160, 219, 171, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"},"material-blue":{primary:"#0D47A1",secondary:"#1565C0",ternary:"#42a5f5",quartenary:"#409fed",hoverHighlight:"rgba(110, 165, 196, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"},sky:{primary:"#b5e3ff",secondary:"#a1d6f7",ternary:"#d6f7ff",quartenary:"#d0edf4",hoverHighlight:"rgba(193, 202, 214, 0.5)",markerCurrentTime:"#000",text:"#022c47",background:"white"},slumber:{primary:"#2a2f42",secondary:"#2f3447",ternary:"#35394d",quartenary:"#2c3044",hoverHighlight:"rgba(179, 162, 127, 0.5)",markerCurrentTime:"#fff",text:"#ffe0b3",background:"#38383b",toast:"#1f1f1f"},vue:{primary:"#258a5d",secondary:"#41B883",ternary:"#35495E",quartenary:"#2a3d51",hoverHighlight:"rgba(160, 219, 171, 0.5)",markerCurrentTime:"#000",text:"white",background:"white"}},we={class:"g-gantt-rows-container"},j=e.defineComponent({__name:"GGanttChart",props:{chartStart:{},chartEnd:{},precision:{default:"day"},barStart:{},barEnd:{},currentTime:{type:Boolean},currentTimeLabel:{default:""},width:{default:"100%"},hideTimeaxis:{type:Boolean,default:!1},colorScheme:{default:"default"},grid:{type:Boolean,default:!1},pushOnOverlap:{type:Boolean,default:!1},noOverlap:{type:Boolean,default:!1},rowHeight:{default:40},highlightedUnits:{default:()=>[]},font:{default:"inherit"},labelColumnTitle:{default:""},labelColumnWidth:{default:"150px"}},emits:["click-bar","mousedown-bar","mouseup-bar","dblclick-bar","mouseenter-bar","mouseleave-bar","dragstart-bar","drag-bar","dragend-bar","contextmenu-bar"],setup(r,{emit:f}){const s=r,h=f,{width:B,font:p,colorScheme:l}=e.toRefs(s),m=e.useSlots(),c=e.computed(()=>typeof l.value!="string"?l.value:P[l.value]||P.default),a=()=>{const d=m.default?.(),n=[];return d&&d.forEach(i=>{if(i.props?.bars){const{label:g,bars:w}=i.props;n.push({label:g,bars:w})}else Array.isArray(i.children)&&i.children.forEach(g=>{const w=g;if(w?.props?.bars){const{label:E,bars:T}=w.props;n.push({label:E,bars:T})}})}),n},b=e.ref(!1),t=e.ref(!1),o=e.ref(void 0);let u;const y=d=>{u&&clearTimeout(u),u=setTimeout(()=>{b.value=!0},800),o.value=d},C=()=>{clearTimeout(u),b.value=!1},k=(d,n,i,g)=>{switch(d.type){case"click":h("click-bar",{bar:n,e:d,datetime:i});break;case"mousedown":h("mousedown-bar",{bar:n,e:d,datetime:i});break;case"mouseup":h("mouseup-bar",{bar:n,e:d,datetime:i});break;case"dblclick":h("dblclick-bar",{bar:n,e:d,datetime:i});break;case"mouseenter":y(n),h("mouseenter-bar",{bar:n,e:d});break;case"mouseleave":C(),h("mouseleave-bar",{bar:n,e:d});break;case"dragstart":t.value=!0,h("dragstart-bar",{bar:n,e:d});break;case"drag":h("drag-bar",{bar:n,e:d});break;case"dragend":t.value=!1,h("dragend-bar",{bar:n,e:d,movedBars:g});break;case"contextmenu":h("contextmenu-bar",{bar:n,e:d,datetime:v.DateTime.isDateTime(i)?i.toJSDate():i});break}},x=e.ref(null),S=ye(x);return e.provide(z,a),e.provide(H,{...e.toRefs(s),colors:c,chartSize:S}),e.provide(F,k),(d,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{class:e.normalizeClass([{"labels-in-column":!!d.labelColumnTitle}])},[d.labelColumnTitle?(e.openBlock(),e.createBlock(ne,{key:0,style:e.normalizeStyle({width:d.labelColumnWidth})},{"label-column-title":e.withCtx(()=>[e.renderSlot(d.$slots,"label-column-title")]),"label-column-row":e.withCtx(({label:i})=>[e.renderSlot(d.$slots,"label-column-row",{label:i})]),_:3},8,["style"])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"ganttChart",ref:x,class:e.normalizeClass(["g-gantt-chart",{"with-column":d.labelColumnTitle}]),style:e.normalizeStyle({width:e.unref(B),background:c.value.background,fontFamily:e.unref(p)})},[d.hideTimeaxis?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(ie,{key:0},{"upper-timeunit":e.withCtx(({label:i,value:g,date:w,dateTime:E})=>[e.renderSlot(d.$slots,"upper-timeunit",{label:i,value:g,date:w,dateTime:E})]),timeunit:e.withCtx(({label:i,value:g,date:w,dateTime:E})=>[e.renderSlot(d.$slots,"timeunit",{label:i,value:g,date:w,dateTime:E})]),_:3})),d.grid?(e.openBlock(),e.createBlock(ee,{key:1,"highlighted-units":d.highlightedUnits},null,8,["highlighted-units"])):e.createCommentVNode("",!0),d.currentTime?(e.openBlock(),e.createBlock(ce,{key:2},{"current-time-label":e.withCtx(()=>[e.renderSlot(d.$slots,"current-time-label")]),_:3})):e.createCommentVNode("",!0),e.createElementVNode("div",we,[e.renderSlot(d.$slots,"default")])],6)],2),e.createVNode(se,{"model-value":b.value||t.value,bar:o.value},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"bar-tooltip",{bar:o.value})]),_:3},8,["model-value","bar"])]))}});function q(r,f=()=>null,s=()=>null,h=_()){const{barStart:B,barEnd:p,pushOnOverlap:l}=h,m=e.ref(!1);let c=0,a;const{mapPositionToTime:b}=V(h),{toDateTime:t}=$(h),o=d=>{const n=document.getElementById(r.ganttBarConfig.id);if(!n)return;switch(c=d.clientX-(n.getBoundingClientRect().left||0),d.target.className){case"g-gantt-bar-handle-left":document.body.style.cursor="ew-resize",a=C;break;case"g-gantt-bar-handle-right":document.body.style.cursor="ew-resize",a=k;break;default:a=y}m.value=!0,window.addEventListener("mousemove",a),window.addEventListener("mouseup",S)},u=()=>{const d=document.getElementById(r.ganttBarConfig.id),n=d?.closest(".g-gantt-row-bars-container")?.getBoundingClientRect();return{barElement:d,barContainer:n}},y=d=>{const{barElement:n,barContainer:i}=u();if(!n||!i)return;const g=n.getBoundingClientRect().width,w=d.clientX-i.left-c,E=w+g;x(w,E)||(r[B.value]=b(w),r[p.value]=b(E),f(d,r))},C=d=>{const{barElement:n,barContainer:i}=u();if(!n||!i)return;const g=d.clientX-i.left,w=b(g);(v.DateTime.isDateTime(w)?w:t(w)>=t(r,"end"))||(r[B.value]=w,f(d,r))},k=d=>{const{barElement:n,barContainer:i}=u();if(!n||!i)return;const g=d.clientX-i.left,w=b(g);(v.DateTime.isDateTime(w)?w:t(w)<=t(r,"start"))||(r[p.value]=w,f(d,r))},x=(d,n)=>{if(!l.value)return!1;const i=r.ganttBarConfig.dragLimitLeft,g=r.ganttBarConfig.dragLimitRight;return d&&i!=null&&d<i||n&&g!=null&&n>g},S=d=>{m.value=!1,document.body.style.cursor="",window.removeEventListener("mousemove",a),window.removeEventListener("mouseup",S),s(d,r)};return{isDragging:m,initDrag:o}}function J(){const r=e.inject(F);if(!r)throw Error("Failed to inject emitBarEvent!");return r}function Be(){const r=_(),f=I(),s=J(),{pushOnOverlap:h,barStart:B,barEnd:p,noOverlap:l}=r,m=new Map,{toDateTime:c,format:a}=$(),b=(n,i)=>{const{initDrag:g}=q(n,o,x,r);s({...i,type:"dragstart"},n),g(i),S(n)},t=(n,i)=>{const g=n.ganttBarConfig.bundle;g!=null&&(f().forEach(w=>{w.bars.forEach(E=>{if(E.ganttBarConfig.bundle===g){const T=E===n?x:()=>null,{initDrag:O}=q(E,o,T,r);O(i),S(E)}})}),s({...i,type:"dragstart"},n))},o=(n,i)=>{s({...n,type:"drag"},i),u(i)},u=n=>{if(!h?.value)return;let i=n,{overlapBar:g,overlapType:w}=y(i);for(;g;){S(g);const E=c(i[B.value]),T=c(i[p.value]),O=c(g[B.value]),M=c(g[p.value]);let D;switch(w){case"left":D=M.diff(E,"minutes").minutes,g[p.value]=a(i[B.value]),g[B.value]=a(O.minus({minutes:D}));break;case"right":D=T.diff(O,"minutes").minutes,g[B.value]=a(T),g[p.value]=a(M.plus({minutes:D}));break;default:console.warn("Vue-Ganttastic: One bar is inside of the other one! This should never occur while push-on-overlap is active!");return}g&&(w==="left"||w==="right")&&C(g,D,w),i=g;const N=y(g);g=N.overlapBar,w=N.overlapType}},y=n=>{let i=!1,g=!1,w=!1;const E=f().find(N=>N.bars.includes(n))?.bars??[],T=c(n[B.value]),O=c(n[p.value]),M=E.find(N=>{if(N===n)return!1;const X=c(N[B.value]),Z=c(N[p.value]);return i=v.Interval.fromDateTimes(X,Z).contains(T),g=v.Interval.fromDateTimes(X,Z).contains(O),w=i&&g,i||g||w});let D=null;return i?D="left":g?D="right":w&&(D="between"),{overlapBar:M,overlapType:D}},C=(n,i,g)=>{S(n),n.ganttBarConfig.bundle&&f().forEach(w=>{w.bars.forEach(E=>{E.ganttBarConfig.bundle===n.ganttBarConfig.bundle&&E!==n&&(S(E),k(E,i,g))})})},k=(n,i,g)=>{switch(g){case"left":n[B.value]=a(c(n,"start").minus({minutes:i})),n[p.value]=a(c(n,"end").minus({minutes:i}));break;case"right":n[B.value]=a(c(n,"start").plus({minutes:i})),n[p.value]=a(c(n,"end").plus({minutes:i}).toJSDate())}u(n)},x=(n,i)=>{d();const g={...n,type:"dragend"};s(g,i,void 0,new Map(m)),m.clear()},S=n=>{if(!m.has(n)){const i=n[B.value],g=n[p.value];m.set(n,{oldStart:i,oldEnd:g})}},d=()=>{if(h.value||!l.value)return;let n=!1;m.forEach((i,g)=>{const{overlapBar:w}=y(g);w!=null&&(n=!0)}),n&&m.forEach(({oldStart:i,oldEnd:g},w)=>{w[B.value]=i,w[p.value]=g})};return{initDragOfBar:b,initDragOfBundle:t}}function ke(){const{pushOnOverlap:r}=_(),f=I(),s=l=>{const m=[];return l!=null&&f().forEach(c=>{c.bars.forEach(a=>{a.ganttBarConfig.bundle===l&&m.push(a)})}),m},h=l=>{if(!r.value||l.ganttBarConfig.pushOnOverlap===!1)return;for(const c of["left","right"]){const a=c,{gapDistanceSoFar:b,bundleBarsAndGapDist:t}=B(l,0,a);let o=b;const u=t;if(!u)continue;for(let C=0;C<u.length;C++){const k=u[C].bar,x=u[C].gapDistance;s(k.ganttBarConfig.bundle).filter(d=>d!==k).forEach(d=>{const n=B(d,x,a),i=n.gapDistanceSoFar,g=n.bundleBarsAndGapDist;i!=null&&(!o||i<o)&&(o=i),g.forEach(w=>{u.find(E=>E.bar===w.bar)||u.push(w)})})}const y=document.getElementById(l.ganttBarConfig.id);o!=null&&a==="left"?l.ganttBarConfig.dragLimitLeft=y.offsetLeft-o:o!=null&&a==="right"&&(l.ganttBarConfig.dragLimitRight=y.offsetLeft+y.offsetWidth+o)}s(l.ganttBarConfig.bundle).forEach(c=>{c.ganttBarConfig.dragLimitLeft=l.ganttBarConfig.dragLimitLeft,c.ganttBarConfig.dragLimitRight=l.ganttBarConfig.dragLimitRight})},B=(l,m=0,c)=>{const a=l.ganttBarConfig.bundle?[{bar:l,gapDistance:m}]:[];let b=l,t=p(b,c);if(c==="left")for(;t;){const o=document.getElementById(b.ganttBarConfig.id),u=document.getElementById(t.ganttBarConfig.id),y=u.offsetLeft+u.offsetWidth;if(m+=o.offsetLeft-y,t.ganttBarConfig.immobile)return{gapDistanceSoFar:m,bundleBarsAndGapDist:a};t.ganttBarConfig.bundle&&a.push({bar:t,gapDistance:m}),b=t,t=p(t,"left")}if(c==="right")for(;t;){const o=document.getElementById(b.ganttBarConfig.id),u=document.getElementById(t.ganttBarConfig.id),y=o.offsetLeft+o.offsetWidth;if(m+=u.offsetLeft-y,t.ganttBarConfig.immobile)return{gapDistanceSoFar:m,bundleBarsAndGapDist:a};t.ganttBarConfig.bundle&&a.push({bar:t,gapDistance:m}),b=t,t=p(t,"right")}return{gapDistanceSoFar:null,bundleBarsAndGapDist:a}},p=(l,m)=>{const c=document.getElementById(l.ganttBarConfig.id),a=f().find(t=>t.bars.includes(l))?.bars??[];let b=[];return m==="left"?b=a.filter(t=>{const o=document.getElementById(t.ganttBarConfig.id);return o&&o.offsetLeft<c.offsetLeft&&t.ganttBarConfig.pushOnOverlap!==!1}):b=a.filter(t=>{const o=document.getElementById(t.ganttBarConfig.id);return o&&o.offsetLeft>c.offsetLeft&&t.ganttBarConfig.pushOnOverlap!==!1}),b.length>0?b.reduce((t,o)=>{const u=document.getElementById(t.ganttBarConfig.id),y=document.getElementById(o.ganttBarConfig.id),C=Math.abs(u.offsetLeft-c.offsetLeft),k=Math.abs(y.offsetLeft-c.offsetLeft);return C<k?t:o},b[0]):null};return{setDragLimitsOfGanttBar:h}}const Ce=["id"],Ee={class:"g-gantt-bar-label"},xe=["innerHTML"],Te=e.defineComponent({__name:"GGanttBar",props:{bar:{}},setup(r){const f=r,s=J(),h=_(),{rowHeight:B}=h,{bar:p}=e.toRefs(f),{mapTimeToPosition:l,mapPositionToTime:m}=V(),{initDragOfBar:c,initDragOfBundle:a}=Be(),{setDragLimitsOfGanttBar:b}=ke(),t=e.ref(!1),o=e.computed(()=>p.value.ganttBarConfig);function u(T){o.value.bundle!=null?a(p.value,T):c(p.value,T),t.value=!0}const y=()=>{b(p.value),!o.value.immobile&&(window.addEventListener("mousemove",u,{once:!0}),window.addEventListener("mouseup",()=>{window.removeEventListener("mousemove",u),t.value=!1},{once:!0}))},C=e.inject(A),k=T=>{T.preventDefault(),T.type==="mousedown"&&y();const O=C?.value?.getBoundingClientRect();if(!O)return;const M=m(T.clientX-O.left);let D;M instanceof Date||typeof M=="string"?D=M:typeof M?.toJSDate=="function"?D=M.toJSDate():D=void 0,s(T,p.value,D)},{barStart:x,barEnd:S,width:d,chartStart:n,chartEnd:i,chartSize:g}=h,w=e.ref(0),E=e.ref(0);return e.onMounted(()=>{e.watch([p,d,n,i,g.width],()=>{w.value=l(p.value[x.value]),E.value=l(p.value[S.value])},{deep:!0,immediate:!0})}),(T,O)=>(e.openBlock(),e.createElementBlock("div",{id:o.value.id,class:e.normalizeClass(["g-gantt-bar",o.value.class||""]),style:e.normalizeStyle({...o.value.style,position:"absolute",top:`${e.unref(B)*.1}px`,left:`${w.value}px`,width:`${E.value-w.value}px`,height:`${e.unref(B)*.8}px`,zIndex:t.value?3:2}),onMousedown:k,onClick:k,onDblclick:k,onMouseenter:k,onMouseleave:k,onContextmenu:k},[e.createElementVNode("div",Ee,[e.renderSlot(T.$slots,"default",{bar:e.unref(p)},()=>[e.createElementVNode("div",null,e.toDisplayString(o.value.label||""),1),o.value.html?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:o.value.html},null,8,xe)):e.createCommentVNode("",!0)])]),o.value.hasHandles?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[O[0]||(O[0]=e.createElementVNode("div",{class:"g-gantt-bar-handle-left"},null,-1)),O[1]||(O[1]=e.createElementVNode("div",{class:"g-gantt-bar-handle-right"},null,-1))],64)):e.createCommentVNode("",!0)],46,Ce))}}),K=e.defineComponent({__name:"GGanttRow",props:{label:{},bars:{},highlightOnHover:{type:Boolean}},emits:["drop"],setup(r,{emit:f}){const s=r,h=f,{rowHeight:B,colors:p,labelColumnTitle:l}=_(),{highlightOnHover:m}=e.toRefs(s),c=e.ref(!1),a=e.computed(()=>({height:`${B.value}px`,background:m?.value&&c.value?p.value.hoverHighlight:null})),{mapPositionToTime:b}=V(),t=e.ref(null);e.provide(A,t);const o=y=>{const C=t.value?.getBoundingClientRect();if(!C){console.error("Vue-Ganttastic: failed to find bar container element for row.");return}const k=y.clientX-C.left,x=b(k);h("drop",{e:y,datetime:x})},u=y=>!y||/^\s*$/.test(y);return(y,C)=>(e.openBlock(),e.createElementBlock("div",{class:"g-gantt-row",style:e.normalizeStyle(a.value),onDragover:C[0]||(C[0]=e.withModifiers(k=>c.value=!0,["prevent"])),onDragleave:C[1]||(C[1]=k=>c.value=!1),onDrop:C[2]||(C[2]=k=>o(k)),onMouseover:C[3]||(C[3]=k=>c.value=!0),onMouseleave:C[4]||(C[4]=k=>c.value=!1)},[!u(y.label)&&!e.unref(l)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"g-gantt-row-label",style:e.normalizeStyle({background:e.unref(p).primary,color:e.unref(p).text})},[e.renderSlot(y.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(y.label),1)])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"barContainer",ref:t,class:"g-gantt-row-bars-container"},y.$attrs),[e.createVNode(e.TransitionGroup,{name:"bar-transition",tag:"div"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.bars,k=>(e.openBlock(),e.createBlock(Te,{key:k.ganttBarConfig.id,bar:k},{default:e.withCtx(()=>[e.renderSlot(y.$slots,"bar-label",{bar:k})]),_:2},1032,["bar"]))),128))]),_:3})],16)],36))}}),Y={install(r,f){r.component("GGanttChart",j),r.component("GGanttRow",K)}};L.GGanttChart=j,L.GGanttRow=K,L.default=Y,L.ganttastic=Y,Object.defineProperties(L,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});