feat(VNumberInput): ability to hide controls + spacing tweaks (#19908)

resolves #19897 fixes #20782
vuetifyjs · Feb 17, 2025 · 3085e1a · 3085e1a
1 parent e0ec39f
commit 3085e1a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/packages/docs/src/examples/v-number-input/prop-control-variant.vue b/packages/docs/src/examples/v-number-input/prop-control-variant.vue
@@ -18,6 +18,12 @@
 
         <v-number-input control-variant="split"></v-number-input>
       </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Hidden</h5>
+
+        <v-number-input control-variant="hidden"></v-number-input>
+      </v-col>
     </v-row>
   </v-container>
 </template>
diff --git a/packages/docs/src/pages/en/components/number-inputs.md b/packages/docs/src/pages/en/components/number-inputs.md
@@ -75,7 +75,7 @@ The `v-number-input` component has support for most of `v-field`'s props and is
 
 #### Control-variant
 
-The `control-variant` prop offers an easy way to customize steppers button layout. The following values are valid options: **default**, **stacked** and **split**.
+The `control-variant` prop offers an easy way to customize steppers button layout. The following values are valid options: **default**, **stacked**, **split** and **hidden**.
 
 <ExamplesExample file="v-number-input/prop-control-variant" />
 

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass b/packages/vuetify/src/labs/VNumberInput/VNumberInput.sass
@@ -15,8 +15,18 @@
         -webkit-appearance: none
 
     .v-field
-      padding-inline-end: 0
-      padding-inline-start: 0
+      &:not(:has(.v-field__prepend-inner > .v-icon))
+        padding-inline-start: 0
+
+      &:not(:has(.v-field__append-inner > .v-icon))
+        padding-inline-end: 0
+
+    .v-field__prepend-inner:has(.v-number-input__control) > .v-icon
+      margin-inline-end: 12px
+
+    .v-field__append-inner:has(.v-number-input__control) > .v-icon
+      margin-inline-start: 12px
+
 
     &--inset
       .v-divider

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -29,7 +29,7 @@ type VNumberInputSlots = Omit<VTextFieldSlots, 'default'> & {
   decrement: ControlSlot
 }
 
-type ControlVariant = 'default' | 'stacked' | 'split'
+type ControlVariant = 'default' | 'stacked' | 'split' | 'hidden'
 
 const makeVNumberInputProps = propsFactory({
   controlVariant: {
@@ -55,7 +55,7 @@ const makeVNumberInputProps = propsFactory({
     default: 1,
   },
 
-  ...omit(makeVTextFieldProps({}), ['appendInnerIcon', 'modelValue', 'prependInnerIcon']),
+  ...omit(makeVTextFieldProps({}), ['modelValue']),
 }, 'VNumberInput')
 
 export const VNumberInput = genericComponent<VNumberInputSlots>()({
@@ -297,7 +297,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
               { incrementControlNode() }
             </div>
-          ) : (props.reverse
+          ) : (props.reverse || controlVariant.value === 'hidden'
             ? undefined
             : <>{ dividerNode() }{ controlNode() }</>)
 
@@ -311,7 +311,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
 
               <VDivider vertical />
             </div>
-          ) : (props.reverse
+          ) : (props.reverse && controlVariant.value !== 'hidden'
             ? <>{ controlNode() }{ dividerNode() }</>
             : undefined)