@evercam/ui 0.0.55-beta.4 → 0.0.55-beta.5

package/dist/index.mjs

@@ -21993,9 +21993,9 @@ const Ah = {
       };
     },
     positionStyles() {
-      return !this.dot || !this.isMouseOver ? {} : {
+      return this.dot && this.isMouseOver ? {
         transform: `translateY(calc(-100% - ${this.lineHeight}px))`
-      };
+      } : {};
     },
     styles() {
       return {
@@ -22048,33 +22048,31 @@ const Ah = {
       };
     }
   },
-  updated() {
+  mounted() {
     this.$nextTick(() => {
-      this.isInitialRender = !1;
+      this.dot || (this.onMilestoneMouseOver(), this.onMilestoneMouseLeave()), this.isInitialRender = !1;
     });
   },
   methods: {
-    onMilestoneMouseOver(s, e) {
-      if (this.dot) {
-        this.isMouseOver = !0;
+    onMilestoneMouseOver(s) {
+      if (this.isMouseOver = !0, this.dot)
         return;
-      }
-      const t = s.target;
+      const e = (s == null ? void 0 : s.target) || this.$refs.container;
+      if (!e)
+        return;
+      const t = e.children[0];
       if (!t)
         return;
       const i = t.children[0];
       if (!i)
         return;
-      const r = i.children[0];
-      if (!r)
-        return;
-      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";
+      const r = i.getBoundingClientRect(), n = e.dataset.timeoutId;
+      n && (clearTimeout(Number(n)), e.dataset.timeoutId = ""), e.dataset.initialWidth || (e.dataset.initialWidth = e.style.width), e.dataset.initialHeight || (e.dataset.initialHeight = e.style.height), e.dataset.initialContentWidth || (e.dataset.initialContentWidth = String(r.width)), e.dataset.initialContentHeight || (e.dataset.initialContentHeight = String(r.height)), e.dataset.transitionStart = String(Date.now()), e.style.width = e.dataset.initialContentWidth + "px", e.style.height = e.dataset.initialContentHeight + "px", e.style.borderRadius = "0.5em", e.classList.add(Ye.milestoneHovered), t.style.opacity = "1", t.style.width = e.dataset.initialContentWidth + "px", t.style.height = e.dataset.initialContentHeight + "px";
     },
     onMilestoneMouseMove() {
       this.timeouts.forEach((s) => clearTimeout(s)), this.isMouseOver = !0;
     },
-    onMilestoneMouseLeave(s, e) {
+    onMilestoneMouseLeave(s) {
       if (this.dot) {
         this.timeouts.push(
           setTimeout(() => {
@@ -22083,18 +22081,18 @@ const Ah = {
         );
         return;
       }
-      const t = s.target;
-      if (!t)
+      const e = (s == null ? void 0 : s.target) || this.$refs.container;
+      if (!e)
         return;
-      t.style.width = t.dataset.initialWidth || "", t.style.height = t.dataset.initialHeight || "", t.style.borderRadius = "10em";
-      const i = t.children[0];
-      if (!i)
+      e.style.width = e.dataset.initialWidth || "", e.style.height = e.dataset.initialHeight || "", e.style.borderRadius = "10em";
+      const t = e.children[0];
+      if (!t)
         return;
-      i.style.width = "0", i.style.height = "0", i.style.opacity = "0";
-      const r = Date.now() - Number(t.dataset.transitionStart), n = r > this.transitionDuration ? this.transitionDuration : r, a = setTimeout(() => {
-        t.classList.remove(Ye.milestoneHovered), t.dataset.timeoutId = "";
-      }, n);
-      t.dataset.timeoutId = String(a), this.timeouts.push(a);
+      t.style.width = "0", t.style.height = "0", t.style.opacity = "0";
+      const i = Date.now() - Number(e.dataset.transitionStart), r = i > this.transitionDuration ? this.transitionDuration : i, n = setTimeout(() => {
+        e.classList.remove(Ye.milestoneHovered), e.dataset.timeoutId = "";
+      }, r);
+      e.dataset.timeoutId = String(n), this.timeouts.push(n);
     },
     onMilestoneClick(s, e) {
       this.$emit("milestone-click", e);
@@ -22103,11 +22101,12 @@ const Ah = {
 });
 var Ch = function() {
   var e = this, t = e._self._c;
-  return t("div", { class: {
+  return t("div", { ref: "container", class: {
     [e.milestoneClasses.milestone]: !0,
-    [e.milestoneClasses.milestoneDot]: e.dot,
     [e.milestoneClasses.milestoneBullet]: !e.dot,
-    [e.milestoneClasses.milestoneDotHovered]: e.isMouseOver
+    [e.milestoneClasses.milestoneHovered]: e.isMouseOver && !e.dot,
+    [e.milestoneClasses.milestoneDot]: e.dot,
+    [e.milestoneClasses.milestoneDotHovered]: e.isMouseOver && e.dot
   }, 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)]);