@fiscozen/composables 0.1.16-beta.1 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.16-beta.1",
+  "version": "0.1.18",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
@@ -25,9 +25,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -9,8 +9,6 @@ const props = withDefaults(defineProps<FzFloatingProps>(), {
   teleport: false
 })
 
-const emits = defineEmits(['fzfloating:setPosition'])
-
 const opener = ref(null)
 const content = ref<HTMLElement | null>(null)
 
@@ -19,15 +17,10 @@ const slots = useSlots()
 const useFloatingOpts: FzUseFloatingArgs = {
   position: computed(() => props.position),
   element: {
-    // @ts-ignore
     domRef: content
   },
   container: {
-    // @ts-ignore
     domRef: toRef(props.container || document.body)
-  },
-  callback(...args) {
-    emits('fzfloating:setPosition', ...args)
   }
 }
 if (slots.opener) {

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

@@ -3,119 +3,107 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex"><button>opener</button></div>
-  <div class="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute 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="fz__floating__content bg-core-white fixed z-10 p-4 bg-core-white fixed p-4 z-10">
+  <div class="bg-core-white absolute p-4 z-10">
     <div>content</div>
   </div>
-  <!--v-if-->
 </div>"
 `;

package/src/composables/index.ts

@@ -4,3 +4,4 @@ export * from './useBreakpoints'
 export * from './useClickOutside'
 export * from './useKeyDown'
 export * from './useKeyUp'
+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: Event) => {
+  const listener = (event: MouseEvent) => {
     if (
       !component.value ||
       event.target === component.value ||
@@ -28,15 +28,12 @@ function useClickOutside(
   }
 
   if (elementToListenClicksOn) {
-    watch(
-      elementToListenClicksOn,
-      (newVal: Element | undefined, oldVal: Element | undefined) => {
-        if (oldVal) {
-          oldVal.removeEventListener('click', listener)
-        }
-        newVal?.addEventListener('click', listener)
+    watch(elementToListenClicksOn, (newVal: HTMLElement | undefined, oldVal: HTMLElement | undefined) => {
+      if (oldVal) {
+        oldVal.removeEventListener('click', listener)
       }
-    )
+      newVal?.addEventListener('click', listener)
+    });
   }
 
   onMounted(() => {
@@ -48,7 +45,7 @@ function useClickOutside(
   onBeforeUnmount(() => {
     if (elementToListenClicksOn) {
       elementToListenClicksOn.value!.removeEventListener('click', listener)
-      return
+      return;
     }
     document.removeEventListener('click', listener)
   })

package/src/composables/useCurrency.ts

@@ -0,0 +1,75 @@
+import {Ref, watch, getCurrentInstance, computed, ref} from 'vue' 
+
+export const useCurrency = () => {
+    const inputRef: Ref<HTMLInputElement|null> = ref(null)
+    const vm = getCurrentInstance()
+
+    const modelValue = computed(() => vm?.props.modelValue)
+
+    const format = (input: number) => {
+        return input.toLocaleString('it-IT', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        })
+    }
+
+    const parse = (text: string) => {
+        // strip currency, handle edge cases...
+        return parseFloat(text)
+    }
+
+    const setValue = (val: number) => {
+        if (Number.isNaN(val)) {
+            return;
+        }
+
+        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, '')
+        inputRef.value.value = value;
+        const number = parse(value)
+        setValue(Number.isNaN(number) ? 0 : number)
+    }
+
+    const onBlur = (e: FocusEvent) => {
+        if (!inputRef.value || !e.target) {
+            return
+        }
+        let number = parse((e.target as HTMLInputElement).value.replace(/,/g,"."))
+        if (Number.isNaN(number)) {
+            number = 0;
+        } 
+        const text = format(number)
+
+        inputRef.value.value = text;
+        setValue(number)
+    }
+
+    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,
+        setValue
+    }
+}

package/src/composables/useFloating.ts

@@ -1,24 +1,19 @@
 import { FzFloatingPosition, FzRect, FzUseFloatingArgs } from '../types'
-import { ref, reactive, onUnmounted, Ref, nextTick } from 'vue'
+import { ref, reactive, onUnmounted, Ref, nextTick, computed } from 'vue'
 import { calcRealPos, getHighestAvailableSpacePos } from '../utils'
 
 export const useFloating = (
   args: FzUseFloatingArgs
 ): {
   float: FzRect
-  rect: Ref<DOMRect | undefined>
+  rect: Ref<DOMRect | null>
+  floatObserver: Ref<IntersectionObserver>
   setPosition: () => Promise<void>
-  position: Ref<FzFloatingPosition>
-  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 openerRect = ref<DOMRect | undefined>()
-  const containerRect = ref<DOMRect | undefined>()
-  const position = ref<FzFloatingPosition>('auto')
-  const rect = ref<DOMRect | undefined>()
+  const rect = ref<DOMRect | null>(null)
   const float = reactive<FzRect>({
     position: { x: 0, y: 0 }
   })
@@ -35,21 +30,20 @@ export const useFloating = (
   ) => {}
 
   const floatObserver = ref(new IntersectionObserver(handleIntersect, options))
-  position.value = args.position ? args.position.value : 'auto'
 
   const setPosition = () =>
     nextTick(() => {
       safeElementDomRef.value =
-        (typeof args.element.domRef.value === 'string'
-          ? document.querySelector(args.element.domRef.value) 
-          : args.element.domRef.value) as HTMLElement
+        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'
+          typeof args.container.domRef.value === 'string'
             ? document.querySelector(args.container.domRef.value)
-            : args.container.domRef.value) as HTMLElement
+            : args.container.domRef.value
         safeContainerDomRef.value ??= document.body
       }
 
@@ -59,102 +53,77 @@ 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) as HTMLElement
+            : args.opener.domRef.value
       }
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
-      openerRect.value = safeOpenerDomRef.value?.getBoundingClientRect()
-      containerRect.value = safeContainerDomRef.value.getBoundingClientRect()
+      const openerRect = safeOpenerDomRef.value?.getBoundingClientRect()
+      const containerRect = safeContainerDomRef.value.getBoundingClientRect()
 
-      const elStyle = window.getComputedStyle(safeElementDomRef.value as HTMLElement)
+      const elStyle = window.getComputedStyle(safeElementDomRef.value)
 
       // multiple observer calls on same target do not cause multiple registrations
-      floatObserver.value.observe(safeElementDomRef.value as HTMLElement)
-      floatObserver.value.observe(safeContainerDomRef.value as HTMLElement)
+      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 && openerRect.value) {
+      if (args.opener && safeOpenerDomRef.value && openerRect) {
         const leftWithoutXMargin =
-          openerRect.value.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
-        const leftWithoutLeftMargin = openerRect.value.left - parseFloat(elStyle.marginLeft)
+          openerRect.left - parseFloat(elStyle.marginLeft) - parseFloat(elStyle.marginRight)
+        const leftWithoutLeftMargin = openerRect.left - parseFloat(elStyle.marginLeft)
         const topWithoutYMargin =
-          openerRect.value.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
-        const topWithoutTopMargin = openerRect.value.top - parseFloat(elStyle.marginTop)
+          openerRect.top - parseFloat(elStyle.marginTop) - parseFloat(elStyle.marginBottom)
+        const topWithoutTopMargin = openerRect.top - parseFloat(elStyle.marginTop)
 
-        switch (position.value) {
+        switch (position) {
           case 'auto':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement
-            )
-            break
-          case 'auto-vertical':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              undefined,
-              true
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value
             )
             break
           case 'auto-start':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value,
               'start'
             )
             break
-          case 'auto-vertical-start':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'start',
-              true
-            )
-            break
           case 'auto-end':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
+            position = getHighestAvailableSpacePos(
+              safeContainerDomRef.value,
+              safeElementDomRef.value,
+              safeOpenerDomRef.value,
               'end'
             )
             break
-          case 'auto-vertical-end':
-            position.value = getHighestAvailableSpacePos(
-              safeContainerDomRef.value as HTMLElement,
-              safeElementDomRef.value as HTMLElement,
-              safeOpenerDomRef.value as HTMLElement,
-              'end',
-              true
-            )
-            break
           default:
             break
         }
-        switch (position.value) {
+        switch (position) {
           case 'bottom':
-            float.position.y = openerRect.value.bottom
-            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
+            float.position.y = openerRect.bottom
+            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
             translateX = -50
             translateY = 0
             break
           case 'bottom-start':
-            float.position.y = openerRect.value.bottom
+            float.position.y = openerRect.bottom
             float.position.x = leftWithoutXMargin
             translateX = 0
             translateY = 0
             break
           case 'bottom-end':
-            float.position.y = openerRect.value.bottom
-            float.position.x = openerRect.value.right
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.right
             translateX = -100
             translateY = 0
             break
@@ -165,13 +134,13 @@ export const useFloating = (
             translateY = 0
             break
           case 'left':
-            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
+            float.position.y = topWithoutTopMargin + openerRect.height / 2
             float.position.x = leftWithoutXMargin
             translateY = -50
             translateX = -100
             break
           case 'left-end':
-            float.position.y = openerRect.value.bottom
+            float.position.y = openerRect.bottom
             float.position.x = leftWithoutXMargin
             translateY = -100
             translateX = -100
@@ -184,31 +153,31 @@ export const useFloating = (
             break
           case 'top':
             float.position.y = topWithoutYMargin
-            float.position.x = leftWithoutLeftMargin + openerRect.value.width / 2
+            float.position.x = leftWithoutLeftMargin + openerRect.width / 2
             translateX = -50
             translateY = -100
             break
           case 'top-end':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.value.right
+            float.position.x = openerRect.right
             translateX = -100
             translateY = -100
             break
           case 'right-start':
             float.position.y = topWithoutYMargin
-            float.position.x = openerRect.value.right
+            float.position.x = openerRect.right
             translateX = 0
             translateY = 0
             break
           case 'right':
-            float.position.y = topWithoutTopMargin + openerRect.value.height / 2
-            float.position.x = openerRect.value.right
+            float.position.y = topWithoutTopMargin + openerRect.height / 2
+            float.position.x = openerRect.right
             translateY = -50
             translateX = 0
             break
           case 'right-end':
-            float.position.y = openerRect.value.bottom
-            float.position.x = openerRect.value.right
+            float.position.y = openerRect.bottom
+            float.position.x = openerRect.right
             translateY = -100
             translateX = 0
             break
@@ -216,45 +185,42 @@ export const useFloating = (
             break
         }
       } else {
-        switch (position.value) {
+        switch (position) {
           case 'bottom':
-            float.position.y = containerRect.value.bottom - rect.value.height
-            float.position.x = containerRect.value.left + containerRect.value.width / 2
+            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.value.bottom - rect.value.height
-            float.position.x = containerRect.value.left
+            float.position.y = containerRect.bottom - rect.value.height
+            float.position.x = containerRect.left
             break
           case 'right-end':
           case 'bottom-end':
-            float.position.y = containerRect.value.bottom - rect.value.height
-            float.position.x = containerRect.value.right - rect.value.width
+            float.position.y = containerRect.bottom - rect.value.height
+            float.position.x = containerRect.right - rect.value.width
             break
           case 'left':
-            float.position.y =
-              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
-            float.position.x = containerRect.value.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.value.top
-            float.position.x = containerRect.value.left
+            float.position.y = containerRect.top
+            float.position.x = containerRect.left
             break
           case 'top':
-            float.position.y = containerRect.value.top
-            float.position.x =
-              containerRect.value.left + (containerRect.value.width - rect.value.width) / 2
+            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.value.top
-            float.position.x = containerRect.value.right - rect.value.width
+            float.position.y = containerRect.top
+            float.position.x = containerRect.right - rect.value.width
           case 'right':
-            float.position.y =
-              containerRect.value.top + (containerRect.value.height - rect.value.height) / 2
-            float.position.x = containerRect.value.right - rect.value.width
+            float.position.y = containerRect.top + (containerRect.height - rect.value.height) / 2
+            float.position.x = containerRect.right - rect.value.width
             break
           default:
             break
@@ -266,29 +232,23 @@ export const useFloating = (
       float.position.x = realPos.x
       float.position.y = realPos.y
 
-      if (realPos.x < containerRect.value.left) {
-        float.position.x = containerRect.value.left
+      if (realPos.x < containerRect.left) {
+        float.position.x = containerRect.left
         translateX = 0
       }
 
-      if (realPos.x + rect.value.width > containerRect.value.right) {
-        const fixVal = containerRect.value.right - rect.value.width
-        if (fixVal > 0) {
-          float.position.x = fixVal
-        }
+      if (realPos.x + rect.value.width > containerRect.right) {
+        float.position.x = containerRect.right - rect.value.width
         translateX = 0
       }
 
-      if (realPos.y < containerRect.value.top) {
-        float.position.y = containerRect.value.top
+      if (realPos.y < containerRect.top) {
+        float.position.y = containerRect.top
         translateY = 0
       }
 
-      if (realPos.y + rect.value.height > containerRect.value.bottom) {
-        const fixVal = containerRect.value.bottom - rect.value.height
-        if (fixVal > 0) {
-          float.position.y = fixVal
-        }
+      if (realPos.y + rect.value.height > containerRect.bottom) {
+        float.position.y = containerRect.bottom - rect.value.height
         translateY = 0
       }
 
@@ -298,8 +258,6 @@ export const useFloating = (
       safeElementDomRef.value.style.display = 'flex'
 
       rect.value = safeElementDomRef.value.getBoundingClientRect()
-
-      args.callback && args.callback(rect, openerRect, containerRect, position)
     })
 
   onUnmounted(() => {
@@ -309,9 +267,7 @@ export const useFloating = (
   return {
     float,
     rect,
-    setPosition,
-    position,
-    openerRect,
-    containerRect
+    floatObserver,
+    setPosition
   }
 }