v3-num/dist/v-num.umd.js

A Vue 3 headless component to formatting numbers using Intl.numberFormat.

(function (n, l) {
  typeof exports == "object" && typeof module != "undefined"
    ? (module.exports = l(require("vue")))
    : typeof define == "function" && define.amd
    ? define(["vue"], l)
    : ((n = typeof globalThis != "undefined" ? globalThis : n || self),
      (n.VNum = l(n.vue)));
})(this, function (n) {
  "use strict";
  function l(e, t) {
    return (e = { ...e }), t.forEach((u) => delete e[u]), e;
  }
  function r(e, t) {
    return (
      (e = { ...e }),
      Object.entries(e).forEach(([u, i]) => t(i) && delete e[u]),
      e
    );
  }
  const m = n.defineComponent({ name: "VNum" });
  function f(e) {
    const t = e,
      u = n.ref();
    return (
      n.watch(
        () => t,
        () => {
          const i = r(
            l(t, ["value", "locale", "numberStyle"]),
            (o) => o == null
          );
          (i.style = t.numberStyle),
            (u.value = new Intl.NumberFormat(t.locale, i).format(
              t.round ? Math.round(t.value) : t.value
            ));
        },
        { deep: !0, immediate: !0 }
      ),
      (i, o) => n.renderSlot(i.$slots, "default", { number: u.value })
    );
  }
  const a = n.defineComponent({
    ...m,
    props: {
      value: null,
      locale: { default: "en-US" },
      localeMatcher: { default: "best fit" },
      currency: { default: "USD" },
      currencyDisplay: { default: "symbol" },
      numberStyle: { default: "decimal" },
      useGrouping: { type: Boolean, default: !0 },
      minimumIntegerDigits: null,
      minimumFractionDigits: null,
      maximumFractionDigits: null,
      minimumSignificantDigits: null,
      maximumSignificantDigits: null,
      notation: { default: "standard" },
      compactDisplay: { default: "short" },
      signDisplay: { default: "auto" },
      round: { type: Boolean, default: !1 },
    },
    setup: f,
  });
  return (
    (a.install = (e) => {
      e.component(a.name, a);
    }),
    a
  );
});