feat(Badge): add square prop

Author: zAlweNy26

docs/content/3.components/badge.md

@@ -69,6 +69,21 @@ slots:
 ---
 ::
 
+### Square
+
+Use the `square` prop to make the Badge squared.
+
+::component-code
+---
+props:
+  icon: i-lucide-rocket
+  square: true
+  size: md
+  color: primary
+  variant: solid
+---
+::
+
 ### Icon
 
 Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.

playground/app/pages/components/badge.vue

@@ -42,6 +42,23 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
     </div>
+    <div class="flex items-center gap-2">
+      <UBadge
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-rocket"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-2 ms-[-86px]">
+      <UBadge
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-rocket"
+        label="Badge"
+        :size="size"
+      />
+    </div>
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
     </div>

src/runtime/components/Badge.vue

@@ -26,6 +26,8 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
    * @defaultValue 'md'
    */
   size?: Badge['variants']['size']
+  /** Render the badge with equal padding on all sides. */
+  square?: boolean
   class?: any
   ui?: Badge['slots']
 }
@@ -50,7 +52,7 @@ import UAvatar from './Avatar.vue'
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
-defineSlots<BadgeSlots>()
+const slots = defineSlots<BadgeSlots>()
 
 const appConfig = useAppConfig() as Badge['AppConfig']
 const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
@@ -60,6 +62,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
   color: props.color,
   variant: props.variant,
   size: buttonGroupSize.value || props.size,
+  square: props.square || (!slots.default && !props.label),
   buttonGroup: orientation.value
 }))
 </script>

src/theme/badge.ts

@@ -53,6 +53,9 @@ export default (options: Required<ModuleOptions>) => ({
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-6'
       }
+    },
+    square: {
+      true: ''
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -87,6 +90,26 @@ export default (options: Required<ModuleOptions>) => ({
     color: 'neutral',
     variant: 'subtle',
     class: 'ring ring-inset ring-accented text-default bg-elevated'
+  }, {
+    size: 'xs',
+    square: true,
+    class: 'p-1'
+  }, {
+    size: 'sm',
+    square: true,
+    class: 'p-1.5'
+  }, {
+    size: 'md',
+    square: true,
+    class: 'p-2'
+  }, {
+    size: 'lg',
+    square: true,
+    class: 'p-2'
+  }, {
+    size: 'xl',
+    square: true,
+    class: 'p-2.5'
   }],
   defaultVariants: {
     color: 'primary',

test/components/Badge.spec.ts

@@ -21,6 +21,7 @@ describe('Badge', () => {
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
     ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with square', { props: { icon: 'i-lucide-rocket', square: true } }],
     ['with as', { props: { label: 'Badge', as: 'div' } }],
     ['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
     ['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }],

test/components/__snapshots__/Badge-vue.spec.ts.snap

@@ -1,92 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
+"<div class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted">
   <!--v-if--><span class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span class="inline-flex items-center text-xs px-2 py-1.5 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
-exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5">Leading slot<!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-sm px-2.5 py-2 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -96,7 +96,7 @@ exports[`Badge > renders with size sm correctly 1`] = `
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-base px-3 py-2.5 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -105,13 +105,15 @@ exports[`Badge > renders with size xs correctly 1`] = `
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with square correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;