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

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

import { defineComponent, ref, watch, renderSlot } from "vue";

function omit(obj, props) {
  obj = { ...obj };
  props.forEach((prop) => delete obj[prop]);
  return obj;
}
function omitBy(obj, check) {
  obj = { ...obj };
  Object.entries(obj).forEach(
    ([key, value]) => check(value) && delete obj[key]
  );
  return obj;
}

const __default__ = defineComponent({ name: "VNum" });
function setup(__props) {
  const props = __props;
  const number = ref();
  watch(
    () => props,
    () => {
      const configs = omitBy(
        omit(props, ["value", "locale", "numberStyle"]),
        (v) => v === null || v === void 0
      );
      configs.style = props.numberStyle;
      number.value = new Intl.NumberFormat(props.locale, configs).format(
        props.round ? Math.round(props.value) : props.value
      );
    },
    { deep: true, immediate: true }
  );
  return (_ctx, _cache) => {
    return renderSlot(_ctx.$slots, "default", { number: number.value });
  };
}
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    value: null,
    locale: { default: "en-US" },
    localeMatcher: { default: "best fit" },
    currency: { default: "USD" },
    currencyDisplay: { default: "symbol" },
    numberStyle: { default: "decimal" },
    useGrouping: { type: Boolean, default: true },
    minimumIntegerDigits: null,
    minimumFractionDigits: null,
    maximumFractionDigits: null,
    minimumSignificantDigits: null,
    maximumSignificantDigits: null,
    notation: { default: "standard" },
    compactDisplay: { default: "short" },
    signDisplay: { default: "auto" },
    round: { type: Boolean, default: false },
  },
  setup,
});

_sfc_main.install = (Vue) => {
  Vue.component(_sfc_main.name, _sfc_main);
};

export { _sfc_main as default };