fix(VField/VInput): centerAffix prop for underlined/plain (#20064)

Co-authored-by: John Leider <[email protected]>
vuetifyjs · Jul 9, 2024 · 650ba25 · 650ba25
1 parent 601d364
commit 650ba25
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 22 deletions.
diff --git a/packages/api-generator/src/locale/en/VField.json b/packages/api-generator/src/locale/en/VField.json
@@ -2,7 +2,7 @@
   "props": {
     "appendInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **append-inner** slot.",
     "baseColor": "Sets the color of the input when it is not focused.",
-    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
+    "centerAffix": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** under the hood, and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.",
     "clearIcon": "The icon used when the **clearable** prop is set to true.",
     "dirty": "Manually apply the dirty state styling.",
     "disabled": "Removes the ability to click or target the input.",

diff --git a/packages/api-generator/src/locale/en/VInput.json b/packages/api-generator/src/locale/en/VInput.json
@@ -1,7 +1,7 @@
 {
   "props": {
     "backgroundColor": "Changes the background-color of the input.",
-    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
+    "centerAffix": "Vertically align **append** and **prepend** in the center.",
     "direction": "Changes the direction of the input.",
     "hideDetails": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.",
     "hideSpinButtons": "Hides spin buttons on the input when type is set to `number`.",

diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
@@ -141,6 +141,10 @@
 
     $root: &
 
+    @at-root #{selector.nest('.v-field.v-field--center-affix.v-field--variant-underlined, .v-field.v-field--center-affix.v-field--variant-plain', &)}
+      padding-top: unset
+      padding-bottom: unset
+
     @at-root
       @include tools.density('v-input', $input-density) using ($modifier)
         @at-root #{selector.nest(&, $root)}
@@ -195,8 +199,8 @@
       align-items: center
       padding-top: 0
 
-  .v-field.v-field--variant-underlined,
-  .v-field.v-field--variant-plain
+  .v-field:not(.v-field--center-affix).v-field--variant-underlined,
+  .v-field:not(.v-field--center-affix).v-field--variant-plain
     .v-field__append-inner,
     .v-field__clearable,
     .v-field__prepend-inner

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -62,10 +62,7 @@ export const makeVFieldProps = propsFactory({
     default: '$clear',
   },
   active: Boolean,
-  centerAffix: {
-    type: Boolean,
-    default: undefined,
-  },
+  centerAffix: Boolean,
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -136,8 +133,9 @@ export const VField = genericComponent<new <T>(
     const { roundedClasses } = useRounded(props)
     const { rtlClasses } = useRtl()
 
+    const isSingleLine = computed(() => props.singleLine || props.centerAffix)
     const isActive = computed(() => props.dirty || props.active)
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
+    const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label))
 
     const uid = getUid()
     const id = computed(() => props.id || `input-${uid}`)
@@ -242,7 +240,7 @@ export const VField = genericComponent<new <T>(
             {
               'v-field--active': isActive.value,
               'v-field--appended': hasAppend,
-              'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
+              'v-field--center-affix': props.centerAffix,
               'v-field--disabled': props.disabled,
               'v-field--dirty': props.dirty,
               'v-field--error': props.error,
@@ -251,7 +249,7 @@ export const VField = genericComponent<new <T>(
               'v-field--persistent-clear': props.persistentClear,
               'v-field--prepended': hasPrepend,
               'v-field--reverse': props.reverse,
-              'v-field--single-line': props.singleLine,
+              'v-field--single-line': isSingleLine.value,
               'v-field--no-label': !label(),
               [`v-field--variant-${props.variant}`]: true,
             },

diff --git a/packages/vuetify/src/components/VInput/VInput.sass b/packages/vuetify/src/components/VInput/VInput.sass
@@ -103,7 +103,7 @@
       input[type=number]
         -moz-appearance: textfield
 
-    &--plain-underlined
+    &--plain-underlined:not(&--center-affix)
 
       .v-input__prepend,
       .v-input__append

diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -40,10 +40,7 @@ export interface VInputSlot {
 export const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
-  centerAffix: {
-    type: Boolean,
-    default: true,
-  },
+  centerAffix: Boolean,
   prependIcon: IconValue,
   hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,
   hideSpinButtons: Boolean,

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -176,7 +176,6 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
           style={ props.style }
           { ...rootAttrs }
           { ...inputProps }
-          centerAffix={ !isPlainOrUnderlined.value }
           focused={ isFocused.value }
         >
           {{
@@ -202,6 +201,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }
+                centerAffix={ props.centerAffix }
                 error={ isValid.value === false }
               >
                 {{

diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -18,7 +18,7 @@ import Intersect from '@/directives/intersect'
 
 // Utilities
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
-import { callEvent, clamp, convertToUnit, filterInputAttrs, genericComponent, propsFactory, useRender } from '@/util'
+import { callEvent, clamp, convertToUnit, filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -48,8 +48,8 @@ export const makeVTextareaProps = propsFactory({
   suffix: String,
   modelModifiers: Object as PropType<Record<string, boolean>>,
 
-  ...makeVInputProps(),
-  ...makeVFieldProps(),
+  ...omit(makeVInputProps(), ['centerAffix']),
+  ...omit(makeVFieldProps(), ['centerAffix']),
 }, 'VTextarea')
 
 type VTextareaSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {
@@ -228,7 +228,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
           style={ props.style }
           { ...rootAttrs }
           { ...inputProps }
-          centerAffix={ rows.value === 1 && !isPlainOrUnderlined.value }
+          centerAffix={ false }
           focused={ isFocused.value }
         >
           {{
@@ -253,7 +253,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
-                centerAffix={ rows.value === 1 && !isPlainOrUnderlined.value }
+                centerAffix={ false }
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }