maz-ui/components/MazAnimatedCounter.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as q, ref as y, onMounted as B, onBeforeUnmount as C, watch as T, openBlock as V, createElementBlock as $, createElementVNode as z, renderSlot as f, createTextVNode as u, toDisplayString as s } from "vue";
import './assets/MazAnimatedCounter.DTzaNX_Y.css';function A() {
  return typeof document < "u";
}
const F = { class: "maz-sr-only" }, I = /* @__PURE__ */ q({
  __name: "MazAnimatedCounter",
  props: {
    count: {},
    duration: { default: 1e3 },
    prefix: { default: void 0 },
    suffix: { default: void 0 },
    delay: { default: 100 },
    once: { type: Boolean, default: !0 }
  },
  setup(i) {
    const t = i, r = y(0), a = y(null);
    function c() {
      return !A() || !window.requestAnimationFrame ? (e) => (setTimeout(e, 1e3 / 60), 0) : window.requestAnimationFrame.bind(window);
    }
    function g(e, o, d, _) {
      const m = c();
      if (!A()) {
        r.value = o;
        return;
      }
      r.value = e, setTimeout(() => {
        const h = performance.now(), p = (x = performance.now()) => {
          const M = x - h, v = Math.min(M / d, 1), k = (w) => w * (2 - w);
          r.value = Math.round(
            e + (o - e) * k(v)
          ), v < 1 && m(p);
        };
        m(p);
      }, _);
    }
    function l(e, o) {
      g(e, o, t.duration, t.delay);
    }
    let n = null;
    return B(() => {
      t.once || (n = new IntersectionObserver(([e]) => {
        e.isIntersecting && (l(0, t.count), t.once && (n == null || n.unobserve(e.target)));
      }), a.value && n.observe(a.value));
    }), C(() => n == null ? void 0 : n.disconnect()), T(
      () => t.count,
      (e, o) => {
        if (e === o)
          return;
        l(o ?? 0, e);
      },
      { immediate: !0 }
    ), (e, o) => (V(), $(
      "span",
      {
        ref_key: "elementRef",
        ref: a,
        class: "m-animated-counter m-reset-css"
      },
      [
        z("span", F, [
          f(e.$slots, "prefix", {}, () => [
            u(
              s(e.prefix),
              1
              /* TEXT */
            )
          ], !0),
          u(
            s(e.count),
            1
            /* TEXT */
          ),
          f(e.$slots, "suffix", {}, () => [
            u(
              s(e.suffix),
              1
              /* TEXT */
            )
          ], !0)
        ]),
        f(e.$slots, "prefix", {}, () => [
          u(
            s(e.prefix),
            1
            /* TEXT */
          )
        ], !0),
        u(
          s(r.value),
          1
          /* TEXT */
        ),
        f(e.$slots, "suffix", {}, () => [
          u(
            s(e.suffix),
            1
            /* TEXT */
          )
        ], !0)
      ],
      512
      /* NEED_PATCH */
    ));
  }
}), O = (i, t) => {
  const r = i.__vccOpts || i;
  for (const [a, c] of t)
    r[a] = c;
  return r;
}, E = /* @__PURE__ */ O(I, [["__scopeId", "data-v-fc76f127"]]);
export {
  E as default
};