feat(Button, PackageDownloadButton): Add async download functionality

Author: Adebesin-Cell

app/components/Button/Base.vue

@@ -39,11 +39,11 @@ defineExpose({
       'text-xs px-2 py-2': size === 'small' && variant === 'subtle',
       'border-border': variant !== 'subtle',
       'border-border-subtle': variant === 'subtle',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+      'bg-transparent text-fg hover:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'text-bg bg-fg hover:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'primary',
-      'bg-bg-subtle text-fg-muted hover:enabled:(text-fg border-border-hover) focus-visible:enabled:(text-fg border-border-hover) active:enabled:scale-95':
+      'bg-bg-subtle text-fg-muted hover:enabled:(text-fg border-border-hover) active:enabled:scale-95':
         variant === 'subtle',
     }"
     :type="props.type"

app/components/Package/DownloadButton.vue

@@ -102,16 +102,31 @@ function handleAction(id: string | undefined) {
   close()
 }
 
-function downloadPackage() {
+async function downloadPackage() {
   const tarballUrl = props.version.dist.tarball
   if (!tarballUrl) return
 
-  const link = document.createElement('a')
-  link.href = tarballUrl
-  link.download = `${props.packageName}-${props.version.version}.tgz`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+  try {
+    const response = await fetch(tarballUrl)
+    const blob = await response.blob()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to download package:', error)
+    // Fallback to direct link for non-CORS or other issues, though download attribute may be ignored
+    const link = document.createElement('a')
+    link.href = tarballUrl
+    link.download = `${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
 }
 
 function downloadDependenciesScript() {
@@ -125,18 +140,21 @@ function downloadDependenciesScript() {
   ]
 
   // Add root package
-  const rootTarball = (props.version.dist as any).tarball
+  const rootTarball = props.version.dist.tarball
   if (rootTarball) {
     lines.push(`# ${props.packageName}@${props.version.version}`)
     lines.push(
-      `curl -L ${rootTarball} -o ${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz`,
+      `curl -L "${rootTarball}" -o "${props.packageName.replace(/\//g, '__')}-${props.version.version}.tgz"`,
     )
   }
 
   // Add dependencies
-  props.installSize.dependencies.forEach((dep: any) => {
+  props.installSize.dependencies.forEach(dep => {
+    if (!dep.tarballUrl) return
     lines.push(`# ${dep.name}@${dep.version}`)
-    lines.push(`curl -L ${dep.tarballUrl} -o ${dep.name.replace(/\//g, '__')}-${dep.version}.tgz`)
+    lines.push(
+      `curl -L "${dep.tarballUrl}" -o "${dep.name.replace(/\//g, '__')}-${dep.version}.tgz"`,
+    )
   })
 
   const blob = new Blob([lines.join('\n')], { type: 'text/x-shellscript' })

test/nuxt/a11y.spec.ts

@@ -160,6 +160,7 @@ import {
   PackageListControls,
   PackageListToolbar,
   PackageMaintainers,
+  PackageDownloadButton,
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
@@ -2509,6 +2510,23 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageDownloadButton', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageDownloadButton, {
+        props: {
+          packageName: 'vue',
+          version: {
+            version: '3.5.0',
+            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
+          } as any,
+          installSize: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {