From a79f7c0a34c0414fe4feb95691e1f044b07ef087 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 12 Dec 2023 19:11:12 +0100
Subject: [PATCH] feat(VerticalNavigation): handle `labelClass` and merge
 `iconClass`

---
 docs/content/5.navigation/1.vertical-navigation.md    |  3 ++-
 .../components/navigation/VerticalNavigation.vue      | 11 +++++++----
 src/runtime/types/vertical-navigation.d.ts            |  1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/content/5.navigation/1.vertical-navigation.md b/docs/content/5.navigation/1.vertical-navigation.md
index 6fa52a1433..c487e38764 100644
--- a/docs/content/5.navigation/1.vertical-navigation.md
+++ b/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.
diff --git a/src/runtime/components/navigation/VerticalNavigation.vue b/src/runtime/components/navigation/VerticalNavigation.vue
index 48f3bbe8f3..c0f58b9033 100644
--- a/src/runtime/components/navigation/VerticalNavigation.vue
+++ b/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
     }
   }
 })
diff --git a/src/runtime/types/vertical-navigation.d.ts b/src/runtime/types/vertical-navigation.d.ts
index df6e660664..e358908f8a 100644
--- a/src/runtime/types/vertical-navigation.d.ts
+++ b/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