[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: show all button for dependencies (#613)

authored by

SHAMIL and committed by
GitHub
ec831b8a 8a8588a8

+40 -7
+40 -7
app/components/PackageDependencies.vue
··· 124 124 <span class="sr-only">{{ $t('package.deprecated.label') }}</span> 125 125 </NuxtLink> 126 126 <NuxtLink 127 - :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }" 127 + :to="{ 128 + name: 'package', 129 + params: { package: [...dep.split('/'), 'v', version] }, 130 + }" 128 131 class="font-mono text-xs text-end truncate" 129 132 :class="getVersionClass(outdatedDeps[dep])" 130 133 :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version" ··· 140 143 </span> 141 144 </li> 142 145 </ul> 146 + <button 147 + v-if="sortedDependencies.length > 10 && !depsExpanded" 148 + type="button" 149 + 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" 150 + @click="depsExpanded = true" 151 + > 152 + {{ 153 + $t('package.dependencies.show_all', { 154 + count: sortedDependencies.length, 155 + }) 156 + }} 157 + </button> 143 158 </CollapsibleSection> 144 159 145 160 <!-- Peer Dependencies --> 146 161 <CollapsibleSection 147 162 v-if="sortedPeerDependencies.length > 0" 148 163 id="peer-dependencies" 149 - :title="$t('package.peer_dependencies.title', { count: sortedPeerDependencies.length })" 164 + :title=" 165 + $t('package.peer_dependencies.title', { 166 + count: sortedPeerDependencies.length, 167 + }) 168 + " 150 169 > 151 170 <ul 152 171 class="space-y-1 list-none m-0 p-0" ··· 159 178 > 160 179 <div class="flex items-center gap-2 min-w-0"> 161 180 <NuxtLink 162 - :to="{ name: 'package', params: { package: peer.name.split('/') } }" 181 + :to="{ 182 + name: 'package', 183 + params: { package: peer.name.split('/') }, 184 + }" 163 185 class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate" 164 186 > 165 187 {{ peer.name }} ··· 191 213 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" 192 214 @click="peerDepsExpanded = true" 193 215 > 194 - {{ $t('package.peer_dependencies.show_all', { count: sortedPeerDependencies.length }) }} 216 + {{ 217 + $t('package.peer_dependencies.show_all', { 218 + count: sortedPeerDependencies.length, 219 + }) 220 + }} 195 221 </button> 196 222 </CollapsibleSection> 197 223 ··· 200 226 v-if="sortedOptionalDependencies.length > 0" 201 227 id="optional-dependencies" 202 228 :title=" 203 - $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length }) 229 + $t('package.optional_dependencies.title', { 230 + count: sortedOptionalDependencies.length, 231 + }) 204 232 " 205 233 > 206 234 <ul ··· 223 251 </NuxtLink> 224 252 <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" /> 225 253 <NuxtLink 226 - :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }" 254 + :to="{ 255 + name: 'package', 256 + params: { package: [...dep.split('/'), 'v', version] }, 257 + }" 227 258 class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate" 228 259 :title="version" 229 260 > ··· 238 269 @click="optionalDepsExpanded = true" 239 270 > 240 271 {{ 241 - $t('package.optional_dependencies.show_all', { count: sortedOptionalDependencies.length }) 272 + $t('package.optional_dependencies.show_all', { 273 + count: sortedOptionalDependencies.length, 274 + }) 242 275 }} 243 276 </button> 244 277 </CollapsibleSection>