fix: show all button for dependencies (#613)

Author: shamilkotta

app/components/PackageDependencies.vue

@@ -124,7 +124,10 @@ const sortedOptionalDependencies = computed(() => {
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </NuxtLink>
             <NuxtLink
-              :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
+              :to="{
+                name: 'package',
+                params: { package: [...dep.split('/'), 'v', version] },
+              }"
               class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
@@ -140,13 +143,29 @@ const sortedOptionalDependencies = computed(() => {
           </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>
     </CollapsibleSection>
 
     <!-- Peer Dependencies -->
     <CollapsibleSection
       v-if="sortedPeerDependencies.length > 0"
       id="peer-dependencies"
-      :title="$t('package.peer_dependencies.title', { count: sortedPeerDependencies.length })"
+      :title="
+        $t('package.peer_dependencies.title', {
+          count: sortedPeerDependencies.length,
+        })
+      "
     >
       <ul
         class="space-y-1 list-none m-0 p-0"
@@ -159,7 +178,10 @@ const sortedOptionalDependencies = computed(() => {
         >
           <div class="flex items-center gap-2 min-w-0">
             <NuxtLink
-              :to="{ name: 'package', params: { package: peer.name.split('/') } }"
+              :to="{
+                name: 'package',
+                params: { package: peer.name.split('/') },
+              }"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
             >
               {{ peer.name }}
@@ -191,7 +213,11 @@ const sortedOptionalDependencies = computed(() => {
         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 }) }}
+        {{
+          $t('package.peer_dependencies.show_all', {
+            count: sortedPeerDependencies.length,
+          })
+        }}
       </button>
     </CollapsibleSection>
 
@@ -200,7 +226,9 @@ const sortedOptionalDependencies = computed(() => {
       v-if="sortedOptionalDependencies.length > 0"
       id="optional-dependencies"
       :title="
-        $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
+        $t('package.optional_dependencies.title', {
+          count: sortedOptionalDependencies.length,
+        })
       "
     >
       <ul
@@ -223,7 +251,10 @@ const sortedOptionalDependencies = computed(() => {
           </NuxtLink>
           <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
-            :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
+            :to="{
+              name: 'package',
+              params: { package: [...dep.split('/'), 'v', version] },
+            }"
             class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
             :title="version"
           >
@@ -238,7 +269,9 @@ const sortedOptionalDependencies = computed(() => {
         @click="optionalDepsExpanded = true"
       >
         {{
-          $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length })
+          $t('package.optional_dependencies.show_all', {
+            count: sortedOptionalDependencies.length,
+          })
         }}
       </button>
     </CollapsibleSection>