From 23833e92cb14d4aa2fade6ffbc3e0ad6de5337f7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 1 Jun 2023 16:06:07 +0200
Subject: [PATCH] chore(Badge): handle `color` override like buttons

---
 src/runtime/app.config.ts                 |  1 +
 src/runtime/components/elements/Badge.vue | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 9d3c1b99..3dd0bacd 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -109,6 +109,7 @@ const badge = {
     md: 'text-sm px-2 py-1',
     lg: 'text-sm px-2.5 py-1.5'
   },
+  color: {},
   variant: {
     solid: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-10 dark:ring-opacity-20'
   },
diff --git a/src/runtime/components/elements/Badge.vue b/src/runtime/components/elements/Badge.vue
index d447e022..16ee68fc 100644
--- a/src/runtime/components/elements/Badge.vue
+++ b/src/runtime/components/elements/Badge.vue
@@ -29,14 +29,18 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.badge.default.color,
       validator (value: string) {
-        return appConfig.ui.colors.includes(value)
+        console.log('Object.keys(appConfig.ui.badge.color)', Object.keys(appConfig.ui.badge.color))
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value)
       }
     },
     variant: {
       type: String,
       default: () => appConfig.ui.badge.default.variant,
       validator (value: string) {
-        return Object.keys(appConfig.ui.badge.variant).includes(value)
+        return [
+          ...Object.keys(appConfig.ui.badge.variant),
+          ...Object.values(appConfig.ui.badge.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     label: {
@@ -55,12 +59,14 @@ export default defineComponent({
     const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defu({}, props.ui, appConfig.ui.badge))
 
     const badgeClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
       return classNames(
         ui.value.base,
         ui.value.font,
         ui.value.rounded,
         ui.value.size[props.size],
-        ui.value.variant[props.variant]?.replaceAll('{color}', props.color)
+        variant?.replaceAll('{color}', props.color)
       )
     })