Skip to content

Commit 6c5bdc3

Browse files
bteabtea
committed
feat: update
1 parent 8af1162 commit 6c5bdc3

File tree

1 file changed

+40
-32
lines changed

1 file changed

+40
-32
lines changed

‎app/pages/package/[[org]]/[name]/versions.vue‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -412,18 +412,21 @@ const flatItems = computed<FlatItem[]>(() => {
412412
v{{ row.version }}
413413
</LinkBase>
414414

415-
<!-- Downloads + Deprecated + Date + Provenance -->
415+
<!-- Downloads (centered) -->
416+
<span
417+
v-if="getVersionDownloads(row.version)"
418+
class="flex-1 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums relative z-10"
419+
:aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
420+
dir="ltr"
421+
:title="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
422+
>
423+
<span>{{ numberFormatter.format(getVersionDownloads(row.version)!) }}</span>
424+
<span class="i-lucide:chart-line" aria-hidden="true"></span>
425+
</span>
426+
<span v-else class="flex-1" />
427+
428+
<!-- Deprecated + Date + Provenance -->
416429
<div class="flex items-center gap-2 shrink-0 relative z-10">
417-
<span
418-
v-if="getVersionDownloads(row.version)"
419-
class="grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums w-24 text-end"
420-
:aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
421-
dir="ltr"
422-
:title="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
423-
>
424-
<span>{{ numberFormatter.format(getVersionDownloads(row.version)!) }}</span>
425-
<span class="i-lucide:chart-line" aria-hidden="true"></span>
426-
</span>
427430
<span
428431
v-if="fullVersionMap?.get(row.version)?.deprecated"
429432
class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
@@ -510,9 +513,12 @@ const flatItems = computed<FlatItem[]>(() => {
510513
>deprecated</span
511514
>
512515
<span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
516+
<span class="text-xs text-fg-muted" :title="item.versions[0]" dir="ltr"
517+
>v{{ item.versions[0] }}</span
518+
>
513519
<span
514520
v-if="getGroupDownloads(item.versions)"
515-
class="ms-auto grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums w-24 text-end"
521+
class="ms-auto grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums"
516522
:aria-label="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
517523
dir="ltr"
518524
:title="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
@@ -595,23 +601,25 @@ const flatItems = computed<FlatItem[]>(() => {
595601
</span>
596602
</div>
597603

598-
<!-- Right side -->
604+
<!-- Downloads (centered) -->
605+
<span
606+
v-if="getVersionDownloads(item.version)"
607+
class="flex-1 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums relative z-10"
608+
:aria-label="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
609+
:title="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
610+
dir="ltr"
611+
>
612+
<span>{{
613+
numberFormatter.format(getVersionDownloads(item.version)!)
614+
}}</span>
615+
<span class="i-lucide:chart-line" aria-hidden="true"></span>
616+
</span>
617+
<span v-else class="flex-1" />
618+
619+
<!-- Date + Provenance -->
599620
<div
600-
class="grid grid-flow-col auto-cols-max items-center gap-2 shrink-0 relative z-10 justify-end"
621+
class="flex items-center gap-2 shrink-0 relative z-10"
601622
>
602-
<span
603-
v-if="getVersionDownloads(item.version)"
604-
class="grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums w-24 text-end shrink-0"
605-
:aria-label="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
606-
:title="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
607-
dir="ltr"
608-
>
609-
<span>{{
610-
numberFormatter.format(getVersionDownloads(item.version)!)
611-
}}</span>
612-
<span class="i-lucide:chart-line" aria-hidden="true"></span>
613-
</span>
614-
<!-- Metadata: date + provenance -->
615623
<DateTime
616624
v-if="getVersionTime(item.version)"
617625
:datetime="getVersionTime(item.version)!"
@@ -649,20 +657,20 @@ const flatItems = computed<FlatItem[]>(() => {
649657
</span>
650658
<span class="text-sm font-medium">{{ item.label }}</span>
651659
<span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
660+
<span v-if="item.versions[0]" class="text-xs text-fg-muted" dir="ltr"
661+
>v{{ item.versions[0] }}</span
662+
>
652663
<span
653664
v-if="getGroupDownloads(item.versions)"
654-
class="ms-auto grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums w-24 text-end"
665+
class="ms-auto grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums"
655666
:aria-label="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
656667
dir="ltr"
657668
:title="getDownloadsAriaLabel(getGroupDownloads(item.versions)!)"
658669
>
659670
<span>{{ numberFormatter.format(getGroupDownloads(item.versions)!) }}</span>
660671
<span class="i-lucide:chart-line" aria-hidden="true"></span>
661672
</span>
662-
<span class="flex items-center gap-3 shrink-0">
663-
<span v-if="item.versions[0]" class="text-xs text-fg-muted" dir="ltr"
664-
>v{{ item.versions[0] }}</span
665-
>
673+
<span class="flex items-center gap-3 shrink-0" :class="!getGroupDownloads(item.versions) ? 'ms-auto' : ''">
666674
<DateTime
667675
v-if="getVersionTime(item.versions[0] ?? '')"
668676
:datetime="getVersionTime(item.versions[0] ?? '')!"

0 commit comments

Comments
 (0)