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

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as m, 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__ */ m({
  __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(a, { expose: u, emit: s }) {
    const t = a, e = y(t.from), n = s;
    v(() => {
      e.value = t.from;
    }), h(
      () => [t.from, t.to],
      () => {
        t.autoplay && o();
      },
      {
        deep: !0
      }
    ), x(() => {
      t.autoplay && o();
    });
    const l = C(e, {
      duration: t.duration,
      transition: E[t.transition],
      onFinished: () => n("finished"),
      onStarted: () => n("started")
    });
    function o() {
      e.value = t.to;
    }
    const f = S(() => {
      const { precision: r, separator: i, decimal: d, prefix: p, suffix: c } = t;
      return k(l.value, r, i, d, p, c);
    });
    return u({
      play: o
    }), (r, i) => (b(), _("span", {
      style: w(a.valueStyle)
    }, B(f.value), 5));
  }
});
export {
  g as default
};