@fiscozen/composables 0.1.33 → 0.1.35-beta

package/dist/composables.js

@@ -1,452 +1,212 @@
-import { ref as m, reactive as ne, onUnmounted as ee, nextTick as te, onMounted as L, watch as k, onBeforeUnmount as O, getCurrentInstance as ie, computed as oe, defineComponent as ae, useSlots as se, toRef as X, toRefs as le, openBlock as B, createElementBlock as Y, renderSlot as R, createElementVNode as J, unref as F, withDirectives as Z, normalizeClass as _, vShow as j, createCommentVNode as V, createBlock as re, Teleport as ue } from "vue";
-const E = new DOMRect(0, 0, window.innerWidth, window.innerHeight), w = (o, n, e, u, i) => {
-  let a = i ? "bottom" : "right", h = i ? "bottom-start" : "right-start";
-  E.width = window.innerWidth, E.height = window.innerHeight, E.x = 0, E.y = 0;
-  const r = o ? o.getBoundingClientRect() : E, t = n.getBoundingClientRect(), d = e.getBoundingClientRect(), g = (d.left - r.left - t.width) / r.width, s = (r.right - d.right - t.width) / r.width, v = (d.top - r.top - t.height) / r.height, l = (r.bottom - d.bottom - t.height) / r.height;
-  let c = [
+import { ref as d, reactive as w, onUnmounted as O, nextTick as B, defineComponent as $, useSlots as C, computed as P, toRef as S, watch as y, openBlock as z, createElementBlock as F, createElementVNode as k, renderSlot as R, unref as x, withDirectives as N, vShow as E } from "vue";
+const g = (s, n, l, p) => {
+  let i = "right", e = "right-start";
+  const r = s.getBoundingClientRect(), c = n.getBoundingClientRect(), h = l.getBoundingClientRect(), m = (h.left - r.left - c.width) / r.width, t = (r.right - h.right - c.width) / r.width, o = (h.top - r.top - c.height) / r.height, f = (r.bottom - h.bottom - c.height) / r.height;
+  if (i = [
     {
       key: "right",
-      space: s
+      space: t
     },
     {
       key: "top",
-      space: v
+      space: o
     },
     {
       key: "bottom",
-      space: l
+      space: f
     },
     {
       key: "left",
-      space: g
+      space: m
     }
-  ].sort((p, f) => f.space - p.space);
-  if (i && (c = c.filter((p) => p.key === "top" || p.key === "bottom")), a = c[0].key, !u)
-    switch (a) {
+  ].sort((a, v) => v.space - a.space)[0].key, !p)
+    switch (i) {
       case "right":
       case "left":
-        const p = (t.height - d.height) / 2;
-        r.top > d.top - p && (u = "end"), r.bottom < d.top - p && (u = "start");
+        const a = (c.height - h.height) / 2;
+        r.top > h.top - a && (p = "end"), r.bottom < h.top - a && (p = "start");
         break;
     }
-  return h = u ? `${a}-${u}` : a, h;
-}, ve = (o, n, e, u) => ({
-  x: n.x + o.width * e / 100,
-  y: n.y + o.height * u / 100
-}), pe = (o) => {
-  const n = m(null), e = m(null), u = m(null), i = m(), a = m(), h = m("auto"), r = m(), t = ne({
+  return e = p ? `${i}-${p}` : i, e;
+}, q = (s, n, l, p) => ({
+  x: n.x + s.width * l / 100,
+  y: n.y + s.height * p / 100
+}), D = (s) => {
+  const n = d(null), l = d(null), p = d(null), i = d(null), e = w({
     position: { x: 0, y: 0 }
-  }), d = {
+  }), r = {
     root: null,
     rootMargin: "0px",
     threshold: 1,
-    ...o.element.value.intersectionOptions
-  }, g = (c, p) => {
-  }, s = m(new IntersectionObserver(g, d)), v = m(), l = () => te(() => {
-    var $, N, z, P, S, D, M, A, W, I, q, T, G, H, U;
-    if (v.value = o.position ? o.position.value : "auto", n.value = typeof o.element.value.domRef.value == "string" ? document.querySelector(o.element.value.domRef.value) : o.element.value.domRef.value, ($ = o.container) != null && $.value ? (e.value = typeof ((N = o.container.value) == null ? void 0 : N.domRef.value) == "string" ? document.querySelector(o.container.value.domRef.value) : (z = o.container.value) == null ? void 0 : z.domRef.value, e.value ?? (e.value = document.body)) : e.value = document.body, !n.value)
+    ...s.element.intersectionOptions
+  }, c = (t, o) => {
+  }, h = d(new IntersectionObserver(c, r)), m = () => B(() => {
+    var b;
+    if (n.value = typeof s.element.domRef.value == "string" ? document.querySelector(s.element.domRef.value) : s.element.domRef.value, s.container ? (l.value = typeof s.container.domRef.value == "string" ? document.querySelector(s.container.domRef.value) : s.container.domRef.value, l.value ?? (l.value = document.body)) : l.value = document.body, !n.value)
       throw new Error("missing reference element for floating behavior");
-    (P = o.opener) != null && P.value && (u.value = typeof ((S = o.opener.value) == null ? void 0 : S.domRef.value) == "string" ? document.querySelector(o.opener.value.domRef.value) : (D = o.opener.value) == null ? void 0 : D.domRef.value), r.value = n.value.getBoundingClientRect(), i.value = (M = u.value) == null ? void 0 : M.getBoundingClientRect(), a.value = e.value.getBoundingClientRect();
-    const c = window.getComputedStyle(n.value);
-    s.value.observe(n.value), s.value.observe(e.value);
-    let p = 0, f = 0;
-    if ((A = o.opener) != null && A.value && u.value && (i != null && i.value)) {
-      const y = i.value.left - parseFloat(c.marginLeft) - parseFloat(c.marginRight), K = i.value.left - parseFloat(c.marginLeft), x = i.value.top - parseFloat(c.marginTop) - parseFloat(c.marginBottom), Q = i.value.top - parseFloat(c.marginTop);
-      switch (v.value) {
+    s.opener && (p.value = typeof s.opener.domRef.value == "string" ? document.querySelector(s.opener.domRef.value) : s.opener.domRef.value), i.value = n.value.getBoundingClientRect();
+    const t = (b = p.value) == null ? void 0 : b.getBoundingClientRect(), o = l.value.getBoundingClientRect();
+    h.value.observe(n.value), h.value.observe(l.value);
+    let f = s.position ? s.position.value : "auto", u = 0, a = 0;
+    if (s.opener && p.value && t) {
+      switch (f) {
         case "auto":
-          v.value = w(
-            (W = o.useViewport) != null && W.value ? null : e.value,
+          f = g(
+            l.value,
             n.value,
-            u.value
-          );
-          break;
-        case "auto-vertical":
-          v.value = w(
-            (I = o.useViewport) != null && I.value ? null : e.value,
-            n.value,
-            u.value,
-            void 0,
-            !0
+            p.value
           );
           break;
         case "auto-start":
-          v.value = w(
-            (q = o.useViewport) != null && q.value ? null : e.value,
+          f = g(
+            l.value,
             n.value,
-            u.value,
+            p.value,
             "start"
           );
           break;
-        case "auto-vertical-start":
-          v.value = w(
-            (T = o.useViewport) != null && T.value ? null : e.value,
-            n.value,
-            u.value,
-            "start",
-            !0
-          );
-          break;
         case "auto-end":
-          v.value = w(
-            (G = o.useViewport) != null && G.value ? null : e.value,
+          f = g(
+            l.value,
             n.value,
-            u.value,
+            p.value,
             "end"
           );
           break;
-        case "auto-vertical-end":
-          v.value = w(
-            (H = o.useViewport) != null && H.value ? null : e.value,
-            n.value,
-            u.value,
-            "end",
-            !0
-          );
-          break;
       }
-      switch (v.value) {
+      switch (f) {
         case "bottom":
-          t.position.y = i.value.bottom, t.position.x = K + i.value.width / 2, f = -50, p = 0;
+          e.position.y = t.bottom, e.position.x = t.left + t.width / 2, a = -50, u = 0;
           break;
         case "bottom-start":
-          t.position.y = i.value.bottom, t.position.x = y, f = 0, p = 0;
+          e.position.y = t.bottom, e.position.x = t.left, a = 0, u = 0;
           break;
         case "bottom-end":
-          t.position.y = i.value.bottom, t.position.x = i.value.right, f = -100, p = 0;
+          e.position.y = t.bottom, e.position.x = t.right, a = -100, u = 0;
           break;
         case "left-start":
-          t.position.y = x, t.position.x = y, f = -100, p = 0;
+          e.position.y = t.top, e.position.x = t.left, a = -100, u = 0;
           break;
         case "left":
-          t.position.y = Q + i.value.height / 2, t.position.x = y, p = -50, f = -100;
+          e.position.y = t.top + t.height / 2, e.position.x = t.left, u = -50, a = -100;
           break;
         case "left-end":
-          t.position.y = i.value.bottom, t.position.x = y, p = -100, f = -100;
+          e.position.y = t.bottom, e.position.x = t.left, u = -100, a = -100;
           break;
         case "top-start":
-          t.position.y = x, t.position.x = y, p = -100, f = 0;
+          e.position.y = t.top, e.position.x = t.left, u = -100, a = 0;
           break;
         case "top":
-          t.position.y = x, t.position.x = K + i.value.width / 2, f = -50, p = -100;
+          e.position.y = t.top, e.position.x = t.left + t.width / 2, a = -50, u = -100;
           break;
         case "top-end":
-          t.position.y = x, t.position.x = i.value.right, f = -100, p = -100;
+          e.position.y = t.top, e.position.x = t.right, a = -100, u = -100;
           break;
         case "right-start":
-          t.position.y = x, t.position.x = i.value.right, f = 0, p = 0;
+          e.position.y = t.top, e.position.x = t.right, a = 0, u = 0;
           break;
         case "right":
-          t.position.y = Q + i.value.height / 2, t.position.x = i.value.right, p = -50, f = 0;
+          e.position.y = t.top + t.height / 2, e.position.x = t.right, u = -50, a = 0;
           break;
         case "right-end":
-          t.position.y = i.value.bottom, t.position.x = i.value.right, p = -100, f = 0;
+          e.position.y = t.bottom, e.position.x = t.right, u = -100, a = 0;
           break;
       }
     } else
-      switch (v.value) {
+      switch (f) {
         case "bottom":
-          t.position.y = a.value.bottom - r.value.height, t.position.x = a.value.left + a.value.width / 2, f = -50;
+          e.position.y = o.bottom - i.value.height, e.position.x = o.left + o.width / 2, a = -50;
           break;
         case "left-end":
         case "bottom-start":
-          t.position.y = a.value.bottom - r.value.height, t.position.x = a.value.left;
+          e.position.y = o.bottom - i.value.height, e.position.x = o.left;
           break;
         case "right-end":
         case "bottom-end":
-          t.position.y = a.value.bottom - r.value.height, t.position.x = a.value.right - r.value.width;
+          e.position.y = o.bottom - i.value.height, e.position.x = o.right - i.value.width;
           break;
         case "left":
-          t.position.y = a.value.top + (a.value.height - r.value.height) / 2, t.position.x = a.value.left;
+          e.position.y = o.top + (o.height - i.value.height) / 2, e.position.x = o.left;
           break;
         case "top-start":
         case "left-start":
-          t.position.y = a.value.top, t.position.x = a.value.left;
+          e.position.y = o.top, e.position.x = o.left;
           break;
         case "top":
-          t.position.y = a.value.top, t.position.x = a.value.left + (a.value.width - r.value.width) / 2;
+          e.position.y = o.top, e.position.x = o.left + (o.width - i.value.width) / 2;
           break;
         case "top-end":
         case "right-start":
-          t.position.y = a.value.top, t.position.x = a.value.right - r.value.width;
+          e.position.y = o.top, e.position.x = o.right - i.value.width;
         case "right":
-          t.position.y = a.value.top + (a.value.height - r.value.height) / 2, t.position.x = a.value.right - r.value.width;
+          e.position.y = o.top + (o.height - i.value.height) / 2, e.position.x = o.right - i.value.width;
           break;
       }
-    const b = ve(r.value, t.position, f, p);
-    if (t.position.x = b.x, t.position.y = b.y, b.x < a.value.left && (t.position.x = a.value.left, f = 0), b.x + r.value.width > a.value.right) {
-      const y = a.value.right - r.value.width;
-      y > 0 && (t.position.x = y), f = 0;
-    }
-    if (b.y < a.value.top && (t.position.y = a.value.top, p = 0), b.y + r.value.height > a.value.bottom) {
-      const y = a.value.bottom - r.value.height;
-      y > 0 && (t.position.y = y), p = 0;
-    }
-    n.value.style.top = `${t.position.y}px`, n.value.style.left = `${t.position.x}px`, n.value.style.position = "fixed", n.value.style.display = "flex", r.value = n.value.getBoundingClientRect(), (U = o.callback) != null && U.value && o.callback.value(r, i, a, h, v);
-  });
-  return ee(() => {
-    s.value.disconnect();
-  }), {
-    float: t,
-    rect: r,
-    setPosition: l,
-    position: h,
-    actualPosition: v,
-    openerRect: i,
-    containerRect: a
-  };
-};
-function C(o) {
-  const n = window.matchMedia(o), e = m(n.matches);
-  function u(i) {
-    e.value = i.matches;
-  }
-  return L(() => {
-    n.addEventListener("change", u);
-  }), ee(() => {
-    n.removeEventListener("change", u);
-  }), e;
-}
-function fe(o) {
-  return {
-    isGreater(n) {
-      return C(`(min-width: ${o[n]})`);
-    },
-    isSmaller(n) {
-      return C(`(max-width: ${o[n]})`);
-    },
-    isInBetween(n, e) {
-      return C(`(min-width: ${o[n]}) and (max-width: ${o[e]})`);
-    }
-  };
-}
-function de(o, n, e) {
-  if (!o)
-    throw new Error("A target component has to be provided.");
-  if (!n)
-    throw new Error("A callback has to be provided.");
-  const u = (i) => {
-    !o.value || i.target === o.value || i.composedPath().includes(o.value) || typeof n == "function" && n();
-  };
-  e && k(e, (i, a) => {
-    a && a.removeEventListener("click", u), i == null || i.addEventListener("click", u);
-  }), L(() => {
-    e || document.addEventListener("click", u);
-  }), O(() => {
-    var i;
-    if (e) {
-      (i = e.value) == null || i.removeEventListener("click", u);
-      return;
-    }
-    document.removeEventListener("click", u);
-  });
-}
-function me(o, n) {
-  if (!o)
-    throw new Error("A target component has to be provided.");
-  if (!n || typeof n != "function")
-    throw new Error("A callback has to be provided.");
-  const e = (u) => {
-    n(u);
-  };
-  L(() => {
-    o.value.addEventListener("keydown", e);
-  }), O(() => {
-    o.value.removeEventListener("keydown", e);
-  });
-}
-function he(o, n) {
-  if (!o || typeof o != "function")
-    throw new Error("A callback has to be provided.");
-  const e = (u) => {
-    o(u);
-  };
-  L(() => {
-    if (!n) {
-      document.addEventListener("keyup", e);
-      return;
-    }
-    n.value.addEventListener("keyup", e);
-  }), O(() => {
-    if (!n) {
-      document.removeEventListener("keyup", e);
-      return;
-    }
-    n.value.removeEventListener("keyup", e);
+    const v = q(i.value, e.position, a, u);
+    v.x < o.left && (e.position.x = o.left, a = 0), v.x + i.value.width > o.right && (e.position.x = o.right - i.value.width, a = 0), v.y < o.top && (e.position.y = o.top, u = 0), v.y + i.value.height > o.bottom && (e.position.y = o.bottom - i.value.height, u = 0), n.value.style.top = `${e.position.y}px`, n.value.style.left = `${e.position.x}px`, n.value.style.transform = `translateY(${u}%) translateX(${a}%)`, n.value.style.position = "absolute", i.value = n.value.getBoundingClientRect();
   });
-}
-const ge = (o) => {
-  const n = m(null), e = ie(), u = oe(() => e == null ? void 0 : e.props.amount), i = m(), a = (s) => {
-    if (s === null)
-      return "";
-    const v = {
-      minimumFractionDigits: o.minimumFractionDigits,
-      useGrouping: o.useGrouping || !1
-    };
-    return o.maximumFractionDigits !== null && (v.maximumFractionDigits = o.maximumFractionDigits), s.toLocaleString("it-IT", v);
-  }, h = (s) => parseFloat(s.replace(/,/g, ".")), r = (s) => {
-    if (!Number.isNaN(s) && e) {
-      if (i.value = s, e.props.nullOnEmpty && !s) {
-        e.emit("update:amount", null);
-        return;
-      }
-      e.emit("update:amount", typeof u.value == "number" ? s : s == null ? void 0 : s.toString());
-    }
-  }, t = (s) => {
-    setTimeout(() => {
-      n.value && (n.value.value = s);
-    }, 0);
-  }, d = (s) => (v) => {
-    if (!n.value || !v.target)
-      return;
-    let { value: l } = s;
-    l = l.replace(/[^0-9,.-]/g, ""), t(l);
-    const c = e != null && e.props.nullOnEmpty && l === "" ? null : h(l);
-    r(Number.isNaN(c) ? 0 : c);
-  }, g = (s) => {
-    if (!n.value || !s.target)
-      return;
-    const v = s.target.value.replace(/,/g, ".");
-    let l;
-    v === "" && (e != null && e.props.nullOnEmpty) ? l = null : (l = h(v), Number.isNaN(l) && (l = 0));
-    const c = a(l);
-    t(c), r(h(c));
-  };
-  return k(n, (s, v) => {
-    s && (v && (v == null || v.removeEventListener("input", d(s)), v == null || v.removeEventListener("blur", g)), s.addEventListener("input", d(s)), s.addEventListener("blur", g), e != null && e.props.amount && (s.value = a(u.value)));
-  }), k(u, (s) => {
-    te(() => {
-      if (!(!n.value || s === null || s === void 0) && i.value !== s) {
-        const v = a(s);
-        n.value.value = v, i.value = s;
-      }
-    });
+  return O(() => {
+    h.value.disconnect();
   }), {
-    inputRef: n,
-    parse: h,
-    format: a,
-    emitAmount: r,
-    setValue: t
+    float: e,
+    rect: i,
+    floatObserver: h,
+    setPosition: m
   };
-}, ye = /* @__PURE__ */ ae({
+}, I = /* @__PURE__ */ $({
   __name: "FzFloating",
   props: {
     isOpen: { type: Boolean, default: !1 },
     position: { default: "auto" },
-    container: {},
-    contentClass: {},
-    openerClass: {},
-    overrideContentClass: { type: Boolean },
-    overrideOpener: {},
-    teleport: { type: Boolean, default: !1 },
-    useViewport: { type: Boolean }
+    container: {}
   },
-  emits: ["fzfloating:setPosition"],
-  setup(o, { emit: n }) {
-    const e = o, u = n, i = m(null), a = m(null), h = se();
-    let r = !1;
-    const t = {
-      position: e.position,
+  setup(s) {
+    const n = s, l = d(null), p = d(null), i = C(), e = {
+      position: P(() => n.position),
       element: {
-        // @ts-ignore
-        domRef: i
+        domRef: p
       },
       container: {
-        // @ts-ignore
-        domRef: X(e.container || document.body)
-      },
-      opener: {
-        domRef: X(null)
-      },
-      useViewport: e.useViewport,
-      callback(...l) {
-        u("fzfloating:setPosition", ...l);
+        domRef: S(n.container || document.body)
       }
-    }, d = le(t);
-    h.opener && (t.opener = {
-      // @ts-ignore
-      domRef: a
-    });
-    const g = pe(d), s = () => {
-      r || (r = !0, requestAnimationFrame(() => {
-        e.isOpen && g.setPosition(), r = !1;
-      }));
     };
-    k(
-      () => e.position,
-      () => s()
-    ), k(
-      () => e.isOpen,
-      (l) => {
-        if (!l || !i.value) {
-          window.removeEventListener("scroll", s);
-          return;
-        }
-        window.addEventListener("scroll", s), i.value.style.top = "0px", i.value.style.left = "0px", i.value.style.transform = "none", g.setPosition();
-      }
-    ), k(
-      () => e.overrideOpener,
-      (l) => {
-        l && d.opener && d.opener.value && (d.opener.value = {
-          domRef: l
-        });
-      }
-    ), O(() => {
-      window.removeEventListener("scroll", s);
+    i.opener && (e.opener = {
+      domRef: l
     });
-    const v = oe(() => e.overrideContentClass ? e.contentClass : ["bg-core-white fixed p-4 z-10", e.contentClass]);
-    return (l, c) => (B(), Y("div", null, [
-      R(l.$slots, "opener-start"),
-      J("div", {
+    const r = D(e);
+    return y(
+      () => n.position,
+      () => n.isOpen && r.setPosition()
+    ), y(
+      () => n.isOpen,
+      (c) => c && r.setPosition()
+    ), (c, h) => (z(), F("div", null, [
+      k("div", {
         ref_key: "opener",
-        ref: a,
+        ref: l,
         class: "inline-flex"
       }, [
-        R(l.$slots, "opener", {
-          isOpen: l.isOpen,
-          floating: F(g)
+        R(c.$slots, "opener", {
+          isOpen: c.isOpen,
+          floating: x(r)
         })
       ], 512),
-      R(l.$slots, "opener-end"),
-      l.teleport ? V("", !0) : Z((B(), Y("div", {
-        key: 0,
+      N(k("div", {
         ref_key: "content",
-        ref: i,
-        class: _(["fz__floating__content", v.value])
+        ref: p,
+        class: "bg-core-white absolute p-4"
       }, [
-        R(l.$slots, "default", {
-          isOpen: l.isOpen,
-          floating: F(g)
+        R(c.$slots, "default", {
+          isOpen: c.isOpen,
+          floating: x(r)
         })
-      ], 2)), [
-        [j, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
-      ]),
-      l.teleport ? (B(), re(ue, {
-        key: 1,
-        to: "body"
-      }, [
-        Z(J("div", {
-          ref_key: "content",
-          ref: i,
-          class: _(["fz__floating__content", v.value])
-        }, [
-          R(l.$slots, "default", {
-            isOpen: l.isOpen,
-            floating: F(g)
-          })
-        ], 2), [
-          [j, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
-        ])
-      ])) : V("", !0)
+      ], 512), [
+        [E, !c.$slots.opener || c.$slots.opener && c.isOpen]
+      ])
     ]));
   }
 });
 export {
-  ye as FzFloating,
-  fe as useBreakpoints,
-  de as useClickOutside,
-  ge as useCurrency,
-  pe as useFloating,
-  me as useKeyDown,
-  he as useKeyUp,
-  C as useMediaQuery
+  I as FzFloating,
+  D as useFloating
 };

package/dist/composables.umd.cjs

@@ -1 +1 @@
-(function(h,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(h=typeof globalThis<"u"?globalThis:h||self,e(h.FzComposables={},h.Vue))})(this,function(h,e){"use strict";const E=new DOMRect(0,0,window.innerWidth,window.innerHeight),w=(n,i,t,c,a)=>{let r=a?"bottom":"right",g=a?"bottom-start":"right-start";E.width=window.innerWidth,E.height=window.innerHeight,E.x=0,E.y=0;const u=n?n.getBoundingClientRect():E,o=i.getBoundingClientRect(),m=t.getBoundingClientRect(),y=(m.left-u.left-o.width)/u.width,l=(u.right-m.right-o.width)/u.width,p=(m.top-u.top-o.height)/u.height,s=(u.bottom-m.bottom-o.height)/u.height;let d=[{key:"right",space:l},{key:"top",space:p},{key:"bottom",space:s},{key:"left",space:y}].sort((f,v)=>v.space-f.space);if(a&&(d=d.filter(f=>f.key==="top"||f.key==="bottom")),r=d[0].key,!c)switch(r){case"right":case"left":const f=(o.height-m.height)/2;u.top>m.top-f&&(c="end"),u.bottom<m.top-f&&(c="start");break}return g=c?`${r}-${c}`:r,g},K=(n,i,t,c)=>({x:i.x+n.width*t/100,y:i.y+n.height*c/100}),B=n=>{const i=e.ref(null),t=e.ref(null),c=e.ref(null),a=e.ref(),r=e.ref(),g=e.ref("auto"),u=e.ref(),o=e.reactive({position:{x:0,y:0}}),m={root:null,rootMargin:"0px",threshold:1,...n.element.value.intersectionOptions},y=(d,f)=>{},l=e.ref(new IntersectionObserver(y,m)),p=e.ref(),s=()=>e.nextTick(()=>{var C,L,O,F,S,$,N,M,z,D,P,A,T,U,W;if(p.value=n.position?n.position.value:"auto",i.value=typeof n.element.value.domRef.value=="string"?document.querySelector(n.element.value.domRef.value):n.element.value.domRef.value,(C=n.container)!=null&&C.value?(t.value=typeof((L=n.container.value)==null?void 0:L.domRef.value)=="string"?document.querySelector(n.container.value.domRef.value):(O=n.container.value)==null?void 0:O.domRef.value,t.value??(t.value=document.body)):t.value=document.body,!i.value)throw new Error("missing reference element for floating behavior");(F=n.opener)!=null&&F.value&&(c.value=typeof((S=n.opener.value)==null?void 0:S.domRef.value)=="string"?document.querySelector(n.opener.value.domRef.value):($=n.opener.value)==null?void 0:$.domRef.value),u.value=i.value.getBoundingClientRect(),a.value=(N=c.value)==null?void 0:N.getBoundingClientRect(),r.value=t.value.getBoundingClientRect();const d=window.getComputedStyle(i.value);l.value.observe(i.value),l.value.observe(t.value);let f=0,v=0;if((M=n.opener)!=null&&M.value&&c.value&&(a!=null&&a.value)){const b=a.value.left-parseFloat(d.marginLeft)-parseFloat(d.marginRight),I=a.value.left-parseFloat(d.marginLeft),R=a.value.top-parseFloat(d.marginTop)-parseFloat(d.marginBottom),q=a.value.top-parseFloat(d.marginTop);switch(p.value){case"auto":p.value=w((z=n.useViewport)!=null&&z.value?null:t.value,i.value,c.value);break;case"auto-vertical":p.value=w((D=n.useViewport)!=null&&D.value?null:t.value,i.value,c.value,void 0,!0);break;case"auto-start":p.value=w((P=n.useViewport)!=null&&P.value?null:t.value,i.value,c.value,"start");break;case"auto-vertical-start":p.value=w((A=n.useViewport)!=null&&A.value?null:t.value,i.value,c.value,"start",!0);break;case"auto-end":p.value=w((T=n.useViewport)!=null&&T.value?null:t.value,i.value,c.value,"end");break;case"auto-vertical-end":p.value=w((U=n.useViewport)!=null&&U.value?null:t.value,i.value,c.value,"end",!0);break}switch(p.value){case"bottom":o.position.y=a.value.bottom,o.position.x=I+a.value.width/2,v=-50,f=0;break;case"bottom-start":o.position.y=a.value.bottom,o.position.x=b,v=0,f=0;break;case"bottom-end":o.position.y=a.value.bottom,o.position.x=a.value.right,v=-100,f=0;break;case"left-start":o.position.y=R,o.position.x=b,v=-100,f=0;break;case"left":o.position.y=q+a.value.height/2,o.position.x=b,f=-50,v=-100;break;case"left-end":o.position.y=a.value.bottom,o.position.x=b,f=-100,v=-100;break;case"top-start":o.position.y=R,o.position.x=b,f=-100,v=0;break;case"top":o.position.y=R,o.position.x=I+a.value.width/2,v=-50,f=-100;break;case"top-end":o.position.y=R,o.position.x=a.value.right,v=-100,f=-100;break;case"right-start":o.position.y=R,o.position.x=a.value.right,v=0,f=0;break;case"right":o.position.y=q+a.value.height/2,o.position.x=a.value.right,f=-50,v=0;break;case"right-end":o.position.y=a.value.bottom,o.position.x=a.value.right,f=-100,v=0;break}}else switch(p.value){case"bottom":o.position.y=r.value.bottom-u.value.height,o.position.x=r.value.left+r.value.width/2,v=-50;break;case"left-end":case"bottom-start":o.position.y=r.value.bottom-u.value.height,o.position.x=r.value.left;break;case"right-end":case"bottom-end":o.position.y=r.value.bottom-u.value.height,o.position.x=r.value.right-u.value.width;break;case"left":o.position.y=r.value.top+(r.value.height-u.value.height)/2,o.position.x=r.value.left;break;case"top-start":case"left-start":o.position.y=r.value.top,o.position.x=r.value.left;break;case"top":o.position.y=r.value.top,o.position.x=r.value.left+(r.value.width-u.value.width)/2;break;case"top-end":case"right-start":o.position.y=r.value.top,o.position.x=r.value.right-u.value.width;case"right":o.position.y=r.value.top+(r.value.height-u.value.height)/2,o.position.x=r.value.right-u.value.width;break}const k=K(u.value,o.position,v,f);if(o.position.x=k.x,o.position.y=k.y,k.x<r.value.left&&(o.position.x=r.value.left,v=0),k.x+u.value.width>r.value.right){const b=r.value.right-u.value.width;b>0&&(o.position.x=b),v=0}if(k.y<r.value.top&&(o.position.y=r.value.top,f=0),k.y+u.value.height>r.value.bottom){const b=r.value.bottom-u.value.height;b>0&&(o.position.y=b),f=0}i.value.style.top=`${o.position.y}px`,i.value.style.left=`${o.position.x}px`,i.value.style.position="fixed",i.value.style.display="flex",u.value=i.value.getBoundingClientRect(),(W=n.callback)!=null&&W.value&&n.callback.value(u,a,r,g,p)});return e.onUnmounted(()=>{l.value.disconnect()}),{float:o,rect:u,setPosition:s,position:g,actualPosition:p,openerRect:a,containerRect:r}};function x(n){const i=window.matchMedia(n),t=e.ref(i.matches);function c(a){t.value=a.matches}return e.onMounted(()=>{i.addEventListener("change",c)}),e.onUnmounted(()=>{i.removeEventListener("change",c)}),t}function G(n){return{isGreater(i){return x(`(min-width: ${n[i]})`)},isSmaller(i){return x(`(max-width: ${n[i]})`)},isInBetween(i,t){return x(`(min-width: ${n[i]}) and (max-width: ${n[t]})`)}}}function H(n,i,t){if(!n)throw new Error("A target component has to be provided.");if(!i)throw new Error("A callback has to be provided.");const c=a=>{!n.value||a.target===n.value||a.composedPath().includes(n.value)||typeof i=="function"&&i()};t&&e.watch(t,(a,r)=>{r&&r.removeEventListener("click",c),a==null||a.addEventListener("click",c)}),e.onMounted(()=>{t||document.addEventListener("click",c)}),e.onBeforeUnmount(()=>{var a;if(t){(a=t.value)==null||a.removeEventListener("click",c);return}document.removeEventListener("click",c)})}function Q(n,i){if(!n)throw new Error("A target component has to be provided.");if(!i||typeof i!="function")throw new Error("A callback has to be provided.");const t=c=>{i(c)};e.onMounted(()=>{n.value.addEventListener("keydown",t)}),e.onBeforeUnmount(()=>{n.value.removeEventListener("keydown",t)})}function X(n,i){if(!n||typeof n!="function")throw new Error("A callback has to be provided.");const t=c=>{n(c)};e.onMounted(()=>{if(!i){document.addEventListener("keyup",t);return}i.value.addEventListener("keyup",t)}),e.onBeforeUnmount(()=>{if(!i){document.removeEventListener("keyup",t);return}i.value.removeEventListener("keyup",t)})}const Y=n=>{const i=e.ref(null),t=e.getCurrentInstance(),c=e.computed(()=>t==null?void 0:t.props.amount),a=e.ref(),r=l=>{if(l===null)return"";const p={minimumFractionDigits:n.minimumFractionDigits,useGrouping:n.useGrouping||!1};return n.maximumFractionDigits!==null&&(p.maximumFractionDigits=n.maximumFractionDigits),l.toLocaleString("it-IT",p)},g=l=>parseFloat(l.replace(/,/g,".")),u=l=>{if(!Number.isNaN(l)&&t){if(a.value=l,t.props.nullOnEmpty&&!l){t.emit("update:amount",null);return}t.emit("update:amount",typeof c.value=="number"?l:l==null?void 0:l.toString())}},o=l=>{setTimeout(()=>{i.value&&(i.value.value=l)},0)},m=l=>p=>{if(!i.value||!p.target)return;let{value:s}=l;s=s.replace(/[^0-9,.-]/g,""),o(s);const d=t!=null&&t.props.nullOnEmpty&&s===""?null:g(s);u(Number.isNaN(d)?0:d)},y=l=>{if(!i.value||!l.target)return;const p=l.target.value.replace(/,/g,".");let s;p===""&&(t!=null&&t.props.nullOnEmpty)?s=null:(s=g(p),Number.isNaN(s)&&(s=0));const d=r(s);o(d),u(g(d))};return e.watch(i,(l,p)=>{l&&(p&&(p==null||p.removeEventListener("input",m(l)),p==null||p.removeEventListener("blur",y)),l.addEventListener("input",m(l)),l.addEventListener("blur",y),t!=null&&t.props.amount&&(l.value=r(c.value)))}),e.watch(c,l=>{e.nextTick(()=>{if(!(!i.value||l===null||l===void 0)&&a.value!==l){const p=r(l);i.value.value=p,a.value=l}})}),{inputRef:i,parse:g,format:r,emitAmount:u,setValue:o}},J=e.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean},overrideOpener:{},teleport:{type:Boolean,default:!1},useViewport:{type:Boolean}},emits:["fzfloating:setPosition"],setup(n,{emit:i}){const t=n,c=i,a=e.ref(null),r=e.ref(null),g=e.useSlots();let u=!1;const o={position:t.position,element:{domRef:a},container:{domRef:e.toRef(t.container||document.body)},opener:{domRef:e.toRef(null)},useViewport:t.useViewport,callback(...s){c("fzfloating:setPosition",...s)}},m=e.toRefs(o);g.opener&&(o.opener={domRef:r});const y=B(m),l=()=>{u||(u=!0,requestAnimationFrame(()=>{t.isOpen&&y.setPosition(),u=!1}))};e.watch(()=>t.position,()=>l()),e.watch(()=>t.isOpen,s=>{if(!s||!a.value){window.removeEventListener("scroll",l);return}window.addEventListener("scroll",l),a.value.style.top="0px",a.value.style.left="0px",a.value.style.transform="none",y.setPosition()}),e.watch(()=>t.overrideOpener,s=>{s&&m.opener&&m.opener.value&&(m.opener.value={domRef:s})}),e.onBeforeUnmount(()=>{window.removeEventListener("scroll",l)});const p=e.computed(()=>t.overrideContentClass?t.contentClass:["bg-core-white fixed p-4 z-10",t.contentClass]);return(s,d)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(s.$slots,"opener-start"),e.createElementVNode("div",{ref_key:"opener",ref:r,class:"inline-flex"},[e.renderSlot(s.$slots,"opener",{isOpen:s.isOpen,floating:e.unref(y)})],512),e.renderSlot(s.$slots,"opener-end"),s.teleport?e.createCommentVNode("",!0):e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"content",ref:a,class:e.normalizeClass(["fz__floating__content",p.value])},[e.renderSlot(s.$slots,"default",{isOpen:s.isOpen,floating:e.unref(y)})],2)),[[e.vShow,s.$slots.default&&(!s.$slots.opener||s.$slots.opener&&s.isOpen)]]),s.teleport?(e.openBlock(),e.createBlock(e.Teleport,{key:1,to:"body"},[e.withDirectives(e.createElementVNode("div",{ref_key:"content",ref:a,class:e.normalizeClass(["fz__floating__content",p.value])},[e.renderSlot(s.$slots,"default",{isOpen:s.isOpen,floating:e.unref(y)})],2),[[e.vShow,s.$slots.default&&(!s.$slots.opener||s.$slots.opener&&s.isOpen)]])])):e.createCommentVNode("",!0)]))}});h.FzFloating=J,h.useBreakpoints=G,h.useClickOutside=H,h.useCurrency=Y,h.useFloating=B,h.useKeyDown=Q,h.useKeyUp=X,h.useMediaQuery=x,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(d,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(d=typeof globalThis<"u"?globalThis:d||self,i(d.FzComposables={},d.Vue))})(this,function(d,i){"use strict";const g=(a,s,r,p)=>{let n="right",e="right-start";const c=a.getBoundingClientRect(),f=s.getBoundingClientRect(),u=r.getBoundingClientRect(),y=(u.left-c.left-f.width)/c.width,t=(c.right-u.right-f.width)/c.width,o=(u.top-c.top-f.height)/c.height,m=(c.bottom-u.bottom-f.height)/c.height;if(n=[{key:"right",space:t},{key:"top",space:o},{key:"bottom",space:m},{key:"left",space:y}].sort((l,b)=>b.space-l.space)[0].key,!p)switch(n){case"right":case"left":const l=(f.height-u.height)/2;c.top>u.top-l&&(p="end"),c.bottom<u.top-l&&(p="start");break}return e=p?`${n}-${p}`:n,e},R=(a,s,r,p)=>({x:s.x+a.width*r/100,y:s.y+a.height*p/100}),v=a=>{const s=i.ref(null),r=i.ref(null),p=i.ref(null),n=i.ref(null),e=i.reactive({position:{x:0,y:0}}),c={root:null,rootMargin:"0px",threshold:1,...a.element.intersectionOptions},f=(t,o)=>{},u=i.ref(new IntersectionObserver(f,c)),y=()=>i.nextTick(()=>{var k;if(s.value=typeof a.element.domRef.value=="string"?document.querySelector(a.element.domRef.value):a.element.domRef.value,a.container?(r.value=typeof a.container.domRef.value=="string"?document.querySelector(a.container.domRef.value):a.container.domRef.value,r.value??(r.value=document.body)):r.value=document.body,!s.value)throw new Error("missing reference element for floating behavior");a.opener&&(p.value=typeof a.opener.domRef.value=="string"?document.querySelector(a.opener.domRef.value):a.opener.domRef.value),n.value=s.value.getBoundingClientRect();const t=(k=p.value)==null?void 0:k.getBoundingClientRect(),o=r.value.getBoundingClientRect();u.value.observe(s.value),u.value.observe(r.value);let m=a.position?a.position.value:"auto",h=0,l=0;if(a.opener&&p.value&&t){switch(m){case"auto":m=g(r.value,s.value,p.value);break;case"auto-start":m=g(r.value,s.value,p.value,"start");break;case"auto-end":m=g(r.value,s.value,p.value,"end");break}switch(m){case"bottom":e.position.y=t.bottom,e.position.x=t.left+t.width/2,l=-50,h=0;break;case"bottom-start":e.position.y=t.bottom,e.position.x=t.left,l=0,h=0;break;case"bottom-end":e.position.y=t.bottom,e.position.x=t.right,l=-100,h=0;break;case"left-start":e.position.y=t.top,e.position.x=t.left,l=-100,h=0;break;case"left":e.position.y=t.top+t.height/2,e.position.x=t.left,h=-50,l=-100;break;case"left-end":e.position.y=t.bottom,e.position.x=t.left,h=-100,l=-100;break;case"top-start":e.position.y=t.top,e.position.x=t.left,h=-100,l=0;break;case"top":e.position.y=t.top,e.position.x=t.left+t.width/2,l=-50,h=-100;break;case"top-end":e.position.y=t.top,e.position.x=t.right,l=-100,h=-100;break;case"right-start":e.position.y=t.top,e.position.x=t.right,l=0,h=0;break;case"right":e.position.y=t.top+t.height/2,e.position.x=t.right,h=-50,l=0;break;case"right-end":e.position.y=t.bottom,e.position.x=t.right,h=-100,l=0;break}}else switch(m){case"bottom":e.position.y=o.bottom-n.value.height,e.position.x=o.left+o.width/2,l=-50;break;case"left-end":case"bottom-start":e.position.y=o.bottom-n.value.height,e.position.x=o.left;break;case"right-end":case"bottom-end":e.position.y=o.bottom-n.value.height,e.position.x=o.right-n.value.width;break;case"left":e.position.y=o.top+(o.height-n.value.height)/2,e.position.x=o.left;break;case"top-start":case"left-start":e.position.y=o.top,e.position.x=o.left;break;case"top":e.position.y=o.top,e.position.x=o.left+(o.width-n.value.width)/2;break;case"top-end":case"right-start":e.position.y=o.top,e.position.x=o.right-n.value.width;case"right":e.position.y=o.top+(o.height-n.value.height)/2,e.position.x=o.right-n.value.width;break}const b=R(n.value,e.position,l,h);b.x<o.left&&(e.position.x=o.left,l=0),b.x+n.value.width>o.right&&(e.position.x=o.right-n.value.width,l=0),b.y<o.top&&(e.position.y=o.top,h=0),b.y+n.value.height>o.bottom&&(e.position.y=o.bottom-n.value.height,h=0),s.value.style.top=`${e.position.y}px`,s.value.style.left=`${e.position.x}px`,s.value.style.transform=`translateY(${h}%) translateX(${l}%)`,s.value.style.position="absolute",n.value=s.value.getBoundingClientRect()});return i.onUnmounted(()=>{u.value.disconnect()}),{float:e,rect:n,floatObserver:u,setPosition:y}},x=i.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{}},setup(a){const s=a,r=i.ref(null),p=i.ref(null),n=i.useSlots(),e={position:i.computed(()=>s.position),element:{domRef:p},container:{domRef:i.toRef(s.container||document.body)}};n.opener&&(e.opener={domRef:r});const c=v(e);return i.watch(()=>s.position,()=>s.isOpen&&c.setPosition()),i.watch(()=>s.isOpen,f=>f&&c.setPosition()),(f,u)=>(i.openBlock(),i.createElementBlock("div",null,[i.createElementVNode("div",{ref_key:"opener",ref:r,class:"inline-flex"},[i.renderSlot(f.$slots,"opener",{isOpen:f.isOpen,floating:i.unref(c)})],512),i.withDirectives(i.createElementVNode("div",{ref_key:"content",ref:p,class:"bg-core-white absolute p-4"},[i.renderSlot(f.$slots,"default",{isOpen:f.isOpen,floating:i.unref(c)})],512),[[i.vShow,!f.$slots.opener||f.$slots.opener&&f.isOpen]])]))}});d.FzFloating=x,d.useFloating=v,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.33",
+  "version": "0.1.35-beta",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
@@ -25,9 +25,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/composables/useCurrency.ts

@@ -1,12 +1,12 @@
 import { Ref, watch, getCurrentInstance, computed, ref, nextTick } from 'vue'
 import { FzUseCurrencyOptions } from '../types'
-import { format as formatNumber, parse } from '../utils'
+import { format as formatNumber, parse, roundTo } from '../utils'
 
 export const useCurrency = (options: FzUseCurrencyOptions) => {
   const inputRef: Ref<HTMLInputElement | null | undefined> = ref(null)
   const vm = getCurrentInstance()
 
-  const computedModel = computed<number | null>(() => vm?.props.amount as unknown as number | null)
+  const computedModel = computed<number | null>(() => vm?.props.amount as number | null)
   const internalVal = ref<number | null>()
 
   const format = formatNumber(options)
@@ -21,7 +21,7 @@ export const useCurrency = (options: FzUseCurrencyOptions) => {
         vm.emit('update:amount', null)
         return
       }
-      vm.emit('update:amount', typeof computedModel.value === 'number' ? val : val?.toString())
+      vm.emit('update:amount', val)
     }
   }
 
@@ -41,8 +41,10 @@ export const useCurrency = (options: FzUseCurrencyOptions) => {
     }
     let { value } = el
     value = value.replace(/[^0-9,.-]/g, '')
+    const parsed: number = parse(value);
+
     setValue(value)
-    const numberValue = vm?.props.nullOnEmpty && value === '' ? null : parse(value)
+    const numberValue = vm?.props.nullOnEmpty && value === '' ? null : parsed
     emitAmount(Number.isNaN(numberValue) ? 0 : numberValue)
   }
 
@@ -60,6 +62,15 @@ export const useCurrency = (options: FzUseCurrencyOptions) => {
       if (Number.isNaN(number)) {
         number = 0
       }
+      if (options.step && vm?.props.forceStep) {
+        number = roundTo(options.step, number)
+      }
+      if (options.min && options.min > number) {
+        number = options.min
+      }
+      if (options.max && options.max < number) {
+        number = options.max
+      }
     }
     const text = format(number)
     setValue(text)

package/src/composables/useFloating.ts

@@ -40,6 +40,7 @@ export const useFloating = (
 
   const setPosition = () =>
     nextTick(() => {
+      console.log("ENTRO")
       actualPosition.value = args.position ? args.position.value : 'auto'
       safeElementDomRef.value = (
         typeof args.element.value.domRef.value === 'string'
@@ -297,6 +298,9 @@ export const useFloating = (
         translateY = 0
       }
 
+      if(float.position.y < 0) float.position.y = 0
+      if(float.position.x < 0) float.position.x = 0
+      
       safeElementDomRef.value.style.top = `${float.position.y}px`
       safeElementDomRef.value.style.left = `${float.position.x}px`
       safeElementDomRef.value.style.position = 'fixed'

package/src/types.ts

@@ -56,4 +56,7 @@ export interface FzUseCurrencyOptions {
   minimumFractionDigits: number
   maximumFractionDigits?: number
   useGrouping?: boolean
+  min?: number
+  max?: number
+  step?: number
 }

package/src/utils/number/index.ts

@@ -13,7 +13,17 @@ export const format = (options: FzUseCurrencyOptions) => (input: number | null)
   return input.toLocaleString('it-IT', safeOptions)
 }
 
-export const parse = (text: string) => {
+export const parse = (text: string): number => {
   // strip currency, handle edge cases...
   return parseFloat(text.replace(/,/g, '.'))
 }
+
+export const roundTo = (step: number, val: number) => {
+  let result = val;
+  const remainder = val % step
+  const safeStep = val >= 0 ? step : -step
+  if (remainder !== 0) {
+    result = Math.abs(remainder) >= step / 2 ? val + safeStep - remainder : val - remainder
+  }
+  return result
+}