@datagouv/components-next 1.0.2-dev.3 → 1.0.2-dev.30

package/dist/{text-clamp.esm-B5kW_XMt.js → text-clamp.esm-DVseBqZZ.js}

@@ -1,4 +1,4 @@
-import { defineComponent as K, ref as C, reactive as P, computed as z, watch as g, createElementBlock as Q, nextTick as W, onUnmounted as X, onMounted as Y, openBlock as Z, normalizeStyle as ee, unref as H, createElementVNode as $, renderSlot as j } from "vue";
+import { defineComponent as K, ref as C, reactive as P, computed as z, watch as g, nextTick as W, onUnmounted as Q, onMounted as X, openBlock as Y, createElementBlock as Z, normalizeStyle as ee, unref as H, createElementVNode as $, renderSlot as j } from "vue";
 var L = null;
 function te(e) {
   return L || (L = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(r) {
@@ -197,11 +197,11 @@ var D = K({ __name: "text-clamp", props: { text: { type: String, required: !0 },
     W((() => {
       h();
     }));
-  })), X((() => {
+  })), Q((() => {
     A();
-  })), Y((() => {
+  })), X((() => {
     h();
-  })), (a, c) => (Z(), Q("div", { ref_key: "textClampRef", ref: n, class: "text-clamp", style: ee({ overflow: "hidden", maxHeight: H(u) }) }, [$("span", { ref_key: "contentRef", ref: s }, [j(a.$slots, "before", { expand: O, collapse: T, toggle: F, clamped: H(l), expanded: i.localExpanded }), $("span", { ref_key: "textRef", ref: o, "aria-label": e.text }, null, 8, le), j(a.$slots, "after", { expand: O, collapse: T, toggle: F, clamped: H(l), expanded: i.localExpanded })], 512)], 4));
+  })), (a, c) => (Y(), Z("div", { ref_key: "textClampRef", ref: n, class: "text-clamp", style: ee({ overflow: "hidden", maxHeight: H(u) }) }, [$("span", { ref_key: "contentRef", ref: s }, [j(a.$slots, "before", { expand: O, collapse: T, toggle: F, clamped: H(l), expanded: i.localExpanded }), $("span", { ref_key: "textRef", ref: o, "aria-label": e.text }, null, 8, le), j(a.$slots, "after", { expand: O, collapse: T, toggle: F, clamped: H(l), expanded: i.localExpanded })], 512)], 4));
 } });
 D.__file = "package/text-clamp.vue";
 const ce = (e) => (e.install = function(r) {

package/dist/{tilecoord-Db24Px13.js → tilecoord-BgTy1qJO.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 { aC as It, E as ft, al as Xt, U as dt, g as at, X as Wt, w as Mt, F as b, L, an as _t, aS as vt, n as gt, 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";
 class mt extends It {
   /**
    * @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate.
@@ -369,7 +369,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
     return Math.round(o * e) / e;
   }
   r.globalCompositeOperation = "lighter";
-  const E = _t();
+  const E = gt();
   g.forEach(function(o, y, C) {
     Mt(E, o.extent);
   });
@@ -405,7 +405,7 @@ function St(a, t, e, s, n, i, c, m, g, T, X, x, F, w) {
       ), o.clipExtent && l.restore();
     }
   }));
-  const u = gt(c);
+  const u = _t(c);
   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];
@@ -490,7 +490,7 @@ class Kt {
       const u = d[0] + "/" + d[1];
       return g[u] || (g[u] = T(d)), g[u];
     }, this.maxSourceExtent_ = n, this.errorThresholdSquared_ = i * i, this.triangles_ = [], this.wrapsXInSource_ = !1, this.canWrapXInSource_ = this.sourceProj_.canWrapX() && !!n && !!this.sourceProj_.getExtent() && L(n) >= L(this.sourceProj_.getExtent()), this.sourceWorldWidth_ = this.sourceProj_.getExtent() ? L(this.sourceProj_.getExtent()) : null, this.targetWorldWidth_ = this.targetProj_.getExtent() ? L(this.targetProj_.getExtent()) : null;
-    const X = gt(s), x = yt(s), F = Dt(s), w = Ot(s), r = this.transformInv_(X), h = this.transformInv_(x), E = this.transformInv_(F), l = this.transformInv_(w), f = Zt + (c ? Math.max(
+    const X = _t(s), x = yt(s), F = Dt(s), w = Ot(s), r = this.transformInv_(X), h = this.transformInv_(x), E = this.transformInv_(F), l = this.transformInv_(w), f = Zt + (c ? Math.max(
       0,
       Math.ceil(
         Math.log2(
@@ -670,7 +670,7 @@ class Kt {
    * @return {import("../extent.js").Extent} Calculated extent.
    */
   calculateSourceExtent() {
-    const t = _t();
+    const t = gt();
     return this.triangles_.forEach(function(e, s, n) {
       const i = e.source;
       $(t, i[0]), $(t, i[1]), $(t, i[2]);

package/dist/{vue3-json-viewer-BXwup7nO.js → vue3-json-viewer-BgCuOAH6.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",
@@ -1041,10 +1041,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 +1067,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-BRxsqI9j.js → vue3-xml-viewer.common-CwN-5lms.js}

@@ -1,24 +1,24 @@
-import { b as Ke } from "./main-B2kXxWRG.js";
+import { g as Ke } from "./main-BMXOPzsN.js";
 import We from "vue";
-function Fe(I, K) {
+function Fe($, K) {
   for (var V = 0; V < K.length; V++) {
     const p = K[V];
     if (typeof p != "string" && !Array.isArray(p)) {
       for (const X in p)
-        if (X !== "default" && !(X in I)) {
+        if (X !== "default" && !(X in $)) {
           const _ = Object.getOwnPropertyDescriptor(p, X);
-          _ && Object.defineProperty(I, X, _.get ? _ : {
+          _ && Object.defineProperty($, X, _.get ? _ : {
             enumerable: !0,
             get: () => p[X]
           });
         }
     }
   }
-  return Object.freeze(Object.defineProperty(I, Symbol.toStringTag, { value: "Module" }));
+  return Object.freeze(Object.defineProperty($, Symbol.toStringTag, { value: "Module" }));
 }
 var Y = { exports: {} }, ee;
 function ze() {
-  return ee || (ee = 1, (function(I) {
+  return ee || (ee = 1, (function($) {
     (function() {
       var K = {
         /***/
@@ -426,7 +426,7 @@ function ze() {
           default: function() {
             return (
               /* binding */
-              Ie
+              $e
             );
           }
         }), typeof window < "u") {
@@ -466,7 +466,7 @@ function ze() {
           class: "bracket"
         }, ">", -1));
         function G(o, v, g, E, h, b) {
-          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), $ = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
+          const y = (0, e.resolveComponent)("CaretDown"), S = (0, e.resolveComponent)("CaretRight"), I = (0, e.resolveComponent)("XmlElementName"), Q = (0, e.resolveComponent)("XmlAttributeLine"), q = (0, e.resolveComponent)("XmlElement", !0), B = (0, e.resolveComponent)("XmlElementContent"), je = (0, e.resolveComponent)("XmlCDataSection"), Ue = (0, e.resolveComponent)("XmlRemark");
           return (0, e.openBlock)(), (0, e.createElementBlock)("div", r, [(0, e.createElementVNode)("div", null, [o.selfClosing ? (0, e.createCommentVNode)("", !0) : ((0, e.openBlock)(), (0, e.createElementBlock)(e.Fragment, {
             key: 0
           }, [o.collapsed ? ((0, e.openBlock)(), (0, e.createBlock)(S, {
@@ -477,7 +477,7 @@ function ze() {
             key: 0,
             class: "caret",
             onClick: o.toggleCollapsed
-          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)($, {
+          }, null, 8, ["onClick"]))], 64)), u, (0, e.createVNode)(I, {
             class: "clickable",
             name: o.name,
             onClick: o.toggleCollapsed
@@ -496,7 +496,7 @@ function ze() {
           }, null, 8, ["cdataSection"]))), 128)), ((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.remarks, (L, N) => ((0, e.openBlock)(), (0, e.createBlock)(Ue, {
             key: `r${N}`,
             remark: L
-          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)($, {
+          }, null, 8, ["remark"]))), 128))])])), !o.selfClosing && !o.collapsed ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", w, [O, (0, e.createVNode)(I, {
             name: o.name,
             closing: !0
           }, null, 8, ["name"]), f])) : (0, e.createCommentVNode)("", !0)]);
@@ -549,8 +549,8 @@ function ze() {
         var c = /* @__PURE__ */ (0, M.A)(d, [["render", m], ["__scopeId", "data-v-75f773a5"]]);
         function D(o, v, g, E, h, b) {
           const y = (0, e.resolveComponent)("XmlAttribute");
-          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, $) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
-            key: $,
+          return (0, e.openBlock)(), (0, e.createElementBlock)("span", null, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(o.attributes, (S, I) => ((0, e.openBlock)(), (0, e.createBlock)(y, {
+            key: I,
             attribute: S
           }, null, 8, ["attribute"]))), 128))]);
         }
@@ -705,12 +705,12 @@ function ze() {
             node: Element
           },
           setup(o) {
-            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), $ = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
+            const v = (0, e.ref)(!1), g = (0, e.computed)(() => o.node.nodeName), E = (0, e.computed)(() => Array.from(o.node.childNodes)), h = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 1)), b = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 3)), y = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 4)), S = (0, e.computed)(() => E.value && E.value.filter((B) => B.nodeType === 8)), I = (0, e.computed)(() => o.node.attributes && Array.from(o.node.attributes) || []), Q = !h.value.length && !b.value.length && !y.value.length && !S.value.length;
             return {
               name: g,
               childElements: h,
               childContents: b,
-              attributes: $,
+              attributes: I,
               cdataSections: y,
               remarks: S,
               selfClosing: Q,
@@ -744,8 +744,8 @@ function ze() {
               rootNode: g
             };
           }
-        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), $e = Ve, Ie = $e;
-      })(), I.exports = X;
+        }), Ve = /* @__PURE__ */ (0, M.A)(Ne, [["render", t]]), Ie = Ve, $e = Ie;
+      })(), $.exports = X;
     })();
   })(Y)), Y.exports;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.3",
