@fiscozen/composables 0.1.36 → 0.1.37

package/dist/composables.js

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

package/dist/composables.umd.cjs

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

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Riccardo Agnoletto",
+  "dependencies": {
+    "@fiscozen/style": "^0.1.7"
+  },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13"
@@ -25,9 +28,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/eslint-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -2,6 +2,8 @@
 import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs, defineExpose } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
+import { useMediaQuery } from './composables'
+import { breakpoints } from '@fiscozen/style'
 
 const props = withDefaults(defineProps<FzFloatingProps>(), {
   position: 'auto',
@@ -16,6 +18,8 @@ const opener = ref<HTMLElement | null>(null)
 
 const slots = useSlots()
 
+const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`)
+
 let scheduledAnimationFrame = false
 
 const useFloatingOpts: FzUseFloatingArgs = {
@@ -71,9 +75,11 @@ watch(
       return
     }
     window.addEventListener('scroll', setPositionWhenOpen)
+    const openerRect = opener.value?.getBoundingClientRect()
     content.value.style.top = '0px'
     content.value.style.left = '0px'
     content.value.style.transform = 'none'
+    content.value.style.width = xs.value ? openerRect?.width + 'px' : 'auto'
     floating.setPosition()
   }
 )
@@ -110,7 +116,7 @@ defineExpose({
 <template>
   <div>
     <slot name="opener-start"></slot>
-    <div ref="opener" class="inline-flex">
+    <div ref="opener" class="inline-flex w-full sm:w-auto">
       <slot name="opener" :isOpen :floating></slot>
     </div>
     <slot name="opener-end"></slot>
@@ -118,7 +124,7 @@ defineExpose({
       v-if="!teleport"
       ref="content"
       v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-      class="fz__floating__content"
+      class="fz__floating__content w-full sm:w-auto"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>

package/src/composables/useMediaQuery.ts

@@ -1,4 +1,4 @@
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import { Ref, onMounted, onUnmounted, ref, computed } from 'vue'
 
 function useMediaQuery(mediaQuery: string): Ref<boolean> {
   const mediaQueryList = window.matchMedia(mediaQuery)
@@ -16,7 +16,7 @@ function useMediaQuery(mediaQuery: string): Ref<boolean> {
     mediaQueryList.removeEventListener('change', handleChange)
   })
 
-  return matches
+  return computed(() => matches.value)
 }
 
 export { useMediaQuery }