forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix(ui): implement clickable package table rows (#1277)
+20
-4
+20
-4
app/components/Package/TableRow.vue
+20
-4
app/components/Package/TableRow.vue
···
44
44
45
45
<template>
46
46
<tr
47
-
class="group border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
47
+
class="group relative border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
48
48
tabindex="0"
49
49
:data-result-index="index"
50
50
>
···
52
52
<td class="py-2 px-3">
53
53
<NuxtLink
54
54
:to="packageUrl"
55
-
class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
55
+
class="row-link font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
56
56
dir="ltr"
57
57
>
58
58
{{ pkg.name }}
···
111
111
name: '~username',
112
112
params: { username: maintainer.username || maintainer.name || '' },
113
113
}"
114
-
class="hover:text-accent-fallback transition-colors duration-200"
114
+
class="relative z-10 hover:text-accent-fallback transition-colors duration-200"
115
115
@click.stop
116
116
>{{ maintainer.username || maintainer.name || maintainer.email }}</NuxtLink
117
117
><span v-if="idx < Math.min(pkg.maintainers.length, 3) - 1">, </span>
···
127
127
<td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end">
128
128
<div
129
129
v-if="pkg.keywords?.length"
130
-
class="flex flex-wrap gap-1 justify-end"
130
+
class="relative z-10 flex flex-wrap gap-1 justify-end"
131
131
:aria-label="$t('package.card.keywords')"
132
132
>
133
133
<ButtonBase
···
198
198
</td>
199
199
</tr>
200
200
</template>
201
+
202
+
<style scoped>
203
+
.row-link {
204
+
&::after {
205
+
content: '';
206
+
position: absolute;
207
+
inset: 0;
208
+
cursor: pointer;
209
+
}
210
+
211
+
&:focus-visible::after {
212
+
outline: 2px solid var(--color-fg);
213
+
outline-offset: -2px;
214
+
}
215
+
}
216
+
</style>