From 06f9cb89fff998444dc2183a621c2f60b4c8a3b5 Mon Sep 17 00:00:00 2001
From: Arash Sheyda <sheidaeearash1999@gmail.com>
Date: Sun, 24 Sep 2023 21:12:28 -0600
Subject: [PATCH] feat(ui): NBadge component

---
 .../devtools-ui-kit/src/components/NBadge.vue |  5 +++++
 packages/devtools-ui-kit/src/unocss.ts        |  3 +++
 packages/devtools/client/components/Badge.vue |  5 -----
 .../client/components/ComponentDetails.vue    |  4 ++--
 .../client/components/ComponentItem.vue       |  4 ++--
 .../client/components/ModuleItemInstall.vue   |  4 +---
 .../client/components/NpmVersionCheck.vue     |  8 ++++----
 .../devtools/client/components/PluginItem.vue | 16 ++++++++--------
 .../client/components/RoutesTable.vue         |  8 ++++----
 .../client/components/ServerRouteDetails.vue  | 19 ++++++-------------
 .../client/components/ServerRouteListItem.vue |  4 ++--
 .../components/TimelineDetailsFunction.vue    |  4 +---
 .../components/TimelineDetailsRoute.vue       |  4 +---
 packages/devtools/client/composables/utils.ts | 14 +++++++-------
 packages/devtools/client/pages/index.vue      |  2 +-
 .../client/pages/modules/overview.vue         |  2 +-
 .../devtools/client/pages/modules/pages.vue   |  4 ++--
 17 files changed, 50 insertions(+), 60 deletions(-)
 create mode 100644 packages/devtools-ui-kit/src/components/NBadge.vue
 delete mode 100644 packages/devtools/client/components/Badge.vue

