forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: pass name/version separately in comparison grid (#1098)
authored by
Daniel Roe
and committed by
GitHub
1419fc73
52cd1da6
+18
-21
+6
-10
app/components/Compare/ComparisonGrid.vue
+6
-10
app/components/Compare/ComparisonGrid.vue
···
2
2
import type { ModuleReplacement } from 'module-replacements'
3
3
4
4
export interface ComparisonGridColumn {
5
-
/** Display text (e.g. "lodash@4.17.21") */
6
-
header: string
5
+
name: string
6
+
version?: string
7
7
/** Module replacement data for this package (if available) */
8
8
replacement?: ModuleReplacement | null
9
9
}
···
38
38
<div class="comparison-label" />
39
39
40
40
<!-- Package columns -->
41
-
<div
42
-
v-for="col in columns"
43
-
:key="col.header"
44
-
class="comparison-cell comparison-cell-header"
45
-
>
41
+
<div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
46
42
<span class="inline-flex items-center gap-1.5 truncate">
47
43
<NuxtLink
48
-
:to="packageRoute(col.header)"
44
+
:to="packageRoute(col.name, col.version)"
49
45
class="link-subtle font-mono text-sm font-medium text-fg truncate"
50
-
:title="col.header"
46
+
:title="col.version ? `${col.name}@${col.version}` : col.name"
51
47
>
52
-
{{ col.header }}
48
+
{{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
53
49
</NuxtLink>
54
50
<TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
55
51
<span
+5
-7
app/pages/compare.vue
+5
-7
app/pages/compare.vue
···
47
47
.filter(({ pkg }) => pkg !== NO_DEPENDENCY_ID)
48
48
.map(({ pkg, originalIndex }) => {
49
49
const data = packagesData.value?.[originalIndex]
50
-
const header = data
51
-
? data.package.version
52
-
? `${data.package.name}@${data.package.version}`
53
-
: data.package.name
54
-
: pkg
55
50
return {
56
-
header,
51
+
name: data?.package.name || pkg,
52
+
version: data?.package.version,
57
53
replacement: replacements.value.get(pkg) ?? null,
58
54
}
59
55
}),
···
78
74
const canCompare = computed(() => packages.value.length >= 2)
79
75
80
76
// Extract headers from columns for facet rows
81
-
const gridHeaders = computed(() => gridColumns.value.map(col => col.header))
77
+
const gridHeaders = computed(() =>
78
+
gridColumns.value.map(col => (col.version ? `${col.name}@${col.version}` : col.name)),
79
+
)
82
80
83
81
useSeoMeta({
84
82
title: () =>
+3
-3
test/nuxt/a11y.spec.ts
+3
-3
test/nuxt/a11y.spec.ts
···
1613
1613
it('should have no accessibility violations with 2 columns', async () => {
1614
1614
const component = await mountSuspended(CompareComparisonGrid, {
1615
1615
props: {
1616
-
columns: [{ header: 'vue' }, { header: 'react' }],
1616
+
columns: [{ name: 'vue' }, { name: 'react' }],
1617
1617
},
1618
1618
slots: {
1619
1619
default: '<div>Grid content</div>',
···
1626
1626
it('should have no accessibility violations with 3 columns', async () => {
1627
1627
const component = await mountSuspended(CompareComparisonGrid, {
1628
1628
props: {
1629
-
columns: [{ header: 'vue' }, { header: 'react' }, { header: 'angular' }],
1629
+
columns: [{ name: 'vue' }, { name: 'react' }, { name: 'angular' }],
1630
1630
},
1631
1631
slots: {
1632
1632
default: '<div>Grid content</div>',
···
1639
1639
it('should have no accessibility violations with no-dependency column', async () => {
1640
1640
const component = await mountSuspended(CompareComparisonGrid, {
1641
1641
props: {
1642
-
columns: [{ header: 'vue' }, { header: 'react' }],
1642
+
columns: [{ name: 'vue' }, { name: 'react' }],
1643
1643
showNoDependency: true,
1644
1644
},
1645
1645
slots: {
+4
-1
test/nuxt/components/compare/ComparisonGrid.spec.ts
+4
-1
test/nuxt/components/compare/ComparisonGrid.spec.ts
···
3
3
import ComparisonGrid from '~/components/Compare/ComparisonGrid.vue'
4
4
5
5
function cols(...headers: string[]) {
6
-
return headers.map(header => ({ header }))
6
+
return headers.map(header => {
7
+
const [name, version] = header.split('@')
8
+
return { name: name!, version }
9
+
})
7
10
}
8
11
9
12
describe('ComparisonGrid', () => {