bitboss-ui 2.0.38 → 2.0.39

package/dist/index23.js

@@ -1,261 +1,303 @@
-import { defineComponent as ae, ref as o, getCurrentInstance as se, computed as m, nextTick as N, useAttrs as ne, onMounted as ie, onBeforeUnmount as F, watch as re, openBlock as _, createBlock as ue, Teleport as de, createElementVNode as a, mergeProps as G, createElementBlock as T, renderSlot as u, createTextVNode as ce, toDisplayString as P, createCommentVNode as z } from "vue";
-import { throttle as ve } from "./index200.js";
-import { useFocusTrap as fe } from "./index201.js";
-import { useId as K } from "./index8.js";
-import { wait as H } from "./index127.js";
-import { waitFor as be } from "./index202.js";
-import { useModalsState as k } from "./index203.js";
-import { useLogger as pe } from "./index204.js";
-const me = { class: "bb-base-dialog-close" }, ge = ["aria-label"], ye = /* @__PURE__ */ a("span", { class: "bb-base-dialog-close__icon" }, [
-  /* @__PURE__ */ a("svg", {
-    "aria-hidden": "true",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, [
-    /* @__PURE__ */ a("path", {
-      d: "M23 23L1 1M23 1L1 23",
-      stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-width": "2"
-    })
-  ])
-], -1), he = /* @__PURE__ */ a("div", { style: { flex: "10000 10000 0%" } }, null, -1), ze = /* @__PURE__ */ ae({
-  __name: "BaseDialog",
+import { defineComponent as ae, ref as o, computed as v, watch as oe, openBlock as w, createBlock as V, normalizeClass as B, withCtx as i, renderSlot as d, createVNode as E, withDirectives as ne, createElementVNode as r, mergeProps as I, unref as c, withModifiers as re, toDisplayString as F, Teleport as le, normalizeStyle as ie, KeepAlive as se, createCommentVNode as L } from "vue";
+import { useFloating as ue } from "./index215.js";
+import n from "./index216.js";
+import de from "./index217.js";
+import ce from "./index218.js";
+import pe from "./index219.js";
+import me from "./index220.js";
+import { identity as fe } from "./index221.js";
+import { last as be } from "./index222.js";
+import { useFocusTrap as ve } from "./index223.js";
+import { useId as ye } from "./index8.js";
+import { useIntersectionObserver as ge } from "./index132.js";
+import { useMobile as ke } from "./index9.js";
+import { vMaska as Me } from "./index224.js";
+import { wait as he } from "./index131.js";
+import { waitFor as we } from "./index225.js";
+import Ve from "./index21.js";
+/* empty css        */
+import Ce from "./index206.js";
+/* empty css         */
+import Ye from "./index208.js";
+import Ae from "./index226.js";
+import { autoUpdate as De, flip as Se, offset as $e, shift as Oe, hide as _e } from "./index227.js";
+const Be = ["id", "aria-describedby", "autocomplete", "autofocus", "data-maska", "disabled", "inputmode", "name", "placeholder", "readonly", "required", "value"], Ee = ["disabled"], Ie = { class: "sr-only" }, Fe = ["id"], rt = /* @__PURE__ */ ae({
+  __name: "BaseDatePickerInput",
   props: {
-    closeLabel: { default: "Chiudi modale" },
-    compact: { type: Boolean },
+    allowWriting: { type: [Boolean, String], default: !0 },
+    "append:icon": {},
+    autocomplete: { default: "off" },
+    autofocus: {},
     disabled: { type: Boolean },
-    eager: { type: Boolean },
-    panelClasses: { default: () => [] },
-    overlayClasses: { default: () => [] },
-    persistent: { type: Boolean },
-    showClose: { type: Boolean, default: !0 },
-    title: {},
-    transition: { default: "fade" },
-    transitionDuration: { default: 350 },
-    size: { default: "sm" },
-    description: {},
-    focusTarget: {},
-    fullscreen: { type: Boolean },
-    modelValue: { type: [Boolean, null] }
+    firstDayOfWeek: {},
+    hasErrors: { type: Boolean },
+    id: {},
+    loading: { type: Boolean },
+    max: {},
+    min: {},
+    modelValue: {},
+    name: {},
+    placeholder: {},
+    "prepend:icon": {},
+    range: { type: Boolean },
+    readonly: { type: Boolean },
+    required: { type: Boolean },
+    selectable: {},
+    width: { default: 290 }
   },
-  emits: ["shown", "hidden", "update:modelValue"],
-  setup(U, { emit: j }) {
-    var I, R;
-    const t = U, d = j, C = `title_${K().id.value}`, B = `description_${K().id.value}`, g = o(null), c = o(null), $ = o(null), y = o(null), v = o(null), s = o(null), f = o(null), q = o(null), L = !!((R = (I = se()) == null ? void 0 : I.proxy) != null && R.$nuxt), h = o(0), J = m(() => {
-      const { openedModals: e } = k();
-      return e.value && e.value === h.value;
-    }), { activate: Q, deactivate: M } = fe($, {
-      initialFocus: t.focusTarget ?? void 0,
-      clickOutsideDeactivates: (e) => e.target === c.value,
-      allowOutsideClick: !0,
-      /* On esc deactivate the trap, return focus and then close the modal */
-      escapeDeactivates: () => (N(() => {
-        d("update:modelValue", !1);
-      }), !0)
-    }), X = ne(), Y = m(() => t.closeLabel);
-    ie(async () => {
-      s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value)), window.addEventListener("resize", r), r(), !(!t.modelValue && !i.value) && (L && !globalThis.document || S());
-    }), F(() => {
-      window.removeEventListener("resize", r);
-    });
-    const V = o(!1), b = o(!1), D = o(!0), p = o(!1), i = o(t.eager || t.modelValue), O = m(() => b.value || p.value), Z = () => {
-      if (!globalThis.document) return;
-      const e = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden", document.body.style.paddingRight = `${e}px`;
-    }, x = () => {
-      globalThis.document && (document.body.style.overflow = "auto", document.body.style.paddingRight = "0px");
-    };
-    F(() => {
-      if (t.modelValue) {
-        const { openedModals: e, modalHasClosed: l } = k();
-        e.value && (l(), h.value = 0, x());
-      }
-    });
-    const S = async () => {
-      if (t.modelValue) {
-        i.value || (i.value = !0, await be(() => !!s.value), await N(), s.value && (g.value = new ResizeObserver(r), g.value.observe(s.value))), D.value = !1, p.value = !1, b.value = !0;
-        const { modalHasOpened: e, openedModals: l } = k();
-        e(), h.value = l.value, Z(), await H(t.transitionDuration), b.value = !1, V.value = !0, d("shown"), Q();
-      } else {
-        M(), b.value = !1, V.value = !1, p.value = !0, await H(t.transitionDuration), p.value = !1, D.value = !0;
-        const { modalHasClosed: e, openedModals: l } = k();
-        e(), h.value = 0, l.value || x(), d("hidden");
+  emits: ["active", "error", "focus", "inactive", "update:modelValue"],
+  setup(W, { emit: z }) {
+    n.extend(de), n.extend(pe), n.extend(me), n.locale(ce);
+    const t = W, s = z, u = o(null), C = o(null), p = o(null), j = o(null), y = o(null), A = o(), g = t.id || `bdpi_${ye().id.value}`, { isMobile: D } = ke(), q = v(
+      () => t.allowWriting === "not-mobile" && D.value ? "none" : "numeric"
+    ), Y = o(!0);
+    ge(
+      p,
+      ([{ intersectionRatio: e }]) => {
+        e === 1 ? Y.value = !0 : (Y.value = !1, m.value && (_(), p.value && p.value.$el.querySelector(
+          ".bb-base-date-picker-input__calendar-btn"
+        ).focus(), h()));
+      },
+      { threshold: [0, 1] }
+    );
+    const G = v(() => ({
+      "bb-base-date-picker-input": !0,
+      "bb-base-date-picker-input--active": k.value,
+      "bb-base-date-picker-input--errors": t.hasErrors,
+      "bb-base-date-picker-input--loading": t.loading,
+      "bb-base-date-picker-input--readonly": t.readonly,
+      "bb-base-date-picker-input--disabled": t.disabled
+    })), P = {
+      onInput: (e) => {
+        if (!t.range && e.target instanceof HTMLInputElement)
+          if (y.value = e.target.value, /\d{2}\/\d{2}\/\d{4}/.test(e.target.value)) {
+            const a = n(e.target.value, "DD/MM/YYYY");
+            ee(a) ? (e.target.value = "", s("update:modelValue", null), s("error", "invalid_date_typed")) : s("update:modelValue", a.toISOString());
+          } else e.target.value === "" && s("update:modelValue", null);
       }
-    };
-    re(
+    }, k = o(!1), H = () => {
+      k.value || (s("active"), k.value = !0, document.addEventListener("focusin", M), document.addEventListener("click", M));
+    }, M = (e) => {
+      var a, l;
+      f.value || e.target instanceof HTMLElement && (a = C.value) != null && a.$el && !C.value.$el.contains(e.target) && !((l = u.value) != null && l.contains(e.target)) && (k.value = !1, s("inactive"), document.removeEventListener("focusin", M), document.removeEventListener("click", M));
+    }, S = (e) => {
+      if (e)
+        if (Array.isArray(e)) {
+          let a, l;
+          return e.length && (a = e[0]), e.length > 1 && (l = be(e)), [a, l].filter(fe).map((te) => n(te).format("DD/MM/YYYY")).join(" - ");
+        } else
+          return n(e).format("DD/MM/YYYY");
+      return null;
+    }, T = v(() => y.value ? y.value : S(t.modelValue));
+    oe(
       () => t.modelValue,
-      () => {
-        !t.modelValue && !i.value || L && !globalThis.document || S();
-      },
-      { flush: "post" }
+      (e) => {
+        y.value = S(e);
+      }
     );
-    const w = (e) => {
-      e.target === c.value && e.preventDefault();
-    }, ee = (e) => {
-      t.disabled || O.value || c.value && e.target === c.value && (t.persistent || d("update:modelValue", !1));
-    }, A = () => {
-      t.disabled || O.value || (M(), d("update:modelValue", !1));
-    }, te = m(() => {
-      const e = [
-        {
-          "bb-base-dialog bb-base-dialog__overlay": !0,
-          "bb-base-dialog--fullscreen": t.fullscreen,
-          "bb-base-dialog--faded": !J.value,
-          "bb-base-dialog--open": V.value,
-          "bb-base-dialog--opening": b.value,
-          "bb-base-dialog--closed": D.value,
-          "bb-base-dialog--closing": p.value,
-          [`bb-base-dialog--transition-${t.transition}`]: !0
-        },
-        t.overlayClasses
-      ].flat(), l = {
-        onClick: ee,
-        onScroll: w,
-        onTouchmove: w,
-        onWheel: w,
-        onKeydown: w
-      }, n = {
-        transitionDuration: t.transitionDuration / 1e3 + "s"
-      };
-      return {
-        class: e,
-        style: n,
-        ...l,
-        ...X
-      };
-    }), le = m(() => {
-      const e = [
-        {
-          "bb-base-dialog__panel": !0,
-          "bb-base-dialog__panel--compact": t.compact
-        },
-        t.panelClasses
-      ].flat(), l = {
-        role: "dialog",
-        "aria-modal": !0
-      };
-      i.value && (t.title && (l["aria-labelledby"] = C), t.description && (l["aria-describedby"] = B));
-      let n;
-      const W = {
-        sm: 384,
-        md: 652,
-        lg: 896
-      };
-      t.fullscreen ? n = "100%" : typeof t.size == "number" ? n = t.size + "px" : t.size in W ? n = W[t.size] + "px" : n = t.size + "px";
-      const oe = {
-        maxWidth: n,
-        transitionDuration: t.transitionDuration / 1e3 + "s"
-      };
-      return {
-        class: e,
-        style: oe,
-        ...l
+    const { floatingStyles: N, placement: U } = ue(p, u, {
+      placement: "bottom",
+      whileElementsMounted: De,
+      middleware: [Se(), $e(5), Oe({ padding: 6 }), _e()]
+    }), K = v(() => {
+      const e = {
+        ...N.value
       };
-    });
-    let E = 0;
-    const r = ve(
-      async () => {
-        if (E++, E === 100) {
-          const { error: e } = pe();
-          e(
-            "Dialog is updating its height too often. Please check the content is reliably sized."
-          );
-        }
-        if (t.fullscreen) {
-          q.value = window.innerHeight;
-          return;
-        }
-        if (v.value && s.value && f.value) {
-          const e = v.value.scrollHeight + s.value.scrollHeight + f.value.scrollHeight + 2;
-          if (y.value && (y.value.style.height = "0px", y.value.style.height = `${e + 2}px`, await H(30), v.value && s.value && f.value)) {
-            const l = v.value.scrollHeight + s.value.scrollHeight + f.value.scrollHeight + 2;
-            e !== l && r();
-          }
-        }
+      return u.value, e;
+    }), m = o(!1), R = async () => {
+      m.value = !0;
+    }, h = async () => {
+      var e;
+      m.value = !1, (e = A.value) == null || e.resetStatus();
+    }, $ = o(!1), O = async () => {
+      f.value || ($.value = !0, await we(() => !!u.value), await R(), Z());
+    }, f = o(!1), { activate: Z, deactivate: _ } = ve(u, {
+      onActivate: () => f.value = !0,
+      // On post activation focus on current date
+      onPostActivate: () => {
+        var e;
+        (e = u.value.querySelector(
+          ".bb-base-date-picker-date--current button"
+        )) == null || e.focus();
       },
-      200,
-      { trailing: !0 }
-    );
-    return (e, l) => (_(), ue(de, { to: "body" }, [
-      a("div", G(te.value, {
-        ref_key: "overlay",
-        ref: c
-      }), [
-        a("div", G(le.value, {
-          ref_key: "panel",
-          ref: $
-        }), [
-          i.value ? (_(), T("div", {
+      onPostDeactivate: async () => {
+        await he(200), f.value = !1;
+      },
+      /* On esc deactivate the trap, return focus and then close the modal */
+      escapeDeactivates: () => (b.value = !1, h(), !0),
+      clickOutsideDeactivates: () => (b.value = !1, h(), !0),
+      allowOutsideClick: !0,
+      preventScroll: !0
+    }), b = o(!t.allowWriting || t.range), J = async (e) => {
+      s("focus", e), b.value && O(), b.value = !t.allowWriting || t.allowWriting === "not-mobile" && D.value || t.range;
+    }, Q = (e) => t.range && Array.isArray(e) && e.length === 2 || !t.range && !!e, X = {
+      "onUpdate:modelValue": (e) => {
+        s("update:modelValue", e), Q(e) && (b.value = !1, _({
+          onPostDeactivate: () => {
+            f.value = !1, h();
+          }
+        }));
+      }
+    }, x = v(() => {
+      if (t.range) {
+        if (!t.modelValue || t.modelValue.length < 2)
+          return "Seleziona un range";
+        const e = n(t.modelValue[0]).format("D MMMM YYYY"), a = n(t.modelValue[1]).format("D MMMM YYYY");
+        if (t.range && t.modelValue.length === 2)
+          return `Cambia selezione, da ${e} a ${a}`;
+      } else if (typeof t.modelValue == "string")
+        return `Cambia selezione, ${n(t.modelValue).format("D MMMM YYYY")}`;
+      return "Seleziona una data";
+    }), ee = (e) => {
+      let a = !0;
+      return t.min && a && (a = e.isSameOrAfter(n(t.min).startOf("day"))), t.max && a && (a = e.isSameOrBefore(n(t.max).startOf("day"))), typeof t.selectable == "function" && a && (a = t.selectable(e.toDate())), !a;
+    };
+    return (e, a) => (w(), V(Ye, {
+      ref_key: "outerContainer",
+      ref: C,
+      class: B(G.value),
+      onFocusin: H
+    }, {
+      "prepend-outer": i(() => [
+        d(e.$slots, "prepend-outer")
+      ]),
+      "append-outer": i(() => [
+        d(e.$slots, "append-outer")
+      ]),
+      default: i(() => {
+        var l;
+        return [
+          E(Ce, {
+            ref_key: "innerContainer",
+            ref: p,
+            "append:icon": t["append:icon"],
+            "prepend:icon": t["prepend:icon"]
+          }, {
+            prepend: i(() => [
+              d(e.$slots, "prepend")
+            ]),
+            prefix: i(() => [
+              d(e.$slots, "prefix")
+            ]),
+            append: i(() => [
+              d(e.$slots, "append")
+            ]),
+            suffix: i(() => [
+              d(e.$slots, "suffix")
+            ]),
+            default: i(() => [
+              ne(r("input", I({
+                id: c(g),
+                ref_key: "input",
+                ref: j,
+                "aria-describedby": `bdpi_description_${c(g)}`,
+                autocomplete: e.autocomplete,
+                autofocus: e.autofocus,
+                "data-maska": t.range ? "##/##/#### - ##/##/####" : "##/##/####",
+                disabled: e.disabled,
+                inputmode: q.value,
+                name: e.name,
+                placeholder: e.placeholder,
+                readonly: e.readonly || e.range || !e.allowWriting,
+                required: e.required
+              }, P, {
+                size: "1",
+                type: "text",
+                value: T.value,
+                onFocus: J
+              }), null, 16, Be), [
+                [c(Me)]
+              ]),
+              r("button", {
+                class: "bb-base-date-picker-input__calendar-btn",
+                disabled: e.disabled || e.readonly || !Y.value,
+                type: "button",
+                onClick: re(O, ["stop"])
+              }, [
+                a[0] || (a[0] = r("svg", {
+                  fill: "none",
+                  viewBox: "0 0 16 16",
+                  xmlns: "http://www.w3.org/2000/svg"
+                }, [
+                  r("path", {
+                    d: "M12.6667 2.66667H3.33333C2.59695 2.66667 2 3.26363 2 4.00001V13.3333C2 14.0697 2.59695 14.6667 3.33333 14.6667H12.6667C13.403 14.6667 14 14.0697 14 13.3333V4.00001C14 3.26363 13.403 2.66667 12.6667 2.66667Z",
+                    stroke: "currentColor",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }),
+                  r("path", {
+                    d: "M10.6667 1.33333V3.99999",
+                    stroke: "currentColor",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }),
+                  r("path", {
+                    d: "M5.33333 1.33333V3.99999",
+                    stroke: "currentColor",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }),
+                  r("path", {
+                    d: "M2 6.66667H14",
+                    stroke: "currentColor",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ], -1)),
+                r("span", Ie, F(x.value), 1)
+              ], 8, Ee),
+              r("span", {
+                id: `bdpi_description_${c(g)}`,
+                class: "bb-base-date-picker-input__accessible-description sr-only"
+              }, "Formato della data " + F(t.range ? "GG/MM/AAAA - GG/MM/AAAA" : "GG/MM/AAAA"), 9, Fe)
+            ]),
+            _: 3
+          }, 8, ["append:icon", "prepend:icon"]),
+          $.value ? (w(), V(le, {
             key: 0,
-            ref_key: "content",
-            ref: y,
-            class: "bb-base-dialog__content"
+            to: "body"
           }, [
-            a("div", {
-              ref_key: "header",
-              ref: v,
-              class: "bb-base-dialog__header"
+            r("span", {
+              ref_key: "calendar",
+              ref: u,
+              class: B(["bb-base-date-picker-input__calendar", {
+                "bb-base-date-picker-input__calendar--shown": m.value
+              }]),
+              style: ie(K.value)
             }, [
-              u(e.$slots, "header", {
-                close: A,
-                title: e.title,
-                titleId: C
-              }, () => [
-                a("span", {
-                  id: C,
-                  class: "bb-base-dialog__title"
-                }, [
-                  u(e.$slots, "title", { text: e.title }, () => [
-                    ce(P(e.title), 1)
-                  ])
+              E(Ae, {
+                direction: (l = c(U)) != null && l.includes("top") ? "bottom" : "top",
+                duration: 300
+              }, {
+                default: i(() => [
+                  (w(), V(se, null, [
+                    m.value ? (w(), V(Ve, I({
+                      key: 0,
+                      id: c(g)
+                    }, X, {
+                      ref_key: "basedatepicker",
+                      ref: A,
+                      disabled: e.disabled,
+                      "first-day-of-week": e.firstDayOfWeek,
+                      max: e.max,
+                      min: e.min,
+                      "model-value": e.modelValue,
+                      range: e.range,
+                      readonly: e.readonly,
+                      selectable: e.selectable
+                    }), null, 16, ["id", "disabled", "first-day-of-week", "max", "min", "model-value", "range", "readonly", "selectable"])) : L("", !0)
+                  ], 1024))
                 ]),
-                a("span", me, [
-                  e.showClose ? (_(), T("button", {
-                    key: 0,
-                    "aria-label": Y.value,
-                    type: "button",
-                    onClick: A
-                  }, [
-                    u(e.$slots, "close", {}, () => [
-                      ye
-                    ])
-                  ], 8, ge)) : z("", !0)
-                ])
-              ])
-            ], 512),
-            a("div", {
-              ref_key: "body",
-              ref: s,
-              class: "bb-base-dialog__body scrollbar-border"
-            }, [
-              u(e.$slots, "description", {
-                descriptionId: B,
-                text: e.description
-              }, () => [
-                e.description ? (_(), T("div", {
-                  key: 0,
-                  id: B,
-                  class: "bb-base-dialog__description sr-only"
-                }, P(e.description), 1)) : z("", !0)
-              ]),
-              u(e.$slots, "default")
-            ], 512),
-            he,
-            a("div", {
-              ref_key: "footer",
-              ref: f,
-              class: "bb-base-dialog__footer"
-            }, [
-              u(e.$slots, "footer")
-            ], 512)
-          ], 512)) : z("", !0)
-        ], 16)
-      ], 16)
-    ]));
+                _: 1
+              }, 8, ["direction"])
+            ], 6)
+          ])) : L("", !0)
+        ];
+      }),
+      _: 3
+    }, 8, ["class"]));
   }
 });
 export {
-  ze as default
+  rt as default
 };