@fiscozen/composables 0.1.0

package/.eslintignore

@@ -0,0 +1 @@
+dist

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': ['@fiscozen/eslint-config', 'plugin:storybook/recommended'],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ]
+}

package/.prettierrc.js

@@ -0,0 +1,6 @@
+import fiscozenPrettierConfig from '@fiscozen/prettier-config';
+
+export default {
+    ...fiscozenPrettierConfig
+    // place overrides here
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Fiscozen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @fiscozen/composables
+
+## useFloating and FzFloating
+This composable holds logic that can be added to a component in order to be positioned correctly as a floating window.
+The default "component wrapper" of the composable is `FzFloating`.

package/dist/composables.js

@@ -0,0 +1,212 @@
+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

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

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fiscozen/composables",
+  "version": "0.1.0",
+  "description": "Design System utility composables",
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Riccardo Agnoletto",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "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"
+  },
+  "license": "ISC",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vite build"
+  }
+}

package/src/FzFloating.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ref, useSlots, watch, toRef, computed } from 'vue'
+import { useFloating } from './composables'
+import { FzFloatingPosition, FzFloatingProps, FzUseFloatingArgs } from './types'
+
+const props = withDefaults(defineProps<FzFloatingProps>(), {
+  position: 'auto',
+  isOpen: false
+})
+
+const opener = ref(null)
+const content = ref(null)
+
+const slots = useSlots()
+
+const useFloatingOpts: FzUseFloatingArgs = {
+  position: computed(() => props.position),
+  element: {
+    domRef: content
+  },
+  container: {
+    domRef: toRef(props.container || document.body)
+  }
+}
+if (slots.opener) {
+  useFloatingOpts.opener = {
+    domRef: opener
+  }
+}
+
+const floating = useFloating(useFloatingOpts)
+
+watch(
+  () => props.position,
+  () => props.isOpen && floating.setPosition()
+)
+watch(
+  () => props.isOpen,
+  (newVal) => newVal && floating.setPosition()
+)
+</script>
+
+<template>
+  <div>
+    <div ref="opener" class="inline-flex">
+      <slot name="opener" :isOpen :floating></slot>
+    </div>
+    <div
+      ref="content"
+      v-show="!$slots.opener || ($slots.opener && isOpen)"
+      class="bg-core-white absolute p-4"
+    >
+      <slot :isOpen :floating></slot>
+    </div>
+  </div>
+</template>
+
+<style></style>

