refactor: use modal component for ChartModal

Author: nulfrost

app/components/ChartModal.vue

@@ -1,66 +1,14 @@
-<script setup lang="ts">
-const open = defineModel<boolean>('open', { default: false })
-
-function close() {
-  open.value = false
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    close()
-  }
-}
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      leave-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="open"
-        class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
-        @keydown="handleKeydown"
-      >
-        <!-- Backdrop -->
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 cursor-default"
-          :aria-label="$t('common.close_modal')"
-          @click="open = false"
-        />
-
-        <div
-          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"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="chart-modal-title"
-        >
-          <div class="p-4 sm:p-6">
-            <div class="flex items-center justify-between mb-4 sm:mb-6">
-              <h2 id="chart-modal-title" class="font-mono text-lg font-medium">
-                <slot name="title" />
-              </h2>
-              <button
-                type="button"
-                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"
-                :aria-label="$t('common.close')"
-                @click="open = false"
-              >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
-              </button>
-            </div>
-            <div class="font-mono text-sm">
-              <slot />
-            </div>
-          </div>
-
-          <slot name="after" v-bind="{ close }" />
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  <Modal
+    :modalTitle="$t('package.downloads.modal_title')"
+    id="chart-modal"
+    class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90-vh] sm:max-w-3xl"
+  >
+    <div class="font-mono text-sm">
+      <slot />
+    </div>
+    <slot name="after" />
+  </Modal>
 </template>

app/components/Modal.client.vue

@@ -33,7 +33,7 @@ function handleModalClose() {
         </button>
       </div>
       <!-- Modal body content -->
-      <slot></slot>
+      <slot />
     </dialog>
   </Teleport>
 </template>

app/components/PackageWeeklyDownloadStats.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { VueUiSparkline } from 'vue-data-ui/vue-ui-sparkline'
 import { useCssVariables } from '../composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '../utils/colors'
@@ -8,7 +8,12 @@ const { packageName } = defineProps<{
   packageName: string
 }>()
 
-const showModal = shallowRef(false)
+function showChartModal() {
+  const chartModal = document.querySelector<HTMLDialogElement>('#chart-modal')
+  if (chartModal) {
+    chartModal.showModal()
+  }
+}
 
 const { data: packument } = usePackage(() => packageName)
 const createdIso = computed(() => packument.value?.time?.created ?? null)
@@ -195,7 +200,7 @@ const config = computed(() => {
       <template #actions>
         <button
           type="button"
-          @click="showModal = true"
+          @click="showChartModal"
           class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
@@ -242,28 +247,13 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <ChartModal v-model:open="showModal">
-    <template #title>{{ $t('package.downloads.modal_title') }}</template>
-
+  <ChartModal>
     <PackageDownloadAnalytics
       :weeklyDownloads="weeklyDownloads"
       :inModal="true"
       :packageName="packageName"
       :createdIso="createdIso"
     />
-
-    <template #after="{ close }">
-      <div class="sm:hidden flex justify-center">
-        <button
-          type="button"
-          @click="close"
-          class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
-          :aria-label="$t('common.close')"
-        >
-          <span class="w-5 h-5 i-carbon:close" aria-hidden="true" />
-        </button>
-      </div>
-    </template>
   </ChartModal>
 </template>