forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: switch dependency icons to be tappable tooltips (#1471)
authored by
James Garbutt
and committed by
GitHub
1e45cdca
49a84739
+16
-6
+16
-6
app/components/Package/Dependencies.vue
+16
-6
app/components/Package/Dependencies.vue
···
120
120
<span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
121
121
<TooltipApp
122
122
v-if="outdatedDeps[dep]"
123
-
class="shrink-0 p-2 -m-2"
123
+
class="shrink-0"
124
124
:class="getVersionClass(outdatedDeps[dep])"
125
-
aria-hidden="true"
126
125
:text="getOutdatedTooltip(outdatedDeps[dep], $t)"
127
126
>
128
-
<span class="i-lucide:circle-alert w-3 h-3" />
127
+
<button
128
+
type="button"
129
+
class="p-2 -m-2"
130
+
:aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
131
+
>
132
+
<span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
133
+
</button>
129
134
</TooltipApp>
130
135
<TooltipApp
131
136
v-if="replacementDeps[dep]"
132
-
class="shrink-0 p-2 -m-2 text-amber-700 dark:text-amber-500"
133
-
aria-hidden="true"
137
+
class="shrink-0 text-amber-700 dark:text-amber-500"
134
138
:text="$t('package.dependencies.has_replacement')"
135
139
>
136
-
<span class="i-carbon:idea w-3 h-3" />
140
+
<button
141
+
type="button"
142
+
class="p-2 -m-2"
143
+
:aria-label="$t('package.dependencies.has_replacement')"
144
+
>
145
+
<span class="i-lucide:lightbulb w-3 h-3" aria-hidden="true" />
146
+
</button>
137
147
</TooltipApp>
138
148
<LinkBase
139
149
v-if="getVulnerableDepInfo(dep)"