Skip to content

Commit d9614c4

Browse files
YFAntYFAnt
committed
feat: versions can scroll when version is more
1 parent 1f88d31 commit d9614c4

1 file changed

Lines changed: 145 additions & 143 deletions

File tree

‎app/components/PackageVersions.vue‎

Lines changed: 145 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
372372
<!-- Expanded versions -->
373373
<div
374374
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
375-
class="ml-4 pl-2 border-l border-border space-y-0.5"
375+
class="ml-4 pl-2 border-l border-border space-y-0.5 max-h-80 overflow-y-auto pr-2"
376376
>
377377
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
378378
<div class="flex items-center justify-between gap-2">
@@ -449,171 +449,173 @@ function getTagVersions(tag: string): VersionDisplay[] {
449449
</button>
450450

451451
<!-- Expanded other versions -->
452-
<div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
453-
<!-- Hidden tag rows (overflow from visible tags) -->
454-
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
455-
<div class="flex items-center justify-between gap-2">
456-
<NuxtLink
457-
:to="versionRoute(row.primaryVersion.version)"
458-
class="font-mono text-xs transition-colors duration-200 truncate"
459-
:class="
460-
row.primaryVersion.deprecated
461-
? 'text-red-400 hover:text-red-300'
462-
: 'text-fg-muted hover:text-fg'
463-
"
464-
:title="
465-
row.primaryVersion.deprecated
466-
? `${row.primaryVersion.version} (deprecated)`
467-
: row.primaryVersion.version
468-
"
469-
>
470-
{{ row.primaryVersion.version }}
471-
</NuxtLink>
472-
<div class="flex items-center gap-2 shrink-0">
473-
<NuxtTime
474-
v-if="row.primaryVersion.time"
475-
:datetime="row.primaryVersion.time"
476-
class="text-[10px] text-fg-subtle"
477-
year="numeric"
478-
month="short"
479-
day="numeric"
480-
/>
481-
</div>
482-
</div>
483-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
484-
<span
485-
v-for="tag in row.tags"
486-
:key="tag"
487-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
488-
:title="tag"
489-
>
490-
{{ tag }}
491-
</span>
492-
</div>
493-
</div>
494-
495-
<!-- Major version groups (untagged versions) -->
496-
<template v-if="otherMajorGroups.length > 0">
497-
<div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
498-
<!-- Major group header -->
499-
<button
500-
v-if="group.versions.length > 1"
501-
type="button"
502-
class="w-full text-left py-1"
503-
:aria-expanded="group.expanded"
504-
:title="group.versions[0]?.version"
505-
@click="toggleMajorGroup(groupIndex)"
506-
>
507-
<div class="flex items-center gap-2">
508-
<span
509-
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
510-
:class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
452+
<div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border">
453+
<div class="space-y-0.5 max-h-96 overflow-y-auto pr-2">
454+
<!-- Hidden tag rows (overflow from visible tags) -->
455+
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
456+
<div class="flex items-center justify-between gap-2">
457+
<NuxtLink
458+
:to="versionRoute(row.primaryVersion.version)"
459+
class="font-mono text-xs transition-colors duration-200 truncate"
460+
:class="
461+
row.primaryVersion.deprecated
462+
? 'text-red-400 hover:text-red-300'
463+
: 'text-fg-muted hover:text-fg'
464+
"
465+
:title="
466+
row.primaryVersion.deprecated
467+
? `${row.primaryVersion.version} (deprecated)`
468+
: row.primaryVersion.version
469+
"
470+
>
471+
{{ row.primaryVersion.version }}
472+
</NuxtLink>
473+
<div class="flex items-center gap-2 shrink-0">
474+
<NuxtTime
475+
v-if="row.primaryVersion.time"
476+
:datetime="row.primaryVersion.time"
477+
class="text-[10px] text-fg-subtle"
478+
year="numeric"
479+
month="short"
480+
day="numeric"
511481
/>
512-
<span
513-
class="font-mono text-xs truncate"
514-
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
515-
>
516-
{{ group.versions[0]?.version }}
517-
</span>
518482
</div>
519-
<div
520-
v-if="group.versions[0]?.tags?.length"
521-
class="flex items-center gap-1 ml-5 flex-wrap"
483+
</div>
484+
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
485+
<span
486+
v-for="tag in row.tags"
487+
:key="tag"
488+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
489+
:title="tag"
522490
>
523-
<span
524-
v-for="tag in group.versions[0].tags"
525-
:key="tag"
526-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
527-
:title="tag"
528-
>
529-
{{ tag }}
530-
</span>
531-
</div>
532-
</button>
533-
<!-- Single version (no expand needed) -->
534-
<div v-else class="py-1">
535-
<div class="flex items-center gap-2">
536-
<span class="w-3" />
537-
<NuxtLink
538-
v-if="group.versions[0]"
539-
:to="versionRoute(group.versions[0].version)"
540-
class="font-mono text-xs transition-colors duration-200 truncate"
541-
:class="
542-
group.versions[0].deprecated
543-
? 'text-red-400 hover:text-red-300'
544-
: 'text-fg-muted hover:text-fg'
545-
"
546-
:title="
547-
group.versions[0].deprecated
548-
? `${group.versions[0].version} (deprecated)`
549-
: group.versions[0].version
550-
"
551-
>
552-
{{ group.versions[0].version }}
553-
</NuxtLink>
554-
</div>
555-
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
556-
<span
557-
v-for="tag in group.versions[0].tags"
558-
:key="tag"
559-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
560-
>
561-
{{ tag }}
562-
</span>
563-
</div>
491+
{{ tag }}
492+
</span>
564493
</div>
494+
</div>
565495

566-
<!-- Major group versions -->
567-
<div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
568-
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
569-
<div class="flex items-center justify-between gap-2">
496+
<!-- Major version groups (untagged versions) -->
497+
<template v-if="otherMajorGroups.length > 0">
498+
<div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
499+
<!-- Major group header -->
500+
<button
501+
v-if="group.versions.length > 1"
502+
type="button"
503+
class="w-full text-left py-1"
504+
:aria-expanded="group.expanded"
505+
:title="group.versions[0]?.version"
506+
@click="toggleMajorGroup(groupIndex)"
507+
>
508+
<div class="flex items-center gap-2">
509+
<span
510+
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
511+
:class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
512+
/>
513+
<span
514+
class="font-mono text-xs truncate"
515+
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
516+
>
517+
{{ group.versions[0]?.version }}
518+
</span>
519+
</div>
520+
<div
521+
v-if="group.versions[0]?.tags?.length"
522+
class="flex items-center gap-1 ml-5 flex-wrap"
523+
>
524+
<span
525+
v-for="tag in group.versions[0].tags"
526+
:key="tag"
527+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
528+
:title="tag"
529+
>
530+
{{ tag }}
531+
</span>
532+
</div>
533+
</button>
534+
<!-- Single version (no expand needed) -->
535+
<div v-else class="py-1">
536+
<div class="flex items-center gap-2">
537+
<span class="w-3" />
570538
<NuxtLink
571-
:to="versionRoute(v.version)"
539+
v-if="group.versions[0]"
540+
:to="versionRoute(group.versions[0].version)"
572541
class="font-mono text-xs transition-colors duration-200 truncate"
573542
:class="
574-
v.deprecated
543+
group.versions[0].deprecated
575544
? 'text-red-400 hover:text-red-300'
576-
: 'text-fg-subtle hover:text-fg-muted'
545+
: 'text-fg-muted hover:text-fg'
546+
"
547+
:title="
548+
group.versions[0].deprecated
549+
? `${group.versions[0].version} (deprecated)`
550+
: group.versions[0].version
577551
"
578-
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
579552
>
580-
{{ v.version }}
553+
{{ group.versions[0].version }}
581554
</NuxtLink>
582-
<div class="flex items-center gap-2 shrink-0">
583-
<NuxtTime
584-
v-if="v.time"
585-
:datetime="v.time"
586-
class="text-[10px] text-fg-subtle"
587-
year="numeric"
588-
month="short"
589-
day="numeric"
590-
/>
591-
<ProvenanceBadge
592-
v-if="v.hasProvenance"
593-
:package-name="packageName"
594-
:version="v.version"
595-
compact
596-
/>
597-
</div>
598555
</div>
599-
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
556+
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
600557
<span
601-
v-for="tag in v.tags"
558+
v-for="tag in group.versions[0].tags"
602559
:key="tag"
603560
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
604561
>
605562
{{ tag }}
606563
</span>
607564
</div>
608565
</div>
566+
567+
<!-- Major group versions -->
568+
<div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
569+
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
570+
<div class="flex items-center justify-between gap-2">
571+
<NuxtLink
572+
:to="versionRoute(v.version)"
573+
class="font-mono text-xs transition-colors duration-200 truncate"
574+
:class="
575+
v.deprecated
576+
? 'text-red-400 hover:text-red-300'
577+
: 'text-fg-subtle hover:text-fg-muted'
578+
"
579+
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
580+
>
581+
{{ v.version }}
582+
</NuxtLink>
583+
<div class="flex items-center gap-2 shrink-0">
584+
<NuxtTime
585+
v-if="v.time"
586+
:datetime="v.time"
587+
class="text-[10px] text-fg-subtle"
588+
year="numeric"
589+
month="short"
590+
day="numeric"
591+
/>
592+
<ProvenanceBadge
593+
v-if="v.hasProvenance"
594+
:package-name="packageName"
595+
:version="v.version"
596+
compact
597+
/>
598+
</div>
599+
</div>
600+
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
601+
<span
602+
v-for="tag in v.tags"
603+
:key="tag"
604+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
605+
>
606+
{{ tag }}
607+
</span>
608+
</div>
609+
</div>
610+
</div>
609611
</div>
612+
</template>
613+
<div
614+
v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
615+
class="py-1 text-xs text-fg-subtle"
616+
>
617+
All versions are covered by tags above
610618
</div>
611-
</template>
612-
<div
613-
v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
614-
class="py-1 text-xs text-fg-subtle"
615-
>
616-
All versions are covered by tags above
617619
</div>
618620
</div>
619621
</div>

0 commit comments

Comments
 (0)