fix(VField/VInput): centerAffix doesn't work for underlined/plain

[yuwu9145]

Automatically apply singleLine under the hood, and vertically align appendInner, prependInner, clearIcon, label and input field in the center.

Description

Markup:

<template>
  <v-container class="pa-md-12 bg-grey">
    <v-row>
      <v-col cols="4">
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="solo"
          label="solo"
          variant="solo"
          center-affix
        />
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="outlined"
          label="outlined"
          variant="outlined"
          center-affix
        />
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="filled"
          label="filled"
          variant="filled"
          center-affix
        />
        <v-text-field
          bg-color="white"
          clearable
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="underlined"
          label="underlined"
          variant="underlined"
          center-affix
        />
      </v-col>
      <v-col cols="4">
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="solo"
          label="solo"
          variant="solo"
        />
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="outlined"
          label="outlined"
          variant="outlined"
        />
        <v-text-field
          bg-color="white"
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="filled"
          label="filled"
          variant="filled"
        />
        <v-text-field
          bg-color="white"
          clearable
          prepend-icon="$vuetify"
          prepend-inner-icon="$vuetify"
          placeholder="underlined"
          label="underlined"
          variant="underlined"
        />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'
</script>

[johnleider]

Is there a collection of props that would move the label to the middle as well?

[yuwu9145]

@johnleider See if you were satisfied with the API description/usage change, I will handle the technical part and make sure no regression

[johnleider]

Looks good. Not related to anything you've done, but the prepend-inner icon is really tight on the edge of the input. Is that by design or not intentional?

[yuwu9145]

I think underlined variant is supposed to extend the content to edges, we have a little gap before prepend-inner, which is ok I guess.

Use slot to add a manual gap

<v-text-field
          bg-color="white"
          clearable
          prepend-icon="$vuetify"
          placeholder="underlined"
          label="underlined"
          variant="underlined"
          center-affix
        >
          <template #prepend-inner>
            <v-icon class="ml-3" icon="$vuetify" />
          </template>
        </v-text-field>

[johnleider]

If default is false, can just do centerAffix: Boolean which defaults to false.

[johnleider]

If default is false, can just do centerAffix: Boolean which defaults to false.