@fiscozen/composables 0.1.35 → 0.1.36-beta.1

package/package.json

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

package/src/FzFloating.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs } from 'vue'
+import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs, defineExpose } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
 
@@ -11,8 +11,8 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
 
 const emits = defineEmits(['fzfloating:setPosition'])
 
-const content = ref<HTMLElement | null>(null)
-const opener = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement>()
+const opener = ref<HTMLElement>()
 
 const slots = useSlots()
 
@@ -101,6 +101,10 @@ const contentClass = computed(() => {
 
   return ['bg-core-white fixed p-4', props.contentClass]
 })
+
+defineExpose({
+  setPosition: floating.setPosition
+})
 </script>
 
 <template>
@@ -123,7 +127,7 @@ const contentClass = computed(() => {
       <div
         ref="content"
         v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-        class="fz__floating__content"
+        class="fz__floating__content bg-core-black"
         :class="contentClass"
       >
         <slot :isOpen :floating></slot>

package/src/composables/useFloating.ts

@@ -38,7 +38,7 @@ export const useFloating = (
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
   const actualPosition = ref<FzFloatingPosition>()
 
-  const setPosition = () =>
+  const setPosition = (ignoreCallback: boolean = false) =>
     nextTick(() => {
       actualPosition.value = args.position ? args.position.value : 'auto'
       safeElementDomRef.value = (
@@ -297,9 +297,6 @@ export const useFloating = (
         translateY = 0
       }
 
-      if(float.position.y < 0) float.position.y = 0
-      if(float.position.x < 0) float.position.x = 0
-
       safeElementDomRef.value.style.top = `${float.position.y}px`
       safeElementDomRef.value.style.left = `${float.position.x}px`
       safeElementDomRef.value.style.position = 'fixed'
@@ -307,7 +304,7 @@ export const useFloating = (
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
 
-      if (args.callback?.value) {
+      if (args.callback?.value && !ignoreCallback) {
         args.callback.value(rect, openerRect, containerRect, position, actualPosition)
       }
     })

package/dist/composables.js

@@ -1,212 +0,0 @@
-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 = [
-    {
-      key: "right",
-      space: t
-    },
-    {
-      key: "top",
-      space: o
-    },
-    {
-      key: "bottom",
-      space: f
-    },
-    {
-      key: "left",
-      space: m
-    }
-  ].sort((a, v) => v.space - a.space)[0].key, !p)
-    switch (i) {
-      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");
-        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({
-    position: { x: 0, y: 0 }
-  }), r = {
-    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)
-      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) {
-        case "auto":
-          f = g(
-            l.value,
-            n.value,
-            p.value
-          );
-          break;
-        case "auto-start":
-          f = g(
-            l.value,
-            n.value,
-            p.value,
-            "start"
-          );
-          break;
-        case "auto-end":
-          f = g(
-            l.value,
-            n.value,
-            p.value,
-            "end"
-          );
-          break;
-      }
-      switch (f) {
-        case "bottom":
-          e.position.y = t.bottom, e.position.x = t.left + t.width / 2, a = -50, u = 0;
-          break;
-        case "bottom-start":
-          e.position.y = t.bottom, e.position.x = t.left, a = 0, u = 0;
-          break;
-        case "bottom-end":
-          e.position.y = t.bottom, e.position.x = t.right, a = -100, u = 0;
-          break;
-        case "left-start":
-          e.position.y = t.top, e.position.x = t.left, a = -100, u = 0;
-          break;
-        case "left":
-          e.position.y = t.top + t.height / 2, e.position.x = t.left, u = -50, a = -100;
-          break;
-        case "left-end":
-          e.position.y = t.bottom, e.position.x = t.left, u = -100, a = -100;
-          break;
-        case "top-start":
-          e.position.y = t.top, e.position.x = t.left, u = -100, a = 0;
-          break;
-        case "top":
-          e.position.y = t.top, e.position.x = t.left + t.width / 2, a = -50, u = -100;
-          break;
-        case "top-end":
-          e.position.y = t.top, e.position.x = t.right, a = -100, u = -100;
-          break;
-        case "right-start":
-          e.position.y = t.top, e.position.x = t.right, a = 0, u = 0;
-          break;
-        case "right":
-          e.position.y = t.top + t.height / 2, e.position.x = t.right, u = -50, a = 0;
-          break;
-        case "right-end":
-          e.position.y = t.bottom, e.position.x = t.right, u = -100, a = 0;
-          break;
-      }
-    } else
-      switch (f) {
-        case "bottom":
-          e.position.y = o.bottom - i.value.height, e.position.x = o.left + o.width / 2, a = -50;
-          break;
-        case "left-end":
-        case "bottom-start":
-          e.position.y = o.bottom - i.value.height, e.position.x = o.left;
-          break;
-        case "right-end":
-        case "bottom-end":
-          e.position.y = o.bottom - i.value.height, e.position.x = o.right - i.value.width;
-          break;
-        case "left":
-          e.position.y = o.top + (o.height - i.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 - i.value.width) / 2;
-          break;
-        case "top-end":
-        case "right-start":
-          e.position.y = o.top, e.position.x = o.right - i.value.width;
-        case "right":
-          e.position.y = o.top + (o.height - i.value.height) / 2, e.position.x = o.right - i.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();
-  });
-  return O(() => {
-    h.value.disconnect();
-  }), {
-    float: e,
-    rect: i,
-    floatObserver: h,
-    setPosition: m
-  };
-}, I = /* @__PURE__ */ $({
-  __name: "FzFloating",
-  props: {
-    isOpen: { type: Boolean, default: !1 },
-    position: { default: "auto" },
-    container: {}
-  },
-  setup(s) {
-    const n = s, l = d(null), p = d(null), i = C(), e = {
-      position: P(() => n.position),
-      element: {
-        domRef: p
-      },
-      container: {
-        domRef: S(n.container || document.body)
-      }
-    };
-    i.opener && (e.opener = {
-      domRef: l
-    });
-    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", {
-        ref_key: "opener",
-        ref: l,
-        class: "inline-flex"
-      }, [
-        R(c.$slots, "opener", {
-          isOpen: c.isOpen,
-          floating: x(r)
-        })
-      ], 512),
-      N(k("div", {
-        ref_key: "content",
-        ref: p,
-        class: "bg-core-white absolute p-4"
-      }, [
-        R(c.$slots, "default", {
-          isOpen: c.isOpen,
-          floating: x(r)
-        })
-      ], 512), [
-        [E, !c.$slots.opener || c.$slots.opener && c.isOpen]
-      ])
-    ]));
-  }
-});
-export {
-  I as FzFloating,
-  D as useFloating
-};

package/dist/composables.umd.cjs

@@ -1 +0,0 @@
-(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"})});