vue-ganttastic-custom
Version:
A simple and customizable Gantt chart component for Vue.js
1,477 lines • 54.1 kB
JavaScript
import H from "dayjs";
import { inject as lt, computed as G, defineComponent as K, openBlock as O, createElementBlock as D, Fragment as Q, renderList as X, unref as E, normalizeStyle as $, renderSlot as Y, createElementVNode as L, toDisplayString as P, createTextVNode as ut, createCommentVNode as V, toRefs as nt, ref as R, watch as ct, nextTick as St, createBlock as et, Teleport as te, createVNode as Bt, Transition as ee, withCtx as q, getCurrentScope as ne, onScopeDispose as re, getCurrentInstance as ae, onMounted as Lt, useSlots as oe, provide as st, normalizeClass as bt, withModifiers as ie, mergeProps as se, TransitionGroup as le } from "vue";
var J = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Yt = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
var n = "day";
return function(r, v, l) {
var g = function(a) {
return a.add(4 - a.isoWeekday(), n);
}, e = v.prototype;
e.isoWeekYear = function() {
return g(this).year();
}, e.isoWeek = function(a) {
if (!this.$utils().u(a))
return this.add(7 * (a - this.isoWeek()), n);
var i, d, s, h, w = g(this), m = (i = this.isoWeekYear(), d = this.$u, s = (d ? l.utc : l)().year(i).startOf("year"), h = 4 - s.isoWeekday(), s.isoWeekday() > 4 && (h += 7), s.add(h, n));
return w.diff(m, "week") + 1;
}, e.isoWeekday = function(a) {
return this.$utils().u(a) ? this.day() || 7 : this.day(this.day() % 7 ? a : a - 7);
};
var o = e.startOf;
e.startOf = function(a, i) {
var d = this.$utils(), s = !!d.u(i) || i;
return d.p(a) === "isoweek" ? s ? this.date(this.date() - (this.isoWeekday() - 1)).startOf("day") : this.date(this.date() - 1 - (this.isoWeekday() - 1) + 7).endOf("day") : o.bind(this)(a, i);
};
};
});
})(Yt);
const ue = Yt.exports;
var Gt = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
return function(n, r) {
r.prototype.isSameOrBefore = function(v, l) {
return this.isSame(v, l) || this.isBefore(v, l);
};
};
});
})(Gt);
const ce = Gt.exports;
var Rt = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
return function(n, r) {
r.prototype.isSameOrAfter = function(v, l) {
return this.isSame(v, l) || this.isAfter(v, l);
};
};
});
})(Rt);
const de = Rt.exports;
var It = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
return function(n, r, v) {
r.prototype.isBetween = function(l, g, e, o) {
var a = v(l), i = v(g), d = (o = o || "()")[0] === "(", s = o[1] === ")";
return (d ? this.isAfter(a, e) : !this.isBefore(a, e)) && (s ? this.isBefore(i, e) : !this.isAfter(i, e)) || (d ? this.isBefore(a, e) : !this.isAfter(a, e)) && (s ? this.isAfter(i, e) : !this.isBefore(i, e));
};
};
});
})(It);
const fe = It.exports;
var At = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
var n = "week", r = "year";
return function(v, l, g) {
var e = l.prototype;
e.week = function(o) {
if (o === void 0 && (o = null), o !== null)
return this.add(7 * (o - this.week()), "day");
var a = this.$locale().yearStart || 1;
if (this.month() === 11 && this.date() > 25) {
var i = g(this).startOf(r).add(1, r).date(a), d = g(this).endOf(n);
if (i.isBefore(d))
return 1;
}
var s = g(this).startOf(r).date(a).startOf(n).subtract(1, "millisecond"), h = this.diff(s, n, !0);
return h < 0 ? g(this).startOf("week").week() : Math.ceil(h);
}, e.weeks = function(o) {
return o === void 0 && (o = null), this.week(o);
};
};
});
})(At);
const ge = At.exports;
var Ht = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
return function(n, r, v) {
var l = r.prototype, g = l.format;
v.en.ordinal = function(e) {
var o = ["th", "st", "nd", "rd"], a = e % 100;
return "[" + e + (o[(a - 20) % 10] || o[a] || o[0]) + "]";
}, l.format = function(e) {
var o = this, a = this.$locale();
if (!this.isValid())
return g.bind(this)(e);
var i = this.$utils(), d = (e || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(s) {
switch (s) {
case "Q":
return Math.ceil((o.$M + 1) / 3);
case "Do":
return a.ordinal(o.$D);
case "gggg":
return o.weekYear();
case "GGGG":
return o.isoWeekYear();
case "wo":
return a.ordinal(o.week(), "W");
case "w":
case "ww":
return i.s(o.week(), s === "w" ? 1 : 2, "0");
case "W":
case "WW":
return i.s(o.isoWeek(), s === "W" ? 1 : 2, "0");
case "k":
case "kk":
return i.s(String(o.$H === 0 ? 24 : o.$H), s === "k" ? 1 : 2, "0");
case "X":
return Math.floor(o.$d.getTime() / 1e3);
case "x":
return o.$d.getTime();
case "z":
return "[" + o.offsetName() + "]";
case "zzz":
return "[" + o.offsetName("long") + "]";
default:
return s;
}
});
return g.bind(this)(d);
};
};
});
})(Ht);
const he = Ht.exports;
var Wt = { exports: {} };
(function(t, c) {
(function(n, r) {
t.exports = r();
})(J, function() {
var n = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, r = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, v = /\d\d/, l = /\d\d?/, g = /\d*[^-_:/,()\s\d]+/, e = {}, o = function(m) {
return (m = +m) + (m > 68 ? 1900 : 2e3);
}, a = function(m) {
return function(p) {
this[m] = +p;
};
}, i = [/[+-]\d\d:?(\d\d)?|Z/, function(m) {
(this.zone || (this.zone = {})).offset = function(p) {
if (!p || p === "Z")
return 0;
var B = p.match(/([+-]|\d\d)/g), k = 60 * B[1] + (+B[2] || 0);
return k === 0 ? 0 : B[0] === "+" ? -k : k;
}(m);
}], d = function(m) {
var p = e[m];
return p && (p.indexOf ? p : p.s.concat(p.f));
}, s = function(m, p) {
var B, k = e.meridiem;
if (k) {
for (var f = 1; f <= 24; f += 1)
if (m.indexOf(k(f, 0, p)) > -1) {
B = f > 12;
break;
}
} else
B = m === (p ? "pm" : "PM");
return B;
}, h = { A: [g, function(m) {
this.afternoon = s(m, !1);
}], a: [g, function(m) {
this.afternoon = s(m, !0);
}], S: [/\d/, function(m) {
this.milliseconds = 100 * +m;
}], SS: [v, function(m) {
this.milliseconds = 10 * +m;
}], SSS: [/\d{3}/, function(m) {
this.milliseconds = +m;
}], s: [l, a("seconds")], ss: [l, a("seconds")], m: [l, a("minutes")], mm: [l, a("minutes")], H: [l, a("hours")], h: [l, a("hours")], HH: [l, a("hours")], hh: [l, a("hours")], D: [l, a("day")], DD: [v, a("day")], Do: [g, function(m) {
var p = e.ordinal, B = m.match(/\d+/);
if (this.day = B[0], p)
for (var k = 1; k <= 31; k += 1)
p(k).replace(/\[|\]/g, "") === m && (this.day = k);
}], M: [l, a("month")], MM: [v, a("month")], MMM: [g, function(m) {
var p = d("months"), B = (d("monthsShort") || p.map(function(k) {
return k.slice(0, 3);
})).indexOf(m) + 1;
if (B < 1)
throw new Error();
this.month = B % 12 || B;
}], MMMM: [g, function(m) {
var p = d("months").indexOf(m) + 1;
if (p < 1)
throw new Error();
this.month = p % 12 || p;
}], Y: [/[+-]?\d+/, a("year")], YY: [v, function(m) {
this.year = o(m);
}], YYYY: [/\d{4}/, a("year")], Z: i, ZZ: i };
function w(m) {
var p, B;
p = m, B = e && e.formats;
for (var k = (m = p.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(C, T, M) {
var S = M && M.toUpperCase();
return T || B[M] || n[M] || B[S].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(I, W, j) {
return W || j.slice(1);
});
})).match(r), f = k.length, x = 0; x < f; x += 1) {
var u = k[x], b = h[u], y = b && b[0], _ = b && b[1];
k[x] = _ ? { regex: y, parser: _ } : u.replace(/^\[|\]$/g, "");
}
return function(C) {
for (var T = {}, M = 0, S = 0; M < f; M += 1) {
var I = k[M];
if (typeof I == "string")
S += I.length;
else {
var W = I.regex, j = I.parser, U = C.slice(S), N = W.exec(U)[0];
j.call(T, N), C = C.replace(N, "");
}
}
return function(F) {
var z = F.afternoon;
if (z !== void 0) {
var tt = F.hours;
z ? tt < 12 && (F.hours += 12) : tt === 12 && (F.hours = 0), delete F.afternoon;
}
}(T), T;
};
}
return function(m, p, B) {
B.p.customParseFormat = !0, m && m.parseTwoDigitYear && (o = m.parseTwoDigitYear);
var k = p.prototype, f = k.parse;
k.parse = function(x) {
var u = x.date, b = x.utc, y = x.args;
this.$u = b;
var _ = y[1];
if (typeof _ == "string") {
var C = y[2] === !0, T = y[3] === !0, M = C || T, S = y[2];
T && (S = y[2]), e = this.$locale(), !C && S && (e = B.Ls[S]), this.$d = function(U, N, F) {
try {
if (["x", "X"].indexOf(N) > -1)
return new Date((N === "X" ? 1e3 : 1) * U);
var z = w(N)(U), tt = z.year, ot = z.month, Qt = z.day, Xt = z.hours, Kt = z.minutes, Zt = z.seconds, Jt = z.milliseconds, kt = z.zone, ft = new Date(), gt = Qt || (tt || ot ? 1 : ft.getDate()), ht = tt || ft.getFullYear(), it = 0;
tt && !ot || (it = ot > 0 ? ot - 1 : ft.getMonth());
var mt = Xt || 0, pt = Kt || 0, vt = Zt || 0, yt = Jt || 0;
return kt ? new Date(Date.UTC(ht, it, gt, mt, pt, vt, yt + 60 * kt.offset * 1e3)) : F ? new Date(Date.UTC(ht, it, gt, mt, pt, vt, yt)) : new Date(ht, it, gt, mt, pt, vt, yt);
} catch {
return new Date("");
}
}(u, _, b), this.init(), S && S !== !0 && (this.$L = this.locale(S).$L), M && u != this.format(_) && (this.$d = new Date("")), e = {};
} else if (_ instanceof Array)
for (var I = _.length, W = 1; W <= I; W += 1) {
y[1] = _[W - 1];
var j = B.apply(this, y);
if (j.isValid()) {
this.$d = j.$d, this.$L = j.$L, this.init();
break;
}
W === I && (this.$d = new Date(""));
}
else
f.call(this, x);
};
};
});
})(Wt);
const me = Wt.exports, Ft = Symbol("CHART_ROWS_KEY"), zt = Symbol("CONFIG_KEY"), Pt = Symbol("EMIT_BAR_EVENT_KEY"), jt = Symbol("BAR_CONTAINER_KEY");
function A() {
const t = lt(zt);
if (!t)
throw Error("Failed to inject config!");
return t;
}
const Ut = "YYYY-MM-DD HH:mm:ss";
function rt(t = A()) {
const { chartStart: c, chartEnd: n, barStart: r, barEnd: v, dateFormat: l } = t, g = G(() => o(c.value)), e = G(() => o(n.value)), o = (i, d) => {
let s;
if (d !== void 0 && typeof i != "string" && !(i instanceof Date) && (s = d === "start" ? i[r.value] : i[v.value]), typeof i == "string")
s = i;
else if (i instanceof Date)
return H(i);
const h = l.value || Ut;
return H(s, h, !0);
};
return {
chartStartDayjs: g,
chartEndDayjs: e,
toDayjs: o,
format: (i, d) => d === !1 ? i instanceof Date ? i : H(i).toDate() : (typeof i == "string" || i instanceof Date ? o(i) : i).format(d)
};
}
function Nt() {
const { precision: t } = A(), { chartStartDayjs: c, chartEndDayjs: n } = rt(), r = G(() => {
switch (t == null ? void 0 : t.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'"
);
}
}), v = G(() => {
switch (t.value) {
case "date":
return "day";
case "week":
return "isoWeek";
default:
return t.value;
}
}), l = {
hour: "HH",
date: "DD.MMM",
day: "DD.MMM",
week: "WW",
month: "MMMM YYYY",
year: "YYYY"
};
return {
timeaxisUnits: G(() => {
const e = [], o = [], a = n.value.diff(c.value, "minutes", !0), i = r.value, d = v.value;
let s = c.value, h = c.value;
for (; h.isSameOrBefore(n.value); ) {
const w = h.endOf(d), p = w.isAfter(n.value) ? n.value.diff(h, "minutes", !0) / a * 100 : w.diff(h, "minutes", !0) / a * 100;
o.push({
label: h.format(l[t == null ? void 0 : t.value]),
value: String(h),
date: h.toDate(),
width: String(p) + "%"
}), h = w.add(1, d === "isoWeek" ? "week" : d).startOf(d);
}
for (; s.isSameOrBefore(n.value); ) {
const w = s.endOf(i), p = w.isAfter(n.value) ? n.value.diff(s, "minutes", !0) / a * 100 : w.diff(s, "minutes", !0) / a * 100;
e.push({
label: s.format(l[i]),
value: String(s),
date: s.toDate(),
width: String(p) + "%"
}), s = w.add(1, i).startOf(i);
}
return { upperUnits: e, lowerUnits: o };
})
};
}
const pe = { class: "g-grid-container" }, ve = /* @__PURE__ */ K({
__name: "GGanttGrid",
props: {
highlightedUnits: {}
},
setup(t) {
const { colors: c } = A(), { timeaxisUnits: n } = Nt();
return (r, v) => (O(), D("div", pe, [
(O(!0), D(Q, null, X(E(n).lowerUnits, ({ label: l, value: g, width: e }) => {
var o;
return O(), D("div", {
key: l,
class: "g-grid-line",
style: $({
width: e,
background: (o = r.highlightedUnits) != null && o.includes(Number(g)) ? E(c).hoverHighlight : void 0
})
}, null, 4);
}), 128))
]));
}
});
function _t() {
const t = lt(Ft);
if (!t)
throw Error("Failed to inject getChartRows!");
return t;
}
const ye = { class: "g-label-column-rows" }, be = /* @__PURE__ */ K({
__name: "GGanttLabelColumn",
setup(t) {
const { font: c, colors: n, labelColumnTitle: r, rowHeight: v } = A(), l = _t();
return (g, e) => (O(), D("div", {
class: "g-label-column",
style: $({ fontFamily: E(c), color: E(n).text })
}, [
Y(g.$slots, "label-column-title", {}, () => [
L("div", {
class: "g-label-column-header",
style: $({ background: E(n).primary })
}, P(E(r)), 5)
]),
L("div", ye, [
(O(!0), D(Q, null, X(E(l)(), ({ label: o }, a) => (O(), D("div", {
key: `${o}_${a}`,
class: "g-label-column-row",
style: $({
background: a % 2 === 0 ? E(n).ternary : E(n).quartenary,
height: `${E(v)}px`
})
}, [
Y(g.$slots, "label-column-row", { label: o }, () => [
L("span", null, P(o), 1)
])
], 4))), 128))
])
], 4));
}
});
const we = { class: "g-timeaxis" }, xe = { class: "g-timeunits-container" }, Be = { class: "g-timeunits-container" }, _e = { key: 0 }, ke = { key: 1 }, Ce = {
key: 2,
style: { width: "100%", position: "relative", display: "flex" }
}, Ee = /* @__PURE__ */ K({
__name: "GGanttTimeaxis",
props: {
isActiveInSeconds: { type: Boolean }
},
setup(t) {
const { precision: c, colors: n } = A(), { timeaxisUnits: r } = Nt(), v = G(() => Array.from({ length: 3600 }, (g, e) => e + 1).filter(
(g) => (g - 1) % 15 === 0
));
return (l, g) => (O(), D("div", we, [
L("div", xe, [
(O(!0), D(Q, null, X(E(r).upperUnits, ({ label: e, value: o, date: a, width: i }, d) => (O(), D("div", {
key: e,
class: "g-upper-timeunit",
style: $({
background: d % 2 === 0 ? E(n).primary : E(n).secondary,
color: E(n).text,
width: i
})
}, [
Y(l.$slots, "upper-timeunit", {
label: e,
value: o,
date: a
}, () => [
ut(P(e), 1)
])
], 4))), 128))
]),
L("div", Be, [
(O(!0), D(Q, null, X(E(r).lowerUnits, ({ label: e, value: o, date: a, width: i }, d) => (O(), D("div", {
key: e,
class: "g-timeunit",
style: $({
background: d % 2 === 0 ? E(n).ternary : E(n).quartenary,
color: E(n).text,
flexDirection: E(c) === "hour" ? "column" : "row",
alignItems: E(c) === "hour" ? "" : "center",
width: i
})
}, [
Y(l.$slots, "timeunit", {
label: e,
value: o,
date: a
}, () => [
l.isActiveInSeconds ? (O(), D("strong", _e, P(e), 1)) : (O(), D("span", ke, P(e), 1)),
l.isActiveInSeconds ? (O(), D("div", Ce, [
(O(), D(Q, null, X(60, (s) => L("div", {
key: s,
class: "g-timeaxis-hour-pin",
style: $({
background: E(n).text,
position: "absolute",
top: 0,
left: `${(s - 1) * (100 / 60)}%`
})
}, null, 4)), 64)),
(O(), D(Q, null, X(60, (s) => L("span", {
key: `label-${s}`,
style: $({
position: "absolute",
top: "-20px",
left: `${(s - 1) * (100 / 60)}%`,
textAlign: "center",
color: E(n).text,
fontSize: "7px"
})
}, P(s === 1 ? "" : (s - 1) * 1), 5)), 64)),
(O(!0), D(Q, null, X(v.value, (s) => (O(), D("div", {
key: s,
class: "g-timeaxis-second-pin",
style: $({
left: `${(s - 1) * (100 / 3600)}%`
})
}, [
L("span", {
style: $({
left: `${(s - 1) * (100 / 3600)}%`
})
}, P((s - 1) % 60 === 0 ? "" : (s - 1) % 60), 5)
], 4))), 128))
])) : V("", !0)
]),
E(c) === "hour" ? (O(), D("div", {
key: 0,
class: "g-timeaxis-hour-pin",
style: $({ background: E(n).text })
}, null, 4)) : V("", !0)
], 4))), 128))
])
]));
}
});
const Oe = "cadetblue", De = /* @__PURE__ */ K({
__name: "GGanttBarTooltip",
props: {
bar: {},
modelValue: { type: Boolean }
},
setup(t) {
const c = t, n = {
hour: "HH:mm:ss.SSS",
day: "DD. MMM HH:mm:ss.SSS",
date: "DD. MMMM YYYY",
month: "DD. MMMM YYYY",
week: "DD. MMMM YYYY (WW)"
}, { bar: r } = nt(c), { precision: v, font: l, barStart: g, barEnd: e, rowHeight: o } = A(), a = R("0px"), i = R("0px");
ct(
() => c.bar,
async () => {
var u;
await St();
const p = ((u = r == null ? void 0 : r.value) == null ? void 0 : u.ganttBarConfig.id) || "";
if (!p)
return;
const B = document.getElementById(p), { top: k, left: f } = (B == null ? void 0 : B.getBoundingClientRect()) || {
top: 0,
left: 0
}, x = Math.max(f, 10);
a.value = `${k + o.value - 10}px`, i.value = `${x}px`;
},
{ deep: !0, immediate: !0 }
);
const d = G(() => {
var p, B;
return ((B = (p = r == null ? void 0 : r.value) == null ? void 0 : p.ganttBarConfig.style) == null ? void 0 : B.background) || Oe;
}), { toDayjs: s } = rt(), h = G(() => {
var p;
return (p = r.value) == null ? void 0 : p[g.value];
}), w = G(() => {
var p;
return (p = r.value) == null ? void 0 : p[e.value];
}), m = G(() => {
if (!(r != null && r.value))
return "";
const p = n[v.value], B = s(h.value).format(p), k = s(w.value).format(p);
return `${B} \u2013 ${k}`;
});
return (p, B) => (O(), et(te, { to: "body" }, [
Bt(ee, {
name: "g-fade",
mode: "out-in"
}, {
default: q(() => [
p.modelValue ? (O(), D("div", {
key: 0,
class: "g-gantt-tooltip",
style: $({
top: a.value,
left: i.value,
fontFamily: E(l)
})
}, [
L("div", {
class: "g-gantt-tooltip-color-dot",
style: $({ background: d.value })
}, null, 4),
Y(p.$slots, "default", {
bar: E(r),
barStart: h.value,
barEnd: w.value
}, () => [
ut(P(m.value), 1)
])
], 4)) : V("", !0)
]),
_: 3
})
]));
}
});
function dt(t = A()) {
const { dateFormat: c, chartSize: n } = t, { chartStartDayjs: r, chartEndDayjs: v, toDayjs: l, format: g } = rt(t), e = G(() => v.value.diff(r.value, "minutes"));
return {
mapTimeToPosition: (i) => {
const d = n.width.value || 0, s = l(i).diff(r.value, "minutes", !0);
return Math.ceil(s / e.value * d);
},
mapPositionToTime: (i) => {
const d = n.width.value || 0, s = i / d * e.value;
return g(r.value.add(s, "minutes"), c.value);
}
};
}
const Te = /* @__PURE__ */ K({
__name: "GGanttCurrentTime",
setup(t) {
const { mapTimeToPosition: c } = dt(), n = R(H()), { colors: r, dateFormat: v, currentTimeLabel: l } = A(), g = G(() => {
const e = v.value || "YYYY-MM-DD HH:mm";
return c(H(n.value, e).format(e));
});
return (e, o) => (O(), D("div", {
class: "g-grid-current-time",
style: $({
left: `${g.value}px`
})
}, [
L("div", {
class: "g-grid-current-time-marker",
style: $({
border: `1px dashed ${E(r).markerCurrentTime}`
})
}, null, 4),
L("span", {
class: "g-grid-current-time-text",
style: $({ color: E(r).markerCurrentTime })
}, [
Y(e.$slots, "current-time-label", {}, () => [
ut(P(E(l)), 1)
])
], 4)
], 4));
}
});
var Ct;
const at = typeof window < "u";
at && ((Ct = window == null ? void 0 : window.navigator) == null ? void 0 : Ct.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
function Me(t) {
return typeof t == "function" ? t() : E(t);
}
function $e(t) {
return t;
}
function Se(t) {
return ne() ? (re(t), !0) : !1;
}
function Le(t, c = !0) {
ae() ? Lt(t) : c ? t() : St(t);
}
function Vt(t) {
var c;
const n = Me(t);
return (c = n == null ? void 0 : n.$el) != null ? c : n;
}
const Ye = at ? window : void 0;
at && window.document;
at && window.navigator;
at && window.location;
function Ge(t, c = !1) {
const n = R(), r = () => n.value = Boolean(t());
return r(), Le(r, c), n;
}
const wt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, xt = "__vueuse_ssr_handlers__";
wt[xt] = wt[xt] || {};
wt[xt];
var Et = Object.getOwnPropertySymbols, Re = Object.prototype.hasOwnProperty, Ie = Object.prototype.propertyIsEnumerable, Ae = (t, c) => {
var n = {};
for (var r in t)
Re.call(t, r) && c.indexOf(r) < 0 && (n[r] = t[r]);
if (t != null && Et)
for (var r of Et(t))
c.indexOf(r) < 0 && Ie.call(t, r) && (n[r] = t[r]);
return n;
};
function He(t, c, n = {}) {
const r = n, { window: v = Ye } = r, l = Ae(r, ["window"]);
let g;
const e = Ge(() => v && "ResizeObserver" in v), o = () => {
g && (g.disconnect(), g = void 0);
}, a = ct(() => Vt(t), (d) => {
o(), e.value && v && d && (g = new ResizeObserver(c), g.observe(d, l));
}, { immediate: !0, flush: "post" }), i = () => {
o(), a();
};
return Se(i), {
isSupported: e,
stop: i
};
}
function We(t, c = { width: 0, height: 0 }, n = {}) {
const r = R(c.width), v = R(c.height);
return He(t, ([l]) => {
r.value = l.contentRect.width, v.value = l.contentRect.height;
}, n), ct(() => Vt(t), (l) => {
r.value = l ? c.width : 0, v.value = l ? c.height : 0;
}), {
width: r,
height: v
};
}
var Ot;
(function(t) {
t.UP = "UP", t.RIGHT = "RIGHT", t.DOWN = "DOWN", t.LEFT = "LEFT", t.NONE = "NONE";
})(Ot || (Ot = {}));
var Fe = Object.defineProperty, Dt = Object.getOwnPropertySymbols, ze = Object.prototype.hasOwnProperty, Pe = Object.prototype.propertyIsEnumerable, Tt = (t, c, n) => c in t ? Fe(t, c, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[c] = n, je = (t, c) => {
for (var n in c || (c = {}))
ze.call(c, n) && Tt(t, n, c[n]);
if (Dt)
for (var n of Dt(c))
Pe.call(c, n) && Tt(t, n, c[n]);
return t;
};
const Ue = {
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
easeInQuart: [0.5, 0, 0.75, 0],
easeOutQuart: [0.25, 1, 0.5, 1],
easeInOutQuart: [0.76, 0, 0.24, 1],
easeInQuint: [0.64, 0, 0.78, 0],
easeOutQuint: [0.22, 1, 0.36, 1],
easeInOutQuint: [0.83, 0, 0.17, 1],
easeInExpo: [0.7, 0, 0.84, 0],
easeOutExpo: [0.16, 1, 0.3, 1],
easeInOutExpo: [0.87, 0, 0.13, 1],
easeInCirc: [0.55, 0, 1, 0.45],
easeOutCirc: [0, 0.55, 0.45, 1],
easeInOutCirc: [0.85, 0, 0.15, 1],
easeInBack: [0.36, 0, 0.66, -0.56],
easeOutBack: [0.34, 1.56, 0.64, 1],
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
};
je({
linear: $e
}, Ue);
const Mt = {
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"
}
}, Ne = { class: "g-gantt-rows-container" }, Ve = /* @__PURE__ */ K({
__name: "GGanttChart",
props: {
chartStart: {},
chartEnd: {},
precision: { default: "day" },
barStart: {},
barEnd: {},
currentTime: { type: Boolean },
currentTimeLabel: { default: "" },
dateFormat: { type: [String, Boolean], default: Ut },
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(t, { emit: c }) {
const n = t, { width: r, font: v, colorScheme: l } = nt(n), g = G(() => parseFloat(r.value) > 500), e = oe(), o = G(
() => typeof l.value != "string" ? l.value : Mt[l.value] || Mt.default
), a = () => {
var u;
const f = (u = e.default) == null ? void 0 : u.call(e), x = [];
return f && f.forEach((b) => {
var y;
if ((y = b.props) != null && y.bars) {
const { label: _, bars: C } = b.props;
x.push({ label: _, bars: C });
} else
Array.isArray(b.children) && b.children.forEach((_) => {
var T;
const C = _;
if ((T = C == null ? void 0 : C.props) != null && T.bars) {
const { label: M, bars: S } = C.props;
x.push({ label: M, bars: S });
}
});
}), x;
}, i = R(!1), d = R(!1), s = R(void 0);
let h;
const w = (f) => {
h && clearTimeout(h), h = setTimeout(() => {
i.value = !0;
}, 800), s.value = f;
}, m = () => {
clearTimeout(h), i.value = !1;
}, p = (f, x, u, b) => {
switch (f.type) {
case "click":
c("click-bar", { bar: x, e: f, datetime: u });
break;
case "mousedown":
c("mousedown-bar", { bar: x, e: f, datetime: u });
break;
case "mouseup":
c("mouseup-bar", { bar: x, e: f, datetime: u });
break;
case "dblclick":
c("dblclick-bar", { bar: x, e: f, datetime: u });
break;
case "mouseenter":
w(x), c("mouseenter-bar", { bar: x, e: f });
break;
case "mouseleave":
m(), c("mouseleave-bar", { bar: x, e: f });
break;
case "dragstart":
d.value = !0, c("dragstart-bar", { bar: x, e: f });
break;
case "drag":
c("drag-bar", { bar: x, e: f });
break;
case "dragend":
d.value = !1, c("dragend-bar", { bar: x, e: f, movedBars: b });
break;
case "contextmenu":
c("contextmenu-bar", { bar: x, e: f, datetime: u });
break;
}
}, B = R(null), k = We(B);
return st(Ft, a), st(zt, {
...nt(n),
colors: o,
chartSize: k
}), st(Pt, p), (f, x) => (O(), D("div", null, [
L("div", {
class: bt([{ "labels-in-column": !!f.labelColumnTitle }])
}, [
f.labelColumnTitle ? (O(), et(be, {
key: 0,
style: $({
width: f.labelColumnWidth
})
}, {
"label-column-title": q(() => [
Y(f.$slots, "label-column-title")
]),
"label-column-row": q(({ label: u }) => [
Y(f.$slots, "label-column-row", { label: u })
]),
_: 3
}, 8, ["style"])) : V("", !0),
L("div", {
ref_key: "ganttChart",
ref: B,
class: bt(["g-gantt-chart", { "with-column": f.labelColumnTitle }]),
style: $({ width: E(r), background: o.value.background, fontFamily: E(v) })
}, [
f.hideTimeaxis ? V("", !0) : (O(), et(Ee, {
key: 0,
"is-active-in-seconds": g.value
}, {
"upper-timeunit": q(({ label: u, value: b, date: y }) => [
Y(f.$slots, "upper-timeunit", {
label: u,
value: b,
date: y
})
]),
timeunit: q(({ label: u, value: b, date: y }) => [
Y(f.$slots, "timeunit", {
label: u,
value: b,
date: y
})
]),
_: 3
}, 8, ["is-active-in-seconds"])),
f.grid ? (O(), et(ve, {
key: 1,
"highlighted-units": f.highlightedUnits
}, null, 8, ["highlighted-units"])) : V("", !0),
f.currentTime ? (O(), et(Te, { key: 2 }, {
"current-time-label": q(() => [
Y(f.$slots, "current-time-label")
]),
_: 3
})) : V("", !0),
L("div", Ne, [
Y(f.$slots, "default")
])
], 6)
], 2),
Bt(De, {
"model-value": i.value || d.value,
bar: s.value
}, {
default: q(() => [
Y(f.$slots, "bar-tooltip", { bar: s.value })
]),
_: 3
}, 8, ["model-value", "bar"])
]));
}
});
function $t(t, c = () => null, n = () => null, r = A()) {
const { barStart: v, barEnd: l, pushOnOverlap: g } = r, e = R(!1);
let o = 0, a;
const { mapPositionToTime: i } = dt(r), { toDayjs: d } = rt(r), s = (f) => {
const x = document.getElementById(t.ganttBarConfig.id);
if (!x)
return;
switch (o = f.clientX - (x.getBoundingClientRect().left || 0), f.target.className) {
case "g-gantt-bar-handle-left":
document.body.style.cursor = "ew-resize", a = m;
break;
case "g-gantt-bar-handle-right":
document.body.style.cursor = "ew-resize", a = p;
break;
default:
a = w;
}
e.value = !0, window.addEventListener("mousemove", a), window.addEventListener("mouseup", k);
}, h = () => {
var u;
const f = document.getElementById(t.ganttBarConfig.id), x = (u = f == null ? void 0 : f.closest(".g-gantt-row-bars-container")) == null ? void 0 : u.getBoundingClientRect();
return { barElement: f, barContainer: x };
}, w = (f) => {
const { barElement: x, barContainer: u } = h();
if (!x || !u)
return;
const b = x.getBoundingClientRect().width, y = f.clientX - u.left - o, _ = y + b;
B(y, _) || (t[v.value] = i(y), t[l.value] = i(_), c(f, t));
}, m = (f) => {
const { barElement: x, barContainer: u } = h();
if (!x || !u)
return;
const b = f.clientX - u.left, y = i(b);
d(y).isSameOrAfter(d(t, "end")) || (t[v.value] = y, c(f, t));
}, p = (f) => {
const { barElement: x, barContainer: u } = h();
if (!x || !u)
return;
const b = f.clientX - u.left, y = i(b);
d(y).isSameOrBefore(d(t, "start")) || (t[l.value] = y, c(f, t));
}, B = (f, x) => {
if (!g.value)
return !1;
const u = t.ganttBarConfig.dragLimitLeft, b = t.ganttBarConfig.dragLimitRight;
return f && u != null && f < u || x && b != null && x > b;
}, k = (f) => {
e.value = !1, document.body.style.cursor = "", window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", k), n(f, t);
};
return {
isDragging: e,
initDrag: s
};
}
function qt() {
const t = lt(Pt);
if (!t)
throw Error("Failed to inject emitBarEvent!");
return t;
}
function qe() {
const t = A(), c = _t(), n = qt(), { pushOnOverlap: r, barStart: v, barEnd: l, noOverlap: g, dateFormat: e } = t, o = /* @__PURE__ */ new Map(), { toDayjs: a, format: i } = rt(), d = (u, b) => {
const { initDrag: y } = $t(u, h, k, t);
n({ ...b, type: "dragstart" }, u), y(b), f(u);
}, s = (u, b) => {
const y = u.ganttBarConfig.bundle;
y != null && (c().forEach((_) => {
_.bars.forEach((C) => {
if (C.ganttBarConfig.bundle === y) {
const T = C === u ? k : () => null, { initDrag: M } = $t(C, h, T, t);
M(b), f(C);
}
});
}), n({ ...b, type: "dragstart" }, u));
}, h = (u, b) => {
n({ ...u, type: "drag" }, b), w(b);
}, w = (u) => {
if (!(r != null && r.value))
return;
let b = u, { overlapBar: y, overlapType: _ } = p(b);
for (; y; ) {
f(y);
const C = a(b[v.value]), T = a(b[l.value]), M = a(y[v.value]), S = a(y[l.value]);
let I;
switch (_) {
case "left":
I = S.diff(C, "seconds", !0), y[l.value] = i(b[v.value], e.value), y[v.value] = i(
M.subtract(I, "seconds"),
e.value
);
break;
case "right":
I = T.diff(M, "seconds", !0), y[v.value] = i(T, e.value), y[l.value] = i(
S.add(I, "seconds"),
e.value
);
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;
}
y && (_ === "left" || _ === "right") && m(y, I, _), b = y, { overlapBar: y, overlapType: _ } = p(y);
}
}, m = (u, b, y) => {
f(u), u.ganttBarConfig.bundle && c().forEach((_) => {
_.bars.forEach((C) => {
C.ganttBarConfig.bundle === u.ganttBarConfig.bundle && C !== u && (f(C), B(C, b, y));
});
});
}, p = (u) => {
var W, j;
let b, y, _;
const C = (j = (W = c().find((U) => U.bars.includes(u))) == null ? void 0 : W.bars) != null ? j : [], T = a(u[v.value]), M = a(u[l.value]);
return { overlapBar: C.find((U) => {
if (U === u)
return !1;
const N = a(U[v.value]), F = a(U[l.value]);
return b = T.isBetween(N, F), y = M.isBetween(N, F), _ = N.isBetween(T, M) || F.isBetween(T, M), b || y || _;
}), overlapType: b ? "left" : y ? "right" : _ ? "between" : null };
}, B = (u, b, y) => {
switch (y) {
case "left":
u[v.value] = i(
a(u, "start").subtract(b, "seconds"),
e.value
), u[l.value] = i(
a(u, "end").subtract(b, "seconds"),
e.value
);
break;
case "right":
u[v.value] = i(
a(u, "start").add(b, "seconds"),
e.value
), u[l.value] = i(a(u, "end").add(b, "seconds"), e.value);
}
w(u);
}, k = (u, b) => {
x();
const y = {
...u,
type: "dragend"
};
n(y, b, void 0, new Map(o)), o.clear();
}, f = (u) => {
if (!o.has(u)) {
const b = u[v.value], y = u[l.value];
o.set(u, { oldStart: b, oldEnd: y });
}
}, x = () => {
if (r.value || !g.value)
return;
let u = !1;
o.forEach((b, y) => {
const { overlapBar: _ } = p(y);
_ != null && (u = !0);
}), u && o.forEach(({ oldStart: b, oldEnd: y }, _) => {
_[v.value] = b, _[l.value] = y;
});
};
return {
initDragOfBar: d,
initDragOfBundle: s
};
}
function Qe() {
const { pushOnOverlap: t } = A(), c = _t(), n = (g) => {
const e = [];
return g != null && c().forEach((o) => {
o.bars.forEach((a) => {
a.ganttBarConfig.bundle === g && e.push(a);
});
}), e;
}, r = (g) => {
if (!t.value || g.ganttBarConfig.pushOnOverlap === !1)
return;
for (const o of ["left", "right"]) {
const a = o, { gapDistanceSoFar: i, bundleBarsAndGapDist: d } = v(
g,
0,
a
);
let s = i;
const h = d;
if (!h)
continue;
for (let m = 0; m < h.length; m++) {
const p = h[m].bar, B = h[m].gapDistance;
n(p.ganttBarConfig.bundle).filter(
(f) => f !== p
).forEach((f) => {
const x = v(f, B, a), u = x.gapDistanceSoFar, b = x.bundleBarsAndGapDist;
u != null && (!s || u < s) && (s = u), b.forEach((y) => {
h.find((_) => _.bar === y.bar) || h.push(y);
});
});
}
const w = document.getElementById(g.ganttBarConfig.id);
s != null && a === "left" ? g.ganttBarConfig.dragLimitLeft = w.offsetLeft - s : s != null && a === "right" && (g.ganttBarConfig.dragLimitRight = w.offsetLeft + w.offsetWidth + s);
}
n(g.ganttBarConfig.bundle).forEach((o) => {
o.ganttBarConfig.dragLimitLeft = g.ganttBarConfig.dragLimitLeft, o.ganttBarConfig.dragLimitRight = g.ganttBarConfig.dragLimitRight;
});
}, v = (g, e = 0, o) => {
const a = g.ganttBarConfig.bundle ? [{ bar: g, gapDistance: e }] : [];
let i = g, d = l(i, o);
if (o === "left")
for (; d; ) {
const s = document.getElementById(i.ganttBarConfig.id), h = document.getElementById(d.ganttBarConfig.id), w = h.offsetLeft + h.offsetWidth;
if (e += s.offsetLeft - w, d.ganttBarConfig.immobile)
return { gapDistanceSoFar: e, bundleBarsAndGapDist: a };
d.ganttBarConfig.bundle && a.push({
bar: d,
gapDistance: e
}), i = d, d = l(d, "left");
}
if (o === "right")
for (; d; ) {
const s = document.getElementById(i.ganttBarConfig.id), h = document.getElementById(d.ganttBarConfig.id), w = s.offsetLeft + s.offsetWidth;
if (e += h.offsetLeft - w, d.ganttBarConfig.immobile)
return { gapDistanceSoFar: e, bundleBarsAndGapDist: a };
d.ganttBarConfig.bundle && a.push({
bar: d,
gapDistance: e
}), i = d, d = l(d, "right");
}
return { gapDistanceSoFar: null, bundleBarsAndGapDist: a };
}, l = (g, e) => {
var d, s;
const o = document.getElementById(g.ganttBarConfig.id), a = (s = (d = c().find((h) => h.bars.includes(g))) == null ? void 0 : d.bars) != null ? s : [];
let i = [];
return e === "left" ? i = a.filter((h) => {
const w = document.getElementById(h.ganttBarConfig.id);
return w && w.offsetLeft < o.offsetLeft && h.ganttBarConfig.pushOnOverlap !== !1;
}) : i = a.filter((h) => {
const w = document.getElementById(h.ganttBarConfig.id);
return w && w.offsetLeft > o.offsetLeft && h.ganttBarConfig.pushOnOverlap !== !1;
}), i.length > 0 ? i.reduce((h, w) => {
const m = document.getElementById(h.ganttBarConfig.id), p = document.getElementById(w.ganttBarConfig.id), B = Math.abs(m.offsetLeft - o.offsetLeft), k = Math.abs(p.offsetLeft - o.offsetLeft);
return B < k ? h : w;
}, i[0]) : null;
};
return {
setDragLimitsOfGanttBar: r
};
}
const Xe = ["id"], Ke = { class: "g-gantt-bar-label" }, Ze = ["innerHTML"], Je = /* @__PURE__ */ L("div", { class: "g-gantt-bar-handle-left" }, null, -1), tn = /* @__PURE__ */ L("div", { class: "g-gantt-bar-handle-right" }, null, -1), en = /* @__PURE__ */ K({
__name: "GGanttBar",
props: {
bar: {}
},
setup(t) {
const c = t, n = qt(), r = A(), { rowHeight: v } = r, { bar: l } = nt(c), { mapTimeToPosition: g, mapPositionToTime: e } = dt(), { initDragOfBar: o, initDragOfBundle: a } = qe(), { setDragLimitsOfGanttBar: i } = Qe(), d = R(!1), s = G(() => l.value.ganttBarConfig);
function h(C) {
s.value.bundle != null ? a(l.value, C) : o(l.value, C), d.value = !0;
}
const w = () => {
i(l.value), !s.value.immobile && (window.addEventListener("mousemove", h, {
once: !0
}), window.addEventListener(
"mouseup",
() => {
window.removeEventListener("mousemove", h), d.value = !1;
},
{ once: !0 }
));
}, m = lt(jt), p = (C) => {
var S;
C.preventDefault(), C.type === "mousedown" && w();
const T = (S = m == null ? void 0 : m.value) == null ? void 0 : S.getBoundingClientRect();
if (!T)
return;
const M = e(C.clientX - T.left);
n(C, l.value, M);
}, { barStart: B, barEnd: k, width: f, chartStart: x, chartEnd: u, chartSize: b } = r, y = R(0), _ = R(0);
return Lt(() => {
ct(
[l, f, x, u, b.width],
() => {
y.value = g(l.value[B.value]), _.value = g(l.value[k.value]);
},
{ deep: !0, immediate: !0 }
);
}), (C, T) => (O(), D("div", {
id: s.value.id,
class: bt(["g-gantt-bar", s.value.class || ""]),
style: $({
...s.value.style,
position: "absolute",
top: `${E(v) * 0.1}px`,
left: `${y.value}px`,
width: `${_.value - y.value}px`,
height: `${E(v) * 0.8}px`,
zIndex: d.value ? 3 : 2
}),
onMousedown: p,
onClick: p,
onDblclick: p,
onMouseenter: p,
onMouseleave: p,
onContextmenu: p
}, [
L("div", Ke, [
Y(C.$slots, "default", { bar: E(l) }, () => [
L("div", null, P(s.value.label || ""), 1),
s.value.html ? (O(), D("div", {
key: 0,
innerHTML: s.value.html
}, null, 8, Ze)) : V("", !0)
])
]),
s.value.hasHandles ? (O(), D(Q, { key: 0 }, [
Je,
tn
], 64)) : V("", !0)
], 46, Xe));
}
});
const nn = /* @__PURE__ */ K({
__name: "GGanttRow",
props: {
label: {},
bars: {},
highlightOnHover: { type: Boolean }
},
emits: ["drop"],
setup(t, { emit: c }) {
const n = t, { rowHeight: r, colors: v, labelColumnTitle: l } = A(), { highlightOnHover: g } = nt(n), e = R(!1), o = G(() => ({
height: `${r.value}px`,
background: (g == null ? void 0 : g.value) && e.value ? v.value.hoverHighlight : null
})), { mapPositionToTime: a } = dt(), i = R(null);
st(jt, i);
const d = (h) => {
var B;
const w = (B = i.value) == null ? void 0 : B.getBoundingClientRect();
if (!w) {
console.error("Vue-Ganttastic: failed to find bar container element for row.");
return;
}
const m = h.clientX - w.left, p = a(m);
c("drop", { e: h, datetime: p });
}, s = (h) => !h || /^\s*$/.test(h);
return (h, w) => (O(), D("div", {
class: "g-gantt-row",
style: $(o.value),
onDragover: w[0] || (w[0] = ie((m) => e.value = !0, ["prevent"])),
onDragleave: w[1] || (w[1] = (m) => e.value = !1),
onDrop: w[2] || (w[2] = (m) => d(m)),
onMouseover: w[3] || (w[3] = (m) => e.value = !0),
onMouseleave: w[4] || (w[4] = (m) => e.value = !1)
}, [
!s(h.label) && !E(l) ? (O(), D("div", {
key: 0,
class: "g-gantt-row-label",
style: $({ background: E(v).primary, color: E(v).text })
}, [
Y(h.$slots, "label", {}, () => [
ut(P(h.label), 1)
])
], 4)) : V("", !0),
L("div", se({
ref_key: "barContainer",
ref: i,
class: "g-gantt-row-bars-container"
}, h.$attrs), [
Bt(le, {
name: "bar-transition",
tag: "div"
}, {
default: q(() => [
(O(!0), D(Q, null, X(h.bars, (m) => (O(), et(en, {
key: m.ganttBarConfig.id,
bar: m
}, {
default: q(() => [
Y(h.$slots, "bar-label", { bar: m })
]),
_: 2
}, 1032, ["bar"]))), 128))
]),
_: 3
})
], 16)
], 36));
}
});
function rn() {
H.extend(ce), H.extend(de), H.extend(fe), H.extend(me), H.extend(ge), H.extend(ue), H.extend(he);
}
const ln = {
install(t, c) {
rn(), t.component("GGanttChart", Ve), t.component("GGanttRow", nn);
}
};
function Z(t, c = "top") {
if (!t || typeof document > "u")
return;
const n = document.head, r = document.createElement("style");
c === "top" && n.firstChild ? n.insertBefore(r, n.firstChild) : n.appendChild(r), r.appendChild(document.createTextNode(t));
}
Z(`
.g-gantt-chart {
position: relative;
display: flex;
flex-direction: column;
overflow-x: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
border-radius: 5px;
}
.with-column {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.g-gantt-rows-container {
position: relative;
}
.labels-in-column {
display: flex;
flex-direction: row;
}
`, "top");
Z(`
.g-gantt-row {
width: 100%;
transition: background 0.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: 0px;
padding: 0px 8px;
display: flex;
align-items: center;
height: 60%;
min-height: 20px;
font-size: 0.8em;
font-weight: bold;
border-bottom-right-