Merge pull request #12 from joserick/dev

Added implementation for add and subtract in big numbers

README.md

@@ -4,7 +4,7 @@
 
 **V-Money-Spinner** for **Vue3** is a component which can preset a input spinner with mask currency and style bootstrap, this latter can be disabled.
 
-> Notice: [Migration Vue2 to Vue3](https://github.com/joserick/v-money-spinner#migration-vue2---vue3) || [I need V-Money-Spinner for Vue2](https://github.com/joserick/v-money-spinner/tree/v0.1.8)
+> Notice: [Migration Vue2 to Vue3](https://github.com/joserick/v-money-spinner#migration-vue2---vue3) || [I need V-Money-Spinner for Vue2](https://github.com/joserick/v-money-spinner#i-need-for-vue2)
 
 ![demo](https://joserick.com/v_money_spinner/spinner.gif)
 
@@ -95,15 +95,14 @@ app.use(MoneySpinner)
 | wrapperClass        | Class for div contains all money-spinner                                                   |
 | wrapperGroupClass   | Class for div contains input and the buttons                                               |
 
-
 ## Migration Vue2 -> Vue3
 Summary of changes of the VMoneySpinner files and documentation to help you migrate from Vue2 to Vue3.
 
 ### New Core
 Previously for the use of the **VMoneySpinner** with *Vue2* was used as core the component [VMoney](https://github.com/vuejs-tips/v-money) by @vuejs-tips, now for *Vue3* is used as core [VMoney3](https://github.com/jonathanpmartins/v-money3) by @jonathanpmartins.
 
 ### Properties
- - Added `disableNegative`(by core) for block the use of negative numbers.
+ - Added `disableNegative` (by core) for block the use of negative numbers.
  - Added `minCharacters` alias `minimumNumberOfCharacters` (by core) for insert 0 digit that comes before the first nonzero digit.
  - ![Breaking](https://img.shields.io/badge/-Breaking-dc3545.svg) Renamed `bootstrap` to `template` for the handling different
    templates though string.
@@ -116,6 +115,14 @@ Previously for the use of the **VMoneySpinner** with *Vue2* was used as core the
 ### Events
  - ![Breaking](https://img.shields.io/badge/-Breaking-dc3545.svg) Dropped `exceeded`  since the new core does not allow to exceed the properties maximum and minimum.
 
+## I need for Vue2
+### Install for Vue2
+```bash
+npm i [email protected]
+```
+
+### [Configuration for Vue2](https://github.com/joserick/v-money-spinner/tree/v0.1.8)
+
 ## References
 
  - https://github.com/JoaoPedroAS51/v-money

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-money-spinner",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A component with input spinner and currency mask.",
   "main": "dist/v-money-spinner.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "mask",
     "currency",
     "vue",
+    "vue3",
     "input",
     "bootstrap"
   ],
@@ -37,7 +38,7 @@
   "devDependencies": {
     "@vue/compiler-sfc": "^3.2.8",
     "poi": "^12.10.3",
-    "v-money3": "^3.17.3",
+    "v-money3": "https://gitpkg.vercel.app/jonathanpmartins/v-money3/?main",
     "vue": "^3.2.8",
     "vue-loader": "^16.5.0"
   },

src/big_number.js

@@ -0,0 +1,44 @@
+import Utils from 'v-money3/src/BigNumber';
+
+export default class BigNumber extends Utils {
+  constructor(number) {
+    super(number);
+  }
+
+  add(addNumber) {
+    const numbers = this.adjustComparisonNumbers(addNumber);
+    this.number = numbers[0] + numbers[1];
+
+    return this
+  }
+
+  subtract(subtractNumber) {
+    const numbers = this.adjustComparisonNumbers(subtractNumber);
+    this.number = numbers[0] - numbers[1];
+
+    return this
+  }
+
+  minMax(plusMinus, number, thatBigNumber){
+    if(thatBigNumber){
+      if (this[plusMinus ? 'add' : 'subtract'](number)
+        [plusMinus ? 'lessThan' : 'biggerThan'](thatBigNumber)) {
+        return this
+      }else{
+        return thatBigNumber
+      }
+    }else{
+      return this[plusMinus ? 'add' : 'subtract'](number)
+    }
+  }
+
+  lessEqualThan(thatBigNumber) {
+    const numbers = this.adjustComparisonNumbers(thatBigNumber);
+    return numbers[0] <= numbers[1];
+  }
+
+  biggerEqualThan(thatBigNumber) {
+    const numbers = this.adjustComparisonNumbers(thatBigNumber);
+    return numbers[0] >= numbers[1];
+  }
+}

src/docs/app.vue

@@ -66,7 +66,7 @@
 				<div class="input-group mb-4">
 					<div class="input-group-text w-50">
 						<label class="mx-auto" data-tippy-content="Apply template styles for default 'Bootstrap'">
-							<span class="mx-auto" style="font-size: 0.9rem">Template</span>
+							Template
 						</label>
 					</div>
 					<input id="template_type" class="btn-check" v-model="template_type" type="checkbox">
@@ -97,7 +97,7 @@
 				<div class="input-group mb-4">
 					<div class="input-group-text w-50">
 						<label class="mx-auto" data-tippy-content="Allow negative values">
-							<span class="mx-auto" style="font-size: 0.9rem">Negatives</span>
+							Negatives
 						</label>
 					</div>
 					<input id="disableNegative" class="btn-check" v-model="disableNegative" type="checkbox">
@@ -118,7 +118,7 @@
 				<div class="input-group mb-4">
 					<div class="input-group-text w-50">
 						<label class="mx-auto" for="thousands" data-tippy-content="Thousands separator">
-							<span class="mx-auto" style="font-size: 0.8rem">Thousands</span>
+							Thousands
 						</label>
 					</div>
 					<input id="thousands" v-model="thousandsFormat" type="text" class="form-control w-50" placeholder=",">
@@ -128,7 +128,7 @@
 				<div class="input-group mb-4">
 					<div class="input-group-text w-50">
 						<label class="mx-auto" data-tippy-content="If the field can start blank and be cleared out by user">
-							<span class="mx-auto" style="font-size: 0.9rem">Blank</span>
+							Blank
 						</label>
 					</div>
 					<input id="allowBlank" class="btn-check" v-model="config.allowBlank" type="checkbox">
@@ -139,7 +139,7 @@
 				<div class="input-group mb-4">
 					<div class="input-group-text w-50">
 						<label class="mx-auto" data-tippy-content="If the component output should include the mask or not">
-							<span class="mx-auto" style="font-size: 0.9rem">Masked</span>
+							Masked
 						</label>
 					</div>
 					<input id="masked" class="btn-check" v-model="config.masked" type="checkbox">
@@ -148,8 +148,8 @@
 			</div>
 			<div class="col">
 				<div class="input-group mb-4">
-					<div class="input-group-text w-50">
-						<label class="mx-auto" for="minCharacters" data-tippy-content="Insert 0 digit that comes before the first nonzero digit">
+					<div class="input-group-text w-50 p-0">
+						<label class="mx-auto" style="font-size: 0.9rem" for="minCharacters" data-tippy-content="Insert 0 digit that comes before the first nonzero digit">
 							Leading-Zero
 						</label>
 					</div>

src/money_spinner.vue

@@ -14,7 +14,9 @@
 
 <script>
 import { ref, computed, onMounted, watch } from 'vue'
-import { Money, format, unformat } from "v-money3";
+import Money from 'v-money3/src/component.vue';
+import unformat from 'v-money3/src/unformat';
+import BigNumber from './big_number';
 import stylesList from "./styles";
 import defaults from "./validations";
 
@@ -28,40 +30,40 @@ export default {
     const amount = computed({
       get(){
         if (money.value.masked) {
-          return Number(unformat(money.value.modelValue, money.value.$props))
+          return new BigNumber(unformat(money.value.modelValue, money.value.$props))
         }
-        return Number(money.value.modelValue)
+        return new BigNumber(money.value.modelValue)
       },
       set(new_val){
         emit('update:modelValue', new_val)
       }
     })
 
     const signChange = (val, pre_val) => {
-      let pre_val_unformat = Number(unformat(pre_val, money.value.$props))
-      let val_unformat = Number(unformat(val, money.value.$props))
+      let pre_val_big = new BigNumber(unformat(pre_val, money.value.$props))
+      let val_big = new BigNumber(unformat(val, money.value.$props))
 
-      if (pre_val_unformat < 0 && val_unformat >= 0) {
-			  emit('positive', val_unformat, val, pre_val)
-      }else if (pre_val_unformat >= 0 && val_unformat < 0) {
-			  emit('negative', val_unformat, val, pre_val)
+      if (pre_val_big.lessThan(0) && val_big.biggerEqualThan(0)) {
+			  emit('positive', val_big.toFixed(money.value.precision), val, pre_val)
+      }else if (pre_val_big.biggerEqualThan(0) && val_big.lessThan(0)) {
+			  emit('negative', val_big.toFixed(money.value.precision), val, pre_val)
       }
     }
 
     const setPlusMinus = (event) => {
-      if (amount.value > money.value.max){
+      if (money.value.max && amount.value.biggerThan(money.value.max)){
         amount.value = money.value.max.toFixed(money.value.precision)
-      }else if (money.value.disableNegative && (amount.value + ((event ? 1 : -1) * props.step)) < 0) {
-        amount.value = money.value.masked ? format(0, money.value.$props) : 0
-      }else if (amount.value < money.value.min) {
+      }else if (money.value.min && amount.value.lessThan(money.value.min)) {
         amount.value = money.value.min.toFixed(money.value.precision)
-      }else if (event && amount.value < money.value.max) {
-        amount.value = Math.min(amount.value + props.step, money.value.max).toFixed(money.value.precision);
-      }else if (!event && amount.value > money.value.min){
-        amount.value = Math.max(amount.value - props.step, money.value.min).toFixed(money.value.precision);
+      }else if (event && (money.value.max === null || amount.value.lessThan(money.value.max))) {
+        amount.value = amount.value.minMax(event, props.step, money.value.max).toFixed(money.value.precision)
+      }else if (!event && (money.value.min === null || amount.value.biggerThan(money.value.min))){
+        amount.value = amount.value.minMax(event, props.step, money.value.min).toFixed(money.value.precision);
       }
 
-			emit(event ? 'plus' : 'minus', amount.value, money.value.data.formattedValue)
+			emit(event ? 'plus' : 'minus',
+        amount.value.toFixed(money.value.precision),
+        money.value.data.formattedValue)
     }
 
     const plus = () => {
@@ -90,12 +92,16 @@ export default {
         payload.minimumNumberOfCharacters = payload.minCharacters
       }
 
+      if (payload.disableNegative) {
+        payload.min = 0
+      }
+
       return payload;
     });
 
     onMounted(() => {
       watch(() => money.value.data.formattedValue, (val, pre_val) => {
-        emit('change', amount.value, val, pre_val)
+        emit('change', amount.value.toFixed(money.value.precision), val, pre_val)
         signChange(val, pre_val)
       })
     })