forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: highlight selected version (#964)
+98
-7
+97
-7
app/components/Package/Versions.vue
+97
-7
app/components/Package/Versions.vue
···
17
17
versions: Record<string, SlimVersion>
18
18
distTags: Record<string, string>
19
19
time: Record<string, string>
20
+
selectedVersion?: string
20
21
}>()
21
22
22
23
const chartModal = useModal('chart-modal')
···
77
78
78
79
// Version to tags lookup (supports multiple tags per version)
79
80
const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
81
+
82
+
const effectiveCurrentVersion = computed(
83
+
() => props.selectedVersion ?? props.distTags.latest ?? undefined,
84
+
)
80
85
81
86
// All tag rows derived from props (SSR-safe)
82
87
// Deduplicates so each version appears only once, with all its tags
···
334
339
function getTagVersions(tag: string): VersionDisplay[] {
335
340
return tagVersions.value.get(tag) ?? []
336
341
}
342
+
343
+
function findClaimingTag(version: string): string | null {
344
+
const versionChannel = getPrereleaseChannel(version)
345
+
346
+
// First matching tag claims the version
347
+
for (const row of allTagRows.value) {
348
+
const tagVersion = props.distTags[row.tag]
349
+
if (!tagVersion) continue
350
+
351
+
const tagChannel = getPrereleaseChannel(tagVersion)
352
+
353
+
if (isSameVersionGroup(version, tagVersion) && versionChannel === tagChannel) {
354
+
return row.tag
355
+
}
356
+
}
357
+
358
+
return null
359
+
}
360
+
361
+
// Whether this row should be highlighted for the current version
362
+
function rowContainsCurrentVersion(row: (typeof visibleTagRows.value)[0]): boolean {
363
+
if (!effectiveCurrentVersion.value) return false
364
+
365
+
if (row.primaryVersion.version === effectiveCurrentVersion.value) return true
366
+
367
+
if (getTagVersions(row.tag).some(v => v.version === effectiveCurrentVersion.value)) return true
368
+
369
+
const claimingTag = findClaimingTag(effectiveCurrentVersion.value)
370
+
return claimingTag === row.tag
371
+
}
372
+
373
+
function otherVersionsContainsCurrent(): boolean {
374
+
if (!effectiveCurrentVersion.value) return false
375
+
376
+
const claimingTag = findClaimingTag(effectiveCurrentVersion.value)
377
+
378
+
// If a tag claims it, check if that tag is in visibleTagRows
379
+
if (claimingTag) {
380
+
const isInVisibleTags = visibleTagRows.value.some(row => row.tag === claimingTag)
381
+
if (!isInVisibleTags) return true
382
+
return false
383
+
}
384
+
385
+
// No tag claims it - it would be in otherMajorGroups
386
+
return true
387
+
}
388
+
389
+
function hiddenRowContainsCurrent(row: (typeof hiddenTagRows.value)[0]): boolean {
390
+
if (!effectiveCurrentVersion.value) return false
391
+
if (row.primaryVersion.version === effectiveCurrentVersion.value) return true
392
+
393
+
const claimingTag = findClaimingTag(effectiveCurrentVersion.value)
394
+
return claimingTag === row.tag
395
+
}
396
+
397
+
function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): boolean {
398
+
if (!effectiveCurrentVersion.value) return false
399
+
return group.versions.some(v => v.version === effectiveCurrentVersion.value)
400
+
}
337
401
</script>
338
402
339
403
<template>
···
358
422
<div v-for="row in visibleTagRows" :key="row.id">
359
423
<div
360
424
class="flex items-center gap-2 pe-2 px-1"
361
-
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
425
+
:class="rowContainsCurrentVersion(row) ? 'bg-bg-subtle rounded-lg' : ''"
362
426
>
363
427
<!-- Expand button (only if there are more versions to show) -->
364
428
<button
···
451
515
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
452
516
class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
453
517
>
454
-
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
518
+
<div
519
+
v-for="v in getTagVersions(row.tag).slice(1)"
520
+
:key="v.version"
521
+
class="py-1"
522
+
:class="v.version === effectiveCurrentVersion ? 'rounded bg-bg-subtle px-2 -mx-2' : ''"
523
+
>
455
524
<div class="flex items-center justify-between gap-2">
456
525
<LinkBase
457
526
:to="versionRoute(v.version)"
···
511
580
<div class="p-1">
512
581
<button
513
582
type="button"
514
-
class="flex items-center gap-2 text-start rounded-sm"
583
+
class="flex items-center gap-2 text-start rounded-sm w-full"
584
+
:class="otherVersionsContainsCurrent() ? 'bg-bg-subtle' : ''"
515
585
:aria-expanded="otherVersionsExpanded"
516
586
:aria-label="
517
587
otherVersionsExpanded
···
553
623
<!-- Expanded other versions -->
554
624
<div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
555
625
<!-- Hidden tag rows (overflow from visible tags) -->
556
-
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
626
+
<div
627
+
v-for="row in hiddenTagRows"
628
+
:key="row.id"
629
+
class="py-1"
630
+
:class="hiddenRowContainsCurrent(row) ? 'rounded bg-bg-subtle px-2 -mx-2' : ''"
631
+
>
557
632
<div class="flex items-center justify-between gap-2">
558
633
<LinkBase
559
634
:to="versionRoute(row.primaryVersion.version)"
···
604
679
<template v-if="otherMajorGroups.length > 0">
605
680
<div v-for="group in otherMajorGroups" :key="group.groupKey">
606
681
<!-- Version group header -->
607
-
<div v-if="group.versions.length > 1" class="py-1">
682
+
<div
683
+
v-if="group.versions.length > 1"
684
+
class="py-1"
685
+
:class="majorGroupContainsCurrent(group) ? 'rounded bg-bg-subtle px-2 -mx-2' : ''"
686
+
>
608
687
<div class="flex items-center justify-between gap-2">
609
688
<div class="flex items-center gap-2 min-w-0">
610
689
<button
···
687
766
</div>
688
767
</div>
689
768
<!-- Single version (no expand needed) -->
690
-
<div v-else class="py-1">
769
+
<div
770
+
v-else
771
+
class="py-1"
772
+
:class="majorGroupContainsCurrent(group) ? 'rounded bg-bg-subtle px-2 -mx-2' : ''"
773
+
>
691
774
<div class="flex items-center justify-between gap-2">
692
775
<div class="flex items-center gap-2 min-w-0">
693
776
<LinkBase
···
749
832
v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
750
833
class="ms-6 space-y-0.5"
751
834
>
752
-
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
835
+
<div
836
+
v-for="v in group.versions.slice(1)"
837
+
:key="v.version"
838
+
class="py-1"
839
+
:class="
840
+
v.version === effectiveCurrentVersion ? 'rounded bg-bg-subtle px-2 -mx-2' : ''
841
+
"
842
+
>
753
843
<div class="flex items-center justify-between gap-2">
754
844
<LinkBase
755
845
:to="versionRoute(v.version)"