feat(VField): create new component

[KaelWD]

Probably just review the relevant commits: aa9de0b (#14064)

• VInput is now pretty much what it was in v2
• VField is the base for VTextField, and implements VInput
• VField does share some variables with VInput, so everything will remain aligned if you change input density for example
• VInput has prepend and append
• VField has prependInner and appendInner

Markup:

<template>
  <v-app>
    <div class="ma-12 pa-12">
      <v-field prepend-inner-icon="mdi-vuetify" append-inner-icon="mdi-close">
        Fizzbuzz

        <template #details>
          Foobar
        </template>
      </v-field>

      <div class="my-7" />

      <v-field prepend-inner-icon="mdi-vuetify" append-inner-icon="mdi-vuetify">
        <v-sheet height="40" width="100%" color="blue" />

        <template #details>
          Details
        </template>
      </v-field>

      <div class="my-16" />

      <v-field
        color="primary"
        variant="underlined"
        prepend-inner-icon="mdi-vuetify"
        append-inner-icon="mdi-close"
        label="First name"
        prepend-icon="mdi-vuetify"
        append-icon="mdi-close-circle"
      >
        <template #default="{ props }">
          <input type="text" v-bind="props">
        </template>

        <template #details>
          Foobar
        </template>
      </v-field>

      <v-field
        color="primary"
        variant="underlined"
        label="First name"
        prepend-icon="mdi-vuetify"
        append-icon="mdi-close-circle"
      >
        <template #default="{ props }">
          <input type="text" v-bind="props">
        </template>

        <template #details>
          Foobar
        </template>
      </v-field>

      <v-field
        color="primary"
        prepend-inner-icon="mdi-vuetify"
        append-inner-icon="mdi-close"
        label="First name"
        prepend-icon="mdi-vuetify"
        append-icon="mdi-close-circle"
      >
        <template #default="{ props }">
          <input type="text" v-bind="props">
        </template>

        <template #details>
          Foobar
        </template>
      </v-field>

      <v-container>
        <v-row>
          <v-col>
            <v-field
              color="primary"
              label="First name"
            >
              <template #default="{ props }">
                <input type="text" v-bind="props">
              </template>
            </v-field>
          </v-col>

          <v-col>
            <v-file-input
              color="primary"
              label="File"
            />
          </v-col>
        </v-row>
      </v-container>

      <div class="pa-10">
        <h3>Variants</h3>
        <template v-for="variant in ['underlined', 'outlined', 'filled', 'contained', 'plain']" :key="variant">
          <v-file-input :label="variant" :variant="variant" class="ma-5" />
        </template>

        <h3>Multiple</h3>
        <v-file-input label="bar" multiple class="ma-5" />

        <h3>Multiple Counter</h3>
        <v-file-input label="bar" multiple counter class="ma-5" />

        <h3>Multiple Counter ShowSize</h3>
        <v-file-input label="bar" multiple counter show-size class="ma-5" />

        <h3>Not Clearable</h3>
        <v-file-input label="bar" :clearable="false" class="ma-5" />

        <h3>No prepend icon</h3>
        <v-file-input label="bar" :prepend-outer-icon="null" class="ma-5" />

        <h3>Programmatic</h3>
        <v-file-input v-model="file" label="bar" class="ma-5" />
        {{ file }}
        <v-btn @click="set">set</v-btn>
        <v-btn @click="clear">clear</v-btn>
      </div>

    </div>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data: () => ({
      model: 1,
      disabled: false,
      file: null,
      toSet: null,
    }),
    watch: {
      file (value) {
        value && value.length && (this.toSet = value)
      },
    },
    methods: {
      set () {
        this.file = this.toSet
      },
      clear () {
        this.file = []
      },
    },
  }
</script>

[KaelWD]

Turns out we had a 2px gap at the top, this is now aligned with file inputs