feat(VNumberInput): more flexible precision display (#21315)

Author: J-Sek

packages/api-generator/src/locale/en/VNumberInput.json

@@ -5,6 +5,7 @@
     "inset": "Applies an indentation to the dividers used in the stepper buttons.",
     "max": "Specifies the maximum allowable value for the input.",
     "min": "Specifies the minimum allowable value for the input.",
+    "minFractionDigits": "Specifies the minimum fraction digits to be displayed (capped to `precision`). Defaults to `precision` when not explicitly set.",
     "precision": "Enforces strict precision. It is expected to be an integer value in range between `0` and `15`, or null for unrestricted.",
     "step": "Defines the interval between allowed values when the user increments or decrements the input"
   },

packages/vuetify/src/components/VNumberInput/VNumberInput.tsx

@@ -60,6 +60,10 @@ const makeVNumberInputProps = propsFactory({
     type: Number as PropType<number | null>,
     default: 0,
   },
+  minFractionDigits: {
+    type: Number as PropType<number | null>,
+    default: null,
+  },
 
   ...omit(makeVTextFieldProps(), ['modelValue', 'validationValue']),
 }, 'VNumberInput')
@@ -87,12 +91,26 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     const { isFocused, focus, blur } = useFocus(props)
 
     function correctPrecision (val: number, precision = props.precision) {
-      const fixed = precision == null
-        ? String(val)
-        : val.toFixed(precision)
-      return isFocused.value
-        ? Number(fixed).toString() // trim zeros
-        : fixed
+      if (precision == null) {
+        return String(val)
+      }
+
+      let fixed = val.toFixed(precision)
+
+      if (isFocused.value) {
+        return Number(fixed).toString() // trim zeros
+      }
+
+      if ((props.minFractionDigits ?? precision) < precision) {
+        const trimLimit = precision - props.minFractionDigits!
+        const [baseDigits, fractionDigits] = fixed.split('.')
+        fixed = [
+          baseDigits,
+          fractionDigits.replace(new RegExp(`0{1,${trimLimit}}$`), ''),
+        ].filter(Boolean).join('.')
+      }
+
+      return fixed
     }
 
     const model = useProxiedModel(props, 'modelValue', null,
@@ -159,6 +177,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
     }
 
     watch(() => props.precision, () => formatInputValue())
+    watch(() => props.minFractionDigits, () => formatInputValue())
 
     onMounted(() => {
       clampModel()
@@ -279,9 +298,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
         inputText.value = null
         return
       }
-      inputText.value = props.precision == null
-        ? String(model.value)
-        : model.value.toFixed(props.precision)
+      inputText.value = correctPrecision(model.value)
     }
 
     function trimDecimalZeros () {