@datagouv/components-next 1.1.2 → 1.3.0

package/dist/{vue3-json-viewer-BXwup7nO.js → vue3-json-viewer-CJLQFzXZ.js}

@@ -1,4 +1,4 @@
-import { defineComponent as T, ref as k, onMounted as J, h as g, watch as F, computed as O, inject as $, provide as q, createElementBlock as _, openBlock as N, normalizeClass as S, toDisplayString as A, resolveComponent as ie, createCommentVNode as Y, createElementVNode as z, renderSlot as ce, createTextVNode as pe, createVNode as fe, nextTick as de } from "vue";
+import { defineComponent as T, ref as k, onMounted as J, h as g, watch as F, computed as O, inject as $, provide as q, openBlock as _, createElementBlock as N, toDisplayString as A, normalizeClass as S, resolveComponent as ie, createElementVNode as z, renderSlot as ce, createTextVNode as pe, createCommentVNode as Y, createVNode as fe, nextTick as de } from "vue";
 const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/, X = T({
   name: "JsonString",
   props: {
@@ -66,7 +66,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = O(() => y.jsonValue === null ? "null" : "undefined");
-    return (p, d) => (N(), _("span", ye, A(c.value), 1));
+    return (p, d) => (_(), N("span", ye, A(c.value), 1));
   }
 }), he = /* @__PURE__ */ T({
   __name: "json-number",
@@ -79,7 +79,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = O(() => Number.isInteger(y.jsonValue));
-    return (p, d) => (N(), _("span", {
+    return (p, d) => (_(), N("span", {
       class: S(["jv-item", "jv-number", c.value ? "jv-number-integer" : "jv-number-float"])
     }, A(e.jsonValue.toString()), 3));
   }
@@ -95,7 +95,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", ge, A(e.jsonValue.toString()), 1));
+    return (y, c) => (_(), N("span", ge, A(e.jsonValue.toString()), 1));
   }
 }), je = T({
   name: "JsonObject",
@@ -277,7 +277,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", {
+    return (y, c) => (_(), N("span", {
       class: S(["jv-item", "jv-function"]),
       title: e.jsonValue.toString()
     }, " <function> ", 8, Ee));
@@ -295,7 +295,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
   },
   setup(e) {
     const y = e, c = $("timeformat", (d) => d.toLocaleString()), p = O(() => c(y.jsonValue));
-    return (d, i) => (N(), _("span", ke, ' "' + A(p.value) + '" ', 1));
+    return (d, i) => (_(), N("span", ke, ' "' + A(p.value) + '" ', 1));
   }
 }), Te = {
   class: /* @__PURE__ */ S(["jv-item", "jv-regexp"])
@@ -309,7 +309,7 @@ const ve = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)
     }
   },
   setup(e) {
-    return (y, c) => (N(), _("span", Te, A(e.jsonValue.toString()), 1));
+    return (y, c) => (_(), N("span", Te, A(e.jsonValue.toString()), 1));
   }
 }), I = T({
   name: "JsonBox",
@@ -421,12 +421,6 @@ function _e(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var H = { exports: {} };
-/*!
- * clipboard.js v2.0.11
- * https://clipboardjs.com/
- *
- * Licensed MIT © Zeno Rocha
- */
 var Ne = H.exports, Z;
 function Oe() {
   return Z || (Z = 1, (function(e, y) {
@@ -1041,10 +1035,10 @@ const Me = /* @__PURE__ */ _e(Ae), Ve = function(e, y) {
 };
 function Re(e, y, c, p, d, i) {
   const n = ie("json-box");
-  return N(), _("div", {
+  return _(), N("div", {
     class: S(e.jvClass)
   }, [
-    e.copyable ? (N(), _("div", {
+    e.copyable ? (_(), N("div", {
       key: 0,
       class: S(`jv-tooltip ${e.copyText.align || "right"}`)
     }, [
@@ -1067,7 +1061,7 @@ function Re(e, y, c, p, d, i) {
         "preview-mode": e.previewMode
       }, null, 8, ["value", "sort", "preview-mode"])
     ], 2),
-    e.expandableCode && e.boxed ? (N(), _("div", {
+    e.expandableCode && e.boxed ? (_(), N("div", {
       key: 1,
       class: "jv-more",
       onClick: y[0] || (y[0] = (...t) => e.toggleExpandCode && e.toggleExpandCode(...t))

package/dist/{vue3-xml-viewer.common-BGsoNyZe.js → vue3-xml-viewer.common-BIaEIFYG.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-D4WQMky0.js";
+import { b7 as Ke } from "./main-DKu5SOAl.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.1.2",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "engines": {
@@ -10,6 +10,12 @@
     "yarn": "use-pnpm-instead"
   },
   "main": "./src/main.ts",
+  "exports": {
+    ".": "./src/main.ts",
+    "./chart": "./src/chart.ts",
+    "./assets/*": "./assets/*",
+    "./dist/*": "./dist/*"
+  },
   "sideEffects": false,
   "files": [
     "assets",
@@ -19,22 +25,22 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.11",
     "@headlessui/vue": "^1.7.23",
-    "@remixicon/vue": "^4.5.0",
+    "@remixicon/vue": "^4.9.0",
     "@types/hast": "^3.0.4",
-    "@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.10",
+    "@types/leaflet": "^1.9.21",
+    "@vueuse/core": "^14.3.0",
+    "@vueuse/router": "^14.3.0",
+    "chart.js": "^4.5.1",
+    "dompurify": "^3.4.7",
+    "echarts": "^6.1.0",
+    "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",
-    "maplibre-gl": "^5.6.2",
-    "ofetch": "^1.4.1",
-    "ol": "^10.6.1",
+    "maplibre-gl": "^5.24.0",
+    "ofetch": "^1.5.1",
+    "ol": "^10.9.0",
     "pdfjs-dist": "^4.10.38",
-    "pmtiles": "^4.3.0",
-    "popmotion": "^11.0",
+    "pmtiles": "^4.4.1",
+    "popmotion": "^11.0.5",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -48,42 +54,43 @@
     "strip-markdown": "^6.0.0",
     "stylefire": "^7.0.3",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
+    "unist-util-visit": "^5.1.0",
     "vue-content-loader": "^2.0.1",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
     "vue3-xml-viewer": "^0.0.14",
-    "yaml": "^2.8.2"
+    "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@intlify/cli": "^0.13.1",
-    "@tailwindcss/cli": "^4.0.8",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tsconfig/node22": "^22.0.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tsconfig/node22": "^22.0.5",
     "@types/geojson": "^7946.0.16",
-    "@types/node": "^22.13.1",
-    "@vitejs/plugin-vue": "^6.0",
+    "@types/node": "^22.19.19",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
-    "@vue/tsconfig": "^0.8.0",
-    "eslint": "^9.18.0",
-    "eslint-plugin-vue": "^10.0",
-    "jiti": "^2.4.2",
-    "npm-run-all2": "^8.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-vue": "^10.9.1",
+    "jiti": "^2.7.0",
+    "npm-run-all2": "^8.0.4",
     "openapi-types": "^12.1.3",
-    "prettier": "^3.0.0",
-    "tailwindcss": "^4.0.8",
+    "prettier": "^3.8.3",
+    "tailwindcss": "^4.3.0",
     "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"
+    "vite": "^7.3.3",
+    "vite-plugin-vue-devtools": "^8.1.2",
+    "vue": "^3.5.35",
+    "vue-router": "^5.0.7",
+    "vue-tsc": "^3.3.2"
   },
   "peerDependencies": {
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0 || ^5.0.0"
+    "vue-router": "^4.5.0 || ^5.0.0",
+    "echarts": "^6.0.0"
   },
   "scarfSettings": {
     "enabled": false

package/src/chart.ts

@@ -0,0 +1,5 @@
+import ChartViewer from './components/Chart/ChartViewer.vue'
+import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
+import SmallChart from './components/SmallChart.vue'
+
+export { ChartViewer, ChartViewerWrapper, SmallChart }

package/src/components/ActivityList/ActivityList.vue

@@ -77,6 +77,9 @@
                     v-bind="{ class: '', activity }"
                   >
                     {{ getActivityTranslation(activity) }}
+                    <template v-if="'resource_id' in activity.extras">
+                      {{ activity.extras.resource_id }}
+                    </template>
                   </slot>
                 </p>
                 <p class="m-0 flex-none text-xs text-gray-medium">

package/src/components/DatasetCard.vue

@@ -107,10 +107,12 @@
         </p>
       </div>
     </div>
-    <ObjectCardShortDescription
-      v-if="showDescriptionShort"
-      :text="getDescriptionShort(props.dataset)"
-    />
+    <slot>
+      <ObjectCardShortDescription
+        v-if="showDescriptionShort"
+        :text="getDescriptionShort(props.dataset)"
+      />
+    </slot>
   </ObjectCard>
 </template>
 

package/src/components/ObjectCardHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="titleTag"
-    class="w-full text-base flex"
+    class="w-full text-base font-bold flex"
   >
     <AppLink
       :to="url"

package/src/components/RadioInput.vue

@@ -13,9 +13,14 @@
     >
     <component
       :is="icon"
-      v-if="icon"
+      v-if="icon && typeof icon !== 'string'"
       class="w-4 h-4"
     />
+    <span
+      v-else-if="icon"
+      :class="icon"
+      aria-hidden="true"
+    />
     <span class="text-sm flex-1 min-w-0">
       <slot />
     </span>
@@ -40,7 +45,7 @@ type Props = {
   value: string
   count?: number
   loading?: boolean
-  icon?: Component
+  icon?: Component | string
   highlighted?: boolean
 }
 

package/src/components/ResourceAccordion/DataStructure.vue

@@ -49,45 +49,23 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
-import { useGetProfile } from '../../functions/tabularApi'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
-const getProfile = useGetProfile()
 const { t } = useTranslation()
 
-type ColumnInfo = {
-  score: number
-  format: string
-  python_type: string
-}
+// Profile is shared with sibling components (e.g. TabularExplorer) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, status } = await injectTabularProfile(() => props.resource.id)
 
-const columns = ref<Array<string>>([])
-const columnsInfo = ref<Record<string, ColumnInfo>>({})
-const loading = ref(true)
-const hasError = ref(false)
-const hasColumnInfo = ref(false)
-
-onMounted(async () => {
-  try {
-    const response = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
-    if ('profile' in response && response.profile) {
-      columns.value = Object.keys(response.profile.columns)
-      columnsInfo.value = response.profile.columns
-      hasColumnInfo.value = true
-      loading.value = false
-    }
-    else {
-      hasError.value = true
-      loading.value = false
-    }
-  }
-  catch {
-    hasError.value = true
-    loading.value = false
-  }
-})
+const loading = computed(() => status.value === 'idle' || status.value === 'pending')
+const hasError = computed(() => status.value === 'error')
+const hasColumnInfo = computed(() => !!profileData.value?.profile?.columns)
+const columns = computed(() => profileData.value?.profile ? Object.keys(profileData.value.profile.columns) : [])
+const columnsInfo = computed(() => profileData.value?.profile?.columns ?? {})
 </script>

package/src/components/ResourceAccordion/Downloads.vue

@@ -0,0 +1,160 @@
+<template>
+  <dl class="fr-pl-0">
+    <dt
+      v-if="resource.format === 'url'"
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t("URL d'origine") }}
+    </dt>
+    <dt
+      v-else
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t('Format original') }}
+    </dt>
+    <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+      <span
+        v-if="resource.format === 'url'"
+        class="inline-flex items-center max-w-full"
+      >
+        <a
+          :href="resource.latest"
+          class="fr-link no-icon-after truncate"
+          rel="ugc nofollow noopener"
+          target="_blank"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+        >
+          {{ resource.url }}
+        </a>
+        <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
+      </span>
+      <span v-else>
+        <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+        <a
+          :href="resource.latest"
+          class="fr-link"
+          rel="ugc nofollow noopener"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
+        >
+          <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
+        </a>
+      </span>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="resource.latest"
+        class="relative"
+      />
+    </dd>
+    <template v-if="generatedFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
+      </dt>
+      <dd
+        v-for="generatedFormat in generatedFormats"
+        :key="generatedFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="generatedFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="generatedFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+    <template v-if="wfsFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        <div class="flex gap-1 items-center">
+          {{ t('Formats exportés depuis le service WFS') }}
+          <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
+          <Tooltip>
+            <RiInformationLine
+              class="flex-none size-4"
+              :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
+              aria-hidden="true"
+            />
+            <template #tooltip>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
+              </p>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le nombre de features téléchargées peut être limité.`) }}
+              </p>
+            </template>
+          </Tooltip>
+        </div>
+      </dt>
+      <dd
+        v-for="wfsFormat in wfsFormats"
+        :key="wfsFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="wfsFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="wfsFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
+import CopyButton from '../CopyButton.vue'
+import Tooltip from '../Tooltip.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useComponentsConfig } from '../../config'
+import { useFormatDate } from '../../functions/dates'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+
+const conversionsLastUpdate = computed(() =>
+  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
+)
+</script>

package/src/components/ResourceAccordion/Pmtiles.client.vue

@@ -107,7 +107,9 @@ async function displayMap() {
   p.getHeader().then((h: { maxZoom: number, centerLon: number, centerLat: number }) => {
     const map = new maplibregl.Map({
       container: container.value!,
-      style: styleVector as maplibregl.StyleSpecification,
+      // JSON import is inferred too loosely (e.g. center as number[]) to match
+      // maplibre's strict StyleSpecification, so cast through unknown.
+      style: styleVector as unknown as maplibregl.StyleSpecification,
       zoom: h.maxZoom - 2,
       center: [h.centerLon, h.centerLat],
     })