fix: restore rows truncates in package page (#1240) · davidwindham.com/npmx.dev@9a0521c

+12 -5

app/components/Link/Base.vue

··· 12 12 'type'?: never 13 13 'variant'?: 'button-primary' | 'button-secondary' | 'link' 14 14 'size'?: 'small' | 'medium' 15 + 'iconSize'?: 'sm' | 'md' | 'lg' 15 16 16 17 'keyshortcut'?: string 17 18 ··· 51 52 () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'), 52 53 ) 53 54 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 + 54 61 /** size is only applicable for button like links */ 55 62 const isLink = computed(() => props.variant === 'link') 56 63 const isButton = computed(() => props.variant !== 'link') 57 64 const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link') 58 65 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 + ) 59 70 </script> 60 71 61 72 <template> ··· 89 100 :aria-keyshortcuts="keyshortcut" 90 101 :target="isLinkExternal ? '_blank' : undefined" 91 102 > 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" /> 97 104 <slot /> 98 105  99 106 <span

+11 -6

app/components/Package/Dependencies.vue

··· 91 91 :key="dep" 92 92 class="flex items-center justify-between py-1 text-sm gap-2" 93 93 > 94 - <LinkBase :to="packageRoute(dep)" dir="ltr"> 94 + <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr"> 95 95 {{ dep }} 96 96 </LinkBase> 97 97 <span class="flex items-center gap-1 max-w-[40%]" dir="ltr"> ··· 125 125 </LinkBase> 126 126 <LinkBase 127 127 :to="packageRoute(dep, version)" 128 - class="truncate" 128 + class="block truncate" 129 129 :class="getVersionClass(outdatedDeps[dep])" 130 130 :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version" 131 131 > ··· 175 175 class="flex items-center justify-between py-1 text-sm gap-1 min-w-0" 176 176 > 177 177 <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"> 179 179 {{ peer.name }} 180 180 </LinkBase> 181 181 <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')"> ··· 184 184 </div> 185 185 <LinkBase 186 186 :to="packageRoute(peer.name, peer.version)" 187 - class="truncate" 187 + class="block truncate max-w-[40%]" 188 188 :title="peer.version" 189 189 dir="ltr" 190 190 > ··· 236 236 :key="dep" 237 237 class="flex items-center justify-between py-1 text-sm gap-2" 238 238 > 239 - <LinkBase :to="packageRoute(dep)" class="truncate" dir="ltr"> 239 + <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr"> 240 240 {{ dep }} 241 241 </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 + > 243 248 {{ version }} 244 249 </LinkBase> 245 250 </li>

+11 -6

app/components/Package/Versions.vue

··· 357 357 <div> 358 358 <LinkBase 359 359 :to="versionRoute(row.primaryVersion.version)" 360 - class="text-sm" 360 + class="text-sm block truncate" 361 361 :class=" 362 362 row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined 363 363 " ··· 369 369 : row.primaryVersion.version 370 370 " 371 371 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined" 372 + icon-size="sm" 372 373 > 373 374 <span dir="ltr"> 374 375 {{ row.primaryVersion.version }} ··· 414 415 <div class="flex items-center justify-between gap-2"> 415 416 <LinkBase 416 417 :to="versionRoute(v.version)" 417 - class="text-xs truncate" 418 + class="text-xs block truncate" 418 419 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined" 419 420 :title=" 420 421 v.deprecated ··· 422 423 : v.version 423 424 " 424 425 :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined" 426 + icon-size="sm" 425 427 > 426 428 <span dir="ltr"> 427 429 {{ v.version }} ··· 511 513 <div class="flex items-center justify-between gap-2"> 512 514 <LinkBase 513 515 :to="versionRoute(row.primaryVersion.version)" 514 - class="text-xs truncate" 516 + class="text-xs block truncate" 515 517 :class=" 516 518 row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined 517 519 " ··· 523 525 : row.primaryVersion.version 524 526 " 525 527 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined" 528 + icon-size="sm" 526 529 > 527 530 <span dir="ltr"> 528 531 {{ row.primaryVersion.version }} ··· 583 586 <LinkBase 584 587 v-if="group.versions[0]?.version" 585 588 :to="versionRoute(group.versions[0]?.version)" 586 - class="text-xs truncate" 589 + class="text-xs block truncate" 587 590 :class=" 588 591 group.versions[0]?.deprecated 589 592 ? 'text-red-400 hover:text-red-300' ··· 599 602 :classicon=" 600 603 group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined 601 604 " 605 + icon-size="sm" 602 606 > 603 607 <span dir="ltr"> 604 608 {{ group.versions[0]?.version }} ··· 644 648 <LinkBase 645 649 v-if="group.versions[0]?.version" 646 650 :to="versionRoute(group.versions[0]?.version)" 647 - class="text-xs truncate" 651 + class="text-xs block truncate" 648 652 :class=" 649 653 group.versions[0]?.deprecated 650 654 ? 'text-red-400 hover:text-red-300' ··· 660 664 :classicon=" 661 665 group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined 662 666 " 667 + icon-size="sm" 663 668 > 664 669 <span dir="ltr"> 665 670 {{ group.versions[0]?.version }} ··· 703 708 <div class="flex items-center justify-between gap-2"> 704 709 <LinkBase 705 710 :to="versionRoute(v.version)" 706 - class="text-xs truncate" 711 + class="text-xs block truncate" 707 712 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined" 708 713 :title=" 709 714 v.deprecated

Configure Feed

Configure Feed