@fiscozen/composables 0.1.18 → 0.1.20-autovertical.1

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,9 +41,21 @@ 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,
@@ -47,6 +69,12 @@ watch(
     floating.setPosition()
   }
 )
+onMounted(() => {
+  window.addEventListener('scroll', setPositionWhenOpen);
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', setPositionWhenOpen);
+})
 
 const contentClass = computed(() => {
   if (props.overrideContentClass) {
@@ -77,7 +105,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 p-4 z-10"
         :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,15 @@ function useClickOutside(
   }
 
   if (elementToListenClicksOn) {
-    watch(elementToListenClicksOn, (newVal: HTMLElement | undefined, oldVal: HTMLElement | undefined) => {
-      if (oldVal) {
-        oldVal.removeEventListener('click', listener)
+    watch(
+      elementToListenClicksOn,
+      (newVal: Element | undefined, oldVal: Element | undefined) => {
+        if (oldVal) {
+          oldVal.removeEventListener('click', listener)
+        }
+        newVal?.addEventListener('click', listener)
       }
-      newVal?.addEventListener('click', listener)
-    });
+    )
   }
 
   onMounted(() => {
@@ -45,7 +48,7 @@ function useClickOutside(
   onBeforeUnmount(() => {
     if (elementToListenClicksOn) {
       elementToListenClicksOn.value!.removeEventListener('click', listener)
-      return;
+      return
     }
     document.removeEventListener('click', listener)
   })

package/src/composables/useCurrency.ts

@@ -1,10 +1,10 @@
-import {Ref, watch, getCurrentInstance, computed, ref} 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 modelValue = computed(() => vm?.props.modelValue)
+    const modelValue = computed<number|undefined>(() => vm?.props.modelValue as unknown as number|undefined)
 
     const format = (input: number) => {
         return input.toLocaleString('it-IT', {
@@ -63,9 +63,14 @@ export const useCurrency = () => {
         newVal.addEventListener('input', onInput(newVal))
         newVal.addEventListener('blur', onBlur)
 
+        if (modelValue.value) {
+            newVal.value = format(modelValue.value)
+        }
+
     })
 
 
+
     return {
         inputRef,
         parse,

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,23 @@ export const useFloating = (
   ) => {}
 
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
+  const actualPosition = ref<FzFloatingPosition>();
+
 
   const setPosition = () =>
     nextTick(() => {
+      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
+        (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 =
-          typeof args.container.domRef.value === 'string'
+          (typeof args.container.domRef.value === 'string'
             ? document.querySelector(args.container.domRef.value)
-            : args.container.domRef.value
+            : args.container.domRef.value) as HTMLElement
         safeContainerDomRef.value ??= document.body
       }
 
@@ -53,77 +62,102 @@ export const useFloating = (
 
       if (args.opener) {
         safeOpenerDomRef.value =
-          typeof args.opener.domRef.value === 'string'
+          (typeof args.opener.domRef.value === 'string'
             ? document.querySelector(args.opener.domRef.value)
-            : 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 +168,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 +187,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 +219,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 +269,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 +312,10 @@ export const useFloating = (
   return {
     float,
     rect,
-    floatObserver,
-    setPosition
+    setPosition,
+    position,
+    actualPosition,
+    openerRect,
+    containerRect
   }
 }