@datagouv/components-next 0.2.0 → 1.0.1

package/src/components/Search/SearchInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="fr-search-bar fr-search-bar--lg w-full">
+    <label
+      class="sr-only"
+      :for="id"
+    >
+      {{ t('Recherche') }}
+    </label>
+    <input
+      :id="id"
+      ref="inputRef"
+      v-model="q"
+      type="search"
+      name="q"
+      class="input max-h-12 m-0 rounded-tl shadow-input-blue"
+      :aria-label="placeholder || t('Rechercher...')"
+      :placeholder="placeholder || t('Rechercher...')"
+    >
+    <BrandedButton
+      class="rounded-l-none rounded-br-none rounded-tr min-h-12"
+      size="lg"
+      color="primary"
+      :icon="RiSearchLine"
+      icon-only-on-mobile
+      type="submit"
+    >
+      {{ t('Recherche') }}
+    </BrandedButton>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, useId, useTemplateRef } from 'vue'
+import { RiSearchLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import BrandedButton from '../BrandedButton.vue'
+
+const q = defineModel<string>({ required: true })
+
+withDefaults(defineProps<{
+  placeholder?: string
+  autoFocus?: boolean
+}>(), {
+  autoFocus: true,
+})
+
+const { t } = useTranslation()
+
+const id = useId()
+
+const input = useTemplateRef<HTMLInputElement>('inputRef')
+
+const focus = () => {
+  input.value?.focus({
+    preventScroll: true,
+  })
+}
+
+onMounted(async () => {
+  await nextTick()
+  focus()
+})
+</script>

package/src/components/Search/Sidemenu.vue

@@ -0,0 +1,38 @@
+<template>
+  <nav :aria-labelledby="titleId">
+    <button
+      class="flex w-[calc(100%+2rem)] items-center justify-between -mx-4 px-4 py-3 font-bold md:hidden"
+      :aria-expanded="open"
+      @click="open = !open"
+    >
+      {{ buttonText }}
+      <RiArrowDownSLine
+        class="size-4 transition-transform"
+        :class="{ 'rotate-180': open }"
+      />
+    </button>
+    <div v-if="open || !isMobile">
+      <p
+        :id="titleId"
+        class="text-sm font-bold leading-tight mb-6 hidden md:block"
+      >
+        <slot name="title" />
+      </p>
+      <slot />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useMediaQuery } from '@vueuse/core'
+
+defineProps<{
+  buttonText: string
+}>()
+
+const titleId = useId()
+const isMobile = useMediaQuery('(max-width: 767px)')
+const open = ref(false)
+</script>

package/src/components/StatBox.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="size === 'sm'">
-    <h3 class="text-sm font-bold m-0">
+    <p class="text-sm font-bold m-0">
       {{ title }}
-    </h3>
+    </p>
     <div class="flex flex-wrap items-center">
       <ContentLoader
         v-if="summary === null"
@@ -82,9 +82,9 @@
       'text-gray-medium': !changesThisYear && !summary,
     }"
   >
-    <h3 class="text-sm m-0">
+    <p class="text-sm m-0">
       {{ title }}
-    </h3>
+    </p>
     <div class="flex flex-wrap items-center">
       <ContentLoader
         v-if="summary === null"
@@ -140,7 +140,7 @@
     </div>
     <p
       v-if="lastValue && lastMonth"
-      class="mt-2 font-normal text-transform-none fr-badge fr-badge--no-icon fr-badge--success"
+      class="mt-2 font-normal normal-case fr-badge fr-badge--no-icon fr-badge--success"
     >
       <strong class="mr-1">
         + {{ summarize(lastValue, 2) }}

package/src/components/Tag.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    class="inline-flex items-center space-x-1 text-xs rounded-xl px-2 py-0.5"
+    :class="classes"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      class="size-3"
+    />
+    <span class="-mt-px">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+
+const props = defineProps<{
+  icon?: Component
+  type: 'secondary'
+}>()
+
+const classes = computed(() => {
+  return {
+    secondary: 'text-gray-title bg-gray-lower',
+  }[props.type]
+})
+</script>

package/src/components/Toggletip.vue

@@ -13,11 +13,16 @@
     />
     <PopoverButton
       v-bind="buttonProps"
-      class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some"
-      :class="{ 'w-8 h-8 rounded-full bg-transparent': styledButton }"
+      :class="[
+        buttonClass ?? 'border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some',
+        { 'w-8 h-8 rounded-full bg-transparent': styledButton && !buttonClass },
+      ]"
     >
       <slot>
