feat(VNumberInput): add new component

[yuwu9145]

Description

Markup:

<template>
  <v-app>
    <v-select
      v-model="fieldVariant"
      label="Variants"
      :items="['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain']"
    />
    <h1>{{ numberInputValue }}</h1>
    <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 { computed, ref } from 'vue'
  const fieldVariant = ref('outlined')
  const numberInputValue = ref(120)
  const progress = computed(() => Math.min(100, 5 * 10))
</script>

[github-actions]

🚀 Nightly release published to @vuetify/nightly@3.4.0-alpha.1-pr-18162.6892936.

[yuwu9145]

Q1: How should labels be aligned in the context of "reverse stepper buttons"? Especially for outlined variant?

Q2: Should we support plain & underlined variants?

[KaelWD]

How should labels be aligned?

It could also be shifted over the width of the buttons like prepend-inner does.

Should we support plain & underlined variants?

Plain definitely, underlined kinda comes free with that and still looks better than native.

[yuwu9145]

Label alignment should be resolved in #19214

[yuwu9145]

Leave the plain and underlined variants of the UI as out-of-the-box for now, feel free to comment if they really need special UX care.

Other parts are ready for further review