bitboss-ui 2.0.5 → 2.0.8

package/dist/index22.js

@@ -1,264 +1,304 @@
-import { defineComponent as ae, ref as o, getCurrentInstance as se, computed as g, nextTick as G, useAttrs as ne, onMounted as ie, onBeforeUnmount as P, watch as re, openBlock as w, createBlock as ue, Teleport as de, createElementVNode as a, mergeProps as K, createElementBlock as T, renderSlot as u, createTextVNode as ce, toDisplayString as z, createCommentVNode as H } from "vue";
-import { throttle as ve } from "./index224.js";
-import { useFocusTrap as be } from "./index225.js";
-import { useId as U } from "./index7.js";
-import { wait as $ } from "./index126.js";
-import { waitFor as fe } from "./index226.js";
-import { useModalsState as k } from "./index227.js";
-import { useLogger as pe } from "./index207.js";
-const ge = { class: "bb-base-dialog-close" }, me = { class: "bb-base-dialog-close__content" }, he = { class: "bb-base-dialog-close__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), _e = /* @__PURE__ */ a("div", { style: { flex: "10000 10000 0%" } }, null, -1), He = /* @__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, toDisplayString as F, Teleport as re, normalizeStyle as le, KeepAlive as ie, createCommentVNode as L } from "vue";
+import { useFloating as se } from "./index202.js";
+import n from "./index203.js";
+import ue from "./index204.js";
+import de from "./index205.js";
+import ce from "./index206.js";
+import pe from "./index207.js";
+import { identity as me } from "./index208.js";
+import { last as fe } from "./index209.js";
+import { useFocusTrap as be } from "./index210.js";
+import { useId as ve } from "./index9.js";
+import { useIntersectionObserver as ye } from "./index129.js";
+import { useMobile as ge } from "./index10.js";
+import { vMaska as ke } from "./index211.js";
+import { wait as he } from "./index128.js";
+import { waitFor as Me } from "./index212.js";
+import we from "./index20.js";
+/* empty css        */
+import Ve from "./index213.js";
+/* empty css         */
+import Ce from "./index215.js";
+import Ye from "./index216.js";
+import { autoUpdate as Ae, flip as De, offset as Se, shift as _e, hide as $e } from "./index217.js";
+const Oe = ["id", "aria-describedby", "autocomplete", "autofocus", "data-maska", "disabled", "inputmode", "name", "placeholder", "readonly", "required", "value"], Be = ["disabled"], Ee = /* @__PURE__ */ r("svg", {
+  fill: "none",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+}, [
+  /* @__PURE__ */ 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"
+  }),
+  /* @__PURE__ */ r("path", {
+    d: "M10.6667 1.33333V3.99999",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }),
+  /* @__PURE__ */ r("path", {
+    d: "M5.33333 1.33333V3.99999",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }),
+  /* @__PURE__ */ r("path", {
+    d: "M2 6.66667H14",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })
+], -1), 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(j, { emit: q }) {
-    var W, N;
-    const t = j, d = q, C = `title_${U().id.value}`, B = `description_${U().id.value}`, m = o(null), c = o(null), L = o(null), h = o(null), v = o(null), s = o(null), b = o(null), J = o(null), M = !!((N = (W = se()) == null ? void 0 : W.proxy) != null && N.$nuxt), y = o(0), Q = g(() => {
-      const { openedModals: e } = k();
-      return e.value && e.value === y.value;
-    }), { activate: X, deactivate: x } = be(L, {
-      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: () => (G(() => {
-        d("update:modelValue", !1);
-      }), !0)
-    }), Y = ne(), O = g(() => t.closeLabel);
-    ie(async () => {
-      s.value && (m.value = new ResizeObserver(r), m.value.observe(s.value)), window.addEventListener("resize", r), r(), !(!t.modelValue && !i.value) && (M && !globalThis.document || E());
-    }), P(() => {
-      window.removeEventListener("resize", r);
-    });
-    const V = o(!1), f = o(!1), D = o(!0), p = o(!1), i = o(t.eager || t.modelValue), S = g(() => f.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`;
-    }, A = () => {
-      globalThis.document && (document.body.style.overflow = "auto", document.body.style.paddingRight = "0px");
-    };
-    P(() => {
-      if (t.modelValue) {
-        const { openedModals: e, modalHasClosed: l } = k();
-        e.value && (l(), y.value = 0, A());
-      }
-    });
-    const E = async () => {
-      if (t.modelValue) {
-        i.value || (i.value = !0, await fe(() => !!s.value), await G(), s.value && (m.value = new ResizeObserver(r), m.value.observe(s.value))), D.value = !1, p.value = !1, f.value = !0;
-        const { modalHasOpened: e, openedModals: l } = k();
-        e(), y.value = l.value, Z(), await $(t.transitionDuration), f.value = !1, V.value = !0, d("shown"), X();
-      } else {
-        x(), f.value = !1, V.value = !1, p.value = !0, await $(t.transitionDuration), p.value = !1, D.value = !0;
-        const { modalHasClosed: e, openedModals: l } = k();
-        e(), y.value = 0, l.value || A(), d("hidden");
+  emits: ["active", "error", "focus", "inactive", "update:modelValue"],
+  setup(W, { emit: j }) {
+    n.extend(ue), n.extend(ce), n.extend(pe), n.locale(de);
+    const t = W, s = j, u = o(null), C = o(null), p = o(null), z = o(null), y = o(null), A = o(), g = t.id || `bdpi_${ve().id.value}`, { isMobile: D } = ge(), q = v(
+      () => t.allowWriting === "not-mobile" && D.value ? "none" : "numeric"
+    ), Y = o(!0);
+    ye(
+      p,
+      ([{ intersectionRatio: e }]) => {
+        e === 1 ? Y.value = !0 : (Y.value = !1, m.value && (O(), p.value && p.value.$el.querySelector(
+          ".bb-base-date-picker-input__calendar-btn"
+        ).focus(), M()));
+      },
+      { 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", h), document.addEventListener("click", h));
+    }, h = (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", h), document.removeEventListener("click", h));
+    }, S = (e) => {
+      if (e)
+        if (Array.isArray(e)) {
+          let a, l;
+          return e.length && (a = e[0]), e.length > 1 && (l = fe(e)), [a, l].filter(me).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 || M && !globalThis.document || E();
-      },
-      { flush: "post" }
+      (e) => {
+        y.value = S(e);
+      }
     );
-    const _ = (e) => {
-      e.target === c.value && e.preventDefault();
-    }, ee = (e) => {
-      t.disabled || S.value || c.value && e.target === c.value && (t.persistent || d("update:modelValue", !1));
-    }, I = () => {
-      t.disabled || S.value || (x(), d("update:modelValue", !1));
-    }, te = g(() => {
-      const e = [
-        {
-          "bb-base-dialog bb-base-dialog__overlay": !0,
-          "bb-base-dialog--fullscreen": t.fullscreen,
-          "bb-base-dialog--faded": !Q.value,
-          "bb-base-dialog--open": V.value,
-          "bb-base-dialog--opening": f.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: _,
-        onTouchmove: _,
-        onWheel: _,
-        onKeydown: _
-      }, n = {
-        transitionDuration: t.transitionDuration / 1e3 + "s"
-      };
-      return {
-        class: e,
-        style: n,
-        ...l,
-        ...Y
-      };
-    }), le = g(() => {
-      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 F = {
-        sm: 384,
-        md: 652,
-        lg: 896
-      };
-      t.fullscreen ? n = "100%" : typeof t.size == "number" ? n = t.size + "px" : t.size in F ? n = F[t.size] + "px" : n = t.size + "px";
-      const oe = {
-        maxWidth: n,
-        transitionDuration: t.transitionDuration / 1e3 + "s"
+    const { floatingStyles: N, placement: U } = se(p, u, {
+      placement: "bottom",
+      whileElementsMounted: Ae,
+      middleware: [De(), Se(5), _e({ padding: 6 }), $e()]
+    }), K = v(() => {
+      const e = {
+        ...N.value
       };
-      return {
-        class: e,
-        style: oe,
-        ...l
-      };
-    });
-    let R = 0;
-    const r = ve(
-      async () => {
-        if (R++, R === 100) {
-          const { error: e } = pe();
-          e(
-            "Dialog is updating its height too often. Please check the content is reliably sized."
-          );
-        }
-        if (t.fullscreen) {
-          J.value = window.innerHeight;
-          return;
-        }
-        if (v.value && s.value && b.value) {
-          const e = v.value.scrollHeight + s.value.scrollHeight + b.value.scrollHeight + 2;
-          if (h.value && (h.value.style.height = "0px", h.value.style.height = `${e + 2}px`, await $(30), v.value && s.value && b.value)) {
-            const l = v.value.scrollHeight + s.value.scrollHeight + b.value.scrollHeight + 2;
-            e !== l && r();
-          }
-        }
+      return u.value, e;
+    }), m = o(!1), R = async () => {
+      m.value = !0;
+    }, M = async () => {
+      var e;
+      m.value = !1, (e = A.value) == null || e.resetStatus();
+    }, _ = o(!1), $ = async () => {
+      f.value || (_.value = !0, await Me(() => !!u.value), await R(), Z());
+    }, f = o(!1), { activate: Z, deactivate: O } = be(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) => (w(), ue(de, { to: "body" }, [
-      a("div", K(te.value, {
-        ref_key: "overlay",
-        ref: c
-      }), [
-        a("div", K(le.value, {
-          ref_key: "panel",
-          ref: L
-        }), [
-          i.value ? (w(), 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, M(), !0),
+      clickOutsideDeactivates: () => (b.value = !1, M(), !0),
+      allowOutsideClick: !0,
+      preventScroll: !0
+    }), b = o(!t.allowWriting || t.range), J = async (e) => {
+      s("focus", e), b.value && $(), 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, O({
+          onPostDeactivate: () => {
+            f.value = !1, M();
+          }
+        }));
+      }
+    }, 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(Ce, {
+      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(Ve, {
+            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: z,
+                "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, Oe), [
+                [c(ke)]
+              ]),
+              r("button", {
+                class: "bb-base-date-picker-input__calendar-btn",
+                disabled: e.disabled || e.readonly || !Y.value,
+                type: "button",
+                onClick: $
+              }, [
+                Ee,
+                r("span", Ie, F(x.value), 1)
+              ], 8, Be),
+              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(re, {
             key: 0,
-            ref_key: "content",
-            ref: h,
-            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: le(K.value)
             }, [
-              u(e.$slots, "header", {
-                close: I,
-                title: e.title,
-                titleId: C
-              }, () => [
-                a("span", {
-                  id: C,
-                  class: "bb-base-dialog__title"
-                }, [
-                  u(e.$slots, "title", { text: e.title }, () => [
-                    ce(z(e.title), 1)
-                  ])
+              E(Ye, {
+                direction: (l = c(U)) != null && l.includes("top") ? "bottom" : "top",
+                duration: 300
+              }, {
+                default: i(() => [
+                  (w(), V(ie, null, [
+                    m.value ? (w(), V(we, 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", ge, [
-                  e.showClose ? (w(), T("button", {
-                    key: 0,
-                    type: "button",
-                    onClick: I
-                  }, [
-                    u(e.$slots, "close", { text: O.value }, () => [
-                      a("span", me, [
-                        a("span", he, z(O.value), 1),
-                        ye
-                      ])
-                    ])
-                  ])) : H("", !0)
-                ])
-              ])
-            ], 512),
-            a("div", {
-              ref_key: "body",
-              ref: s,
-              class: "bb-base-dialog__body"
-            }, [
-              u(e.$slots, "description", {
-                descriptionId: B,
-                text: e.description
-              }, () => [
-                e.description ? (w(), T("div", {
-                  key: 0,
-                  id: B,
-                  class: "bb-base-dialog__description"
-                }, z(e.description), 1)) : H("", !0)
-              ]),
-              u(e.$slots, "default")
-            ], 512),
-            _e,
-            a("div", {
-              ref_key: "footer",
-              ref: b,
-              class: "bb-base-dialog__footer"
-            }, [
-              u(e.$slots, "footer")
-            ], 512)
-          ], 512)) : H("", !0)
-        ], 16)
-      ], 16)
-    ]));
+                _: 1
+              }, 8, ["direction"])
+            ], 6)
+          ])) : L("", !0)
+        ];
+      }),
+      _: 3
+    }, 8, ["class"]));
   }
 });
 export {
-  He as default
+  rt as default
 };
 //# sourceMappingURL=index22.js.map