feat(ui): NBadge component (#433)

Author: arashsheyda

packages/devtools-ui-kit/src/components/NBadge.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="n-badge">
+    <slot />
+  </span>
+</template>

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',

packages/devtools/client/components/Badge.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'"
       />

packages/devtools/client/components/ComponentDetails.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'"
     />

packages/devtools/client/components/ComponentItem.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()" />

packages/devtools/client/components/ModuleItemInstall.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'"
       />

packages/devtools/client/components/NpmVersionCheck.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>

packages/devtools/client/components/PluginItem.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'"
               />

packages/devtools/client/components/RoutesTable.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>