Skip to content

Commit 0925063

Browse files
danielroedanielroe
authored
Merge branch 'main' into fix/columns-dropdown
2 parents 5b2d4c8 + 4b26a00 commit 0925063

9 files changed

Lines changed: 110 additions & 59 deletions

File tree

‎.github/workflows/autofix.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ jobs:
4242
- name: 🏃 Update component test snapshots
4343
run: pnpm test:nuxt -u
4444

45-
- name: 🖥️ Update browser test snapshots
46-
run: pnpm test:browser --update-snapshots
45+
# TODO: re-enable when we have snapshots in browser tests
46+
# - name: 🖥️ Update browser test snapshots
47+
# run: pnpm test:browser --update-snapshots
4748

4849
- uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

‎app/components/AccentColorPicker.vue‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,37 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
55
</script>
66

77
<template>
8-
<div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
9-
<button
8+
<fieldset class="flex items-center gap-4">
9+
<legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
10+
<label
1011
v-for="color in accentColors"
1112
:key="color.id"
12-
type="button"
13-
role="option"
14-
:aria-selected="selectedAccentColor === color.id"
15-
:aria-label="color.name"
16-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
13+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
1714
:style="{ backgroundColor: color.value }"
18-
@click="setAccentColor(color.id)"
19-
/>
20-
<button
21-
type="button"
22-
:aria-label="$t('settings.clear_accent')"
23-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
24-
@click="setAccentColor(null)"
2515
>
16+
<input
17+
type="radio"
18+
name="accent-color"
19+
class="sr-only"
20+
:value="color.id"
21+
:checked="selectedAccentColor === color.id"
22+
:aria-label="color.name"
23+
@change="setAccentColor(color.id)"
24+
/>
25+
</label>
26+
<label
27+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
28+
>
29+
<input
30+
type="radio"
31+
name="accent-color"
32+
class="sr-only"
33+
value=""
34+
:checked="selectedAccentColor === null"
35+
:aria-label="$t('settings.clear_accent')"
36+
@change="setAccentColor(null)"
37+
/>
2638
<span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
27-
</button>
28-
</div>
39+
</label>
40+
</fieldset>
2941
</template>

‎app/components/AppFooter.vue‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,50 @@
22
<footer class="border-t border-border mt-auto">
33
<div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
44
<div
5-
class="flex flex-col sm:flex-row items-center sm:items-baseline justify-start gap-2 sm:gap-4"
5+
class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
66
>
77
<p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
8-
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
9-
<div class="flex items-center justify-start gap-3 sm:gap-6">
8+
<div class="flex items-center gap-3 sm:gap-6">
109
<NuxtLink
1110
to="/about"
1211
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
1312
>
14-
<span>{{ $t('footer.about') }}</span>
13+
{{ $t('footer.about') }}
1514
</NuxtLink>
1615
<a
1716
href="https://docs.npmx.dev"
1817
target="_blank"
1918
rel="noopener noreferrer"
20-
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
19+
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
2120
>
22-
<span>{{ $t('footer.docs') }}</span>
21+
{{ $t('footer.docs') }}
2322
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
2423
</a>
2524
<a
2625
href="https://repo.npmx.dev"
2726
target="_blank"
2827
rel="noopener noreferrer"
29-
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
28+
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
3029
>
31-
<span>{{ $t('footer.source') }}</span>
30+
{{ $t('footer.source') }}
3231
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
3332
</a>
3433
<a
3534
href="https://social.npmx.dev"
3635
target="_blank"
3736
rel="noopener noreferrer"
38-
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
37+
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
3938
>
40-
<span>{{ $t('footer.social') }}</span>
39+
{{ $t('footer.social') }}
4140
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
4241
</a>
4342
<a
4443
href="https://chat.npmx.dev"
4544
target="_blank"
4645
rel="noopener noreferrer"
47-
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
46+
class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
4847
>
49-
<span>{{ $t('footer.chat') }}</span>
48+
{{ $t('footer.chat') }}
5049
<span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
5150
</a>
5251
</div>

