Skip to content

Commit 2825211

Browse files
danielroedanielroe
committed
fix: some regressions I caused 🤦
1 parent cdfbea1 commit 2825211

2 files changed

Lines changed: 127 additions & 144 deletions

File tree

‎app/components/ChartModal.vue‎

Lines changed: 42 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,60 @@
11
<script setup lang="ts">
22
const open = defineModel<boolean>('open', { default: false })
33
4-
const dialogRef = useTemplateRef('dialogRef')
5-
6-
watch(open, isOpen => {
7-
if (isOpen) {
8-
dialogRef.value?.showModal()
9-
} else {
10-
dialogRef.value?.close()
11-
}
12-
})
13-
14-
function handleDialogClose() {
15-
open.value = false
16-
}
17-
18-
function handleBackdropClick(event: MouseEvent) {
19-
// Close when clicking the backdrop (the dialog element itself, not its contents)
20-
if (event.target === dialogRef.value) {
4+
function handleKeydown(event: KeyboardEvent) {
5+
if (event.key === 'Escape') {
216
open.value = false
227
}
238
}
249
</script>
2510

2611
<template>
2712
<Teleport to="body">
28-
<dialog
29-
ref="dialogRef"
30-
class="bg-transparent backdrop:bg-black/60 max-w-3xl w-full p-4 m-auto"
31-
aria-labelledby="chart-modal-title"
32-
@close="handleDialogClose"
33-
@click="handleBackdropClick"
13+
<Transition
14+
enter-active-class="transition-opacity duration-200"
15+
leave-active-class="transition-opacity duration-200"
16+
enter-from-class="opacity-0"
17+
leave-to-class="opacity-0"
3418
>
3519
<div
36-
class="bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain"
20+
v-if="open"
21+
class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
22+
@keydown="handleKeydown"
3723
>
38-
<div class="p-6">
39-
<div class="flex items-center justify-between mb-6">
40-
<h2 id="chart-modal-title" class="font-mono text-lg font-medium">
41-
<slot name="title" />
42-
</h2>
43-
<button
44-
type="button"
45-
class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
46-
aria-label="Close"
47-
@click="open = false"
48-
>
49-
<span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
50-
</button>
51-
</div>
52-
<div class="flex items-center font-mono text-sm">
53-
<slot />
24+
<!-- Backdrop -->
25+
<button
26+
type="button"
27+
class="absolute inset-0 bg-black/60 cursor-default"
28+
aria-label="Close modal"
29+
@click="open = false"
30+
/>
31+
32+
<div
33+
class="relative w-full h-full sm:h-auto bg-bg sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] overflow-y-auto overscroll-contain sm:max-w-3xl"
34+
role="dialog"
35+
aria-modal="true"
36+
aria-labelledby="chart-modal-title"
37+
>
38+
<div class="p-4 sm:p-6">
39+
<div class="flex items-center justify-between mb-4 sm:mb-6">
40+
<h2 id="chart-modal-title" class="font-mono text-lg font-medium">
41+
<slot name="title" />
42+
</h2>
43+
<button
44+
type="button"
45+
class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
46+
aria-label="Close"
47+
@click="open = false"
48+
>
49+
<span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
50+
</button>
51+
</div>
52+
<div class="font-mono text-sm">
53+
<slot />
54+
</div>
5455
</div>
5556
</div>
5657
</div>
57-
</dialog>
58+
</Transition>
5859
</Teleport>
5960
</template>
60-
61-
<style scoped>
62-
dialog::backdrop {
63-
background: rgba(0, 0, 0, 0.6);
64-
}
65-
66-
@media (prefers-reduced-motion: no-preference) {
67-
dialog[open] {
68-
animation: fade-in 200ms ease-out;
69-
}
70-
}
71-
72-
@keyframes fade-in {
73-
from {
74-
opacity: 0;
75-
}
76-
to {
77-
opacity: 1;
78-
}
79-
}
80-
</style>

‎app/components/PackageDownloadAnalytics.vue‎

Lines changed: 85 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ function initDateRangeFallbackClient() {
195195
}
196196
197197
watch(
198-
() => weeklyDownloads,
198+
() => weeklyDownloads?.length,
199199
() => {
200200
initDateRangeFromWeekly()
201201
initDateRangeFallbackClient()
@@ -456,104 +456,99 @@ const config = computed(() => ({
456456

457457
<template>
458458
<div class="w-full relative">
459-
<div class="w-full mb-2 flex flex-col gap-2">
460-
<div class="w-full grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2">
461-
<div class="flex gap-2">
462-
<!-- Granularity -->
459+
<div class="w-full mb-4 flex flex-col gap-3">
460+
<!-- Mobile: stack vertically, Desktop: horizontal -->
461+
<div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
462+
<!-- Granularity -->
463+
<div class="flex flex-col gap-1 sm:shrink-0">
464+
<label
465+
for="granularity"
466+
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
467+
>
468+
Granularity
469+
</label>
470+
471+
<div
472+
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
473+
>
474+
<select
475+
id="granularity"
476+
v-model="selectedGranularity"
477+
class="w-full bg-transparent font-mono text-sm text-fg outline-none"
478+
>
479+
<option value="daily">Daily</option>
480+
<option value="weekly">Weekly</option>
481+
<option value="monthly">Monthly</option>
482+
<option value="yearly">Yearly</option>
483+
</select>
484+
</div>
485+
</div>
486+
487+
<!-- Date range inputs -->
488+
<div class="grid grid-cols-2 gap-2 flex-1">
463489
<div class="flex flex-col gap-1">
464490
<label
465-
for="granularity"
491+
for="startDate"
466492
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
467493
>
468-
Granularity
494+
Start
469495
</label>
470-
471496
<div
472-
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-fg/50)"
497+
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-fg/50)"
473498
>
474-
<select
475-
id="granularity"
476-
v-model="selectedGranularity"
477-
class="w-full bg-transparent font-mono text-sm text-fg outline-none"
478-
>
479-
<option value="daily">Daily</option>
480-
<option value="weekly">Weekly</option>
481-
<option value="monthly">Monthly</option>
482-
<option value="yearly">Yearly</option>
483-
</select>
499+
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
500+
<input
501+
id="startDate"
502+
v-model="startDate"
503+
type="date"
504+
class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
505+
/>
484506
</div>
485507
</div>
486508

487-
<!-- Date range inputs -->
488-
<div class="grid grid-cols-2 gap-2">
489-
<div class="flex flex-col gap-1">
490-
<label
491-
for="startDate"
492-
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
493-
>
494-
Start
495-
</label>
496-
<div
497-
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-fg/50)"
498-
>
499-
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle" aria-hidden="true" />
500-
<input
501-
id="startDate"
502-
v-model="startDate"
503-
type="date"
504-
class="w-full bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
505-
/>
506-
</div>
507-
</div>
508-
509-
<div class="flex flex-col gap-1">
510-
<label
511-
for="endDate"
512-
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
513-
>
514-
End
515-
</label>
516-
<div
517-
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-fg/50)"
518-
>
519-
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle" aria-hidden="true" />
520-
<input
521-
id="endDate"
522-
v-model="endDate"
523-
type="date"
524-
class="w-full bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
525-
/>
526-
</div>
527-
</div>
528-
</div>
529-
<!-- Reset -->
530509
<div class="flex flex-col gap-1">
531-
<!-- spacer label to align with others -->
532-
<div class="font-mono tracking-wide uppercase invisible">Reset</div>
533-
534-
<button
535-
v-if="showResetButton"
536-
type="button"
537-
aria-label="Reset date range"
538-
class="flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
539-
@click="
540-
() => {
541-
hasUserEditedDates = false
542-
startDate = ''
543-
endDate = ''
544-
initDateRangeFromWeekly()
545-
initDateRangeFallbackClient()
546-
}
547-
"
510+
<label
511+
for="endDate"
512+
class="text-[10px] font-mono text-fg-subtle tracking-wide uppercase"
548513
>
549-
<span class="i-carbon-reset w-5 h-5 inline-block" aria-hidden="true" />
550-
</button>
514+
End
515+
</label>
516+
<div
517+
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-fg/50)"
518+
>
519+
<span class="i-carbon-calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
520+
<input
521+
id="endDate"
522+
v-model="endDate"
523+
type="date"
524+
class="w-full min-w-0 bg-transparent font-mono text-sm text-fg outline-none [color-scheme:dark]"
525+
/>
526+
</div>
551527
</div>
552528
</div>
529+
530+
<!-- Reset button -->
531+
<button
532+
v-if="showResetButton"
533+
type="button"
534+
aria-label="Reset date range"
535+
class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 sm:mb-0"
536+
@click="
537+
() => {
538+
hasUserEditedDates = false
539+
startDate = ''
540+
endDate = ''
541+
initDateRangeFromWeekly()
542+
initDateRangeFallbackClient()
543+
}
544+
"
545+
>
546+
<span class="i-carbon-reset w-5 h-5 inline-block" aria-hidden="true" />
547+
</button>
553548
</div>
554549
</div>
555550

556-
<ClientOnly v-if="inModal">
551+
<ClientOnly v-if="inModal && chartData.dataset">
557552
<VueUiXy :dataset="chartData.dataset" :config="config">
558553
<template #menuIcon="{ isOpen }">
559554
<span v-if="isOpen" class="i-carbon-close w-6 h-6" aria-hidden="true" />
@@ -632,6 +627,14 @@ const config = computed(() => ({
632627
</template>
633628
</ClientOnly>
634629

630+
<!-- Empty state when no chart data -->
631+
<div
632+
v-if="inModal && !chartData.dataset && !pending"
633+
class="min-h-[260px] flex items-center justify-center text-fg-subtle font-mono text-sm"
634+
>
635+
No download data available
636+
</div>
637+
635638
<div
636639
v-if="pending"
637640
role="status"

0 commit comments

Comments
 (0)