feat(VAvatar): add badge prop + dot-size for VBadge

[J-Sek]

Description

badge prop aims to make it significantly easier to add color dots to the avatar

• defaults to color dot when used as string
• calculates dot size based on avatar size
• calculates offset to adjust the badge placement (expecting floating when avatar is not a circle)

Markup:

<template>
  <v-app theme="dark">
    <v-container class="pa-6 pa-md-12 bg-surface">
      <v-row align="end" class="ga-6 ga-md-16" justify="center">
        <v-avatar :image="users[0].avatarUrl" badge="red" size="x-small" />
        <v-avatar :image="users[1].avatarUrl" badge="red" size="small" />
        <v-avatar :image="users[2].avatarUrl" badge="red" size="default" />
        <v-avatar :image="users[3].avatarUrl" badge="red" size="large" />
        <v-avatar :image="users[4].avatarUrl" badge="red" size="x-large" />
      </v-row>

      <v-row align="end" class="ga-6 ga-md-16 mt-12" justify="center">
        <v-avatar
          :badge="{ color: 'red', location: 'bottom end', floating: true }"
          :image="users[0].avatarUrl"
          rounded="lg"
          size="x-small"
        />
        <v-avatar
          :badge="{ color: 'red', location: 'bottom end', floating: true }"
          :image="users[1].avatarUrl"
          rounded="lg"
          size="small"
        />
        <v-avatar
          :badge="{ color: 'red', location: 'bottom end', floating: true }"
          :image="users[2].avatarUrl"
          rounded="lg"
          size="default"
        />
        <v-avatar
          :badge="{ color: 'red', location: 'bottom end', floating: true }"
          :image="users[3].avatarUrl"
          rounded="lg"
          size="large"
        />
        <v-avatar
          :badge="{ color: 'red', location: 'bottom end', floating: true }"
          :image="users[4].avatarUrl"
          rounded="lg"
          size="x-large"
        />
      </v-row>

      <v-row align="end" class="ga-6 ga-md-16 mt-12" justify="center">
        <v-avatar
          :badge="{ color: 'success', location: 'bottom end', floating: true }"
          :image="users[0].avatarUrl"
          rounded="lg"
          size="x-small"
        >
          <template #badge>
            <v-icon icon="$complete" />
          </template>
        </v-avatar>
        <v-avatar
          :badge="{ color: 'success', location: 'bottom end', floating: true }"
          :image="users[1].avatarUrl"
          rounded="lg"
          size="small"
        >
          <template #badge>
            <v-icon icon="$complete" />
          </template>
        </v-avatar>
        <v-avatar
          :badge="{ color: 'success', location: 'bottom end', floating: true }"
          :image="users[2].avatarUrl"
          rounded="lg"
          size="default"
        >
          <template #badge>
            <v-icon icon="$complete" />
          </template>
        </v-avatar>
        <v-avatar
          :badge="{ color: 'success', location: 'bottom end', floating: true }"
          :image="users[3].avatarUrl"
          rounded="lg"
          size="large"
        >
          <template #badge>
            <v-icon icon="$complete" />
          </template>
        </v-avatar>
        <v-avatar
          :badge="{ color: 'success', location: 'bottom end', floating: true }"
          :image="users[4].avatarUrl"
          rounded="lg"
          size="x-large"
        >
          <template #badge>
            <v-icon icon="$complete" />
          </template>
        </v-avatar>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  const users = Array.from({ length: 5 })
    .map((_, i) => ({ id: i, avatarUrl: `https://vuetifyjs.b-cdn.net/docs/images/one/snips/avatars/${2 + i}.jpg` }))
</script>