[Feature Request] Strict precision for VNumberInput

[J-Sek]

Problem to solve

In my large web app I have multiple forms with many different use cases for number inputs. When I want user to put a value in USD it should display nicely using expected formatting and enforce up to 2 decimal digits. Having "$" prefix is OK, but actually formatting and enforcing precision is a level-up in terms of UX.

Playground

Proposed solution

• new prop precision
• typing more digits should be allowed, but should trigger validation message
• blur event should cut off unnecessary characters (it would be great to never emit them to the parent component)

Simplified implementation:

// <v-text-field v-model='internalValue' :rules='rules' @blur='onBlur' />

const internalValue = ref('');
const props = defineProps<{
  grouping?: boolean;
  precision?: number | null;
}>();
const enforcePrecision = computed(() => props.precision != null && props.precision > 0 && Number.isInteger(props.precision));

const rules = computed(() => [
  (v: number | null) => !v || !enforcePrecision.value || (String(v).split('.')[1] ?? '').length <= props.precision || `Expected up to ${props.precision} decimal places`,
]);

async function onBlur(event: Event) {
  if (!isEmpty(internalValue)) {
    emit(formatForEmit(internalValue));
  }
);

I think implementation would require additional props for grouping character and decimal separator.

propsFactory({
  groupingSeparator: { type: String, default: ',' },
  decimalSeparator: { type: String, default: '.' },
  // ...
});

function formatForField(v: string) {
  // add grouping separator if props.grouping === true
  // add decimal separator if props.precision > 0 or undefined
  // cut decimal part if props.precision > 0
}
function formatForEmit(v: string) {
  return parseNumber(formatForField(v));
}
function parseNumber(v: string) {
  // remove everything except first occurrence of decimal separator and `-` sign before passing text to `parseFloat`
}

Related to:

• [Feature Request] Currency Input #11495 (rejected in 2020)
• [Feature Request] Vuetify currency input component requirement #18060 (vue-currency-input supports only v-text-field and I personally find it cumbersome and compromising on UX)
• [Feature Request] Adding decimals props to v-number-input to control the decimal length  #19450 (I don't think maska is a good fit... and again, I would need to recreate VNumberInput's controls)

[J-Sek]

We could take some inspiration from PrimeVue's InputNumber. However their API binds itself strongly to Intl.NumberFormat`. We could deliver better DX with:

• grouping: Boolean (default: false)
• precision: Number (default: 0) – to handle both min and max as I don't see the reason for split
• formatterOptions: Intl.NumberFormatOptions – total flexibility without polluting component's API

Edit: I will not continue subject of grouping/formatting in this issue in order to keep it focused on precision and hopefully get it done faster.