forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add RTL support to `PackageDependencies` (#337)
authored by
Joaquín Sánchez
and committed by
GitHub
0d83ffc9
e824aa1d
+14
-11
+14
-11
app/components/PackageDependencies.vue
+14
-11
app/components/PackageDependencies.vue
···
86
86
>
87
87
{{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
88
88
<span
89
-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
89
+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
90
90
aria-hidden="true"
91
91
/>
92
92
</a>
···
95
95
<li
96
96
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
97
97
:key="dep"
98
-
class="flex items-center justify-between py-1 text-sm gap-2"
98
+
class="flex items-center justify-start py-1 text-sm gap-2"
99
99
>
100
100
<NuxtLink
101
101
:to="{ name: 'package', params: { package: dep.split('/') } }"
···
111
111
:title="getOutdatedTooltip(outdatedDeps[dep])"
112
112
aria-hidden="true"
113
113
>
114
-
<span class="i-carbon-warning-alt w-3 h-3 block" />
114
+
<span class="i-carbon:warning-alt w-3 h-3 block" />
115
115
</span>
116
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
116
117
<NuxtLink
117
118
v-if="getVulnerableDepInfo(dep)"
118
119
:to="{
···
123
124
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
124
125
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
125
126
>
126
-
<span class="i-carbon-security w-3 h-3 block" aria-hidden="true" />
127
+
<span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
127
128
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
128
129
</NuxtLink>
129
130
<NuxtLink
···
140
141
</NuxtLink>
141
142
<NuxtLink
142
143
:to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
143
-
class="font-mono text-xs text-right truncate"
144
+
class="font-mono text-xs text-end truncate"
144
145
:class="getVersionClass(outdatedDeps[dep])"
145
146
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
146
147
>
···
182
183
>
183
184
{{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
184
185
<span
185
-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
186
+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
186
187
aria-hidden="true"
187
188
/>
188
189
</a>
···
194
195
<li
195
196
v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
196
197
:key="peer.name"
197
-
class="flex items-center justify-between py-1 text-sm gap-2"
198
+
class="flex items-center justify-start py-1 text-sm gap-2"
198
199
>
199
200
<div class="flex items-center gap-2 min-w-0">
200
201
<NuxtLink
···
211
212
{{ $t('package.dependencies.optional') }}
212
213
</span>
213
214
</div>
215
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
214
216
<NuxtLink
215
217
:to="{
216
218
name: 'package',
217
219
params: { package: [...peer.name.split('/'), 'v', peer.version] },
218
220
}"
219
-
class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
221
+
class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
220
222
:title="peer.version"
221
223
>
222
224
{{ peer.version }}
···
252
254
$t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
253
255
}}
254
256
<span
255
-
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
257
+
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
256
258
aria-hidden="true"
257
259
/>
258
260
</a>
···
267
269
optionalDepsExpanded ? undefined : 10,
268
270
)"
269
271
:key="dep"
270
-
class="flex items-center justify-between py-1 text-sm gap-2"
272
+
class="flex items-center justify-start py-1 text-sm gap-2"
271
273
>
272
274
<NuxtLink
273
275
:to="{ name: 'package', params: { package: dep.split('/') } }"
···
275
277
>
276
278
{{ dep }}
277
279
</NuxtLink>
280
+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
278
281
<NuxtLink
279
282
:to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
280
-
class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
283
+
class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
281
284
:title="version"
282
285
>
283
286
{{ version }}