[READ-ONLY] a fast, modern browser for the npm registry

feat: highlight selected version (#964)

authored by

SHAMIL and committed by
GitHub
266c8c14 4fd68673

+98 -7
+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)"
+1
app/pages/package/[[org]]/[name].vue
··· 1289 1289 :versions="pkg.versions" 1290 1290 :dist-tags="pkg['dist-tags'] ?? {}" 1291 1291 :time="pkg.time" 1292 + :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']" 1292 1293 /> 1293 1294 1294 1295 <!-- Install Scripts Warning -->