feat(Badge): handle icon and avatar props (#2497)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Badge.vue

@@ -3,6 +3,8 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/badge'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
 
@@ -10,7 +12,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps {
+export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -21,26 +23,51 @@ export interface BadgeProps {
   variant?: BadgeVariants['variant']
   size?: BadgeVariants['size']
   class?: any
+  ui?: Partial<typeof badge.slots>
 }
 
 export interface BadgeSlots {
+  leading(props?: {}): any
   default(props?: {}): any
+  trailing(props?: {}): any
 }
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'radix-vue'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
 defineSlots<BadgeSlots>()
+
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const ui = computed(() => badge({
+  color: props.color,
+  variant: props.variant,
+  size: props.size
+}))
 </script>
 
 <template>
-  <Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
+  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
+    <slot name="leading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+      <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+    </slot>
+
     <slot>
-      {{ label }}
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
     </slot>
   </Primitive>
 </template>

src/theme/badge.ts

@@ -1,7 +1,14 @@
 import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => ({
-  base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
+  slots: {
+    base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
+    label: 'truncate',
+    leadingIcon: 'shrink-0',
+    leadingAvatar: 'shrink-0',
+    leadingAvatarSize: '',
+    trailingIcon: 'shrink-0'
+  },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
@@ -14,9 +21,24 @@ export default (options: Required<ModuleOptions>) => ({
       subtle: ''
     },
     size: {
-      sm: 'text-xs px-1.5 py-0.5',
-      md: 'text-xs px-2 py-1',
-      lg: 'text-sm px-2 py-1'
+      sm: {
+        base: 'text-xs px-1.5 py-0.5 gap-1',
+        leadingIcon: 'size-4',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-4'
+      },
+      md: {
+        base: 'text-xs px-2 py-1 gap-1',
+        leadingIcon: 'size-4',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-4'
+      },
+      lg: {
+        base: 'text-sm px-2 py-1 gap-1.5',
+        leadingIcon: 'size-5',
+        leadingAvatarSize: '2xs',
+        trailingIcon: 'size-5'
+      }
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({