diff --git a/packages/devtools-ui-kit/src/components/NBadge.vue b/packages/devtools-ui-kit/src/components/NBadge.vue
new file mode 100644
index 0000000000..fb3606843e
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NBadge.vue
@@ -0,0 +1,5 @@
+<template>
+  <span class="n-badge">
+    <slot />
+  </span>
+</template>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 96ee98be39..341023c206 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -146,6 +146,9 @@ export function unocssPreset(): Preset {
       // icon-button
       'n-icon-button': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active',
 
+      // badge
+      'n-badge': 'bg-context/10 text-context mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs',
+
       // loading
       'n-loading': 'flex h-full w-full justify-center items-center',
       'n-panel-grids': 'n-panel-grids-light dark:n-panel-grids-dark',
diff --git a/packages/devtools/client/components/Badge.vue b/packages/devtools/client/components/Badge.vue
deleted file mode 100644
index dc918bef77..0000000000
--- a/packages/devtools/client/components/Badge.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <span class="mx-0.5 select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs">
-    <slot />
-  </span>
-</template>
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
index 820528643f..61a3d57389 100644
--- a/packages/devtools/client/components/ComponentDetails.vue
+++ b/packages/devtools/client/components/ComponentDetails.vue
@@ -20,9 +20,9 @@ const copy = useCopy()
     <div flex="~ gap2" px3>
       <ComponentName :component="component" />
       <NIconButton title="Copy name" flex-none icon="carbon-copy" @click="copy(`<${name}></${name}>`)" />
-      <Badge
+      <NBadge
         v-if="component.global"
-        bg-green-400:10 text-green-400
+        n="green"
         title="Registered at runtime as a global component"
         v-text="'runtime'"
       />
diff --git a/packages/devtools/client/components/ComponentItem.vue b/packages/devtools/client/components/ComponentItem.vue
index aa32ffc6b2..8d92bcea87 100644
--- a/packages/devtools/client/components/ComponentItem.vue
+++ b/packages/devtools/client/components/ComponentItem.vue
@@ -34,9 +34,9 @@ const filePath = computed(() => props.component.filePath || props.component.file
     <sup v-if="dependents?.length" ml--1 text-primary>
       x{{ dependents?.length }}
     </sup>
-    <Badge
+    <NBadge
       v-if="component.global"
-      bg-green-400:10 text-green-400
+      n="green"
       title="Registered at runtime as a global component"
       v-text="'runtime'"
     />
diff --git a/packages/devtools/client/components/ModuleItemInstall.vue b/packages/devtools/client/components/ModuleItemInstall.vue
index 2360fb4fc8..c1a85b636e 100644
--- a/packages/devtools/client/components/ModuleItemInstall.vue
+++ b/packages/devtools/client/components/ModuleItemInstall.vue
@@ -47,9 +47,7 @@ const anyObj = {} as any
     @click="isInstalled ? null : useModuleAction(item, 'install')"
   >
     <template v-if="isInstalled" #badge>
-      <Badge bg-green-400:10 text-green-400>
-        Installed
-      </Badge>
+      <NBadge n="green" v-text="'Installed'" />
       <NDropdown v-if="isUninstallable" n="sm green">
         <template #trigger="{ click }">
           <NIconButton icon="carbon-overflow-menu-vertical" @click="click()" />
diff --git a/packages/devtools/client/components/NpmVersionCheck.vue b/packages/devtools/client/components/NpmVersionCheck.vue
index 60b2564c29..8e0df9741b 100644
--- a/packages/devtools/client/components/NpmVersionCheck.vue
+++ b/packages/devtools/client/components/NpmVersionCheck.vue
@@ -50,15 +50,15 @@ async function updateWithConfirm() {
     <code v-if="info && showVersion">{{ `v${info.current}` }}</code>
     <template v-if="info?.latest">
       <button v-if="info.needsUpdate" @click="updateWithConfirm()">
-        <Badge
-          bg-green-400:10 text-green-400
+        <NBadge
+          n="green"
           title="updates available"
           v-text="'updates available'"
         />
       </button>
-      <Badge
+      <NBadge
         v-else
-        bg-gray-400:10 text-gray-400
+        n="gray"
         title="latest"
         v-text="'latest'"
       />
diff --git a/packages/devtools/client/components/PluginItem.vue b/packages/devtools/client/components/PluginItem.vue
index c94f1d4ce8..3528ce311f 100644
--- a/packages/devtools/client/components/PluginItem.vue
+++ b/packages/devtools/client/components/PluginItem.vue
@@ -17,24 +17,24 @@ const shortPath = computed(() => parseReadablePath(props.plugin.src, config.valu
     </div>
     <FilepathItem :filepath="props.plugin.src" :subpath="true" />
     <div>
-      <Badge
+      <NBadge
         v-if="shortPath.startsWith('#')"
-        bg-rose-400:10 text-rose
+        n="rose"
         v-text="'virtual'"
       />
-      <Badge
+      <NBadge
         v-else-if="!shortPath.startsWith('.')"
-        bg-gray-400:10 text-gray
+        n="gray"
         v-text="'module'"
       />
-      <Badge
+      <NBadge
         v-if="plugin.mode === 'server'"
-        bg-teal-400:10 text-teal-400
+        n="teal"
         v-text="'server'"
       />
-      <Badge
+      <NBadge
         v-if="plugin.mode === 'client'"
-        bg-orange-400:10 text-orange-400
+        n="orange"
         v-text="'client'"
       />
     </div>
diff --git a/packages/devtools/client/components/RoutesTable.vue b/packages/devtools/client/components/RoutesTable.vue
index c65fba83d4..4d039426cc 100644
--- a/packages/devtools/client/components/RoutesTable.vue
+++ b/packages/devtools/client/components/RoutesTable.vue
@@ -57,15 +57,15 @@ function getMiddlewarePath(name: any) {
         <tr v-for="item of sorted" :key="item.name" class="group" h-7 border="b dashed transparent hover:base">
           <td w-20 pr-1>
             <div flex items-center justify-end>
-              <Badge
+              <NBadge
                 v-if="matched.find(m => m.name === item.name)"
-                bg-green-400:10 text-green-400
+                n="green"
                 title="active"
                 v-text="'active'"
               />
-              <Badge
+              <NBadge
                 v-if="matchedPending.find(m => m.name === item.name)"
-                bg-teal-400:10 text-teal-400
+                n="teal"
                 title="next"
                 v-text="'next'"
               />
diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
index 692d7e0204..27562d57dc 100644
--- a/packages/devtools/client/components/ServerRouteDetails.vue
+++ b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -469,20 +469,13 @@ const copy = useCopy()
     <template v-else>
       <div border="b base" flex="~ gap2" items-center px4 py2>
         <div>Response</div>
-        <Badge
+        <NBadge
           v-if="response.error"
-          bg-red-400:10 text-red-400
+          n="red"
         >
           Error
-        </Badge>
-        <Badge
-          :class="{
-            'bg-orange-400:10 text-orange-400': response.error,
-            'bg-green-400:10 text-green-400': !response.error,
-          }"
-        >
-          {{ response.statusCode }}
-        </Badge>
+        </NBadge>
+        <NBadge :n="response.error ? 'orange' : 'green'" v-text="response.statusCode" />
         <code v-if="response.contentType" text-xs op50>
           {{ response.contentType }}
         </code>
@@ -494,9 +487,9 @@ const copy = useCopy()
         <div op50>
           Request finished in
         </div>
-        <Badge bg-green-400:10 text-green-400>
+        <NBadge n="green">
           {{ response.fetchTime }} ms
-        </Badge>
+        </NBadge>
       </div>
       <div v-if="responseLang === 'pdf'" flex-auto overflow-auto>
         <div border="~ base" h-full w-full rounded>
diff --git a/packages/devtools/client/components/ServerRouteListItem.vue b/packages/devtools/client/components/ServerRouteListItem.vue
index e4f8c32c1c..0ba0de1b76 100644
--- a/packages/devtools/client/components/ServerRouteListItem.vue
+++ b/packages/devtools/client/components/ServerRouteListItem.vue
@@ -22,9 +22,9 @@ const currentServerRoute = useCurrentServeRoute()
     >
       <div :class="{ 'w-12': !item.routes }" flex-none text-left>
         <NIcon v-if="item.type === 'collection'" icon="carbon:chevron-right" mb0.5 :transform-rotate="open ? 90 : 0" transition />
-        <Badge
+        <NBadge
           v-else
-          :class="getRequestMethodClass(item.method || '*')"
+          :n="getRequestMethodClass(item.method || '*')"
           v-text="(item.method || '*').toUpperCase()"
         />
       </div>
diff --git a/packages/devtools/client/components/TimelineDetailsFunction.vue b/packages/devtools/client/components/TimelineDetailsFunction.vue
index 29c0509f4e..c1b11c8d5e 100644
--- a/packages/devtools/client/components/TimelineDetailsFunction.vue
+++ b/packages/devtools/client/components/TimelineDetailsFunction.vue
@@ -29,9 +29,7 @@ const importItem = computed(() => {
 <template>
   <div v-if="record" p-4 flex="~ col gap-2" text-base>
     <div mx--1>
-      <Badge bg-yellow-600:10 text-yellow-600 op75>
-        Function call
-      </Badge>
+      <NBadge n="yellow" v-text="'Function call'" />
     </div>
     <div flex="~ gap-1" font-mono>
       <ComposableItem
diff --git a/packages/devtools/client/components/TimelineDetailsRoute.vue b/packages/devtools/client/components/TimelineDetailsRoute.vue
index 250a27fa63..0391db6a9f 100644
--- a/packages/devtools/client/components/TimelineDetailsRoute.vue
+++ b/packages/devtools/client/components/TimelineDetailsRoute.vue
@@ -11,9 +11,7 @@ const timeAgo = useTimeAgo(() => props.record.start, { showSecond: true })
 <template>
   <div v-if="record" p-4 flex="~ col gap-2">
     <div mx--1>
-      <Badge bg-green-400:10 text-green-400 op50>
-        Route Change
-      </Badge>
+      <NBadge n="green" v-text="'Route Change'" />
     </div>
     <div flex="~ gap-1 items-center" font-mono>
       <span op50>{{ record.from }}</span>
diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
index 61fc7173eb..fb6c341a3f 100644
--- a/packages/devtools/client/composables/utils.ts
+++ b/packages/devtools/client/composables/utils.ts
@@ -82,13 +82,13 @@ export function getIsMacOS() {
 
 // @unocss-include
 const requestMethodClass: Record<string, string> = {
-  get: 'bg-green-400:10 text-green-400',
-  post: 'bg-blue-400:10 text-blue-400',
-  put: 'bg-orange-400:10 text-orange-400',
-  delete: 'bg-red-400:10 text-red-400',
-  patch: 'bg-purple-400:10 text-purple-400',
-  head: 'bg-teal-400:10 text-teal-400',
-  default: 'bg-gray-400:10 text-gray-400',
+  get: 'green',
+  post: 'blue',
+  put: 'orange',
+  delete: 'red',
+  patch: 'purple',
+  head: 'teal',
+  default: 'gray',
 }
 
 export function getRequestMethodClass(method: string) {
diff --git a/packages/devtools/client/pages/index.vue b/packages/devtools/client/pages/index.vue
index 9e31275b20..6f6c966eb0 100644
--- a/packages/devtools/client/pages/index.vue
+++ b/packages/devtools/client/pages/index.vue
@@ -12,7 +12,7 @@ function visit() {
   <div flex="~ col gap4" mxa h-screen w-160 items-center justify-center text-center>
     <div flex="~" items-center justify-center>
       <NuxtLogo />
-      <Badge mr--15 mt--5 bg-green-400:10 text-green-400 title="preview" v-text="'preview'" />
+      <NBadge n="green" mr--15 mt--5 title="preview" v-text="'preview'" />
     </div>
     <p my2 text-xl font-bold>
       👋 Welcome trying the preview of Nuxt DevTools!
diff --git a/packages/devtools/client/pages/modules/overview.vue b/packages/devtools/client/pages/modules/overview.vue
index 3a9e49af17..b108e62956 100644
--- a/packages/devtools/client/pages/modules/overview.vue
+++ b/packages/devtools/client/pages/modules/overview.vue
@@ -38,7 +38,7 @@ const metricsLoading = computed(() => client.value?.metrics.loading())
         <div flex="~" mt--10 items-center justify-center>
           <NuxtLogo h-14 md:h-18 />
           <button mr--16 mt--6 @click="goIntro">
-            <Badge bg-green-400:10 text-green-400 title="preview" v-text="'preview'" />
+            <NBadge n="green" title="preview" v-text="'preview'" />
           </button>
         </div>
         <div mb6 mt--1 text-center text-sm flex="~ gap-1 wrap">
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index a213618c81..ebdff20013 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -133,9 +133,9 @@ function navigateToRoute(path: string) {
         <tr v-for="m of middleware" :key="m.path" h-7>
           <td>
             <span mr1>{{ m.name }}</span>
-            <Badge
+            <NBadge
               v-if="m.global"
-              bg-green-400:10 text-green-400
+              n="green"
               title="Registered at runtime as a global component"
               v-text="'global'"
             />