@hopeio/utils/dist/ReCountTo.es.js

javascript utils

import { defineComponent as T, reactive as F, computed as C, watch as v, unref as g, onMounted as A, createVNode as e, Fragment as x, ref as y, onBeforeMount as w, onBeforeUnmount as z, createTextVNode as r } from "vue";
import { p as n } from "./propTypes-Bv9nyyUT.js";
import { isNumber as R, withInstall as N } from "@pureadmin/utils";
const q = {
  startVal: n.number.def(0),
  endVal: n.number.def(2020),
  duration: n.number.def(1300),
  autoplay: n.bool.def(!0),
  decimals: {
    type: Number,
    required: !1,
    default: 0,
    validator(l) {
      return l >= 0;
    }
  },
  color: n.string.def(),
  fontSize: n.string.def(),
  decimal: n.string.def("."),
  separator: n.string.def(","),
  prefix: n.string.def(""),
  suffix: n.string.def(""),
  useEasing: n.bool.def(!0),
  easingFn: {
    type: Function,
    default(l, s, t, u) {
      return t * (-Math.pow(2, -10 * l / u) + 1) * 1024 / 1023 + s;
    }
  }
}, B = /* @__PURE__ */ T({
  name: "ReNormalCountTo",
  props: q,
  emits: ["mounted", "callback"],
  setup(l, {
    emit: s
  }) {
    const t = F({
      localStartVal: l.startVal,
      displayValue: m(l.startVal),
      printVal: null,
      paused: !1,
      localDuration: l.duration,
      startTime: null,
      timestamp: null,
      remaining: null,
      rAF: null,
      color: null,
      fontSize: "16px"
    }), u = C(() => l.startVal > l.endVal);
    v([() => l.startVal, () => l.endVal], () => {
      l.autoplay && f();
    });
    function f() {
      const {
        startVal: o,
        duration: d,
        color: c,
        fontSize: a
      } = l;
      t.localStartVal = o, t.startTime = null, t.localDuration = d, t.paused = !1, t.color = c, t.fontSize = a, t.rAF = requestAnimationFrame(b);
    }
    function b(o) {
      const {
        useEasing: d,
        easingFn: c,
        endVal: a
      } = l;
      t.startTime || (t.startTime = o), t.timestamp = o;
      const i = o - t.startTime;
      t.remaining = t.localDuration - i, d ? g(u) ? t.printVal = t.localStartVal - c(i, 0, t.localStartVal - a, t.localDuration) : t.printVal = c(i, t.localStartVal, a - t.localStartVal, t.localDuration) : g(u) ? t.printVal = t.localStartVal - (t.localStartVal - a) * (i / t.localDuration) : t.printVal = t.localStartVal + (a - t.localStartVal) * (i / t.localDuration), g(u) ? t.printVal = t.printVal < a ? a : t.printVal : t.printVal = t.printVal > a ? a : t.printVal, t.displayValue = m(t.printVal), i < t.localDuration ? t.rAF = requestAnimationFrame(b) : s("callback");
    }
    function m(o) {
      const {
        decimals: d,
        decimal: c,
        separator: a,
        suffix: i,
        prefix: h
      } = l;
      o = Number(o).toFixed(d), o += "";
      const p = o.split(".");
      let V = p[0];
      const D = p.length > 1 ? c + p[1] : "", S = /(\d+)(\d{3})/;
      if (a && !R(a))
        for (; S.test(V); )
          V = V.replace(S, "$1" + a + "$2");
      return h + V + D + i;
    }
    return A(() => {
      l.autoplay && f(), s("mounted");
    }), () => e(x, null, [e("span", {
      style: {
        color: l.color,
        fontSize: l.fontSize
      }
    }, [t.displayValue])]);
  }
}), M = {
  delay: n.number.def(1),
  blur: n.number.def(2),
  i: {
    type: Number,
    required: !1,
    default: 0,
    validator(l) {
      return l < 10 && l >= 0 && Number.isInteger(l);
    }
  }
}, $ = /* @__PURE__ */ T({
  name: "ReboundCountTo",
  props: M,
  setup(l) {
    const s = y(), t = y(null);
    return w(() => {
      const u = navigator.userAgent.toLowerCase(), f = (m) => m.test(u);
      f(/safari/g) && !f(/chrome/g) && (t.value = setTimeout(() => {
        s.value.setAttribute("style", `
        animation: none;
        transform: translateY(calc(var(--i) * -9.09%))
      `);
      }, l.delay * 1e3));
    }), z(() => {
      clearTimeout(g(t));
    }), () => e(x, null, [e("div", {
      class: "scroll-num",
      style: {
        "--i": l.i,
        "--delay": l.delay
      }
    }, [e("ul", {
      ref: "ulRef",
      style: {
        fontSize: "32px"
      }
    }, [e("li", null, [r("0")]), e("li", null, [r("1")]), e("li", null, [r("2")]), e("li", null, [r("3")]), e("li", null, [r("4")]), e("li", null, [r("5")]), e("li", null, [r("6")]), e("li", null, [r("7")]), e("li", null, [r("8")]), e("li", null, [r("9")]), e("li", null, [r("0")])]), e("svg", {
      width: "0",
      height: "0"
    }, [e("filter", {
      id: "blur"
    }, [e("feGaussianBlur", {
      in: "SourceGraphic",
      stdDeviation: `0 ${l.blur}`
    }, null)])])])]);
  }
}), I = N(B), P = N($);
export {
  I as ReNormalCountTo,
  P as ReboundCountTo
};