@fiscozen/composables 0.1.13 → 0.1.16-beta.1

package/dist/composables.js

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

package/dist/composables.umd.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.13",
+  "version": "0.1.16-beta.1",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",

package/src/FzFloating.vue

@@ -9,6 +9,8 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
   teleport: false
 })
 
+const emits = defineEmits(['fzfloating:setPosition'])
+
 const opener = ref(null)
 const content = ref<HTMLElement | null>(null)
 
@@ -17,10 +19,15 @@ const slots = useSlots()
 const useFloatingOpts: FzUseFloatingArgs = {
   position: computed(() => props.position),
   element: {
+    // @ts-ignore
     domRef: content
   },
   container: {
+    // @ts-ignore
     domRef: toRef(props.container || document.body)
+  },
+  callback(...args) {
+    emits('fzfloating:setPosition', ...args)
   }
 }
 if (slots.opener) {
@@ -59,6 +66,7 @@ const contentClass = computed(() => {
 
 <template>
   <div>
+    <slot name="opener-start"></slot>
     <div ref="opener" class="inline-flex">
       <slot name="opener" :isOpen :floating></slot>
     </div>
@@ -76,7 +84,7 @@ const contentClass = computed(() => {
       <div
         ref="content"
         v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-        class="fz__floating__content bg-core-white fixed p-4 z-10"
+        class="fz__floating__content bg-core-white absolute p-4 z-10"
         :class="contentClass"
       >
         <slot :isOpen :floating></slot>

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

@@ -3,107 +3,119 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;

package/src/composables/index.ts

@@ -3,4 +3,4 @@ export * from './useMediaQuery'
 export * from './useBreakpoints'
 export * from './useClickOutside'
 export * from './useKeyDown'
-export * from './useKeyUp'
+export * from './useKeyUp'

package/src/composables/useClickOutside.ts

@@ -1,9 +1,9 @@
-import { onBeforeUnmount, onMounted, Ref } from 'vue'
+import { onBeforeUnmount, onMounted, Ref, watch } from 'vue'
 
 function useClickOutside(
-  component: Ref<HTMLElement | undefined>, 
+  component: Ref<HTMLElement | undefined>,
   callback: () => void,
-  elementToListenClicksOn?: Ref<HTMLElement | undefined>,
+  elementToListenClicksOn?: Ref<HTMLElement | undefined>
 ) {
   // fail early if any of the required params is missing
   if (!component) {
@@ -14,7 +14,7 @@ function useClickOutside(
     throw new Error('A callback has to be provided.')
   }
 
-  const listener = (event: MouseEvent) => {
+  const listener = (event: Event) => {
     if (
       !component.value ||
       event.target === component.value ||
@@ -27,12 +27,30 @@ function useClickOutside(
     }
   }
 
+  if (elementToListenClicksOn) {
+    watch(
+      elementToListenClicksOn,
+      (newVal: Element | undefined, oldVal: Element | undefined) => {
+        if (oldVal) {
+          oldVal.removeEventListener('click', listener)
+        }
+        newVal?.addEventListener('click', listener)
+      }
+    )
+  }
+
   onMounted(() => {
-    (elementToListenClicksOn ?? component).value!.addEventListener('click', listener)
+    if (!elementToListenClicksOn) {
+      document.addEventListener('click', listener)
+    }
   })
 
   onBeforeUnmount(() => {
-    (elementToListenClicksOn ?? component).value!.removeEventListener('click', listener)
+    if (elementToListenClicksOn) {
+      elementToListenClicksOn.value!.removeEventListener('click', listener)
+      return
+    }
+    document.removeEventListener('click', listener)
   })
 }
 

package/src/composables/useFloating.ts

@@ -1,19 +1,24 @@
 import { FzFloatingPosition, FzRect, FzUseFloatingArgs } from '../types'
-import { ref, reactive, onUnmounted, Ref, nextTick, computed } from 'vue'
+import { ref, reactive, onUnmounted, Ref, nextTick } from 'vue'
 import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
 
 export const useFloating = (
   args: FzUseFloatingArgs
 ): {
   float: FzRect
-  rect: Ref<DOMRect | null>
-  floatObserver: Ref<IntersectionObserver>
+  rect: Ref<DOMRect | undefined>
   setPosition: () => Promise<void>
+  position: Ref<FzFloatingPosition>
+  openerRect: Ref<DOMRect | undefined>
+  containerRect: Ref<DOMRect | undefined>
 } => {
   const safeElementDomRef = ref<HTMLElement | null>(null)
   const safeContainerDomRef = ref<HTMLElement | null>(null)
   const safeOpenerDomRef = ref<HTMLElement | null>(null)
-  const rect = ref<DOMRect | null>(null)
+  const openerRect = ref<DOMRect | undefined>()
+  const containerRect = ref<DOMRect | undefined>()
+  const position = ref<FzFloatingPosition>('auto')
+  const rect = ref<DOMRect | undefined>()
   const float = reactive<FzRect>({
     position: { x: 0, y: 0 }
   })
@@ -30,20 +35,21 @@ export const useFloating = (
   ) => {}
 
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
+  position.value = args.position ? args.position.value : 'auto'
 
   const setPosition = () =>
     nextTick(() => {
       safeElementDomRef.value =
-        typeof args.element.domRef.value === 'string'
-          ? document.querySelector(args.element.domRef.value)
-          : args.element.domRef.value
+        (typeof args.element.domRef.value === 'string'
+          ? document.querySelector(args.element.domRef.value) 
+          : args.element.domRef.value) as HTMLElement
       if (!args.container) {
         safeContainerDomRef.value = document.body
       } else {
         safeContainerDomRef.value =
-          typeof args.container.domRef.value === 'string'
+          (typeof args.container.domRef.value === 'string'
             ? document.querySelector(args.container.domRef.value)
-            : args.container.domRef.value
+            : args.container.domRef.value) as HTMLElement
         safeContainerDomRef.value ??= document.body
       }
 
@@ -53,77 +59,102 @@ export const useFloating = (
 
       if (args.opener) {
         safeOpenerDomRef.value =
-          typeof args.opener.domRef.value === 'string'
+          (typeof args.opener.domRef.value === 'string'
             ? document.querySelector(args.opener.domRef.value)
-            : args.opener.domRef.value
+            : args.opener.domRef.value) as HTMLElement
       }
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
-      const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
-      const containerRect = safeContainerDomRef.value.getBoundingClientRect()
+      openerRect.value = safeOpenerDomRef.value?.getBoundingClientRect()
+      containerRect.value = safeContainerDomRef.value.getBoundingClientRect()
 
-      const elStyle = window.getComputedStyle(safeElementDomRef.value)
+      const elStyle = window.getComputedStyle(safeElementDomRef.value as HTMLElement)
 
       // multiple observer calls on same target do not cause multiple registrations
-      floatObserver.value.observe(safeElementDomRef.value)
-      floatObserver.value.observe(safeContainerDomRef.value)
-
-      let position: FzFloatingPosition = args.position ? args.position.value : 'auto'
+      floatObserver.value.observe(safeElementDomRef.value as HTMLElement)
+      floatObserver.value.observe(safeContainerDomRef.value as HTMLElement)
 
       let translateY = 0
       let translateX = 0
 
-      if (args.opener && safeOpenerDomRef.value && openerRect) {
+      if (args.opener && safeOpenerDomRef.value && openerRect && openerRect.value) {
         const leftWithoutXMargin =
-          openerRect.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
-        const leftWithoutLeftMargin = openerRect.left - parseFloat(elStyle.marginLeft)
+          openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
+        const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
         const topWithoutYMargin =
-          openerRect.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
-        const topWithoutTopMargin = openerRect.top - parseFloat(elStyle.marginTop)
+          openerRect.value.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
+        const topWithoutTopMargin = openerRect.value.top - parseFloat(elStyle.marginTop)
 
-        switch (position) {
+        switch (position.value) {
           case 'auto':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement
+            )
+            break
+          case 'auto-vertical':
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              undefined,
+              true
             )
             break
           case 'auto-start':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value,
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
               'start'
             )
             break
+          case 'auto-vertical-start':
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              'start',
+              true
+            )
+            break
           case 'auto-end':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value,
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
               'end'
             )
             break
+          case 'auto-vertical-end':
+            position.value = getHighestAvailableSpacePos(
+              safeContainerDomRef.value as HTMLElement,
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              'end',
+              true
+            )
+            break
           default:
             break
         }
-        switch (position) {
+        switch (position.value) {
           case 'bottom':
-            float.position.y = openerRect.bottom
-            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
+            float.position.y = openerRect.value.bottom
+            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
             translateX = -50
             translateY = 0
             break
           case 'bottom-start':
-            float.position.y = openerRect.bottom
+            float.position.y = openerRect.value.bottom
             float.position.x = leftWithoutXMargin
             translateX = 0
             translateY = 0
             break
           case 'bottom-end':
-            float.position.y = openerRect.bottom
-            float.position.x = openerRect.right
+            float.position.y = openerRect.value.bottom
+            float.position.x = openerRect.value.right
             translateX = -100
             translateY = 0
             break
@@ -134,13 +165,13 @@ export const useFloating = (
             translateY = 0
             break
           case 'left':
-            float.position.y = topWithoutTopMargin + openerRect.height / 2
+            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
             float.position.x = leftWithoutXMargin
             translateY = -50
             translateX = -100
             break
           case 'left-end':
-            float.position.y = openerRect.bottom
+            float.position.y = openerRect.value.bottom
             float.position.x = leftWithoutXMargin
             translateY = -100
             translateX = -100
@@ -153,31 +184,31 @@ export const useFloating = (
             break
           case 'top':
             float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
+            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
             translateX = -50
             translateY = -100
             break
           case 'top-end':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.right
+            float.position.x = openerRect.value.right
             translateX = -100
             translateY = -100
             break
           case 'right-start':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.right
+            float.position.x = openerRect.value.right
             translateX = 0
             translateY = 0
             break
           case 'right':
-            float.position.y = topWithoutTopMargin + openerRect.height / 2
-            float.position.x = openerRect.right
+            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
+            float.position.x = openerRect.value.right
             translateY = -50
             translateX = 0
             break
           case 'right-end':
-            float.position.y = openerRect.bottom
-            float.position.x = openerRect.right
+            float.position.y = openerRect.value.bottom
+            float.position.x = openerRect.value.right
             translateY = -100
             translateX = 0
             break
@@ -185,42 +216,45 @@ export const useFloating = (
             break
         }
       } else {
-        switch (position) {
+        switch (position.value) {
           case 'bottom':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.left + containerRect.width / 2
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.left + containerRect.value.width / 2
             translateX = -50
             break
           case 'left-end':
           case 'bottom-start':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.left
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.left
             break
           case 'right-end':
           case 'bottom-end':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.right - rect.value.width
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.right - rect.value.width
             break
           case 'left':
-            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
-            float.position.x = containerRect.left
+            float.position.y =
+              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+            float.position.x = containerRect.value.left
             break
           case 'top-start':
           case 'left-start':
-            float.position.y = containerRect.top
-            float.position.x = containerRect.left
+            float.position.y = containerRect.value.top
+            float.position.x = containerRect.value.left
             break
           case 'top':
-            float.position.y = containerRect.top
-            float.position.x = containerRect.left + (containerRect.width - rect.value.width) / 2
+            float.position.y = containerRect.value.top
+            float.position.x =
+              containerRect.value.left + (containerRect.value.width - rect.value.width) / 2
             break
           case 'top-end':
           case 'right-start':
-            float.position.y = containerRect.top
-            float.position.x = containerRect.right - rect.value.width
+            float.position.y = containerRect.value.top
+            float.position.x = containerRect.value.right - rect.value.width
           case 'right':
-            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
-            float.position.x = containerRect.right - rect.value.width
+            float.position.y =
+              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+            float.position.x = containerRect.value.right - rect.value.width
             break
           default:
             break
@@ -232,32 +266,40 @@ export const useFloating = (
       float.position.x = realPos.x
       float.position.y = realPos.y
 
-      if (realPos.x < containerRect.left) {
-        float.position.x = containerRect.left
+      if (realPos.x < containerRect.value.left) {
+        float.position.x = containerRect.value.left
         translateX = 0
       }
 
-      if (realPos.x + rect.value.width > containerRect.right) {
-        float.position.x = containerRect.right - rect.value.width
+      if (realPos.x + rect.value.width > containerRect.value.right) {
+        const fixVal = containerRect.value.right - rect.value.width
+        if (fixVal > 0) {
+          float.position.x = fixVal
+        }
         translateX = 0
       }
 
-      if (realPos.y < containerRect.top) {
-        float.position.y = containerRect.top
+      if (realPos.y < containerRect.value.top) {
+        float.position.y = containerRect.value.top
         translateY = 0
       }
 
-      if (realPos.y + rect.value.height > containerRect.bottom) {
-        float.position.y = containerRect.bottom - rect.value.height
+      if (realPos.y + rect.value.height > containerRect.value.bottom) {
+        const fixVal = containerRect.value.bottom - rect.value.height
+        if (fixVal > 0) {
+          float.position.y = fixVal
+        }
         translateY = 0
       }
 
       safeElementDomRef.value.style.top = `${float.position.y}px`
       safeElementDomRef.value.style.left = `${float.position.x}px`
-      safeElementDomRef.value.style.position = 'fixed'
+      // safeElementDomRef.value.style.position = 'fixed'
       safeElementDomRef.value.style.display = 'flex'
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
+
+      args.callback && args.callback(rect, openerRect, containerRect, position)
     })
 
   onUnmounted(() => {
@@ -267,7 +309,9 @@ export const useFloating = (
   return {
     float,
     rect,
-    floatObserver,
-    setPosition
+    setPosition,
+    position,
+    openerRect,
+    containerRect
   }
 }

package/src/composables/useKeyDown.ts

@@ -1,6 +1,9 @@
 import { onBeforeUnmount, onMounted, Ref } from 'vue'
 
-function useKeyDown(component: Ref<HTMLElement | undefined>, callback: (event: KeyboardEvent) => void) {
+function useKeyDown(
+  component: Ref<HTMLElement | undefined>,
+  callback: (event: KeyboardEvent) => void
+) {
   // fail early if any of the required params is missing
   if (!component) {
     throw new Error('A target component has to be provided.')

package/src/composables/useKeyUp.ts

@@ -1,7 +1,9 @@
 import { onBeforeUnmount, onMounted, Ref } from 'vue'
 
-function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTMLElement | undefined>) {
-
+function useKeyUp(
+  callback: (event: KeyboardEvent) => void,
+  component?: Ref<HTMLElement | undefined>
+) {
   if (!callback || typeof callback !== 'function') {
     throw new Error('A callback has to be provided.')
   }
@@ -13,7 +15,7 @@ function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTML
   onMounted(() => {
     if (!component) {
       document.addEventListener('keyup', listener)
-      return;
+      return
     }
     component.value!.addEventListener('keyup', listener)
   })
@@ -21,7 +23,7 @@ function useKeyUp(callback: (event: KeyboardEvent) => void, component?: Ref<HTML
   onBeforeUnmount(() => {
     if (!component) {
       document.removeEventListener('keyup', listener)
-      return;
+      return
     }
     component.value!.removeEventListener('keyup', listener)
   })

package/src/types.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue'
 
-type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto'
+type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto' | 'auto-vertical'
 type PositionSecondary = 'start' | 'end'
 export type FzFloatingPosition = PositionPrimary | `${PositionPrimary}-${PositionSecondary}`
 
@@ -40,4 +40,10 @@ export interface FzUseFloatingArgs {
   container?: FzFloatElement
   opener?: FzFloatElement
   position?: Ref<FzFloatingPosition>
+  callback?: (
+    rect: Ref<DOMRect | undefined>,
+    openerRect: Ref<DOMRect | undefined>,
+    containerRect: Ref<DOMRect | undefined>,
+    position: Ref<FzFloatingPosition>
+  ) => void
 }

package/src/utils/index.ts

@@ -10,11 +10,12 @@ export const getHighestAvailableSpacePos = (
   container: HTMLElement,
   el: HTMLElement,
   opener: HTMLElement,
-  justify?: 'start' | 'end'
+  justify?: 'start' | 'end',
+  verticalOnly?: boolean
 ): FzFloatingPosition => {
-  let mainPosition: MainPosition = 'right'
+  let mainPosition: MainPosition = verticalOnly ? 'bottom' : 'right'
 
-  let positionRes: FzFloatingPosition = 'right-start'
+  let positionRes: FzFloatingPosition = verticalOnly ? 'bottom-start' : 'right-start'
 
   const containerRect = container.getBoundingClientRect()
   const elRect = el.getBoundingClientRect()
@@ -29,7 +30,7 @@ export const getHighestAvailableSpacePos = (
   const spaceBottomNormalized =
     (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
 
-  const positionList = [
+  let positionList = [
     {
       key: 'right',
       space: spaceRightNormalized
@@ -48,6 +49,10 @@ export const getHighestAvailableSpacePos = (
     } as PositionListItem
   ].sort((a, b) => b.space - a.space)
 
+  if (verticalOnly) {
+    positionList = positionList.filter((pos) => pos.key === 'top' || pos.key === 'bottom')
+  }
+
   mainPosition = positionList[0].key
 
   if (!justify) {