-        <RiInformationLine class="size-5" />
+        <RiInformationLine
+          class="size-5"
+          aria-hidden="true"
+        />
       </slot>
     </PopoverButton>
 
@@ -26,9 +31,10 @@
         <PopoverPanel
           v-show="open"
           ref="panel"
-          class="toggletip absolute z-[800]"
+          class="drop-shadow bg-white rounded-sm w-96 absolute z-[800]"
           :class="{
             'p-0': noMargin,
+            'p-3': !noMargin,
           }"
           :style="floatingStyles"
           static
@@ -53,6 +59,7 @@ import ValueWatcher from './ValueWatcher.vue'
 
 withDefaults(defineProps<{
   buttonProps?: object
+  buttonClass?: string
   noMargin?: boolean
   styledButton?: boolean
 }>(), {

package/src/components/Tooltip.vue

@@ -6,14 +6,13 @@
     @focusout="show = false"
     @mouseleave="show = false"
   >
-    <p
+    <span
       ref="reference"
       v-bind="$attrs"
       :aria-describedby="id"
-      class="!mb-0"
     >
       <slot />
-    </p>
+    </span>
 
     <div
       v-if="show"

package/src/components/TopicCard.vue

@@ -0,0 +1,134 @@
+<template>
+  <ObjectCard>
+    <template
+      v-if="showLogo"
+      #media
+    >
+      <OrganizationLogo
+        v-if="topic.organization"
+        :organization="topic.organization"
+        size-class="size-12"
+      />
+      <Avatar
+        v-else-if="topic.owner"
+        :user="topic.owner"
+        :size="48"
+      />
+      <Placeholder
+        v-else
+        type="Topic"
+        class="size-12"
+      />
+    </template>
+
+    <ObjectCardHeader
+      :icon="RiBookShelfLine"
+      :url="topicUrl || topic.page || '#'"
+    >
+      {{ topic.name }}
+    </ObjectCardHeader>
+
+    <div
+      v-if="topic.organization || topic.owner"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+    >
+      <ObjectCardOwner
+        :organization="topic.organization"
+        :owner="topic.owner"
+      />
+      <RiSubtractLine
+        v-if="(topic.organization || topic.owner) && topic.last_modified"
+        aria-hidden="true"
+        class="hidden md:block size-4 flex-none fill-gray-medium"
+      />
+      <div
+        v-if="topic.last_modified"
+        class="w-full md:w-auto text-gray-medium whitespace-nowrap"
+      >
+        {{ t('Mis à jour {date}', { date: formatDate(topic.last_modified) }) }}
+      </div>
+    </div>
+
+    <ObjectCardShortDescription :text="topic.description" />
+
+    <div
+      v-if="showStats && (topic.nb_datasets || topic.nb_dataservices || topic.nb_reuses)"
+      class="flex items-center gap-4 mt-2 text-xs text-gray-medium"
+    >
+      <div
+        v-if="topic.nb_datasets"
+        class="flex items-center gap-1"
+      >
+        <RiDatabase2Line
+          aria-hidden="true"
+          class="size-4"
+        />
+        <span>{{ topic.nb_datasets }}</span>
+      </div>
+
+      <div
+        v-if="topic.nb_dataservices"
+        class="flex items-center gap-1"
+      >
+        <RiTerminalLine
+          aria-hidden="true"
+          class="size-4"
+        />
+        <span>{{ topic.nb_dataservices }}</span>
+      </div>
+
+      <div
+        v-if="topic.nb_reuses"
+        class="flex items-center gap-1"
+      >
+        <RiLineChartLine
+          aria-hidden="true"
+          class="size-4"
+        />
+        <span>{{ topic.nb_reuses }}</span>
+      </div>
+    </div>
+
+    <slot />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { RiBookShelfLine, RiDatabase2Line, RiLineChartLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { TopicV2 } from '../types/topics'
+import { useFormatDate } from '../functions/dates'
+import { useTranslation } from '../composables/useTranslation'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardOwner from './ObjectCardOwner.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import OrganizationLogo from './OrganizationLogo.vue'
+import Avatar from './Avatar.vue'
+import Placeholder from './Placeholder.vue'
+import ObjectCard from './ObjectCard.vue'
+
+type TopicWithStats = TopicV2 & {
+  nb_datasets?: number
+  nb_dataservices?: number
+  nb_reuses?: number
+}
+
+withDefaults(defineProps<{
+  topic: TopicWithStats
+  topicUrl?: RouteLocationRaw
+  showLogo?: boolean
+  showStats?: boolean
+}>(), {
+  showLogo: true,
+  showStats: true,
+})
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const formatDate = (dateString: string) => {
+  return formatRelativeIfRecentDate(dateString, {
+    dateStyle: 'long',
+  })
+}
+</script>

package/src/components/radioGroupContext.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type RadioGroupContext = {
+  name: Ref<string>
+  modelValue: Ref<string>
+  select: (value: string) => void
+}
+
+export const radioGroupInjectionKey: InjectionKey<RadioGroupContext> = Symbol('radioGroup')

package/src/composables/useDebouncedRef.ts

@@ -0,0 +1,31 @@
+import { ref, readonly, watch, type Ref } from 'vue'
+
+/**
+ * Like VueUse's refDebounced but with a flush() method to force immediate sync.
+ * Useful when resetting filters - no need to wait for debounce delay.
+ */
+export function useDebouncedRef<T>(source: Ref<T>, delay: number) {
+  const debounced = ref(source.value) as Ref<T>
+  const debouncedReadonly = readonly(debounced)
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  watch(source, () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+    timeoutId = setTimeout(() => {
+      debounced.value = source.value
+      timeoutId = null
+    }, delay)
+  })
+
+  function flush() {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+    debounced.value = source.value
+  }
+
+  return { debounced: debouncedReadonly, flush }
+}

package/src/composables/useHasTabularData.ts

@@ -0,0 +1,15 @@
+import { useComponentsConfig } from '../config'
+import type { Resource } from '../types/resources'
+
+export const useHasTabularData = () => {
+  const config = useComponentsConfig()
+
+  return (resource: Resource) => {
+    return (
+      config.tabularApiUrl
+      && resource.extras['analysis:parsing:parsing_table']
+      && !resource.extras['analysis:parsing:error']
+      && (config.tabularAllowRemote || resource.filetype === 'file')
+    )
+  }
+}

package/src/composables/useMetrics.ts

@@ -1,11 +1,11 @@
 import { useComponentsConfig } from '../config'
-import { getOrganizationMetrics, getDatasetMetrics, getDataserviceMetrics, getReuseMetrics } from '../functions/metrics'
+import { getOrganizationMetrics, getDatasetMetrics, getDataserviceMetrics, getReuseMetrics, createDatasetsForOrganizationMetricsUrl } from '../functions/metrics'
 
 export function useMetrics() {
   const config = useComponentsConfig()
 
-  if (!config.metricsApiUrl) {
-    throw new Error('metricsApiUrl is not configured in @datagouv/components-next')
+  if (!config.metricsApiUrl || !config.apiBase) {
+    throw new Error('metricsApiUrl and apiBase must be configured in @datagouv/components-next')
   }
 
   return {
@@ -13,5 +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),
   }
 }

package/src/composables/useResourceCapabilities.ts

@@ -0,0 +1,131 @@
+import { computed, toValue, type MaybeRefOrGetter } 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'
+
+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']
+
+export function useResourceCapabilities(
+  resource: MaybeRefOrGetter<Resource>,
+  dataset: MaybeRefOrGetter<Dataset | DatasetV2>,
+) {
+  const config = useComponentsConfig()
+  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)
+  })
+
+  const hasPmtiles = computed(() => {
+    const r = toValue(resource)
+    return r.extras['analysis:parsing:pmtiles_url'] || r.format === 'pmtiles'
+  })
+
+  const hasDatafairPreview = computed(() => {
+    const d = toValue(dataset)
+    const r = toValue(resource)
+    return isOrganizationCertified(d.organization) && r.extras['datafairEmbed']
+  })
+
+  const hasOpenAPIPreview = computed(() => {
+    const d = toValue(dataset)
+    const r = toValue(resource)
+    return isOrganizationCertified(d.organization) && r.extras['apidocUrl']
+  })
+
+  const ogcService = computed(() => detectOgcService(toValue(resource)))
+  const ogcWms = computed(() => ogcService.value === 'wms')
+
+  const generatedFormats = computed(() => {
+    const r = toValue(resource)
+    const formats = GENERATED_FORMATS
+      .filter(format => `analysis:parsing:${format}_url` in r.extras)
+      .map(format => ({
+        url: r.extras[`analysis:parsing:${format}_url`] as string,
+        size: r.extras[`analysis:parsing:${format}_size`] as number | undefined,
+        format,
+      }))
+    if ('analysis:parsing:parsing_table' in r.extras) {
+      formats.push({
+        url: `${config.tabularApiUrl}/api/resources/${r.id}/data/json/`,
+        size: undefined,
+        format: 'json',
+      })
+    }
+    return formats
+  })
+
+  const wfsFormats = computed(() => {
+    return getWfsExportFormats(toValue(resource))
+  })
+
+  const defaultWfsProjection = computed<string | null>(() => {
+    const r = toValue(resource)
+    const wfsMetadata = r.extras['analysis:parsing:ogc_metadata'] as WfsMetadata | null
+    if (!wfsMetadata || wfsMetadata.format !== `wfs`) return null
+    return wfsMetadata?.detected_layer?.default_crs ?? null
+  })
+
+  const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
+
+  const tabsOptions = computed(() => {
+    const r = toValue(resource)
+    const options = []
+
+    if (hasTabularData.value) {
+      options.push({ key: 'data', label: t('Données') })
+    }
+    else if (hasPreview.value || hasDatafairPreview.value || hasOpenAPIPreview.value) {
+      options.push({ key: 'data', label: t('Aperçu') })
+    }
+
+    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') })
+    }
+
+    return options
+  })
+
+  return {
+    hasPreview,
+    hasTabularData,
+    hasPmtiles,
+    hasDatafairPreview,
+    hasOpenAPIPreview,
+    ogcService,
+    ogcWms,
+    generatedFormats,
+    wfsFormats,
+    defaultWfsProjection,
+    isResourceUrl,
+    tabsOptions,
+  }
+}