+  "version": "1.0.2-dev.30",
   "private": false,
   "type": "module",
   "engines": {
@@ -16,11 +16,11 @@
     "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",
+    "@types/leaflet": "^1.9.17",
     "@vueuse/core": "^13.1.0",
     "@vueuse/router": "^13.1.0",
     "chart.js": "^4.4.8",
@@ -48,9 +48,7 @@
     "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",
@@ -76,8 +74,14 @@
     "typescript": "^5.7.3",
     "vite": "^7.0",
     "vite-plugin-vue-devtools": "^8.0",
+    "vue": "^3.5.30",
+    "vue-router": "^4.6.4",
     "vue-tsc": "^3.0"
   },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
   "scarfSettings": {
     "enabled": false
   },

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/ReadMore.vue

@@ -3,7 +3,7 @@
     <div
       ref="readMoreRef"
       class="overflow-hidden"
-      :style="{ height: containerHeight + 'px' }"
+      :style="{ height: readMoreRequired ? containerHeight + 'px' : 'auto' }"
     >
       <div ref="containerRef">
         <slot />

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

@@ -9,21 +9,15 @@
           border: none;"
       />
     </div>
-    <SimpleBanner
-      v-else
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-else>
+      {{ 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 } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import { useTranslation } from '../../composables/useTranslation'

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

@@ -17,42 +17,25 @@
     >
       {{ t("Chargement de l'aperçu JSON...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
-    </SimpleBanner>
+    <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 === '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, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import { getResourceFilesize } from '../../functions/datasets'

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

@@ -1,12 +1,7 @@
 <template>
-  <SimpleBanner
-    v-if="hasError"
-    type="warning"
-    class="flex items-center space-x-2"
-  >
-    <RiErrorWarningLine class="shrink-0 size-6" />
-    <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-  </SimpleBanner>
+  <PreviewUnavailable v-if="hasError">
+    {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+  </PreviewUnavailable>
   <div
     v-else
     id="map"
@@ -16,9 +11,7 @@
 
 <script setup lang = "ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
@@ -96,7 +89,10 @@ 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
   })
+  attributions.setCollapsed(false)
   map.addControl(attributions)
 
   const layerImport = new LayerImport({

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

@@ -18,43 +18,27 @@
     >
       {{ t("Chargement de l'aperçu PDF...") }}
     </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier PDF trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Ce fichier PDF ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
+    <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 === '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, onBeforeUnmount, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/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 SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'

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

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+    </PreviewUnavailable>
     <div
       v-else
       class="-mx-4"
@@ -53,7 +48,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
 import maplibregl from 'maplibre-gl'
 import DOMPurify from 'dompurify'
@@ -64,7 +59,7 @@ import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import { getOwnerName, getOwnerPage } from '../../functions/owned'

package/src/components/ResourceAccordion/Preview.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewLoader v-else-if="loading" />
     <div
       v-else
@@ -105,7 +100,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
 import { useFormatDate } from '../../functions/dates'
@@ -113,7 +108,7 @@ import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'

package/src/components/ResourceAccordion/PreviewLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentLoader
-    :width="1124"
-    :height="300"
+    viewBox="0 0 1124 300"
     :speed="2"
     primary-color="#f3f3f3"
     secondary-color="#ecebeb"

package/src/components/ResourceAccordion/PreviewUnavailable.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col items-center py-12">
+    <img
+      :src="microscopeSrc"
+      class="h-20 mb-3"
+      alt=""
+    >
+    <p class="fr-text--bold mb-1">
+      {{ t("Aucun aperçu disponible") }}
+    </p>
+    <p class="text-sm text-gray-medium mb-0 text-center max-w-lg">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+
+const { t } = useTranslation()
+</script>