PackageDependencies.vue

<script setup lang="ts">
import { useVulnerabilityTree } from '~/composables/useVulnerabilityTree'
import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'

const props = defineProps<{
  packageName: string
  version: string
  dependencies?: Record<string, string>
  peerDependencies?: Record<string, string>
  peerDependenciesMeta?: Record<string, { optional?: boolean }>
  optionalDependencies?: Record<string, string>
}>()

// Fetch outdated info for dependencies
const outdatedDeps = useOutdatedDependencies(() => props.dependencies)

// Get vulnerability info from shared cache (already fetched by PackageVulnerabilityTree)
const { data: vulnTree } = useVulnerabilityTree(
  () => props.packageName,
  () => props.version,
)

// Check if a dependency has vulnerabilities (only direct deps)
function getVulnerableDepInfo(depName: string) {
  if (!vulnTree.value) return null
  return vulnTree.value.vulnerablePackages.find(p => p.name === depName && p.depth === 'direct')
}

// Expanded state for each section
const depsExpanded = shallowRef(false)
const peerDepsExpanded = shallowRef(false)
const optionalDepsExpanded = shallowRef(false)

// Sort dependencies alphabetically
const sortedDependencies = computed(() => {
  if (!props.dependencies) return []
  return Object.entries(props.dependencies).sort(([a], [b]) => a.localeCompare(b))
})

// Sort peer dependencies alphabetically, with required first then optional
const sortedPeerDependencies = computed(() => {
  if (!props.peerDependencies) return []

  return Object.entries(props.peerDependencies)
    .map(([name, version]) => ({
      name,
      version,
      optional: props.peerDependenciesMeta?.[name]?.optional ?? false,
    }))
    .sort((a, b) => {
      // Required first, then optional
      if (a.optional !== b.optional) return a.optional ? 1 : -1
      return a.name.localeCompare(b.name)
    })
})

// Sort optional dependencies alphabetically
const sortedOptionalDependencies = computed(() => {
  if (!props.optionalDependencies) return []
  return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
})
</script>

<template>
  <div class="space-y-8">
    <!-- Dependencies -->
    <section
      id="dependencies"
      v-if="sortedDependencies.length > 0"
      aria-labelledby="dependencies-heading"
      class="scroll-mt-20"
    >
      <h2
        id="dependencies-heading"
        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
      >
        <a
          href="#dependencies"
          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
        >
          {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
          <span
            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
            aria-hidden="true"
          />
        </a>
      </h2>
      <ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
        <li
          v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
          :key="dep"
          class="flex items-center justify-between py-1 text-sm gap-2"
        >
          <NuxtLink
            :to="getPackageRoute(dep)"
            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
          >
            {{ dep }}
          </NuxtLink>
          <span class="flex items-center gap-1">
            <span
              v-if="outdatedDeps[dep]"
              class="shrink-0"
              :class="getVersionClass(outdatedDeps[dep])"
              :title="getOutdatedTooltip(outdatedDeps[dep])"
              aria-hidden="true"
            >
              <span class="i-carbon-warning-alt w-3 h-3 block" />
            </span>
            <NuxtLink
              v-if="getVulnerableDepInfo(dep)"
              :to="getPackageRoute(dep, getVulnerableDepInfo(dep)!.version)"
              class="shrink-0"
              :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
              :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
            >
              <span class="i-carbon-security w-3 h-3 block" aria-hidden="true" />
              <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
            </NuxtLink>
            <NuxtLink
              :to="getPackageRoute(dep, version)"
              class="font-mono text-xs text-right truncate"
              :class="getVersionClass(outdatedDeps[dep])"
              :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
            >
              {{ version }}
            </NuxtLink>
            <span v-if="outdatedDeps[dep]" class="sr-only">
              ({{ getOutdatedTooltip(outdatedDeps[dep]) }})
            </span>
            <span v-if="getVulnerableDepInfo(dep)" class="sr-only">
              ({{ getVulnerableDepInfo(dep)!.counts.total }} vulnerabilities)
            </span>
          </span>
        </li>
      </ul>
      <button
        v-if="sortedDependencies.length > 10 && !depsExpanded"
        type="button"
        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        @click="depsExpanded = true"
      >
        {{ $t('package.dependencies.show_all', { count: sortedDependencies.length }) }}
      </button>
    </section>

    <!-- Peer Dependencies -->
    <section
      id="peer-dependencies"
      v-if="sortedPeerDependencies.length > 0"
      aria-labelledby="peer-dependencies-heading"
      class="scroll-mt-20"
    >
      <h2
        id="peer-dependencies-heading"
        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
      >
        <a
          href="#peer-dependencies"
          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
        >
          {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
          <span
            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
            aria-hidden="true"
          />
        </a>
      </h2>
      <ul
        class="space-y-1 list-none m-0 p-0"
        :aria-label="$t('package.peer_dependencies.list_label')"
      >
        <li
          v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
          :key="peer.name"
          class="flex items-center justify-between py-1 text-sm gap-2"
        >
          <div class="flex items-center gap-2 min-w-0">
            <NuxtLink
              :to="getPackageRoute(peer.name)"
              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
            >
              {{ peer.name }}
            </NuxtLink>
            <span
              v-if="peer.optional"
              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
              :title="$t('package.dependencies.optional')"
            >
              {{ $t('package.dependencies.optional') }}
            </span>
          </div>
          <NuxtLink
            :to="getPackageRoute(peer.name, peer.version)"
            class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
            :title="peer.version"
          >
            {{ peer.version }}
          </NuxtLink>
        </li>
      </ul>
      <button
        v-if="sortedPeerDependencies.length > 10 && !peerDepsExpanded"
        type="button"
        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        @click="peerDepsExpanded = true"
      >
        {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }}
      </button>
    </section>

    <!-- Optional Dependencies -->
    <section
      id="optional-dependencies"
      v-if="sortedOptionalDependencies.length > 0"
      aria-labelledby="optional-dependencies-heading"
      class="scroll-mt-20"
    >
      <h2
        id="optional-dependencies-heading"
        class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
      >
        <a
          href="#optional-dependencies"
          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
        >
          {{
            $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
          }}
          <span
            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
            aria-hidden="true"
          />
        </a>
      </h2>
      <ul
        class="space-y-1 list-none m-0 p-0"
        :aria-label="$t('package.optional_dependencies.list_label')"
      >
        <li
          v-for="[dep, version] in sortedOptionalDependencies.slice(
            0,
            optionalDepsExpanded ? undefined : 10,
          )"
          :key="dep"
          class="flex items-center justify-between py-1 text-sm gap-2"
        >
          <NuxtLink
            :to="getPackageRoute(dep)"
            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
          >
            {{ dep }}
          </NuxtLink>
          <NuxtLink
            :to="getPackageRoute(dep, version)"
            class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
            :title="version"
          >
            {{ version }}
          </NuxtLink>
        </li>
      </ul>
      <button
        v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
        type="button"
        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        @click="optionalDepsExpanded = true"
      >
        {{
          $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
        }}
      </button>
    </section>
  </div>
</template>