package/src/composables/useRouteQueryBoolean.ts

@@ -0,0 +1,10 @@
+import { useRouteQuery } from '@vueuse/router'
+
+export function useRouteQueryBoolean(name: string) {
+  return useRouteQuery<string | undefined, boolean | undefined>(name, undefined, {
+    transform: {
+      get: v => v === 'true' ? true : v === 'false' ? false : undefined,
+      set: v => v === undefined ? undefined : String(v),
+    },
+  })
+}

package/src/composables/useSelectModelSync.ts

@@ -0,0 +1,89 @@
+import { ref, watch, type Ref } from 'vue'
+
+/**
+ * Syncs a model (full object) with an id (identifier only) bidirectionally.
+ * Used in *Select components where the parent binds via v-model:id but internally we need the full object.
+ */
+export function useSelectModelSync<T>(options: {
+  model: Ref<T | null>
+  id: Ref<string | undefined>
+  items: Ref<T[] | null | undefined>
+  getId: (item: T) => string
+}) {
+  const { model, id, items, getId } = options
+
+  watch(model, (newModel) => {
+    id.value = newModel ? getId(newModel) : undefined
+  })
+
+  watch([id, items], ([newId]) => {
+    if (!newId) {
+      model.value = null
+      return
+    }
+    if (model.value && getId(model.value) === newId) return
+    model.value = items.value?.find(item => getId(item) === newId) ?? null
+  }, { immediate: true })
+}
+
+/**
+ * Simplified sync for string-based selects where model and id are both strings.
+ */
+export function useStringSelectSync(options: {
+  model: Ref<string | null>
+  id: Ref<string | undefined>
+}) {
+  const { model, id } = options
+
+  watch(model, (newModel) => {
+    id.value = newModel ?? undefined
+  })
+
+  watch(id, (newId) => {
+    if (!newId) {
+      model.value = null
+      return
+    }
+    if (model.value === newId) return
+    model.value = newId
+  }, { immediate: true })
+}
+
+/**
+ * Sync with async fetch when id changes and model needs to be fetched.
+ * Returns a `fetching` ref for loading state.
+ */
+export function useAsyncSelectModelSync<T>(options: {
+  model: Ref<T | null>
+  id: Ref<string | undefined>
+  getId: (item: T) => string
+  fetchById: (id: string) => Promise<T | null>
+}) {
+  const { model, id, getId, fetchById } = options
+  const fetching = ref(false)
+
+  watch(model, (newModel) => {
+    id.value = newModel ? getId(newModel) : undefined
+  })
+
+  watch(id, async (newId) => {
+    if (!newId) {
+      model.value = null
+      return
+    }
+    if (model.value && getId(model.value) === newId) return
+
+    fetching.value = true
+    try {
+      model.value = await fetchById(newId)
+    }
+    catch {
+      model.value = null
+    }
+    finally {
+      fetching.value = false
+    }
+  }, { immediate: true })
+
+  return { fetching }
+}