feat: support any value

Author: trueberryless

docs/app/components/BadgeGeneratorParameters.vue

@@ -9,6 +9,7 @@ const { copy, copied } = useClipboard({ copiedDuring: 2000 })
 
 const labelColor = useState('badge-label-color', () => '')
 const labelText = useState('badge-label-text', () => '')
+const badgeValue = useState('badge-value', () => '')
 const badgeColor = useState('badge-color', () => '')
 const usePkgName = useState('badge-use-name', () => false)
 const badgeStyle = useState('badge-style', () => 'default')
@@ -60,6 +61,7 @@ const queryParams = computed(() => {
   if (labelColor.value) params.append('labelColor', cleanHex(labelColor.value))
   if (badgeColor.value) params.append('color', cleanHex(badgeColor.value))
   if (badgeStyle.value !== 'default') params.append('style', badgeStyle.value)
+  if (badgeValue.value) params.append('value', badgeValue.value)
 
   if (usePkgName.value) {
     params.append('name', 'true')
@@ -169,21 +171,46 @@ const copyToClipboard = async () => {
 
     <div class="h-px bg-gray-200 dark:bg-white/5 w-full" />
 
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
-      <div class="flex flex-col gap-1.5">
-        <div class="flex items-center justify-between min-h-3.75">
-          <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Text</label>
-          <span v-if="usePkgName" class="text-[9px] text-emerald-500 font-medium transition-opacity"
-            >Auto-Name Enabled</span
-          >
+    <div class="grid grid-cols-1 sm:grid-cols-4 gap-6">
+        <div class="flex flex-col gap-1.5">
+            <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Text</label>
+            <div class="relative group">
+            <input
+                v-model="labelText"
+                :disabled="usePkgName"
+                type="text"
+                placeholder="Custom Label"
+                class="w-full px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 disabled:cursor-not-allowed transition-all"
+                :class="{ 'opacity-50 grayscale pl-3': usePkgName }"
+            />
+
+            <transition
+                enter-active-class="transition duration-200 ease-out"
+                enter-from-class="opacity-0 scale-95"
+                enter-to-class="opacity-100 scale-100"
+                leave-active-class="transition duration-150 ease-in"
+                leave-from-class="opacity-100 scale-100"
+                leave-to-class="opacity-0 scale-95"
+            >
+                <div
+                v-if="usePkgName"
+                class="absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none"
+                >
+                <span class="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-emerald-500/10 dark:bg-emerald-500/20 text-emerald-500 text-[9px] font-bold uppercase tracking-tighter border border-emerald-500/20">
+                    Auto
+                </span>
+                </div>
+            </transition>
+            </div>
         </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Badge Value</label>
         <input
-          v-model="labelText"
-          :disabled="usePkgName"
-          type="text"
-          placeholder="Custom Label"
-          class="px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 disabled:cursor-not-allowed transition-all"
-          :class="{ 'opacity-30 grayscale': usePkgName }"
+        v-model="badgeValue"
+        type="text"
+        placeholder="Override Value"
+        class="px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 transition-all"
         />
       </div>
 

docs/content/2.guide/6.badges.md

@@ -69,20 +69,27 @@ Use this generator to get the Markdown code you desire:
 
 :badge-generator-parameters
 
-### `labelColor`
+### `label`
 
-Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
+Overrides the default label text. You can pass any string to customize the label displayed on the left half of the badge.
 
-- **Default**: `#0a0a0a`
-- **Usage**: `?labelColor=HEX_CODE`
+- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
+- **Usage**: `?label=YOUR_LABEL`
 
-### `label`
+### `value`
 
-Overrides the default label text. You can pass any string to customize the label displayed on the badge.
+Overrides the default value text of the badge. You can pass any string to customize the value displayed on the right half of the badge.
 
-- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
+- **Default**: Calculated values depending on the badge type (e.g., "v4.2.0", "5.4M").
 - **Usage**: `?label=YOUR_LABEL`
 
+### `labelColor`
+
+Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
+
+- **Default**: `#0a0a0a`
+- **Usage**: `?labelColor=HEX_CODE`
+
 ### `color`
 
 Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.

server/api/registry/badge/[type]/[...pkg].get.ts

@@ -23,6 +23,7 @@ const SafeColorSchema = v.pipe(
 const QUERY_SCHEMA = v.object({
   name: v.optional(v.string()),
   label: v.optional(SafeStringSchema),
+  value: v.optional(SafeStringSchema),
   color: v.optional(SafeColorSchema),
   labelColor: v.optional(SafeColorSchema),
 })
@@ -452,6 +453,7 @@ export default defineCachedEventHandler(
       const labelColor = queryParams.success ? queryParams.output.labelColor : undefined
       const showName = queryParams.success && queryParams.output.name === 'true'
       const userLabel = queryParams.success ? queryParams.output.label : undefined
+      const userValue = queryParams.success ? queryParams.output.value : undefined
       const badgeStyleResult = v.safeParse(BadgeStyleSchema, query.style)
       const badgeStyle = badgeStyleResult.success ? badgeStyleResult.output : 'default'
 
@@ -465,7 +467,7 @@ export default defineCachedEventHandler(
       const strategyResult = await strategy(pkgData, requestedVersion)
 
       const finalLabel = userLabel ? userLabel : showName ? packageName : strategyResult.label
-      const finalValue = strategyResult.value
+      const finalValue = userValue ? userValue : strategyResult.value
 
       const rawColor = userColor ?? strategyResult.color
       const finalColor = rawColor?.startsWith('#') ? rawColor : `#${rawColor}`