create a useDownload composable

package.json

@@ -35,6 +35,10 @@
     "./testutil": {
       "types": "./dist/runtime/testutil/index.d.ts",
       "import": "./dist/runtime/testutil/index.js"
+    },
+    "./composables": {
+      "types": "./dist/runtime/composables/index.d.ts",
+      "import": "./dist/runtime/composables/index.js"
     }
   },
   "main": "./dist/module.mjs",

src/runtime/components/download-csv.vue

@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { stringify } from 'csv-stringify/browser/esm/sync'
+import { useDownload } from '../composables/useDownload'
 
 interface Props {
   buttonText?: string
@@ -23,9 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   data: () => []
 })
 
-function sanitizeFilename (filename: string): string {
-  return filename.replace(/[^\w.-]/g, '_')
-}
+const { downloadFile, getFilename } = useDownload()
 
 function dataToBlob (csvData: Record<string, any>[]): Blob {
   const keys: Record<string, string> = {}
@@ -46,12 +45,7 @@ function dataToBlob (csvData: Record<string, any>[]): Blob {
 
 async function saveFile (): Promise<void> {
   const blob = await dataToBlob(props.data)
-  const e = document.createEvent('MouseEvents')
-  const a = document.createElement('a')
-  a.download = sanitizeFilename(props.filename + '.csv')
-  a.href = window.URL.createObjectURL(blob)
-  a.dataset.downloadurl = ['text/csv', a.download, a.href].join(':')
-  e.initEvent('click', true, false)
-  a.dispatchEvent(e)
+  const filename = getFilename(props.filename, 'csv')
+  downloadFile(blob, filename)
 }
 </script>

src/runtime/components/download-geojson.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import type { Feature, FeatureCollection } from 'geojson'
-import { sanitizeFilename } from '../lib/sanitize'
+import { useDownload } from '../composables/useDownload'
 
 // Props
 const props = withDefaults(defineProps<{
@@ -15,27 +15,21 @@ const props = withDefaults(defineProps<{
   label?: string
 }>(), {
   features: () => [],
-  filename: 'export.geojson',
+  filename: 'export',
   label: 'Download'
 })
 
 // Methods
+const { downloadFile, getFilename } = useDownload()
+
 const saveFile = () => {
   const data = JSON.stringify({
     type: 'FeatureCollection',
     features: props.features
   } as FeatureCollection)
 
   const blob = new Blob([data], { type: 'application/json' })
-  const a = document.createElement('a')
-
-  a.download = sanitizeFilename(props.filename + '.geojson')
-  a.href = window.URL.createObjectURL(blob)
-  a.style.display = 'none'
-
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  window.URL.revokeObjectURL(a.href)
+  const filename = getFilename(props.filename.replace(/\.geojson$/, ''), 'geojson')
+  downloadFile(blob, filename)
 }
 </script>

src/runtime/components/download-json.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script setup lang="ts">
+import { useDownload } from '../composables/useDownload'
+
 interface Props {
   buttonText?: string
   disabled?: boolean
@@ -21,18 +23,11 @@ const props = withDefaults(defineProps<Props>(), {
   data: ''
 })
 
-function sanitizeFilename (filename: string): string {
-  return filename.replace(/[^\w.-]/g, '_')
-}
+const { downloadFile, getFilename } = useDownload()
 
 function saveFile (): void {
   const blob = new Blob([props.data], { type: 'application/json' })
-  const e = document.createEvent('MouseEvents')
-  const a = document.createElement('a')
-  a.download = sanitizeFilename(props.filename + '.json')
-  a.href = window.URL.createObjectURL(blob)
-  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
-  e.initEvent('click', true, false)
-  a.dispatchEvent(e)
+  const filename = getFilename(props.filename, 'json')
+  downloadFile(blob, filename)
 }
 </script>

src/runtime/composables/index.ts

@@ -0,0 +1,12 @@
+export * from './useApiEndpoint'
+export * from './useAuthHeaders'
+export * from './useBasemapLayers'
+export * from './useDownload'
+export * from './useLogin'
+export * from './useLoginGate'
+export * from './useLogout'
+export * from './useMixpanel'
+export * from './useRouteCategories'
+export * from './useRouteResolver'
+export * from './useToastNotification'
+export * from './useUser'

src/runtime/composables/useDownload.ts

@@ -0,0 +1,58 @@
+import { sanitizeFilename } from '../lib/sanitize'
+
+/**
+ * Composable for file download utilities
+ */
+export function useDownload () {
+  /**
+   * Downloads a blob as a file
+   */
+  const downloadFile = (blob: Blob, filename: string): void => {
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.style.display = 'none'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }
+
+  /**
+   * Generates a filename with timestamp
+   * @param entityType - Type of entity (e.g., 'stops', 'routes')
+   * @param extension - File extension (e.g., 'csv', 'json', 'geojson')
+   */
+  const getFilename = (entityType: string, extension: string): string => {
+    const timestamp = new Date().toISOString().split('T')[0]
+    return sanitizeFilename(`${entityType}-${timestamp}.${extension}`)
+  }
+
+  /**
+   * Downloads data as JSON
+   */
+  const downloadAsJSON = (data: any, entityType: string): void => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+    downloadFile(blob, getFilename(entityType, 'json'))
+  }
+
+  /**
+   * Downloads data as GeoJSON FeatureCollection
+   */
+  const downloadAsGeoJSON = (features: any[], entityType: string): void => {
+    const featureCollection = {
+      type: 'FeatureCollection' as const,
+      features
+    }
+    const blob = new Blob([JSON.stringify(featureCollection, null, 2)], { type: 'application/json' })
+    downloadFile(blob, getFilename(entityType, 'geojson'))
+  }
+
+  return {
+    downloadFile,
+    getFilename,
+    downloadAsJSON,
+    downloadAsGeoJSON
+  }
+}

src/runtime/lib/index.ts

@@ -2,3 +2,4 @@ export * from './auth0'
 export * from './filters'
 export * from '../geom'
 export * from './log'
+export * from './sanitize'