[ADD] number handler

src/App.vue

@@ -2,7 +2,7 @@
     .pos
         form-wizard(title='' subtitle='' finishButtonText='Finalizar' :hideButtons='processing' color='#7c7bad' nextButtonText='Continuar' backButtonText='Volver' @on-complete='createSale' ref='wizard')
             tab-content(title="Qué productos necesita?" :beforeChange="checkCart")
-                product-step
+                input-dropdown(format='number')
             tab-content(title="Quién es el cliente?" :beforeChange="checkCustomer")
                 customer-step
             tab-content(v-if='isSale' title="Cómo quieres pagar?" :beforeChange="checkPaymentMethod")
@@ -22,6 +22,8 @@
     import PaymentMethodStep from '@@/steps/PaymentMethod'
     import PaymentAmountStep from '@@/steps/PaymentAmount'
 
+    import InputDropdown from '@@/common/InputDropdown'
+
     export default {
         components: {
             FormWizard,
@@ -29,7 +31,8 @@
             ProductStep,
             CustomerStep,
             PaymentMethodStep,
-            PaymentAmountStep
+            PaymentAmountStep,
+            InputDropdown
         },
         computed: mapGetters([
             'isSale',

src/components/common/InputDropdown.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
     .input-group
-        input(type='text' v-model='value')
+        input(type='text' v-model='formattedValue')
         .input-group-button
             button(type='button' @click='onShowOptions' :disabled='isDisabledOptions()' ref='button') {{ text }}
                 span.caret
@@ -23,14 +23,77 @@
             options: {
                 type: Array,
                 default: []
+            },
+            format: {
+                type: String,
+                default: 'text'
+            },
+            prefix: {
+                type: String,
+                default: ''
             }
         },
-        watch: {
-            value(data) {
-                this.onChange(data)
+        computed: {
+            formattedValue: {
+                get() {
+                    let value = 0
+
+                    if (this.format === 'number') {
+                        value = this.formatValue(this.value)
+                    }
+
+                    return !!this.value ? value : value.replace(/\d/, '')
+                },
+                set(value) {
+                    if (this.format === 'number') {
+                        value = this.unformatValue(value)
+                    }
+
+                    this.value = value
+                }
             }
         },
         methods: {
+            formatValue(value, options) {
+                value = value.toString()
+
+                if (!(options instanceof Object)) {
+                    options = {}
+                }
+
+                options.thousandsSeparator = options.thousandsSeparator || '.'
+                options.decimalPlaces = options.decimalPlaces >= 0 || options.decimalPlaces <= 2 ? options.decimalPlaces : 2
+                options.decimalSeparator = options.decimalSeparator || ','
+                options.decimalZeros = !!options.decimalZeros
+
+                if (!!(`${options.thousandsSeparator}${options.decimalSeparator}`).replace(/\.,|,\./g, '')) {
+                    throw new Error('Same thousands and decimal separator is not allowed')
+                }
+
+                value = value.split('.')
+
+                value[0] = value[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${options.thousandsSeparator}`)
+
+                if (!!value[1]) {
+                    value[1] = Number.parseFloat(`1.${value[1]}e${options.decimalPlaces}`)
+                    value[1] = Math.round(value[1]).toString().replace(/^1/, '')
+                }
+
+                value = value.join(options.decimalSeparator)
+
+                if (!options.decimalZeros) {
+                    value = value.replace(/([\.|,]\d)0$/, '$1')
+                }
+
+                return value
+            },
+            unformatValue(value) {
+                value = value.replace(/[\.|,](\d{0,2}$)/, '?$1').split(/\?/)
+                value[0] = value[0].replace(/[^0-9]/g, '')
+                value = Number.parseFloat(value.join('.')) || 0
+
+                return value
+            },
             onChange(data) {
                 this.$emit('onChange', data)
             },