@datagouv/components-next 1.0.2-dev.40 → 1.0.2-dev.41

package/dist/{Pmtiles.client-CUaeaV-O.js → Pmtiles.client-C1I7pwT5.js}

@@ -1,5 +1,5 @@
 import { defineComponent as ly, ref as cy, computed as dc, useTemplateRef as uy, onMounted as hy, createElementBlock as Mp, openBlock as eh, createBlock as py, withCtx as rm, createTextVNode as nm, toDisplayString as fc, unref as Gs, createCommentVNode as dy, createElementVNode as is, createVNode as fy } from "vue";
-import { c as my, a as gy, d as _y, u as yy, e as xy, f as vy, _ as by, h as wy, i as Ty, K as Sy, t as Py } from "./main-ifX24DGW.js";
+import { c as my, a as gy, d as _y, u as yy, e as xy, f as vy, _ as by, h as wy, i as Ty, K as Sy, t as Py } from "./main-CF7lWk6R.js";
 var fn = Uint8Array, Wo = Uint16Array, Iy = Int32Array, mm = new fn([
   0,
   0,

package/dist/PreviewWrapper.vue_vue_type_script_setup_true_lang-BlcvVwW8.js

@@ -0,0 +1,61 @@
+import { defineComponent as _, ref as g, computed as h, onMounted as S, nextTick as w, createElementBlock as k, openBlock as l, renderSlot as C, createBlock as n, createCommentVNode as b, toDisplayString as r, unref as a, withCtx as o, createTextVNode as u } from "vue";
+import { a as B, g as E, b as L, _ as c } from "./main-CF7lWk6R.js";
+const R = { class: "text-xs" }, q = {
+  key: 1,
+  class: "text-gray-medium"
+}, V = /* @__PURE__ */ _({
+  __name: "PreviewWrapper",
+  props: {
+    fileType: {},
+    resource: {},
+    maxSize: {},
+    load: { type: Function }
+  },
+  emits: ["loaded"],
+  setup(s, { emit: x }) {
+    const i = s, z = x, { t } = B(), p = g(null), d = g(!1), f = g(null), y = h(() => E(i.resource)), T = h(() => L(i.resource)), v = h(() => {
+      const e = y.value, m = i.maxSize;
+      return !e || !m ? !1 : e <= m;
+    });
+    return S(async () => {
+      if (!(!v.value || T.value === "blocked")) {
+        d.value = !0;
+        try {
+          p.value = await i.load(), await w(), z("loaded");
+        } catch (e) {
+          console.error("Error loading preview:", e), f.value = e instanceof TypeError ? "network" : "generic";
+        } finally {
+          d.value = !1;
+        }
+      }
+    }), (e, m) => (l(), k("div", R, [
+      p.value !== null ? C(e.$slots, "default", {
+        key: 0,
+        data: p.value
+      }) : d.value ? (l(), k("div", q, r(a(t)("Chargement de l'aperçu {fileType}...", { fileType: s.fileType })), 1)) : v.value ? T.value === "blocked" ? (l(), n(c, { key: 3 }, {
+        default: o(() => [
+          u(r(a(t)("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.", { fileType: s.fileType })), 1)
+        ]),
+        _: 1
+      })) : f.value === "network" ? (l(), n(c, { key: 4 }, {
+        default: o(() => [
+          u(r(a(t)("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
+        ]),
+        _: 1
+      })) : f.value ? (l(), n(c, { key: 5 }, {
+        default: o(() => [
+          u(r(a(t)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
+        ]),
+        _: 1
+      })) : b("", !0) : (l(), n(c, { key: 2 }, {
+        default: o(() => [
+          u(r(y.value ? a(t)("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType: s.fileType }) : a(t)("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
+        ]),
+        _: 1
+      }))
+    ]));
+  }
+});
+export {
+  V as _
+};

package/dist/Swagger.client-U7ZDVUHL.js

@@ -0,0 +1,4 @@
+import { j as f } from "./main-CF7lWk6R.js";
+export {
+  f as default
+};

package/dist/XmlPreview.client-CHUVVEH6.js

@@ -0,0 +1,34 @@
+import { defineComponent as i, defineAsyncComponent as m, createBlock as u, openBlock as f, unref as t, withCtx as l, createVNode as p } from "vue";
+import { u as x } from "./main-CF7lWk6R.js";
+import { _ as w } from "./PreviewWrapper.vue_vue_type_script_setup_true_lang-BlcvVwW8.js";
+const X = /* @__PURE__ */ i({
+  __name: "XmlPreview.client",
+  props: {
+    resource: {}
+  },
+  setup(r) {
+    const o = m(
+      () => import("./vue3-xml-viewer.common-CAwAbUJl.js").then((e) => e.v).then((e) => e.default || e.XmlViewer)
+    ), n = r, s = x(), c = async () => {
+      const e = await fetch(n.resource.url);
+      if (!e.ok) throw new Error(`HTTP error! status: ${e.status}`);
+      return e.text();
+    };
+    return (e, _) => (f(), u(w, {
+      "file-type": "XML",
+      resource: r.resource,
+      "max-size": t(s).maxXmlPreviewCharSize,
+      load: c
+    }, {
+      default: l(({ data: a }) => [
+        p(t(o), {
+          xml: a
+        }, null, 8, ["xml"])
+      ]),
+      _: 1
+    }, 8, ["resource", "max-size"]));
+  }
+});
+export {
+  X as default
+};

package/dist/components-next.js

@@ -1,4 +1,4 @@
-import { aU as e, bd as t, y as r, z as o, A as i, B as n, C as c, D as l, i as g, bb as u, be as b, E as d, aT as T, aS as S, F as p, G as C, M as D, H as m, Q as O, R, S as E, T as I, U as f, L as y, J as A, I as h, V as M, O as v, N as z, P as L, W as w, aC as G, bf as P, X as N, Y as _, Z as B, $ as H, a1 as k, bt as U, bg as x, a2 as F, a3 as V, a4 as Q, a5 as W, a6 as Y, a7 as j, bc as q, a8 as X, a9 as J, aa as Z, ac as $, ab as K, br as aa, ad as sa, ae as ea, af as ta, ag as ra, ah as oa, ai as ia, aj as na, ak as ca, al as la, am as ga, an as ua, ao as ba, aD as da, aE as Ta, aF as Sa, ap as pa, aq as Ca, ar as Da, j as ma, as as Oa, at as Ra, au as Ea, av as Ia, aw as fa, a0 as ya, aG as Aa, ay as ha, ax as Ma, az as va, aA as za, bh as La, aB as wa, bG as Ga, bI as Pa, b8 as Na, b6 as _a, x as Ba, bH as Ha, s as ka, r as Ua, w as xa, v as Fa, bu as Va, aY as Qa, aL as Wa, aW as Ya, bl as ja, bC as qa, aZ as Xa, aQ as Ja, b9 as Za, b7 as $a, aR as Ka, m as as, l as ss, q as es, o as ts, n as rs, p as os, aV as is, b3 as ns, b5 as cs, bo as ls, bm as gs, bk as us, f as bs, e as ds, b as Ts, bw as Ss, g as ps, bp as Cs, bs as Ds, bq as ms, ba as Os, bB as Rs, bz as Es, by as Is, bj as fs, bv as ys, bn as As, bi as hs, aN as Ms, b0 as vs, b1 as zs, b2 as Ls, aM as ws, a_ as Gs, a_ as Ps, a$ as Ns, aX as _s, aO as Bs, t as Hs, aH as ks, b4 as Us, aI as xs, u as Fs, bx as Vs, d as Qs, bA as Ws, bD as Ys, bE as js, bF as qs, aP as Xs, aJ as Js, aK as Zs, a as $s } from "./main-ifX24DGW.js";
+import { aU as e, bd as t, y as r, z as o, A as i, B as n, C as c, D as l, i as g, bb as u, be as b, E as d, aT as T, aS as S, F as p, G as C, M as D, H as m, Q as O, R, S as E, T as I, U as f, L as y, J as A, I as h, V as M, O as v, N as z, P as L, W as w, aC as G, bf as P, X as N, Y as _, Z as B, $ as H, a1 as k, bt as U, bg as x, a2 as F, a3 as V, a4 as Q, a5 as W, a6 as Y, a7 as j, bc as q, a8 as X, a9 as J, aa as Z, ac as $, ab as K, br as aa, ad as sa, ae as ea, af as ta, ag as ra, ah as oa, ai as ia, aj as na, ak as ca, al as la, am as ga, an as ua, ao as ba, aD as da, aE as Ta, aF as Sa, ap as pa, aq as Ca, ar as Da, j as ma, as as Oa, at as Ra, au as Ea, av as Ia, aw as fa, a0 as ya, aG as Aa, ay as ha, ax as Ma, az as va, aA as za, bh as La, aB as wa, bG as Ga, bI as Pa, b8 as Na, b6 as _a, x as Ba, bH as Ha, s as ka, r as Ua, w as xa, v as Fa, bu as Va, aY as Qa, aL as Wa, aW as Ya, bl as ja, bC as qa, aZ as Xa, aQ as Ja, b9 as Za, b7 as $a, aR as Ka, m as as, l as ss, q as es, o as ts, n as rs, p as os, aV as is, b3 as ns, b5 as cs, bo as ls, bm as gs, bk as us, f as bs, e as ds, b as Ts, bw as Ss, g as ps, bp as Cs, bs as Ds, bq as ms, ba as Os, bB as Rs, bz as Es, by as Is, bj as fs, bv as ys, bn as As, bi as hs, aN as Ms, b0 as vs, b1 as zs, b2 as Ls, aM as ws, a_ as Gs, a_ as Ps, a$ as Ns, aX as _s, aO as Bs, t as Hs, aH as ks, b4 as Us, aI as xs, u as Fs, bx as Vs, d as Qs, bA as Ws, bD as Ys, bE as js, bF as qs, aP as Xs, aJ as Js, aK as Zs, a as $s } from "./main-CF7lWk6R.js";
 export {
   e as AI_SUGGESTION_MIN_DESCRIPTION_LENGTH,
   t as ASSOCIATION,

package/dist/{index-B0fPq7-b.js → index-CzClB3i0.js}

@@ -6,7 +6,7 @@ import { a as TileGrid, U as UrlTile, e as extentFromProjection, c as createXYZ,
 import { D as DEFAULT_MAX_ZOOM, a as assert, f as forEach, i as intersectsLineString, b as intersectsLineStringArray, l as linearRingssContainsXY, c as intersectsLinearRingMultiArray, d as compose, e as create, g as apply, s as setFromArray, m as multiply, h as scale, r as reset, t as translate } from "./common-PJfpC179.js";
 import { R as RBush$1, C as Collection, a as CollectionEventType, b as asColorLike, d as defaultFillStyle, c as defaultStrokeStyle, e as defaultLineCap, f as defaultLineDash, g as defaultLineDashOffset, h as defaultLineJoin, i as defaultLineWidth, j as defaultMiterLimit, k as defaultPadding, l as defaultTextBaseline, m as defaultTextAlign, n as defaultFont, r as registerFont, o as getTextDimensions, p as drawImageOrLabel, q as measureAndCacheTextWidth, I as Icon, B as BaseVectorLayer, P as PointerInteraction, s as noModifierKeys, t as always, u as shiftKeyOnly, v as InteractionProperty, M as MapBrowserEventType, w as MapBrowserEvent, x as never, y as createEditingStyle, z as primaryAction, A as altKeyOnly, D as singleClick, E as Interaction, F as Fill, S as Stroke, T as Text, G as Style$1, H as CircleStyle, J as checkedFonts, K as Map$1, L as pointerMove, N as ImageStyle, O as Attribution, Z as Zoom, Q as MapProperty } from "./Map-BjUnLyj8.js";
 import { S as SimpleGeometry, d as deflateCoordinate, r as rotate, G as Geometry, m as maxSquaredDelta, a as assignClosestPoint, i as inflateCoordinates, b as douglasPeucker, c as deflateCoordinates, e as arrayMaxSquaredDelta, f as assignClosestArrayPoint, g as inflateCoordinatesArray, h as douglasPeuckerArray, j as deflateCoordinatesArray, P as Point$1, k as multiArrayMaxSquaredDelta, l as assignClosestMultiArrayPoint, n as linearRingss$1, o as orientLinearRingsArray, p as inflateMultiCoordinatesArray, q as getInteriorPointsOfMultiArray, s as linearRingssAreOriented, t as quantizeMultiArray, u as Polygon, v as deflateMultiCoordinatesArray, w as getInteriorPointOfArray, x as inflateEnds, y as transform2D, z as quantizeArray, A as snap, B as transformGeom2D, V as ViewHint, C as getStrideForLayout, D as linearRingsAreOriented, E as orientLinearRings, F as getLayoutForStride, L as LinearRing, H as View, I as ViewProperty, J as fromExtent } from "./View-BR92hTWP.js";
-import { k as commonjsGlobal, c as getDefaultExportFromCjs$1 } from "./main-ifX24DGW.js";
+import { k as commonjsGlobal, c as getDefaultExportFromCjs$1 } from "./main-CF7lWk6R.js";
 import { E as EventType$1, a as asArray } from "./Event--kp8kMdJ.js";
 import { Z as ZIndexContext, C as CanvasLayerRenderer, c as canvasPool$1, T as TileLayer, a as CanvasTileLayerRenderer, b as TileProperty } from "./Tile-DbNFNPfU.js";
 function padNumber(i, e, t) {

package/dist/{main-ifX24DGW.js → main-CF7lWk6R.js}

@@ -93702,7 +93702,7 @@ const TMe = /* @__PURE__ */ tp(JD), OMe = /* @__PURE__ */ ole({
     canEdit: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = ["parquet", "pmtiles", "geojson"], n = ["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"], o = e, u = Rn(), f = pa(() => import("./Swagger.client-FpYXdDuX.js")), c = pa(() => import("./MapContainer.client-BZsKgRUh.js")), d = pa(() => import("./Pmtiles.client-CUaeaV-O.js")), a = pa(() => import("./JsonPreview.client-B6aU3vl4.js")), h = pa(() => import("./PdfPreview.client-ClkseuKU.js")), g = pa(() => import("./XmlPreview.client-BNGHvVnU.js")), m = pa(() => import("./Datafair.client-CYO9vwx6.js")), { t: w } = C2(), { formatRelativeIfRecentDate: y } = Ia(), x = jD(), H = s1(() => {
+    const t = ["parquet", "pmtiles", "geojson"], n = ["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"], o = e, u = Rn(), f = pa(() => import("./Swagger.client-U7ZDVUHL.js")), c = pa(() => import("./MapContainer.client-BKGsAP0Y.js")), d = pa(() => import("./Pmtiles.client-C1I7pwT5.js")), a = pa(() => import("./JsonPreview.client-DGiaDxVv.js")), h = pa(() => import("./PdfPreview.client-CGjP5ZYb.js")), g = pa(() => import("./XmlPreview.client-CHUVVEH6.js")), m = pa(() => import("./Datafair.client-BAokThtJ.js")), { t: w } = C2(), { formatRelativeIfRecentDate: y } = Ia(), x = jD(), H = s1(() => {
       const d1 = o.resource.format?.toLowerCase();
       return d1 === "json" || d1 === "pdf" || d1 === "xml";
     }), E = s1(() => x(o.resource)), z = s1(() => o.resource.extras["analysis:parsing:pmtiles_url"] || o.resource.format === "pmtiles"), Z = s1(() => kh(o.dataset.organization) && o.resource.extras.datafairEmbed), R = s1(() => kh(o.dataset.organization) && o.resource.extras.apidocUrl), T = s1(() => Wb(o.resource.format) ? o.resource.format : w("Fichier")), B = s1(() => DD(o.resource)), D = s1(() => B.value === "wms"), U = s1(() => {
@@ -94313,19 +94313,19 @@ const G_e = { class: "border border-gray-default" }, Y_e = { class: "p-4 flex fl
   },
   setup(e) {
     const t = pa(
-      () => import("./JsonPreview.client-B6aU3vl4.js")
+      () => import("./JsonPreview.client-DGiaDxVv.js")
     ), n = pa(
-      () => import("./PdfPreview.client-ClkseuKU.js")
+      () => import("./PdfPreview.client-CGjP5ZYb.js")
     ), o = pa(
-      () => import("./XmlPreview.client-BNGHvVnU.js")
+      () => import("./XmlPreview.client-CHUVVEH6.js")
     ), u = pa(
-      () => import("./Datafair.client-CYO9vwx6.js")
+      () => import("./Datafair.client-BAokThtJ.js")
     ), f = pa(
-      () => import("./MapContainer.client-BZsKgRUh.js")
+      () => import("./MapContainer.client-BKGsAP0Y.js")
     ), c = pa(
-      () => import("./Pmtiles.client-CUaeaV-O.js")
+      () => import("./Pmtiles.client-C1I7pwT5.js")
     ), d = pa(
-      () => import("./Swagger.client-FpYXdDuX.js")
+      () => import("./Swagger.client-U7ZDVUHL.js")
     ), a = e, { t: h } = C2(), g = Rn(), { formatRelativeIfRecentDate: m } = Ia(), {
       hasTabularData: w,
       hasPmtiles: y,

package/dist/{vue3-xml-viewer.common-Bkgr-tAS.js → vue3-xml-viewer.common-CAwAbUJl.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-ifX24DGW.js";
+import { c as Ke } from "./main-CF7lWk6R.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.40",
+  "version": "1.0.2-dev.41",
   "private": false,
   "type": "module",
   "engines": {

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

@@ -1,51 +1,31 @@
 <template>
-  <div class="fr-text--xs">
-    <div v-if="jsonData">
-      <JsonViewer
-        :value="jsonData"
-        boxed
-        sort
-        theme="light"
-        :max-depth="3"
-        :expand-depth="2"
-        :indent-width="2"
-      />
-    </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu JSON...") }}
-    </div>
-    <PreviewUnavailable v-else-if="fileTooLarge">
-      {{ fileSizeBytes
-        ? t("Le fichier JSON est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
-        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
-      }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error === 'cors'">
-      {{ t("Ce fichier JSON ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error === 'network'">
-      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error">
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-  </div>
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="JSON"
+    :resource="resource"
+    :max-size="config.maxJsonPreviewCharSize"
+    :load="load"
+  >
+    <JsonViewer
+      :value="data"
+      boxed
+      sort
+      theme="light"
+      :max-depth="3"
+      :expand-depth="2"
+      :indent-width="2"
+    />
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { useComponentsConfig } from '../../config'
-import PreviewUnavailable from './PreviewUnavailable.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
 import type { Resource } from '../../types/resources'
-import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
-import { useTranslation } from '../../composables/useTranslation'
 
 const JsonViewer = defineAsyncComponent(() =>
   import('vue3-json-viewer').then((module) => {
-    // Import CSS when component loads
     import('vue3-json-viewer/dist/vue3-json-viewer.css')
     return module.JsonViewer
   }),
@@ -56,75 +36,10 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
 
-const jsonData = ref<unknown>(null)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const corsStatus = computed(() => getResourceCorsStatus(props.resource))
-
-const isSizeAllowed = computed(() => {
-  const size = fileSizeBytes.value
-  // Convert maxJsonPreviewCharSize from characters to bytes (rough estimate)
-  // Assuming average 1 byte per character for JSON
-  const maxByteSize = config.maxJsonPreviewCharSize
-
-  // If we don't know the size or the max size, don't risk loading a potentially huge file
-  if (!size || !maxByteSize) return false
-
-  return size <= maxByteSize
-})
-
-const fetchJsonData = async () => {
-  error.value = null
-  fileTooLarge.value = false
-
-  // Check if file is too large or size is unknown
-  if (!isSizeAllowed.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  // Check if CORS is allowed
-  if (corsStatus.value === 'blocked') {
-    error.value = 'cors'
-    return
-  }
-
-  loading.value = true
-  try {
-    const response = await fetch(props.resource.url)
-    // const response = await fetch('/test-data.json') // For testing locally without CORS issues
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-    const data = await response.json()
-
-    // Use the original data directly - let the JSON viewer handle large files
-    jsonData.value = data
-  }
-  catch (err) {
-    console.error('Error loading JSON:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-
-    jsonData.value = null
-  }
-  finally {
-    loading.value = false
-  }
+const load = async () => {
+  const response = await fetch(props.resource.url)
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+  return response.json()
 }
-
-onMounted(() => {
-  fetchJsonData()
-})
 </script>

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

@@ -1,51 +1,34 @@
 <template>
-  <div class="text-xs">
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="PDF"
+    :resource="resource"
+    :max-size="config.maxPdfPreviewByteSize"
+    :load="load"
+    @loaded="renderAllPages"
+  >
     <div
-      v-if="pdfReady"
       ref="containerRef"
       class="w-full overflow-y-auto max-h-[80vh] space-y-3"
     >
       <canvas
-        v-for="page in totalPages"
+        v-for="page in (data as PDFDocumentProxy).numPages"
         :key="page"
         :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
         class="w-full"
       />
     </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu PDF...") }}
-    </div>
-    <PreviewUnavailable v-else-if="fileTooLarge">
-      {{ fileSizeBytes
-        ? t("Le fichier PDF est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
-        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
-      }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error === 'cors'">
-      {{ t("Ce fichier PDF ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error === 'network'">
-      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-    <PreviewUnavailable v-else-if="error">
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
-    </PreviewUnavailable>
-  </div>
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 import * as pdfjsLib from 'pdfjs-dist'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
 import type { PDFDocumentProxy } from 'pdfjs-dist'
-import PreviewUnavailable from './PreviewUnavailable.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
-import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
-import { useTranslation } from '../../composables/useTranslation'
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
@@ -54,15 +37,8 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
 
 const containerRef = ref<HTMLElement | null>(null)
-const pdfReady = ref(false)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-const totalPages = ref(0)
-
 let pdfDoc: PDFDocumentProxy | null = null
 const canvasRefs = new Map<number, HTMLCanvasElement>()
 
@@ -98,73 +74,22 @@ async function renderPage(pageNum: number) {
   }).promise
 }
 
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const corsStatus = computed(() => getResourceCorsStatus(props.resource))
-
-const shouldLoadPdf = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Use maxPdfPreviewByteSize from config, fallback to 10 MB if not set
-  const maxByteSize = config.maxPdfPreviewByteSize ?? 10_000_000
-  return size <= maxByteSize
-})
-
-const loadPdf = async () => {
-  error.value = null
-  fileTooLarge.value = false
-
-  if (!shouldLoadPdf.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  // Check if CORS is allowed
-  if (corsStatus.value === 'blocked') {
-    error.value = 'cors'
-    return
-  }
-
-  loading.value = true
-  try {
-    const loadingTask = pdfjsLib.getDocument({
-      url: props.resource.url,
-      isEvalSupported: false,
-    })
-
-    pdfDoc = await loadingTask.promise
-    totalPages.value = pdfDoc.numPages
-    pdfReady.value = true
-
-    await nextTick()
+const load = async () => {
+  const loadingTask = pdfjsLib.getDocument({
+    url: props.resource.url,
+    isEvalSupported: false,
+  })
+  pdfDoc = await loadingTask.promise
+  return pdfDoc
+}
 
-    for (let i = 1; i <= pdfDoc.numPages; i++) {
-      await renderPage(i)
-    }
-  }
-  catch (err) {
-    console.error('Error loading PDF:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-  }
-  finally {
-    loading.value = false
+const renderAllPages = async () => {
+  if (!pdfDoc) return
+  for (let i = 1; i <= pdfDoc.numPages; i++) {
+    await renderPage(i)
   }
 }
 
-onMounted(() => {
-  loadPdf()
-})
-
 onBeforeUnmount(() => {
   pdfDoc?.destroy()
 })

package/src/components/ResourceAccordion/PreviewWrapper.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="text-xs">
+    <slot
+      v-if="data !== null"
+      :data="data"
+    />
+    <div
+      v-else-if="loading"
+      class="text-gray-medium"
+    >
+      {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
+    </div>
+    <PreviewUnavailable v-else-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="corsStatus === 'blocked'">
+      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.", { fileType }) }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'network'">
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+
+const props = defineProps<{
+  fileType: string
+  resource: Resource
+  maxSize: number | undefined
+  load: () => Promise<unknown>
+}>()
+
+const emit = defineEmits<{
+  loaded: []
+}>()
+
+const { t } = useTranslation()
+
+const data = ref<unknown>(null)
+const loading = ref(false)
+const error = ref<'network' | 'generic' | null>(null)
+
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = props.maxSize
+  if (!size || !max) return false
+  return size <= max
+})
+
+onMounted(async () => {
+  if (!isSizeAllowed.value || corsStatus.value === 'blocked') return
+
+  loading.value = true
+  try {
+    data.value = await props.load()
+    await nextTick()
+    emit('loaded')
+  }
+  catch (err) {
+    console.error('Error loading preview:', err)
+    error.value = err instanceof TypeError ? 'network' : 'generic'
+  }
+  finally {
+    loading.value = false
+  }
+})
+</script>