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

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

(() => {
  var s = (function (u) {
    "use strict";
    function r(e, t) {
      return (e = { ...e }), t.forEach((n) => delete e[n]), e;
    }
    function o(e, t) {
      return (
        (e = { ...e }),
        Object.entries(e).forEach(([n, l]) => t(l) && delete e[n]),
        e
      );
    }
    const m = u.defineComponent({ name: "VNum" });
    function c(e) {
      const t = e,
        n = u.ref();
      return (
        u.watch(
          () => t,
          () => {
            const l = o(
              r(t, ["value", "locale", "numberStyle"]),
              (i) => i == null
            );
            (l.style = t.numberStyle),
              (n.value = new Intl.NumberFormat(t.locale, l).format(
                t.round ? Math.round(t.value) : t.value
              ));
          },
          { deep: !0, immediate: !0 }
        ),
        (l, i) => u.renderSlot(l.$slots, "default", { number: n.value })
      );
    }
    const a = u.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: c,
    });
    return (
      (a.install = (e) => {
        e.component(a.name, a);
      }),
      a
    );
  })(vue);
})();