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

package/dist/index.mjs

@@ -21913,12 +21913,18 @@ const Ah = {
   }
 ], Ye = {
   milestone: "e-tl-milestone",
+  milestoneBullet: "e-tl-milestone--bullet",
+  milestoneDot: "e-tl-milestone--dot",
   milestoneContent: "e-tl-milestone-content",
   milestoneLine: "e-tl-milestone-line",
   milestonesContainer: "e-tl-milestones",
   milestoneHovered: "e-tl-milestone--hovered",
   milestoneSelected: "e-tl-milestone--selected",
-  milestoneLabel: "e-tl-milestone-label"
+  milestoneLabel: "e-tl-milestone-label",
+  milestoneDotContainer: "e-tl-milestone-dot-container",
+  milestoneDotLine: "e-tl-milestone-dot-line",
+  milestoneDotDot: "e-tl-milestone-dot-dot",
+  milestoneDotHovered: "e-tl-milestone-dot--hovered"
 }, Rh = He.extend({
   name: "ETimeline",
   directives: {
@@ -21948,13 +21954,30 @@ const Ah = {
     transitionDuration: {
       type: Number,
       default: 500
+    },
+    dot: {
+      type: Boolean,
+      default: !1
+    },
+    dotSize: {
+      type: Number,
+      default: 8
+    },
+    lineWidth: {
+      type: Number,
+      default: 2
+    },
+    lineHeight: {
+      type: Number,
+      default: 28
     }
   },
   data() {
     return {
       milestoneClasses: Ye,
       timeouts: [],
-      isInitialRender: !0
+      isInitialRender: !0,
+      isMouseOver: !1
     };
   },
   computed: {
@@ -21963,10 +21986,21 @@ const Ah = {
         transition: `transform ${this.transitionDuration}ms, width ${this.transitionDuration}ms, height ${this.transitionDuration}ms, padding ${this.transitionDuration}ms, border-radius ${this.transitionDuration}ms`
       };
     },
+    sizeStyles() {
+      return this.dot ? {} : {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      };
+    },
+    positionStyles() {
+      return !this.dot || !this.isMouseOver ? {} : {
+        transform: `translateY(calc(-100% - ${this.lineHeight}px))`
+      };
+    },
     styles() {
       return {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
+        ...this.sizeStyles,
+        ...this.positionStyles,
         backgroundColor: this.backgroundColor,
         borderColor: this.borderColor,
         borderWidth: `${this.borderWidth}px`,
@@ -21977,17 +22011,54 @@ const Ah = {
     contentStyles() {
       return this.transitionStyles;
     },
+    computedTransitionDuration() {
+      return this.isInitialRender ? 0 : this.transitionDuration;
+    },
     labelStyles() {
       return {
-        transition: `opacity ${this.transitionDuration}ms`
+        transition: `opacity ${this.computedTransitionDuration}ms`
+      };
+    },
+    dotContainerStyles() {
+      return {
+        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 {
+        bottom: `${this.dotSize / 2}px`,
+        left: `calc(50% - ${this.lineWidth}px / 2)`,
+        width: `${this.lineWidth}px`,
+        height: this.isMouseOver ? `${this.lineHeight}px` : "0",
+        backgroundColor: this.borderColor,
+        transition: `${this.computedTransitionDuration}ms`
+      };
+    },
+    dotStyles() {
+      return {
+        top: `${this.lineHeight}px`,
+        left: `calc(50% - ${this.dotSize}px / 2)`,
+        width: `${this.dotSize}px`,
+        height: `${this.dotSize}px`,
+        backgroundColor: this.borderColor,
+        transition: `${this.computedTransitionDuration}ms`
       };
     }
   },
   updated() {
-    this.isInitialRender = !1;
+    this.$nextTick(() => {
+      this.isInitialRender = !1;
+    });
   },
   methods: {
     onMilestoneMouseOver(s, e) {
+      if (this.dot) {
+        this.isMouseOver = !0;
+        return;
+      }
       const t = s.target;
       if (!t)
         return;
@@ -22000,7 +22071,18 @@ const Ah = {
       const n = r.getBoundingClientRect(), a = t.dataset.timeoutId;
       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.timeouts.forEach((s) => clearTimeout(s)), this.isMouseOver = !0;
+    },
     onMilestoneMouseLeave(s, e) {
+      if (this.dot) {
+        this.timeouts.push(
+          setTimeout(() => {
+            this.isMouseOver = !1;
+          }, this.transitionDuration + 100)
+        );
+        return;
+      }
       const t = s.target;
       if (!t)
         return;
@@ -22021,9 +22103,14 @@ const Ah = {
 });
 var Ch = function() {
   var e = this, t = e._self._c;
-  return t("div", { class: e.milestoneClasses.milestone, style: e.styles, attrs: { tabindex: "0" }, on: { mouseover: (i) => e.onMilestoneMouseOver(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() {
+  return t("div", { class: {
+    [e.milestoneClasses.milestone]: !0,
+    [e.milestoneClasses.milestoneDot]: e.dot,
+    [e.milestoneClasses.milestoneBullet]: !e.dot,
+    [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), t("div", { class: e.milestoneClasses.milestoneLabel, style: e.labelStyles }, [e._t("label")], 2)]);
+  })], 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(
   Rh,
   Ch,
@@ -22341,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;
@@ -22887,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()
       });
@@ -23125,19 +23215,19 @@ 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 = t + (e.height || this.barChartHeight) / 2;
-        i.attr("x1", 0).attr("x2", this.timeline.offsetWidth).select(`.${Ye.milestoneLine}`).attr("y1", r).attr("y2", r);
-        const n = w.select(
+        ), 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}`
         );
-        n.style("top", `${t}px`).style("height", `${e.height || this.barChartHeight}px`);
-        const a = n.selectAll(
+        l.style("top", `${t}px`).style("height", `${e.height || this.barChartHeight}px`);
+        const c = l.selectAll(
           `.${Ye.milestone}`
-        ).data(e.events);
-        a.exit().remove(), a.enter().append("div").merge(a).style(
+        ).data(this.getSortedEvents(e.events));
+        c.exit().remove(), c.enter().append("div").merge(c).style(
           "left",
-          (o) => `${this.timeScale(this.tzStringToDate(o.timestamp))}px`
-        ).style("top", `${r}px`).style("transform", "translate(-50%, -50%)");
+          (u) => `${this.timeScale(this.tzStringToDate(u.timestamp))}px`
+        ).style("top", `${o}px`);
       });
     },
     drawBarChartEventsGroups() {
@@ -23362,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
+      );
     }
   }
 });
@@ -23374,13 +23469,13 @@ var kh = function() {
       return [e._v(" " + e._s(i.label) + " ")];
     }, { 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(i.events, function(n, a) {
-      return t("ETimelineMilestone", { key: `${n.milestoneType}-${a}`, class: e.getMilestoneClass(n), attrs: { size: n.size || e.milestoneBulletSize, milestone: n, "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("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: { "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) });