zuii 1.4.18 → 1.4.19

package/dist/components/Dashboard/style/index.css

@@ -1 +1 @@
-@layer layout{.dashboard{--dashboard-nav-width: 90px;--dashboard-padding: var(--spacing-md);display:flex;height:100vh;overflow:hidden}.dashboard__navigation{display:flex;flex-direction:column;background:var(--primary);color:var(--white);padding:var(--dashboard-padding) 0;width:var(--dashboard-nav-width);gap:var(--spacing-lg)}.dashboard__navigation>:first-child{flex:1;overflow-y:auto}.dashboard__content{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%}.dashboard__header{grid-column:span 2;background:var(--accent)}.dashboard__sub-navigation{grid-row:2;background:var(--light);width:0px;background:var(--primary-dark);color:var(--white);transition:all .3s ease-in-out}.dashboard__sub-navigation.open{width:160px}.dashboard__wrapper{padding:var(--dashboard-padding);display:flex;flex-direction:column;gap:var(--spacing-md);overflow:auto}.dashboard__card{background:var(--white);border-radius:var(--radius-base);box-shadow:var(--box-shadow-md);height:fit-content}.dashboard__card-header{background:var(--gray-200);padding:0 var(--spacing-md);border-radius:var(--radius-base) var(--radius-base) 0 0}.dashboard__card-content{padding:var(--spacing-md)}.dashboard__card-title{font-size:1.25rem;margin:0}}@layer components{.dashboard__card-header .btn{--btn-font-size: .8rem;padding:var(--spacing-xs)}.dashboard__card-header .btn .icon{font-size:.8rem}}
+@layer layout{.dashboard{--dashboard-nav-width: 90px;--dashboard-padding: .8rem;display:flex;height:100vh;overflow:hidden}.dashboard__navigation{display:flex;flex-direction:column;background:var(--primary);color:var(--white);padding:1rem 0;width:var(--dashboard-nav-width);gap:var(--spacing-lg)}.dashboard__navigation>:first-child{flex:1;overflow-y:auto}.dashboard__navigation .nav{--font-size: .7rem}.dashboard__content{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%}.dashboard__header{grid-column:span 2;background:var(--accent)}.dashboard__sub-navigation{grid-row:2;background:var(--light);width:0px;background:var(--primary-dark);color:var(--white);transition:all .3s ease-in-out}.dashboard__sub-navigation.open{width:160px}.dashboard__wrapper{padding:var(--dashboard-padding);display:flex;flex-direction:column;gap:var(--spacing-md);overflow:auto}.dashboard__card{background:var(--white);border-radius:var(--radius-base);box-shadow:var(--box-shadow-md);height:fit-content}.dashboard__card-header{background:var(--gray-200);padding:0 var(--spacing-md);border-radius:var(--radius-base) var(--radius-base) 0 0}.dashboard__card-content{padding:var(--spacing-md)}.dashboard__card-title{font-size:1.25rem;margin:0}}@layer components{.dashboard__card-header .btn{--btn-font-size: .8rem;padding:var(--spacing-xs)}.dashboard__card-header .btn .icon{font-size:.8rem}}

package/dist/components/Form/js/tel-input.d.ts

@@ -10,3 +10,23 @@ export declare const getDefaultCountry: () => string;
  * @returns {MutationObserver | null} L'instance de l'observateur ou null.
  */
 export declare const watchLanguageChange: (initialCountry: any, callback: (country: string) => void) => MutationObserver | null;
+/**
+ * Supprime visuellement les zéros initiaux du champ input visible, si applicable (ex: "fr").
+ * @param {HTMLInputElement} inputElement - L'élément input visible.
+ * @param {string} country - Le code du pays sélectionné.
+ */
+export declare const removeLeadingZeros: (inputElement: HTMLInputElement, country: string) => void;
+/**
+ * Met à jour la valeur de l'input caché en ajoutant un "0" initial si nécessaire pour le pays (ex: "fr").
+ * @param {HTMLInputElement} visibleInput - L'élément input visible.
+ * @param {HTMLInputElement} hiddenInput - L'élément input caché qui sera soumis.
+ * @param {string} country - Le code du pays sélectionné.
+ */
+export declare const updateHiddenInputValue: (visibleInput: HTMLInputElement, hiddenInput: HTMLInputElement, country: string) => void;
+/**
+ * Formate le numéro en s'assurant qu'il commence par un "0" si le pays le requiert (ex: "fr").
+ * @param {string} internationalNumber - Le numéro fourni par intl-tel-input.
+ * @param {string} country - Le code du pays sélectionné.
+ * @returns {string} Le numéro formaté.
+ */
+export declare const formatInternationalNumber: (internationalNumber: string, country: string) => string;

