fix(VNumberInput): use VTextField as the base component

[yuwu9145]

type="number" input has been removed, number-input should be really just a wrapper having number features on top of VTextField.

This approach reuses VTextFi19757eld features

fixes #19659
fixes #19757

Description

Markup:

<template>
  <v-app>
    <v-container>
      <v-form fast-fail @submit.prevent>
        <v-text-field
          v-model="msg"
          :rules="[v => v.length > 3 || 'min length 3'      ]"
        />
        <v-number-input
          v-model="value"
          :rules="[v => v > 3        || 'value must be > 3' ]"
        />
        <v-btn type="submit" text="test validate and error messages" />
      </v-form>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('ms')
  const value = ref(1)
</script>

Regression check playground

<template>
  <v-app>
    <v-select
      v-model="fieldVariant"
      label="Variants"
      :items="['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain']"
    />
    <h1>{{ numberInputValue }}</h1>
    <v-number-input
      v-model="numberInputValue"
      :variant="fieldVariant"
    />
    <div class="ma-4 pa-4">
      <v-number-input
        v-model="numberInputValue"
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Reverse</h1>
      <v-number-input
        v-model="numberInputValue"
        reverse
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        reverse
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        reverse
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>inset</h1>
      <v-number-input
        v-model="numberInputValue"
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        inset
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Reverse Inset</h1>
      <v-number-input
        v-model="numberInputValue"
        reverse
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        reverse
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        reverse
        inset
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Hide Input</h1>
      <v-number-input
        v-model="numberInputValue"
        hide-input
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        inset
        hide-input
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Control slots</h1>
      <v-number-input
        v-model="numberInputValue"
        :variant="fieldVariant"
        reverse
      >
        <template v-slot:increment="{ click }">
          <v-btn
            color="red"
            @click="click"
          />
        </template>
        <template v-slot:decrement="{ click }">
          <v-btn
            color="green"
            @click="click"
          />
        </template>
      </v-number-input>
    </div>
    <div class="ma-4 pa-4">
      <h1>Native html attributes support</h1>
      <h4>max (100)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :model-value="120"
        :variant="fieldVariant"
      />
      <h4>min (10)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :model-value="6"
        :variant="fieldVariant"
      />
      <h4>step (5)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :step="5"
        :model-value="70"
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>VInput/VField props</h1>
      <h4>disabled</h4>
      <v-number-input
        :max="100"
        :min="10"
        disabled
        :variant="fieldVariant"
      />
      <h4>hint</h4>
      <v-number-input
        hint="Enter your password to access this website"
        :variant="fieldVariant"
      />
      <h4>label</h4>
      <v-number-input
        label="test label"
        :variant="fieldVariant"
      />
      <h4>Density</h4>
      <v-number-input
        :variant="fieldVariant"
        density="default"
      />
      <v-number-input
        :variant="fieldVariant"
        density="comfortable"
      />
      <v-number-input
        :variant="fieldVariant"
        density="compact"
      />
      <h4>Loading</h4>
      <v-number-input
        :variant="fieldVariant"
        loading
        color="blue"
      >
      </v-number-input>
    </div>
  </v-app>
</template>

<script setup lang="ts">
  import { template } from 'cypress/types/lodash';
import { computed, ref } from 'vue'
  const fieldVariant = ref('outlined')
  const numberInputValue = ref(120)
  const progress = computed(() => Math.min(100, 5 * 10))
</script>

[yuwu9145]

Extra eyes on regressions are welcome