@number-flow/vue/dist/index.js

A component to transition and format numbers.

import { defineComponent as T, provide as P, renderSlot as b, watch as M, nextTick as g, onUnmounted as B, ref as p, computed as c, inject as E, openBlock as A, createElementBlock as F, mergeProps as L, unref as v, onMounted as N, watchEffect as $, toValue as h } from "vue";
import r, { formatToData as k, renderInnerHTML as C, define as G, canAnimate as S, prefersReducedMotion as f } from "number-flow/lite";
import { default as q } from "number-flow/lite";
export * from "number-flow/plugins";
import { BROWSER as H } from "esm-env";
const w = Symbol(), j = /* @__PURE__ */ T({
  __name: "NumberFlowGroup",
  setup(a) {
    const s = /* @__PURE__ */ new Set();
    let i = !1;
    return P(w, (t, l) => {
      s.add(t), M(
        l,
        async () => {
          i || (i = !0, s.forEach(async (e) => {
            var u;
            !e.value || !e.value.created || (e.value.willUpdate(), await g(), (u = e.value) == null || u.didUpdate());
          }), await g(), i = !1);
        }
        // { flush: 'pre' } // default
      ), B(() => {
        s.delete(t);
      });
    }), (t, l) => b(t.$slots, "default");
  }
}), R = ["batched", "trend", "plugins", "animated", "transformTiming", "spinTiming", "opacityTiming", "respectMotionPreference", "data-will-change", "digits", "innerHTML", "data"], x = /* @__PURE__ */ T({
  inheritAttrs: !1,
  __name: "index",
  props: {
    transformTiming: { default: () => r.defaultProps.transformTiming },
    spinTiming: { default: () => r.defaultProps.spinTiming },
    opacityTiming: { default: () => r.defaultProps.opacityTiming },
    animated: { type: Boolean, default: () => r.defaultProps.animated },
    respectMotionPreference: { type: Boolean, default: () => r.defaultProps.respectMotionPreference },
    trend: { type: [Number, Function], default: () => r.defaultProps.trend },
    plugins: { default: () => r.defaultProps.plugins },
    digits: { default: () => r.defaultProps.digits },
    locales: {},
    format: {},
    value: {},
    prefix: {},
    suffix: {},
    willChange: { type: Boolean, default: !1 }
  },
  emits: ["animationsstart", "animationsfinish"],
  setup(a, { expose: s, emit: i }) {
    const o = p();
    s({ el: o });
    const t = i, l = c(() => new Intl.NumberFormat(a.locales, a.format)), e = c(() => k(a.value, l.value, a.prefix, a.suffix)), u = H ? void 0 : C(e.value), m = E(w, void 0);
    return m == null || m(o, e), (n, d) => (A(), F("number-flow-vue", L({
      ref_key: "el",
      ref: o
    }, n.$attrs, {
      batched: !!v(m),
      trend: n.trend,
      plugins: n.plugins,
      animated: n.animated,
      transformTiming: n.transformTiming,
      spinTiming: n.spinTiming,
      opacityTiming: n.opacityTiming,
      respectMotionPreference: n.respectMotionPreference,
      "data-will-change": n.willChange ? "" : void 0,
      digits: n.digits,
      innerHTML: v(u),
      "data-allow-mismatch": "",
      onAnimationsstart: d[0] || (d[0] = (y) => t("animationsstart")),
      onAnimationsfinish: d[1] || (d[1] = (y) => t("animationsfinish")),
      data: e.value
    }), null, 16, R));
  }
});
G("number-flow-vue", r);
function D({
  respectMotionPreference: a = !0
} = {}) {
  const s = p(!1), i = p(!1);
  return N(() => {
    var o;
    s.value = S, i.value = ((o = f) == null ? void 0 : o.matches) ?? !1;
  }), $((o) => {
    var l;
    if (!h(a)) return;
    const t = ({ matches: e }) => {
      i.value = e;
    };
    (l = f) == null || l.addEventListener("change", t), o(() => {
      var e;
      (e = f) == null || e.removeEventListener("change", t);
    });
  }), c(
    () => s.value && (!h(a) || !i.value)
  );
}
export {
  q as NumberFlowElement,
  j as NumberFlowGroup,
  x as default,
  D as useCanAnimate
};