Skip to content

Commit f63b7b7

Browse files
azaletaazaleta
authored
fix: add links to major versions within 'other versions' dropdown (#170)
1 parent 04f94fe commit f63b7b7

File tree

3 files changed

+305
-49
lines changed

3 files changed

+305
-49
lines changed

‎app/components/PackageVersions.vue‎

Lines changed: 116 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
306306
<button
307307
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
308308
type="button"
309-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
309+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
310310
:aria-expanded="expandedTags.has(row.tag)"
311311
:aria-label="
312312
expandedTags.has(row.tag)
@@ -318,13 +318,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
318318
<span
319319
v-if="loadingTags.has(row.tag)"
320320
class="i-carbon-rotate-180 w-3 h-3 animate-spin"
321+
aria-hidden="true"
321322
/>
322323
<span
323324
v-else
324325
class="w-3 h-3 transition-transform duration-200"
325326
:class="
326327
expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'
327328
"
329+
aria-hidden="true"
328330
/>
329331
</button>
330332
<span v-else class="w-4" />
@@ -441,18 +443,28 @@ function getTagVersions(tag: string): VersionDisplay[] {
441443
<div class="pt-1">
442444
<button
443445
type="button"
444-
class="flex items-center gap-2 text-left"
446+
class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
445447
:aria-expanded="otherVersionsExpanded"
448+
:aria-label="
449+
otherVersionsExpanded
450+
? $t('package.versions.collapse_other')
451+
: $t('package.versions.expand_other')
452+
"
446453
@click="expandOtherVersions"
447454
>
448455
<span
449456
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
450457
>
451-
<span v-if="otherVersionsLoading" class="i-carbon-rotate-180 w-3 h-3 animate-spin" />
458+
<span
459+
v-if="otherVersionsLoading"
460+
class="i-carbon-rotate-180 w-3 h-3 animate-spin"
461+
aria-hidden="true"
462+
/>
452463
<span
453464
v-else
454465
class="w-3 h-3 transition-transform duration-200"
455466
:class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
467+
aria-hidden="true"
456468
/>
457469
</span>
458470
<span class="text-xs text-fg-muted py-1.5">
@@ -513,29 +525,66 @@ function getTagVersions(tag: string): VersionDisplay[] {
513525
<template v-if="otherMajorGroups.length > 0">
514526
<div v-for="group in otherMajorGroups" :key="group.major">
515527
<!-- Major group header -->
516-
<button
517-
v-if="group.versions.length > 1"
518-
type="button"
519-
class="w-full text-left py-1"
520-
:aria-expanded="expandedMajorGroups.has(group.major)"
521-
:title="group.versions[0]?.version"
522-
@click="toggleMajorGroup(group.major)"
523-
>
524-
<div class="flex items-center gap-2">
525-
<span
526-
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
527-
:class="
528-
expandedMajorGroups.has(group.major)
529-
? 'i-carbon-chevron-down'
530-
: 'i-carbon-chevron-right'
531-
"
532-
/>
533-
<span
534-
class="font-mono text-xs truncate"
535-
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
536-
>
537-
{{ group.versions[0]?.version }}
538-
</span>
528+
<div v-if="group.versions.length > 1" class="py-1">
529+
<div class="flex items-center justify-between gap-2">
530+
<div class="flex items-center gap-2 min-w-0">
531+
<button
532+
type="button"
533+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
534+
:aria-expanded="expandedMajorGroups.has(group.major)"
535+
:aria-label="
536+
expandedMajorGroups.has(group.major)
537+
? $t('package.versions.collapse_major', { major: group.major })
538+
: $t('package.versions.expand_major', { major: group.major })
539+
"
540+
@click="toggleMajorGroup(group.major)"
541+
>
542+
<span
543+
class="w-3 h-3 transition-transform duration-200"
544+
:class="
545+
expandedMajorGroups.has(group.major)
546+
? 'i-carbon-chevron-down'
547+
: 'i-carbon-chevron-right'
548+
"
549+
aria-hidden="true"
550+
/>
551+
</button>
552+
<NuxtLink
553+
v-if="group.versions[0]?.version"
554+
:to="versionRoute(group.versions[0]?.version)"
555+
class="font-mono text-xs transition-colors duration-200 truncate"
556+
:class="
557+
group.versions[0]?.deprecated
558+
? 'text-red-400 hover:text-red-300'
559+
: 'text-fg-muted hover:text-fg'
560+
"
561+
:title="
562+
group.versions[0]?.deprecated
563+
? t('package.versions.deprecated_title', {
564+
version: group.versions[0]?.version,
565+
})
566+
: group.versions[0]?.version
567+
"
568+
>
569+
{{ group.versions[0]?.version }}
570+
</NuxtLink>
571+
</div>
572+
<div class="flex items-center gap-2 shrink-0">
573+
<DateTime
574+
v-if="group.versions[0]?.time"
575+
:datetime="group.versions[0]?.time"
576+
class="text-[10px] text-fg-subtle"
577+
year="numeric"
578+
month="short"
579+
day="numeric"
580+
/>
581+
<ProvenanceBadge
582+
v-if="group.versions[0]?.hasProvenance"
583+
:package-name="packageName"
584+
:version="group.versions[0]?.version"
585+
compact
586+
/>
587+
</div>
539588
</div>
540589
<div
541590
v-if="group.versions[0]?.tags?.length"
@@ -550,30 +599,48 @@ function getTagVersions(tag: string): VersionDisplay[] {
550599
{{ tag }}
551600
</span>
552601
</div>
553-
</button>
602+
</div>
554603
<!-- Single version (no expand needed) -->
555604
<div v-else class="py-1">
556-
<div class="flex items-center gap-2">
557-
<span class="w-3" />
558-
<NuxtLink
559-
v-if="group.versions[0]"
560-
:to="versionRoute(group.versions[0].version)"
561-
class="font-mono text-xs transition-colors duration-200 truncate"
562-
:class="
563-
group.versions[0].deprecated
564-
? 'text-red-400 hover:text-red-300'
565-
: 'text-fg-muted hover:text-fg'
566-
"
567-
:title="
568-
group.versions[0].deprecated
569-
? t('package.versions.deprecated_title', {
570-
version: group.versions[0].version,
571-
})
572-
: group.versions[0].version
573-
"
574-
>
575-
{{ group.versions[0].version }}
576-
</NuxtLink>
605+
<div class="flex items-center justify-between gap-2">
606+
<div class="flex items-center gap-2 min-w-0">
607+
<span class="w-4 shrink-0" />
608+
<NuxtLink
609+
v-if="group.versions[0]?.version"
610+
:to="versionRoute(group.versions[0]?.version)"
611+
class="font-mono text-xs transition-colors duration-200 truncate"
612+
:class="
613+
group.versions[0]?.deprecated
614+
? 'text-red-400 hover:text-red-300'
615+
: 'text-fg-muted hover:text-fg'
616+
"
617+
:title="
618+
group.versions[0]?.deprecated
619+
? t('package.versions.deprecated_title', {
620+
version: group.versions[0]?.version,
621+
})
622+
: group.versions[0]?.version
623+
"
624+
>
625+
{{ group.versions[0]?.version }}
626+
</NuxtLink>
627+
</div>
628+
<div class="flex items-center gap-2 shrink-0">
629+
<DateTime
630+
v-if="group.versions[0]?.time"
631+
:datetime="group.versions[0]?.time"
632+
class="text-[10px] text-fg-subtle"
633+
year="numeric"
634+
month="short"
635+
day="numeric"
636+
/>
637+
<ProvenanceBadge
638+
v-if="group.versions[0]?.hasProvenance"
639+
:package-name="packageName"
640+
:version="group.versions[0]?.version"
641+
compact
642+
/>
643+
</div>
577644
</div>
578645
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
579646
<span
@@ -589,7 +656,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
589656
<!-- Major group versions -->
590657
<div
591658
v-if="expandedMajorGroups.has(group.major) && group.versions.length > 1"
592-
class="ml-5 space-y-0.5"
659+
class="ml-6 space-y-0.5"
593660
>
594661
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
595662
<div class="flex items-center justify-between gap-2">

‎i18n/locales/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,10 @@
116116
"title": "Versions",
117117
"collapse": "Collapse {tag}",
118118
"expand": "Expand {tag}",
119+
"collapse_other": "Collapse other versions",
120+
"expand_other": "Expand other versions",
121+
"collapse_major": "Collapse major {major}",
122+
"expand_major": "Expand major {major}",
119123
"other_versions": "Other versions",
120124
"more_tagged": "{count} more tagged",
121125
"all_covered": "All versions are covered by tags above",

0 commit comments

Comments
 (0)