Skip to content

Commit

Permalink
Revert "fix(VField/VInput): centerAffix prop for underlined/plain (#2…
Browse files Browse the repository at this point in the history
  • Loading branch information
yuwu9145 authored Jul 16, 2024
1 parent b1f74e1 commit 098f802
Show file tree
Hide file tree
Showing 9 changed files with 23 additions and 27 deletions.
2 changes: 1 addition & 1 deletion packages/api-generator/src/locale/en/VField.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
2 changes: 1 addition & 1 deletion packages/api-generator/src/locale/en/VInput.json
Original file line number Diff line number Diff line change
@@ -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`.",
Expand Down
8 changes: 2 additions & 6 deletions packages/vuetify/src/components/VField/VField.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down Expand Up @@ -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
Expand Down
17 changes: 8 additions & 9 deletions packages/vuetify/src/components/VField/VField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand Down Expand Up @@ -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}`)
Expand Down Expand Up @@ -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,
Expand All @@ -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,
},
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VInput/VInput.sass
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
input[type=number]
-moz-appearance: textfield

&--plain-underlined:not(&--center-affix)
&--plain-underlined

.v-input__prepend,
.v-input__append
Expand Down
5 changes: 4 additions & 1 deletion packages/vuetify/src/components/VInput/VInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VTextField/VTextField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
style={ props.style }
{ ...rootAttrs }
{ ...inputProps }
centerAffix={ !isPlainOrUnderlined.value }
focused={ isFocused.value }
>
{{
Expand All @@ -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 }
>
{{
Expand Down
10 changes: 5 additions & 5 deletions packages/vuetify/src/components/VTextarea/VTextarea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'> & {
Expand Down Expand Up @@ -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 }
>
{{
Expand All @@ -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 }
Expand Down
2 changes: 0 additions & 2 deletions packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -293,8 +293,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
props.class,
]}
{ ...textFieldProps }
centerAffix
singleLine={ false }
style={ props.style }
inputmode="decimal"
>
Expand Down

0 comments on commit 098f802

Please sign in to comment.