vue-data-ui-hq/dist/vue-ui-timer-ZUsvCPuO.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { ref as u, onMounted as Z, onBeforeUnmount as tt, computed as A, watch as et, openBlock as r, createElementBlock as i, normalizeStyle as v, unref as t, createBlock as st, createCommentVNode as p, createVNode as M, renderSlot as H, createElementVNode as C, mergeProps as q, normalizeProps as W, guardReactiveProps as G, toDisplayString as at } from "vue";
import { u as ot } from "./useNestedProp-Cj0kHD7k.js";
import { u as rt, c as lt, X as it, F as V } from "./index-WrV3SAID.js";
import { t as nt, u as ct } from "./useResponsive-CoxXLe23.js";
import P from "./BaseIcon-MqKW8Nkx.js";
import { _ as ut } from "./Title-BR-xoRp4.js";
import { _ as dt } from "./PackageVersion-1NslmM8M.js";
import { _ as ht } from "./_plugin-vue_export-helper-CHgC5LLL.js";
class pt {
  constructor(L, N, S, R = !0, k = !0) {
    this.interval = N, this.elapsed = 0, this.isPaused = !1;
    const T = `
            let interval;
            let elapsed = 0;
            let paused = false;
            let startTime;
            let tickInterval;

            onmessage = function(e) {
                const { action, data } = e.data;

                switch(action) {
                    case 'start':
                        startTime = Date.now();
                        tickInterval = data.interval;
                        elapsed = 0;
                        paused = false;
                        interval = setInterval(() => {
                            elapsed += tickInterval;
                            postMessage({ elapsed, timestamp: Date.now() });
                        }, tickInterval);
                        break;
                    
                    case 'pause':
                        paused = true;
                        clearInterval(interval);
                        elapsed = Date.now() - startTime;
                        break;

                    case 'resume':
                        if (paused) {
                            startTime = Date.now() - elapsed;
                            interval = setInterval(() => {
                                elapsed += tickInterval;
                                postMessage({ elapsed, timestamp: Date.now() });
                            }, tickInterval);
                        }
                        paused = false;
                        break;

                    case 'stop':
                        clearInterval(interval);
                        elapsed = 0;
                        postMessage({ elapsed });
                        break;

                    case 'reset':
                        elapsed = 0;
                        clearInterval(interval);
                        postMessage({ elapsed });
                        break;

                    case 'lap':
                        postMessage({
                            elapsed,
                            timestamp: Date.now(),
                            action: 'lap'
                        });
                        break;

                    default:
                        break;
                }
            };
        `, D = new Blob([T], { type: "application/javascript" }), F = URL.createObjectURL(D), n = new Worker(F);
    function $(d) {
      let f = Math.floor(d / 1e3), e = Math.floor(d % 1e3 / 10), g = Math.floor(f / 3600), x = Math.floor(f % 3600 / 60), s = f % 60, l = "";
      return k && (l += String(g).padStart(2, "0") + ":"), l += String(x).padStart(2, "0") + ":", l += String(s).padStart(2, "0"), R && (l += "." + String(e).padStart(2, "0")), l;
    }
    this.start = () => {
      this.isPaused = !1, n.postMessage({ action: "start", data: { interval: this.interval } });
    }, this.pause = () => {
      this.isPaused ? this.resume() : (this.isPaused = !0, n.postMessage({ action: "pause" }));
    }, this.resume = () => {
      this.isPaused && (n.postMessage({ action: "resume" }), this.isPaused = !1);
    }, this.stop = () => {
      n.postMessage({ action: "stop" }), this.isPaused = !1;
    }, this.reset = () => {
      n.postMessage({ action: "reset" }), this.elapsed = 0, this.isPaused = !1;
    }, this.restart = () => {
      this.stop(), this.start();
    }, this.lap = () => new Promise((d) => {
      n.postMessage({ action: "lap" });
      const f = (e) => {
        const { elapsed: g, timestamp: x, action: s } = e.data;
        if (s === "lap") {
          const l = $(g);
          d({
            timestamp: x || 0,
            elapsed: g,
            formatted: l
          });
        }
      };
      n.addEventListener("message", f, { once: !0 });
    }), n.onmessage = (d) => {
      const { elapsed: f, timestamp: e } = d.data;
      this.elapsed = f, L({
        timestamp: e || 0,
        elapsed: this.elapsed,
        formatted: $(this.elapsed)
      });
    }, n.onerror = (d) => {
      S && S(d);
    };
  }
}
const ft = ["xmlns", "viewBox"], wt = ["width", "height"], vt = { key: 1 }, kt = ["id"], gt = ["stop-color"], mt = ["stop-color"], yt = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], bt = ["d", "stroke", "stroke-width"], _t = ["r", "fill", "stroke", "stroke-width"], Mt = ["r", "fill", "stroke", "stroke-width"], Ct = ["x", "y"], Tt = ["x", "y", "font-size", "fill", "font-weight"], $t = {
  key: 0,
  class: "vue-ui-timer-controls"
}, xt = ["title"], It = ["title"], Pt = ["title"], St = ["title"], Rt = ["title"], Dt = {
  __name: "vue-ui-timer",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: ["start", "pause", "reset", "restart", "lap"],
  setup(X, { expose: L, emit: N }) {
    const { vue_ui_timer: S } = rt(), R = X, k = N, T = u(null), D = u(null), F = u(null), n = u(null), $ = u(lt()), d = u(0);
    Z(() => {
      f();
    });
    function f() {
      if (e.value.responsive) {
        const a = nt(() => {
          const { width: c, height: h } = ct({
            chart: T.value,
            title: e.value.style.title.text ? D.value : null,
            legend: F.value
          });
          s.value.width = c, s.value.height = h, s.value.tracker.core = V({
            relator: Math.min(c, h),
            adjuster: e.value.style.width,
            source: 6 * e.value.stopwatch.tracker.radiusRatio,
            threshold: 1,
            fallback: 1
          }), s.value.tracker.aura = V({
            relator: Math.min(c, h),
            adjuster: e.value.style.width,
            source: 12 * e.value.stopwatch.tracker.aura.radiusRatio,
            threshold: 1,
            fallback: 1
          }), s.value.label = V({
            relator: Math.min(c, h),
            adjuster: e.value.style.width,
            source: e.value.stopwatch.label.fontSize,
            threshold: 10,
            fallback: 10
          });
        });
        n.value = new ResizeObserver(a), n.value.observe(T.value.parentNode);
      }
    }
    tt(() => {
      n.value && n.value.disconnect();
    });
    const e = A({
      get: () => g(),
      set: (a) => a
    });
    function g() {
      return ot({
        userConfig: R.config,
        defaultConfig: S
      });
    }
    et(() => R.config, (a) => {
      e.value = g(), f(), d.value += 1;
    }, { deep: !0 });
    const x = A(() => {
      if (e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
        return "00:00:00.00";
      if (e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
        return "00:00:00";
      if (!e.value.stopwatch.showHours && e.value.stopwatch.showHundredth)
        return "00:00.00";
      if (!e.value.stopwatch.showHours && !e.value.stopwatch.showHundredth)
        return "00:00";
    }), s = u({
      height: e.value.style.height,
      width: e.value.style.width,
      tracker: {
        core: 6 * e.value.stopwatch.tracker.radiusRatio,
        aura: 12 * e.value.stopwatch.tracker.aura.radiusRatio
      },
      label: e.value.stopwatch.label.fontSize
    }), l = u(0), y = new pt(
      (a) => J(a),
      10,
      "",
      e.value.stopwatch.showHundredth,
      e.value.stopwatch.showHours
    ), j = u(!0), o = u(!1), w = u(!1);
    function B() {
      k("start"), j.value && y.start(), j.value = !1, o.value = !0;
    }
    function O() {
      o.value && (k("reset"), y.stop(), b.value = [], j.value = !0, o.value = !1);
    }
    function E() {
      w.value = !w.value, k("pause", l.value), y.pause();
    }
    function U() {
      o.value && (w.value = !1, k("restart"), b.value = [], y.restart());
    }
    const b = u([]);
    async function z() {
      if (!o.value || w.value) return;
      const a = await y.lap();
      a && (b.value.push(a), k("lap", b.value));
    }
    function J({ timestamp: a, elapsed: c, formatted: h }) {
      l.value = { timestamp: a, elapsed: c, formatted: h };
    }
    const m = A(() => Math.min(s.value.width, s.value.height) / 2.5 * e.value.stopwatch.track.radiusRatio);
    function K(a, c) {
      const I = 360 / (c * 1e3);
      return a * I % 360;
    }
    function Q(a) {
      let c = a * (Math.PI / 180), h = s.value.width / 2 + m.value * Math.cos(c), I = s.value.height / 2 + m.value * Math.sin(c);
      return { cx: h, cy: I };
    }
    const _ = A(() => {
      const a = K(l.value.elapsed, e.value.stopwatch.cycleSeconds), { cx: c, cy: h } = Q(a - 90), I = a > 180 ? 1 : 0;
      return {
        cx: c || s.value.width / 2,
        cy: h || s.value.height / 2 - m.value,
        largeArcFlag: I,
        sweepFlag: 1
      };
    });
    return L({
      start: B,
      pause: E,
      reset: O,
      restart: U,
      lap: z
    }), (a, c) => (r(), i("div", {
      ref_key: "timerChart",
      ref: T,
      class: "vue-ui-timer",
      style: v({
        fontFamily: t(e).style.fontFamily,
        width: "100%",
        height: t(e).responsive ? "100%" : "auto",
        textAlign: "center"
      })
    }, [
      t(e).style.title.text ? (r(), i("div", {
        key: 0,
        ref_key: "chartTitle",
        ref: D,
        style: v({
          width: "100%",
          background: t(e).style.backgroundColor
        })
      }, [
        (r(), st(ut, {
          key: `title_${t(d)}`,
          config: {
            title: {
              cy: "title",
              ...t(e).style.title
            },
            subtitle: {
              cy: "subtitle",
              ...t(e).style.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 4)) : p("", !0),
      (r(), i("svg", {
        xmlns: t(it),
        viewBox: `0 0 ${t(s).width <= 0 ? 10 : t(s).width} ${t(s).height <= 0 ? 10 : t(s).height}`,
        style: v({
          maxWidth: "100%",
          overflow: "visible",
          background: t(e).style.backgroundColor
        })
      }, [
        M(dt),
        a.$slots["chart-background"] ? (r(), i("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: t(s).width <= 0 ? 10 : t(s).width,
          height: t(s).height <= 0 ? 10 : t(s).height,
          style: {
            pointerEvents: "none"
          }
        }, [
          H(a.$slots, "chart-background", {}, void 0, !0)
        ], 8, wt)) : p("", !0),
        t(e).stopwatch.tracker.gradient.show ? (r(), i("defs", vt, [
          C("radialGradient", {
            id: `tracker_gradient_${t($)}`,
            cx: "50%",
            cy: "50%",
            r: "50%",
            fx: "50%",
            fy: "50%"
          }, [
            C("stop", {
              offset: "0%",
              "stop-color": t(e).stopwatch.tracker.gradient.color
            }, null, 8, gt),
            C("stop", {
              offset: "100%",
              "stop-color": t(e).stopwatch.tracker.fill
            }, null, 8, mt)
          ], 8, kt)
        ])) : p("", !0),
        C("circle", {
          cx: t(s).width / 2,
          cy: t(s).height / 2,
          r: t(m),
          fill: t(e).stopwatch.track.fill,
          stroke: t(e).stopwatch.track.stroke,
          "stroke-width": t(e).stopwatch.track.strokeWidth
        }, null, 8, yt),
        t(e).stopwatch.cycleTrack.show ? (r(), i("path", {
          key: 2,
          d: `M ${t(s).width / 2},${t(s).height / 2 - t(m)} A ${t(m)},${t(m)} 0 ${t(_).largeArcFlag},${t(_).sweepFlag} ${t(_).cx},${t(_).cy}`,
          stroke: t(e).stopwatch.cycleTrack.stroke,
          "stroke-width": t(e).stopwatch.cycleTrack.strokeWidth,
          "stroke-linecap": "round",
          fill: "none"
        }, null, 8, bt)) : p("", !0),
        C("circle", q(t(_), {
          r: t(s).tracker.core,
          fill: t(e).stopwatch.tracker.gradient.show ? `url(#tracker_gradient_${t($)})` : t(e).stopwatch.tracker.fill,
          stroke: t(e).stopwatch.tracker.stroke,
          "stroke-width": t(e).stopwatch.tracker.strokeWidth
        }), null, 16, _t),
        t(e).stopwatch.tracker.aura.show ? (r(), i("circle", q({ key: 3 }, t(_), {
          r: t(s).tracker.aura,
          fill: `${t(e).stopwatch.tracker.aura.fill}20`,
          stroke: t(e).stopwatch.tracker.aura.stroke,
          "stroke-width": t(e).stopwatch.tracker.aura.strokeWidth
        }), null, 16, Mt)) : p("", !0),
        a.$slots.time ? (r(), i("foreignObject", {
          key: 4,
          x: t(s).width / 2,
          y: t(s).height / 2,
          height: "0.1",
          width: "0.1",
          style: { overflow: "visible" }
        }, [
          H(a.$slots, "time", W(G({ ...t(l) })), void 0, !0)
        ], 8, Ct)) : (r(), i("text", {
          key: 5,
          x: t(s).width / 2,
          y: t(s).height / 2 + t(s).label / 4,
          "font-size": t(s).label,
          "text-anchor": "middle",
          fill: t(e).stopwatch.label.color,
          "font-weight": t(e).stopwatch.label.bold ? "bold" : "normal",
          style: { "font-variant-numeric": "tabular-nums !important" }
        }, at(t(l).formatted || t(x)), 9, Tt))
      ], 12, ft)),
      C("div", {
        ref_key: "chartLegend",
        ref: F,
        style: v({ width: "100%", backgroundColor: t(e).stopwatch.legend.backgroundColor })
      }, [
        a.$slots.controls ? p("", !0) : (r(), i("div", $t, [
          t(e).stopwatch.legend.buttons.start ? (r(), i("button", {
            key: 0,
            title: t(e).stopwatch.legend.buttonTitles.start,
            onClick: B,
            class: "vue-ui-timer-button",
            style: v({
              opacity: t(o) ? 0.2 : 1,
              cursor: t(o) ? "default" : "pointer"
            })
          }, [
            M(P, {
              name: "play",
              stroke: t(e).stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, xt)) : p("", !0),
          t(e).stopwatch.legend.buttons.pause ? (r(), i("button", {
            key: 1,
            title: t(w) ? t(e).stopwatch.legend.buttonTitles.resume : t(e).stopwatch.legend.buttonTitles.pause,
            onClick: E,
            class: "vue-ui-timer-button",
            style: v({
              opacity: t(o) ? 1 : 0.2,
              cursor: t(o) ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "pause",
              stroke: t(e).stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, It)) : p("", !0),
          t(e).stopwatch.legend.buttons.reset ? (r(), i("button", {
            key: 2,
            title: t(e).stopwatch.legend.buttonTitles.reset,
            onClick: O,
            class: "vue-ui-timer-button",
            style: v({
              opacity: t(o) ? 1 : 0.2,
              cursor: t(o) ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "stop",
              stroke: t(e).stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, Pt)) : p("", !0),
          t(e).stopwatch.legend.buttons.restart ? (r(), i("button", {
            key: 3,
            title: t(e).stopwatch.legend.buttonTitles.restart,
            onClick: U,
            class: "vue-ui-timer-button",
            style: v({
              opacity: t(o) ? 1 : 0.2,
              cursor: t(o) ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "restart",
              stroke: t(e).stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, St)) : p("", !0),
          t(e).stopwatch.legend.buttons.lap ? (r(), i("button", {
            key: 4,
            title: t(e).stopwatch.legend.buttonTitles.lap,
            onClick: z,
            class: "vue-ui-timer-button",
            style: v({
              opacity: t(o) && !t(w) ? 1 : 0.2,
              cursor: t(o) && !t(w) ? "pointer" : "default"
            })
          }, [
            M(P, {
              name: "lap",
              stroke: t(e).stopwatch.legend.buttons.iconColor
            }, null, 8, ["stroke"])
          ], 12, Rt)) : p("", !0)
        ])),
        H(a.$slots, "controls", W(G({
          start: B,
          pause: E,
          reset: O,
          restart: U,
          lap: z,
          laps: t(b),
          isRunning: t(o),
          isPaused: t(w),
          ...t(l)
        })), void 0, !0),
        H(a.$slots, "laps", W(G({
          laps: t(b),
          lap: z,
          isRunning: t(o),
          isPaused: t(w),
          ...t(l)
        })), void 0, !0)
      ], 4)
    ], 4));
  }
}, Ot = /* @__PURE__ */ ht(Dt, [["__scopeId", "data-v-a84cd987"]]);
export {
  Ot as default
};