@datagouv/components-next 0.2.0 → 1.0.1

package/src/composables/useStableQueryParams.ts

@@ -0,0 +1,84 @@
+import { ref, watch, type Ref } from 'vue'
+import type { SearchTypeConfig } from '../types/search'
+
+type FilterRefs = Record<string, Ref<unknown>>
+
+interface StableQueryParamsOptions {
+  typeConfig: SearchTypeConfig | undefined
+  allFilters: FilterRefs
+  q: Ref<string>
+  sort: Ref<string | undefined>
+  page: Ref<number>
+  pageSize: number
+}
+
+/**
+ * Creates a stable ref for query params that only updates when content actually changes.
+ * Applies hiddenFilters first, then user filters (which can override hiddenFilters).
+ */
+export function useStableQueryParams(options: StableQueryParamsOptions) {
+  const { typeConfig, allFilters, q, sort, page, pageSize } = options
+  const stableParams = ref<Record<string, unknown>>({})
+
+  const buildParams = () => {
+    const params: Record<string, unknown> = {}
+
+    // 1. Apply hiddenFilters first (can be overridden by user filters)
+    if (typeConfig?.hiddenFilters) {
+      for (const hf of typeConfig.hiddenFilters) {
+        if (hf) {
+          params[hf.key as string] = hf.value
+        }
+      }
+    }
+
+    // 2. Get enabled filters for this type
+    const enabledFilters = [
+      ...(typeConfig?.basicFilters ?? []),
+      ...(typeConfig?.advancedFilters ?? []),
+    ]
+
+    // 3. Apply user filter values (only enabled ones)
+    // Skip undefined/null/empty values so they're not sent to the API
+    for (const filterName of enabledFilters) {
+      const filterRef = allFilters[filterName as string]
+      if (filterRef) {
+        const value = filterRef.value
+        if (value !== undefined && value !== '' && value !== null) {
+          params[filterName as string] = value
+        }
+      }
+    }
+
+    // 4. Always include q, sort (if valid for this type), page, page_size
+    if (q.value) {
+      params.q = q.value
+    }
+    if (sort.value) {
+      const validSortValues = typeConfig?.sortOptions?.map(o => o.value as string) ?? []
+      if (validSortValues.includes(sort.value)) {
+        params.sort = sort.value
+      }
+    }
+    params.page = page.value
+    params.page_size = pageSize
+
+    return params
+  }
+
+  // Watch all dependencies and update only if content changed
+  watch(
+    [q, sort, page, ...Object.values(allFilters)],
+    () => {
+      const newParams = buildParams()
+      // JSON.stringify comparison is safe here because buildParams() builds the object deterministically
+      // (keys are always added in the same order), avoiding the key ordering edge case.
+      if (JSON.stringify(newParams) !== JSON.stringify(stableParams.value)) {
+        stableParams.value = newParams
+      }
+    },
+    { immediate: true },
+  )
+
+  return stableParams
+}

package/src/composables/useTranslation.ts

