fix: keep versions modal options in query params (#1725)

Author: sybers

app/components/Package/Versions.vue

@@ -68,6 +68,9 @@ function closeDistributionModal() {
     query: {
       ...route.query,
       modal: undefined,
+      grouping: undefined,
+      recent: undefined,
+      lowUsage: undefined,
     },
   })
 

app/composables/useVersionDistribution.ts

@@ -21,9 +21,12 @@ interface ChartDataItem {
  * @returns Reactive state and computed chart data
  */
 export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
-  const groupingMode = ref<VersionGroupingMode>('major')
-  const showRecentOnly = ref(false)
-  const showLowUsageVersions = ref(false)
+  const groupingMode = useRouteQuery<VersionGroupingMode>('grouping', 'major', {
+    transform: (v: string) => (v === 'minor' ? 'minor' : 'major'),
+    mode: 'replace',
+  })
+  const showRecentOnly = useBooleanRouteQuery('recent', false)
+  const showLowUsageVersions = useBooleanRouteQuery('lowUsage', false)
   const pending = ref(false)
   const error = ref<Error | null>(null)
   const data = ref<VersionDistributionResponse | null>(null)
@@ -173,3 +176,13 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
     fetchDistribution,
   }
 }
+
+function useBooleanRouteQuery(key: string, defaultValue = false) {
+  return useRouteQuery(key, defaultValue ? 'true' : 'false', {
+    transform: {
+      get: (v: string) => v === 'true',
+      set: (v: boolean) => (v ? 'true' : 'false'),
+    },
+    mode: 'replace',
+  })
+}