@fiscozen/composables 0.1.8-beta.1 → 0.1.9

package/dist/composables.js

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

package/dist/composables.umd.cjs

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

package/package.json

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

package/src/FzFloating.vue

@@ -46,6 +46,14 @@ watch(
     floating.setPosition()
   }
 )
+
+const contentClass = computed(() => {
+  if (props.overrideContentClass) {
+    return props.contentClass
+  }
+
+  return ['bg-core-white fixed p-4 z-10', props.contentClass]
+})
 </script>
 
 <template>
@@ -54,16 +62,13 @@ watch(
       <slot name="opener" :isOpen :floating></slot>
     </div>
     <slot name="opener-end"></slot>
-    <Teleport to="body">
-      <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
+      ref="content"
+      v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
+      :class="contentClass"
+    >
+      <slot :isOpen :floating></slot>
+    </div>
   </div>
 </template>
 

package/src/composables/useFloating.ts

@@ -61,8 +61,8 @@ export const useFloating = (
       rect.value = safeElementDomRef.value.getBoundingClientRect()
       const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
       const containerRect = safeContainerDomRef.value.getBoundingClientRect()
-     
-      const elStyle = window.getComputedStyle(safeElementDomRef.value);
+
+      const elStyle = window.getComputedStyle(safeElementDomRef.value)
 
       // multiple observer calls on same target do not cause multiple registrations
       floatObserver.value.observe(safeElementDomRef.value)
@@ -74,11 +74,12 @@ export const useFloating = (
       let translateX = 0
 
       if (args.opener && safeOpenerDomRef.value && openerRect) {
-
-        const leftWithoutXMargin = openerRect.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight);
-        const leftWithoutLeftMargin = openerRect.left - parseFloat(elStyle.marginLeft); 
-        const topWithoutYMargin = openerRect.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom);
-        const topWithoutTopMargin = openerRect.top - parseFloat(elStyle.marginTop);
+        const leftWithoutXMargin =
+          openerRect.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
+        const leftWithoutLeftMargin = openerRect.left - parseFloat(elStyle.marginLeft)
+        const topWithoutYMargin =
+          openerRect.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
+        const topWithoutTopMargin = openerRect.top - parseFloat(elStyle.marginTop)
 
         switch (position) {
           case 'auto':
@@ -228,7 +229,7 @@ export const useFloating = (
 
       const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
 
-      float.position.x = realPos.x 
+      float.position.x = realPos.x
       float.position.y = realPos.y
 
       if (realPos.x < containerRect.left) {

package/src/types.ts

@@ -8,8 +8,17 @@ export interface FzFloatingProps {
   isOpen: boolean
   position?: FzFloatingPosition
   container?: string | null
-  contentClass?: string | string[] | Record<string, boolean|undefined> | Array<string|Record<string,boolean|undefined>>
-  openerClass?: string | string[] | Record<string, boolean|undefined> | Array<string|Record<string,boolean|undefined>>
+  contentClass?:
+    | string
+    | string[]
+    | Record<string, boolean | undefined>
+    | Array<string | Record<string, boolean | undefined>>
+  openerClass?:
+    | string
+    | string[]
+    | Record<string, boolean | undefined>
+    | Array<string | Record<string, boolean | undefined>>
+  overrideContentClass?: boolean
 }
 
 export interface FzAbsolutePosition {