vlite3 1.2.4 → 1.2.7

package/components/Chart/GanttChart.vue2.js

@@ -0,0 +1,911 @@
+import { defineComponent as Ye, ref as k, computed as p, onMounted as et, watch as He, onUnmounted as tt, openBlock as r, createElementBlock as i, createElementVNode as s, createStaticVNode as ot, createCommentVNode as h, normalizeStyle as D, Fragment as $, renderList as L, normalizeClass as xe, toDisplayString as b, unref as E, withDirectives as nt, vShow as lt, createBlock as at, Teleport as st, createTextVNode as ze, nextTick as ke } from "vue";
+import { CHART_COLORS as rt, getColor as it, animateProgress as ut } from "./utils.js";
+const ct = {
+  key: 0,
+  class: "vlite-gantt-toolbar"
+}, dt = {
+  key: 0,
+  class: "vlite-gantt-zoom-controls"
+}, vt = ["disabled"], ft = ["disabled"], gt = { class: "vlite-gantt-wrapper" }, ht = ["onClick"], yt = { class: "text-xs font-bold text-foreground uppercase tracking-wide" }, mt = { class: "vlite-gantt-group-count" }, xt = ["onClick"], kt = { class: "truncate text-xs font-medium text-foreground" }, pt = {
+  key: 0,
+  class: "vlite-gantt-progress-badge"
+}, wt = ["width", "height"], bt = ["x1", "x2", "y2"], $t = ["x", "y"], Dt = ["x", "y"], Mt = ["width", "height"], St = ["id"], Lt = ["stop-color"], Ct = ["stop-color"], _t = ["id"], Ht = ["stop-color"], zt = ["stop-color"], Et = ["x1", "x2", "y2"], Tt = ["y1", "x2", "y2"], Wt = ["y", "width", "height"], It = ["d"], Bt = ["d"], Rt = ["d", "fill", "stroke", "opacity", "onMouseenter", "onMousemove", "onClick"], At = ["d", "fill"], Pt = ["d", "fill"], Zt = ["d", "fill"], Ot = ["x", "y", "width", "height", "onMouseenter", "onMousemove", "onMousedown", "onClick"], Ft = ["x", "y", "width", "height", "rx", "ry"], Gt = ["x", "y", "height"], qt = ["x", "y", "height"], Xt = ["x", "y", "fill", "opacity"], jt = { key: 1 }, Nt = ["x1", "x2", "y2", "stroke"], Vt = ["cx", "fill"], Kt = ["x", "fill"], Ut = { class: "font-semibold text-xs mb-1.5" }, Qt = { class: "flex items-center gap-1.5 text-[11px] text-muted-foreground mb-1" }, Jt = { class: "text-[10px] text-muted-foreground" }, Yt = {
+  key: 0,
+  class: "mt-1.5 flex items-center gap-2"
+}, eo = { class: "vlite-gantt-tooltip-progress-track" }, to = { class: "text-[10px] font-semibold" }, oo = {
+  key: 1,
+  class: "text-[10px] text-muted-foreground mt-1 opacity-60"
+}, no = {
+  key: 2,
+  class: "text-[9px] text-muted-foreground mt-1.5 opacity-40"
+}, lo = 16, Y = 5, ao = 4, Ee = 8, io = /* @__PURE__ */ Ye({
+  __name: "GanttChart",
+  props: {
+    tasks: {},
+    viewMode: { default: "week" },
+    height: { default: 0 },
+    rowHeight: { default: 44 },
+    barRadius: { default: 6 },
+    barHeight: { default: 28 },
+    sidebarWidth: { default: 220 },
+    showGrid: { type: Boolean, default: !0 },
+    showTooltip: { type: Boolean, default: !0 },
+    showLabels: { type: Boolean, default: !0 },
+    showProgress: { type: Boolean, default: !0 },
+    showDependencies: { type: Boolean, default: !0 },
+    showTodayLine: { type: Boolean, default: !0 },
+    showHeader: { type: Boolean, default: !0 },
+    animate: { type: Boolean, default: !0 },
+    colors: { default: () => rt },
+    todayColor: { default: "var(--color-danger)" },
+    locale: { default: "en-US" },
+    draggable: { type: Boolean, default: !0 },
+    cascadeDependencies: { type: Boolean, default: !1 },
+    zoom: { type: Boolean, default: !0 }
+  },
+  emits: ["task-click", "task-hover", "task-update"],
+  setup(u, { emit: Te }) {
+    const c = u, P = Te;
+    function pe(t) {
+      return t instanceof Date ? new Date(t.getTime()) : new Date(t);
+    }
+    function q(t, o) {
+      return (o.getTime() - t.getTime()) / 864e5;
+    }
+    function y(t, o) {
+      const e = new Date(t);
+      return e.setDate(e.getDate() + o), e;
+    }
+    function We(t) {
+      const o = new Date(t), e = o.getDay();
+      return o.setDate(o.getDate() - (e === 0 ? 6 : e - 1)), o.setHours(0, 0, 0, 0), o;
+    }
+    function Ie(t) {
+      return new Date(t.getFullYear(), t.getMonth(), 1);
+    }
+    const X = k(), C = k(), ee = k(800);
+    let te = null;
+    function Be() {
+      X.value && (te = new ResizeObserver((t) => {
+        ee.value = t[0].contentRect.width || 800;
+      }), te.observe(X.value), ee.value = X.value.clientWidth || 800);
+    }
+    const _ = p(
+      () => c.tasks.map((t, o) => ({
+        ...t,
+        _start: pe(t.start),
+        _end: pe(t.end),
+        _color: t.color ?? it(c.colors, o),
+        _index: o
+      }))
+    ), j = k(/* @__PURE__ */ new Set());
+    function Re(t) {
+      const o = new Set(j.value);
+      o.has(t) ? o.delete(t) : o.add(t), j.value = o;
+    }
+    const oe = p(() => {
+      const t = /* @__PURE__ */ new Map(), o = [];
+      for (const e of _.value)
+        e.group ? (t.has(e.group) || t.set(e.group, []), t.get(e.group).push(e)) : o.push(e);
+      return { grouped: t, ungrouped: o };
+    }), Z = p(() => {
+      const t = [];
+      for (const [o, e] of oe.value.grouped)
+        if (t.push({ type: "group-header", group: o }), !j.value.has(o)) for (const n of e) t.push({ type: "task", group: o, task: n });
+      for (const o of oe.value.ungrouped) t.push({ type: "task", task: o });
+      return t;
+    }), T = p(() => {
+      if (!_.value.length) {
+        const n = /* @__PURE__ */ new Date();
+        return { start: y(n, -7), end: y(n, 30) };
+      }
+      let t = _.value[0]._start, o = _.value[0]._end;
+      for (const n of _.value)
+        n._start < t && (t = n._start), n._end > o && (o = n._end);
+      const e = c.viewMode === "day" ? 2 : c.viewMode === "week" ? 5 : 15;
+      return { start: y(t, -e), end: y(o, e) };
+    }), N = p(() => Math.max(1, q(T.value.start, T.value.end))), m = k(1);
+    let W = null;
+    function Ae(t) {
+      if (c.zoom && (t.ctrlKey || t.metaKey)) {
+        t.preventDefault();
+        const o = C.value;
+        if (!o) return;
+        const e = o.getBoundingClientRect(), n = t.clientX - e.left, d = (W !== null ? W : o.scrollLeft) + n, f = m.value;
+        let v = f * Math.exp(-t.deltaY * 5e-3);
+        if (v = Math.max(0.2, Math.min(v, 5)), v === f) return;
+        m.value = v;
+        const x = v / f;
+        W = d * x - n, ke(() => {
+          C.value && W !== null && (C.value.scrollLeft = W, W = null);
+        });
+      }
+    }
+    function Pe() {
+      const t = C.value;
+      if (!t) {
+        m.value = Math.min(m.value + 0.2, 5);
+        return;
+      }
+      const o = t.clientWidth / 2, e = t.scrollLeft + o, n = m.value;
+      m.value = Math.min(n + 0.2, 5);
+      const a = m.value / n;
+      ke(() => t.scrollLeft = e * a - o);
+    }
+    function Ze() {
+      const t = C.value;
+      if (!t) {
+        m.value = Math.max(m.value - 0.2, 0.2);
+        return;
+      }
+      const o = t.clientWidth / 2, e = t.scrollLeft + o, n = m.value;
+      m.value = Math.max(n - 0.2, 0.2);
+      const a = m.value / n;
+      ke(() => t.scrollLeft = e * a - o);
+    }
+    const H = p(() => ({ day: 40, week: 120, month: 180 })[c.viewMode] * m.value), ne = p(() => {
+      const t = [], { start: o, end: e } = T.value;
+      if (c.viewMode === "day") {
+        let n = new Date(o);
+        n.setHours(0, 0, 0, 0);
+        let a = 0;
+        for (; n <= e; )
+          t.push({
+            label: n.toLocaleDateString(c.locale, { day: "numeric" }),
+            sublabel: n.toLocaleDateString(c.locale, { weekday: "short" }),
+            x: a * H.value,
+            width: H.value
+          }), n = y(n, 1), a++;
+      } else if (c.viewMode === "week") {
+        let n = We(o), a = 0;
+        for (; n <= e; )
+          t.push({
+            label: n.toLocaleDateString(c.locale, { month: "short", day: "numeric" }),
+            sublabel: `W${Oe(n)}`,
+            x: a * H.value,
+            width: H.value
+          }), n = y(n, 7), a++;
+      } else {
+        let n = Ie(o), a = 0;
+        for (; n <= e; )
+          t.push({
+            label: n.toLocaleDateString(c.locale, { month: "long" }),
+            sublabel: String(n.getFullYear()),
+            x: a * H.value,
+            width: H.value
+          }), n = new Date(n.getFullYear(), n.getMonth() + 1, 1), a++;
+      }
+      return t;
+    });
+    function Oe(t) {
+      const o = new Date(t.getTime());
+      o.setHours(0, 0, 0, 0), o.setDate(o.getDate() + 3 - (o.getDay() + 6) % 7);
+      const e = new Date(o.getFullYear(), 0, 4);
+      return 1 + Math.round(((o.getTime() - e.getTime()) / 864e5 - 3 + (e.getDay() + 6) % 7) / 7);
+    }
+    const M = p(() => ne.value.length * H.value), I = p(() => c.showHeader ? 56 : 0), O = p(() => {
+      const t = Z.value.length * c.rowHeight;
+      return Math.max(c.height || t, t);
+    });
+    function le(t) {
+      return q(T.value.start, t) / N.value * M.value;
+    }
+    function ae(t) {
+      return t / M.value * N.value;
+    }
+    const w = p(() => {
+      const t = Q.value;
+      return Z.value.reduce((o, e, n) => {
+        if (e.type !== "task" || !e.task) return o;
+        const a = e.task, d = le(a._start), f = le(a._end), v = Math.max(8, f - d), x = v * t, S = n * c.rowHeight + (c.rowHeight - c.barHeight) / 2, he = a.progress != null ? v * Math.min(100, a.progress) / 100 * t : 0;
+        return o.push({ task: a, x: d, y: S, fullW: v, w: x, progressW: he, rowIndex: n }), o;
+      }, []);
+    }), Fe = p(() => {
+      if (!c.showDependencies) return [];
+      const t = /* @__PURE__ */ new Map();
+      for (const e of w.value) t.set(e.task.id, e);
+      const o = [];
+      for (const e of w.value)
+        if (e.task.dependencies?.length)
+          for (const n of e.task.dependencies) {
+            const a = t.get(n);
+            if (!a) continue;
+            const d = a.x + a.fullW, f = a.y + c.barHeight / 2, v = e.x, x = e.y + c.barHeight / 2;
+            o.push({ d: Ge(d, f, v, x), ad: qe(v, x) });
+          }
+      return o;
+    });
+    function Ge(t, o, e, n) {
+      const a = lo, d = ao;
+      if (e > t + a * 2) {
+        if (Math.abs(o - n) < 2) return `M ${t} ${o} L ${e} ${n}`;
+        const v = t + (e - t) / 2;
+        return se([[t, o], [v, o], [v, n], [e, n]], d);
+      }
+      const f = t + a;
+      if (Math.abs(o - n) < c.rowHeight * 0.5) {
+        const v = Math.max(o, n) + c.barHeight / 2 + a;
+        return se([[t, o], [f, o], [f, v], [e - a, v], [e - a, n], [e, n]], d);
+      }
+      return se([[t, o], [f, o], [f, n], [e, n]], d);
+    }
+    function se(t, o) {
+      if (t.length < 2) return "";
+      if (t.length === 2) return `M ${t[0][0]} ${t[0][1]} L ${t[1][0]} ${t[1][1]}`;
+      const e = [`M ${t[0][0]} ${t[0][1]}`];
+      for (let a = 1; a < t.length - 1; a++) {
+        const [d, f] = t[a - 1], [v, x] = t[a], [S, he] = t[a + 1], Se = v - d, Le = x - f, Ce = S - v, _e = he - x, ye = Math.hypot(Se, Le), me = Math.hypot(Ce, _e), J = Math.min(o, ye / 2, me / 2);
+        e.push(`L ${v - Se / ye * J} ${x - Le / ye * J}`), e.push(`Q ${v} ${x} ${v + Ce / me * J} ${x + _e / me * J}`);
+      }
+      const n = t[t.length - 1];
+      return e.push(`L ${n[0]} ${n[1]}`), e.join(" ");
+    }
+    function qe(t, o) {
+      return `M ${t} ${o} L ${t - Y} ${o - Y * 0.6} L ${t - Y} ${o + Y * 0.6} Z`;
+    }
+    const F = p(() => {
+      const t = /* @__PURE__ */ new Date();
+      return t.setHours(12, 0, 0, 0), le(t);
+    }), V = p(() => {
+      const t = /* @__PURE__ */ new Date();
+      return t >= T.value.start && t <= T.value.end;
+    });
+    function Xe() {
+      !C.value || !V.value || C.value.scrollTo({ left: Math.max(0, F.value - (ee.value - c.sidebarWidth) / 2), behavior: "smooth" });
+    }
+    let l = {
+      active: !1,
+      barIndex: -1,
+      taskId: "",
+      mode: "move",
+      startMouseX: 0,
+      pxDelta: 0,
+      origStart: null,
+      origEnd: null,
+      affectedIds: /* @__PURE__ */ new Set(),
+      // cascade set
+      rafId: 0
+    };
+    const B = k(!1), G = k(""), re = k(null), K = k("default"), U = k([]), z = k(null);
+    function je(t, o) {
+      U.value[o] = t;
+    }
+    function Ne(t) {
+      const o = /* @__PURE__ */ new Set();
+      if (!c.cascadeDependencies) return o;
+      const e = [t];
+      for (; e.length; ) {
+        const n = e.shift();
+        for (const a of _.value)
+          a.dependencies?.includes(n) && !o.has(a.id) && (o.add(a.id), e.push(a.id));
+      }
+      return o;
+    }
+    function we(t, o) {
+      if (!c.draggable || o.task.milestone) return "move";
+      const e = t.currentTarget.closest("svg");
+      if (!e) return "move";
+      const n = t.clientX - e.getBoundingClientRect().left;
+      return n < o.x + Ee ? "resize-left" : n > o.x + o.fullW - Ee ? "resize-right" : "move";
+    }
+    function Ve(t, o) {
+      if (!c.draggable) return;
+      const e = w.value[o];
+      if (!e || e.task.milestone) return;
+      t.preventDefault(), t.stopPropagation();
+      const n = we(t, e);
+      l.active = !0, l.barIndex = o, l.taskId = e.task.id, l.mode = n, l.startMouseX = t.clientX, l.pxDelta = 0, l.origStart = new Date(e.task._start), l.origEnd = new Date(e.task._end), l.affectedIds = n === "move" ? Ne(e.task.id) : /* @__PURE__ */ new Set(), B.value = !0, G.value = e.task.id, g.value = null, R.value = o, document.addEventListener("mousemove", ie), document.addEventListener("mouseup", ue), document.body.style.cursor = n === "move" ? "grabbing" : "ew-resize", document.body.style.userSelect = "none";
+    }
+    function ie(t) {
+      if (l.active) {
+        if (l.pxDelta = t.clientX - l.startMouseX, l.mode !== "move" && l.origStart && l.origEnd) {
+          const o = q(l.origStart, l.origEnd), e = ae(l.pxDelta);
+          l.mode === "resize-left" && e >= o - 0.5 && (l.pxDelta = (o - 0.5) / N.value * M.value), l.mode === "resize-right" && -e >= o - 0.5 && (l.pxDelta = -(o - 0.5) / N.value * M.value);
+        }
+        cancelAnimationFrame(l.rafId), l.rafId = requestAnimationFrame(Ke);
+      }
+    }
+    function Ke() {
+      const t = l.pxDelta, o = U.value[l.barIndex];
+      if (o) {
+        if (l.mode === "move") {
+          if (o.style.transform = `translateX(${t}px)`, l.affectedIds.size > 0) {
+            for (let e = 0; e < w.value.length; e++)
+              if (l.affectedIds.has(w.value[e].task.id)) {
+                const n = U.value[e];
+                n && (n.style.transform = `translateX(${t}px)`);
+              }
+          }
+        } else l.mode === "resize-right" ? (o.style.transform = "translateX(0px)", w.value[l.barIndex] && o.setAttribute("data-resize-px", String(t))) : l.mode === "resize-left" && (o.style.transform = `translateX(${t}px)`, w.value[l.barIndex] && o.setAttribute("data-resize-px", String(-t)));
+        if (z.value && l.origStart && l.origEnd) {
+          const e = ae(t), n = { month: "short", day: "numeric" };
+          let a, d;
+          l.mode === "move" ? (a = y(l.origStart, e), d = y(l.origEnd, e)) : l.mode === "resize-left" ? (a = y(l.origStart, e), d = l.origEnd) : (a = l.origStart, d = y(l.origEnd, e));
+          const f = w.value[l.barIndex];
+          if (f) {
+            const v = l.mode === "move" ? f.x + f.fullW / 2 + t : f.x + f.fullW / 2;
+            z.value.style.display = "";
+            const x = z.value.querySelector("rect"), S = z.value.querySelector("text");
+            x && (x.setAttribute("x", String(v - 62)), x.setAttribute("y", String(f.y - 20))), S && (S.setAttribute("x", String(v)), S.setAttribute("y", String(f.y - 10)), S.textContent = `${a.toLocaleDateString(c.locale, n)} — ${d.toLocaleDateString(c.locale, n)}`);
+          }
+        }
+      }
+    }
+    function ue() {
+      if (!l.active) return;
+      document.removeEventListener("mousemove", ie), document.removeEventListener("mouseup", ue), document.body.style.cursor = "", document.body.style.userSelect = "", cancelAnimationFrame(l.rafId);
+      const t = ae(l.pxDelta), o = Math.round(t * 2) / 2;
+      if (Math.abs(o) > 0.1 && l.origStart && l.origEnd) {
+        const e = _.value.find((n) => n.id === l.taskId);
+        if (e) {
+          let n, a;
+          if (l.mode === "move" ? (n = y(l.origStart, o), a = y(l.origEnd, o)) : l.mode === "resize-left" ? (n = y(l.origStart, o), a = new Date(l.origEnd)) : (n = new Date(l.origStart), a = y(l.origEnd, o)), P("task-update", e, { start: n, end: a }), l.mode === "move" && l.affectedIds.size > 0)
+            for (const d of l.affectedIds) {
+              const f = _.value.find((v) => v.id === d);
+              f && P("task-update", f, {
+                start: y(f._start, o),
+                end: y(f._end, o)
+              });
+            }
+        }
+      }
+      for (const e of U.value)
+        e && (e.style.transform = "", e.removeAttribute("data-resize-px"));
+      z.value && (z.value.style.display = "none"), l.active = !1, l.barIndex = -1, l.taskId = "", l.pxDelta = 0, l.origStart = null, l.origEnd = null, l.affectedIds.clear(), B.value = !1, G.value = "", R.value = null;
+    }
+    function be(t, o) {
+      if (l.active || !c.draggable || o.task.milestone) {
+        K.value = l.active ? "grabbing" : "pointer";
+        return;
+      }
+      K.value = we(t, o) === "move" ? "grab" : "ew-resize";
+    }
+    const Q = k(c.animate ? 0 : 1);
+    let ce = null;
+    function de() {
+      ce?.(), Q.value = 0, ce = ut(900, (t) => Q.value = t);
+    }
+    et(() => {
+      Be(), c.animate && de();
+    }), He(() => c.viewMode, () => {
+      m.value = 1, c.animate && de();
+    }), He(() => c.tasks.length, () => {
+      c.animate && de();
+    }), tt(() => {
+      ce?.(), te?.disconnect(), document.removeEventListener("mousemove", ie), document.removeEventListener("mouseup", ue), cancelAnimationFrame(l.rafId);
+    });
+    function ve(t, o, e, n, a) {
+      const d = Math.min(a, e / 2, n / 2);
+      return d <= 0 || e <= 0 ? `M${t},${o}h${e}v${n}h${-e}Z` : `M${t + d},${o}h${e - 2 * d}q${d},0 ${d},${d}v${n - 2 * d}q0,${d} ${-d},${d}h${-(e - 2 * d)}q${-d},0 ${-d},${-d}v${-(n - 2 * d)}q0,${-d} ${d},${-d}Z`;
+    }
+    function Ue(t, o, e) {
+      return `M${t},${o - e}L${t + e},${o}L${t},${o + e}L${t - e},${o}Z`;
+    }
+    const g = k(null), R = k(null);
+    function $e(t, o) {
+      if (!c.showTooltip || l.active) return;
+      re.value = o, R.value = o;
+      const e = w.value[o];
+      if (!e) return;
+      P("task-hover", e.task);
+      const n = e.task;
+      g.value = {
+        x: t.clientX,
+        y: t.clientY,
+        task: n,
+        startStr: n._start.toLocaleDateString(c.locale, { month: "short", day: "numeric", year: "numeric" }),
+        endStr: n._end.toLocaleDateString(c.locale, { month: "short", day: "numeric", year: "numeric" })
+      }, be(t, e);
+    }
+    function De(t, o) {
+      if (l.active) return;
+      g.value && (g.value = { ...g.value, x: t.clientX, y: t.clientY });
+      const e = w.value[o];
+      e && be(t, e);
+    }
+    function Me() {
+      l.active || (g.value = null, R.value = null, re.value = null, K.value = "default", P("task-hover", null));
+    }
+    function fe(t) {
+      l.active || P("task-click", t);
+    }
+    const ge = k();
+    function Qe(t) {
+      ge.value && (ge.value.scrollTop = t.target.scrollTop);
+    }
+    const A = Math.random().toString(36).slice(2, 7);
+    function Je(t, o) {
+      const e = Math.ceil(q(t, o));
+      if (e <= 1) return "1 day";
+      if (e < 7) return `${e} days`;
+      const n = Math.floor(e / 7), a = e % 7;
+      return a === 0 ? `${n} week${n > 1 ? "s" : ""}` : `${n}w ${a}d`;
+    }
+    return (t, o) => (r(), i("div", {
+      ref_key: "containerRef",
+      ref: X,
+      class: "vlite-gantt-chart w-full select-none"
+    }, [
+      u.showTodayLine && V.value || u.zoom ? (r(), i("div", ct, [
+        u.zoom ? (r(), i("div", dt, [
+          s("button", {
+            class: "vlite-gantt-btn",
+            onClick: Ze,
+            disabled: m.value <= 0.4
+          }, [...o[0] || (o[0] = [
+            s("svg", {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2.5",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              s("circle", {
+                cx: "11",
+                cy: "11",
+                r: "8"
+              }),
+              s("line", {
+                x1: "21",
+                y1: "21",
+                x2: "16.65",
+                y2: "16.65"
+              }),
+              s("line", {
+                x1: "8",
+                y1: "11",
+                x2: "14",
+                y2: "11"
+              })
+            ], -1),
+            s("span", null, "Zoom Out", -1)
+          ])], 8, vt),
+          s("button", {
+            class: "vlite-gantt-btn",
+            onClick: Pe,
+            disabled: m.value >= 3
+          }, [...o[1] || (o[1] = [
+            ot('<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-v-91cc2885><circle cx="11" cy="11" r="8" data-v-91cc2885></circle><line x1="21" y1="21" x2="16.65" y2="16.65" data-v-91cc2885></line><line x1="11" y1="8" x2="11" y2="14" data-v-91cc2885></line><line x1="8" y1="11" x2="14" y2="11" data-v-91cc2885></line></svg><span data-v-91cc2885>Zoom In</span>', 2)
+          ])], 8, ft)
+        ])) : h("", !0),
+        u.showTodayLine && V.value ? (r(), i("button", {
+          key: 1,
+          class: "vlite-gantt-btn",
+          onClick: Xe
+        }, [...o[2] || (o[2] = [
+          s("svg", {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            s("circle", {
+              cx: "12",
+              cy: "12",
+              r: "10"
+            }),
+            s("line", {
+              x1: "12",
+              y1: "8",
+              x2: "12",
+              y2: "12"
+            }),
+            s("line", {
+              x1: "12",
+              y1: "16",
+              x2: "12.01",
+              y2: "16"
+            })
+          ], -1),
+          s("span", null, "Today", -1)
+        ])])) : h("", !0)
+      ])) : h("", !0),
+      s("div", gt, [
+        s("div", {
+          class: "vlite-gantt-sidebar",
+          style: D({ width: `${u.sidebarWidth}px`, minWidth: `${u.sidebarWidth}px` })
+        }, [
+          u.showHeader ? (r(), i("div", {
+            key: 0,
+            class: "vlite-gantt-sidebar-header",
+            style: D({ height: `${I.value}px` })
+          }, [...o[3] || (o[3] = [
+            s("span", { class: "text-xs font-semibold text-muted-foreground uppercase tracking-wider" }, "Tasks", -1)
+          ])], 4)) : h("", !0),
+          s("div", {
+            ref_key: "sidebarRef",
+            ref: ge,
+            class: "vlite-gantt-sidebar-body",
+            style: D({ height: `${O.value}px` })
+          }, [
+            (r(!0), i($, null, L(Z.value, (e, n) => (r(), i("div", {
+              key: `s-${n}`,
+              class: "vlite-gantt-sidebar-row",
+              style: D({ height: `${u.rowHeight}px` })
+            }, [
+              e.type === "group-header" ? (r(), i("button", {
+                key: 0,
+                class: "vlite-gantt-group-toggle",
+                onClick: (a) => Re(e.group)
+              }, [
+                (r(), i("svg", {
+                  class: xe(["vlite-gantt-chevron", { "vlite-gantt-chevron-collapsed": j.value.has(e.group) }]),
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2.5",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [...o[4] || (o[4] = [
+                  s("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+                ])], 2)),
+                s("span", yt, b(e.group), 1),
+                s("span", mt, b(oe.value.grouped.get(e.group)?.length ?? 0), 1)
+              ], 8, ht)) : (r(), i("div", {
+                key: 1,
+                class: xe(["vlite-gantt-task-name", {
+                  "vlite-gantt-task-name-grouped": !!e.group,
+                  "vlite-gantt-task-name-dragging": B.value && G.value === e.task?.id
+                }]),
+                onClick: (a) => e.task && fe(e.task)
+              }, [
+                s("span", {
+                  class: "vlite-gantt-task-dot",
+                  style: D({ backgroundColor: e.task?._color })
+                }, null, 4),
+                s("span", kt, b(e.task?.name), 1),
+                u.showProgress && e.task?.progress != null ? (r(), i("span", pt, b(e.task.progress) + "%", 1)) : h("", !0)
+              ], 10, xt))
+            ], 4))), 128))
+          ], 4)
+        ], 4),
+        s("div", {
+          ref_key: "timelineRef",
+          ref: C,
+          class: "vlite-gantt-timeline",
+          onScroll: Qe,
+          onWheel: Ae
+        }, [
+          u.showHeader ? (r(), i("div", {
+            key: 0,
+            class: "vlite-gantt-timeline-header",
+            style: D({ height: `${I.value}px`, width: `${M.value}px` })
+          }, [
+            (r(), i("svg", {
+              width: M.value,
+              height: I.value,
+              class: "overflow-visible"
+            }, [
+              (r(!0), i($, null, L(ne.value, (e, n) => (r(), i("g", { key: n }, [
+                s("line", {
+                  x1: e.x,
+                  y1: 0,
+                  x2: e.x,
+                  y2: I.value,
+                  stroke: "currentColor",
+                  "stroke-opacity": "0.06"
+                }, null, 8, bt),
+                s("text", {
+                  x: e.x + e.width / 2,
+                  y: I.value / 2 - 5,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  "font-size": "11",
+                  "font-weight": "600",
+                  class: "fill-foreground"
+                }, b(e.label), 9, $t),
+                e.sublabel ? (r(), i("text", {
+                  key: 0,
+                  x: e.x + e.width / 2,
+                  y: I.value / 2 + 11,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  "font-size": "10",
+                  class: "fill-muted-foreground"
+                }, b(e.sublabel), 9, Dt)) : h("", !0)
+              ]))), 128))
+            ], 8, wt))
+          ], 4)) : h("", !0),
+          s("div", {
+            class: "vlite-gantt-timeline-body",
+            style: D({ height: `${O.value}px` })
+          }, [
+            (r(), i("svg", {
+              width: M.value,
+              height: O.value,
+              role: "img",
+              "aria-label": "Gantt chart",
+              class: "overflow-visible"
+            }, [
+              s("defs", null, [
+                (r(!0), i($, null, L(w.value, (e, n) => (r(), i("linearGradient", {
+                  key: `g${n}`,
+                  id: `gg-${E(A)}-${n}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "1",
+                  y2: "0"
+                }, [
+                  s("stop", {
+                    offset: "0%",
+                    "stop-color": e.task._color,
+                    "stop-opacity": "1"
+                  }, null, 8, Lt),
+                  s("stop", {
+                    offset: "100%",
+                    "stop-color": e.task._color,
+                    "stop-opacity": "0.75"
+                  }, null, 8, Ct)
+                ], 8, St))), 128)),
+                (r(!0), i($, null, L(w.value, (e, n) => (r(), i("linearGradient", {
+                  key: `p${n}`,
+                  id: `gp-${E(A)}-${n}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "1",
+                  y2: "0"
+                }, [
+                  s("stop", {
+                    offset: "0%",
+                    "stop-color": e.task._color,
+                    "stop-opacity": "0.35"
+                  }, null, 8, Ht),
+                  s("stop", {
+                    offset: "100%",
+                    "stop-color": e.task._color,
+                    "stop-opacity": "0.15"
+                  }, null, 8, zt)
+                ], 8, _t))), 128))
+              ]),
+              u.showGrid ? (r(!0), i($, { key: 0 }, L(ne.value, (e, n) => (r(), i("line", {
+                key: n,
+                x1: e.x,
+                y1: 0,
+                x2: e.x,
+                y2: O.value,
+                stroke: "currentColor",
+                "stroke-opacity": "0.06",
+                "stroke-dasharray": "4 4"
+              }, null, 8, Et))), 128)) : h("", !0),
+              (r(!0), i($, null, L(Z.value, (e, n) => (r(), i("line", {
+                key: n,
+                x1: 0,
+                y1: (n + 1) * u.rowHeight,
+                x2: M.value,
+                y2: (n + 1) * u.rowHeight,
+                stroke: "currentColor",
+                "stroke-opacity": "0.04"
+              }, null, 8, Tt))), 128)),
+              (r(!0), i($, null, L(Z.value, (e, n) => nt((r(), i("rect", {
+                key: `bg${n}`,
+                x: 0,
+                y: n * u.rowHeight,
+                width: M.value,
+                height: u.rowHeight,
+                fill: "currentColor",
+                "fill-opacity": "0.02"
+              }, null, 8, Wt)), [
+                [lt, e.type === "group-header"]
+              ])), 128)),
+              (r(!0), i($, null, L(Fe.value, (e, n) => (r(), i("g", {
+                key: n,
+                class: "vlite-gantt-dep-group"
+              }, [
+                s("path", {
+                  d: e.d,
+                  stroke: "var(--color-muted-foreground)",
+                  "stroke-width": "1.5",
+                  "stroke-opacity": "0.35",
+                  fill: "none",
+                  "stroke-linejoin": "round"
+                }, null, 8, It),
+                s("path", {
+                  d: e.ad,
+                  fill: "var(--color-muted-foreground)",
+                  "fill-opacity": "0.5"
+                }, null, 8, Bt)
+              ]))), 128)),
+              (r(!0), i($, null, L(w.value, (e, n) => (r(), i("g", {
+                key: e.task.id,
+                ref_for: !0,
+                ref: (a) => je(a, n),
+                class: xe({ "vlite-gantt-bar-dragging": B.value && (G.value === e.task.id || E(l).affectedIds.has(e.task.id)) })
+              }, [
+                e.task.milestone ? (r(), i("path", {
+                  key: 0,
+                  d: Ue(e.x + e.fullW / 2, e.y + u.barHeight / 2, u.barHeight * 0.4),
+                  fill: `url(#gg-${E(A)}-${n})`,
+                  stroke: e.task._color,
+                  "stroke-width": "1.5",
+                  "stroke-opacity": "0.6",
+                  class: "cursor-pointer",
+                  opacity: R.value === n ? 0.9 : 1,
+                  onMouseenter: (a) => $e(a, n),
+                  onMousemove: (a) => De(a, n),
+                  onMouseleave: Me,
+                  onClick: (a) => fe(e.task)
+                }, null, 40, Rt)) : (r(), i($, { key: 1 }, [
+                  s("path", {
+                    d: ve(e.x, e.y, e.fullW, u.barHeight, u.barRadius),
+                    fill: `url(#gp-${E(A)}-${n})`,
+                    class: "pointer-events-none"
+                  }, null, 8, At),
+                  u.showProgress && e.progressW > 0 ? (r(), i("path", {
+                    key: 0,
+                    d: ve(e.x, e.y, Math.min(e.progressW, e.fullW), u.barHeight, u.barRadius),
+                    fill: `url(#gg-${E(A)}-${n})`,
+                    class: "pointer-events-none"
+                  }, null, 8, Pt)) : h("", !0),
+                  u.showProgress ? h("", !0) : (r(), i("path", {
+                    key: 1,
+                    d: ve(e.x, e.y, e.w, u.barHeight, u.barRadius),
+                    fill: `url(#gg-${E(A)}-${n})`,
+                    class: "pointer-events-none"
+                  }, null, 8, Zt)),
+                  s("rect", {
+                    x: e.x,
+                    y: e.y,
+                    width: e.fullW,
+                    height: u.barHeight,
+                    fill: "transparent",
+                    style: D({ cursor: K.value }),
+                    onMouseenter: (a) => $e(a, n),
+                    onMousemove: (a) => De(a, n),
+                    onMouseleave: Me,
+                    onMousedown: (a) => Ve(a, n),
+                    onClick: (a) => fe(e.task)
+                  }, null, 44, Ot),
+                  R.value === n ? (r(), i("rect", {
+                    key: 2,
+                    x: e.x,
+                    y: e.y,
+                    width: e.fullW,
+                    height: u.barHeight,
+                    rx: u.barRadius,
+                    ry: u.barRadius,
+                    fill: "currentColor",
+                    "fill-opacity": "0.06",
+                    class: "pointer-events-none"
+                  }, null, 8, Ft)) : h("", !0),
+                  u.draggable && !e.task.milestone && (re.value === n || B.value && G.value === e.task.id) ? (r(), i($, { key: 3 }, [
+                    s("rect", {
+                      x: e.x,
+                      y: e.y + 4,
+                      width: "4",
+                      height: u.barHeight - 8,
+                      rx: "2",
+                      fill: "currentColor",
+                      "fill-opacity": "0.4",
+                      class: "pointer-events-none"
+                    }, null, 8, Gt),
+                    s("rect", {
+                      x: e.x + e.fullW - 4,
+                      y: e.y + 4,
+                      width: "4",
+                      height: u.barHeight - 8,
+                      rx: "2",
+                      fill: "currentColor",
+                      "fill-opacity": "0.4",
+                      class: "pointer-events-none"
+                    }, null, 8, qt)
+                  ], 64)) : h("", !0),
+                  u.showLabels && e.fullW > 60 ? (r(), i("text", {
+                    key: 4,
+                    x: e.x + 12,
+                    y: e.y + u.barHeight / 2,
+                    "dominant-baseline": "middle",
+                    "font-size": "11",
+                    "font-weight": "600",
+                    fill: u.showProgress ? "currentColor" : "white",
+                    opacity: Q.value > 0.3 ? 0.85 : 0,
+                    class: "pointer-events-none"
+                  }, b(e.task.name), 9, Xt)) : h("", !0)
+                ], 64))
+              ], 2))), 128)),
+              s("g", {
+                ref_key: "dragLabelRef",
+                ref: z,
+                style: { display: "none" }
+              }, [...o[5] || (o[5] = [
+                s("rect", {
+                  x: "0",
+                  y: "0",
+                  width: "124",
+                  height: "18",
+                  rx: "4",
+                  fill: "var(--color-foreground)",
+                  "fill-opacity": "0.85"
+                }, null, -1),
+                s("text", {
+                  x: "0",
+                  y: "0",
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  "font-size": "9",
+                  "font-weight": "600",
+                  fill: "var(--color-background)"
+                }, null, -1)
+              ])], 512),
+              u.showTodayLine && V.value ? (r(), i("g", jt, [
+                s("line", {
+                  x1: F.value,
+                  y1: 0,
+                  x2: F.value,
+                  y2: O.value,
+                  stroke: u.todayColor,
+                  "stroke-width": "2",
+                  "stroke-opacity": "0.7",
+                  "stroke-dasharray": "6 3"
+                }, null, 8, Nt),
+                s("circle", {
+                  cx: F.value,
+                  cy: 0,
+                  r: "4",
+                  fill: u.todayColor,
+                  "fill-opacity": "0.9"
+                }, null, 8, Vt),
+                s("text", {
+                  x: F.value,
+                  y: -8,
+                  "text-anchor": "middle",
+                  "font-size": "9",
+                  "font-weight": "700",
+                  fill: u.todayColor,
+                  "fill-opacity": "0.9"
+                }, "TODAY", 8, Kt)
+              ])) : h("", !0)
+            ], 8, Mt))
+          ], 4)
+        ], 544)
+      ]),
+      (r(), at(st, { to: "body" }, [
+        g.value && !B.value ? (r(), i("div", {
+          key: 0,
+          class: "vlite-chart-tooltip",
+          style: D({ left: `${g.value.x + 14}px`, top: `${g.value.y - 12}px` })
+        }, [
+          s("div", Ut, b(g.value.task.name), 1),
+          s("div", Qt, [
+            s("span", {
+              class: "w-2 h-2 rounded-sm shrink-0",
+              style: D({ backgroundColor: g.value.task._color ?? g.value.task.color })
+            }, null, 4),
+            s("span", null, b(g.value.startStr) + " — " + b(g.value.endStr), 1)
+          ]),
+          s("div", Jt, b(Je(g.value.task._start, g.value.task._end)), 1),
+          u.showProgress && g.value.task.progress != null ? (r(), i("div", Yt, [
+            s("div", eo, [
+              s("div", {
+                class: "vlite-gantt-tooltip-progress-fill",
+                style: D({
+                  width: `${g.value.task.progress}%`,
+                  backgroundColor: g.value.task._color ?? g.value.task.color
+                })
+              }, null, 4)
+            ]),
+            s("span", to, b(g.value.task.progress) + "%", 1)
+          ])) : h("", !0),
+          g.value.task.group ? (r(), i("div", oo, b(g.value.task.group), 1)) : h("", !0),
+          u.draggable && !g.value.task.milestone ? (r(), i("div", no, [
+            o[6] || (o[6] = ze(" Drag to move · Edges to resize ", -1)),
+            u.cascadeDependencies ? (r(), i($, { key: 0 }, [
+              ze(" · Dependents follow")
+            ], 64)) : h("", !0)
+          ])) : h("", !0)
+        ], 4)) : h("", !0)
+      ]))
+    ], 512));
+  }
+});
+export {
+  io as default
+};