@evercam/ui 0.0.55-beta.2 → 0.0.55-beta.3

package/dist/index.mjs

@@ -21961,17 +21961,13 @@ const Ah = {
     },
     dotSize: {
       type: Number,
-      default: 6
+      default: 8
     },
     lineWidth: {
       type: Number,
       default: 2
     },
     lineHeight: {
-      type: Number,
-      default: 16
-    },
-    hoveredLineHeight: {
       type: Number,
       default: 28
     }
@@ -21981,14 +21977,10 @@ const Ah = {
       milestoneClasses: Ye,
       timeouts: [],
       isInitialRender: !0,
-      isHoveringDot: !1,
       isMouseOver: !1
     };
   },
   computed: {
-    computedLineHeight() {
-      return this.isHoveringDot ? this.hoveredLineHeight : this.lineHeight;
-    },
     transitionStyles() {
       return this.isInitialRender ? {} : {
         transition: `transform ${this.transitionDuration}ms, width ${this.transitionDuration}ms, height ${this.transitionDuration}ms, padding ${this.transitionDuration}ms, border-radius ${this.transitionDuration}ms`
@@ -22001,9 +21993,9 @@ const Ah = {
       };
     },
     positionStyles() {
-      return this.dot ? {
-        transform: `translateY(calc(-100% - ${this.computedLineHeight}px))`
-      } : {};
+      return !this.dot || !this.isMouseOver ? {} : {
+        transform: `translateY(calc(-100% - ${this.lineHeight}px))`
+      };
     },
     styles() {
       return {
@@ -22029,25 +22021,25 @@ const Ah = {
     },
     dotContainerStyles() {
       return {
-        top: `calc(100% - ${this.borderWidth}px)`,
-        height: `calc(${this.computedLineHeight}px  + ${this.dotSize}px)`,
+        top: this.isMouseOver ? `calc(100% - ${this.borderWidth}px)` : `calc(50% + ${this.dotSize / 2}px)`,
+        height: `calc(${this.lineHeight}px  + ${this.dotSize}px)`,
         left: `calc(50% - ${this.lineWidth}px / 2)`,
         transition: `${this.computedTransitionDuration}ms`
       };
     },
     lineStyles() {
       return {
-        top: `${this.borderWidth}px`,
+        bottom: `${this.dotSize / 2}px`,
         left: `calc(50% - ${this.lineWidth}px / 2)`,
         width: `${this.lineWidth}px`,
-        height: `calc(${this.computedLineHeight}px)`,
+        height: this.isMouseOver ? `${this.lineHeight}px` : "0",
         backgroundColor: this.borderColor,
         transition: `${this.computedTransitionDuration}ms`
       };
     },
     dotStyles() {
       return {
-        top: `calc(${this.computedLineHeight}px + 1px)`,
+        top: `${this.lineHeight}px`,
         left: `calc(50% - ${this.dotSize}px / 2)`,
         width: `${this.dotSize}px`,
         height: `${this.dotSize}px`,
@@ -22064,7 +22056,7 @@ const Ah = {
   methods: {
     onMilestoneMouseOver(s, e) {
       if (this.dot) {
-        this.isHoveringDot = !0;
+        this.isMouseOver = !0;
         return;
       }
       const t = s.target;
@@ -22080,14 +22072,14 @@ const Ah = {
       a && (clearTimeout(Number(a)), t.dataset.timeoutId = ""), t.dataset.initialWidth || (t.dataset.initialWidth = t.style.width), t.dataset.initialHeight || (t.dataset.initialHeight = t.style.height), t.dataset.initialContentWidth || (t.dataset.initialContentWidth = String(n.width)), t.dataset.initialContentHeight || (t.dataset.initialContentHeight = String(n.height)), t.dataset.transitionStart = String(Date.now()), t.style.width = t.dataset.initialContentWidth + "px", t.style.height = t.dataset.initialContentHeight + "px", t.style.borderRadius = "0.5em", t.classList.add(Ye.milestoneHovered), i.style.opacity = "1", i.style.width = t.dataset.initialContentWidth + "px", i.style.height = t.dataset.initialContentHeight + "px";
     },
     onMilestoneMouseMove() {
-      this.isMouseOver = !0;
+      this.timeouts.forEach((s) => clearTimeout(s)), this.isMouseOver = !0;
     },
     onMilestoneMouseLeave(s, e) {
       if (this.dot) {
         this.timeouts.push(
           setTimeout(() => {
-            this.isHoveringDot = !this.isMouseOver;
-          }, 600)
+            this.isMouseOver = !1;
+          }, this.transitionDuration + 100)
         );
         return;
       }
@@ -22115,8 +22107,8 @@ var Ch = function() {
     [e.milestoneClasses.milestone]: !0,
     [e.milestoneClasses.milestoneDot]: e.dot,
     [e.milestoneClasses.milestoneBullet]: !e.dot,
-    [e.milestoneClasses.milestoneDotHovered]: e.isHoveringDot
-  }, style: e.styles, attrs: { tabindex: "0" }, on: { mouseover: (i) => e.onMilestoneMouseOver(i, e.milestone), mousemove: (i) => e.onMilestoneMouseMove(i, e.milestone), mouseleave: (i) => e.onMilestoneMouseLeave(i, e.milestone), click: (i) => e.onMilestoneClick(i, e.milestone) } }, [t("div", { class: e.milestoneClasses.milestoneContent, style: e.contentStyles }, [e._t("content", function() {
+    [e.milestoneClasses.milestoneDotHovered]: e.isMouseOver
+  }, style: e.styles, attrs: { tabindex: "0" }, on: { mouseover: (i) => e.onMilestoneMouseOver(i, e.milestone), mousemove: e.onMilestoneMouseMove, mouseleave: (i) => e.onMilestoneMouseLeave(i, e.milestone), click: (i) => e.onMilestoneClick(i, e.milestone) } }, [t("div", { class: e.milestoneClasses.milestoneContent, style: e.contentStyles }, [e._t("content", function() {
     return [t("span", [e._v(" " + e._s(e.milestone.text) + " ")])];
   })], 2), e.dot ? t("div", { class: e.milestoneClasses.milestoneDotContainer, style: e.dotContainerStyles }, [t("div", { class: e.milestoneClasses.milestoneDotLine, style: e.lineStyles }), t("div", { class: e.milestoneClasses.milestoneDotDot, style: e.dotStyles })]) : t("div", { class: e.milestoneClasses.milestoneLabel, style: e.labelStyles }, [e._t("label")], 2)]);
 }, Dh = [], _h = /* @__PURE__ */ Ne(
@@ -22436,9 +22428,8 @@ const Ih = _h.exports, G = {
       return Object.fromEntries(s);
     },
     allEventsSorted() {
-      return Object.values(this.filteredEventsGroups).map((e) => e.events).flat().sort(
-        (e, t) => new Date(e.timestamp || e.startDate) > new Date(t.timestamp || t.startDate) ? 1 : -1
-      );
+      const s = Object.values(this.filteredEventsGroups).map((e) => e.events).flat();
+      return this.getSortedEvents(s);
     },
     oldestEvent() {
       let s;
@@ -22982,13 +22973,17 @@ const Ih = _h.exports, G = {
         r,
         s
       );
-      t.type === "drag" && a && e.attr("style", `left: ${n}px`), t.type === "end" && a && (this.markersPositions = {
-        ...this.markersPositions,
-        [s.id || s.timestamp]: {
-          ...this.markersPositions[s.id || s.timestamp],
-          position: n
-        }
-      }, e.classed(G.markerDragged, !1)), t.type !== "start" && this.$emit(`marker-drag-${t.type}`, {
+      if (t.type === "drag" && a && e.attr("style", `left: ${n}px`), t.type === "end" && a) {
+        const o = s.id || s.timestamp;
+        this.markersPositions = {
+          ...this.markersPositions,
+          [o]: {
+            ...this.markersPositions[o],
+            position: n
+          }
+        }, e.classed(G.markerDragged, !1);
+      }
+      t.type !== "start" && this.$emit(`marker-drag-${t.type}`, {
         marker: s,
         newTimestamp: r.toISOString()
       });
@@ -23220,7 +23215,7 @@ const Ih = _h.exports, G = {
       Object.entries(this.milestonesGroups).forEach(([s, e]) => {
         const t = this.getMilestoneGroupYPosition(s), i = this.svg.select(
           `g.${G.eventGroup}-${s}`
-        ), r = 2, n = e.height || this.barChartHeight, a = e.dots ? n : n / 2, o = t + a - r / 2;
+        ), r = 2, a = (e.height || this.barChartHeight) / 2, o = t + a - r / 2;
         i.attr("x1", 0).attr("x2", this.timeline.offsetWidth).select(`.${Ye.milestoneLine}`).attr("y1", o).attr("y2", o);
         const l = w.select(
           `.${Ye.milestonesContainer}-${s}`
@@ -23228,7 +23223,7 @@ const Ih = _h.exports, G = {
         l.style("top", `${t}px`).style("height", `${e.height || this.barChartHeight}px`);
         const c = l.selectAll(
           `.${Ye.milestone}`
-        ).data(e.events);
+        ).data(this.getSortedEvents(e.events));
         c.exit().remove(), c.enter().append("div").merge(c).style(
           "left",
           (u) => `${this.timeScale(this.tzStringToDate(u.timestamp))}px`
@@ -23350,11 +23345,6 @@ const Ih = _h.exports, G = {
       }, o = s.append("g").attr("class", `${G.labelGroup} ${G.labelGroup}-${r}`).style("cursor", "pointer").on("click", () => this.toggleGroupVisibility(r));
       o.append("rect").attr("class", G.labelBg).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.dark ? "#131a29" : "white"), o.append("rect").attr("class", G.labelBgFill).attr("data-color", t).attr("x", a.x).attr("y", a.y).attr("width", a.w).attr("height", a.h).attr("rx", a.radius).attr("ry", a.radius).style("fill", this.getLabelBackgroundColor(t)).style("stroke", this.getTextFillColor(t)).style("stroke-width", 0.25), o.append("text").attr("class", G.labelText).attr("data-color", t).attr("x", 5).attr("y", e + (n || this.barChartHeight) / 2).attr("dy", "0.35em").style("text-anchor", "start").style("font-size", "12px").style("font-weight", 500).style("stroke-linejoin", "round").style("paint-order", "stroke").style("fill", this.getTextFillColor(t)).text(i);
     },
-    getSortedEvents(s) {
-      return [...s].sort(
-        (e, t) => new Date(e.timestamp || e.startDate) > new Date(t.timestamp || t.startDate) ? 1 : -1
-      );
-    },
     getTextFillColor(s, e = 0) {
       var t, i;
       return (this.dark ? (t = w.color(s)) == null ? void 0 : t.brighter(1.5 + e) : (i = w.color(s)) == null ? void 0 : i.darker(2 + e)).toString();
@@ -23462,6 +23452,11 @@ const Ih = _h.exports, G = {
     },
     onMilestoneClick(s, e) {
       this.panOnDateClick && this.panToTimestamp(s.timestamp), this.selectedMilestoneId = s.id || s.timestamp, this.$emit("milestone-click", { milestone: s, milestoneType: e });
+    },
+    getSortedEvents(s) {
+      return [...s].sort(
+        (e, t) => new Date(e.timestamp || e.startDate) > new Date(t.timestamp || t.startDate) ? 1 : -1
+      );
     }
   }
 });
@@ -23475,12 +23470,12 @@ var kh = function() {
     }, { marker: i })], 2)]), t("div", { staticClass: "marker-line e-absolute e-pointer-events-none", style: e.getMarkerLineStyle(i) })]);
   }), e.autoResize ? t("div", { directives: [{ name: "resize-observer", rawName: "v-resize-observer", value: e.onResize, expression: "onResize" }], ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden" }) : t("div", { ref: "timelineContainer", staticClass: "e-timeline__svg-container e-relative e-h-13 e-rounded e-select-none e-overflow-x-hidden" }), e._l(e.milestonesGroups, function(i, r) {
     return t("div", { key: `${r}`, staticClass: "e-timeline-milestones" }, [t("div", { class: `e-tl-milestones e-tl-milestones-${r}` }, e._l(e.getSortedEvents(i.events), function(n, a) {
-      return t("ETimelineMilestone", { key: `${n.milestoneType}-${a}`, class: e.getMilestoneClass(n), attrs: { milestone: n, dot: i.dots, size: n.size || e.milestoneBulletSize, "transition-duration": i.milestonesTransitionDuration, "line-height": i.milestonesLineHeight, "hovered-line-height": i.milestonesHoveredLineHeight, "dot-size": i.milestonesDotSize, "background-color": e.getMilestoneColors(n.color, i.color).background, "border-color": e.getMilestoneColors(n.color, i.color).border }, on: { "milestone-click": function(o) {
+      return t("ETimelineMilestone", { key: `${n.milestoneType}-${a}`, class: e.getMilestoneClass(n), attrs: { "data-timestamp": n.timestamp, milestone: n, dot: i.dots, size: n.size || e.milestoneBulletSize, "transition-duration": i.milestonesTransitionDuration, "line-height": i.milestonesLineHeight, "dot-size": i.milestonesDotSize, "background-color": e.getMilestoneColors(n.color, i.color).background, "border-color": e.getMilestoneColors(n.color, i.color).border }, on: { "milestone-click": function(o) {
         return e.onMilestoneClick(n, r);
       } }, scopedSlots: e._u([{ key: "content", fn: function() {
         return [e._t(`milestoneContent.${n.milestoneType}`, function() {
-          return [t("span", [e._v(" " + e._s(n.text) + " ")])];
-        }, { milestone: n })];
+          return [t("span", { staticClass: "e-px-2" }, [e._v(" " + e._s(n.text) + " ")])];
+        }, { milestone: n, index: a })];
       }, proxy: !0 }, { key: "label", fn: function() {
         return [e._t(`milestoneLabel.${n.milestoneType}`, null, { milestone: n })];
       }, proxy: !0 }], null, !0) });