@datagouv/components-next 1.0.2-dev.18 → 1.0.2-dev.181

package/README.md

@@ -65,7 +65,7 @@ app.vueApp.use(datagouv, {
 `@datagouv/components` is using [TailwindCSS](https://tailwindcss.com/docs) and some [DSFR](https://www.systeme-de-design.gouv.fr/) right now. The user needs to provide the correct version of the DSFR. Concerning TailwindCSS, there are two modes:
 
 1. If the user is using TailwindCSS, it can import a full TailwindCSS config with `@import "@datagouv/components-next/assets/main.css";`, then build the CSS via TailwindCSS CLI or Vite plugin.
-2. If the user is not using TailwindCSS, it can import an already built CSS file with `@import '@datagouv/components-next/dist/components.css';`. Note @dev, this file should be built before publishing the package to NPM with `npm run css`. For more details on the [technology stack](../README.md#-technology-stack), see the main README.
+2. If the user is not using TailwindCSS, it can import an already built CSS file with `@import '@datagouv/components-next/dist/components.css';`. Note @dev, this file should be built before publishing the package to PNPM with `pnpm run css`. For more details on the [technology stack](../README.md#-technology-stack), see the main README.
 
 ### I18n
 
@@ -94,8 +94,8 @@ For general development guidelines and contributing, see the [contributing secti
 This component library uses both ESLint and Prettier for code quality and formatting:
 
 ```bash
-npm run lint    # Lint and auto-fix ESLint issues
-npm run format  # Format code with Prettier
+pnpm run lint    # Lint and auto-fix ESLint issues
+pnpm run format  # Format code with Prettier
 ```
 
 **Note:** Make sure to run both commands before submitting contributions to ensure consistent code style.
@@ -172,10 +172,10 @@ To make a new release, you have to :
 
 ### Update the version
 
-Use the dedicated npm command, with the correct parameter :
+Use the dedicated pnpm command, with the correct parameter :
 
 ```
-npm version VERSION
+pnpm version VERSION
 ```
 
 Where VERSION is :
@@ -187,7 +187,8 @@ Additional labels for pre-release and build metadata are available as extensions
 ### Publish to NPM
 
 ```
-npm run publish-stable
+pnpm login
+pnpm run publish-stable
 ```
 
 ## 📄 License

package/assets/main.css

@@ -182,6 +182,10 @@
 }
 
 @layer components {
+  .input {
+    @apply block w-full rounded-t text-base leading-6 py-2 px-4 text-gray-plain bg-gray-lower! placeholder:opacity-100 placeholder:italic placeholder:text-gray-medium;
+  }
+
   .subtitle {
       @apply text-sm! font-bold! leading-5!;
   }

package/dist/{Control-DuZJdKV_.js → Control-B9WQxlpJ.js}

@@ -1,4 +1,4 @@
-import { B as o, u as h, V as m, l as c } from "./proj-DsetBcW7.js";
+import { B as o, u as h, V as m, l as c } from "./proj-DxGbobp7.js";
 const g = {
   /**
    * Triggered after a map frame is rendered.

package/dist/{Datafair.client-Ds3VQrRi.js → Datafair.client-CaxMyNif.js}

@@ -1,24 +1,24 @@
-import { defineComponent as l, computed as a, createElementBlock as o, openBlock as t, createBlock as u, createElementVNode as f, withCtx as p, createTextVNode as m, toDisplayString as _, unref as h } from "vue";
-import { a as x, _ as g } from "./main-vqhkVhVS.js";
-const v = { class: "fr-text--xs" }, b = { key: 0 }, k = ["src"], $ = /* @__PURE__ */ l({
+import { defineComponent as u, computed as a, openBlock as t, createElementBlock as o, createElementVNode as l, createBlock as f, withCtx as p, createTextVNode as m, toDisplayString as _, unref as x } from "vue";
+import { a as h, d as v } from "./main-DD4ieUAo.js";
+const g = { class: "fr-text--xs" }, b = { key: 0 }, k = ["src"], B = /* @__PURE__ */ u({
   __name: "Datafair.client",
   props: {
     resource: {},
     dataset: {}
   },
   setup(c) {
-    const e = c, { t: i } = x(), r = a(() => e.resource.extras.datafairOrigin || e.dataset.extras.datafairOrigin), s = a(() => e.resource.extras.datafairDatasetId || e.dataset.extras.datafairDatasetId), d = a(() => e.resource.extras.datafairEmbed), n = a(() => !r.value || !s.value ? null : `${r.value}/embed/dataset/${s.value}/${d.value}`);
-    return (D, y) => (t(), o("div", v, [
+    const e = c, { t: i } = h(), r = a(() => e.resource.extras.datafairOrigin || e.dataset.extras.datafairOrigin), s = a(() => e.resource.extras.datafairDatasetId || e.dataset.extras.datafairDatasetId), d = a(() => e.resource.extras.datafairEmbed), n = a(() => !r.value || !s.value ? null : `${r.value}/embed/dataset/${s.value}/${d.value}`);
+    return (D, y) => (t(), o("div", g, [
       n.value ? (t(), o("div", b, [
-        f("iframe", {
+        l("iframe", {
           src: n.value,
           width: "100%",
           height: "500px",
           style: { "background-color": "transparent", border: "none" }
         }, null, 8, k)
-      ])) : (t(), u(g, { key: 1 }, {
+      ])) : (t(), f(v, { key: 1 }, {
         default: p(() => [
-          m(_(h(i)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
+          m(_(x(i)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.")), 1)
         ]),
         _: 1
       }))
@@ -26,5 +26,5 @@ const v = { class: "fr-text--xs" }, b = { key: 0 }, k = ["src"], $ = /* @__PURE_
   }
 });
 export {
-  $ as default
+  B as default
 };

package/dist/{Event--kp8kMdJ.js → Event-iXDrp-fy.js}

@@ -1,7 +1,7 @@
-import { H as x } from "./View-BR92hTWP.js";
-import { a as I } from "./common-PJfpC179.js";
-import { B as C, a7 as h, al as m, u as S, l as p, E as N, i as L, a4 as P, J as Z } from "./proj-DsetBcW7.js";
-import { c as T } from "./Image-34hvypZI.js";
+import { I as x } from "./View-BYBpt-AU.js";
+import { a as I } from "./common-BoeTUnDZ.js";
+import { B as C, a6 as h, al as m, u as S, l as p, E as N, i as L, a3 as P, G as Z } from "./proj-DxGbobp7.js";
+import { c as T } from "./Image-mNMBOofs.js";
 const n = {
   OPACITY: "opacity",
   VISIBLE: "visible",
@@ -16,7 +16,7 @@ const n = {
 };
 class D extends C {
   /**
-   * @param {Options} options Layer options.
+   * @param {Options<NoInfer<Properties>>} options Layer options.
    */
   constructor(e) {
     super(), this.on, this.once, this.un, this.background_ = e.background;
@@ -313,9 +313,9 @@ const K = {
    */
   RENDERCOMPLETE: "rendercomplete"
 };
-class G extends D {
+class q extends D {
   /**
-   * @param {Options<SourceType>} options Layer options.
+   * @param {Options<SourceType, NoInfer<Properties>>} options Layer options.
    */
   constructor(e) {
     const r = Object.assign({}, e);
@@ -393,15 +393,15 @@ class G extends D {
     }, 0))), this.changed();
   }
   /**
-   * @param {import("../pixel").Pixel} pixel Pixel.
-   * @return {Promise<Array<import("../Feature").FeatureLike>>} Promise that resolves with
+   * @param {import("../pixel.js").Pixel} pixel Pixel.
+   * @return {Promise<Array<import("../Feature.js").FeatureLike>>} Promise that resolves with
    * an array of features.
    */
   getFeatures(e) {
     return this.renderer_ ? this.renderer_.getFeatures(e) : Promise.resolve([]);
   }
   /**
-   * @param {import("../pixel").Pixel} pixel Pixel.
+   * @param {import("../pixel.js").Pixel} pixel Pixel.
    * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
    */
   getData(e) {
@@ -600,7 +600,7 @@ const B = /^rgba?\(\s*(\d+%?)\s+(\d+%?)\s+(\d+%?)(?:\s*\/\s*(\d+%|\d*\.\d+|[01])
 function f(t, e) {
   return t.endsWith("%") ? Number(t.substring(0, t.length - 1)) / e : Number(t);
 }
-function d(t) {
+function l(t) {
   throw new Error('failed to parse "' + t + '" as color');
 }
 function A(t) {
@@ -615,7 +615,7 @@ function A(t) {
         o !== void 0 ? h(f(o, 100), 0, 1) : 1
       ];
     }
-    d(t);
+    l(t);
   }
   if (t.startsWith("#")) {
     if (F.test(t)) {
@@ -626,12 +626,12 @@ function A(t) {
       }
       return u[3] = u[3] / 255, u;
     }
-    d(t);
+    l(t);
   }
   const e = V();
   e.fillStyle = "#abcdef";
   let r = e.fillStyle;
-  e.fillStyle = t, e.fillStyle === r && (e.fillStyle = "#fedcba", r = e.fillStyle, e.fillStyle = t, e.fillStyle === r && d(t));
+  e.fillStyle = t, e.fillStyle === r && (e.fillStyle = "#fedcba", r = e.fillStyle, e.fillStyle = t, e.fillStyle === r && l(t));
   const s = e.fillStyle;
   if (s.startsWith("#") || s.startsWith("rgba"))
     return A(s);
@@ -640,9 +640,9 @@ function A(t) {
   return i[3] = P(i[3] / 255, 3), i;
 }
 function v(t) {
-  return typeof t == "string" ? t : H(t);
+  return typeof t == "string" ? t : W(t);
 }
-const k = 1024, l = {};
+const k = 1024, d = {};
 let R = 0;
 function J(t) {
   if (t.length === 4)
@@ -650,10 +650,10 @@ function J(t) {
   const e = t.slice();
   return e[3] = 1, e;
 }
-function E(t) {
+function M(t) {
   return t > 31308e-7 ? Math.pow(t, 1 / 2.4) * 269.025 - 14.025 : t * 3294.6;
 }
-function M(t) {
+function E(t) {
   return t > 0.2068965 ? Math.pow(t, 3) : (t - 4 / 29) * (108 / 841);
 }
 function O(t) {
@@ -672,7 +672,7 @@ function Q(t) {
   ];
 }
 function ee(t) {
-  const e = (t[0] + 16) / 116, r = t[1], s = t[2] * Math.PI / 180, i = M(e), a = M(e + r / 500 * Math.cos(s)), o = M(e - r / 200 * Math.sin(s)), u = E(a * 3.021973625 - i * 1.617392459 - o * 0.404875592), c = E(a * -0.943766287 + i * 1.916279586 + o * 0.027607165), g = E(a * 0.069407491 - i * 0.22898585 + o * 1.159737864);
+  const e = (t[0] + 16) / 116, r = t[1], s = t[2] * Math.PI / 180, i = E(e), a = E(e + r / 500 * Math.cos(s)), o = E(e - r / 200 * Math.sin(s)), u = M(a * 3.021973625 - i * 1.617392459 - o * 0.404875592), c = M(a * -0.943766287 + i * 1.916279586 + o * 0.027607165), g = M(a * 0.069407491 - i * 0.22898585 + o * 1.159737864);
   return [
     h(u + 0.5 | 0, 0, 255),
     h(c + 0.5 | 0, 0, 255),
@@ -683,23 +683,23 @@ function ee(t) {
 function j(t) {
   if (t === "none")
     return U;
-  if (l.hasOwnProperty(t))
-    return l[t];
+  if (d.hasOwnProperty(t))
+    return d[t];
   if (R >= k) {
     let r = 0;
-    for (const s in l)
-      (r++ & 3) === 0 && (delete l[s], --R);
+    for (const s in d)
+      (r++ & 3) === 0 && (delete d[s], --R);
   }
   const e = A(t);
-  e.length !== 4 && d(t);
+  e.length !== 4 && l(t);
   for (const r of e)
-    isNaN(r) && d(t);
-  return l[t] = e, ++R, e;
+    isNaN(r) && l(t);
+  return d[t] = e, ++R, e;
 }
 function te(t) {
   return Array.isArray(t) ? t : j(t);
 }
-function H(t) {
+function W(t) {
   let e = t[0];
   e != (e | 0) && (e = e + 0.5 | 0);
   let r = t[1];
@@ -723,16 +723,16 @@ class re extends Z {
 }
 export {
   D as B,
-  K as E,
-  G as L,
+  q as L,
   U as N,
-  re as R,
+  K as R,
   te as a,
   v as b,
+  re as c,
   j as f,
   X as i,
   ee as l,
   Q as r,
-  H as t,
+  W as t,
   J as w
 };

package/dist/{Image-34hvypZI.js → Image-mNMBOofs.js}

@@ -1,7 +1,7 @@
-import { aC as v, E as f, aq as C, aB as h, u as R } from "./proj-DsetBcW7.js";
+import { aD as v, E as f, ar as C, aC as h, u as R } from "./proj-DxGbobp7.js";
 const r = typeof navigator < "u" && typeof navigator.userAgent < "u" ? navigator.userAgent.toLowerCase() : "", I = r.includes("safari") && !r.includes("chrom");
 I && (r.includes("version/15.4") || /cpu (os|iphone os) 15_4 like mac os x/.test(r));
-const L = r.includes("webkit") && !r.includes("edge"), D = r.includes("macintosh"), w = typeof devicePixelRatio < "u" ? devicePixelRatio : 1, y = typeof WorkerGlobalScope < "u" && typeof OffscreenCanvas < "u" && self instanceof WorkerGlobalScope, u = typeof Image < "u" && Image.prototype.decode, p = typeof createImageBitmap == "function", O = (function() {
+const D = r.includes("webkit") && !r.includes("edge"), L = r.includes("macintosh"), w = typeof devicePixelRatio < "u" ? devicePixelRatio : 1, y = typeof WorkerGlobalScope < "u" && typeof OffscreenCanvas < "u" && self instanceof WorkerGlobalScope, u = typeof Image < "u" && Image.prototype.decode, p = typeof createImageBitmap == "function", O = (function() {
   let e = !1;
   try {
     const t = Object.defineProperty({}, "passive", {
@@ -268,7 +268,7 @@ function g(e, t) {
     )
   ) : x(e);
 }
-function q(e, t) {
+function Y(e, t) {
   return t && (e.src = t), e.src && u && p ? e.decode().then(() => createImageBitmap(e)).catch((n) => {
     if (e.complete && e.width)
       return e;
@@ -278,19 +278,19 @@ function q(e, t) {
 export {
   w as D,
   F as I,
-  D as M,
+  L as M,
   O as P,
   _ as T,
-  y as W,
+  D as W,
   M as a,
   T as b,
   m as c,
   a as d,
-  q as e,
+  Y as e,
   P as f,
-  L as g,
-  N as h,
-  g as i,
+  N as g,
+  g as h,
+  y as i,
   G as j,
   B as k,
   W as l,

package/dist/ImagePreview.client-CPmCyisP.js

@@ -0,0 +1,36 @@
+import { defineComponent as _, ref as y, computed as o, openBlock as t, createElementBlock as u, createBlock as p, withCtx as f, createTextVNode as m, toDisplayString as d, unref as l } from "vue";
+import { a as z, u as T, b as k, d as h } from "./main-DD4ieUAo.js";
+const w = { class: "text-xs" }, B = ["src"], E = /* @__PURE__ */ _({
+  __name: "ImagePreview.client",
+  props: {
+    resource: {}
+  },
+  setup(a) {
+    const n = a, { t: r } = z(), v = T(), c = y(!1), g = o(() => n.resource.format?.toUpperCase() ?? r("Fichier")), i = o(() => k(n.resource)), x = o(() => {
+      const s = i.value, e = v.maxImagePreviewByteSize;
+      return !s || !e ? !1 : s <= e;
+    });
+    return (s, e) => (t(), u("div", w, [
+      x.value ? c.value ? (t(), p(h, { key: 1 }, {
+        default: f(() => [
+          m(d(l(r)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.")), 1)
+        ]),
+        _: 1
+      })) : (t(), u("img", {
+        key: 2,
+        src: a.resource.url,
+        alt: "",
+        class: "block w-full h-auto max-w-[800px]",
+        onError: e[0] || (e[0] = (C) => c.value = !0)
+      }, null, 40, B)) : (t(), p(h, { key: 0 }, {
+        default: f(() => [
+          m(d(i.value ? l(r)("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le pour le consulter.", { fileType: g.value }) : l(r)("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le pour le consulter.")), 1)
+        ]),
+        _: 1
+      }))
+    ]));
+  }
+});
+export {
+  E as default
+};

package/dist/JsonPreview.client-CKOU-LBs.js

@@ -0,0 +1,40 @@
+import { defineComponent as c, defineAsyncComponent as u, openBlock as m, createBlock as p, unref as r, withCtx as f, createVNode as l } from "vue";
+import { u as d } from "./main-DD4ieUAo.js";
+import { _ as h } from "./PreviewWrapper.vue_vue_type_script_setup_true_lang-DeoHZXW1.js";
+const J = /* @__PURE__ */ c({
+  __name: "JsonPreview.client",
+  props: {
+    resource: {}
+  },
+  setup(o) {
+    const t = u(
+      () => import("./vue3-json-viewer-CJLQFzXZ.js").then((e) => (Promise.resolve({                     }), e.JsonViewer))
+    ), n = o, s = d(), i = async () => {
+      const e = await fetch(n.resource.url);
+      if (!e.ok) throw new Error(`HTTP error! status: ${e.status}`);
+      return e.json();
+    };
+    return (e, w) => (m(), p(h, {
+      "file-type": "JSON",
+      resource: o.resource,
+      "max-size": r(s).maxJsonPreviewCharSize,
+      load: i
+    }, {
+      default: f(({ data: a }) => [
+        l(r(t), {
+          value: a,
+          boxed: "",
+          sort: "",
+          theme: "light",
+          "max-depth": 3,
+          "expand-depth": 2,
+          "indent-width": 2
+        }, null, 8, ["value"])
+      ]),
+      _: 1
+    }, 8, ["resource", "max-size"]));
+  }
+});
+export {
+  J as default
+};