@fiscozen/composables 0.1.20-beta.2 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.20-beta.2",
+  "version": "0.1.21",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",

package/src/FzFloating.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, useSlots, watch, toRef, computed } from 'vue'
+import { ref, useSlots, watch, toRef, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
 
@@ -9,18 +9,28 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
   teleport: false
 })
 
+const emits = defineEmits(['fzfloating:setPosition'])
+
 const opener = ref(null)
 const content = ref<HTMLElement | null>(null)
 
 const slots = useSlots()
 
+let scheduledAnimationFrame = false
+
 const useFloatingOpts: FzUseFloatingArgs = {
   position: computed(() => props.position),
   element: {
+    // @ts-ignore
     domRef: content
   },
   container: {
+    // @ts-ignore
     domRef: toRef(props.container || document.body)
+  },
+  useViewport: computed(() => props.useViewport),
+  callback(...args) {
+    emits('fzfloating:setPosition', ...args)
   }
 }
 if (slots.opener) {
@@ -31,22 +41,39 @@ if (slots.opener) {
 
 const floating = useFloating(useFloatingOpts)
 
+const setPositionWhenOpen = () => {
+  if (scheduledAnimationFrame) {
+    return
+  }
+
+  scheduledAnimationFrame = true
+  requestAnimationFrame(() => {
+    props.isOpen && floating.setPosition()
+    scheduledAnimationFrame = false
+  })
+}
+
 watch(
   () => props.position,
-  () => props.isOpen && floating.setPosition()
+  () => setPositionWhenOpen()
 )
 watch(
   () => props.isOpen,
   (newVal) => {
     if (!newVal || !content.value) {
+      window.removeEventListener('scroll', setPositionWhenOpen)
       return
     }
+    window.addEventListener('scroll', setPositionWhenOpen)
     content.value.style.top = '0px'
     content.value.style.left = '0px'
     content.value.style.transform = 'none'
     floating.setPosition()
   }
 )
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', setPositionWhenOpen)
+})
 
 const contentClass = computed(() => {
   if (props.overrideContentClass) {
@@ -68,7 +95,7 @@ const contentClass = computed(() => {
       v-if="!teleport"
       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 fixed z-10 p-4"
       :class="contentClass"
     >
       <slot :isOpen :floating></slot>
@@ -77,7 +104,7 @@ const contentClass = computed(() => {
       <div
         ref="content"
         v-show="$slots.default && (!$slots.opener || ($slots.opener && isOpen))"
-        class="fz__floating__content bg-core-white absolute p-4 z-10"
+        class="fz__floating__content bg-core-white fixed z-10 p-4"
         :class="contentClass"
       >
         <slot :isOpen :floating></slot>

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

@@ -3,107 +3,119 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;
 
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="bg-core-white absolute p-4 z-10">
+  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
     <div>content</div>
   </div>
+  <!--v-if-->
 </div>"
 `;

package/src/composables/index.ts

@@ -4,4 +4,4 @@ export * from './useBreakpoints'
 export * from './useClickOutside'
 export * from './useKeyDown'
 export * from './useKeyUp'
-export * from './useCurrency'
+export * from './useCurrency'

package/src/composables/useClickOutside.ts

@@ -1,9 +1,9 @@
 import { onBeforeUnmount, onMounted, Ref, watch } from 'vue'
 
 function useClickOutside(
-  component: Ref<HTMLElement | undefined>, 
+  component: Ref<HTMLElement | undefined>,
   callback: () => void,
-  elementToListenClicksOn?: Ref<HTMLElement | undefined>,
+  elementToListenClicksOn?: Ref<HTMLElement | undefined>
 ) {
   // fail early if any of the required params is missing
   if (!component) {
@@ -14,7 +14,7 @@ function useClickOutside(
     throw new Error('A callback has to be provided.')
   }
 
-  const listener = (event: MouseEvent) => {
+  const listener = (event: Event) => {
     if (
       !component.value ||
       event.target === component.value ||
@@ -28,12 +28,12 @@ function useClickOutside(
   }
 
   if (elementToListenClicksOn) {
-    watch(elementToListenClicksOn, (newVal: HTMLElement | undefined, oldVal: HTMLElement | undefined) => {
+    watch(elementToListenClicksOn, (newVal: Element | undefined, oldVal: Element | undefined) => {
       if (oldVal) {
         oldVal.removeEventListener('click', listener)
       }
       newVal?.addEventListener('click', listener)
-    });
+    })
   }
 
   onMounted(() => {
@@ -45,7 +45,7 @@ function useClickOutside(
   onBeforeUnmount(() => {
     if (elementToListenClicksOn) {
       elementToListenClicksOn.value!.removeEventListener('click', listener)
-      return;
+      return
     }
     document.removeEventListener('click', listener)
   })

package/src/composables/useCurrency.ts

@@ -1,103 +1,90 @@
-import {Ref, watch, getCurrentInstance, computed, ref, nextTick} from 'vue' 
+import { Ref, watch, getCurrentInstance, computed, ref, onMounted } from 'vue'
 
 export const useCurrency = () => {
-    const inputRef: Ref<HTMLInputElement|null> = ref(null)
-    const vm = getCurrentInstance()
+  const inputRef: Ref<HTMLInputElement | null> = ref(null)
+  const vm = getCurrentInstance()
 
-    const computedModel = computed<number|string|undefined>(() => vm?.props.amount as unknown as number|undefined)
-    const internalVal = ref<number|string>()
+  const modelValue = computed<number | undefined>(
+    () => vm?.props.modelValue as unknown as number | undefined
+  )
 
-    const format = (input: number|string) => {
-        return input.toLocaleString('it-IT', {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-            useGrouping: false
-        })
+  const format = (input: number | null) => {
+    if (input === null) {
+      return '';
     }
+    return input.toLocaleString('it-IT', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    })
+  }
 
-    const parse = (text: string) => {
-        // strip currency, handle edge cases...
-        return parseFloat(text.replace(/,/g,"."))
-    }
+  const parse = (text: string) => {
+    // strip currency, handle edge cases...
+    return parseFloat(text)
+  }
 
-    const emitAmount = (val: number) => {
-        if (Number.isNaN(val)) {
-            return;
-        }
-        if (vm) {
-            internalVal.value = val
-            vm.emit('update:amount', typeof computedModel.value === 'number' ? val : val.toString()) 
-        }
+  const setValue = (val: number | null) => {
+    if (Number.isNaN(val)) {
+      return
     }
 
-    const setValue = (val: string) => {
-        // nextTick doesn't seem to work
-        setTimeout(() => {
-            if (!inputRef.value) {
-                return
-            }
-            inputRef.value.value = val;
-        }, 0)
-    }
+    vm && vm.emit('update:modelValue', val)
+  }
 
-    const onInput = (el: HTMLInputElement) => (e: Event) => {
-        if (!inputRef.value || !e.target) {
-            return
-        }
-        let {value} = el;
-        value = value.replace(/[^0-9,.]/g, '')
-        setValue(value)
-        const number = parse(value)
-        emitAmount(Number.isNaN(number) ? 0 : number)
+  const onInput = (el: HTMLInputElement) => (e: Event) => {
+    if (!inputRef.value || !e.target) {
+      return
     }
+    let { value } = el
+    value = value.replace(/[^0-9,.]/g, '')
+    inputRef.value.value = value
+    const numberValue = (vm?.props.nullOnEmpty && value === '') ? null : parse(value)
+    setValue(Number.isNaN(numberValue) ? 0 : numberValue)
+  }
 
-    const onBlur = (e: FocusEvent) => {
-        if (!inputRef.value || !e.target) {
-            return
-        }
-        let number = parse((e.target as HTMLInputElement).value)
-        if (Number.isNaN(number)) {
-            number = 0;
-        } 
-        const text = format(number)
-        setValue(text)
-        emitAmount(parse(text))
+  const onBlur = (e: FocusEvent) => {
+    if (!inputRef.value || !e.target) {
+      return
     }
+    let rawValue = (e.target as HTMLInputElement).value.replace(/,/g, '.');
+    let number: number | null;
 
-    watch(inputRef, (newVal, oldVal) => {
-        if(!newVal) {
-            return
-        }
+    if (rawValue === '' && vm?.props.nullOnEmpty) {
+      number = null
+    }
+    else {
+      number = parse(rawValue)
+      if (Number.isNaN(number)) {
+        number = 0
+      }
+    }
+    const text = format(number)
 
-        if (oldVal) {
-            oldVal?.removeEventListener('input', onInput(newVal))
-            oldVal?.removeEventListener('blur', onBlur)
-        }
-        newVal.addEventListener('input', onInput(newVal))
-        newVal.addEventListener('blur', onBlur)
-    })
+    inputRef.value.value = text
+    setValue(number)
+  }
 
-    watch(computedModel, (newVal) => {
-        nextTick(() => {
-            if (!inputRef.value || !newVal) {
-                return
-            }
-            // we need to format here only if someone externally set the
-            // value of the amount model
-            if (internalVal.value !== newVal) {
-                const formatted = format(newVal)
-                inputRef.value.value = formatted
-                internalVal.value = newVal
-            }
-        })
-    })
+  watch(inputRef, (newVal, oldVal) => {
+    if (!newVal) {
+      return
+    }
 
+    if (oldVal) {
+      oldVal?.removeEventListener('input', onInput(newVal))
+      oldVal?.removeEventListener('blur', onBlur)
+    }
+    newVal.addEventListener('input', onInput(newVal))
+    newVal.addEventListener('blur', onBlur)
 
-    return {
-        inputRef,
-        parse,
-        format,
-        emitAmount,
-        setValue
+    if (modelValue.value) {
+      newVal.value = format(modelValue.value)
     }
-}
+  })
+
+  return {
+    inputRef,
+    parse,
+    format,
+    setValue
+  }
+}

package/src/composables/useFloating.ts

@@ -1,19 +1,25 @@
 import { FzFloatingPosition, FzRect, FzUseFloatingArgs } from '../types'
-import { ref, reactive, onUnmounted, Ref, nextTick, computed } from 'vue'
+import { ref, reactive, onUnmounted, Ref, nextTick } from 'vue'
 import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
 
 export const useFloating = (
   args: FzUseFloatingArgs
 ): {
   float: FzRect
-  rect: Ref<DOMRect | null>
-  floatObserver: Ref<IntersectionObserver>
+  rect: Ref<DOMRect | undefined>
   setPosition: () => Promise<void>
+  position: Ref<FzFloatingPosition>
+  actualPosition?: Ref<FzFloatingPosition | undefined>
+  openerRect: Ref<DOMRect | undefined>
+  containerRect: Ref<DOMRect | undefined>
 } => {
   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 openerRect = ref<DOMRect | undefined>()
+  const containerRect = ref<DOMRect | undefined>()
+  const position = ref<FzFloatingPosition>('auto')
+  const rect = ref<DOMRect | undefined>()
   const float = reactive<FzRect>({
     position: { x: 0, y: 0 }
   })
@@ -30,20 +36,24 @@ export const useFloating = (
   ) => {}
 
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
+  const actualPosition = ref<FzFloatingPosition>()
 
   const setPosition = () =>
     nextTick(() => {
-      safeElementDomRef.value =
+      actualPosition.value = args.position ? args.position.value : 'auto'
+      safeElementDomRef.value = (
         typeof args.element.domRef.value === 'string'
           ? document.querySelector(args.element.domRef.value)
           : args.element.domRef.value
+      ) as HTMLElement
       if (!args.container) {
         safeContainerDomRef.value = document.body
       } else {
-        safeContainerDomRef.value =
+        safeContainerDomRef.value = (
           typeof args.container.domRef.value === 'string'
             ? document.querySelector(args.container.domRef.value)
             : args.container.domRef.value
+        ) as HTMLElement
         safeContainerDomRef.value ??= document.body
       }
 
@@ -52,78 +62,104 @@ export const useFloating = (
       }
 
       if (args.opener) {
-        safeOpenerDomRef.value =
+        safeOpenerDomRef.value = (
           typeof args.opener.domRef.value === 'string'
             ? document.querySelector(args.opener.domRef.value)
             : args.opener.domRef.value
+        ) as HTMLElement
       }
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
-      const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
-      const containerRect = safeContainerDomRef.value.getBoundingClientRect()
+      openerRect.value = safeOpenerDomRef.value?.getBoundingClientRect()
+      containerRect.value = safeContainerDomRef.value.getBoundingClientRect()
 
-      const elStyle = window.getComputedStyle(safeElementDomRef.value)
+      const elStyle = window.getComputedStyle(safeElementDomRef.value as HTMLElement)
 
       // 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'
+      floatObserver.value.observe(safeElementDomRef.value as HTMLElement)
+      floatObserver.value.observe(safeContainerDomRef.value as HTMLElement)
 
       let translateY = 0
       let translateX = 0
 
-      if (args.opener && safeOpenerDomRef.value && openerRect) {
+      if (args.opener && safeOpenerDomRef.value && openerRect && openerRect.value) {
         const leftWithoutXMargin =
-          openerRect.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
-        const leftWithoutLeftMargin = openerRect.left - parseFloat(elStyle.marginLeft)
+          openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
+        const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
         const topWithoutYMargin =
-          openerRect.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
-        const topWithoutTopMargin = openerRect.top - parseFloat(elStyle.marginTop)
+          openerRect.value.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
+        const topWithoutTopMargin = openerRect.value.top - parseFloat(elStyle.marginTop)
 
-        switch (position) {
+        switch (actualPosition.value) {
           case 'auto':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement
+            )
+            break
+          case 'auto-vertical':
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              undefined,
+              true
             )
             break
           case 'auto-start':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value,
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
               'start'
             )
             break
+          case 'auto-vertical-start':
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              'start',
+              true
+            )
+            break
           case 'auto-end':
-            position = getHighestAvailableSpacePos(
-              safeContainerDomRef.value,
-              safeElementDomRef.value,
-              safeOpenerDomRef.value,
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
               'end'
             )
             break
+          case 'auto-vertical-end':
+            actualPosition.value = getHighestAvailableSpacePos(
+              args.useViewport ? null : (safeContainerDomRef.value as HTMLElement),
+              safeElementDomRef.value as HTMLElement,
+              safeOpenerDomRef.value as HTMLElement,
+              'end',
+              true
+            )
+            break
           default:
             break
         }
-        switch (position) {
+        switch (actualPosition.value) {
           case 'bottom':
-            float.position.y = openerRect.bottom
-            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
+            float.position.y = openerRect.value.bottom
+            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
             translateX = -50
             translateY = 0
             break
           case 'bottom-start':
-            float.position.y = openerRect.bottom
+            float.position.y = openerRect.value.bottom
             float.position.x = leftWithoutXMargin
             translateX = 0
             translateY = 0
             break
           case 'bottom-end':
-            float.position.y = openerRect.bottom
-            float.position.x = openerRect.right
+            float.position.y = openerRect.value.bottom
+            float.position.x = openerRect.value.right
             translateX = -100
             translateY = 0
             break
@@ -134,13 +170,13 @@ export const useFloating = (
             translateY = 0
             break
           case 'left':
-            float.position.y = topWithoutTopMargin + openerRect.height / 2
+            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
             float.position.x = leftWithoutXMargin
             translateY = -50
             translateX = -100
             break
           case 'left-end':
-            float.position.y = openerRect.bottom
+            float.position.y = openerRect.value.bottom
             float.position.x = leftWithoutXMargin
             translateY = -100
             translateX = -100
@@ -153,31 +189,31 @@ export const useFloating = (
             break
           case 'top':
             float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
+            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
             translateX = -50
             translateY = -100
             break
           case 'top-end':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.right
+            float.position.x = openerRect.value.right
             translateX = -100
             translateY = -100
             break
           case 'right-start':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.right
+            float.position.x = openerRect.value.right
             translateX = 0
             translateY = 0
             break
           case 'right':
-            float.position.y = topWithoutTopMargin + openerRect.height / 2
-            float.position.x = openerRect.right
+            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
+            float.position.x = openerRect.value.right
             translateY = -50
             translateX = 0
             break
           case 'right-end':
-            float.position.y = openerRect.bottom
-            float.position.x = openerRect.right
+            float.position.y = openerRect.value.bottom
+            float.position.x = openerRect.value.right
             translateY = -100
             translateX = 0
             break
@@ -185,42 +221,45 @@ export const useFloating = (
             break
         }
       } else {
-        switch (position) {
+        switch (actualPosition.value) {
           case 'bottom':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.left + containerRect.width / 2
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.left + containerRect.value.width / 2
             translateX = -50
             break
           case 'left-end':
           case 'bottom-start':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.left
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.left
             break
           case 'right-end':
           case 'bottom-end':
-            float.position.y = containerRect.bottom - rect.value.height
-            float.position.x = containerRect.right - rect.value.width
+            float.position.y = containerRect.value.bottom - rect.value.height
+            float.position.x = containerRect.value.right - rect.value.width
             break
           case 'left':
-            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
-            float.position.x = containerRect.left
+            float.position.y =
+              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+            float.position.x = containerRect.value.left
             break
           case 'top-start':
           case 'left-start':
-            float.position.y = containerRect.top
-            float.position.x = containerRect.left
+            float.position.y = containerRect.value.top
+            float.position.x = containerRect.value.left
             break
           case 'top':
-            float.position.y = containerRect.top
-            float.position.x = containerRect.left + (containerRect.width - rect.value.width) / 2
+            float.position.y = containerRect.value.top
+            float.position.x =
+              containerRect.value.left + (containerRect.value.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
+            float.position.y = containerRect.value.top
+            float.position.x = containerRect.value.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
+            float.position.y =
+              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
+            float.position.x = containerRect.value.right - rect.value.width
             break
           default:
             break
@@ -232,32 +271,40 @@ export const useFloating = (
       float.position.x = realPos.x
       float.position.y = realPos.y
 
-      if (realPos.x < containerRect.left) {
-        float.position.x = containerRect.left
+      if (realPos.x < containerRect.value.left) {
+        float.position.x = containerRect.value.left
         translateX = 0
       }
 
-      if (realPos.x + rect.value.width > containerRect.right) {
-        float.position.x = containerRect.right - rect.value.width
+      if (realPos.x + rect.value.width > containerRect.value.right) {
+        const fixVal = containerRect.value.right - rect.value.width
+        if (fixVal > 0) {
+          float.position.x = fixVal
+        }
         translateX = 0
       }
 
-      if (realPos.y < containerRect.top) {
-        float.position.y = containerRect.top
+      if (realPos.y < containerRect.value.top) {
+        float.position.y = containerRect.value.top
         translateY = 0
       }
 
-      if (realPos.y + rect.value.height > containerRect.bottom) {
-        float.position.y = containerRect.bottom - rect.value.height
+      if (realPos.y + rect.value.height > containerRect.value.bottom) {
+        const fixVal = containerRect.value.bottom - rect.value.height
+        if (fixVal > 0) {
+          float.position.y = fixVal
+        }
         translateY = 0
       }
 
       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()
+
+      args.callback && args.callback(rect, openerRect, containerRect, position, actualPosition)
     })
 
   onUnmounted(() => {
@@ -267,7 +314,10 @@ export const useFloating = (
   return {
     float,
     rect,
-    floatObserver,
-    setPosition
+    setPosition,
+    position,
+    actualPosition,
+    openerRect,
+    containerRect
   }
 }

package/src/composables/useKeyDown.ts

@@ -1,6 +1,9 @@
 import { onBeforeUnmount, onMounted, Ref } from 'vue'
 
-function useKeyDown(component: Ref<HTMLElement | undefined>, callback: (event: KeyboardEvent) => void) {
+function useKeyDown(
+  component: Ref<HTMLElement | undefined>,
+  callback: (event: KeyboardEvent) => void
+) {
   // fail early if any of the required params is missing
   if (!component) {
     throw new Error('A target component has to be provided.')

package/src/composables/useKeyUp.ts

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

package/src/types.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue'
 
-type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto'
+type PositionPrimary = 'bottom' | 'left' | 'top' | 'right' | 'auto' | 'auto-vertical'
 type PositionSecondary = 'start' | 'end'
 export type FzFloatingPosition = PositionPrimary | `${PositionPrimary}-${PositionSecondary}`
 
@@ -20,6 +20,7 @@ export interface FzFloatingProps {
     | Array<string | Record<string, boolean | undefined>>
   overrideContentClass?: boolean
   teleport?: boolean
+  useViewport?: boolean
 }
 
 export interface FzAbsolutePosition {
@@ -40,4 +41,12 @@ export interface FzUseFloatingArgs {
   container?: FzFloatElement
   opener?: FzFloatElement
   position?: Ref<FzFloatingPosition>
+  useViewport?: Ref<boolean>
+  callback?: (
+    rect: Ref<DOMRect | undefined>,
+    openerRect: Ref<DOMRect | undefined>,
+    containerRect: Ref<DOMRect | undefined>,
+    position: Ref<FzFloatingPosition>,
+    actualPosition: Ref<FzFloatingPosition | undefined>
+  ) => void
 }

package/src/utils/index.ts

@@ -5,18 +5,23 @@ interface PositionListItem {
   key: MainPosition
   space: number
 }
-
+const windowDOMrect = new DOMRect(0, 0, window.innerWidth, window.innerHeight)
 export const getHighestAvailableSpacePos = (
-  container: HTMLElement,
+  container: HTMLElement | null,
   el: HTMLElement,
   opener: HTMLElement,
-  justify?: 'start' | 'end'
+  justify?: 'start' | 'end',
+  verticalOnly?: boolean
 ): FzFloatingPosition => {
-  let mainPosition: MainPosition = 'right'
+  let mainPosition: MainPosition = verticalOnly ? 'bottom' : 'right'
 
-  let positionRes: FzFloatingPosition = 'right-start'
+  let positionRes: FzFloatingPosition = verticalOnly ? 'bottom-start' : 'right-start'
 
-  const containerRect = container.getBoundingClientRect()
+  windowDOMrect.width = window.innerWidth
+  windowDOMrect.height = window.innerHeight
+  windowDOMrect.x = 0
+  windowDOMrect.y = 0
+  const containerRect = container ? container.getBoundingClientRect() : windowDOMrect
   const elRect = el.getBoundingClientRect()
   const openerRect = opener.getBoundingClientRect()
 
@@ -29,7 +34,7 @@ export const getHighestAvailableSpacePos = (
   const spaceBottomNormalized =
     (containerRect.bottom - openerRect.bottom - elRect.height) / containerRect.height
 
-  const positionList = [
+  let positionList = [
     {
       key: 'right',
       space: spaceRightNormalized
@@ -48,6 +53,10 @@ export const getHighestAvailableSpacePos = (
     } as PositionListItem
   ].sort((a, b) => b.space - a.space)
 
+  if (verticalOnly) {
+    positionList = positionList.filter((pos) => pos.key === 'top' || pos.key === 'bottom')
+  }
+
   mainPosition = positionList[0].key
 
   if (!justify) {