‎app/components/PackageDependencies.vue‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const sortedOptionalDependencies = computed(() => {
8686
>
8787
{{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
8888
<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"
9090
aria-hidden="true"
9191
/>
9292
</a>
@@ -95,7 +95,7 @@ const sortedOptionalDependencies = computed(() => {
9595
<li
9696
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
9797
: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"
9999
>
100100
<NuxtLink
101101
:to="{ name: 'package', params: { package: dep.split('/') } }"
@@ -111,8 +111,9 @@ const sortedOptionalDependencies = computed(() => {
111111
:title="getOutdatedTooltip(outdatedDeps[dep])"
112112
aria-hidden="true"
113113
>
114-
<span class="i-carbon-warning-alt w-3 h-3 block" />
114+
<span class="i-carbon:warning-alt w-3 h-3 block" />
115115
</span>
116+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
116117
<NuxtLink
117118
v-if="getVulnerableDepInfo(dep)"
118119
:to="{
@@ -123,7 +124,7 @@ const sortedOptionalDependencies = computed(() => {
123124
:class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
124125
:title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
125126
>
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" />
127128
<span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
128129
</NuxtLink>
129130
<NuxtLink
@@ -140,7 +141,7 @@ const sortedOptionalDependencies = computed(() => {
140141
</NuxtLink>
141142
<NuxtLink
142143
: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"
144145
:class="getVersionClass(outdatedDeps[dep])"
145146
:title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
146147
>
@@ -182,7 +183,7 @@ const sortedOptionalDependencies = computed(() => {
182183
>
183184
{{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
184185
<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"
186187
aria-hidden="true"
187188
/>
188189
</a>
@@ -194,7 +195,7 @@ const sortedOptionalDependencies = computed(() => {
194195
<li
195196
v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
196197
: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"
198199
>
199200
<div class="flex items-center gap-2 min-w-0">
200201
<NuxtLink
@@ -211,12 +212,13 @@ const sortedOptionalDependencies = computed(() => {
211212
{{ $t('package.dependencies.optional') }}
212213
</span>
213214
</div>
215+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
214216
<NuxtLink
215217
:to="{
216218
name: 'package',
217219
params: { package: [...peer.name.split('/'), 'v', peer.version] },
218220
}"
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"
220222
:title="peer.version"
221223
>
222224
{{ peer.version }}
@@ -252,7 +254,7 @@ const sortedOptionalDependencies = computed(() => {
252254
$t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
253255
}}
254256
<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"
256258
aria-hidden="true"
257259
/>
258260
</a>
@@ -267,17 +269,18 @@ const sortedOptionalDependencies = computed(() => {
267269
optionalDepsExpanded ? undefined : 10,
268270
)"
269271
: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"
271273
>
272274
<NuxtLink
273275
:to="{ name: 'package', params: { package: dep.split('/') } }"
274276
class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
275277
>
276278
{{ dep }}
277279
</NuxtLink>
280+
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
278281
<NuxtLink
279282
: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"
281284
:title="version"
282285
>
283286
{{ version }}

‎app/components/PackageDownloadAnalytics.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -619,7 +619,7 @@ const config = computed(() => {
619619
<div
620620
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
621621
>
622-
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
622+
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
623623
<input
624624
id="startDate"
625625
v-model="startDate"
@@ -639,7 +639,7 @@ const config = computed(() => {
639639
<div
640640
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
641641
>
642-
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
642+
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
643643
<input
644644
id="endDate"
645645
v-model="endDate"
@@ -666,80 +666,80 @@ const config = computed(() => {
666666
}
667667
"
668668
>
669-
<span class="i-carbon-reset w-5 h-5 inline-block" aria-hidden="true" />
669+
<span class="i-carbon:reset w-5 h-5 inline-block" aria-hidden="true" />
670670
</button>
671671
</div>
672672
</div>
673673

674674
<ClientOnly v-if="inModal && chartData.dataset">
675675
<VueUiXy :dataset="chartData.dataset" :config="config">
676676
<template #menuIcon="{ isOpen }">
677-
<span v-if="isOpen" class="i-carbon-close w-6 h-6" aria-hidden="true" />
678-
<span v-else class="i-carbon-overflow-menu-vertical w-6 h-6" aria-hidden="true" />
677+
<span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
678+
<span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
679679
</template>
680680
<template #optionCsv>
681681
<span
682-
class="i-carbon-csv w-6 h-6 text-fg-subtle"
682+
class="i-carbon:csv w-6 h-6 text-fg-subtle"
683683
style="pointer-events: none"
684684
aria-hidden="true"
685685
/>
686686
</template>
687687
<template #optionImg>
688688
<span
689-
class="i-carbon-png w-6 h-6 text-fg-subtle"
689+
class="i-carbon:png w-6 h-6 text-fg-subtle"
690690
style="pointer-events: none"
691691
aria-hidden="true"
692692
/>
693693
</template>
694694
<template #optionSvg>
695695
<span
696-
class="i-carbon-svg w-6 h-6 text-fg-subtle"
696+
class="i-carbon:svg w-6 h-6 text-fg-subtle"
697697
style="pointer-events: none"
698698
aria-hidden="true"
699699
/>
700700
</template>
701701

702702
<template #annotator-action-close>
703703
<span
704-
class="i-carbon-close w-6 h-6 text-fg-subtle"
704+
class="i-carbon:close w-6 h-6 text-fg-subtle"
705705
style="pointer-events: none"
706706
aria-hidden="true"
707707
/>
708708
</template>
709709
<template #annotator-action-color="{ color }">
710-
<span class="i-carbon-color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
710+
<span class="i-carbon:color-palette w-6 h-6" :style="{ color }" aria-hidden="true" />
711711
</template>
712712
<template #annotator-action-undo>
713713
<span
714-
class="i-carbon-undo w-6 h-6 text-fg-subtle"
714+
class="i-carbon:undo w-6 h-6 text-fg-subtle"
715715
style="pointer-events: none"
716716
aria-hidden="true"
717717
/>
718718
</template>
719719
<template #annotator-action-redo>
720720
<span
721-
class="i-carbon-redo w-6 h-6 text-fg-subtle"
721+
class="i-carbon:redo w-6 h-6 text-fg-subtle"
722722
style="pointer-events: none"
723723
aria-hidden="true"
724724
/>
725725
</template>
726726
<template #annotator-action-delete>
727727
<span
728-
class="i-carbon-trash-can w-6 h-6 text-fg-subtle"
728+
class="i-carbon:trash-can w-6 h-6 text-fg-subtle"
729729
style="pointer-events: none"
730730
aria-hidden="true"
731731
/>
732732
</template>
733733
<template #optionAnnotator="{ isAnnotator }">
734734
<span
735735
v-if="isAnnotator"
736-
class="i-carbon-edit-off w-6 h-6 text-fg-subtle"
736+
class="i-carbon:edit-off w-6 h-6 text-fg-subtle"
737737
style="pointer-events: none"
738738
aria-hidden="true"
739739
/>
740740
<span
741741
v-else
742-
class="i-carbon-edit w-6 h-6 text-fg-subtle"
742+
class="i-carbon:edit w-6 h-6 text-fg-subtle"
743743
style="pointer-events: none"
744744
aria-hidden="true"
745745
/>
@@ -762,7 +762,7 @@ const config = computed(() => {
762762
v-if="pending"
763763
role="status"
764764
aria-live="polite"
765-
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
765+
class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-fg-subtle font-mono bg-bg/70 backdrop-blur px-3 py-2 rounded-md border border-border"
766766
>
767767
{{ $t('package.downloads.loading') }}
768768
</div>

0 commit comments

Comments
 (0)