Revert "fix(VField/VInput): centerAffix prop for underlined/plain (#2…

…0064)" (#20173)
vuetifyjs · Jul 16, 2024 · 098f802 · 098f802
1 parent b1f74e1
commit 098f802
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 27 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": "Automatically apply **[singleLine](/api/v-field/#props-single-line)** when it is not explicitly set to a Boolean (when it is `null` by default), and vertically align **appendInner**, **prependInner**, **clearIcon**, **label** and **input field** in the center.",
+    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** 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 **append** and **prepend** in the center.",
+    "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** 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,10 +141,6 @@
 
     $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)}
@@ -199,8 +195,8 @@
       align-items: center
       padding-top: 0
 
-  .v-field:not(.v-field--center-affix).v-field--variant-underlined,
-  .v-field:not(.v-field--center-affix).v-field--variant-plain
+  .v-field.v-field--variant-underlined,
+  .v-field.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,7 +62,10 @@ export const makeVFieldProps = propsFactory({
     default: '$clear',
   },
   active: Boolean,
-  centerAffix: Boolean,
+  centerAffix: {
+    type: Boolean,
+    default: undefined,
+  },
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -76,10 +79,7 @@ export const makeVFieldProps = propsFactory({
   persistentClear: Boolean,
   prependInnerIcon: IconValue,
   reverse: Boolean,
-  singleLine: {
-    type: Boolean,
-    default: null,
-  },
+  singleLine: Boolean,
   variant: {
     type: String as PropType<Variant>,
     default: 'filled',
@@ -136,9 +136,8 @@ export const VField = genericComponent<new <T>(
     const { roundedClasses } = useRounded(props)
     const { rtlClasses } = useRtl()
 
-    const isSingleLine = computed(() => props.singleLine != null ? props.singleLine : props.centerAffix)
     const isActive = computed(() => props.dirty || props.active)
-    const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label))
+    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
     const uid = getUid()
     const id = computed(() => props.id || `input-${uid}`)
@@ -243,7 +242,7 @@ export const VField = genericComponent<new <T>(
             {
               'v-field--active': isActive.value,
               'v-field--appended': hasAppend,
-              'v-field--center-affix': props.centerAffix,
+              'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
               'v-field--disabled': props.disabled,
               'v-field--dirty': props.dirty,
               'v-field--error': props.error,
@@ -252,7 +251,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': isSingleLine.value,
+              'v-field--single-line': props.singleLine,
               '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:not(&--center-affix)
+    &--plain-underlined
 
       .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,7 +40,10 @@ export interface VInputSlot {
 export const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
-  centerAffix: Boolean,
+  centerAffix: {
+    type: Boolean,
+    default: true,
+  },
   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,6 +176,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
           style={ props.style }
           { ...rootAttrs }
           { ...inputProps }
+          centerAffix={ !isPlainOrUnderlined.value }
           focused={ isFocused.value }
         >
           {{
@@ -201,7 +202,6 @@ 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, omit, propsFactory, useRender } from '@/util'
+import { callEvent, clamp, convertToUnit, filterInputAttrs, genericComponent, 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>>,
 
-  ...omit(makeVInputProps(), ['centerAffix']),
-  ...omit(makeVFieldProps(), ['centerAffix']),
+  ...makeVInputProps(),
+  ...makeVFieldProps(),
 }, 'VTextarea')
 
 type VTextareaSlots = Omit<VInputSlots & VFieldSlots, 'default'> & {
@@ -228,7 +228,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
           style={ props.style }
           { ...rootAttrs }
           { ...inputProps }
-          centerAffix={ false }
+          centerAffix={ rows.value === 1 && !isPlainOrUnderlined.value }
           focused={ isFocused.value }
         >
           {{
@@ -253,7 +253,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
-                centerAffix={ false }
+                centerAffix={ rows.value === 1 && !isPlainOrUnderlined.value }
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }

diff --git a/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx b/packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
@@ -293,8 +293,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             props.class,
           ]}
           { ...textFieldProps }
-          centerAffix
-          singleLine={ false }
           style={ props.style }
           inputmode="decimal"
         >