@@ -21,7 +21,8 @@ function detectLanguage(): string {
     const acceptLanguage = header
     if (acceptLanguage) {
       const primaryLang = acceptLanguage.split(';')[0]!.split(',')[0]!.split('-')[0]!.toLowerCase()
-      return primaryLang
+      // Ignore wildcard * language, that should fallback to client side detection or default language
+      if (primaryLang !== '*') return primaryLang
     }
   }
   catch {

package/src/config.ts

@@ -15,6 +15,8 @@ export type PluginConfig = {
   metricsApiUrl?: string
   schemaValidataUrl?: string
   schemaDocumentationUrl?: string
+  schemasSiteUrl?: string
+  schemasSiteName?: string
   tabularApiUrl?: string
   tabularApiPageSize?: number
   tabularAllowRemote?: boolean
@@ -27,6 +29,8 @@ export type PluginConfig = {
   textClamp?: string | Component | null
   appLink?: Component | null
   clientOnly?: Component | null
+  searchDebounce?: number
+  forumUrl?: string
 }
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>

package/src/functions/api.ts

@@ -1,9 +1,17 @@
-import { reactive, ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
+import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
+function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
+  const val = toValue(obj)
+  if (!val || typeof val !== 'object') return val
+  return Object.fromEntries(
+    Object.entries(val).map(([k, v]) => [k, toValue(v as MaybeRefOrGetter<unknown>)]),
+  )
+}
+
 export async function useFetch<DataT, ErrorT = never>(
   url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
   options?: UseFetchOptions<DataT>,
@@ -23,11 +31,13 @@ export async function useFetch<DataT, ErrorT = never>(
   const execute = async () => {
     const urlValue = toValue(url)
     if (!urlValue) return
-    const fetchOptions = reactive(options ?? {})
+    const params = deepToValue(options?.params)
+    const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
       data.value = await ofetch<DataT | null>(urlValue, {
         baseURL: config.apiBase,
+        params: params ?? query,
         onRequest(param) {
           if (config.onRequest) {
             if (Array.isArray(config.onRequest)) {
@@ -55,7 +65,6 @@ export async function useFetch<DataT, ErrorT = never>(
         onRequestError: config.onRequestError,
         onResponse: config.onResponse,
         onResponseError: config.onResponseError,
-        ...fetchOptions,
       })
       status.value = 'success'
     }
@@ -65,9 +74,19 @@ export async function useFetch<DataT, ErrorT = never>(
     }
   }
 
-  watchEffect(async () => {
-    await execute()
-  })
+  // When server is false, only start watching after mount (client-side only)
+  if (options?.server === false) {
+    onMounted(() => {
+      watchEffect(async () => {
+        await execute()
+      })
+    })
+  }
+  else {
+    watchEffect(async () => {
+      await execute()
+    })
+  }
 
   return {
     data,

package/src/functions/api.types.ts

@@ -1,10 +1,12 @@
 import type { ComputedRef, Ref, WatchSource } from 'vue'
 
+type MaybeRef<T> = T | Ref<T> | ComputedRef<T>
+
 export type UseFetchOptions<DataT> = {
   key?: string
   method?: string
-  query?: Record<string, unknown>
-  params?: Record<string, unknown>
+  query?: MaybeRef<Record<string, unknown>>
+  params?: MaybeRef<Record<string, unknown>>
   body?: RequestInit['body'] | Record<string, unknown>
   headers?: Record<string, string> | [key: string, value: string][] | Headers
   baseURL?: string
@@ -33,5 +35,5 @@ export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
 export type UseFetchFunction = (<DataT, ErrorT>(
   url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
-  options?: UseFetchOptions<DataT>
+  options?: UseFetchOptions<DataT>,
 ) => Promise<AsyncData<DataT, ErrorT>>)

package/src/functions/datasets.ts

@@ -1,11 +1,6 @@
 import { useComponentsConfig } from '../config'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { CommunityResource, Resource } from '../types/resources'
-import { removeMarkdown } from './markdown'
-
-// Dataset description constants
-export const DESCRIPTION_SHORT_MAX_LENGTH = 200
-export const DESCRIPTION_MIN_LENGTH = 200
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -25,30 +20,7 @@ export function isCommunityResource(resource: Resource | CommunityResource): boo
 }
 
 export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
-  return `${dataset.page}#/${isCommunityResource(resource) ? 'community-resources' : 'resources'}/${resource.id}`
-}
-
-/**
- * Returns the short description to display.
- * If description_short is provided, it is used.
- * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
- */
-export async function getDescriptionShort(
-  description: string | null | undefined,
-  descriptionShort: string | null | undefined,
-): Promise<string> {
-  if (descriptionShort?.trim()) {
-    return descriptionShort
-  }
-  if (description?.trim()) {
-    // description field is a markdown field that may contain HTML tags, so we should trim it
-    const plainText = (await removeMarkdown(description)).trim()
-    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
-      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
-    }
-    return plainText
-  }
-  return ''
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
 }
 
 export function getResourceFilesize(resource: Resource): null | number {

package/src/functions/description.ts

@@ -0,0 +1,33 @@
+import { removeMarkdownSync } from './markdown'
+
+// Dataset description constants
+
+// Form validation (client-side rules)
+export const DESCRIPTION_SHORT_MAX_LENGTH = 200 // max for `description_short` (+ truncation/output cap)
+export const DESCRIPTION_MIN_LENGTH = 200 // min (recommendation) for `description` (not AI gating)
+
+// AI gating (enable AI suggestions; not validation)
+export const AI_SUGGESTION_MIN_DESCRIPTION_LENGTH = 200 // min `description` length to enable suggestions
+
+/**
+ * Returns the short description to display.
+ * If description_short is provided, it is used.
+ * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
+ */
+export function getDescriptionShort({ description, descriptionShort }: {
+  description: string | null | undefined
+  descriptionShort?: string | null | undefined
+}) {
+  if (descriptionShort?.trim()) {
+    return descriptionShort
+  }
+  if (description?.trim()) {
+    // description field is a markdown field that may contain HTML tags, so we should trim it
+    const plainText = removeMarkdownSync(description).trim()
+    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
+      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
+    }
+    return plainText
+  }
+  return ''
+}

package/src/functions/helpers.ts

@@ -37,3 +37,14 @@ export const summarize = (val: number, fractionDigits = 0) => {
   }
   return `${toFixedIfNotZero(val)}Y`
 }
+
+export const escapeCsvValue = (value: string | number | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return ''
+  }
+  const stringValue = String(value)
+  if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+    return `"${stringValue.replace(/"/g, '""')}"`
+  }
+  return stringValue
+}

package/src/functions/markdown.ts

@@ -16,26 +16,57 @@ import remarkGfm from 'remark-gfm'
 import strip from 'strip-markdown'
 
 // Copied from https://github.com/potato4d/rehype-plugin-image-native-lazy-loading/blob/v1.2.0/src/index.ts
-function lazyLoadPlugin(this: Processor): Transformer {
-  function visitor(el: hast.Element) {
-    if (el.tagName !== 'img') {
-      return
-    }
-    el.properties = {
-      ...(el.properties || {}),
-      loading: 'lazy',
-    }
+function rehypeLazyLoad(this: Processor): Transformer {
+  return function transformer(htmlAST: Node): Node {
+    visit(htmlAST, 'element', function visitor(el: hast.Element) {
+      if (el.tagName !== 'img') {
+        return
+      }
+      el.properties = {
+        ...(el.properties || {}),
+        loading: 'lazy',
+      }
+    })
+    return htmlAST
   }
+}
+
+function rehypeNoHeadings(this: Processor): Transformer {
+  return function transformer(htmlAST: Node): Node {
+    visit(htmlAST, 'element', function visitor(el: hast.Element) {
+      if (el.tagName !== 'h1' && el.tagName !== 'h2' && el.tagName !== 'h3' && el.tagName !== 'h4' && el.tagName !== 'h5' && el.tagName !== 'h6') {
+        return
+      }
+
+      const classes = {
+        h1: 'text-3xl leading-8',
+        h2: 'text-2xl leading-7',
+        h3: 'text-xl leading-6',
+        h4: 'text-base',
+        h5: 'text-sm leading-6',
+        h6: 'text-sm leading-6',
+      }[el.tagName]
 
-  function transformer(htmlAST: Node): Node {
-    visit(htmlAST, 'element', visitor)
+      el.properties = {
+        ...(el.properties || {}),
+        class: `font-extrabold ${classes}`,
+      }
+      el.tagName = 'div'
+    })
     return htmlAST
   }
-
-  return transformer
 }
 
-export function formatMarkdown(md: string, minDepth = 3) {
+export function formatMarkdown(md: string, config: number | { minDepth: number, noHeadings: boolean } = 3) {
+  let minDepth: number
+  let noHeadings = false
+  if (typeof config === 'number') {
+    minDepth = config
+  }
+  else {
+    minDepth = config.minDepth
+    noHeadings = config.noHeadings
+  }
   const result = unified()
     .use(behead, { minDepth: minDepth > 1 ? minDepth : undefined } as Options)
     // Take Markdown as input and turn it into MD syntax tree
@@ -55,14 +86,14 @@ export function formatMarkdown(md: string, minDepth = 3) {
     .use(rehypeSanitize)
     // Serialize syntax tree to HTML
     .use(rehypeStringify)
-    .use(lazyLoadPlugin)
+    .use(noHeadings ? [rehypeLazyLoad, rehypeNoHeadings] : [rehypeLazyLoad])
     // And finally, process the input
     .processSync(md)
 
   return String(result)
 }
 
-export async function removeMarkdown(text: string) {
+export async function removeMarkdownAsync(text: string) {
   const file = await unified()
     // Take Markdown as input and turn it into MD syntax tree
     .use(remarkParse, { fragment: true })
@@ -73,6 +104,19 @@ export async function removeMarkdown(text: string) {
   return String(file)
 }
 
+export function removeMarkdownSync(text: string) {
+  const file = unified()
+    // Take Markdown as input and turn it into MD syntax tree
+    .use(remarkParse, { fragment: true })
+    .use(remarkGfm)
+    .use(strip)
+    .use(remarkStringify)
+    .processSync(text)
+  return String(file)
+}
+
+export { removeMarkdownAsync as removeMarkdown }
+
 const prose = 'prose prose-neutral max-w-none prose-strong:text-gray-plain'
 const proseSm = 'prose-p:text-sm prose-sm'
 const proseTable = 'prose-table:bg-gray-some prose-table:overflow-visible prose-thead:border-b-2 prose-thead:border-black prose-tr:data-[is-header=true]:border-b-2 prose-tr:data-[is-header=true]:border-black prose-tr:even:bg-gray-lower prose-tr:border-b-0 *:prose-th:m-0 *:prose-td:m-0 prose-th:p-4 prose-td:p-4'

package/src/functions/metrics.ts

@@ -1,3 +1,8 @@
+import { escapeCsvValue } from './helpers'
+import { ofetch } from 'ofetch'
+import type { DatasetV2 } from '../types/datasets'
+import type { PaginatedArray } from '../types/api'
+
 export type OrganizationMetrics = {
   downloads: Record<string, number>
   downloadsTotal: number
@@ -114,6 +119,34 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+  let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
+
+  // fetch datasets info from organization datasets
+  const datasets: Record<string, Record<string, string>> = {}
+  let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
+  while (datasetsUrl) {
+    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    datasetsUrl = body.next_page
+    for (const row of body.data) {
+      datasets[row.id] = { title: row.title }
+    }
+  }
+
+  // fetch datasets metrics for the organization
+  let metricsUrl: string | null = `${metricsApi}/api/datasets/data/?organization_id__exact=${organizationId}&metric_month__sort=desc&page_size=50`
+  while (metricsUrl) {
+    const body: { links: { next: string | null }, data: Array<{ dataset_id: string, metric_month: string, monthly_visit: number, monthly_download_resource: number }> } = await ofetch(metricsUrl)
+    metricsUrl = body.links.next
+    for (const row of body.data) {
+      const datasetTitle = datasets[row.dataset_id]?.title || ''
+      data += `${escapeCsvValue(datasetTitle)},${escapeCsvValue(row.dataset_id)},${escapeCsvValue(row.metric_month)},${row.monthly_visit},${row.monthly_download_resource}\n`
+    }
+  }
+
+  return URL.createObjectURL(new Blob([data], { type: 'text/csv' }))
+}
+
 export async function getDataserviceMetrics(dataserviceId: string, metricsApi: string): Promise<DataserviceMetrics> {
   // Fetching last 12 months
   const response = await fetch(`${metricsApi}/api/dataservices/data/?dataservice_id__exact=${dataserviceId}&metric_month__sort=desc&page_size=12`)

package/src/functions/organizations.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'vue'
 import { RiBankLine, RiBuilding2Line, RiCommunityLine, RiGovernmentLine, RiUserLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
-import type { OrganizationReference } from '../types/organizations'
+import type { Organization, OrganizationReference } from '../types/organizations'
 import { useTranslation } from '../composables/useTranslation'
 
 export const CERTIFIED = 'certified'
@@ -22,11 +22,11 @@ function constructUrl(baseUrl: string, path: string): string {
   return url.toString()
 }
 
-export function isType(organization: OrganizationReference, type: OrganizationTypes) {
+export function isType(organization: Organization | OrganizationReference, type: OrganizationTypes) {
   return hasBadge(organization, type)
 }
 
-export function hasBadge(organization: OrganizationReference, kind: string) {
+export function hasBadge(organization: Organization | OrganizationReference, kind: string) {
   return organization.badges.some(badge => badge.kind === kind)
 }
 
@@ -68,7 +68,7 @@ export function findOrganizationType(searched: OrganizationTypes | UserType) {
   return getOrganizationTypes().find(type => type.type === searched)!
 }
 
-export function getOrganizationType(organization: OrganizationReference): OrganizationTypes {
+export function getOrganizationType(organization: Organization | OrganizationReference): OrganizationTypes {
   if (isType(organization, LOCAL_AUTHORITY)) {
     return LOCAL_AUTHORITY
   }
@@ -86,7 +86,7 @@ export function getOrganizationType(organization: OrganizationReference): Organi
   }
 }
 
-export function isOrganizationCertified(organization: OrganizationReference | null): boolean {
+export function isOrganizationCertified(organization: Organization | OrganizationReference | null): boolean {
   if (!organization) return false
   return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
 }

package/src/functions/resourceCapabilities.ts

@@ -0,0 +1,55 @@
+import type { Resource, WfsMetadata, OgcLayerInfo } from '../types/resources'
+
+const WFS_EXPORT_FORMATS = [
+  {
+    name: 'csv',
+    mimetype: 'csv',
+  },
+  {
+    name: 'json',
+    mimetype: 'application/json',
+  },
+  {
+    name: 'shp',
+    mimetype: 'SHAPE-ZIP',
+  },
+  {
+    name: 'gml',
+    mimetype: 'application/gml+xml',
+  },
+  {
+    name: 'kml',
+    mimetype: 'KML',
+  },
+  {
+    name: 'gpkg',
+    mimetype: 'application/geopackage+sqlite3',
+  },
+]
+
+function buildWfsDownloadUrl(baseUrl: string, wfsMetadata: WfsMetadata, format: { name: string, mimetype: string }, layer: OgcLayerInfo) {
+  const version = wfsMetadata.version
+  const query = new URLSearchParams({
+    SERVICE: 'WFS',
+    REQUEST: 'GetFeature',
+    VERSION: version,
+    ...(Number(version.split('.')[0]) >= 2 ? { TYPENAMES: layer.name } : { TYPENAME: layer.name }),
+    OUTPUTFORMAT: format.mimetype,
+    ...(layer.default_crs ? { SRSNAME: layer.default_crs } : {}),
+  })
+  return `${baseUrl.split('?')[0]}?${query.toString()}`
+}
+
+export function getWfsExportFormats(resource: Pick<Resource, 'extras' | 'url'>) {
+  const wfsMetadata = resource.extras['analysis:parsing:ogc_metadata'] as WfsMetadata | null
+  if (!wfsMetadata || wfsMetadata.format !== `wfs`) return []
+  const outputFormats = wfsMetadata.output_formats.map((format: string) => format.toLowerCase())
+  const layer = wfsMetadata.detected_layer
+  if (!layer) return []
+  const formats = WFS_EXPORT_FORMATS.filter(format => outputFormats.includes(format.mimetype.toLowerCase()))
+    .map(format => ({
+      url: buildWfsDownloadUrl(resource.url, wfsMetadata, format, layer),
+      format: format.name,
+    }))
+  return formats
+}