diff --git a/packages/api-generator/src/locale/en/VField.json b/packages/api-generator/src/locale/en/VField.json index 2ce083c09fc..82bc8788628 100644 --- 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 index 47f3a7804c3..d6f181d023a 100644 --- 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 index 051542e5bdb..6a698fabcf4 100644 --- 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 index b3d658c127a..037cf02a23a 100644 --- 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( 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( { '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( '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 index 11ded05238b..2441ec1dde6 100644 --- 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 index 4234aeb0aad..f12b059b9d7 100644 --- 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, hideSpinButtons: Boolean, diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx index c2f09caf664..3e835143866 100644 --- a/packages/vuetify/src/components/VTextField/VTextField.tsx +++ b/packages/vuetify/src/components/VTextField/VTextField.tsx @@ -176,7 +176,6 @@ export const VTextField = genericComponent()({ style={ props.style } { ...rootAttrs } { ...inputProps } - centerAffix={ !isPlainOrUnderlined.value } focused={ isFocused.value } > {{ @@ -202,6 +201,7 @@ export const VTextField = genericComponent()({ 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 index 3d8a93007a1..e675b3c0c1f 100644 --- 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>, - ...makeVInputProps(), - ...makeVFieldProps(), + ...omit(makeVInputProps(), ['centerAffix']), + ...omit(makeVFieldProps(), ['centerAffix']), }, 'VTextarea') type VTextareaSlots = Omit & { @@ -228,7 +228,7 @@ export const VTextarea = genericComponent()({ style={ props.style } { ...rootAttrs } { ...inputProps } - centerAffix={ rows.value === 1 && !isPlainOrUnderlined.value } + centerAffix={ false } focused={ isFocused.value } > {{ @@ -253,7 +253,7 @@ export const VTextarea = genericComponent()({ { ...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 }