feat(Breadcrumb): handle labelClass and merge iconClass

docs/content/5.navigation/5.breadcrumb.md

@@ -8,8 +8,9 @@ description: A list of links that indicate the current page's location within a
 Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
 
 - `label` - The label of the link.
+- `labelClass` - The class of the link label. :u-badge{label="New" class="!rounded-full" variant="subtle"}
 - `icon` - The icon of the link.
-- `iconClass` - The class of the icon link.
+- `iconClass` - The class of the link icon.
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 

src/runtime/components/navigation/Breadcrumb.vue

@@ -5,19 +5,19 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+              :class="twMerge(twJoin(ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : ''), link.iconClass)"
             />
           </slot>
 
           <slot :link="link" :index="index" :is-active="index === links.length - 1">
-            {{ link.label }}
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
           </slot>
         </ULink>
 
@@ -35,6 +35,7 @@
 <script lang="ts">
 import { defineComponent, toRef } from 'vue'
 import type { PropType } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
@@ -77,7 +78,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      twMerge,
+      twJoin
     }
   }
 })

src/runtime/types/breadcrumb.d.ts

@@ -2,6 +2,7 @@ import type { Link } from './link'
 
 export interface BreadcrumbLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`

src/runtime/ui.config/navigation/breadcrumb.ts

@@ -3,6 +3,7 @@ export default {
   ol: 'flex items-center gap-x-1.5',
   li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm',
   base: 'flex items-center gap-x-1.5 group font-semibold',
+  label: '',
   icon: {
     base: 'flex-shrink-0 w-4 h-4',
     active: '',