@fiscozen/composables 0.1.23 → 0.1.24

package/dist/composables.js

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

package/dist/composables.umd.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "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/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/composables/useCurrency.ts

@@ -1,34 +1,50 @@
-import { Ref, watch, getCurrentInstance, computed, ref, onMounted } from 'vue'
+import { Ref, watch, getCurrentInstance, computed, ref, nextTick } from 'vue'
 
 export const useCurrency = () => {
   const inputRef: Ref<HTMLInputElement | null> = ref(null)
   const vm = getCurrentInstance()
 
-  const modelValue = computed<number | undefined>(
-    () => vm?.props.modelValue as unknown as number | undefined
-  )
+  const computedModel = computed<number | null>(() => vm?.props.amount as unknown as number | null)
+  const internalVal = ref<number | null>()
 
   const format = (input: number | null) => {
     if (input === null) {
-      return '';
+      return ''
     }
     return input.toLocaleString('it-IT', {
       minimumFractionDigits: 2,
-      maximumFractionDigits: 2
+      maximumFractionDigits: 2,
+      useGrouping: false
     })
   }
 
   const parse = (text: string) => {
     // strip currency, handle edge cases...
-    return parseFloat(text)
+    return parseFloat(text.replace(/,/g, '.'))
   }
 
-  const setValue = (val: number | null) => {
+  const emitAmount = (val: number | null) => {
     if (Number.isNaN(val)) {
       return
     }
+    if (vm) {
+      internalVal.value = val
+      if (vm.props.nullOnEmpty && !val) {
+        vm.emit('update:amount', null)
+        return
+      }
+      vm.emit('update:amount', typeof computedModel.value === 'number' ? val : val.toString())
+    }
+  }
 
-    vm && vm.emit('update:modelValue', val)
+  const setValue = (val: string) => {
+    // nextTick doesn't seem to work
+    setTimeout(() => {
+      if (!inputRef.value) {
+        return
+      }
+      inputRef.value.value = val
+    }, 0)
   }
 
   const onInput = (el: HTMLInputElement) => (e: Event) => {
@@ -37,31 +53,29 @@ export const useCurrency = () => {
     }
     let { value } = el
     value = value.replace(/[^0-9,.]/g, '')
-    inputRef.value.value = value
-    const numberValue = (vm?.props.nullOnEmpty && value === '') ? null : parse(value)
-    setValue(Number.isNaN(numberValue) ? 0 : numberValue)
+    setValue(value)
+    const numberValue = vm?.props.nullOnEmpty && value === '' ? null : parse(value)
+    emitAmount(Number.isNaN(numberValue) ? 0 : numberValue)
   }
 
   const onBlur = (e: FocusEvent) => {
     if (!inputRef.value || !e.target) {
       return
     }
-    let rawValue = (e.target as HTMLInputElement).value.replace(/,/g, '.');
-    let number: number | null;
+    let rawValue = (e.target as HTMLInputElement).value.replace(/,/g, '.')
+    let number: number | null
 
     if (rawValue === '' && vm?.props.nullOnEmpty) {
       number = null
-    }
-    else {
+    } else {
       number = parse(rawValue)
       if (Number.isNaN(number)) {
         number = 0
       }
     }
     const text = format(number)
-
-    inputRef.value.value = text
-    setValue(number)
+    setValue(text)
+    emitAmount(parse(text))
   }
 
   watch(inputRef, (newVal, oldVal) => {
@@ -76,15 +90,31 @@ export const useCurrency = () => {
     newVal.addEventListener('input', onInput(newVal))
     newVal.addEventListener('blur', onBlur)
 
-    if (modelValue.value) {
-      newVal.value = format(modelValue.value)
+    if (vm?.props.amount) {
+      newVal.value = format(computedModel.value)
     }
   })
 
+  watch(computedModel, (newVal) => {
+    nextTick(() => {
+      if (!inputRef.value || !newVal) {
+        return
+      }
+      // we need to format here only if someone externally set the
+      // value of the amount model
+      if (internalVal.value !== newVal) {
+        const formatted = format(newVal)
+        inputRef.value.value = formatted
+        internalVal.value = newVal
+      }
+    })
+  })
+
   return {
     inputRef,
     parse,
     format,
+    emitAmount,
     setValue
   }
 }