@fiscozen/composables 0.1.10 → 0.1.12

package/dist/composables.js

@@ -1,260 +1,299 @@
-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 = [
+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";
+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 = [
     {
       key: "right",
       space: l
     },
     {
       key: "top",
-      space: i
+      space: s
     },
     {
       key: "bottom",
-      space: d
+      space: h
     },
     {
       key: "left",
       space: b
     }
-  ].sort((p, c) => c.space - p.space)[0].key, !n)
-    switch (s) {
+  ].sort((p, u) => u.space - p.space)[0].key, !n)
+    switch (a) {
       case "right":
       case "left":
-        const p = (r.height - h.height) / 2;
-        u.top > h.top - p && (n = "end"), u.bottom < h.top - p && (n = "start");
+        const p = (d.height - r.height) / 2;
+        c.top > r.top - p && (n = "end"), c.bottom < r.top - p && (n = "start");
         break;
     }
-  return e = n ? `${s}-${n}` : s, e;
-}, U = (o, t, a, n) => ({
-  x: t.x + o.width * a / 100,
+  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
-}), X = (o) => {
-  const t = f(null), a = f(null), n = f(null), s = f(null), e = S({
+}), Q = (o) => {
+  const t = f(null), i = f(null), n = f(null), a = f(null), e = M({
     position: { x: 0, y: 0 }
-  }), u = {
+  }), c = {
     root: null,
     rootMargin: "0px",
     threshold: 1,
     ...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)
+  }, 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)
       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), 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;
