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

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,25 +21954,61 @@ const Ah = {
     transitionDuration: {
       type: Number,
       default: 500
+    },
+    dot: {
+      type: Boolean,
+      default: !1
+    },
+    dotSize: {
+      type: Number,
+      default: 6
+    },
+    lineWidth: {
+      type: Number,
+      default: 2
+    },
+    lineHeight: {
+      type: Number,
+      default: 16
+    },
+    hoveredLineHeight: {
+      type: Number,
+      default: 28
     }
   },
   data() {
     return {
       milestoneClasses: Ye,
       timeouts: [],
-      isInitialRender: !0
+      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`
       };
     },
+    sizeStyles() {
+      return this.dot ? {} : {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      };
+    },
+    positionStyles() {
+      return this.dot ? {
+        transform: `translateY(calc(-100% - ${this.computedLineHeight}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 +22019,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: `calc(100% - ${this.borderWidth}px)`,
+        height: `calc(${this.computedLineHeight}px  + ${this.dotSize}px)`,
+        left: `calc(50% - ${this.lineWidth}px / 2)`,
+        transition: `${this.computedTransitionDuration}ms`
+      };
+    },
+    lineStyles() {
+      return {
+        top: `${this.borderWidth}px`,
+        left: `calc(50% - ${this.lineWidth}px / 2)`,
+        width: `${this.lineWidth}px`,
+        height: `calc(${this.computedLineHeight}px)`,
+        backgroundColor: this.borderColor,
+        transition: `${this.computedTransitionDuration}ms`
+      };
+    },
+    dotStyles() {
+      return {
+        top: `calc(${this.computedLineHeight}px + 1px)`,
+        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.isHoveringDot = !0;
+        return;
+      }
       const t = s.target;
       if (!t)
         return;
@@ -22000,7 +22079,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.isMouseOver = !0;
+    },
     onMilestoneMouseLeave(s, e) {
+      if (this.dot) {
+        this.timeouts.push(
+          setTimeout(() => {
+            this.isHoveringDot = !this.isMouseOver;
+          }, 600)
+        );
+        return;
+      }
       const t = s.target;
       if (!t)
         return;
@@ -22021,9 +22111,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.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() {
     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,
@@ -23125,19 +23220,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, n = e.height || this.barChartHeight, a = e.dots ? n : n / 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(
+        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() {
@@ -23255,6 +23350,11 @@ 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();
@@ -23374,8 +23474,8 @@ 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: { 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 e.onMilestoneClick(n, r);
       } }, scopedSlots: e._u([{ key: "content", fn: function() {
         return [e._t(`milestoneContent.${n.milestoneType}`, function() {