@datagouv/components-next 1.0.2-dev.7 → 1.0.2-dev.71

package/dist/{vue3-xml-viewer.common-BRxsqI9j.js → vue3-xml-viewer.common-sHPSE-jD.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-B2kXxWRG.js";
+import { c as Ke } from "./main-K-42Oe8-.js";
 import We from "vue";
 function Fe(I, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.7",
+  "version": "1.0.2-dev.71",
   "private": false,
   "type": "module",
   "engines": {
@@ -16,15 +16,16 @@
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.8",
-    "@types/leaflet": "^1.9.17",
+    "@floating-ui/vue": "^1.1.11",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/router": "^13.1.0",
+    "@types/leaflet": "^1.9.17",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
+    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
@@ -45,16 +46,14 @@
     "remark-rehype": "^11.1.2",
     "strip-markdown": "^6.0.0",
     "stylefire": "^7.0.3",
-    "swagger-ui-dist": "^5.27.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
-    "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
-    "vue3-xml-viewer": "^0.0.14"
+    "vue3-xml-viewer": "^0.0.14",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@intlify/cli": "^0.13.1",
@@ -71,13 +70,20 @@
     "eslint-plugin-vue": "^10.0",
     "jiti": "^2.4.2",
     "npm-run-all2": "^8.0",
+    "openapi-types": "^12.1.3",
     "prettier": "^3.0.0",
     "tailwindcss": "^4.0.8",
-    "typescript": "^5.7.3",
+    "typescript": "^5.9.3",
     "vite": "^7.0",
     "vite-plugin-vue-devtools": "^8.0",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.4",
     "vue-tsc": "^3.0"
   },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0 || ^5.0.0"
+  },
   "scarfSettings": {
     "enabled": false
   },

package/src/components/ActivityList/ActivityList.vue

@@ -90,7 +90,6 @@
           :total-results="activities.total"
           :page-size="activities.page_size"
           :page="activities.page"
-          :link="getLink"
           @change="(newPage: number) => page = newPage"
         />
       </template>
@@ -117,7 +116,6 @@ import { useTranslation } from '../../composables/useTranslation'
 import { getActivityTranslation } from '../../functions/activities'
 import { useFetch } from '../../functions/api'
 import { useFormatDate } from '../../functions/dates'
-import { getLink } from '../../functions/pagination'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'

package/src/components/Chart/ChartViewer.vue

@@ -0,0 +1,226 @@
+<template>
+  <div
+    ref="chartContainer"
+    class="w-full min-h-96"
+  />
+</template>
+
+<script setup lang="ts">
+import { format, use, type ComposeOption } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart, BarChart, type BarSeriesOption, type LineSeriesOption } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components'
+import { init, type ECharts as EChartsType } from 'echarts'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { summarize } from '../../functions/helpers'
+import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+
+use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
+
+const props = defineProps<{
+  chart: Chart | ChartForApi
+  series: {
+    data: Record<string, Array<Record<string, unknown>>>
+    columns: Record<string, Array<string>>
+  }
+}>()
+
+const { locale } = useTranslation()
+const chartContainer = ref<HTMLElement | null>(null)
+let echartsInstance: EChartsType | null = null
+
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
+  if (!xAxis) return 'category'
+  return (xAxis.type ?? 'discrete') === 'continuous' ? 'value' : 'category'
+}
+
+function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
+  return (value: number) => {
+    const v = summarize(value)
+    if (!yAxis.unit) return v
+    if (yAxis.unit_position === 'prefix') return `${yAxis.unit} ${v}`
+    return `${v} ${yAxis.unit}`
+  }
+}
+
+const echartsOption = computed(() => {
+  const seriesCount = props.chart.series.length
+  if (!props.chart.series || seriesCount === 0) return
+
+  const seriesArray = props.chart.series.map((s) => {
+    const xColumn = s.column_x_name_override ?? props.chart.x_axis.column_x
+    const yColumn = s.aggregate_y ? `${s.column_y}__${s.aggregate_y}` : s.column_y
+    const resourceId = s.resource_id
+
+    if (!xColumn || !yColumn || !resourceId || !s.type || !props.series.data[resourceId] || !props.series.columns[resourceId]) {
+      return null
+    }
+
+    const sortedData = [...props.series.data[resourceId]]
+    const sortBy = props.chart.x_axis.sort_x_by
+    const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
+
+    if (sortBy && sortDirection && props.chart.x_axis.column_x) {
+      const sortKey = sortBy === 'axis_x' ? xColumn : yColumn
+      sortedData.sort((a, b) => {
+        const valA = a[sortKey]
+        const valB = b[sortKey]
+
+        const aNullish = valA === null || valA === undefined
+        const bNullish = valB === null || valB === undefined
+        if (aNullish && bNullish) return 0
+        if (aNullish) return sortDirection === 'asc' ? -1 : 1
+        if (bNullish) return sortDirection === 'asc' ? 1 : -1
+
+        if (valA instanceof Date && valB instanceof Date) {
+          const timeA = valA.getTime()
+          const timeB = valB.getTime()
+          if (timeA < timeB) return sortDirection === 'asc' ? -1 : 1
+          if (timeA > timeB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        if (typeof valA === 'boolean' && typeof valB === 'boolean') {
+          if (valA === valB) return 0
+          // false comes before true in ascending order
+          if (valB) return sortDirection === 'asc' ? -1 : 1
+          return sortDirection === 'asc' ? 1 : -1
+        }
+
+        const numA = Number(valA)
+        const numB = Number(valB)
+        const bothNumeric = !isNaN(numA) && !isNaN(numB)
+
+        if (bothNumeric) {
+          if (numA < numB) return sortDirection === 'asc' ? -1 : 1
+          if (numA > numB) return sortDirection === 'asc' ? 1 : -1
+          return 0
+        }
+
+        const strA = String(valA)
+        const strB = String(valB)
+        return strA.localeCompare(strB, locale, {
+          sensitivity: 'base',
+          numeric: true,
+        }) * (sortDirection === 'asc' ? 1 : -1)
+      })
+    }
+
+    return {
+      series: {
+        type: s.type === 'histogram' ? 'bar' : 'line',
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+        name: yColumn,
+        encode: {
+          x: xColumn,
+          y: yColumn,
+        },
+      } as LineSeriesOption | BarSeriesOption,
+      data: {
+        source: sortedData,
+        dimensions: s.aggregate_y ? [xColumn, yColumn] : props.series.columns[resourceId],
+      },
+    }
+  })
+
+  const seriesData = {
+    series: [] as Array<LineSeriesOption | BarSeriesOption>,
+    data: [] as Array<Record<string, unknown>>,
+  }
+
+  for (const curr of seriesArray) {
+    if (!curr) continue
+    seriesData.series.push(curr.series)
+    seriesData.data.push(curr.data)
+  }
+
+  return {
+    dataset: [...seriesData.data],
+    title: {
+      text: props.chart.title,
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'axis' as const,
+      formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
+        let tooltip = ''
+        const formatter = new Intl.NumberFormat('fr-FR')
+        for (const param of params) {
+          const seriesName = param.seriesName
+          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[seriesName]))}</strong><br>`
+        }
+        return tooltip
+      },
+    },
+    legend: {
+      show: seriesData.series.length > 1,
+      bottom: 0,
+    },
+    grid: {
+      top: 60,
+      bottom: 40,
+      left: 20,
+      right: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: mapXAxisType(props.chart.x_axis),
+      name: (props.chart.x_axis as XAxis).column_x,
+    },
+    yAxis: {
+      type: 'value' as const,
+      name: props.chart.y_axis.label ?? undefined,
+      min: props.chart.y_axis.min ?? undefined,
+      max: props.chart.y_axis.max ?? undefined,
+      axisLabel: {
+        formatter: buildYAxisFormatter(props.chart.y_axis),
+      },
+    },
+    series: seriesData.series,
+  } satisfies ComposeOption<
+    | BarSeriesOption
+    | LineSeriesOption
+  >
+})
+
+onMounted(() => {
+  if (chartContainer.value) {
+    echartsInstance = init(chartContainer.value)
+    updateChart()
+  }
+})
+
+onUnmounted(() => {
+  if (echartsInstance) {
+    echartsInstance.dispose()
+    echartsInstance = null
+  }
+})
+
+watch(() => props.chart, updateChart, { deep: true })
+
+watch(() => props.series, updateChart, { deep: true })
+
+function updateChart() {
+  if (!echartsInstance) return
+  const option = echartsOption.value
+  if (option) {
+    echartsInstance.setOption(option, { notMerge: true })
+  }
+}
+
+const handleResize = () => {
+  if (echartsInstance) {
+    echartsInstance.resize()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>

package/src/components/Chart/ChartViewerWrapper.vue

@@ -0,0 +1,170 @@
+<template>
+  <LoadingBlock
+    :status="status"
+    :data="series"
+  >
+    <template #default="{ data }">
+      <ChartViewer
+        :chart="chart"
+        :series="data"
+      />
+    </template>
+    <template #error>
+      <div class="text-center py-8 text-gray-500">
+        {{ t('Une erreur est survenue lors du chargement des données du graphique.') }}
+      </div>
+    </template>
+  </LoadingBlock>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import ChartViewer from './ChartViewer.vue'
+import LoadingBlock from '../../components/LoadingBlock.vue'
+import { useComponentsConfig } from '../../config'
+import { fetchTabularData, useGetProfile } from '../../functions/tabularApi'
+import type { Chart, ChartForApi } from '../../types/visualizations'
+import { useTranslation } from '../../composables/useTranslation'
+
+const props = defineProps<{
+  chart: Chart | ChartForApi
+}>()
+
+const emit = defineEmits<{
+  columns: [columns: Record<string, Array<string>>]
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const getProfile = useGetProfile()
+
+const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
+const error = ref<Error | null>(null)
+
+const pendingOperations = ref(0)
+
+const series = reactive<{
+  data: Record<string, Array<Record<string, unknown>>>
+  columns: Record<string, Array<string>>
+}>({
+  data: {},
+  columns: {},
+})
+
+async function fetchSeriesProfile() {
+  pendingOperations.value++
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (props.chart.series.length === 0) {
+      status.value = 'success'
+      series.data = {}
+      series.columns = {}
+      return
+    }
+
+    const fetchPromises = props.chart.series
+      .filter(serie => serie.resource_id)
+      .map(async (serie) => {
+        return {
+          id: serie.resource_id,
+          profile: await getProfile(serie.resource_id),
+        }
+      })
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    series.columns = Object.fromEntries(results.map(result => [
+      result.id,
+      result.profile.profile.header,
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series profile')
+    status.value = 'error'
+    console.error(err)
+    series.columns = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+async function fetchSeriesData() {
+  pendingOperations.value++
+  status.value = 'pending'
+  error.value = null
+
+  try {
+    if (props.chart.series.length === 0 || !props.chart.x_axis.column_x) {
+      status.value = 'success'
+      series.data = {}
+      return
+    }
+
+    const fetchPromises = props.chart.series
+      .filter((serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        return xColumn && serie.resource_id && serie.column_y
+      })
+      .map(async (serie) => {
+        const xColumn = serie.column_x_name_override ?? props.chart.x_axis.column_x
+        return {
+          id: serie.resource_id,
+          data: await fetchTabularData(config, {
+            columns: serie.aggregate_y ? undefined : [xColumn, serie.column_y],
+            resourceId: serie.resource_id,
+            page: 1,
+            pageSize: 100,
+            groupBy: xColumn,
+            aggregation: serie.column_y && serie.aggregate_y
+              ? {
+                  column: serie.column_y,
+                  type: serie.aggregate_y,
+                }
+              : undefined,
+            filters: serie.filters ?? undefined,
+          }),
+        }
+      })
+
+    const results = (await Promise.allSettled(fetchPromises))
+      .filter(r => r.status === 'fulfilled')
+      .map(r => r.value)
+    series.data = Object.fromEntries(results.map(result => [
+      result.id,
+      result.data.data,
+    ]))
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err : new Error('Failed to fetch series data')
+    status.value = 'error'
+    series.data = {}
+  }
+  finally {
+    pendingOperations.value--
+  }
+}
+
+watch(() => props.chart.series, async () => {
+  await fetchSeriesProfile()
+}, { immediate: true, deep: true })
+
+watch([() => props.chart.series, () => props.chart.x_axis.column_x], async () => {
+  await fetchSeriesData()
+}, { immediate: true, deep: true })
+
+watch(() => series.columns, () => {
+  emit('columns', series.columns)
+})
+
+watch(pendingOperations, (count) => {
+  if (count === 0) {
+    if (error.value === null && status.value === 'pending') {
+      status.value = 'success'
+    }
+  }
+})
+</script>

package/src/components/Form/Listbox.vue

@@ -0,0 +1,101 @@
+<template>
+  <Listbox v-model="model">
+    <div class="relative min-w-0">
+      <div
+        ref="floatingReference"
+        class="relative w-full cursor-default overflow-hidden bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ListboxButton class="input shadow-input text-sm flex items-center gap-2">
+          <slot name="button">
+            <div class="w-full flex items-center justify-between gap-2">
+              <div
+                class="truncate"
+                :class="{ 'text-new-disabled-text': isDisabled(model) }"
+              >
+                {{ displayValue(model) }}
+              </div>
+              <RiArrowDownSLine class="flex-none size-4 justify-self-end" />
+            </div>
+          </slot>
+        </ListboxButton>
+      </div>
+
+      <ListboxOptions
+        ref="popover"
+        :style="floatingStyles"
+        class="z-10 mt-1 absolute max-h-60 min-w-80 w-full overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm pl-0"
+      >
+        <ListboxOption
+          v-for="option in options"
+          :key="getOptionId(toValue(option))"
+          v-slot="{ active, selected }"
+          as="template"
+          :value="option"
+        >
+          <li
+            class="relative cursor-default select-none py-2 pr-4 list-none flex items-center gap-2 text-gray-900"
+            :class="{
+              'bg-gray-lower': active && !isDisabled(toValue(option)),
+              'text-new-disabled-text': isDisabled(toValue(option)),
+              'pl-2': selected,
+              'pl-6': !selected,
+            }"
+          >
+            <div class="flex items-center justify-center aspect-square">
+              <RiCheckLine
+                v-if="selected"
+                class="size-4"
+                :class="isDisabled(toValue(option)) ?' text-new-disabled-text' : 'text-new-primary'"
+              />
+            </div>
+            <slot
+              name="option"
+              v-bind="{ option, active }"
+            >
+              {{ displayValue(option) }}
+            </slot>
+          </li>
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | object">
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { toValue, useTemplateRef } from 'vue'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/vue'
+
+withDefaults(defineProps<{
+  options?: Array<T>
+  getOptionId?: (option: T) => string | number
+  displayValue: (option: T | null) => string
+  isDisabled?: (option: T | null) => boolean
+}>(), {
+  getOptionId: (option: T): string | number => {
+    if (typeof option === 'string') return option
+    if (typeof option === 'number') return option
+    if (typeof option === 'object' && 'id' in option) return option.id as string
+
+    throw new Error('Please set getOptionId()')
+  },
+  isDisabled: (option: T | null): boolean => {
+    if (option && typeof option === 'object' && 'disabled' in option) return option.disabled as boolean
+
+    return false
+  },
+})
+
+const model = defineModel<T | null>({ required: true })
+
+const referenceRef = useTemplateRef('floatingReference')
+const floatingRef = useTemplateRef<InstanceType<typeof ListboxOptions>>('popover')
+const { floatingStyles } = useFloating(referenceRef, floatingRef, {
+  middleware: [autoPlacement({
+    allowedPlacements: ['bottom-start', 'bottom', 'bottom-end'],
+    crossAxis: true,
+  })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/Form/SearchableSelect.vue

@@ -10,8 +10,9 @@
       :class="{ 'sr-only': hideLabel }"
     >
       {{ label }}
+      <!-- $props needed: in generic components, vue-tsc resolves `required` to the Nuxt auto-imported function instead of the prop -->
       <span
-        v-if="required"
+        v-if="$props.required"
         class="text-new-primary"
       >*</span>
       <span

package/src/components/InfiniteLoader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="sentinel">
+    <slot>
+      <div class="flex items-center justify-center p-4">
+        <span class="inline-flex items-center gap-2 text-xs text-gray-medium">
+          <RiLoader4Line
+            class="size-4 animate-spin"
+            aria-hidden="true"
+          />
+          {{ t('Chargement…') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { RiLoader4Line } from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+
+const props = defineProps<{
+  root?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const { t } = useTranslation()
+
+const sentinelRef = useTemplateRef<HTMLElement>('sentinel')
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  const el = sentinelRef.value
+  if (!el) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting) {
+        emit('intersect')
+      }
+    },
+    { root: props.root ?? null, rootMargin: '200px' },
+  )
+  observer.observe(el)
+}
+
+onMounted(setupObserver)
+watch([sentinelRef, () => props.root], setupObserver)
+onUnmounted(() => observer?.disconnect())
+</script>