feat(VNumberInput): strict precision

[J-Sek]

Description

• leaving precision unrestricted forces developers to invent and apply validation rules
• the form might look bad when some values are having more digits than other
• it is popular among other frameworks that provide similar component

Resolves #19898

Notes about implementation:

• allows us to format (enforce precision) value on blur and on model change
• ignores precision for external changes (same as min/max enforcement)
• hides insignificant digits on focus (better UX)

Markup:

<template>
  <v-container>
    <v-row>
      <v-col>
        <h5>(default precision="0" max="1550")<br>initial value: 2123.2</h5>
        <v-number-input v-model="example1" clearable hide-details="auto" :max="1550" />
        <code class="d-block pt-3">value: {{ example1 ?? 'null' }}</code>
        <input class="border-md pa-2 mt-2" type="number" v-model="example1" />

        <h5 class="mt-6">(readonly)</h5>
        <v-number-input v-model="example1" clearable hide-details="auto" :max="1550" readonly />

        <h5 class="mt-6">(disabled)</h5>
        <v-number-input v-model="example1" clearable hide-details="auto" :max="1550" disabled />
      </v-col>
      <v-col>
        <h5>(precision="2")</h5>
        <v-number-input v-model="example2" :precision="2" hide-details="auto"></v-number-input>
        <code class="d-block pt-3">value: {{ example2 ?? 'null' }}</code>
        <input class="border-md pa-2 mt-2" type="number" v-model="example2" />
      </v-col>
      <v-col>
        <h5>(precision="5")</h5>
        <v-number-input v-model="example3" :precision="5" hide-details="auto"></v-number-input>
        <code class="d-block pt-3">value: {{ example3 ?? 'null' }}</code>
        <input class="border-md pa-2 mt-2" type="number" v-model="example3" />
      </v-col>
      <v-col>
        <h5>(precision="3" min='4' max='120') initial state</h5>
        <v-number-input v-model="example4" :precision="3" hide-details="auto" :min='4' :max='120'></v-number-input>
        <code class="d-block pt-3">value: {{ example4 ?? 'null' }}</code>
        <input class="border-md pa-2 mt-2" type="number" v-model="example4" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'
  const example1 = ref(2123.2)
  const example2 = ref(25.5)
  const example3 = ref(0.052)
  const example4 = ref(null)
</script>

[egeersoz]

This is exactly what we need. +1

[J-Sek]

@yuwu9145 , with rebase I have revisited the implementation and decided to closely match existing behavior around min/max enforcement. No need for validation rules.

I think precision enforcement is critical for the component adoption and it is the best moment to merge it. After the VNumberInput is out of labs, the implementation would need to assume people use "unrestricted" precision and new implementation would need to accept null as default which would significantly complicate the internals.