@evercam/ui 0.0.52-beta.5 → 0.0.52-beta.7

package/dist/attributes.json

@@ -278,5 +278,15 @@
   "ETimeline/cursor-timestamp": {
     "type": "string|any",
     "description": ""
+  },
+  "ETimeline/pan-on-date-click": {
+    "type": "boolean",
+    "description": "",
+    "default": false
+  },
+  "ETimeline/pan-transition-duration": {
+    "type": "number",
+    "description": "",
+    "default": 500
   }
 }

package/dist/index.mjs

@@ -167,7 +167,7 @@ const ct = ut.exports;
 function dt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var Pe = {}, ze = {}, me = {};
+var ze = {}, Pe = {}, me = {};
 (function(e) {
   Object.defineProperty(e, "__esModule", {
     value: !0
@@ -398,8 +398,8 @@ var Le = {};
     ];
   }
 })(Le);
-var pe = {}, ne = {}, ge = { exports: {} }, P = String, Ge = function() {
-  return { isColorSupported: !1, reset: P, bold: P, dim: P, italic: P, underline: P, inverse: P, hidden: P, strikethrough: P, black: P, red: P, green: P, yellow: P, blue: P, magenta: P, cyan: P, white: P, gray: P, bgBlack: P, bgRed: P, bgGreen: P, bgYellow: P, bgBlue: P, bgMagenta: P, bgCyan: P, bgWhite: P };
+var pe = {}, ne = {}, ge = { exports: {} }, z = String, Ge = function() {
+  return { isColorSupported: !1, reset: z, bold: z, dim: z, italic: z, underline: z, inverse: z, hidden: z, strikethrough: z, black: z, red: z, green: z, yellow: z, blue: z, magenta: z, cyan: z, white: z, gray: z, bgBlack: z, bgRed: z, bgGreen: z, bgYellow: z, bgBlue: z, bgMagenta: z, bgCyan: z, bgWhite: z };
 };
 ge.exports = Ge();
 ge.exports.createColors = Ge;
@@ -912,8 +912,8 @@ var We = {}, ie = {};
       return v.future === "all" || ((k = (b = v == null || (E = v.future) === null || E === void 0 ? void 0 : E[f]) !== null && b !== void 0 ? b : o[f]) !== null && k !== void 0 ? k : !1);
     }
     if (i.experimental.includes(f)) {
-      var A, z, H;
-      return v.experimental === "all" || ((H = (z = v == null || (A = v.experimental) === null || A === void 0 ? void 0 : A[f]) !== null && z !== void 0 ? z : o[f]) !== null && H !== void 0 ? H : !1);
+      var A, P, H;
+      return v.experimental === "all" || ((H = (P = v == null || (A = v.experimental) === null || A === void 0 ? void 0 : A[f]) !== null && P !== void 0 ? P : o[f]) !== null && H !== void 0 ? H : !1);
     }
     return !1;
   }
