feat(VerticalNavigation): handle labelClass and merge iconClass

docs/content/5.navigation/1.vertical-navigation.md

@@ -12,8 +12,9 @@ links:
 Pass an array to the `links` prop of the VerticalNavigation 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.
 - `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
 - `badge` - A badge to display next to the label.
 - `click` - The click handler of the link.

src/runtime/components/navigation/VerticalNavigation.vue

@@ -4,7 +4,7 @@
       v-for="(link, index) of links"
       v-slot="{ isActive }"
       :key="index"
-      v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
+      v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
       :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
       :active-class="ui.active"
       :inactive-class="ui.inactive"
@@ -22,11 +22,11 @@
         <UIcon
           v-if="link.icon"
           :name="link.icon"
-          :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
+          :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
         />
       </slot>
       <slot :link="link" :is-active="isActive">
-        <span v-if="link.label" :class="ui.label">{{ link.label }}</span>
+        <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
       </slot>
       <slot name="badge" :link="link" :is-active="isActive">
         <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
@@ -40,6 +40,7 @@
 <script lang="ts">
 import { toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import ULink from '../elements/Link.vue'
@@ -80,7 +81,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      twMerge,
+      twJoin
     }
   }
 })

src/runtime/types/vertical-navigation.d.ts

@@ -3,6 +3,7 @@ import type { Avatar } from './avatar'
 
 export interface VerticalNavigationLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar