Add support for clearing queryString in tabs

Author: mythz

.vscode/extensions.json

@@ -1,3 +1,5 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "Vue.volar"
+  ]
 }

src/components/Tabs.vue

@@ -35,12 +35,14 @@ const props = withDefaults(defineProps<{
     tabClass?: string
     bodyClass?: string
     url?:boolean
+    clearQuery?:boolean
 }>(), {
     id: 'tabs',
     param: 'tab',
     label: (tab:string) => humanize(tab),
     bodyClass: 'p-4',
-    url: true
+    url:true,
+    clearQuery:false,
 })
 
 const tabNames = computed(() =>  Object.keys(props.tabs))
@@ -55,7 +57,7 @@ function select(tab:string) {
     selected.value = tab
     if (props.url) {
         const firstTab = tabNames.value[0]
-        pushState({ tab: tab === firstTab ? undefined : tab })
+        pushState({ tab: tab === firstTab ? undefined : tab }, props.clearQuery)
     }
 }
 

src/use/utils.ts

@@ -1,7 +1,7 @@
 import type { Ref } from "vue"
 import { isRef, nextTick, unref } from "vue"
 import type { ApiRequest, IReturn, TransitionRules } from "@/types"
-import { ApiResult, appendQueryString, dateFmt, enc, JsonServiceClient, nameOf, omit, setQueryString, toTime } from "@servicestack/client"
+import { ApiResult, appendQueryString, dateFmt, enc, JsonServiceClient, lastLeftPart, nameOf, omit, setQueryString, toTime } from "@servicestack/client"
 import { assetsPathResolver } from "./config"
 import { Sole } from "./config"
 
@@ -139,9 +139,11 @@ export function parseJson(json?:string|null) {
     return typeof json == 'string' ? JSON.parse(json) : null
 }
 
-export function pushState(args:Record<string,any>) {
-    if (typeof history != 'undefined') {
-        const url = setQueryString(location.href, args)
+export function pushState(args:Record<string,any>, clear?:boolean) {
+    if (typeof history != 'undefined') {        
+        const url = clear
+            ? setQueryString(location.href, args)
+            : appendQueryString(lastLeftPart(location.href,'?'), args)
         history.pushState({}, '', url)
     }
 }