+    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(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) {
+      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);
+      switch (v) {
         case "auto":
-          m = x(
-            a.value,
+          v = x(
+            i.value,
             t.value,
             n.value
           );
           break;
         case "auto-start":
-          m = x(
-            a.value,
+          v = x(
+            i.value,
             t.value,
             n.value,
             "start"
           );
           break;
         case "auto-end":
-          m = x(
-            a.value,
+          v = x(
+            i.value,
             t.value,
             n.value,
             "end"
           );
           break;
       }
-      switch (m) {
+      switch (v) {
         case "bottom":
-          e.position.y = l.bottom, e.position.x = B + l.width / 2, c = -50, p = 0;
+          e.position.y = l.bottom, e.position.x = B + l.width / 2, u = -50, p = 0;
           break;
         case "bottom-start":
-          e.position.y = l.bottom, e.position.x = g, c = 0, p = 0;
+          e.position.y = l.bottom, e.position.x = g, u = 0, p = 0;
           break;
         case "bottom-end":
-          e.position.y = l.bottom, e.position.x = l.right, c = -100, p = 0;
+          e.position.y = l.bottom, e.position.x = l.right, u = -100, p = 0;
           break;
         case "left-start":
-          e.position.y = y, e.position.x = g, c = -100, p = 0;
+          e.position.y = y, e.position.x = g, u = -100, p = 0;
           break;
         case "left":
-          e.position.y = C + l.height / 2, e.position.x = g, p = -50, c = -100;
+          e.position.y = L + 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, c = -100;
+          e.position.y = l.bottom, e.position.x = g, p = -100, u = -100;
           break;
         case "top-start":
-          e.position.y = y, e.position.x = g, p = -100, c = 0;
+          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, c = -50, p = -100;
+          e.position.y = y, e.position.x = B + l.width / 2, u = -50, p = -100;
           break;
         case "top-end":
-          e.position.y = y, e.position.x = l.right, c = -100, p = -100;
+          e.position.y = y, e.position.x = l.right, u = -100, p = -100;
           break;
         case "right-start":
-          e.position.y = y, e.position.x = l.right, c = 0, p = 0;
+          e.position.y = y, e.position.x = l.right, u = 0, p = 0;
           break;
         case "right":
-          e.position.y = C + l.height / 2, e.position.x = l.right, p = -50, c = 0;
+          e.position.y = L + 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, c = 0;
+          e.position.y = l.bottom, e.position.x = l.right, p = -100, u = 0;
           break;
       }
     } else
-      switch (m) {
+      switch (v) {
         case "bottom":
-          e.position.y = i.bottom - s.value.height, e.position.x = i.left + i.width / 2, c = -50;
+          e.position.y = s.bottom - a.value.height, e.position.x = s.left + s.width / 2, u = -50;
           break;
         case "left-end":
         case "bottom-start":
-          e.position.y = i.bottom - s.value.height, e.position.x = i.left;
+          e.position.y = s.bottom - a.value.height, e.position.x = s.left;
           break;
         case "right-end":
         case "bottom-end":
-          e.position.y = i.bottom - s.value.height, e.position.x = i.right - s.value.width;
+          e.position.y = s.bottom - a.value.height, e.position.x = s.right - a.value.width;
           break;
         case "left":
-          e.position.y = i.top + (i.height - s.value.height) / 2, e.position.x = i.left;
+          e.position.y = s.top + (s.height - a.value.height) / 2, e.position.x = s.left;
           break;
         case "top-start":
         case "left-start":
-          e.position.y = i.top, e.position.x = i.left;
+          e.position.y = s.top, e.position.x = s.left;
           break;
         case "top":
-          e.position.y = i.top, e.position.x = i.left + (i.width - s.value.width) / 2;
+          e.position.y = s.top, e.position.x = s.left + (s.width - a.value.width) / 2;
           break;
         case "top-end":
         case "right-start":
-          e.position.y = i.top, e.position.x = i.right - s.value.width;
+          e.position.y = s.top, e.position.x = s.right - a.value.width;
         case "right":
-          e.position.y = i.top + (i.height - s.value.height) / 2, e.position.x = i.right - s.value.width;
+          e.position.y = s.top + (s.height - a.value.height) / 2, e.position.x = s.right - a.value.width;
           break;
       }
-    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();
+    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();
   });
-  return L(() => {
-    h.value.disconnect();
+  return z(() => {
+    r.value.disconnect();
   }), {
     float: e,
-    rect: s,
-    floatObserver: h,
+    rect: a,
+    floatObserver: r,
     setPosition: b
   };
 };
-function k(o) {
-  const t = window.matchMedia(o), a = f(t.matches);
-  function n(s) {
-    a.value = s.matches;
+function R(o) {
+  const t = window.matchMedia(o), i = f(t.matches);
+  function n(a) {
+    i.value = a.matches;
   }
-  return E(() => {
+  return w(() => {
     t.addEventListener("change", n);
-  }), L(() => {
+  }), z(() => {
     t.removeEventListener("change", n);
-  }), a;
+  }), i;
 }
-function G(o) {
+function Y(o) {
   return {
     isGreater(t) {
-      return k(`(min-width: ${o[t]})`);
+      return R(`(min-width: ${o[t]})`);
     },
     isSmaller(t) {
-      return k(`(max-width: ${o[t]})`);
+      return R(`(max-width: ${o[t]})`);
     },
-    isInBetween(t, a) {
-      return k(`(min-width: ${o[t]}) and (max-width: ${o[a]})`);
+    isInBetween(t, i) {
+      return R(`(min-width: ${o[t]}) and (max-width: ${o[i]})`);
     }
   };
 }
-function H(o, t) {
+function G(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 a = (n) => {
-    !o.value || n.target === o.value || n.composedPath().includes(o.value) || typeof t == "function" && t();
+  const n = (a) => {
+    !o.value || a.target === o.value || a.composedPath().includes(o.value) || typeof t == "function" && t();
+  };
+  w(() => {
+    (i ?? o).value.addEventListener("click", n);
+  }), C(() => {
+    (i ?? o).value.removeEventListener("click", n);
+  });
+}
+function H(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 = (n) => {
+    t(n);
   };
-  E(() => {
-    window.addEventListener("click", a);
-  }), M(() => {
-    window.removeEventListener("click", a);
+  w(() => {
+    o.value.addEventListener("keydown", i);
+  }), C(() => {
+    o.value.removeEventListener("keydown", i);
+  });
+}
+function V(o, t) {
+  if (!o || typeof o != "function")
+    throw new Error("A callback has to be provided.");
+  const i = (n) => {
+    o(n);
+  };
+  w(() => {
+    if (!t) {
+      document.addEventListener("keyup", i);
+      return;
+    }
+    t.value.addEventListener("keyup", i);
+  }), C(() => {
+    if (!t) {
+      document.removeEventListener("keyup", i);
+      return;
+    }
+    t.value.removeEventListener("keyup", i);
   });
 }
-const V = /* @__PURE__ */ P({
+const J = /* @__PURE__ */ A({
   __name: "FzFloating",
   props: {
     isOpen: { type: Boolean, default: !1 },
     position: { default: "auto" },
     container: {},
     contentClass: {},
-    openerClass: {}
+    openerClass: {},
+    overrideContentClass: { type: Boolean }
   },
   setup(o) {
-    const t = o, a = f(null), n = f(null), s = N(), e = {
-      position: T(() => t.position),
+    const t = o, i = f(null), n = f(null), a = N(), e = {
+      position: $(() => t.position),
       element: {
         domRef: n
       },
       container: {
-        domRef: W(t.container || document.body)
+        domRef: D(t.container || document.body)
       }
     };
-    s.opener && (e.opener = {
-      domRef: a
+    a.opener && (e.opener = {
+      domRef: i
     });
-    const u = X(e);
-    return O(
+    const c = Q(e);
+    O(
       () => t.position,
-      () => t.isOpen && u.setPosition()
+      () => 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", u.setPosition());
+        !r || !n.value || (n.value.style.top = "0px", n.value.style.left = "0px", n.value.style.transform = "none", c.setPosition());
       }
-    ), (r, h) => (q(), A("div", null, [
-      $("div", {
+    );
+    const d = $(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
+    return (r, b) => (T(), W("div", null, [
+      F("div", {
         ref_key: "opener",
-        ref: a,
+        ref: i,
         class: "inline-flex"
       }, [
-        w(r.$slots, "opener", {
+        k(r.$slots, "opener", {
           isOpen: r.isOpen,
-          floating: F(u)
+          floating: S(c)
         })
       ], 512),
-      w(r.$slots, "opener-end"),
-      D($("div", {
+      k(r.$slots, "opener-end"),
+      q(F("div", {
         ref_key: "content",
         ref: n,
-        class: I(["bg-core-white fixed p-4 z-10", r.contentClass])
+        class: I(d.value)
       }, [
-        w(r.$slots, "default", {
+        k(r.$slots, "default", {
           isOpen: r.isOpen,
-          floating: F(u)
+          floating: S(c)
         })
       ], 2), [
-        [Q, r.$slots.default && (!r.$slots.opener || r.$slots.opener && r.isOpen)]
+        [U, r.$slots.default && (!r.$slots.opener || r.$slots.opener && r.isOpen)]
       ])
     ]));
   }
 });
 export {
-  V as FzFloating,
-  G as useBreakpoints,
-  H as useClickOutside,
-  X as useFloating,
-  k as useMediaQuery
+  J as FzFloating,
+  Y as useBreakpoints,
+  G as useClickOutside,
+  Q as useFloating,
+  H as useKeyDown,
+  V as useKeyUp,
+  R 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 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"})});
+(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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "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/composables/index.ts

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

package/src/composables/useClickOutside.ts

@@ -1,6 +1,10 @@
 import { onBeforeUnmount, onMounted, Ref } from 'vue'
 
-function useClickOutside(component: Ref<HTMLElement | undefined>, callback: () => void) {
+function useClickOutside(
+  component: Ref<HTMLElement | undefined>, 
+  callback: () => void,
+  elementToListenClicksOn?: Ref<HTMLElement | undefined>,
+) {
   // fail early if any of the required params is missing
   if (!component) {
     throw new Error('A target component has to be provided.')
@@ -24,11 +28,11 @@ function useClickOutside(component: Ref<HTMLElement | undefined>, callback: () =
   }
 
   onMounted(() => {
-    window.addEventListener('click', listener)
+    (elementToListenClicksOn ?? component).value!.addEventListener('click', listener)
   })
 
   onBeforeUnmount(() => {
-    window.removeEventListener('click', listener)
+    (elementToListenClicksOn ?? component).value!.removeEventListener('click', listener)
   })
 }
 

package/src/composables/useKeyUp.ts

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