From 43b6afe3b513481c1ccc0af215b9c2f59bbf4a2c Mon Sep 17 00:00:00 2001 From: brianvoe Date: Tue, 2 Jul 2024 10:20:33 -0500 Subject: [PATCH] main - work in progess --- src/fp-money/component.spec.ts | 20 ++++++-- src/fp-money/component.vue | 86 ++++++++++++++++++++-------------- src/fp-money/fp-money.ts | 27 +++++++---- 3 files changed, 83 insertions(+), 50 deletions(-) diff --git a/src/fp-money/component.spec.ts b/src/fp-money/component.spec.ts index dd1d273..79c78a4 100644 --- a/src/fp-money/component.spec.ts +++ b/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 () => { diff --git a/src/fp-money/component.vue b/src/fp-money/component.vue index c810a5a..d277d81 100644 --- a/src/fp-money/component.vue +++ b/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) - }, - }, + } + } }) diff --git a/src/fp-money/fp-money.ts b/src/fp-money/fp-money.ts index c328a7b..8ca7a80 100644 --- a/src/fp-money/fp-money.ts +++ b/src/fp-money/fp-money.ts @@ -84,12 +84,11 @@ 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 } @@ -97,12 +96,7 @@ export default class FPMoney { 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