zuii 1.4.21 → 1.4.23

package/dist/components/Form/react/FileInput.d.ts

@@ -1,59 +1,31 @@
 /**
- * Props du composant FileInput.
+ * Propriétés du composant FileInput.
  */
-export interface FileInputProps {
-    /**
-     * ID unique pour l'instance Uppy.
-     */
-    id?: string;
-    /**
-     * Nom du champ pour le formulaire.
-     */
+interface FileInputProps {
+    /** Nom du champ. */
     name?: string;
-    /**
-     * Nombre maximum de fichiers autorisés.
-     */
-    maxNumberOfFiles?: number;
-    /**
-     * Taille maximale d'un fichier en octets.
-     */
-    maxFileSize?: number;
-    /**
-     * Types de fichiers autorisés (MIME types).
-     */
-    allowedFileTypes?: string[] | null;
-    /**
-     * Callback appelé lors de la complétion du téléchargement.
-     * @param {any} result - Le résultat du téléchargement.
-     */
+    /** Langue du composant ('fr' ou 'en'). */
+    lang?: 'fr' | 'en';
+    /** Restrictions de téléchargement. */
+    restrictions?: {
+        /** Nombre maximum de fichiers. */
+        maxNumberOfFiles?: number;
+        /** Taille maximum d'un fichier en octets. */
+        maxFileSize?: number;
+        /** Types de fichiers autorisés. */
+        allowedFileTypes?: string[];
+    };
+    /** Callback appelé lors de la fin du téléchargement. */
     onComplete?: (result: any) => void;
-    /**
-     * Callback appelé lors d'une erreur.
-     * @param {Error} error - L'erreur survenue.
-     */
-    onError?: (error: Error) => void;
-    /**
-     * Hauteur du dashboard Uppy en pixels.
-     */
-    height?: number;
-    /**
-     * Classe CSS personnalisée.
-     */
-    className?: string;
-    /**
-     * Afficher les détails de progression.
-     */
-    hideProgressDetails?: boolean;
-    /**
-     * Afficher le logo Uppy.
-     */
-    proudlyDisplayPoweredByUppy?: boolean;
+    /** Callback appelé en cas d'erreur. */
+    onError?: (error: any) => void;
 }
 /**
- * Composant FileInput utilisant une instance stable et le Dashboard officiel d'Uppy.
- * Gère la synchronisation avec un input caché pour les soumissions de formulaire.
+ * Composant FileInput utilisant Uppy.js pour le téléchargement de fichiers.
+ * Affiche le Dashboard Uppy complet par défaut.
  *
  * @param {FileInputProps} props - Les propriétés du composant.
- * @returns {JSX.Element} Le composant FileInput.
+ * @returns {JSX.Element} Le composant FileInput rendu.
  */
-export declare const FileInput: ({ id, name, maxNumberOfFiles, maxFileSize, allowedFileTypes, onComplete, onError, height, className, hideProgressDetails, proudlyDisplayPoweredByUppy, }: FileInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileInput: ({ name, lang, restrictions, onComplete, onError }: FileInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Form/react/FileInput.js

@@ -0,0 +1,84 @@
+import { jsx as f, jsxs as y } from "react/jsx-runtime";
+import { useRef as g, useState as F, useEffect as b } from "react";
+import x from "@uppy/core";
+import { UppyContextProvider as v } from "@uppy/react";
+import w from "../../../node_modules/.pnpm/@uppy_react@5.2.0_@uppy_core@5.2.0_@uppy_dashboard@5.1.1_@uppy_core@5.2.0__@uppy_image-editor_4567vrulez5sapld32rywmrijm/node_modules/@uppy/react/lib/Dashboard.js";
+import N from "@uppy/compressor";
+import _ from "@uppy/image-editor";
+import U from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/fr_FR.js";
+import D from "../../../node_modules/.pnpm/@uppy_locales@5.1.1/node_modules/@uppy/locales/lib/en_US.js";
+const M = ({
+  name: o,
+  lang: u,
+  restrictions: m,
+  onComplete: i,
+  onError: n
+}) => {
+  const l = {
+    maxNumberOfFiles: null,
+    maxFileSize: null,
+    allowedFileTypes: null,
+    ...m
+  }, a = g(null), c = (u || (typeof document < "u" ? document.documentElement.lang : "fr") || "fr").startsWith("en") ? D : U, [e] = F(() => {
+    const r = new x({
+      locale: c,
+      restrictions: l
+    });
+    return r.use(N), r.use(_), r;
+  });
+  b(() => {
+    i && e.on("complete", i), n && e.on("error", n);
+    const r = () => {
+      if (!a.current) return;
+      const t = new DataTransfer();
+      e.getFiles().forEach((s) => {
+        if (s.data instanceof File)
+          t.items.add(s.data);
+        else if (s.data instanceof Blob) {
+          const h = new File([s.data], s.name, { type: s.data.type });
+          t.items.add(h);
+        }
+      }), a.current.files = t.files, a.current.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, d = [
+      "file-added",
+      "file-removed",
+      "files-added",
+      "file-editor:complete",
+      "preprocess-complete",
+      "postprocess-complete"
+    ];
+    return d.forEach((t) => e.on(t, r)), () => {
+      i && e.off("complete", i), n && e.off("error", n), d.forEach((t) => e.off(t, r));
+    };
+  }, [e, i, n]);
+  const p = l.maxNumberOfFiles === null || l.maxNumberOfFiles === void 0 || l.maxNumberOfFiles > 1;
+  return /* @__PURE__ */ f(v, { uppy: e, children: /* @__PURE__ */ y("div", { className: "file-input__wrapper", id: o, children: [
+    /* @__PURE__ */ f("div", { className: "file-input__content", children: /* @__PURE__ */ f(
+      w,
+      {
+        uppy: e,
+        width: "100%",
+        height: 300,
+        hideProgressDetails: !1,
+        hideUploadButton: !0,
+        proudlyDisplayPoweredByUppy: !1,
+        locale: {
+          strings: c.strings
+        }
+      }
+    ) }),
+    o && /* @__PURE__ */ f(
+      "input",
+      {
+        ref: a,
+        type: "file",
+        name: p ? `${o}[]` : o,
+        multiple: p,
+        style: { display: "none" }
+      }
+    )
+  ] }) });
+};
+export {
+  M as FileInput
+};

package/dist/components/Form/react/index.js

@@ -3,35 +3,36 @@ import { Form as r, InputGroup as C } from "react-bootstrap";
 import { Icon as c } from "../../Icon/react/index.js";
 import d from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/FloatingLabel.js";
 import '../style/index.css';/* empty css                  */
-import { NumberInput as h } from "./NumberInput.js";
-import { TelInput as b } from "./TelInput.js";
-import { PasswordInput as F } from "./PasswordInput.js";
-import { PasswordConfirm as I } from "./PasswordConfirm.js";
+import { NumberInput as F } from "./NumberInput.js";
+import { TelInput as h } from "./TelInput.js";
+import { PasswordInput as I } from "./PasswordInput.js";
+import { PasswordConfirm as b } from "./PasswordConfirm.js";
 import { RangeInput as w } from "./RangeInput.js";
-import { Select as N } from "./Select.js";
-import { handleNumericKeyDown as _ } from "../js/number.js";
-import { FormColor as x } from "./FormColor.js";
-import { FormDate as y } from "./FormDate.js";
-const D = ({
+import { FileInput as N } from "./FileInput.js";
+import { Select as _ } from "./Select.js";
+import { handleNumericKeyDown as x } from "../js/number.js";
+import { FormColor as y } from "./FormColor.js";
+import { FormDate as D } from "./FormDate.js";
+const g = ({
   label: n,
-  floating: l,
+  floating: a,
   icon: m,
-  children: a,
+  children: l,
   onKeyDown: i,
   ...e
 }) => {
-  const f = (p) => {
-    e.type === "number" && _(p), i && i(p);
-  }, u = e.type === "number" ? "decimal" : void 0;
-  return l && n ? /* @__PURE__ */ t(d, { label: n, controlId: e.id || e.name, children: /* @__PURE__ */ s("div", { className: "form__input", children: [
+  const f = (u) => {
+    e.type === "number" && x(u), i && i(u);
+  }, p = e.type === "number" ? "decimal" : void 0;
+  return a && n ? /* @__PURE__ */ t(d, { label: n, controlId: e.id || e.name, children: /* @__PURE__ */ s("div", { className: "form__input", children: [
     m && /* @__PURE__ */ t(c, { name: m, size: "sm" }),
     /* @__PURE__ */ t(
       r.Control,
       {
         ...e,
         onKeyDown: f,
-        inputMode: u,
-        children: a
+        inputMode: p,
+        children: l
       }
     )
   ] }) }) : /* @__PURE__ */ s("div", { className: "form__input", children: [
@@ -41,38 +42,39 @@ const D = ({
       {
         ...e,
         onKeyDown: f,
-        inputMode: u,
-        children: a
+        inputMode: p,
+        children: l
       }
     )
   ] });
 }, o = ({
   titre: n,
-  className: l = "",
+  className: a = "",
   children: m,
-  ...a
+  ...l
 }) => {
   const i = "form";
-  return /* @__PURE__ */ s(r, { className: `${i} ${l}`.trim(), ...a, children: [
+  return /* @__PURE__ */ s(r, { className: `${i} ${a}`.trim(), ...l, children: [
     n && /* @__PURE__ */ t("h1", { className: `${i}__title`, children: n }),
     m
   ] });
 };
 o.Group = r.Group;
-o.Control = D;
+o.Control = g;
 o.Label = r.Label;
 o.Text = r.Text;
 o.Check = r.Check;
-o.Select = N;
+o.Select = _;
 o.InputGroup = C;
-o.Number = h;
-o.Tel = b;
-o.Password = F;
-o.PasswordConfirm = I;
+o.Number = F;
+o.Tel = h;
+o.Password = I;
+o.PasswordConfirm = b;
 o.Range = w;
+o.File = N;
 o.FloatingLabel = d;
-o.Color = x;
-o.Date = y;
+o.Color = y;
+o.Date = D;
 export {
   o as Form
 };