@datagouv/components-next 1.1.1 → 1.2.0

package/dist/{tilecoord-Db24Px13.js → tilecoord-A0fLnBZr.js}

@@ -1,6 +1,6 @@
-import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-34hvypZI.js";
-import { z as Tt, g as pt } from "./common-PJfpC179.js";
-import { aC as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aS as vt, x as Yt, r as Lt, aT as Ft, ak as wt, aI as yt, az as Dt, aJ as Ot, aU as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-DsetBcW7.js";
+import { T as _, W as nt, n as xt, c as H, b as et } from "./Image-BijNEG0p.js";
+import { z as Tt, g as pt } from "./common-BjQlan3k.js";
+import { aD as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, n as _t, L, an as gt, aU as vt, x as Yt, r as Lt, aV as Ft, ak as wt, aJ as yt, aA as Dt, aK as Ot, aW as st, ae as ot, i as Ct, W as z, a1 as $, d as V, l as Pt, u as rt, a7 as ht, I as At, a as Rt } from "./proj-CsNo9yH1.js";
 class mt extends It {
   /**
    * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate.
@@ -339,7 +339,7 @@ function ut(a, t, e, s) {
   }
   return i;
 }
-function Nt(a, t, e, s) {
+function Kt(a, t, e, s) {
   const n = Yt(e);
   let i = ut(
     a,
@@ -356,7 +356,7 @@ function Nt(a, t, e, s) {
     ), isFinite(i) && i > 0;
   }), i;
 }
-function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
+function Nt(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   const r = H(
     Math.round(e * a),
     Math.round(e * t),
@@ -409,7 +409,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   return m.getTriangles().forEach(function(o, y, C) {
     const p = o.source, I = o.target;
     let v = p[0][0], Y = p[0][1], W = p[1][0], M = p[1][1], D = p[2][0], A = p[2][1];
-    const G = h((I[0][0] - u[0]) / i), N = h(
+    const G = h((I[0][0] - u[0]) / i), K = h(
       -(I[0][1] - u[1]) / i
     ), R = h((I[1][0] - u[0]) / i), k = h(
       -(I[1][1] - u[1]) / i
@@ -420,32 +420,32 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     const Et = [
       [W, M, 0, 0, R - G],
       [D, A, 0, 0, U - G],
-      [0, 0, W, M, k - N],
-      [0, 0, D, A, Q - N]
-    ], S = vt(Et);
-    if (!S)
+      [0, 0, W, M, k - K],
+      [0, 0, D, A, Q - K]
+    ], N = vt(Et);
+    if (!N)
       return;
     if (r.save(), r.beginPath(), Gt() || !x) {
       r.moveTo(R, k);
-      const O = 4, K = G - R, it = N - k;
+      const O = 4, S = G - R, it = K - k;
       for (let P = 0; P < O; P++)
         r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h(P * it / (O - 1))
         ), P != O - 1 && r.lineTo(
-          R + h((P + 1) * K / O),
+          R + h((P + 1) * S / O),
           k + h((P + 1) * it / (O - 1))
         );
       r.lineTo(U, Q);
     } else
-      r.moveTo(R, k), r.lineTo(G, N), r.lineTo(U, Q);
+      r.moveTo(R, k), r.lineTo(G, K), r.lineTo(U, Q);
     r.clip(), r.transform(
-      S[0],
-      S[2],
-      S[1],
-      S[3],
+      N[0],
+      N[2],
+      N[1],
+      N[3],
       G,
-      N
+      K
     ), r.translate(
       E[0] - j,
       E[3] - q
@@ -454,10 +454,10 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     if (l)
       Z = l.canvas, r.scale(d, -d);
     else {
-      const O = g[0], K = O.extent;
+      const O = g[0], S = O.extent;
       Z = O.image, r.scale(
-        L(K) / Z.width,
-        -b(K) / Z.height
+        L(S) / Z.width,
+        -b(S) / Z.height
       );
     }
     r.drawImage(Z, 0, 0), r.restore();
@@ -467,7 +467,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
   }), r.restore()), r.canvas;
 }
 const Zt = 10, lt = 0.25;
-class Kt {
+class St {
   /**
    * @param {import("../proj/Projection.js").default} sourceProj Source projection.
    * @param {import("../proj/Projection.js").default} targetProj Target projection.
@@ -715,7 +715,7 @@ class Vt extends mt {
     l && (h ? h = V(h, l) : h = l);
     const f = n.getResolution(
       this.wrappedTileCoord_[0]
-    ), d = Nt(
+    ), d = Kt(
       t,
       s,
       E,
@@ -726,7 +726,7 @@ class Vt extends mt {
       return;
     }
     const u = X !== void 0 ? X : bt;
-    if (this.triangulation_ = new Kt(
+    if (this.triangulation_ = new St(
       t,
       s,
       E,
@@ -806,7 +806,7 @@ class Vt extends mt {
       ), g = this.targetTileGrid_.getTileCoordExtent(
         this.wrappedTileCoord_
       );
-      this.canvas_ = St(
+      this.canvas_ = Nt(
         n,
         i,
         this.pixelRatio_,
@@ -890,13 +890,13 @@ export {
   zt as I,
   Vt as R,
   mt as T,
-  Kt as a,
+  St as a,
   Bt as b,
   ut as c,
   Jt as d,
   $t as e,
   ts as g,
   ss as h,
-  St as r,
+  Nt as r,
   es as w
 };

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

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-K-42Oe8-.js";
+import { c as Ke } from "./main-Iz1ZCL6k.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.1",
+  "version": "1.2.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",
@@ -26,8 +32,7 @@
     "@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",
+    "geopf-extensions-openlayers": "^1.0.0-beta.10",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
@@ -67,6 +72,7 @@
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.8.0",
+    "echarts": "^6.0.0",
     "eslint": "^9.18.0",
     "eslint-plugin-vue": "^10.0",
     "jiti": "^2.4.2",
@@ -83,7 +89,8 @@
   },
   "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/DataserviceCard.vue

@@ -53,6 +53,7 @@
     <ObjectCardHeader
       :icon="isTabularApi ? RiSparklingLine : RiTerminalLine"
       :url="dataserviceUrl || dataservice.self_web_url"
+      :title-tag="titleTag"
     >
       {{ dataservice.title }}
     </ObjectCardHeader>
@@ -115,6 +116,7 @@ import { useComponentsConfig } from '../config'
 import { useFormatDate } from '../functions/dates'
 import { summarize } from '../functions/helpers'
 import type { Dataservice } from '../types/dataservices'
+import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import OrganizationLogo from './OrganizationLogo.vue'
 import Avatar from './Avatar.vue'
@@ -130,6 +132,7 @@ type Props = {
   dataserviceUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
   showDescription?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/DatasetCard.vue

@@ -36,6 +36,7 @@
       :icon="RiDatabase2Line"
       :url="datasetUrl || dataset.page"
       :target="datasetUrlInNewTab ? '_blank' : undefined"
+      :title-tag="titleTag"
     >
       {{ dataset.title }}
       <template
@@ -106,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>
 
@@ -117,6 +120,7 @@
 import type { RouteLocationRaw } from 'vue-router'
 import { RiArchiveLine, RiDatabase2Line, RiDownloadLine, RiEyeLine, RiLineChartLine, RiLockLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { TitleTag } from '../types/ui'
 import { summarize } from '../functions/helpers'
 import { useFormatDate } from '../functions/dates'
 import { getDescriptionShort } from '../functions/description'
@@ -137,6 +141,7 @@ type Props = {
   datasetUrlInNewTab?: boolean
   organizationUrl?: RouteLocationRaw
   showDescriptionShort?: boolean
+  titleTag?: TitleTag
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/ObjectCardHeader.vue

@@ -1,5 +1,8 @@
 <template>
-  <h3 class="w-full text-base flex">
+  <component
+    :is="titleTag"
+    class="w-full text-base font-bold flex"
+  >
     <AppLink
       :to="url"
       class="text-gray-title text-base bg-none flex items-center w-full truncate gap-1"
@@ -19,17 +22,21 @@
       <slot name="extra" />
       <span class="absolute inset-0" />
     </AppLink>
-  </h3>
+  </component>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import type { TitleTag } from '../types/ui'
 import AppLink from './AppLink.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   icon: Component
   url: RouteLocationRaw
   target?: string
-}>()
+  titleTag?: TitleTag
+}>(), {
+  titleTag: 'h3',
+})
 </script>

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/MapContainer.client.vue

@@ -89,10 +89,8 @@ async function displayMap() {
 
   const attributions = new GeoportalAttribution({
     position: 'bottom-right',
-    // collapsed option is ignored by the library, thus the override below
-    // see https://github.com/IGNF/geopf-extensions-openlayers/issues/497
+    collapsed: false,
   })
-  attributions.setCollapsed(false)
   map.addControl(attributions)
 
   const layerImport = new LayerImport({