feat(VNumberInput): clear zero's on focus

packages/docs/src/examples/v-number-input/prop-clear-zero.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-number-input v-model="value" clear-zero></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  const value = ref(0)
+</script>

packages/docs/src/pages/en/components/number-inputs.md

@@ -108,3 +108,9 @@ The `min` and `max` props specify the minimum and maximum values accepted by v-n
 The `step` prop behaves the same as the `step` attribute in the `<input type="number">`, it defines the incremental steps for adjusting the numeric value.
 
 <ExamplesExample file="v-number-input/prop-step" />
+
+#### Clear zero's
+
+The `clear-zero` prop automatically clears input value upon focus, so users don't need to use remove it themselves.
+
+<ExamplesExample file="v-number-input/prop-clear-zero" />

packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx

@@ -54,6 +54,7 @@ const makeVNumberInputProps = propsFactory({
     type: Number,
     default: 1,
   },
+  clearZero: Boolean,
 
   ...omit(makeVTextFieldProps({}), ['appendInnerIcon', 'modelValue', 'prependInnerIcon']),
 }, 'VNumberInput')
@@ -166,6 +167,13 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       }
     }
 
+    function onFocus () {
+      if (controlsDisabled.value) return
+      if (props.clearZero && model.value === 0 && vTextFieldRef.value) {
+        nextTick(() => vTextFieldRef.value!.value = '')
+      }
+    }
+
     async function onKeydown (e: KeyboardEvent) {
       if (
         ['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) ||
@@ -318,6 +326,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
           v-model={ model.value }
           onBeforeinput={ onBeforeinput }
           onChange={ clampModel }
+          onFocus={ onFocus }
           onKeydown={ onKeydown }
           class={[
             'v-number-input',