@bagelink/vue 1.10.42 → 1.11.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.10.42",
+  "version": "1.11.3",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.10.42"
+    "@bagelink/utils": "1.11.3"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/composables/index.ts

@@ -9,10 +9,10 @@ export { useDevice } from './useDevice'
 export { useExcel } from './useExcel'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
+export { useQuery } from './useQuery'
 export { useResizableLayoutProvider } from './useResizableLayout'
 export type { PanelConfig, PanelState, ResizableContext } from './useResizableLayout'
 export { useResizeObserver } from './useResizeObserver'
-export { useTheme } from './useTheme'
 interface UseBglSchemaParamsT<T> {
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
 	columns?: MaybeRefOrGetter<string[]>
@@ -35,4 +35,5 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	return getFallbackSchema(data, _columns.value)
 }
 
+export { useTheme } from './useTheme'
 export { useValidateFieldValue } from './useValidateFieldValue'

package/src/composables/useQuery.ts

@@ -0,0 +1,50 @@
+import type { WritableComputedRef } from 'vue'
+import type { LocationQuery, LocationQueryRaw } from 'vue-router'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+function buildQuery(
+	current: LocationQuery,
+	key: string,
+	value: string | undefined,
+): LocationQueryRaw {
+	const query: LocationQueryRaw = { ...current }
+	if (value === undefined) delete query[key]
+	else query[key] = value
+	return query
+}
+
+type QueryDefaults<T> = { [K in keyof T]?: T[K] }
+type QueryResult<T, D extends QueryDefaults<T>> = {
+	[K in keyof T]: WritableComputedRef<K extends keyof D ? NonNullable<T[K]> : T[K] | undefined>
+}
+
+/**
+ * Reactive URL query param bindings.
+ * Each key becomes a writable computed that reads/writes a single query param.
+ *
+ * @example
+ * const q = useQuery<{ search: string; page: string }>({ page: '1' })
+ * q.search.value = 'hello'  // → ?search=hello&page=1
+ */
+export function useQuery<
+	T extends Record<string, string> = Record<string, string>,
+	D extends QueryDefaults<T> = QueryDefaults<T>,
+>(defaults?: D): QueryResult<T, D> {
+	const route = useRoute()
+	const router = useRouter()
+	const cache: Record<string, WritableComputedRef<string | undefined>> = {}
+
+	return new Proxy({} as QueryResult<T, D>, {
+		get(_, key: string) {
+			if (!(key in cache)) {
+				const fallback = defaults?.[key as keyof T] as string | undefined
+				cache[key] = computed({
+					get: () => (route.query[key] as string | undefined) ?? fallback,
+					set: value => router.replace({ query: buildQuery(route.query, key, value) }),
+				})
+			}
+			return cache[key] as QueryResult<T, D>[keyof T]
+		},
+	})
+}