package/dist/components/Form/js/tel-input.js

@@ -1,18 +1,29 @@
-const r = () => {
+const a = () => {
   if (typeof document > "u") return "fr";
   const t = document.documentElement.lang.toLowerCase();
   return t.startsWith("fr") ? "fr" : t.startsWith("en") ? "gb" : "fr";
-}, u = (t, n) => {
+}, u = (t, r) => {
   if (t || typeof document > "u") return null;
   const e = new MutationObserver(() => {
-    n(r());
+    r(a());
   });
   return e.observe(document.documentElement, {
     attributes: !0,
     attributeFilter: ["lang"]
   }), e;
+}, s = (t, r) => {
+  r === "fr" && t.value.startsWith("0") && (t.value = t.value.replace(/^0+/, ""));
+}, o = (t, r, e) => {
+  let n = t.value;
+  e === "fr" && n && !n.startsWith("0") && !n.startsWith("+") && (n = "0" + n), r.value = n;
+}, i = (t, r) => {
+  let e = t;
+  return r === "fr" && e && !e.startsWith("+") && !e.startsWith("0") && (e = "0" + e), e;
 };
 export {
-  r as getDefaultCountry,
+  i as formatInternationalNumber,
+  a as getDefaultCountry,
+  s as removeLeadingZeros,
+  o as updateHiddenInputValue,
   u as watchLanguageChange
 };

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

@@ -1,55 +1,57 @@
-import { jsxs as V, jsx as t } from "react/jsx-runtime";
-import { forwardRef as j, useRef as a, useState as C, useMemo as F, useEffect as d } from "react";
+import { jsxs as d, Fragment as F, jsx as t } from "react/jsx-runtime";
+import { forwardRef as N, useRef as i, useState as V, useMemo as j, useEffect as p } from "react";
 import { Form as P } from "react-bootstrap";
 import { Icon as _ } from "../../Icon/react/index.js";
-import { getRangeSeparator as b, initDatePicker as g, formatHiddenDateValue as k } from "../js/date.js";
-const S = j(({
+import { getRangeSeparator as b, initDatePicker as k, formatHiddenDateValue as v } from "../js/date.js";
+const S = N(({
   flatpickrOptions: n,
   value: e = "",
-  onChange: c,
-  placeholder: p,
+  onChange: u,
+  placeholder: h,
   name: R,
-  className: h = "",
-  icon: u,
-  disabled: f = !1,
-  ...y
-}, I) => {
-  const x = I, o = a(null), i = a(null), r = a(null), [s, m] = C(e || ""), D = F(() => b(n?.locale), [n?.locale]);
-  d(() => {
-    if (o.current)
-      return r.current = g(
-        o.current,
+  className: I = "",
+  icon: f,
+  disabled: m = !1,
+  ...g
+}, x) => {
+  const y = x, a = i(null), l = i(null), r = i(null), [s, c] = V(e || ""), D = j(() => b(n?.locale), [n?.locale]);
+  p(() => {
+    if (a.current)
+      return r.current = k(
+        a.current,
         n,
-        i.current,
-        (l) => {
-          m(l), c?.(l);
+        l.current,
+        (o) => {
+          c(o), u?.(o);
         }
       ), () => r.current?.destroy();
-  }, [n, c]), d(() => {
-    e !== void 0 && e !== s && (m(e || ""), r.current?.setDate(e || "", !1));
+  }, [n, u]), p(() => {
+    e !== void 0 && e !== s && (c(e || ""), r.current?.setDate(e || "", !1));
   }, [e]);
-  const N = () => {
-    f || r.current?.open();
+  const C = () => {
+    m || r.current?.open();
   };
-  return /* @__PURE__ */ V("div", { className: `form__input ${h}`.trim(), children: [
-    u && /* @__PURE__ */ t(_, { name: u, size: "sm" }),
-    /* @__PURE__ */ t(
-      P.Control,
-      {
-        ...y,
-        ref: x,
-        autoComplete: "off",
-        value: s,
-        onClick: N,
-        readOnly: !0,
-        disabled: f,
-        placeholder: p,
-        className: "form-date-control"
-      }
-    ),
-    /* @__PURE__ */ t("span", { ref: i, className: "form-date-anchor" }),
-    /* @__PURE__ */ t("input", { ref: o, style: { display: "none" }, tabIndex: -1, "aria-hidden": "true" }),
-    /* @__PURE__ */ t("input", { type: "hidden", name: R, value: k(s, D, r.current) })
+  return /* @__PURE__ */ d(F, { children: [
+    /* @__PURE__ */ d("div", { className: `form__input ${I}`.trim(), children: [
+      f && /* @__PURE__ */ t(_, { name: f, size: "sm" }),
+      /* @__PURE__ */ t(
+        P.Control,
+        {
+          ...g,
+          ref: y,
+          autoComplete: "off",
+          value: s,
+          onChange: (o) => c(o.target.value),
+          onClick: C,
+          disabled: m,
+          placeholder: h,
+          className: "form-date-control"
+        }
+      ),
+      /* @__PURE__ */ t("span", { ref: l, className: "form-date-anchor" })
+    ] }),
+    /* @__PURE__ */ t("input", { ref: a, style: { display: "none" }, tabIndex: -1, "aria-hidden": "true" }),
+    /* @__PURE__ */ t("input", { type: "hidden", name: R, value: v(s, D, r.current) })
   ] });
 });
 export {

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

@@ -27,6 +27,14 @@ export interface TelInputProps {
      * Si l'input est désactivé.
      */
     disabled?: boolean;
+    /**
+     * Nom du champ pour le formulaire.
+     */
+    name?: string;
+    /**
+     * Nom du champ pour le formulaire.
+     */
+    nameFormat?: string;
 }
 /**
  * Composant TelInput utilisant intl-tel-input.
@@ -34,4 +42,4 @@ export interface TelInputProps {
  * @param {TelInputProps} props - Les propriétés du composant.
  * @returns {JSX.Element} Le composant TelInput rendu.
  */
-export declare const TelInput: ({ value, onChange, initialCountry, className, placeholder, disabled, }: TelInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TelInput: ({ value, onChange, initialCountry, className, placeholder, name, nameFormat, disabled, }: TelInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,52 +1,77 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as f, useState as g, useEffect as u } from "react";
-import { Form as b } from "react-bootstrap";
-import h from "intl-tel-input";
-import { getDefaultCountry as N, watchLanguageChange as y } from "../js/tel-input.js";
-const w = ({
-  value: n,
-  onChange: c,
-  initialCountry: o,
-  className: m = "",
-  placeholder: l,
-  disabled: p = !1
+import { jsxs as E, Fragment as N, jsx as i } from "react/jsx-runtime";
+import { useRef as s, useState as I, useEffect as f } from "react";
+import { Form as D } from "react-bootstrap";
+import R from "intl-tel-input";
+import { getDefaultCountry as S, watchLanguageChange as x, removeLeadingZeros as j, formatInternationalNumber as w, updateHiddenInputValue as F } from "../js/tel-input.js";
+const U = ({
+  value: u,
+  onChange: p,
+  initialCountry: d,
+  className: y = "",
+  placeholder: v,
+  name: m,
+  nameFormat: g,
+  disabled: C = !1
 }) => {
-  const r = f(null), t = f(null), [i, a] = g(o || N());
-  return u(() => {
-    const e = y(o, (d) => {
-      a(d);
+  const r = s(null), e = s(null), a = s(null), l = s(null), [c, b] = I(d || S());
+  return f(() => {
+    const t = x(d, (n) => {
+      b(n);
     });
     return () => {
-      e && e.disconnect();
+      t && t.disconnect();
     };
-  }, [o]), u(() => {
+  }, [d]), f(() => {
     if (r.current) {
-      t.current = h(r.current, {
-        initialCountry: i,
+      e.current = R(r.current, {
+        initialCountry: c,
         loadUtils: () => import("../../../node_modules/.pnpm/intl-tel-input@26.1.1/node_modules/intl-tel-input/build/js/utils.js"),
         separateDialCode: !0,
         strictMode: !0
       });
-      const e = () => {
-        c && c(t.current.getNumber());
+      const t = () => {
+        const o = e.current ? e.current.getSelectedCountryData().iso2 : c;
+        a.current && r.current && F(r.current, a.current, o), l.current && e.current && (l.current.value = e.current.getNumber() || "");
+      }, n = () => {
+        t();
+        const o = e.current ? e.current.getSelectedCountryData().iso2 : c;
+        if (p && e.current) {
+          const L = w(e.current.getNumber() || "", o);
+          p(L);
+        }
+      }, h = () => {
+        const o = e.current ? e.current.getSelectedCountryData().iso2 : c;
+        r.current && j(r.current, o), t();
       };
-      return r.current.addEventListener("change", e), r.current.addEventListener("blur", e), () => {
-        t.current && t.current.destroy();
+      return r.current.addEventListener("input", h), r.current.addEventListener("change", n), r.current.addEventListener("blur", n), t(), () => {
+        e.current && e.current.destroy(), r.current && (r.current.removeEventListener("input", h), r.current.removeEventListener("change", n), r.current.removeEventListener("blur", n));
       };
     }
-  }, [i]), u(() => {
-    t.current && n !== void 0 && n !== t.current.getNumber() && t.current.setNumber(n);
-  }, [n]), /* @__PURE__ */ s("div", { className: `tel-input-wrapper form__input ${m}`.trim(), children: /* @__PURE__ */ s(
-    b.Control,
-    {
-      ref: r,
-      type: "tel",
-      placeholder: l,
-      disabled: p,
-      className: "tel-input-control "
-    }
-  ) });
+  }, [c]), f(() => {
+    e.current && u !== void 0 && u !== e.current.getNumber() && e.current.setNumber(u);
+  }, [u]), /* @__PURE__ */ E(N, { children: [
+    /* @__PURE__ */ i("div", { className: `tel-input-wrapper form__input ${y}`.trim(), children: /* @__PURE__ */ i(
+      D.Control,
+      {
+        ref: r,
+        type: "tel",
+        placeholder: v,
+        disabled: C,
+        className: "tel-input-control "
+      }
+    ) }),
+    m && /* @__PURE__ */ i("input", { type: "hidden", name: m, ref: a }),
+    g && /* @__PURE__ */ i(
+      "input",
+      {
+        type: "hidden",
+        name: g,
+        ref: l,
+        defaultValue: u
+      }
+    )
+  ] });
 };
 export {
-  w as TelInput
+  U as TelInput
 };

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

@@ -63,7 +63,7 @@ export declare const Form: {
         Checkbox: (props: FormCheckInputProps) => import("react/jsx-runtime").JSX.Element;
     };
     Number: ({ value, onChange, min, max, step, className, placeholder, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
-    Tel: ({ value, onChange, initialCountry, className, placeholder, disabled, }: TelInputProps) => import("react/jsx-runtime").JSX.Element;
+    Tel: ({ value, onChange, initialCountry, className, placeholder, name, nameFormat, disabled, }: TelInputProps) => import("react/jsx-runtime").JSX.Element;
     Password: ({ value, onChange, className, placeholder, disabled, }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
     PasswordConfirm: ({ passwordToMatch, value, onChange, className, placeholder, disabled, errorMessage, }: PasswordConfirmProps) => import("react/jsx-runtime").JSX.Element;
     Range: ({ value, onChange, min, max, step, className, }: RangeInputProps) => import("react/jsx-runtime").JSX.Element;