feat(VBadge): add size width and height props to VBadge (#28037)

[jcjp]

Description

• Resolves: [Feature Request] Dynamically set size of badge #20837
• Adds new props width and height using our DimensionProps

Markup:

<template>
  <v-container>
    <v-badge width="28px" height="30px" content="1" />
  </v-container>
</template>

[J-Sek]

Is it OK that these are not reactive? Ofc, we could patch it later after learning about some real-life use cases proving it matters.

Playground

<template>
  <v-container max-width="400">
    <v-slider
      v-model="height"
      label="height"
      max="100"
      min="0"
      step="1"
    />
    <v-slider
      v-model="width"
      label="width"
      max="100"
      min="0"
      step="1"
    />
  </v-container>
  <v-container max-width="400">
    <v-badge :key="height + width" :height="height" :width="width" content="123" />
  </v-container>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const height = ref<number | null>(null)
  const width = ref<number | null>(null)
</script>

[jcjp]

Is it OK that these are not reactive? Ofc, we could patch it later after learning about some real-life use cases proving it matters.

Do you mean to say that the width and height are not reactive?

Updated to simplify the solution thanks J-Sek!

[J-Sek]

Do you mean to say that the width and height are not reactive?

The changes did not seem to be reflected unless I had :key= to reset the badge. I was using the playground from my previous comment.

Your last commit fixed it by passing props straight to the composable without extracting width and height. :)