@fiscozen/composables 0.1.21 → 0.1.22

package/dist/composables.js

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

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

package/package.json

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

package/src/FzFloating.vue

@@ -80,7 +80,7 @@ const contentClass = computed(() => {
     return props.contentClass
   }
 
-  return ['bg-core-white fixed p-4 z-10', props.contentClass]
+  return ['fz__floating__content bg-core-white fixed p-4 z-10', props.contentClass]
 })
 </script>
 
@@ -95,7 +95,6 @@ const contentClass = computed(() => {
       v-if="!teleport"
       ref="content"
       v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-      class="fz__floating__content bg-core-white fixed z-10 p-4"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>
@@ -104,7 +103,6 @@ const contentClass = computed(() => {
       <div
         ref="content"
         v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-        class="fz__floating__content bg-core-white fixed z-10 p-4"
         :class="contentClass"
       >
         <slot :isOpen :floating></slot>