Skip to content

Commit 6fbf644

Browse files
mouchixinmouchixin
committed
fix(PackageVersions): OtherVersions group major version root node should be an url
1 parent f95f1bb commit 6fbf644

1 file changed

Lines changed: 96 additions & 44 deletions

File tree

‎app/components/PackageVersions.vue‎

Lines changed: 96 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -499,29 +499,63 @@ function getTagVersions(tag: string): VersionDisplay[] {
499499
<template v-if="otherMajorGroups.length > 0">
500500
<div v-for="group in otherMajorGroups" :key="group.major">
501501
<!-- Major group header -->
502-
<button
503-
v-if="group.versions.length > 1"
504-
type="button"
505-
class="w-full text-left py-1"
506-
:aria-expanded="expandedMajorGroups.has(group.major)"
507-
:title="group.versions[0]?.version"
508-
@click="toggleMajorGroup(group.major)"
509-
>
510-
<div class="flex items-center gap-2">
511-
<span
512-
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
513-
:class="
514-
expandedMajorGroups.has(group.major)
515-
? 'i-carbon-chevron-down'
516-
: 'i-carbon-chevron-right'
517-
"
518-
/>
519-
<span
520-
class="font-mono text-xs truncate"
521-
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
522-
>
523-
{{ group.versions[0]?.version }}
524-
</span>
502+
<div v-if="group.versions.length > 1" class="py-1">
503+
<div class="flex items-center justify-between gap-2">
504+
<div class="flex items-center gap-2 min-w-0">
505+
<button
506+
type="button"
507+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0"
508+
:aria-expanded="expandedMajorGroups.has(group.major)"
509+
:aria-label="
510+
expandedMajorGroups.has(group.major)
511+
? `Collapse major ${group.major}`
512+
: `Expand major ${group.major}`
513+
"
514+
@click="toggleMajorGroup(group.major)"
515+
>
516+
<span
517+
class="w-3 h-3 transition-transform duration-200"
518+
:class="
519+
expandedMajorGroups.has(group.major)
520+
? 'i-carbon-chevron-down'
521+
: 'i-carbon-chevron-right'
522+
"
523+
/>
524+
</button>
525+
<NuxtLink
526+
v-if="group.versions[0]?.version"
527+
:to="versionRoute(group.versions[0]?.version)"
528+
class="font-mono text-xs transition-colors duration-200 truncate"
529+
:class="
530+
group.versions[0]?.deprecated
531+
? 'text-red-400 hover:text-red-300'
532+
: 'text-fg-muted hover:text-fg'
533+
"
534+
:title="
535+
group.versions[0]?.deprecated
536+
? `${group.versions[0]?.version} (deprecated)`
537+
: group.versions[0]?.version
538+
"
539+
>
540+
{{ group.versions[0]?.version }}
541+
</NuxtLink>
542+
</div>
543+
<div class="flex items-center gap-2 shrink-0">
544+
<DateTime
545+
v-if="group.versions[0]?.time"
546+
:datetime="group.versions[0]?.time"
547+
class="text-[10px] text-fg-subtle"
548+
year="numeric"
549+
month="short"
550+
day="numeric"
551+
/>
552+
<ProvenanceBadge
553+
v-if="group.versions[0]?.hasProvenance"
554+
:package-name="packageName"
555+
:version="group.versions[0]?.version"
556+
compact
557+
/>
558+
</div>
525559
</div>
526560
<div
527561
v-if="group.versions[0]?.tags?.length"
@@ -536,28 +570,46 @@ function getTagVersions(tag: string): VersionDisplay[] {
536570
{{ tag }}
537571
</span>
538572
</div>
539-
</button>
573+
</div>
540574
<!-- Single version (no expand needed) -->
541575
<div v-else class="py-1">
542-
<div class="flex items-center gap-2">
543-
<span class="w-3" />
544-
<NuxtLink
545-
v-if="group.versions[0]"
546-
:to="versionRoute(group.versions[0].version)"
547-
class="font-mono text-xs transition-colors duration-200 truncate"
548-
:class="
549-
group.versions[0].deprecated
550-
? 'text-red-400 hover:text-red-300'
551-
: 'text-fg-muted hover:text-fg'
552-
"
553-
:title="
554-
group.versions[0].deprecated
555-
? `${group.versions[0].version} (deprecated)`
556-
: group.versions[0].version
557-
"
558-
>
559-
{{ group.versions[0].version }}
560-
</NuxtLink>
576+
<div class="flex items-center justify-between gap-2">
577+
<div class="flex items-center gap-2 min-w-0">
578+
<span class="w-4 shrink-0" />
579+
<NuxtLink
580+
v-if="group.versions[0]?.version"
581+
:to="versionRoute(group.versions[0]?.version)"
582+
class="font-mono text-xs transition-colors duration-200 truncate"
583+
:class="
584+
group.versions[0]?.deprecated
585+
? 'text-red-400 hover:text-red-300'
586+
: 'text-fg-muted hover:text-fg'
587+
"
588+
:title="
589+
group.versions[0]?.deprecated
590+
? `${group.versions[0]?.version} (deprecated)`
591+
: group.versions[0]?.version
592+
"
593+
>
594+
{{ group.versions[0]?.version }}
595+
</NuxtLink>
596+
</div>
597+
<div class="flex items-center gap-2 shrink-0">
598+
<DateTime
599+
v-if="group.versions[0]?.time"
600+
:datetime="group.versions[0]?.time"
601+
class="text-[10px] text-fg-subtle"
602+
year="numeric"
603+
month="short"
604+
day="numeric"
605+
/>
606+
<ProvenanceBadge
607+
v-if="group.versions[0]?.hasProvenance"
608+
:package-name="packageName"
609+
:version="group.versions[0]?.version"
610+
compact
611+
/>
612+
</div>
561613
</div>
562614
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
563615
<span
@@ -573,7 +625,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
573625
<!-- Major group versions -->
574626
<div
575627
v-if="expandedMajorGroups.has(group.major) && group.versions.length > 1"
576-
class="ml-5 space-y-0.5"
628+
class="ml-6 space-y-0.5"
577629
>
578630
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
579631
<div class="flex items-center justify-between gap-2">

0 commit comments

Comments
 (0)