main - work in progess

src/fp-money/component.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Comp from './component.vue'
+import { nextTick } from 'vue'
 
 describe('Component', () => {
   it('Mounts properly', () => {
@@ -14,15 +15,24 @@ describe('Component', () => {
     expect(wrapper.find('input').exists()).toBe(true)
   })
 
-  it('Make sure defaults are set', () => {
+  it('Make sure defaults are set', async () => {
+    const props = {
+      modelValue: 0,
+
+    }
     const wrapper = mount(Comp, { props: {
       modelValue: 0,
     } })
+    await nextTick()
+
+    const data = JSON.parse(JSON.stringify(wrapper.vm))
+
+    // console.log(data)
 
-    expect(wrapper.vm.modelValue).toBe(0)
-    expect(wrapper.vm.valueFormat).toBe('float')
-    expect(wrapper.vm.currency).toBe('USD')
-    expect(wrapper.vm.locale).toBe('')
+    expect(data.modelValue).toBe(0)
+    expect(data.valueFormat).toBe('float')
+    expect(data.currency).toBe('USD')
+    expect(data.locale).toBe('')
   })
 
   // it('Set initial value and update with new value', async () => {

src/fp-money/component.vue

@@ -4,68 +4,78 @@ import FPMoney, { Constructor, currencies, Values } from './fp-money'
 
 export default defineComponent({
   name: 'Fpmoney',
-  emits: [
-    'update:modelValue',
-    'update:format',
-    'update:display',
-    'update:currency',
-    'update:locale',
-  ],
+  emits: ['update:modelValue', 'update:currency', 'update:locale', 'update:format', 'update:display'],
   props: {
     modelValue: {
       type: [String, Number],
-      required: true,
-    },
-    currencies: {
-      type: Object,
-      required: false,
-      default: null,
+      required: true
     },
     currency: {
       type: String,
       required: false,
-      default: null,
+      default: null
     },
     locale: {
       type: String,
       required: false,
-      default: null,
+      default: null
+    },
+    format: {
+      type: String,
+      required: false,
+      default: null
+    },
+    display: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    // One way bindings
+    currencies: {
+      type: Object,
+      required: false,
+      default: null
     },
     minValue: {
       type: Number,
       required: false,
-      default: null,
+      default: null
     },
     maxValue: {
       type: Number,
       required: false,
-      default: null,
+      default: null
     },
     step: {
       type: Number,
       required: false,
-      default: null,
+      default: null
     },
     disabled: {
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     displayOnly: {
-      type: Boolean
-    },
-    onChange: {
-      type: Function,
-      required: false,
-      default: null
+      type: Boolean,
+      default: false
     },
     valueFormat: {
       type: String,
       required: false,
-      default: 'float',
+      default: 'float'
     },
     showSelection: {
       type: Boolean,
-      default: false,
+      default: false
     },
+
+    // Callbacks
+    onChange: {
+      type: Function,
+      required: false,
+      default: null
+    }
   },
   data() {
     return {
@@ -75,15 +85,15 @@ export default defineComponent({
         format: '',
         display: '',
         currency: '',
-        locale: '',
-      } as Values,
+        locale: ''
+      } as Values
     }
   },
   mounted() {
     this.init()
   },
   watch: {
-    value(newValue, oldValue) {
+    modelValue(newValue, oldValue) {
       if (!this.fpmoney || newValue.toString() === oldValue.toString()) {
         return
       }
@@ -118,7 +128,7 @@ export default defineComponent({
         return
       }
       this.fpmoney.setDisplayOnly(newValue)
-    },
+    }
   },
   methods: {
     init() {
@@ -127,6 +137,8 @@ export default defineComponent({
         onChange: (values: Values) => {
           this.values = values // Set values in data
 
+          console.log(values)
+
           // Set Values
           this.$emit('update:modelValue', this.valueFormat === 'int' ? this.values.value : this.values.format)
           this.$emit('update:format', this.values.format)
@@ -138,14 +150,16 @@ export default defineComponent({
           if (this.onChange) {
             this.onChange(values)
           }
-        },
+        }
       } as Constructor
+
+      // Set options
       if (this.currencies) {
         options.currencies = this.currencies
       } else {
         options.currencies = currencies
       }
-      if (this.currency) {
+      if (this.currency && this.currencies && this.currencies[this.currency]) {
         options.currency = this.currency
       } else {
         options.currency = Object.keys(options.currencies)[0]
@@ -176,10 +190,12 @@ export default defineComponent({
       }
       options.showSelection = this.showSelection
 
+      console.log('options', options)
+
       // Initate the FPMoney class
       this.fpmoney = new FPMoney(options)
-    },
-  },
+    }
+  }
 })
 </script>
 

src/fp-money/fp-money.ts

@@ -84,25 +84,19 @@ export default class FPMoney {
     if (info.currencies) {
       this.currencies = JSON.parse(JSON.stringify(info.currencies))
     }
-    if (info.currency) {
+    if (info.currency && this.currencies[info.currency]) {
       this.currency = info.currency.toUpperCase()
     } else {
       this.currency = Object.keys(this.currencies)[0]
     }
-    console.log(this.currency)
     if (info.locale) {
       this.locale = info.locale
     }
     if (info.valueFormat) {
       this.valueFormat = info.valueFormat
     }
     if (info.value !== undefined) {
-      let curVal = info.value
-      this.isNegative = isNegative(curVal.toString())
-      if (info.valueFormat === 'int') {
-        curVal = intToFraction(curVal, this.currencies[this.currency].fraction)
-      }
-      this.value = fractionToInt(curVal, this.currencies[this.currency].fraction).toString()
+      this.setValue(info.value)
     }
     if (info.minValue !== undefined) {
       this.minValue = fractionToInt(info.minValue, this.currencies[this.currency].fraction)
@@ -161,7 +155,15 @@ export default class FPMoney {
 
   public setValue(value: number | string) {
     const fraction = this.currencies[this.currency].fraction
-    value = this.valueFormat === 'float' ? fractionToInt(value, fraction).toString() : value.toString()
+
+    // Check if value is a fraction
+    if (this.isFraction(value) && this.valueFormat === 'int') {
+      value = fractionToInt(value, fraction).toString()
+    } else if (!this.isFraction(value) && this.valueFormat === 'float') {
+      value = intToFraction(value, fraction).toString()
+    } else {
+      value = value.toString()
+    }
 
     // Dont do anything if nothing changed
     if (this.value.toString() === value) {
@@ -172,7 +174,7 @@ export default class FPMoney {
     this.isNegative = isNegative(value)
 
     // Normalize number to int
-    this.value = fractionToInt(intToFraction(value, fraction), fraction).toString()
+    this.value = value
 
     this.debounceUpdateOutput()
   }
@@ -408,6 +410,11 @@ export default class FPMoney {
     }
   }
 
+  // Check if value is a fraction
+  private isFraction(value: number | string): boolean {
+    return value.toString().includes('.')
+  }
+
   // Deal with key inputs into money field
   private inputKeydown(evt: KeyboardEvent) {
     // Dont do anything if displayOnly