imp: reset URL Param if value equals defaultValue

Author: holux-design

src/runtime/composables/queryRef.ts

@@ -14,22 +14,26 @@ export const queryRef = <T>(key: string, defaultValue: T = null) => {
   watch(
     queryRef,
     async (newVal) => {
-      updateQueryParamInURL(key, newVal, type)
+      updateQueryParamInURL(key, newVal, defaultValue, type)
     },
     { deep: true },
   )
 
   return queryRef as { value: T }
 }
 
-function updateQueryParamInURL(key, value, type: QueryParamType) {
+function updateQueryParamInURL(key, value, defaultValue, type: QueryParamType) {
   if (typeof window == 'undefined') return
 
   if (['string[]', 'number[]', 'boolean[]'].includes(type)) value = value.join(',')
   if (['object', 'object[]'].includes(type)) value = JSON.stringify(value)
 
   const url = new URL(window.location.href)
-  url.searchParams.set(key, value.toString())
+  if (value != defaultValue) {
+    url.searchParams.set(key, value.toString())
+  } else {
+    url.searchParams.delete(key)
+  }
   url.search = decodeURIComponent(url.search)
   window.history.pushState(null, '', url.toString())
 }
@@ -39,10 +43,10 @@ function loadQueryParamFromURL(key: string, type: QueryParamType) {
   if (!loadedString) return
 
   if (type == 'number') return +loadedString
-  if (type == 'number[]') return loadedString.split(',').map(n => +n)
+  if (type == 'number[]') return loadedString.split(',').map((n) => +n)
   if (type == 'string[]') return loadedString.split(',')
   if (type == 'boolean') return loadedString == 'true'
-  if (type == 'boolean[]') return loadedString.split(',').map(n => n == 'true')
+  if (type == 'boolean[]') return loadedString.split(',').map((n) => n == 'true')
   if (['object', 'object[]'].includes(type)) return JSON.parse(loadedString)
   return loadedString
 }