feat(VAlert): port to v3

[johnleider]

Description

Ported component and added new styles from variants and density.

• Added a default background for an untyped alert
• Changed dismissible to closable
• Text prop now applies to textual content, replaced by variant=contained-text

Motivation and Context

I'm motivated to finish Phase 2

How Has This Been Tested?

Markup:

<template>
  <v-app>
    <div class="ma-2 pa-2">
      <v-alert :text="text" tip type="info" />

      <div class="my-6" />

      <v-alert
        v-for="density in ['default', 'comfortable', 'compact']"
        :key="density"
        text="Lorem ipsum dolor sit amet consectetur adipisicing elit"
        :closable="closable"
        :density="density"
        class="mb-4"
        prominent
        type="error"
        variant="contained"
      />

      <v-alert
        v-for="density in ['default', 'comfortable', 'compact']"
        :key="density"
        text="Lorem ipsum dolor sit amet consectetur adipisicing elit"
        :closable="closable"
        :density="density"
        class="mb-4"
        type="error"
        variant="plain"
      />
      <div class="my-12" />
      <v-alert icon="mdi-check-circle" :text="text" :closable="closable" />
      <div class="my-12" />
      <v-alert icon="mdi-check-circle" prominent :text="text" :closable="closable" />
      <div class="my-12" />
      <v-alert prominent icon="mdi-check-circle" text="Lorem ipsum dolor sit amet consectetur adipisicing elit" :closable="closable" />
      <v-alert type="info" :text="text" />
      <v-alert type="warning" :text="text" />
      <v-alert type="error" :text="text" />

      <div class="my-6" />

      <v-alert type="success" :text="text" prominent elevation="24" />

      <div class="my-6" />

      <v-alert
        :text="text"
        border="start"
        type="success"
        class="border-opacity"
        rounded="0"
      />

      <v-alert
        :text="text"
        border="start"
        type="success"
        rounded="0"
      />

      <div class="my-6" />

      <v-alert type="success" :text="text" prominent density="compact" />

      <div class="my-6" />
    </div>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      closable: true,
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ducimus consequatur laboriosam quasi fuga quod. Veritatis ab molestias ipsam perspiciatis! Dolores a corrupti voluptates ut non velit cumque quasi inventore.',
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Requesting Initial comments from @vuetifyjs/core-team

[johnleider]

Requesting Final comments from @vuetifyjs/core-team