@fish-render/count-to/index.js

Fish Render countTo component for Vue 3

import { defineComponent as E, ref as p, computed as x, watch as g, nextTick as d, onMounted as F, openBlock as v, createElementBlock as m, toDisplayString as y, createCommentVNode as w, createElementVNode as b } from "vue";
const s = (a) => {
  const e = Math.floor(a).toString().split(".");
  return e[0] = e[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), e.join(".");
}, j = (a) => 1 - Math.pow(1 - a, 4), I = (a, o, e) => a + (o - a) * j(e), O = { class: "fish-count-to" }, Q = { key: 0 }, R = { key: 1 }, z = /* @__PURE__ */ E({
  __name: "CountTo",
  props: {
    startValue: { default: 0 },
    endValue: {},
    duration: { default: 2e3 },
    prefix: { default: "" },
    suffix: { default: "" },
    autoplay: { type: Boolean, default: !0 },
    ssr: { type: Boolean, default: !0 },
    initialDisplay: { default: "auto" }
  },
  setup(a, { expose: o }) {
    const e = a, u = p(""), l = p(!1), n = p(!1), r = p(!1), i = x(() => s(e.startValue)), f = x(() => s(e.endValue)), A = () => e.autoplay ? n.value ? e.initialDisplay === "end" ? f.value : (e.initialDisplay === "start", i.value) : e.initialDisplay === "start" ? i.value : f.value : f.value;
    u.value = A();
    const B = () => {
      n.value = typeof window < "u" && typeof document < "u";
    }, V = (t) => {
      n.value && (typeof requestAnimationFrame < "u" ? requestAnimationFrame(t) : setTimeout(t, 16));
    }, c = () => {
      if (!n.value || e.ssr && !r.value)
        return;
      const t = e.startValue, C = e.endValue, N = e.duration, S = Date.now();
      l.value = !0;
      const D = () => {
        if (!n.value)
          return;
        const k = Date.now() - S, _ = Math.min(k / N, 1), q = I(t, C, _);
        u.value = s(q), _ < 1 ? V(D) : l.value = !1;
      };
      V(D);
    }, M = () => {
      !l.value && n.value && c();
    }, h = () => {
      u.value = i.value, l.value = !1;
    }, T = () => {
      u.value = f.value, l.value = !1;
    };
    return o({
      startAnimation: M,
      resetToStart: h,
      jumpToEnd: T
    }), g(
      () => [e.startValue, e.endValue, e.duration],
      () => {
        n.value && (l.value && (u.value = s(e.startValue)), e.autoplay && r.value ? d(() => {
          c();
        }) : e.autoplay || (u.value = s(e.endValue)));
      },
      { deep: !0 }
    ), g(
      () => e.autoplay,
      (t) => {
        !n.value || !r.value || (t ? (h(), d(() => {
          c();
        })) : T());
      }
    ), F(() => {
      B(), r.value = !0, e.autoplay && n.value && !l.value && d(() => {
        c();
      });
    }), (t, C) => (v(), m("span", O, [
      t.prefix ? (v(), m("span", Q, y(t.prefix), 1)) : w("", !0),
      b("span", null, y(u.value), 1),
      t.suffix ? (v(), m("span", R, y(t.suffix), 1)) : w("", !0)
    ]));
  }
}), G = (a) => {
  a.component("CountTo", z);
}, K = {
  install: G
};
export {
  z as CountTo,
  K as default
};