vue-amazing-ui/es/numberanimation/NumberAnimation.vue.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as c, ref as y, watchEffect as v, watch as h, onMounted as x, computed as S, createElementBlock as _, openBlock as b, normalizeStyle as w, toDisplayString as B } from "vue";
import { formatNumber as k } from "../utils/index.js";
import { useTransition as C, TransitionPresets as E } from "@vueuse/core";
const g = /* @__PURE__ */ c({
  __name: "NumberAnimation",
  props: {
    from: { default: 0 },
    to: { default: 1e3 },
    duration: { default: 3e3 },
    autoplay: { type: Boolean, default: !0 },
    precision: { default: 0 },
    prefix: { default: void 0 },
    suffix: { default: void 0 },
    separator: { default: "," },
    decimal: { default: "." },
    valueStyle: { default: () => ({}) },
    transition: { default: "easeInOutCubic" }
  },
  emits: ["started", "finished"],
  setup(i, { expose: u, emit: s }) {
    const e = i, t = y(e.from), r = s;
    v(() => {
      t.value = e.from;
    }), h(
      () => [e.from, e.to],
      () => {
        e.autoplay && o();
      },
      {
        deep: !0
      }
    ), x(() => {
      e.autoplay && o();
    });
    const l = C(t, {
      duration: e.duration,
      transition: E[e.transition],
      onFinished: () => r("finished"),
      onStarted: () => r("started")
    });
    function o() {
      t.value = e.to;
    }
    const f = S(() => {
      const { precision: a, separator: n, decimal: d, prefix: p, suffix: m } = e;
      return k(l.value, a, n, d, p, m);
    });
    return u({
      play: o
    }), (a, n) => (b(), _("span", {
      style: w(a.valueStyle)
    }, B(f.value), 5));
  }
});
export {
  g as default
};