vue-currency-input - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

dist/index.cjs.js

 /**
- * Vue Currency Input 2.1.2
+ * Vue Currency Input 2.1.3
  * (c) 2018-2021 Matthias Stiller
@@ -38,11 +38,13 @@ * @license MIT
     constructor(options) {
+        var _a, _b;
         const { currency, currencyDisplay, locale, precision } = options;
         this.currencyDisplay = currencyDisplay !== exports.CurrencyDisplay.hidden ? currencyDisplay : undefined;
         const numberFormat = new Intl.NumberFormat(locale, { currency, currencyDisplay: this.currencyDisplay, style: 'currency' });
-        const ps = numberFormat.format(123456);
+        const formatSample = numberFormat.format(1);
+        const formatParts = numberFormat.formatToParts(123456);
         this.locale = locale;
         this.currency = currency;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
-        this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
-        this.groupingSymbol = ps.substr(ps.indexOf(this.digits[3]) + 1, 1);
+        this.decimalSymbol = (_a = formatParts.find(({ type }) => type === 'decimal')) === null || _a === void 0 ? void 0 : _a.value;
+        this.groupingSymbol = (_b = formatParts.find(({ type }) => type === 'group')) === null || _b === void 0 ? void 0 : _b.value;
         this.minusSymbol = substringBefore(Number(-1).toLocaleString(locale), this.digits[1]);
@@ -59,5 +61,5 @@ if (this.decimalSymbol === undefined) {
         }
-        this.prefix = substringBefore(ps, this.digits[1]);
+        this.prefix = substringBefore(formatSample, this.digits[1]);
         this.negativePrefix = substringBefore(numberFormat.format(-1), this.digits[1]);
-        this.suffix = ps.substring(ps.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[6]) + 1);
+        this.suffix = formatSample.substring(formatSample.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[1]) + 1);
     }
@@ -117,3 +119,3 @@ parse(str) {
     stripGroupingSeparator(str) {
-        return str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '');
+        return this.groupingSymbol !== undefined ? str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '') : str;
     }
@@ -206,6 +208,6 @@ stripMinusSymbol(str) {
             ? -0
-            : Number(`${negative ? '-' : ''}${removeLeadingZeros(this.currencyFormat.onlyDigits(str))}`) / Math.pow(10, this.currencyFormat.minimumFractionDigits);
+            : Number(`${negative ? '-' : ''}${removeLeadingZeros(this.currencyFormat.onlyDigits(str))}`) / Math.pow(10, this.currencyFormat.maximumFractionDigits);
         return {
             numberValue,
-            fractionDigits: numberValue.toFixed(this.currencyFormat.minimumFractionDigits).slice(-this.currencyFormat.minimumFractionDigits)
+            fractionDigits: numberValue.toFixed(this.currencyFormat.maximumFractionDigits).slice(-this.currencyFormat.maximumFractionDigits)
         };
@@ -428,3 +430,3 @@ }
                         }
-                        if (this.options.hideGroupingSeparatorOnFocus) {
+                        if (this.options.hideGroupingSeparatorOnFocus && groupingSymbol !== undefined) {
                             result -= count(value.substring(0, selectionStart), groupingSymbol);
@@ -455,3 +457,3 @@ }
 var useCurrencyInput = (options) => {
-    var _a, _b;
+    var _a;
     let numberInput;
@@ -462,12 +464,9 @@ let input;
     const instance = vueDemi.getCurrentInstance();
-    if (instance == null) {
-        throw new Error();
-    }
-    const emit = (event, value) => { var _a; return (vueDemi.isVue3 ? instance.emit(event, value) : (_a = instance.proxy) === null || _a === void 0 ? void 0 : _a.$emit(event, value)); };
-    const lazyModel = vueDemi.isVue3 && ((_a = instance.attrs.modelModifiers) === null || _a === void 0 ? void 0 : _a.lazy);
-    const numberValue = vueDemi.computed(() => (vueDemi.isVue3 ? instance.props.modelValue : instance.props.value));
+    const emit = (event, value) => instance === null || instance === void 0 ? void 0 : instance.emit(event, value);
+    const lazyModel = vueDemi.isVue3 && ((_a = instance === null || instance === void 0 ? void 0 : instance.attrs.modelModifiers) === null || _a === void 0 ? void 0 : _a.lazy);
+    const numberValue = vueDemi.computed(() => instance === null || instance === void 0 ? void 0 : instance.props[vueDemi.isVue3 ? 'modelValue' : 'value']);
     const inputEvent = vueDemi.isVue3 ? 'update:modelValue' : 'input';
-    const changeEvent = vueDemi.isVue3 && lazyModel ? 'update:modelValue' : 'change';
-    const hasInputEventListener = vueDemi.isVue3 ? !!instance.attrs['onUpdate:modelValue'] && !lazyModel : !!((_b = instance.proxy) === null || _b === void 0 ? void 0 : _b.$listeners[inputEvent]);
-    const hasChangeEventListener = vueDemi.isVue3 ? lazyModel || !!instance.attrs.onChange : !!instance.proxy.$listeners[changeEvent];
+    const changeEvent = lazyModel ? 'update:modelValue' : 'change';
+    const hasInputEventListener = !vueDemi.isVue3 || !lazyModel;
+    const hasChangeEventListener = !vueDemi.isVue3 || lazyModel || !(instance === null || instance === void 0 ? void 0 : instance.attrs.onChange);
     const onInput = (e) => {
@@ -490,13 +489,15 @@ if (e.detail) {
         input = findInput((_b = (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.$el) !== null && _b !== void 0 ? _b : inputRef.value);
-        if (!input) {
-            throw new Error('No input element found');
+        if (input) {
+            numberInput = new CurrencyInput(input, options);
+            if (hasInputEventListener) {
+                input.addEventListener('input', onInput);
+            }
+            if (hasChangeEventListener) {
+                input.addEventListener('change', onChange);
+            }
+            numberInput.setValue(numberValue.value);
         }
-        numberInput = new CurrencyInput(input, options);
-        if (hasInputEventListener) {
-            input.addEventListener('input', onInput);
+        else {
+            console.error('No input element found. Please make sure that the "inputRef" template ref is properly assigned.');
         }
-        if (hasChangeEventListener) {
-            input.addEventListener('change', onChange);
-        }
-        numberInput.setValue(numberValue.value);
     });
@@ -503,0 +504,0 @@ vueDemi.onUnmounted(() => {

dist/index.esm.js

 /**
- * Vue Currency Input 2.1.2
+ * Vue Currency Input 2.1.3
  * (c) 2018-2021 Matthias Stiller
@@ -34,11 +34,13 @@ * @license MIT
     constructor(options) {
+        var _a, _b;
         const { currency, currencyDisplay, locale, precision } = options;
         this.currencyDisplay = currencyDisplay !== CurrencyDisplay.hidden ? currencyDisplay : undefined;
         const numberFormat = new Intl.NumberFormat(locale, { currency, currencyDisplay: this.currencyDisplay, style: 'currency' });
-        const ps = numberFormat.format(123456);
+        const formatSample = numberFormat.format(1);
+        const formatParts = numberFormat.formatToParts(123456);
         this.locale = locale;
         this.currency = currency;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
-        this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
-        this.groupingSymbol = ps.substr(ps.indexOf(this.digits[3]) + 1, 1);
+        this.decimalSymbol = (_a = formatParts.find(({ type }) => type === 'decimal')) === null || _a === void 0 ? void 0 : _a.value;
+        this.groupingSymbol = (_b = formatParts.find(({ type }) => type === 'group')) === null || _b === void 0 ? void 0 : _b.value;
         this.minusSymbol = substringBefore(Number(-1).toLocaleString(locale), this.digits[1]);
@@ -55,5 +57,5 @@ if (this.decimalSymbol === undefined) {
         }
-        this.prefix = substringBefore(ps, this.digits[1]);
+        this.prefix = substringBefore(formatSample, this.digits[1]);
         this.negativePrefix = substringBefore(numberFormat.format(-1), this.digits[1]);
-        this.suffix = ps.substring(ps.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[6]) + 1);
+        this.suffix = formatSample.substring(formatSample.lastIndexOf(this.decimalSymbol ? this.digits[0] : this.digits[1]) + 1);
     }
@@ -113,3 +115,3 @@ parse(str) {
     stripGroupingSeparator(str) {
-        return str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '');
+        return this.groupingSymbol !== undefined ? str.replace(new RegExp(escapeRegExp(this.groupingSymbol), 'g'), '') : str;
     }
@@ -202,6 +204,6 @@ stripMinusSymbol(str) {
             ? -0
-            : Number(`${negative ? '-' : ''}${removeLeadingZeros(this.currencyFormat.onlyDigits(str))}`) / Math.pow(10, this.currencyFormat.minimumFractionDigits);
+            : Number(`${negative ? '-' : ''}${removeLeadingZeros(this.currencyFormat.onlyDigits(str))}`) / Math.pow(10, this.currencyFormat.maximumFractionDigits);
         return {
             numberValue,
-            fractionDigits: numberValue.toFixed(this.currencyFormat.minimumFractionDigits).slice(-this.currencyFormat.minimumFractionDigits)
+            fractionDigits: numberValue.toFixed(this.currencyFormat.maximumFractionDigits).slice(-this.currencyFormat.maximumFractionDigits)
         };
@@ -424,3 +426,3 @@ }
                         }
-                        if (this.options.hideGroupingSeparatorOnFocus) {
+                        if (this.options.hideGroupingSeparatorOnFocus && groupingSymbol !== undefined) {
                             result -= count(value.substring(0, selectionStart), groupingSymbol);
@@ -451,3 +453,3 @@ }
 var useCurrencyInput = (options) => {
-    var _a, _b;
+    var _a;
     let numberInput;
@@ -458,12 +460,9 @@ let input;
     const instance = getCurrentInstance();
-    if (instance == null) {
-        throw new Error();
-    }
-    const emit = (event, value) => { var _a; return (isVue3 ? instance.emit(event, value) : (_a = instance.proxy) === null || _a === void 0 ? void 0 : _a.$emit(event, value)); };
-    const lazyModel = isVue3 && ((_a = instance.attrs.modelModifiers) === null || _a === void 0 ? void 0 : _a.lazy);
-    const numberValue = computed(() => (isVue3 ? instance.props.modelValue : instance.props.value));
+    const emit = (event, value) => instance === null || instance === void 0 ? void 0 : instance.emit(event, value);
+    const lazyModel = isVue3 && ((_a = instance === null || instance === void 0 ? void 0 : instance.attrs.modelModifiers) === null || _a === void 0 ? void 0 : _a.lazy);
+    const numberValue = computed(() => instance === null || instance === void 0 ? void 0 : instance.props[isVue3 ? 'modelValue' : 'value']);
     const inputEvent = isVue3 ? 'update:modelValue' : 'input';
-    const changeEvent = isVue3 && lazyModel ? 'update:modelValue' : 'change';
-    const hasInputEventListener = isVue3 ? !!instance.attrs['onUpdate:modelValue'] && !lazyModel : !!((_b = instance.proxy) === null || _b === void 0 ? void 0 : _b.$listeners[inputEvent]);
-    const hasChangeEventListener = isVue3 ? lazyModel || !!instance.attrs.onChange : !!instance.proxy.$listeners[changeEvent];
+    const changeEvent = lazyModel ? 'update:modelValue' : 'change';
+    const hasInputEventListener = !isVue3 || !lazyModel;
+    const hasChangeEventListener = !isVue3 || lazyModel || !(instance === null || instance === void 0 ? void 0 : instance.attrs.onChange);
     const onInput = (e) => {
@@ -486,13 +485,15 @@ if (e.detail) {
         input = findInput((_b = (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.$el) !== null && _b !== void 0 ? _b : inputRef.value);
-        if (!input) {
-            throw new Error('No input element found');
+        if (input) {
+            numberInput = new CurrencyInput(input, options);
+            if (hasInputEventListener) {
+                input.addEventListener('input', onInput);
+            }
+            if (hasChangeEventListener) {
+                input.addEventListener('change', onChange);
+            }
+            numberInput.setValue(numberValue.value);
         }
-        numberInput = new CurrencyInput(input, options);
-        if (hasInputEventListener) {
-            input.addEventListener('input', onInput);
+        else {
+            console.error('No input element found. Please make sure that the "inputRef" template ref is properly assigned.');
         }
-        if (hasChangeEventListener) {
-            input.addEventListener('change', onChange);
-        }
-        numberInput.setValue(numberValue.value);
     });
@@ -499,0 +500,0 @@ onUnmounted(() => {

package.json

 {
   "name": "vue-currency-input",
   "description": "Easy input of currency formatted numbers for Vue.js.",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "license": "MIT",
@@ -45,3 +45,3 @@ "module": "./dist/index.esm.js",
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0",
+    "@vue/composition-api": "^1.4.0",
     "vue": "^2.6 || ^3.0.0"
@@ -57,2 +57,3 @@ },
     "@testing-library/user-event": "^13.2.1",
+    "@testing-library/vue": "^6.4.2",
     "@types/jest": "^26.0.23",
@@ -84,8 +85,9 @@ "@typescript-eslint/eslint-plugin": "^4.14.2",
     "vitepress": "^0.19.2",
-    "vue": "^3.2.19",
+    "vue": "^3.2.22",
+    "vue-jest": "^5.0.0-alpha.10",
     "windicss": "^2.5.14"
   },
   "dependencies": {
-    "vue-demi": "^0.9.0"
+    "vue-demi": "^0.12.1"
   }
 }

README.md

@@ -11,3 +11,3 @@ [![Build Status](https://travis-ci.com/dm4t2/vue-currency-input.svg?branch=master)](https://travis-ci.com/dm4t2/vue-currency-input)
 
-Vue Currency Input allows an easy input of currency formatted numbers based on [ECMAScript Internationalization API (Intl.NumberFormat)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), supporting both Vue 2 and Vue 3.
+Vue Currency Input allows an easy input of currency formatted numbers based on the [ECMAScript Internationalization API (Intl.NumberFormat)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat), supporting both Vue 2 and Vue 3.
 
@@ -14,0 +14,0 @@ Built on top of the [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html), it enables you to decorate *any* input component with currency format capabilities.

No alert changes

Improved metrics

Total package byte prevSize

55210

increased by0.95%

Lines of code

1051

increased by0.19%

Worsened metrics

Dev dependency count

32

increased by6.67%

Dependency changes

• + Added@babel/parser@7.26.8(transitive)

• + Added@babel/types@7.26.8(transitive)

• + Addedpostcss@8.5.2(transitive)

• + Addedvue-demi@0.12.5(transitive)

• - Removed@babel/parser@7.26.9(transitive)

• - Removed@babel/types@7.26.9(transitive)

• - Removedpostcss@8.5.3(transitive)

• - Removedvue-demi@0.9.1(transitive)

• Updatedvue-demi@^0.12.1