@datagouv/components-next 1.0.2-dev.18 → 1.0.2-dev.180

package/src/components/TabularExplorer/useTabularContext.ts

@@ -0,0 +1,82 @@
+import type { Component, ComputedRef, InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+import type {
+  ColumnFilters,
+  ColumnType,
+  SortConfig,
+  TabularColumnProfile,
+  TabularDataResponse,
+  TabularRow,
+} from './types'
+
+export type ActiveFilter = {
+  column: string
+  label: string
+}
+
+export type ColumnDisplay = {
+  icon: Component
+  label: string
+}
+
+// Data + cross-cutting state shared by the tabular explorer's parts (toolbar, header
+// filters, table). Provided by <TabularExplorer>, injected by children so they can be
+// arranged freely without prop-drilling.
+//
+// NOT here — kept local to whoever renders it, because nothing else needs it:
+//   - column widths / resize, cell popover, mobile row expansion → TabularTable
+//   - mobile filter sheet's expanded column → TabularMobileFilters
+export type TabularContext = {
+  // Data & pagination (the parent owns the fetch, children just render it)
+  tableData: Ref<TabularDataResponse | null>
+  totalLines: ComputedRef<number>
+  allRows: Ref<TabularRow[]>
+  hasMore: Ref<boolean>
+  loadNextPage: () => Promise<void>
+  // A sort / filter / search change is refetching while the previous rows are
+  // still on screen.
+  isRefreshing: ComputedRef<boolean>
+
+  // Sort & filters
+  sort: Ref<SortConfig | null>
+  filters: Ref<Record<string, ColumnFilters>>
+  activeFilters: ComputedRef<ActiveFilter[]>
+  removeFilter: (column: string) => void
+  clearAllFilters: () => void
+  hasFilterForColumn: (col: string) => boolean
+
+  // Columns visibility
+  allColumns: ComputedRef<string[]>
+  visibleColumns: Ref<Set<string>>
+  displayedColumns: ComputedRef<string[]>
+  hiddenCount: ComputedRef<number>
+  toggleColumn: (col: string) => void
+  showAllColumns: () => void
+  hideAllColumns: () => void
+  selectOnlyColumn: (col: string) => void
+
+  // Mobile filter sheet open/close (button lives in the toolbar, sheet elsewhere)
+  mobileFilterOpen: Ref<boolean>
+
+  // Column metadata helpers (pure derivations of the profile)
+  columnTypesMap: ComputedRef<Record<string, ColumnType>>
+  getColumnType: (col: string) => ColumnType
+  getColumnProfile: (col: string) => TabularColumnProfile | null
+  getColumnDisplay: (col: string) => ColumnDisplay
+  getNullPercent: (col: string) => string
+  getBooleanCounts: (col: string) => { trueCount: number, falseCount: number }
+}
+
+const TABULAR_CONTEXT_KEY: InjectionKey<TabularContext> = Symbol('tabular-context')
+
+export function provideTabularContext(context: TabularContext) {
+  provide(TABULAR_CONTEXT_KEY, context)
+}
+
+export function useTabularContext(): TabularContext {
+  const context = inject(TABULAR_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useTabularContext() must be used inside a <TabularExplorer>')
+  }
+  return context
+}

package/src/composables/useActiveDescendant.ts

@@ -60,23 +60,28 @@ export function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<
 
   function handleKeyPressForActiveDescendant(key: KeyboardEvent, alreadyMovedDown = false) {
     switch (key.key as CommonKeyboardKeys) {
+      // An arrow that moves the active option must not also scroll the page behind it
       case 'ArrowDown':
         if (direction === 'vertical' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break
       case 'ArrowUp':
         if (direction === 'vertical') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowLeft':
         if (direction === 'horizontal') {
+          key.preventDefault()
           activatePreviousOption()
         }
         break
       case 'ArrowRight':
         if (direction === 'horizontal' && !alreadyMovedDown && !key.altKey) {
+          key.preventDefault()
           activateNextOption()
         }
         break

package/src/composables/useDatasetResources.ts

@@ -0,0 +1,164 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+import { useComponentsConfig } from '../config'
+import { useDebouncedRef } from './useDebouncedRef'
+import { useFetch } from '../functions/api'
+import { RESOURCE_EXPLORER_PAGE_SIZE, RESOURCE_TYPE } from '../functions/resources'
+import type { PaginatedArray } from '../types/api'
+import type { DatasetV2 } from '../types/datasets'
+import type { Resource, ResourceGroup, ResourceType } from '../types/resources'
+
+// Fetches a dataset's resources grouped by type (paginated per type, searchable)
+// and derives the currently selected resource from the `resource_id` query param.
+// Shared by the dataset page and the explore page so the left navigation behaves
+// identically in both.
+export async function useDatasetResources(datasetGetter: MaybeRefOrGetter<DatasetV2>) {
+  const config = useComponentsConfig()
+
+  const search = ref('')
+  const { debounced: searchDebounced, flush } = useDebouncedRef(search, config.searchDebounce ?? 300)
+
+  const datasetId = computed(() => toValue(datasetGetter).id)
+  const url = computed(() => `/api/2/datasets/${datasetId.value}/resources/`)
+
+  const makeParams = (type: ResourceType) => computed(() => ({
+    type,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    q: searchDebounced.value || undefined,
+  }))
+
+  // Evaluated once at setup (before any search) — never changes afterwards
+  const hasAnyResources = computed(() => toValue(datasetGetter).resources.total > 0)
+
+  const extraResourcesByType: Ref<Resource[]>[] = RESOURCE_TYPE.map(() => ref<Resource[]>([]))
+  const pageByType: Ref<number>[] = RESOURCE_TYPE.map(() => ref(1))
+
+  watch(searchDebounced, () => {
+    for (let i = 0; i < RESOURCE_TYPE.length; i++) {
+      extraResourcesByType[i]!.value = []
+      pageByType[i]!.value = 1
+    }
+  })
+
+  // Separate useFetch for loadMore, initialized with immediate: false so it doesn't
+  // fetch until execute() is called from the event handler.
+  const loadMoreType = ref<ResourceType>('main')
+  const loadMorePage = ref(1)
+  const loadMoreParams = computed(() => ({
+    type: loadMoreType.value,
+    page_size: RESOURCE_EXPLORER_PAGE_SIZE,
+    page: loadMorePage.value,
+    q: searchDebounced.value || undefined,
+  }))
+
+  const resourceIdQuery = useRouteQuery<string | undefined>('resource_id')
+  const initialResourceId = resourceIdQuery.value
+
+  // Vue rule: composables must be called synchronously, before any `await` — `inject()`
+  // needs the active component instance, which a plain .ts composable loses after its
+  // first await (documented in useTabularProfile.ts). The package's `useFetch` calls
+  // `useComponentsConfig()` (an inject) on every call, so we kick off every request
+  // up-front, then await them together. This is also the idiomatic Nuxt parallel-fetch.
+  const typeFetches = RESOURCE_TYPE.map(type =>
+    useFetch<PaginatedArray<Resource>>(url, {
+      params: makeParams(type),
+      // Only main is server-rendered; the rest hydrate client-side to keep SSR light.
+      server: type === 'main',
+    }),
+  )
+  const loadMoreFetch = useFetch<PaginatedArray<Resource>>(url, { params: loadMoreParams, immediate: false, watch: false })
+  // The resource pointed at by `resource_id` (SSR / deep link) may live beyond the first
+  // page of its type group, so it wouldn't be in flatResources — fetch it directly.
+  const fetchedResourceFetch = initialResourceId
+    ? useFetch<Resource>(`/api/1/datasets/${datasetId.value}/resources/${initialResourceId}/`)
+    : null
+
+  const typeResults = await Promise.all(typeFetches)
+  const { data: loadMoreData, execute: executeLoadMore } = await loadMoreFetch
+  const fetchedResource = fetchedResourceFetch ? (await fetchedResourceFetch).data : ref<Resource | null>(null)
+
+  const rawDataByType = typeResults.map(result => result.data)
+
+  // Which type group is currently loading its next page. A single loadMoreFetch is
+  // shared across types, so we track the type here to show the spinner on the right
+  // group's "Charger plus…" button.
+  const loadingType = ref<ResourceType | null>(null)
+
+  const loadMore = async (type: ResourceType) => {
+    const index = RESOURCE_TYPE.indexOf(type)
+    if (index === -1) return
+    const pageRef = pageByType[index]!
+    const extraRef = extraResourcesByType[index]!
+    pageRef.value++
+
+    loadMoreType.value = type
+    loadMorePage.value = pageRef.value
+    loadingType.value = type
+    try {
+      await executeLoadMore()
+
+      if (loadMoreData.value) {
+        extraRef.value = [...extraRef.value, ...loadMoreData.value.data]
+      }
+    }
+    finally {
+      loadingType.value = null
+    }
+  }
+
+  const groups = computed<ResourceGroup[]>(() => {
+    return RESOURCE_TYPE
+      .map((type, index) => {
+        const rawData = rawDataByType[index]!
+        const extraData = extraResourcesByType[index]!
+        return {
+          type: type as ResourceType,
+          total: rawData.value?.total ?? 0,
+          items: [...(rawData.value?.data ?? []), ...extraData.value],
+        }
+      })
+      .filter(group => group.items.length > 0)
+  })
+
+  const flatResources = computed(() => groups.value.flatMap(g => g.items))
+
+  // The URL is the single source of truth for the selection: no ref to keep in
+  // sync, navigation is done with plain links that change `resource_id`.
+  let lastShown: Resource | null = null
+  const remember = (resource: Resource | null) => {
+    if (resource) lastShown = resource
+    return resource
+  }
+
+  const selectedResource = computed<Resource | null>(() => {
+    const wantedId = resourceIdQuery.value
+    const fromList = flatResources.value.find(r => r.id === wantedId)
+    if (fromList) return remember(fromList)
+    // `fetchedResource` answers for `initialResourceId` only: it holds that one
+    // resource, so using it for any other id would show something the URL doesn't
+    // point at.
+    if (wantedId && wantedId === initialResourceId) return remember(fetchedResource.value)
+    // A search that matches nothing narrows the navigation, it doesn't unload the
+    // viewer — keep showing what we had, which is the dataset's first resource when
+    // nothing has been clicked yet.
+    return remember(flatResources.value[0] ?? null) ?? lastShown
+  })
+
+  function updateSearch(newSearch: string) {
+    search.value = newSearch
+    // Only a reset skips the debounce: typing must stay debounced, since each
+    // change fires one request per resource type.
+    if (!newSearch) flush()
+  }
+
+  return {
+    groups,
+    flatResources,
+    hasAnyResources,
+    selectedResource,
+    loadMore,
+    loadingType,
+    search,
+    updateSearch,
+  }
+}

package/src/composables/useHasTabularData.ts

@@ -1,14 +1,28 @@
 import { useComponentsConfig } from '../config'
+import { hasTabularParsingError } from '../functions/resources'
 import type { Resource } from '../types/resources'
 
+/**
+ * Composable to determine if a resource has tabular data.
+ * This is used to show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure).
+ *
+ * @returns A function to check if a resource has tabular data.
+ */
 export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
   return (resource: Resource) => {
+    // Reject resources whose source URL last check failed (>= 400):
+    // the tabular-api purges its parquet when the source dies, but
+    // `parsing_table` may still be set — leading to a 404 on fetch.
+    const checkStatus = resource.extras['check:status']
+    const sourceUnreachable = typeof checkStatus === 'number' && checkStatus >= 400
+
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
-      && !resource.extras['analysis:parsing:error']
+      && !hasTabularParsingError(resource)
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }

package/src/composables/useMetrics.ts

@@ -13,6 +13,6 @@ export function useMetrics() {
     getDatasetMetrics: (datasetId: string) => getDatasetMetrics(datasetId, config.metricsApiUrl!),
     getDataserviceMetrics: (dataserviceId: string) => getDataserviceMetrics(dataserviceId, config.metricsApiUrl!),
     getReuseMetrics: (reuseId: string) => getReuseMetrics(reuseId, config.metricsApiUrl!),
-    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase),
+    createDatasetsForOrganizationMetricsUrl: (organizationId: string) => createDatasetsForOrganizationMetricsUrl(organizationId, config.metricsApiUrl!, config.apiBase, config.$fetch),
   }
 }

package/src/composables/useResizable.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+type UseResizableOptions = {
+  initialWidth: number
+  minWidth: number
+  maxWidth: number
+}
+
+// Drag-to-resize a horizontal panel. Returns the reactive width, a `resizing`
+// flag (to disable width transitions while dragging) and a `startResize` handler
+// to bind on a drag handle's `mousedown`. Encapsulates the drag math, clamping and
+// the temporary body cursor / text-selection lock. VueUse has no ready-made panel
+// resize (useResizeObserver only observes size), so we build it on `useEventListener`
+// which handles listener cleanup and SSR for us.
+export function useResizable({ initialWidth, minWidth, maxWidth }: UseResizableOptions) {
+  const width = ref(initialWidth)
+  const resizing = ref(false)
+  let startX = 0
+  let startWidth = 0
+
+  const clamp = (value: number) => Math.min(maxWidth, Math.max(minWidth, Math.round(value)))
+
+  function startResize(event: MouseEvent) {
+    event.preventDefault()
+    startX = event.clientX
+    startWidth = width.value
+    resizing.value = true
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = 'col-resize'
+  }
+
+  useEventListener('mousemove', (event: MouseEvent) => {
+    if (!resizing.value) return
+    width.value = clamp(startWidth + event.clientX - startX)
+  })
+
+  useEventListener('mouseup', () => {
+    if (!resizing.value) return
+    resizing.value = false
+    document.body.style.userSelect = ''
+    document.body.style.cursor = ''
+  })
+
+  return { width, resizing, startResize }
+}

package/src/composables/useResourceCapabilities.ts

@@ -1,16 +1,21 @@
-import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from './useTranslation'
-import { useHasTabularData } from './useHasTabularData'
-import { detectOgcService } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
-import type { Resource, WfsMetadata } from '../types/resources'
-import type { Dataset, DatasetV2 } from '../types/datasets'
 import { getWfsExportFormats } from '../functions/resourceCapabilities'
+import { detectOgcService, getParsingErrorMessage, getParsingErrorStep, isImagePreviewFormat } from '../functions/resources'
+import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { Resource, WfsMetadata } from '../types/resources'
+import { useHasTabularData } from './useHasTabularData'
+import { useTranslation } from './useTranslation'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
 
+// Which preview the data tab shows. Single source of truth: the viewer renders it and
+// the skeleton picks the matching placeholder shape, so each holding its own copy of
+// this precedence would let the two drift apart.
+export type PreviewKind = 'json' | 'pdf' | 'xml' | 'image' | 'datafair' | 'openapi' | 'tabular' | 'unavailable'
+
 export function useResourceCapabilities(
   resource: MaybeRefOrGetter<Resource>,
   dataset: MaybeRefOrGetter<Dataset | DatasetV2>,
@@ -19,11 +24,6 @@ export function useResourceCapabilities(
   const { t } = useTranslation()
   const checkTabularData = useHasTabularData()
 
-  const hasPreview = computed(() => {
-    const format = toValue(resource).format?.toLowerCase()
-    return format === 'json' || format === 'pdf' || format === 'xml'
-  })
-
   const hasTabularData = computed(() => {
     const r = toValue(resource)
     return checkTabularData(r)
@@ -49,6 +49,11 @@ export function useResourceCapabilities(
   const ogcService = computed(() => detectOgcService(toValue(resource)))
   const ogcWms = computed(() => ogcService.value === 'wms')
 
+  // The map is built from a pmtiles export; when that export fails we still want
+  // to show the Carte tab, but with the reason it could not be generated.
+  const hasPmtilesError = computed(() => getParsingErrorStep(toValue(resource)) === 'pmtiles_export')
+  const pmtilesError = computed(() => hasPmtilesError.value ? getParsingErrorMessage(toValue(resource)) : null)
+
   const generatedFormats = computed(() => {
     const r = toValue(resource)
     const formats = GENERATED_FORMATS
@@ -81,43 +86,64 @@ export function useResourceCapabilities(
 
   const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
 
+  // A dedicated preview always wins over the interactive table: a PDF that also
+  // carries a parsing table is a PDF first.
+  const previewKind = computed<PreviewKind>(() => {
+    const format = toValue(resource).format?.toLowerCase()
+    if (format === 'json') return 'json'
+    if (format === 'pdf') return 'pdf'
+    if (format === 'xml') return 'xml'
+    if (isImagePreviewFormat(format)) return 'image'
+    if (hasDatafairPreview.value) return 'datafair'
+    if (hasOpenAPIPreview.value) return 'openapi'
+    if (hasTabularData.value) return 'tabular'
+    return 'unavailable'
+  })
+
   const tabsOptions = computed(() => {
     const r = toValue(resource)
     const options = []
 
-    if (hasTabularData.value) {
-      options.push({ key: 'data', label: t('Données') })
+    const dataTab = { key: 'data', label: hasTabularData.value ? t('Données') : t('Aperçu') }
+    const mapTab = { key: 'map', label: t('Carte') }
+    const hasMap = hasPmtiles.value || ogcWms.value
+
+    // The map is the most visual preview: when it is available, show it first.
+    // When its generation failed, keep the data preview first and surface the
+    // Carte tab (with its error) right after.
+    if (hasMap) {
+      options.push(mapTab, dataTab)
+    }
+    else if (hasPmtilesError.value) {
+      options.push(dataTab, mapTab)
     }
     else {
-      options.push({ key: 'data', label: t('Aperçu') })
+      options.push(dataTab)
     }
 
     if (hasTabularData.value) {
       options.push({ key: 'data-structure', label: t('Structure des données') })
     }
 
-    if (hasPmtiles.value || ogcWms.value) {
-      options.push({ key: 'map', label: t('Carte') })
-    }
-
     if (r.description) {
       options.push({ key: 'description', label: t('Description') })
     }
 
     options.push({ key: 'metadata', label: t('Métadonnées') })
-    options.push({ key: 'downloads', label: t('Téléchargements') })
 
     if (hasTabularData.value) {
-      options.push({ key: 'swagger', label: t('Swagger') })
+      options.push({ key: 'api', label: t('API') })
     }
 
     return options
   })
 
   return {
-    hasPreview,
+    previewKind,
     hasTabularData,
     hasPmtiles,
+    hasPmtilesError,
+    pmtilesError,
     hasDatafairPreview,
     hasOpenAPIPreview,
     ogcService,

package/src/composables/useSearchFilter.ts

@@ -0,0 +1,120 @@
+import { type InjectionKey, type Ref, inject, onMounted, onScopeDispose } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useRouteQuery } from '@vueuse/router'
+import type { SearchTypeConfig } from '../types/search'
+
+export function configKey(c: SearchTypeConfig): string {
+  return c.key ?? c.class
+}
+
+export interface CustomFilterEntry {
+  apiParam: string
+  ref: Ref<string | undefined>
+  defaultValue: string | undefined
+  typeKeys?: string[] // undefined = applies to all types
+}
+
+export interface SearchFilterContext {
+  register(urlParam: string, entry: CustomFilterEntry): void
+  unregister(urlParam: string): void
+}
+
+export function isCustomFilterActive(entry: CustomFilterEntry): boolean {
+  const v = entry.ref.value
+  return v !== undefined && v !== null && v !== '' && v !== entry.defaultValue
+}
+
+export function forEachActiveCustomFilter(
+  registry: Map<string, CustomFilterEntry>,
+  apply: (apiParam: string, value: string) => void,
+  typeKey?: string,
+): void {
+  for (const entry of registry.values()) {
+    if (!isCustomFilterActive(entry)) continue
+    if (typeKey && entry.typeKeys && !entry.typeKeys.includes(typeKey)) continue
+    apply(entry.apiParam, String(entry.ref.value))
+  }
+}
+
+export const searchFilterContextKey: InjectionKey<SearchFilterContext>
+  = Symbol('SearchFilterContext')
+
+export interface UseSearchFilterOptions {
+  /** The API parameter name to map this filter to. Defaults to the urlParam. */
+  apiParam?: string
+  /** Default value when not present in URL. Defaults to undefined. */
+  defaultValue?: string
+  /** One or more type config keys this filter applies to. Undefined means all types. */
+  typeKeys?: string | string[]
+}
+
+/**
+ * Registers a custom filter with the parent GlobalSearch component.
+ *
+ * Must be called inside a component rendered within GlobalSearch's
+ * `#custom-filters-top` or `#custom-filters-bottom` slot.
+ *
+ * @param urlParam - The URL query parameter name (e.g. 'theme' → `?theme=value`)
+ * @param options  - Optional: `apiParam` to map to a different API param (e.g. 'tag'), `defaultValue`
+ * @returns A reactive ref bound to the URL parameter, suitable for v-model
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useSearchFilter } from '@datagouv/components-next'
+ * // URL: ?theme=environment → API: ?tag=environment
+ * const value = useSearchFilter('theme', { apiParam: 'tag' })
+ * </script>
+ * ```
+ */
+export function useSearchFilter(
+  urlParam: string,
+  options: UseSearchFilterOptions = {},
+): Ref<string | undefined> {
+  const context = inject(searchFilterContextKey)
+  if (!context) {
+    throw new Error(
+      `useSearchFilter("${urlParam}") must be used inside a <GlobalSearch> component.`,
+    )
+  }
+
+  const { apiParam = urlParam, defaultValue = undefined, typeKeys } = options
+  const normalizedTypeKeys = typeKeys
+    ? (Array.isArray(typeKeys) ? typeKeys : [typeKeys])
+    : undefined
+
+  const route = useRoute()
+  const router = useRouter()
+  const value = useRouteQuery<string | undefined>(urlParam, defaultValue)
+
+  // Register in onMounted to avoid SSR/hydration mismatch: the registry must be
+  // empty during SSR so server and client produce the same initial HTML.
+  onMounted(() => {
+    context.register(urlParam, { apiParam, ref: value, defaultValue, typeKeys: normalizedTypeKeys })
+  })
+
+  onScopeDispose(() => {
+    // Type-scoped filters (typeKeys set) are cleared by GlobalSearch's
+    // watch(currentType) instead, so their URL update batches with the other
+    // type-change resets via useRouteQuery rather than racing them with the
+    // separate router.replace below. Here we only clear filters that apply to
+    // all types: their unmount is a consumer signal unrelated to a type switch,
+    // which GlobalSearch has no way to detect.
+    //
+    // We cannot use `value.value = defaultValue` here because VueUse's
+    // useRouteQuery registers its own tryOnScopeDispose cleanup that zeroes
+    // the internal `query` variable to undefined (FIFO order, it runs first).
+    // The setter then sees `query === v` and early-returns without ever
+    // calling router.replace(). Instead we read the live route.query directly
+    // (which is router state, not affected by that cleanup) and push the update.
+    if (normalizedTypeKeys === undefined && route.query[urlParam] !== undefined) {
+      const { [urlParam]: _removed, ...restQuery } = route.query
+      router.replace({
+        query: defaultValue === undefined ? restQuery : { ...restQuery, [urlParam]: String(defaultValue) },
+      })
+    }
+    context.unregister(urlParam)
+  })
+
+  return value
+}