Skip to content

Commit 9a0521c

Browse files
alexdlnalexdln
authored
fix: restore rows truncates in package page (#1240)
1 parent a851e1e commit 9a0521c

File tree

3 files changed

+34
-17
lines changed

3 files changed

+34
-17
lines changed

‎app/components/Link/Base.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const props = withDefaults(
1212
'type'?: never
1313
'variant'?: 'button-primary' | 'button-secondary' | 'link'
1414
'size'?: 'small' | 'medium'
15+
'iconSize'?: 'sm' | 'md' | 'lg'
1516
1617
'keyshortcut'?: string
1718
@@ -51,11 +52,21 @@ const isLinkAnchor = computed(
5152
() => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
5253
)
5354
55+
const ICON_SIZE_MAP = {
56+
sm: 'size-3 min-w-3',
57+
md: 'size-4 min-w-4',
58+
lg: 'size-5 min-w-5',
59+
}
60+
5461
/** size is only applicable for button like links */
5562
const isLink = computed(() => props.variant === 'link')
5663
const isButton = computed(() => props.variant !== 'link')
5764
const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
5865
const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
66+
67+
const iconSizeClass = computed(
68+
() => ICON_SIZE_MAP[props.iconSize || (isButtonSmall.value && 'sm') || 'md'],
69+
)
5970
</script>
6071

6172
<template>
@@ -89,11 +100,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
89100
:aria-keyshortcuts="keyshortcut"
90101
:target="isLinkExternal ? '_blank' : undefined"
91102
>
92-
<span
93-
v-if="classicon"
94-
:class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
95-
aria-hidden="true"
96-
/>
103+
<span v-if="classicon" class="me-1" :class="[iconSizeClass, classicon]" aria-hidden="true" />
97104
<slot />
98105
<!-- automatically show icon indicating external link -->
99106
<span

‎app/components/Package/Dependencies.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const numberFormatter = useNumberFormatter()
9191
:key="dep"
9292
class="flex items-center justify-between py-1 text-sm gap-2"
9393
>
94-
<LinkBase :to="packageRoute(dep)" dir="ltr">
94+
<LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
9595
{{ dep }}
9696
</LinkBase>
9797
<span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -125,7 +125,7 @@ const numberFormatter = useNumberFormatter()
125125
</LinkBase>
126126
<LinkBase
127127
:to="packageRoute(dep, version)"
128-
class="truncate"
128+
class="block truncate"
129129
:class="getVersionClass(outdatedDeps[dep])"
130130
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
131131
>
@@ -175,7 +175,7 @@ const numberFormatter = useNumberFormatter()
175175
class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
176176
>
177177
<div class="flex items-center gap-1 min-w-0 flex-1">
178-
<LinkBase :to="packageRoute(peer.name)" class="truncate" dir="ltr">
178+
<LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
179179
{{ peer.name }}
180180
</LinkBase>
181181
<TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -184,7 +184,7 @@ const numberFormatter = useNumberFormatter()
184184
</div>
185185
<LinkBase
186186
:to="packageRoute(peer.name, peer.version)"
187-
class="truncate"
187+
class="block truncate max-w-[40%]"
188188
:title="peer.version"
189189
dir="ltr"
190190
>
@@ -236,10 +236,15 @@ const numberFormatter = useNumberFormatter()
236236
:key="dep"
237237
class="flex items-center justify-between py-1 text-sm gap-2"
238238
>
239-
<LinkBase :to="packageRoute(dep)" class="truncate" dir="ltr">
239+
<LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
240240
{{ dep }}
241241
</LinkBase>
242-
<LinkBase :to="packageRoute(dep, version)" class="truncate" :title="version" dir="ltr">
242+
<LinkBase
243+
:to="packageRoute(dep, version)"
244+
class="block truncate"
245+
:title="version"
246+
dir="ltr"
247+
>
243248
{{ version }}
244249
</LinkBase>
245250
</li>

‎app/components/Package/Versions.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
357357
<div>
358358
<LinkBase
359359
:to="versionRoute(row.primaryVersion.version)"
360-
class="text-sm"
360+
class="text-sm block truncate"
361361
:class="
362362
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
363363
"
@@ -369,6 +369,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
369369
: row.primaryVersion.version
370370
"
371371
:classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
372+
icon-size="sm"
372373
>
373374
<span dir="ltr">
374375
{{ row.primaryVersion.version }}
@@ -414,14 +415,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
414415
<div class="flex items-center justify-between gap-2">
415416
<LinkBase
416417
:to="versionRoute(v.version)"
417-
class="text-xs truncate"
418+
class="text-xs block truncate"
418419
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
419420
:title="
420421
v.deprecated
421422
? $t('package.versions.deprecated_title', { version: v.version })
422423
: v.version
423424
"
424425
:classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
426+
icon-size="sm"
425427
>
426428
<span dir="ltr">
427429
{{ v.version }}
@@ -511,7 +513,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
511513
<div class="flex items-center justify-between gap-2">
512514
<LinkBase
513515
:to="versionRoute(row.primaryVersion.version)"
514-
class="text-xs truncate"
516+
class="text-xs block truncate"
515517
:class="
516518
row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
517519
"
@@ -523,6 +525,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
523525
: row.primaryVersion.version
524526
"
525527
:classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
528+
icon-size="sm"
526529
>
527530
<span dir="ltr">
528531
{{ row.primaryVersion.version }}
@@ -583,7 +586,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
583586
<LinkBase
584587
v-if="group.versions[0]?.version"
585588
:to="versionRoute(group.versions[0]?.version)"
586-
class="text-xs truncate"
589+
class="text-xs block truncate"
587590
:class="
588591
group.versions[0]?.deprecated
589592
? 'text-red-400 hover:text-red-300'
@@ -599,6 +602,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
599602
:classicon="
600603
group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
601604
"
605+
icon-size="sm"
602606
>
603607
<span dir="ltr">
604608
{{ group.versions[0]?.version }}
@@ -644,7 +648,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
644648
<LinkBase
645649
v-if="group.versions[0]?.version"
646650
:to="versionRoute(group.versions[0]?.version)"
647-
class="text-xs truncate"
651+
class="text-xs block truncate"
648652
:class="
649653
group.versions[0]?.deprecated
650654
? 'text-red-400 hover:text-red-300'
@@ -660,6 +664,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
660664
:classicon="
661665
group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
662666
"
667+
icon-size="sm"
663668
>
664669
<span dir="ltr">
665670
{{ group.versions[0]?.version }}
@@ -703,7 +708,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
703708
<div class="flex items-center justify-between gap-2">
704709
<LinkBase
705710
:to="versionRoute(v.version)"
706-
class="text-xs truncate"
711+
class="text-xs block truncate"
707712
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
708713
:title="
709714
v.deprecated

0 commit comments

Comments
 (0)