@fiscozen/composables 0.1.17 → 0.1.19

package/package.json

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

package/src/composables/index.ts

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

package/src/composables/useCurrency.ts

@@ -0,0 +1,80 @@
+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<number|undefined>(() => vm?.props.modelValue as unknown as number|undefined)
+
+    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)
+
+        if (modelValue.value) {
+            newVal.value = format(modelValue.value)
+        }
+
+    })
+
+
+
+    return {
+        inputRef,
+        parse,
+        format,
+        setValue
+    }
+}