forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: remove `<ClientOnly>` from pm tabs - solves flicker
+32
-56
+32
-56
app/pages/[...package].vue
+32
-56
app/pages/[...package].vue
···
820
820
role="tablist"
821
821
aria-label="Package manager"
822
822
>
823
-
<ClientOnly>
824
-
<button
825
-
v-for="pm in packageManagers"
826
-
:key="pm.id"
827
-
role="tab"
828
-
:aria-selected="selectedPM === pm.id"
829
-
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
830
-
:class="
831
-
selectedPM === pm.id
832
-
? 'bg-bg shadow text-fg border-border'
833
-
: 'text-fg-subtle hover:text-fg border-transparent'
834
-
"
835
-
@click="selectedPM = pm.id"
836
-
>
837
-
<span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
838
-
{{ pm.label }}
839
-
</button>
840
-
<template #fallback>
841
-
<span
842
-
v-for="pm in packageManagers"
843
-
:key="pm.id"
844
-
class="px-2 py-1 font-mono text-xs rounded"
845
-
:class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
846
-
>
847
-
{{ pm.label }}
848
-
</span>
849
-
</template>
850
-
</ClientOnly>
823
+
<button
824
+
v-for="pm in packageManagers"
825
+
:key="pm.id"
826
+
role="tab"
827
+
:aria-selected="selectedPM === pm.id"
828
+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
829
+
:class="
830
+
selectedPM === pm.id
831
+
? 'bg-bg shadow text-fg border-border'
832
+
: 'text-fg-subtle hover:text-fg border-transparent'
833
+
"
834
+
@click="selectedPM = pm.id"
835
+
>
836
+
<span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
837
+
{{ pm.label }}
838
+
</button>
851
839
</div>
852
840
</div>
853
841
<div class="relative group">
···
914
902
role="tablist"
915
903
:aria-label="$t('package.install.pm_label')"
916
904
>
917
-
<ClientOnly>
918
-
<button
919
-
v-for="pm in packageManagers"
920
-
:key="pm.id"
921
-
role="tab"
922
-
:aria-selected="selectedPM === pm.id"
923
-
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
924
-
:class="
925
-
selectedPM === pm.id
926
-
? 'bg-bg shadow text-fg border-border'
927
-
: 'text-fg-subtle hover:text-fg border-transparent'
928
-
"
929
-
@click="selectedPM = pm.id"
930
-
>
931
-
<span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
932
-
{{ pm.label }}
933
-
</button>
934
-
<template #fallback>
935
-
<span
936
-
v-for="pm in packageManagers"
937
-
:key="pm.id"
938
-
class="px-2 py-1 font-mono text-xs rounded"
939
-
:class="pm.id === 'npm' ? 'bg-bg-elevated text-fg' : 'text-fg-subtle'"
940
-
>
941
-
{{ pm.label }}
942
-
</span>
943
-
</template>
944
-
</ClientOnly>
905
+
<button
906
+
v-for="pm in packageManagers"
907
+
:key="pm.id"
908
+
role="tab"
909
+
:aria-selected="selectedPM === pm.id"
910
+
class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
911
+
:class="
912
+
selectedPM === pm.id
913
+
? 'bg-bg shadow text-fg border-border'
914
+
: 'text-fg-subtle hover:text-fg border-transparent'
915
+
"
916
+
@click="selectedPM = pm.id"
917
+
>
918
+
<span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
919
+
{{ pm.label }}
920
+
</button>
945
921
</div>
946
922
</div>
947
923
<div class="relative group">