Skip to content

Commit 639d784

Browse files
alexdlnalexdln
committed
fix: apply suggestions and fix version-slector
1 parent e7fee8b commit 639d784

7 files changed

Lines changed: 67 additions & 71 deletions

File tree

‎app/components/Package/Header.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ const likeAction = async () => {
320320
</header>
321321
<div
322322
ref="header"
323-
class="w-full bg-bg sticky top-14 z-1 border-b border-border pt-2"
323+
class="w-full bg-bg sticky top-14 z-50 border-b border-border pt-2"
324324
:class="[$style.packageHeader]"
325325
data-testid="package-subheader"
326326
>
@@ -380,6 +380,7 @@ const likeAction = async () => {
380380
:versions="pkg.versions"
381381
:dist-tags="pkg['dist-tags']"
382382
:url-pattern="versionUrlPattern"
383+
position-class="max-md:inset-is-0 md:inset-ie-0"
383384
/>
384385
</div>
385386
</div>

‎app/components/Package/Sidebar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const offset = computed(() => {
2525
})
2626
const packageHeaderHeight = usePackageHeaderHeight()
2727
const stickyStyle = computed(() =>
28-
direction.value === 'up' ? { top: `${60 + packageHeaderHeight.value}px` } : { bottom: `32px` },
28+
direction.value === 'up' ? { top: `${56 + packageHeaderHeight.value}px` } : { bottom: `32px` },
2929
)
3030
3131
const style = computed(() => {

‎app/components/Package/Skeleton.vue‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -439,39 +439,4 @@
439439
.area-sidebar {
440440
grid-area: sidebar;
441441
}
442-
443-
/* Sidebar scrollbar: hidden by default, shown on hover/focus */
444-
@media (min-width: 1024px) {
445-
.sidebar-scroll {
446-
scrollbar-gutter: stable;
447-
scrollbar-width: 8px;
448-
scrollbar-color: transparent transparent;
449-
}
450-
451-
.sidebar-scroll::-webkit-scrollbar {
452-
width: 8px;
453-
height: 8px;
454-
}
455-
456-
.sidebar-scroll::-webkit-scrollbar-track,
457-
.sidebar-scroll::-webkit-scrollbar-thumb {
458-
background: transparent;
459-
}
460-
461-
.sidebar-scroll:hover,
462-
.sidebar-scroll:focus-within {
463-
scrollbar-color: var(--border) transparent;
464-
}
465-
466-
.sidebar-scroll:hover::-webkit-scrollbar-thumb,
467-
.sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
468-
background-color: var(--border);
469-
border-radius: 9999px;
470-
}
471-
472-
.sidebar-scroll:hover::-webkit-scrollbar-track,
473-
.sidebar-scroll:focus-within::-webkit-scrollbar-track {
474-
background: transparent;
475-
}
476-
}
477442
</style>

‎app/components/VersionSelector.vue‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,21 @@ import {
1111
} from '~/utils/versions'
1212
import { fetchAllPackageVersions } from '~/utils/npm/api'
1313
14-
const props = defineProps<{
15-
packageName: string
16-
currentVersion: string
17-
versions: Record<string, unknown>
18-
distTags: Record<string, string>
19-
/** URL pattern for navigation. Use {version} as placeholder. */
20-
urlPattern: string
21-
}>()
14+
const props = withDefaults(
15+
defineProps<{
16+
packageName: string
17+
currentVersion: string
18+
versions: Record<string, unknown>
19+
distTags: Record<string, string>
20+
/** URL pattern for navigation. Use {version} as placeholder. */
21+
urlPattern: string
22+
/** class for the position of the dropdown, default is inset-is-0 */
23+
positionClass?: string | null
24+
}>(),
25+
{
26+
positionClass: 'inset-is-0',
27+
},
28+
)
2229
2330
const isOpen = shallowRef(false)
2431
const dropdownRef = useTemplateRef('dropdownRef')
@@ -507,7 +514,8 @@ watch(
507514
:aria-activedescendant="
508515
focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
509516
"
510-
class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-fg-subtle/10 z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
517+
class="absolute top-full mt-2 min-w-[220px] max-w-[calc(100vw-40px)] bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-fg-subtle/10 z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
518+
:class="positionClass"
511519
@keydown="handleListboxKeydown"
512520
>
513521
<!-- Version groups -->

‎app/components/diff/MobileSidebarDrawer.vue‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<script setup lang="ts">
22
import type { CompareResponse, FileChange } from '#shared/types'
3+
import type { SlimPackument } from '#shared/types'
34
45
const props = defineProps<{
56
compare: CompareResponse
67
groupedDeps: Map<string, CompareResponse['dependencyChanges']>
78
allChanges: FileChange[]
9+
pkg?: Pick<SlimPackument, 'versions' | 'dist-tags'> | null
10+
packageName: string
11+
toVersion: string
12+
toVersionUrlPattern: string
813
}>()
914
1015
const selectedFile = defineModel<FileChange | null>('selectedFile', { default: null })
@@ -53,30 +58,43 @@ watch(open, value => {
5358
v-if="open"
5459
class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 max-w-[85vw] bg-bg-subtle border-ie border-border overflow-y-auto flex flex-col"
5560
>
56-
<div
57-
class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between gap-2"
58-
>
59-
<div class="text-xs font-mono text-fg-muted flex items-center gap-2">
60-
<span class="flex items-center gap-1">
61-
<span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
62-
<span class="text-fg-subtle">/</span>
63-
<span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
64-
<span class="text-fg-subtle">/</span>
65-
<span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
66-
</span>
67-
<span class="text-fg-subtle">•</span>
68-
<span>{{
69-
$t('compare.files_count', { count: props.allChanges.length }, props.allChanges.length)
70-
}}</span>
61+
<div class="sticky top-0 bg-bg-subtle border-b border-border z-50">
62+
<div class="flex items-center justify-between gap-2 py-2 px-4">
63+
<div class="text-xs font-mono text-fg-muted flex items-center gap-2">
64+
<span class="flex items-center gap-1">
65+
<span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
66+
<span class="text-fg-subtle">/</span>
67+
<span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
68+
<span class="text-fg-subtle">/</span>
69+
<span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
70+
</span>
71+
<span class="text-fg-subtle">•</span>
72+
<span>{{
73+
$t('compare.files_count', { count: props.allChanges.length }, props.allChanges.length)
74+
}}</span>
75+
</div>
76+
<button
77+
type="button"
78+
class="text-fg-muted hover:text-fg transition-colors"
79+
:aria-label="$t('compare.close_files_panel')"
80+
@click="open = false"
81+
>
82+
<span class="i-lucide:x w-5 h-5" />
83+
</button>
84+
</div>
85+
<div v-if="pkg?.versions && pkg?.['dist-tags']" class="py-2 border-t border-border px-4">
86+
<p class="text-xs font-medium text-fg mb-1 flex items-center gap-1.5">
87+
<span class="block i-lucide-git-compare-arrows w-3.5 h-3.5" />
88+
{{ $t('compare.version_selector_title') }}
89+
</p>
90+
<VersionSelector
91+
:package-name="packageName"
92+
:current-version="toVersion"
93+
:versions="pkg.versions"
94+
:dist-tags="pkg['dist-tags']"
95+
:url-pattern="toVersionUrlPattern"
96+
/>
7197
</div>
72-
<button
73-
type="button"
74-
class="text-fg-muted hover:text-fg transition-colors"
75-
:aria-label="$t('compare.close_files_panel')"
76-
@click="open = false"
77-
>
78-
<span class="i-lucide:x w-5 h-5" />
79-
</button>
8098
</div>
8199

82100
<DiffSidebarPanel

‎app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,13 +160,12 @@ useSeoMeta({
160160
<aside
161161
class="hidden md:flex w-80 border-ie border-border bg-bg-subtle flex-col shrink-0 min-h-0"
162162
>
163-
<div class="px-3 py-2 border-b border-border">
163+
<div v-if="pkg?.versions && pkg?.['dist-tags']" class="px-3 py-2 border-b border-border">
164164
<p class="text-xs font-medium text-fg mb-1 flex items-center gap-1.5">
165165
<span class="block i-lucide-git-compare-arrows w-3.5 h-3.5" />
166166
{{ $t('compare.version_selector_title') }}
167167
</p>
168168
<VersionSelector
169-
v-if="pkg?.versions && pkg?.['dist-tags']"
170169
:package-name="packageName"
171170
:current-version="toVersion"
172171
:versions="pkg.versions"
@@ -243,6 +242,10 @@ useSeoMeta({
243242
v-model:selected-file="selectedFile"
244243
v-model:file-filter="fileFilter"
245244
v-model:open="mobileDrawerOpen"
245+
:pkg="pkg"
246+
:package-name="packageName"
247+
:to-version="toVersion"
248+
:to-version-url-pattern="toVersionUrlPattern"
246249
/>
247250
</Teleport>
248251
</ClientOnly>

‎app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,7 @@ defineOgImageComponent('Default', {
389389
? 'bg-bg shadow text-fg border-border'
390390
: 'text-fg-subtle hover:text-fg border-transparent'
391391
"
392+
:aria-selected="markdownViewMode === mode.key"
392393
@click="markdownViewMode = mode.key"
393394
>
394395
<span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />

0 commit comments

Comments
 (0)