@@ -1045,8 +1045,8 @@ var We = {}, ie = {};
       })(),
       extract: (() => {
         let a = (() => {
-          var f, E, b, k, A, z, H, M, L, G;
-          return !((f = i.purge) === null || f === void 0) && f.extract ? i.purge.extract : !((E = i.content) === null || E === void 0) && E.extract ? i.content.extract : !((b = i.purge) === null || b === void 0 || (k = b.extract) === null || k === void 0) && k.DEFAULT ? i.purge.extract.DEFAULT : !((A = i.content) === null || A === void 0 || (z = A.extract) === null || z === void 0) && z.DEFAULT ? i.content.extract.DEFAULT : !((H = i.purge) === null || H === void 0 || (M = H.options) === null || M === void 0) && M.extractors ? i.purge.options.extractors : !((L = i.content) === null || L === void 0 || (G = L.options) === null || G === void 0) && G.extractors ? i.content.options.extractors : {};
+          var f, E, b, k, A, P, H, M, L, G;
+          return !((f = i.purge) === null || f === void 0) && f.extract ? i.purge.extract : !((E = i.content) === null || E === void 0) && E.extract ? i.content.extract : !((b = i.purge) === null || b === void 0 || (k = b.extract) === null || k === void 0) && k.DEFAULT ? i.purge.extract.DEFAULT : !((A = i.content) === null || A === void 0 || (P = A.extract) === null || P === void 0) && P.DEFAULT ? i.content.extract.DEFAULT : !((H = i.purge) === null || H === void 0 || (M = H.options) === null || M === void 0) && M.extractors ? i.purge.options.extractors : !((L = i.content) === null || L === void 0 || (G = L.options) === null || G === void 0) && G.extractors ? i.content.options.extractors : {};
         })(), u = {}, v = (() => {
           var f, E, b, k;
           if (!((f = i.purge) === null || f === void 0 || (E = f.options) === null || E === void 0) && E.defaultExtractor)
@@ -1911,7 +1911,7 @@ var ve = {}, ye = {}, Xe = {};
   }
   let s = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, o = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, i = /(?:\d+|\d*\.\d+)%?/, d = /(?:\s*,\s*|\s+)/, l = /\s*[,/]\s*/, a = /var\(--(?:[^ )]*?)\)/, u = new RegExp(`^(rgba?)\\(\\s*(${i.source}|${a.source})(?:${d.source}(${i.source}|${a.source}))?(?:${d.source}(${i.source}|${a.source}))?(?:${l.source}(${i.source}|${a.source}))?\\s*\\)$`), v = new RegExp(`^(hsla?)\\(\\s*((?:${i.source})(?:deg|rad|grad|turn)?|${a.source})(?:${d.source}(${i.source}|${a.source}))?(?:${d.source}(${i.source}|${a.source}))?(?:${l.source}(${i.source}|${a.source}))?\\s*\\)$`);
   function f(b, { loose: k = !1 } = {}) {
-    var A, z;
+    var A, P;
     if (typeof b != "string")
       return null;
     if (b = b.trim(), b === "transparent")
@@ -1967,12 +1967,12 @@ var ve = {}, ye = {}, Xe = {};
     } : !k && G.length !== 3 || G.length < 3 && !G.some((R) => /^var\(.*?\)$/.test(R)) ? null : {
       mode: L[1],
       color: G,
-      alpha: (A = L[5]) === null || A === void 0 || (z = A.toString) === null || z === void 0 ? void 0 : z.call(A)
+      alpha: (A = L[5]) === null || A === void 0 || (P = A.toString) === null || P === void 0 ? void 0 : P.call(A)
     };
   }
   function E({ mode: b, color: k, alpha: A }) {
-    let z = A !== void 0;
-    return b === "rgba" || b === "hsla" ? `${b}(${k.join(", ")}${z ? `, ${A}` : ""})` : `${b}(${k.join(" ")}${z ? ` / ${A}` : ""})`;
+    let P = A !== void 0;
+    return b === "rgba" || b === "hsla" ? `${b}(${k.join(", ")}${P ? `, ${A}` : ""})` : `${b}(${k.join(" ")}${P ? ` / ${A}` : ""})`;
   }
 })(ye);
 (function(e) {
@@ -2230,13 +2230,13 @@ var be = {}, qe = {}, se = {};
   function A(h) {
     return h === "0" || new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${k}$`).test(h) || i(h);
   }
-  let z = /* @__PURE__ */ new Set([
+  let P = /* @__PURE__ */ new Set([
     "thin",
     "medium",
     "thick"
   ]);
   function H(h) {
-    return z.has(h);
+    return P.has(h);
   }
   function M(h) {
     let w = (0, n.parseBoxShadowValue)(a(h));
@@ -2373,7 +2373,7 @@ var Ye = {};
       return k;
     },
     asColor: function() {
-      return z;
+      return P;
     },
     asLookupValue: function() {
       return H;
@@ -2446,7 +2446,7 @@ var Ye = {};
   function A(y) {
     return (0, s.normalize)(y.slice(1, -1));
   }
-  function z(y, D = {}, { tailwindConfig: C = {} } = {}) {
+  function P(y, D = {}, { tailwindConfig: C = {} } = {}) {
     var m;
     if (((m = D.values) === null || m === void 0 ? void 0 : m[y]) !== void 0) {
       var x;
@@ -2473,7 +2473,7 @@ var Ye = {};
   }
   let L = {
     any: f,
-    color: z,
+    color: P,
     url: M(s.url),
     image: M(s.image),
     length: M(s.length),
@@ -2605,7 +2605,7 @@ var Ze = {};
       }), {});
     }
   };
-  function z(m, ...x) {
+  function P(m, ...x) {
     return b(m) ? m(...x) : m;
   }
   function H(m) {
@@ -2642,7 +2642,7 @@ var Ze = {};
     return k(x, m, (_, g) => !b(_) && !g.some(b) ? k({}, _, ...g, L) : ($, h) => k({}, ...[
       _,
       ...g
-    ].map((w) => z(w, $, h)), L));
+    ].map((w) => P(w, $, h)), L));
   }
   function* R(m) {
     let x = (0, i.toPath)(m);
@@ -2727,7 +2727,7 @@ var Ze = {};
       plugins: D(m.map(($) => (g = $ == null ? void 0 : $.plugins) !== null && g !== void 0 ? g : []))
     }, ...x));
   }
-})(ze);
+})(Pe);
 var Ke = {}, ft = {
   content: [],
   presets: [],
@@ -3775,7 +3775,7 @@ var Ke = {}, ft = {
       return s;
     }
   });
-  const t = /* @__PURE__ */ n(ze), r = /* @__PURE__ */ n(Ke);
+  const t = /* @__PURE__ */ n(Pe), r = /* @__PURE__ */ n(Ke);
   function n(o) {
     return o && o.__esModule ? o : {
       default: o
@@ -3788,8 +3788,8 @@ var Ke = {}, ft = {
       ...i
     ]);
   }
-})(Pe);
-let ae = Pe;
+})(ze);
+let ae = ze;
 var ht = (ae.__esModule ? ae : { default: ae }).default;
 const mt = /* @__PURE__ */ dt(ht);
 let oe = pe;
@@ -4162,7 +4162,7 @@ var At = function() {
   null,
   null
 );
-const Pt = Mt.exports, zt = q.extend({
+const zt = Mt.exports, Pt = q.extend({
   props: {
     alignSelf: {
       type: String,
@@ -4270,7 +4270,7 @@ var Ht = function() {
   var t = this, r = t._self._c;
   return r("div", { staticClass: "e-col", class: t.colClasses }, [t._t("default")], 2);
 }, Lt = [], Gt = /* @__PURE__ */ I(
-  zt,
+  Pt,
   Ht,
   Lt,
   !1,
@@ -5090,6 +5090,14 @@ const qt = {
     cursorTimestamp: {
       type: [String, void 0],
       default: void 0
+    },
+    panOnDateClick: {
+      type: Boolean,
+      default: !1
+    },
+    panTransitionDuration: {
+      type: Number,
+      default: 500
     }
   },
   data() {
@@ -5408,6 +5416,13 @@ const qt = {
         interval: t
       };
     },
+    panToTimestamp(e) {
+      const t = this.tzStringToDate(e), r = this.timeScale(t), n = c.zoomTransform(this.svg.node()), s = n.x - r + this.timeline.offsetWidth / 2;
+      this.svg.transition().duration(this.panTransitionDuration).call(
+        this.zoomBehavior.transform,
+        c.zoomIdentity.translate(s, 0).scale(n.k)
+      );
+    },
     onResize(e) {
       this.isFirstPaint ? (this.handleResize(e), this.isFirstPaint = !1) : this.debouncedOnResize(e);
     },
@@ -5452,7 +5467,7 @@ const qt = {
       this.$emit("date-clicked", n), this.isHoveringEvent && this.$emit("event-clicked", {
         event: this.hoveredEvent,
         type: this.hoveredEventType
-      });
+      }), this.panOnDateClick && this.panToTimestamp(n);
     },
     handleLineMouseOver(e, t, r) {
       this.hoveredCounts = Object.entries(
@@ -5571,12 +5586,12 @@ const qt = {
       this.svg.selectAll(t).attr("x", (r) => this.getEventRectX(r) + this.textPadding).text(this.getEventText);
     },
     updateBarChart() {
-      const e = (d) => this.getEventRectX(d) + this.barXPadding, t = (d) => this.yScale(d.count), r = (d) => this.getEventRectWidth(d) - this.barXPadding * 2, n = (d) => this.yScale.range()[0] - this.yScale(d.count), s = `.${p.barChartGroup} > rect.${p.eventBar}`;
-      this.svg.selectAll(s).attr("x", e).attr("width", r).attr("y", t).attr("height", n);
-      const o = `.${p.barChartGroup} > rect.${p.eventBarCap}`;
-      this.svg.selectAll(o).attr("x", e).attr("width", r).attr("y", t);
-      const i = `.${p.barChartGroup} > rect.${p.eventBarHoverZone}`;
-      this.svg.selectAll(i).attr("x", e).attr("width", r);
+      const e = (d) => this.getEventRectX(d) + this.barXPadding, t = (d) => this.yScale(d.count), r = (d) => this.getEventRectWidth(d) - this.barXPadding * 2, n = (d) => this.yScale.range()[0] - this.yScale(d.count), s = `.${p.barChartGroup} > rect.${p.eventBarHoverZone}`;
+      this.svg.selectAll(s).attr("x", e).attr("width", r);
+      const o = `.${p.barChartGroup} > rect.${p.eventBar}`;
+      this.svg.selectAll(o).attr("x", e).attr("width", r).attr("y", t).attr("height", n);
+      const i = `.${p.barChartGroup} > rect.${p.eventBarCap}`;
+      this.svg.selectAll(i).attr("x", e).attr("width", r).attr("y", t);
     },
     updateLineGraphs() {
       Object.entries(this.lineGraphGroups).forEach(([e]) => {
@@ -5989,7 +6004,7 @@ const sr = ir.exports, Se = {
   EBadge: Me,
   EIcon: Tt,
   ESpinner: Qe,
-  ERow: Pt,
+  ERow: zt,
   ECol: Bt,
   EVideoPlayer: Xt,
   ETimeline: er,
@@ -6014,7 +6029,7 @@ export {
   Me as EBadge,
   Bt as ECol,
   Tt as EIcon,
-  Pt as ERow,
+  zt as ERow,
   Qe as ESpinner,
   er as ETimeline,
   dr as EVENTS,