@fiscozen/composables 0.1.12 → 0.1.14

package/dist/composables.js

@@ -1,4 +1,4 @@
-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 $, toRef as D, watch as O, openBlock as T, createElementBlock as W, createElementVNode as F, renderSlot as k, unref as S, withDirectives as q, normalizeClass as I, vShow as U } from "vue";
+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;
@@ -49,7 +49,7 @@ const x = (o, t, i, n) => {
     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), B = l.left - parseFloat(h.marginLeft), y = l.top - parseFloat(h.marginTop) - parseFloat(h.marginBottom), L = l.top - parseFloat(h.marginTop);
+      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) {
         case "auto":
           v = x(
@@ -77,7 +77,7 @@ const x = (o, t, i, n) => {
       }
       switch (v) {
         case "bottom":
-          e.position.y = l.bottom, e.position.x = B + l.width / 2, u = -50, p = 0;
+          e.position.y = l.bottom, e.position.x = L + l.width / 2, u = -50, p = 0;
           break;
         case "bottom-start":
           e.position.y = l.bottom, e.position.x = g, u = 0, p = 0;
@@ -89,7 +89,7 @@ const x = (o, t, i, n) => {
           e.position.y = y, e.position.x = g, u = -100, p = 0;
           break;
         case "left":
-          e.position.y = L + l.height / 2, e.position.x = g, p = -50, u = -100;
+          e.position.y = B + l.height / 2, e.position.x = g, p = -50, u = -100;
           break;
         case "left-end":
           e.position.y = l.bottom, e.position.x = g, p = -100, u = -100;
@@ -98,7 +98,7 @@ const x = (o, t, i, n) => {
           e.position.y = y, e.position.x = g, p = -100, u = 0;
           break;
         case "top":
-          e.position.y = y, e.position.x = B + l.width / 2, u = -50, p = -100;
+          e.position.y = y, e.position.x = L + l.width / 2, u = -50, p = -100;
           break;
         case "top-end":
           e.position.y = y, e.position.x = l.right, u = -100, p = -100;
@@ -107,7 +107,7 @@ const x = (o, t, i, n) => {
           e.position.y = y, e.position.x = l.right, u = 0, p = 0;
           break;
         case "right":
-          e.position.y = L + l.height / 2, e.position.x = l.right, p = -50, u = 0;
+          e.position.y = B + l.height / 2, e.position.x = l.right, p = -50, u = 0;
           break;
         case "right-end":
           e.position.y = l.bottom, e.position.x = l.right, p = -100, u = 0;
@@ -179,18 +179,18 @@ function Y(o) {
     }
   };
 }
-function G(o, t, i) {
+function G(o, t) {
   if (!o)
     throw new Error("A target component has to be provided.");
   if (!t)
     throw new Error("A callback has to be provided.");
-  const n = (a) => {
-    !o.value || a.target === o.value || a.composedPath().includes(o.value) || typeof t == "function" && t();
+  const i = (n) => {
+    !o.value || n.target === o.value || n.composedPath().includes(o.value) || typeof t == "function" && t();
   };
   w(() => {
-    (i ?? o).value.addEventListener("click", n);
+    window.addEventListener("click", i);
   }), C(() => {
-    (i ?? o).value.removeEventListener("click", n);
+    window.removeEventListener("click", i);
   });
 }
 function H(o, t) {
@@ -239,29 +239,29 @@ const J = /* @__PURE__ */ A({
   },
   setup(o) {
     const t = o, i = f(null), n = f(null), a = N(), e = {
-      position: $(() => t.position),
+      position: O(() => t.position),
       element: {
         domRef: n
       },
       container: {
-        domRef: D(t.container || document.body)
+        domRef: T(t.container || document.body)
       }
     };
     a.opener && (e.opener = {
       domRef: i
     });
     const c = Q(e);
-    O(
+    $(
       () => t.position,
       () => t.isOpen && c.setPosition()
-    ), O(
+    ), $(
       () => t.isOpen,
       (r) => {
         !r || !n.value || (n.value.style.top = "0px", n.value.style.left = "0px", n.value.style.transform = "none", c.setPosition());
       }
     );
-    const d = $(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
-    return (r, b) => (T(), W("div", null, [
+    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", {
         ref_key: "opener",
         ref: i,

package/dist/composables.umd.cjs

@@ -1 +1 @@
-(function(f,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(f=typeof globalThis<"u"?globalThis:f||self,n(f.FzComposables={},f.Vue))})(this,function(f,n){"use strict";const x=(o,t,i,s)=>{let r="right",e="right-start";const d=o.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=(o,t,i,s)=>({x:t.x+o.width*i/100,y:t.y+o.height*s/100}),R=o=>{const t=n.ref(null),i=n.ref(null),s=n.ref(null),r=n.ref(null),e=n.reactive({position:{x:0,y:0}}),d={root:null,rootMargin:"0px",threshold:1,...o.element.intersectionOptions},h=(p,a)=>{},l=n.ref(new IntersectionObserver(h,d)),k=()=>n.nextTick(()=>{var C;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)throw new Error("missing reference element for floating behavior");o.opener&&(s.value=typeof o.opener.domRef.value=="string"?document.querySelector(o.opener.domRef.value):o.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=o.position?o.position.value:"auto",c=0,u=0;if(o.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 n.onUnmounted(()=>{l.value.disconnect()}),{float:e,rect:r,floatObserver:l,setPosition:k}};function w(o){const t=window.matchMedia(o),i=n.ref(t.matches);function s(r){i.value=r.matches}return n.onMounted(()=>{t.addEventListener("change",s)}),n.onUnmounted(()=>{t.removeEventListener("change",s)}),i}function O(o){return{isGreater(t){return w(`(min-width: ${o[t]})`)},isSmaller(t){return w(`(max-width: ${o[t]})`)},isInBetween(t,i){return w(`(min-width: ${o[t]}) and (max-width: ${o[i]})`)}}}function F(o,t,i){if(!o)throw new Error("A target component has to be provided.");if(!t)throw new Error("A callback has to be provided.");const s=r=>{!o.value||r.target===o.value||r.composedPath().includes(o.value)||typeof t=="function"&&t()};n.onMounted(()=>{(i??o).value.addEventListener("click",s)}),n.onBeforeUnmount(()=>{(i??o).value.removeEventListener("click",s)})}function S(o,t){if(!o)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)};n.onMounted(()=>{o.value.addEventListener("keydown",i)}),n.onBeforeUnmount(()=>{o.value.removeEventListener("keydown",i)})}function $(o,t){if(!o||typeof o!="function")throw new Error("A callback has to be provided.");const i=s=>{o(s)};n.onMounted(()=>{if(!t){document.addEventListener("keyup",i);return}t.value.addEventListener("keyup",i)}),n.onBeforeUnmount(()=>{if(!t){document.removeEventListener("keyup",i);return}t.value.removeEventListener("keyup",i)})}const M=n.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean}},setup(o){const t=o,i=n.ref(null),s=n.ref(null),r=n.useSlots(),e={position:n.computed(()=>t.position),element:{domRef:s},container:{domRef:n.toRef(t.container||document.body)}};r.opener&&(e.opener={domRef:i});const d=R(e);n.watch(()=>t.position,()=>t.isOpen&&d.setPosition()),n.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=n.computed(()=>t.overrideContentClass?t.contentClass:["bg-core-white fixed p-4 z-10",t.contentClass]);return(l,k)=>(n.openBlock(),n.createElementBlock("div",null,[n.createElementVNode("div",{ref_key:"opener",ref:i,class:"inline-flex"},[n.renderSlot(l.$slots,"opener",{isOpen:l.isOpen,floating:n.unref(d)})],512),n.renderSlot(l.$slots,"opener-end"),n.withDirectives(n.createElementVNode("div",{ref_key:"content",ref:s,class:n.normalizeClass(h.value)},[n.renderSlot(l.$slots,"default",{isOpen:l.isOpen,floating:n.unref(d)})],2),[[n.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(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"})});

package/package.json

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

package/src/FzFloating.vue

@@ -5,7 +5,8 @@ import { FzFloatingProps, FzUseFloatingArgs } from './types'
 
 const props = withDefaults(defineProps<FzFloatingProps>(), {
   position: 'auto',
-  isOpen: false
+  isOpen: false,
+  teleport: false
 })
 
 const opener = ref(null)
@@ -63,12 +64,24 @@ const contentClass = computed(() => {
     </div>
     <slot name="opener-end"></slot>
     <div
+      v-if="!teleport"
       ref="content"
       v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
+      class="fz__floating__content bg-core-white fixed p-4 z-10"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>
     </div>
+    <Teleport to="body" v-if="teleport">
+      <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="contentClass"
+      >
+        <slot :isOpen :floating></slot>
+      </div>
+    </Teleport>
   </div>
 </template>
 

package/src/composables/useClickOutside.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, onMounted, Ref } from 'vue'
+import { onBeforeUnmount, onMounted, Ref, watch } from 'vue'
 
 function useClickOutside(
   component: Ref<HTMLElement | undefined>, 
@@ -27,12 +27,27 @@ function useClickOutside(
     }
   }
 
+  if (elementToListenClicksOn) {
+    watch(elementToListenClicksOn, (newVal: HTMLElement | undefined, oldVal: HTMLElement | 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/types.ts

@@ -19,6 +19,7 @@ export interface FzFloatingProps {
     | Record<string, boolean | undefined>
     | Array<string | Record<string, boolean | undefined>>
   overrideContentClass?: boolean
+  teleport?: boolean
 }
 
 export interface FzAbsolutePosition {