feat: add zero direct dependencies banner for package detail page

Author: floatDreamWithSong

app/components/Package/ZeroDirectDependencies.vue

@@ -0,0 +1,16 @@
+<template>
+  <section aria-labelledby="zero-direct-deps-heading" class="relative">
+    <div
+      role="status"
+      class="border border-emerald-600/40 bg-emerald-500/10 rounded-lg px-3 py-2 text-base text-emerald-800 dark:text-emerald-400"
+    >
+      <h2 id="zero-direct-deps-heading" class="font-medium mb-1 flex items-center gap-2">
+        <span class="i-lucide:circle-check-big w-4 h-4" aria-hidden="true" />
+        {{ $t('package.dependencies.zero_direct_banner_title') }}
+      </h2>
+      <p class="text-sm m-0 mt-1">
+        {{ $t('package.dependencies.zero_direct_banner_desc') }}
+      </p>
+    </div>
+  </section>
+</template>

app/pages/package/[[org]]/[name].vue

@@ -456,6 +456,12 @@ const hasDependencies = computed(() => {
   )
 })
 
+const hasZeroDirectDependencies = computed(
+  () =>
+    !displayVersion.value?.dependencies ||
+    Object.keys(displayVersion.value.dependencies).length === 0,
+)
+
 // Vulnerability count for the stats banner
 const vulnCount = computed(() => vulnTree.value?.totalCounts.total ?? 0)
 const hasVulnerabilities = computed(() => vulnCount.value > 0)
@@ -1384,6 +1390,8 @@ const showSkeleton = shallowRef(false)
         <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
         <!-- Size / dependency increase notice -->
         <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
+        <!-- Positive signal: no direct runtime dependencies -->
+        <PackageZeroDirectDependencies v-if="hasZeroDirectDependencies" />
         <!-- Vulnerability scan -->
         <ClientOnly>
           <PackageVulnerabilityTree

i18n/locales/en.json

@@ -413,7 +413,9 @@
       "outdated_major": "{count} major version behind (latest: {latest}) | {count} major versions behind (latest: {latest})",
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
-      "has_replacement": "This dependency has suggested replacements"
+      "has_replacement": "This dependency has suggested replacements",
+      "zero_direct_banner_title": "0 direct dependencies",
+      "zero_direct_banner_desc": "This package has no direct dependencies."
     },
     "peer_dependencies": {
       "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",

i18n/locales/zh-CN.json

@@ -403,7 +403,9 @@
       "outdated_major": "落后 {count} 个主要版本（最新：{latest}）",
       "outdated_minor": "落后 {count} 个次要版本（最新：{latest}）",
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
-      "has_replacement": "该依赖有推荐的替代包。"
+      "has_replacement": "该依赖有推荐的替代包。",
+      "zero_direct_banner_title": "0 个直接依赖",
+      "zero_direct_banner_desc": "该包没有任何直接依赖。"
     },
     "peer_dependencies": {
       "title": "对等依赖（{count} 个）",

i18n/schema.json

@@ -1245,6 +1245,12 @@
             },
             "has_replacement": {
               "type": "string"
+            },
+            "zero_direct_banner_title": {
+              "type": "string"
+            },
+            "zero_direct_banner_desc": {
+              "type": "string"
             }
           },
           "additionalProperties": false

test/nuxt/a11y.spec.ts

@@ -229,6 +229,7 @@ import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
+import PackageZeroDirectDependencies from '~/components/Package/ZeroDirectDependencies.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -3529,6 +3530,14 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageZeroDirectDependencies', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageZeroDirectDependencies)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {