@fiscozen/composables 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "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/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -59,6 +59,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 +77,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/composables/useFloating.ts

@@ -254,7 +254,7 @@ export const useFloating = (
 
       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()

package/dist/composables.js

@@ -1,299 +0,0 @@
-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 = [
-    {
-      key: "right",
-      space: l
-    },
-    {
-      key: "top",
-      space: s
-    },
-    {
-      key: "bottom",
-      space: h
-    },
-    {
-      key: "left",
-      space: b
-    }
-  ].sort((p, u) => u.space - p.space)[0].key, !n)
-    switch (a) {
-      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");
-        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({
-    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)
-      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) {
-        case "auto":
-          v = x(
-            i.value,
-            t.value,
-            n.value
-          );
-          break;
-        case "auto-start":
-          v = x(
-            i.value,
-            t.value,
-            n.value,
-            "start"
-          );
-          break;
-        case "auto-end":
-          v = x(
-            i.value,
-            t.value,
-            n.value,
-            "end"
-          );
-          break;
-      }
-      switch (v) {
-        case "bottom":
-          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;
-          break;
-        case "bottom-end":
-          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, u = -100, p = 0;
-          break;
-        case "left":
-          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;
-          break;
-        case "top-start":
-          e.position.y = y, e.position.x = g, p = -100, u = 0;
-          break;
-        case "top":
-          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;
-          break;
-        case "right-start":
-          e.position.y = y, e.position.x = l.right, u = 0, p = 0;
-          break;
-        case "right":
-          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;
-          break;
-      }
-    } else
-      switch (v) {
-        case "bottom":
-          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 = s.bottom - a.value.height, e.position.x = s.left;
-          break;
-        case "right-end":
-        case "bottom-end":
-          e.position.y = s.bottom - a.value.height, e.position.x = s.right - a.value.width;
-          break;
-        case "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 = s.top, e.position.x = s.left;
-          break;
-        case "top":
-          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 = s.top, e.position.x = s.right - a.value.width;
-        case "right":
-          e.position.y = s.top + (s.height - a.value.height) / 2, e.position.x = s.right - a.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();
-  });
-  return z(() => {
-    r.value.disconnect();
-  }), {
-    float: e,
-    rect: a,
-    floatObserver: r,
-    setPosition: b
-  };
-};
-function R(o) {
-  const t = window.matchMedia(o), i = f(t.matches);
-  function n(a) {
-    i.value = a.matches;
-  }
-  return w(() => {
-    t.addEventListener("change", n);
-  }), z(() => {
-    t.removeEventListener("change", n);
-  }), i;
-}
-function Y(o) {
-  return {
-    isGreater(t) {
-      return R(`(min-width: ${o[t]})`);
-    },
-    isSmaller(t) {
-      return R(`(max-width: ${o[t]})`);
-    },
-    isInBetween(t, i) {
-      return R(`(min-width: ${o[t]}) and (max-width: ${o[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 i = (n) => {
-    !o.value || n.target === o.value || n.composedPath().includes(o.value) || typeof t == "function" && t();
-  };
-  w(() => {
-    window.addEventListener("click", i);
-  }), C(() => {
-    window.removeEventListener("click", i);
-  });
-}
-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);
-  };
-  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 J = /* @__PURE__ */ A({
-  __name: "FzFloating",
-  props: {
-    isOpen: { type: Boolean, default: !1 },
-    position: { default: "auto" },
-    container: {},
-    contentClass: {},
-    openerClass: {},
-    overrideContentClass: { type: Boolean }
-  },
-  setup(o) {
-    const t = o, i = f(null), n = f(null), a = N(), e = {
-      position: O(() => t.position),
-      element: {
-        domRef: n
-      },
-      container: {
-        domRef: T(t.container || document.body)
-      }
-    };
-    a.opener && (e.opener = {
-      domRef: i
-    });
-    const c = Q(e);
-    $(
-      () => t.position,
-      () => t.isOpen && c.setPosition()
-    ), $(
-      () => 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 = 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,
-        class: "inline-flex"
-      }, [
-        k(r.$slots, "opener", {
-          isOpen: r.isOpen,
-          floating: S(c)
-        })
-      ], 512),
-      k(r.$slots, "opener-end"),
-      q(F("div", {
-        ref_key: "content",
-        ref: n,
-        class: I(d.value)
-      }, [
-        k(r.$slots, "default", {
-          isOpen: r.isOpen,
-          floating: S(c)
-        })
-      ], 2), [
-        [U, r.$slots.default && (!r.$slots.opener || r.$slots.opener && r.isOpen)]
-      ])
-    ]));
-  }
-});
-export {
-  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 +0,0 @@
-(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"})});