forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: show all button for dependencies (#613)
+40
-7
+40
-7
app/components/PackageDependencies.vue
+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>