package/src/__tests__/FzFloating.spec.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import FzFloating from '../FzFloating.vue'
+import { FzFloatingPosition } from '../types'
+
+const positions: FzFloatingPosition[] = [
+  'top',
+  'top-start',
+  'top-end',
+  'left',
+  'left-start',
+  'left-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'right',
+  'right-start',
+  'right-end'
+]
+beforeEach(() => {
+  const mockIntersectionObserver = vi.fn()
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null
+  })
+  window.IntersectionObserver = mockIntersectionObserver
+})
+describe('FzFloating', () => {
+  positions.forEach((pos) => {
+    it('should match snapshot', async () => {
+      const wrapper = mount(FzFloating, {
+        props: {
+          position: pos,
+          isOpen: true
+        },
+        slots: {
+          opener: '<button @click="params.floating.setPosition()">opener</button>',
+          default: '<div>content</div>'
+        }
+      })
+
+      wrapper.find('button').trigger('click')
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})

package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap

@@ -0,0 +1,109 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzFloating > should match snapshot 1`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pb-4" style="top: 0px; left: 0px; transform: translateY(-100%) translateX(-50%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 2`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pb-4" style="top: 0px; left: 0px; transform: translateY(-100%) translateX(0%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 3`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pb-4" style="top: 0px; left: 0px; transform: translateY(-100%) translateX(-100%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 4`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pr-4" style="top: 0px; left: 0px; transform: translateY(-50%) translateX(-100%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 5`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pr-4" style="top: 0px; left: 0px; transform: translateY(0%) translateX(-100%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 6`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pr-4" style="top: 0px; left: 0px; transform: translateY(-100%) translateX(-100%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 7`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pt-4" style="top: 0px; left: 0px; transform: translateY(0%) translateX(-50%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 8`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pt-4" style="top: 0px; left: 0px; transform: translateY(0%) translateX(0%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 9`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pt-4" style="top: 0px; left: 0px; transform: translateY(0%) translateX(-100%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 10`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pl-4" style="top: 0px; left: 0px; transform: translateY(-50%) translateX(0%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 11`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pl-4" style="top: 0px; left: 0px; transform: translateY(0%) translateX(0%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;
+
+exports[`FzFloating > should match snapshot 12`] = `
+"<div>
+  <div class="inline-flex"><button>opener</button></div>
+  <div class="bg-core-white pl-4" style="top: 0px; left: 0px; transform: translateY(-100%) translateX(0%); position: absolute;">
+    <div>content</div>
+  </div>
+</div>"
+`;

package/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './useFloating'

package/src/composables/useFloating.ts

@@ -0,0 +1,260 @@
+import { FzFloatingPosition, FzRect, FzUseFloatingArgs } from '../types'
+import { ref, reactive, onUnmounted, Ref, nextTick, computed } from 'vue'
+import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
+
+export const useFloating = (
+  args: FzUseFloatingArgs
+): {
+  float: FzRect;
+  rect: Ref<DOMRect | null>;
+  floatObserver: Ref<IntersectionObserver>;
+  setPosition: () => Promise<void>;
+} => {
+  const safeElementDomRef = ref<HTMLElement | null>(null)
+  const safeContainerDomRef = ref<HTMLElement | null>(null)
+  const safeOpenerDomRef = ref<HTMLElement | null>(null)
+  const rect = ref<DOMRect | null>(null)
+  const float = reactive<FzRect>({
+    position: { x: 0, y: 0 }
+  })
+  const options: IntersectionObserverInit = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 1.0,
+    ...args.element.intersectionOptions
+  }
+
+  const handleIntersect = (
+    entries: IntersectionObserverEntry[],
+    observer: IntersectionObserver
+  ) => {}
+
+  const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
+
+  const setPosition = () => nextTick(() => {
+    safeElementDomRef.value =
+      typeof args.element.domRef.value === 'string'
+        ? document.querySelector(args.element.domRef.value)
+        : args.element.domRef.value
+    if (!args.container) {
+      safeContainerDomRef.value = document.body
+    } else {
+      safeContainerDomRef.value =
+        typeof args.container.domRef.value === 'string'
+          ? document.querySelector(args.container.domRef.value)
+          : args.container.domRef.value
+      safeContainerDomRef.value ??= document.body
+    }
+
+    if (!safeElementDomRef.value) {
+      throw new Error('missing reference element for floating behavior')
+    }
+
+    if (args.opener) {
+      safeOpenerDomRef.value =
+        typeof args.opener.domRef.value === 'string'
+          ? document.querySelector(args.opener.domRef.value)
+          : args.opener.domRef.value
+    }
+
+    rect.value = safeElementDomRef.value.getBoundingClientRect()
+    const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
+    const containerRect = safeContainerDomRef.value.getBoundingClientRect()
+
+    // multiple observer calls on same target do not cause multiple registrations
+    floatObserver.value.observe(safeElementDomRef.value)
+    floatObserver.value.observe(safeContainerDomRef.value)
+
+    let position: FzFloatingPosition = args.position ? args.position.value : 'auto'
+
+    let translateY = 0
+    let translateX = 0
+
+    if (args.opener && safeOpenerDomRef.value && openerRect) {
+      switch (position) {
+        case 'auto':
+          position = getHighestAvailableSpacePos(
+            safeContainerDomRef.value,
+            safeElementDomRef.value,
+            safeOpenerDomRef.value
+          )
+          break
+        case 'auto-start':
+          position = getHighestAvailableSpacePos(
+            safeContainerDomRef.value,
+            safeElementDomRef.value,
+            safeOpenerDomRef.value,
+            'start'
+          )
+          break
+        case 'auto-end':
+          position = getHighestAvailableSpacePos(
+            safeContainerDomRef.value,
+            safeElementDomRef.value,
+            safeOpenerDomRef.value,
+            'end'
+          )
+          break
+        default:
+          break
+      }
+      switch (position) {
+        case 'bottom':
+          float.position.y = openerRect.bottom
+          float.position.x = openerRect.left + openerRect.width / 2
+          translateX = -50
+          translateY = 0
+          break
+        case 'bottom-start':
+          float.position.y = openerRect.bottom
+          float.position.x = openerRect.left
+          translateX = 0
+          translateY = 0
+          break
+        case 'bottom-end':
+          float.position.y = openerRect.bottom
+          float.position.x = openerRect.right
+          translateX = -100
+          translateY = 0
+          break
+        case 'left-start':
+          float.position.y = openerRect.top
+          float.position.x = openerRect.left
+          translateX = -100
+          translateY = 0
+          break
+        case 'left':
+          float.position.y = openerRect.top + openerRect.height / 2
+          float.position.x = openerRect.left
+          translateY = -50
+          translateX = -100
+          break
+        case 'left-end':
+          float.position.y = openerRect.bottom
+          float.position.x = openerRect.left
+          translateY = -100
+          translateX = -100
+          break
+        case 'top-start':
+          float.position.y = openerRect.top
+          float.position.x = openerRect.left
+          translateY = -100
+          translateX = 0
+          break
+        case 'top':
+          float.position.y = openerRect.top
+          float.position.x = openerRect.left + openerRect.width / 2
+          translateX = -50
+          translateY = -100
+          break
+        case 'top-end':
+          float.position.y = openerRect.top
+          float.position.x = openerRect.right
+          translateX = -100
+          translateY = -100
+          break
+        case 'right-start':
+          float.position.y = openerRect.top
+          float.position.x = openerRect.right
+          translateX = 0
+          translateY = 0
+          break
+        case 'right':
+          float.position.y = openerRect.top + openerRect.height / 2
+          float.position.x = openerRect.right
+          translateY = -50
+          translateX = 0
+          break
+        case 'right-end':
+          float.position.y = openerRect.bottom
+          float.position.x = openerRect.right
+          translateY = -100
+          translateX = 0
+          break
+        default:
+          break
+      }
+    } else {
+      switch (position) {
+        case 'bottom':
+          float.position.y = containerRect.bottom - rect.value.height
+          float.position.x = containerRect.left + containerRect.width / 2
+          translateX = -50
+          break
+        case 'left-end':
+        case 'bottom-start':
+          float.position.y = containerRect.bottom - rect.value.height
+          float.position.x = containerRect.left
+          break
+        case 'right-end':
+        case 'bottom-end':
+          float.position.y = containerRect.bottom - rect.value.height
+          float.position.x = containerRect.right - rect.value.width
+          break
+        case 'left':
+          float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
+          float.position.x = containerRect.left
+          break
+        case 'top-start':
+        case 'left-start':
+          float.position.y = containerRect.top
+          float.position.x = containerRect.left
+          break
+        case 'top':
+          float.position.y = containerRect.top
+          float.position.x = containerRect.left + (containerRect.width - rect.value.width) / 2
+          break
+        case 'top-end':
+        case 'right-start':
+          float.position.y = containerRect.top
+          float.position.x = containerRect.right - rect.value.width
+        case 'right':
+          float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
+          float.position.x = containerRect.right - rect.value.width
+          break
+        default:
+          break
+      }
+    }
+
+    const realPos = calcRealPos(rect.value, float.position, translateX, translateY)
+
+    if (realPos.x < containerRect.left) {
+      float.position.x = containerRect.left;
+      translateX = 0
+    }
+
+    if ((realPos.x + rect.value.width) > containerRect.right) {
+      float.position.x = containerRect.right - rect.value.width;
+      translateX = 0
+    }
+    
+    if (realPos.y < containerRect.top) {
+      float.position.y = containerRect.top;
+      translateY = 0
+    }
+
+    if ((realPos.y + rect.value.height) > containerRect.bottom) {
+      float.position.y = containerRect.bottom - rect.value.height;
+      translateY = 0
+    }
+
+    safeElementDomRef.value.style.top = `${float.position.y}px`
+    safeElementDomRef.value.style.left = `${float.position.x}px`
+    safeElementDomRef.value.style.transform = `translateY(${translateY}%) translateX(${translateX}%)`
+    safeElementDomRef.value.style.position = 'absolute'
+
+    rect.value = safeElementDomRef.value.getBoundingClientRect()
+  })
+
+  onUnmounted(() => {
+    floatObserver.value.disconnect()
+  })
+
+  return {
+    float,
+    rect,
+    floatObserver,
+    setPosition
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as FzFloating } from './FzFloating.vue'
+
+export * from './composables'
+export * from './types'

package/src/types.ts

@@ -0,0 +1,31 @@
+import { Ref } from 'vue'
+
+type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto'
+type PositionSecondary = 'start' | 'end'
+export type FzFloatingPosition = PositionPrimary | `${PositionPrimary}-${PositionSecondary}`
+
+export interface FzFloatingProps {
+  isOpen: boolean
+  position?: FzFloatingPosition
+  container?: string | null
+}
+
+export interface FzAbsolutePosition {
+  x: number
+  y: number
+}
+
+export interface FzRect {
+  position: FzAbsolutePosition
+}
+
+export interface FzFloatElement {
+  domRef: Ref<string | HTMLElement | null>
+  intersectionOptions?: IntersectionObserverInit
+}
+export interface FzUseFloatingArgs {
+  element: FzFloatElement
+  container?: FzFloatElement
+  opener?: FzFloatElement
+  position?: Ref<FzFloatingPosition>
+}

package/src/utils/index.ts

@@ -0,0 +1,76 @@
+import { FzAbsolutePosition, FzFloatingPosition } from '../types'
+
+type MainPosition = 'right' | 'left' | 'top' | 'bottom'
+interface PositionListItem {
+  key: MainPosition
+  space: number
+}
+
+export const getHighestAvailableSpacePos = (
+  container: HTMLElement,
+  el: HTMLElement,
+  opener: HTMLElement,
+  justify?: 'start' | 'end'
+): FzFloatingPosition => {
+  let mainPosition: MainPosition = 'right'
+
+  let positionRes: FzFloatingPosition = 'right-start'
+
+  const containerRect = container.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  const openerRect = opener.getBoundingClientRect()
+
+  const spaceLeftNormalized = (openerRect.left - containerRect.left - elRect.width) / containerRect.width
+  const spaceRightNormalized = (containerRect.right - openerRect.right - elRect.width) / containerRect.width
+  const spaceTopNormalized = (openerRect.top - containerRect.top - elRect.height) / containerRect.height
+  const spaceBottomNormalized = (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
+
+  const positionList = [
+    {
+      key: 'right',
+      space: spaceRightNormalized
+    } as PositionListItem,
+    {
+      key: 'top',
+      space: spaceTopNormalized
+    } as PositionListItem,
+    {
+      key: 'bottom',
+      space: spaceBottomNormalized
+    } as PositionListItem,
+    {
+      key: 'left',
+      space: spaceLeftNormalized
+    } as PositionListItem
+  ].sort((a, b) => b.space - a.space)
+
+  mainPosition = positionList[0].key
+
+  if (!justify) {
+    switch (mainPosition) {
+      case 'right':
+      case 'left':
+        const centerDiff = (elRect.height - openerRect.height) / 2
+        if (containerRect.top > openerRect.top - centerDiff) {
+          justify = 'end'
+        }
+        if (containerRect.bottom < openerRect.top - centerDiff) {
+          justify = 'start'
+        }
+        break
+      default:
+        break
+    }
+  }
+
+  positionRes = justify ? `${mainPosition}-${justify}` : mainPosition
+  return positionRes
+}
+
+
+export const calcRealPos = (rect: DOMRect, pos: FzAbsolutePosition, translateX: number, translateY: number): FzAbsolutePosition => {
+  return {
+    x: pos.x + (rect.width * translateX)/100,
+    y: pos.y + (rect.height * translateY)/100,
+  }
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@fiscozen/tsconfig"
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path';
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, './src/index.ts'),
+      name: 'FzComposables',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      coverage: {
+        provider: 'v8',
+        include: ['**/src/**'],
+        exclude: ['**/index.ts']
+      }
+    }
+  })
+)