@fiscozen/composables 0.1.28 → 0.1.30

package/dist/composables.js

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

package/dist/composables.umd.cjs

@@ -1 +1 @@
-(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.FzComposables={},m.Vue))})(this,function(m,e){"use strict";const E=new DOMRect(0,0,window.innerWidth,window.innerHeight),w=(n,t,a,c,s)=>{let i=s?"bottom":"right",v=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,h)=>h.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 v=c?`${i}-${c}`:i,v},O=(n,t,a,c)=>({x:t.x+n.width*a/100,y:t.y+n.height*c/100}),x=n=>{const t=e.ref(null),a=e.ref(null),c=e.ref(null),s=e.ref(),i=e.ref(),v=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,h=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,h=-50,p=0;break;case"bottom-start":o.position.y=s.value.bottom,o.position.x=y,h=0,p=0;break;case"bottom-end":o.position.y=s.value.bottom,o.position.x=s.value.right,h=-100,p=0;break;case"left-start":o.position.y=R,o.position.x=y,h=-100,p=0;break;case"left":o.position.y=F+s.value.height/2,o.position.x=y,p=-50,h=-100;break;case"left-end":o.position.y=s.value.bottom,o.position.x=y,p=-100,h=-100;break;case"top-start":o.position.y=R,o.position.x=y,p=-100,h=0;break;case"top":o.position.y=R,o.position.x=L+s.value.width/2,h=-50,p=-100;break;case"top-end":o.position.y=R,o.position.x=s.value.right,h=-100,p=-100;break;case"right-start":o.position.y=R,o.position.x=s.value.right,h=0,p=0;break;case"right":o.position.y=F+s.value.height/2,o.position.x=s.value.right,p=-50,h=0;break;case"right-end":o.position.y=s.value.bottom,o.position.x=s.value.right,p=-100,h=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,h=-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,h,p);if(o.position.x=k.x,o.position.y=k.y,k.x<i.value.left&&(o.position.x=i.value.left,h=0),k.x+u.value.width>i.value.right){const y=i.value.right-u.value.width;y>0&&(o.position.x=y),h=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,v,r)});return e.onUnmounted(()=>{f.value.disconnect()}),{float:o,rect:u,setPosition:b,position:v,actualPosition:r,openerRect:s,containerRect:i}};function B(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 B(`(min-width: ${n[t]})`)},isSmaller(t){return B(`(max-width: ${n[t]})`)},isInBetween(t,a){return B(`(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 M(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 z=()=>{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,".")),v=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==null?void 0: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);v(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),v(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===null||l===void 0)&&c.value!==l){const f=s(l);n.value.value=f,c.value=l}})}),{inputRef:n,parse:i,format:s,emitAmount:v,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),v=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)}};v.opener&&(o.opener={domRef:s});const d=x(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",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",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)]))}});m.FzFloating=P,m.useBreakpoints=S,m.useClickOutside=$,m.useCurrency=z,m.useFloating=x,m.useKeyDown=N,m.useKeyUp=M,m.useMediaQuery=B,Object.defineProperty(m,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 R=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";R.width=window.innerWidth,R.height=window.innerHeight,R.x=0,R.y=0;const u=n?n.getBoundingClientRect():R,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},I=(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;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(n.opener&&n.opener.value&&c.value&&a&&a.value){const b=a.value.left-parseFloat(d.marginLeft)-parseFloat(d.marginRight),U=a.value.left-parseFloat(d.marginLeft),E=a.value.top-parseFloat(d.marginTop)-parseFloat(d.marginBottom),W=a.value.top-parseFloat(d.marginTop);switch(p.value){case"auto":p.value=w((M=n.useViewport)!=null&&M.value?null:t.value,i.value,c.value);break;case"auto-vertical":p.value=w((z=n.useViewport)!=null&&z.value?null:t.value,i.value,c.value,void 0,!0);break;case"auto-start":p.value=w((D=n.useViewport)!=null&&D.value?null:t.value,i.value,c.value,"start");break;case"auto-vertical-start":p.value=w((P=n.useViewport)!=null&&P.value?null:t.value,i.value,c.value,"start",!0);break;case"auto-end":p.value=w((A=n.useViewport)!=null&&A.value?null:t.value,i.value,c.value,"end");break;case"auto-vertical-end":p.value=w((T=n.useViewport)!=null&&T.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=U+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=E,o.position.x=b,v=-100,f=0;break;case"left":o.position.y=W+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=E,o.position.x=b,f=-100,v=0;break;case"top":o.position.y=E,o.position.x=U+a.value.width/2,v=-50,f=-100;break;case"top-end":o.position.y=E,o.position.x=a.value.right,v=-100,f=-100;break;case"right-start":o.position.y=E,o.position.x=a.value.right,v=0,f=0;break;case"right":o.position.y=W+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=I(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(),n.callback&&n.callback.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 q(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 K(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 H(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 Q(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 G=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:!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}},X=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=X,h.useBreakpoints=q,h.useClickOutside=K,h.useCurrency=G,h.useFloating=B,h.useKeyDown=H,h.useKeyUp=Q,h.useMediaQuery=x,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/package.json

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

package/src/FzFloating.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, useSlots, watch, toRef, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
 
@@ -11,15 +11,15 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
 
 const emits = defineEmits(['fzfloating:setPosition'])
 
-const opener = ref(null)
 const content = ref<HTMLElement | null>(null)
+const opener = ref<HTMLElement | null>(null)
 
 const slots = useSlots()
 
 let scheduledAnimationFrame = false
 
 const useFloatingOpts: FzUseFloatingArgs = {
-  position: computed(() => props.position),
+  position: props.position,
   element: {
     // @ts-ignore
     domRef: content
@@ -28,18 +28,23 @@ const useFloatingOpts: FzUseFloatingArgs = {
     // @ts-ignore
     domRef: toRef(props.container || document.body)
   },
-  useViewport: computed(() => props.useViewport),
+  opener: {
+    domRef: toRef(null)
+  },
+  useViewport: props.useViewport,
   callback(...args) {
     emits('fzfloating:setPosition', ...args)
   }
 }
+
+const dynamicOpts = toRefs(useFloatingOpts)
 if (slots.opener) {
   useFloatingOpts.opener = {
     domRef: opener
   }
 }
 
-const floating = useFloating(useFloatingOpts)
+const floating = useFloating(dynamicOpts)
 
 const setPositionWhenOpen = () => {
   if (scheduledAnimationFrame) {
@@ -71,6 +76,19 @@ watch(
     floating.setPosition()
   }
 )
+watch(
+  () => props.overrideOpener,
+  (newVal) => {
+    if (!newVal) {
+      return
+    }
+    if (dynamicOpts.opener && dynamicOpts.opener.value) {
+      dynamicOpts.opener.value = {
+        domRef: newVal
+      }
+    }
+  }
+)
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', setPositionWhenOpen)
 })

package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -13,7 +13,7 @@ exports[`FzFloating > should match snapshot 1`] = `
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -23,7 +23,7 @@ exports[`FzFloating > should match snapshot 2`] = `
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -33,7 +33,7 @@ exports[`FzFloating > should match snapshot 3`] = `
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -43,7 +43,7 @@ exports[`FzFloating > should match snapshot 4`] = `
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -53,7 +53,7 @@ exports[`FzFloating > should match snapshot 5`] = `
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -63,7 +63,7 @@ exports[`FzFloating > should match snapshot 6`] = `
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`FzFloating > should match snapshot 7`] = `
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -83,7 +83,7 @@ exports[`FzFloating > should match snapshot 8`] = `
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -93,7 +93,7 @@ exports[`FzFloating > should match snapshot 9`] = `
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -103,7 +103,7 @@ exports[`FzFloating > should match snapshot 10`] = `
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -113,7 +113,7 @@ exports[`FzFloating > should match snapshot 11`] = `
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
   <!--v-if-->

package/src/composables/useCurrency.ts

@@ -14,8 +14,8 @@ export const useCurrency = (options: FzUseCurrencyOptions) => {
     }
     const safeOptions: Intl.NumberFormatOptions = {
       minimumFractionDigits: options.minimumFractionDigits,
-      useGrouping: false
-    };
+      useGrouping: options.useGrouping || false
+    }
     if (options.maximumFractionDigits !== null) {
       safeOptions.maximumFractionDigits = options.maximumFractionDigits
     }

package/src/composables/useFloating.ts

@@ -1,9 +1,9 @@
 import { FzFloatingPosition, FzRect, FzUseFloatingArgs } from '../types'
-import { ref, reactive, onUnmounted, Ref, nextTick } from 'vue'
+import { ref, reactive, onUnmounted, Ref, nextTick, ToRefs } from 'vue'
 import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
 
 export const useFloating = (
-  args: FzUseFloatingArgs
+  args: ToRefs<FzUseFloatingArgs>
 ): {
   float: FzRect
   rect: Ref<DOMRect | undefined>
@@ -27,7 +27,7 @@ export const useFloating = (
     root: null,
     rootMargin: '0px',
     threshold: 1.0,
-    ...args.element.intersectionOptions
+    ...args.element.value.intersectionOptions
   }
 
   const handleIntersect = (
@@ -42,17 +42,17 @@ export const useFloating = (
     nextTick(() => {
       actualPosition.value = args.position ? args.position.value : 'auto'
       safeElementDomRef.value = (
-        typeof args.element.domRef.value === 'string'
-          ? document.querySelector(args.element.domRef.value)
-          : args.element.domRef.value
+        typeof args.element.value.domRef.value === 'string'
+          ? document.querySelector(args.element.value.domRef.value)
+          : args.element.value.domRef.value
       ) as HTMLElement
-      if (!args.container) {
+      if (!args.container?.value) {
         safeContainerDomRef.value = document.body
       } else {
         safeContainerDomRef.value = (
-          typeof args.container.domRef.value === 'string'
-            ? document.querySelector(args.container.domRef.value)
-            : args.container.domRef.value
+          typeof args.container.value?.domRef.value === 'string'
+            ? document.querySelector(args.container.value.domRef.value)
+            : args.container.value?.domRef.value
         ) as HTMLElement
         safeContainerDomRef.value ??= document.body
       }
@@ -61,11 +61,11 @@ export const useFloating = (
         throw new Error('missing reference element for floating behavior')
       }
 
-      if (args.opener) {
+      if (args.opener?.value) {
         safeOpenerDomRef.value = (
-          typeof args.opener.domRef.value === 'string'
-            ? document.querySelector(args.opener.domRef.value)
-            : args.opener.domRef.value
+          typeof args.opener.value?.domRef.value === 'string'
+            ? document.querySelector(args.opener.value.domRef.value)
+            : args.opener.value?.domRef.value
         ) as HTMLElement
       }
 
@@ -82,7 +82,7 @@ export const useFloating = (
       let translateY = 0
       let translateX = 0
 
-      if (args.opener && safeOpenerDomRef.value && openerRect && openerRect.value) {
+      if (args.opener?.value && safeOpenerDomRef.value && openerRect?.value) {
         const leftWithoutXMargin =
           openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
         const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
@@ -93,14 +93,14 @@ export const useFloating = (
         switch (actualPosition.value) {
           case 'auto':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement
             )
             break
           case 'auto-vertical':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement,
               undefined,
@@ -109,7 +109,7 @@ export const useFloating = (
             break
           case 'auto-start':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement,
               'start'
@@ -117,7 +117,7 @@ export const useFloating = (
             break
           case 'auto-vertical-start':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement,
               'start',
@@ -126,7 +126,7 @@ export const useFloating = (
             break
           case 'auto-end':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement,
               'end'
@@ -134,7 +134,7 @@ export const useFloating = (
             break
           case 'auto-vertical-end':
             actualPosition.value = getHighestAvailableSpacePos(
-              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              args.useViewport?.value ? null : (safeContainerDomRef.value as HTMLElement),
               safeElementDomRef.value as HTMLElement,
               safeOpenerDomRef.value as HTMLElement,
               'end',
@@ -304,7 +304,9 @@ export const useFloating = (
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
 
-      args.callback && args.callback(rect, openerRect, containerRect, position, actualPosition)
+      if (args.callback?.value) {
+        args.callback.value(rect, openerRect, containerRect, position, actualPosition)
+      }
     })
 
   onUnmounted(() => {

package/src/types.ts

@@ -19,6 +19,7 @@ export interface FzFloatingProps {
     | Record<string, boolean | undefined>
     | Array<string | Record<string, boolean | undefined>>
   overrideContentClass?: boolean
+  overrideOpener?: Ref<HTMLElement>
   teleport?: boolean
   useViewport?: boolean
 }
@@ -39,9 +40,9 @@ export interface FzFloatElement {
 export interface FzUseFloatingArgs {
   element: FzFloatElement
   container?: FzFloatElement
-  opener?: FzFloatElement
-  position?: Ref<FzFloatingPosition>
-  useViewport?: Ref<boolean>
+  opener: FzFloatElement
+  position?: FzFloatingPosition
+  useViewport?: boolean
   callback?: (
     rect: Ref<DOMRect | undefined>,
     openerRect: Ref<DOMRect | undefined>,
@@ -52,6 +53,7 @@ export interface FzUseFloatingArgs {
 }
 
 export interface FzUseCurrencyOptions {
-  minimumFractionDigits: number,
-  maximumFractionDigits: number|null,
-}
+  minimumFractionDigits: number
+  maximumFractionDigits: number | null
+  useGrouping?: boolean
+}