feat(VBadge): port to v3

[nekosaur]

Description

Updated v-badge for v3

Breaking changes

• Changed overlap default value to true. In my opinion this looks better for most use cases.
• Removed overlap prop and made default. For existing style, use the floating prop
• Removed avatar prop
• Removed theme props
• Removed left prop, use location instead
• Removed bottom prop, use location instead
• Removed mode prop, use transition instead
• Removed origin prop, use transition instead
• offset-x and offset-y now offset the original positioning as their name implies instead of absolutely positioning the badge
• tile is removed (removal inherited from border-radius composable)
• value is now model-value

Motivation and Context

How Has This Been Tested?

Markup:

<template>
  <v-app class="fill-height">
    <v-container style="height: 100%" class="d-flex align-center">
      <v-row
        align="center"
      >
        <v-col cols="12" class="d-flex justify-space-around">
          <v-badge
            location="top-left"
            content="4"
          >
            <v-btn color="secondary">top left</v-btn>
          </v-badge>

          <v-badge
            location="top-right"
            content="4"
          >
            <v-btn color="secondary">top right</v-btn>
          </v-badge>

          <v-badge
            location="bottom-right"
            content="4"
          >
            <v-btn color="secondary">bottom right</v-btn>
          </v-badge>

          <v-badge
            location="bottom-left"
            content="4"
          >
            <v-btn color="secondary">bottom left</v-btn>
          </v-badge>
        </v-col>

        <v-col cols="12" class="d-flex justify-space-around">
          <v-badge
            bordered
            color="secondary"
            location="bottom-left"
          >
            <template #badge>
              <v-icon icon="mdi-home" />
            </template>
            <v-btn
              color="error"
              elevation="0"
            >
              Lock Account
            </v-btn>
          </v-badge>

          <v-badge
            bordered
            dot
            color="success"
            location="bottom-right"
            offset-x="4"
            offset-y="2"
          >
            <v-avatar>
              <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" />
            </v-avatar>
          </v-badge>

          <v-badge
            bordered
          >
            <template #badge>
              <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png" />
            </template>

            <v-avatar>
              <v-img src="https://cdn.vuetifyjs.com/images/john.png" />
            </v-avatar>
          </v-badge>

          <v-badge
            bordered
          >
            <template #badge>
              <img src="https://cdn.vuetifyjs.com/images/logos/v.png">
            </template>

            <v-avatar>
              <v-img src="https://cdn.vuetifyjs.com/images/john.png" />
            </v-avatar>
          </v-badge>

          <v-badge
            content="2"
            color="secondary"
            :rounded="zxc ? 0 : undefined"
            :model-value="show"
            :aria-label="zxc ? 'foo' : 'bar'"
          >
            <v-btn @click="show = !show">hello</v-btn>
          </v-badge>

          <v-btn @click="zxc = !zxc">toggle</v-btn>
        </v-col>
        <v-col cols="12" class="d-flex justify-space-around">
          <v-badge
            :model-value="hover"
            content="9999+"
            location="bottom right"
            transition="scale-transition"
            floating
          >
            <!-- <v-hover v-model="hover"> -->
            <v-icon
              color="#888888"
              size="x-large"
              @mouseenter="hover = true"
              @mouseleave="hover = false"
            >
              mdi-account
            </v-icon>
            <!-- </v-hover> -->
          </v-badge>

          <v-badge content="9" icon="mdi-close">
            <v-btn icon>
              <v-icon icon="mdi-home" />
            </v-btn>
          </v-badge>

          <div>
            This is an inline badge (maybe should be vertical-align: text-top?)
            <v-badge content="3" inline />
          </div>

          <v-badge content="99" floating>
            This is just some regular old text
          </v-badge>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const show = ref(true)
      const zxc = ref(true)
      const hover = ref(false)

      return { show, zxc, hover }
    },
  }
</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]

scss/sass imports should match v-banner, v-btn, etc

[johnleider]

Requesting Initial comments from @vuetifyjs/contributors @vuetifyjs/core-team

[johnleider]

Requesting Final comments from @vuetifyjs/core-team

[Mert75]

Looks good to me 👍

[nekosaur]

Haven't actually tried the code yet