intl-number-input - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # Changelog
 
+## [1.1.0](https://www.github.com/dm4t2/intl-number-input/compare/v1.0.0...v1.1.0) (2021-10-30)
+
+
+### Features
+
+* add new options `currencyDisplay` and `unitDisplay` ([ce38d4e](https://www.github.com/dm4t2/intl-number-input/commit/ce38d4ec12a302258c6347f143d85e43477f62bf))
+
+
+### Bug Fixes
+
+* decimal/grouping separator not detected in percent format style ([bb81ba0](https://www.github.com/dm4t2/intl-number-input/commit/bb81ba03130a1ed4fee733cd181483ac110bdf7e))
+* prevent caret position from jumping to the end ([73904c2](https://www.github.com/dm4t2/intl-number-input/commit/73904c208db8e1ca982a209e29d5d175cb4aeeed))
+* prevent input of too large numbers ([9283033](https://www.github.com/dm4t2/intl-number-input/commit/928303320af0b670a731b6fd753e48904c1aac69))
+* set correct caret position on focus when using `autoDecimalDigits` ([549fa48](https://www.github.com/dm4t2/intl-number-input/commit/549fa484d59866429573e9cca0f757c3745b41b8))
+
 ## 1.0.0 (2021-10-16)
@@ -4,0 +19,0 @@

dist/index.cjs.js

 /**
- * Intl Number Input 1.0.0
+ * Intl Number Input 1.1.0
  * (c) 2021 Matthias Stiller
@@ -30,2 +30,15 @@ * @license MIT
 })(exports.NumberFormatStyle || (exports.NumberFormatStyle = {}));
+exports.CurrencyDisplay = void 0;
+(function (CurrencyDisplay) {
+    CurrencyDisplay["Symbol"] = "symbol";
+    CurrencyDisplay["NarrowSymbol"] = "narrowSymbol";
+    CurrencyDisplay["Code"] = "code";
+    CurrencyDisplay["Name"] = "name";
+})(exports.CurrencyDisplay || (exports.CurrencyDisplay = {}));
+exports.UnitDisplay = void 0;
+(function (UnitDisplay) {
+    UnitDisplay["Short"] = "short";
+    UnitDisplay["Narrow"] = "narrow";
+    UnitDisplay["Long"] = "long";
+})(exports.UnitDisplay || (exports.UnitDisplay = {}));
 
@@ -36,9 +49,18 @@ const DECIMAL_SEPARATORS = [',', '.', '٫'];
     constructor(options) {
-        const { formatStyle: style, currency, unit, locale, precision } = options;
-        const numberFormat = new Intl.NumberFormat(locale, { currency, unit, style, minimumFractionDigits: style !== exports.NumberFormatStyle.Currency ? 1 : undefined });
-        const ps = numberFormat.format(123456);
+        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
+        const numberFormat = new Intl.NumberFormat(locale, {
+            currency,
+            currencyDisplay,
+            unit,
+            unitDisplay,
+            style,
+            minimumFractionDigits: style !== exports.NumberFormatStyle.Currency ? 1 : undefined
+        });
+        const ps = numberFormat.format(style === exports.NumberFormatStyle.Percent ? 1234.56 : 123456);
         this.locale = locale;
         this.style = style;
         this.currency = currency;
+        this.currencyDisplay = currencyDisplay;
         this.unit = unit;
+        this.unitDisplay = unitDisplay;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
@@ -82,3 +104,10 @@ this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
     isValidIntegerFormat(formattedNumber, integerNumber) {
-        const options = { style: this.style, currency: this.currency, unit: this.unit, minimumFractionDigits: 0 };
+        const options = {
+            style: this.style,
+            currency: this.currency,
+            currencyDisplay: this.currencyDisplay,
+            unit: this.unit,
+            unitDisplay: this.unitDisplay,
+            minimumFractionDigits: 0
+        };
         if (this.style === exports.NumberFormatStyle.Percent) {
@@ -100,3 +129,5 @@ integerNumber /= 100;
                 currency: this.currency,
+                currencyDisplay: this.currencyDisplay,
                 unit: this.unit,
+                unitDisplay: this.unitDisplay,
                 ...options
@@ -339,3 +370,3 @@ }).format(this.style === exports.NumberFormatStyle.Percent ? value / 100 : value)
                 formattedValue =
-                    numberValue > this.toInteger(Math.abs(numberValue))
+                    this.toInteger(Math.abs(numberValue)) > Number.MAX_SAFE_INTEGER
                         ? this.formattedValue
@@ -392,2 +423,5 @@ : this.numberFormat.format(numberValue, {
                     }
+                    if (newValueLength < caretPositionFromLeft) {
+                        return selectionStart;
+                    }
                     if (decimalSymbol !== undefined && value.indexOf(decimalSymbol) !== -1) {
@@ -417,5 +451,3 @@ const decimalSymbolPosition = value.indexOf(decimalSymbol) + 1;
                 const { value, selectionStart, selectionEnd } = this.el;
-                if (this.options.hideNegligibleDecimalDigitsOnFocus && value) {
-                    this.format(value, true);
-                }
+                this.format(value, this.options.hideNegligibleDecimalDigitsOnFocus);
                 if (selectionStart != null && selectionEnd != null && Math.abs(selectionStart - selectionEnd) > 0) {
@@ -422,0 +454,0 @@ this.setCaretPosition(0, this.el.value.length);

dist/index.d.ts

@@ -21,2 +21,13 @@ interface NumberInputConstructorArgs {
 }
+declare enum CurrencyDisplay {
+    Symbol = "symbol",
+    NarrowSymbol = "narrowSymbol",
+    Code = "code",
+    Name = "name"
+}
+declare enum UnitDisplay {
+    Short = "short",
+    Narrow = "narrow",
+    Long = "long"
+}
 interface NumberInputOptions {
@@ -26,3 +37,5 @@ locale?: string;
     currency?: string;
+    currencyDisplay?: CurrencyDisplay;
     unit?: string;
+    unitDisplay?: UnitDisplay;
     exportValueAsInteger?: boolean;
@@ -74,2 +87,2 @@ hidePrefixOrSuffixOnFocus?: boolean;
 
-export { NumberFormatStyle, NumberInput, NumberInputConstructorArgs, NumberInputOptions, NumberInputValue, NumberRange };
+export { CurrencyDisplay, NumberFormatStyle, NumberInput, NumberInputConstructorArgs, NumberInputOptions, NumberInputValue, NumberRange, UnitDisplay };

dist/index.esm.js

 /**
- * Intl Number Input 1.0.0
+ * Intl Number Input 1.1.0
  * (c) 2021 Matthias Stiller
@@ -26,2 +26,15 @@ * @license MIT
 })(NumberFormatStyle || (NumberFormatStyle = {}));
+var CurrencyDisplay;
+(function (CurrencyDisplay) {
+    CurrencyDisplay["Symbol"] = "symbol";
+    CurrencyDisplay["NarrowSymbol"] = "narrowSymbol";
+    CurrencyDisplay["Code"] = "code";
+    CurrencyDisplay["Name"] = "name";
+})(CurrencyDisplay || (CurrencyDisplay = {}));
+var UnitDisplay;
+(function (UnitDisplay) {
+    UnitDisplay["Short"] = "short";
+    UnitDisplay["Narrow"] = "narrow";
+    UnitDisplay["Long"] = "long";
+})(UnitDisplay || (UnitDisplay = {}));
 
@@ -32,9 +45,18 @@ const DECIMAL_SEPARATORS = [',', '.', '٫'];
     constructor(options) {
-        const { formatStyle: style, currency, unit, locale, precision } = options;
-        const numberFormat = new Intl.NumberFormat(locale, { currency, unit, style, minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined });
-        const ps = numberFormat.format(123456);
+        const { formatStyle: style, currency, currencyDisplay, unit, unitDisplay, locale, precision } = options;
+        const numberFormat = new Intl.NumberFormat(locale, {
+            currency,
+            currencyDisplay,
+            unit,
+            unitDisplay,
+            style,
+            minimumFractionDigits: style !== NumberFormatStyle.Currency ? 1 : undefined
+        });
+        const ps = numberFormat.format(style === NumberFormatStyle.Percent ? 1234.56 : 123456);
         this.locale = locale;
         this.style = style;
         this.currency = currency;
+        this.currencyDisplay = currencyDisplay;
         this.unit = unit;
+        this.unitDisplay = unitDisplay;
         this.digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => i.toLocaleString(locale));
@@ -78,3 +100,10 @@ this.decimalSymbol = count(ps, this.digits[0]) ? ps.substr(ps.indexOf(this.digits[6]) + 1, 1) : undefined;
     isValidIntegerFormat(formattedNumber, integerNumber) {
-        const options = { style: this.style, currency: this.currency, unit: this.unit, minimumFractionDigits: 0 };
+        const options = {
+            style: this.style,
+            currency: this.currency,
+            currencyDisplay: this.currencyDisplay,
+            unit: this.unit,
+            unitDisplay: this.unitDisplay,
+            minimumFractionDigits: 0
+        };
         if (this.style === NumberFormatStyle.Percent) {
@@ -96,3 +125,5 @@ integerNumber /= 100;
                 currency: this.currency,
+                currencyDisplay: this.currencyDisplay,
                 unit: this.unit,
+                unitDisplay: this.unitDisplay,
                 ...options
@@ -335,3 +366,3 @@ }).format(this.style === NumberFormatStyle.Percent ? value / 100 : value)
                 formattedValue =
-                    numberValue > this.toInteger(Math.abs(numberValue))
+                    this.toInteger(Math.abs(numberValue)) > Number.MAX_SAFE_INTEGER
                         ? this.formattedValue
@@ -388,2 +419,5 @@ : this.numberFormat.format(numberValue, {
                     }
+                    if (newValueLength < caretPositionFromLeft) {
+                        return selectionStart;
+                    }
                     if (decimalSymbol !== undefined && value.indexOf(decimalSymbol) !== -1) {
@@ -413,5 +447,3 @@ const decimalSymbolPosition = value.indexOf(decimalSymbol) + 1;
                 const { value, selectionStart, selectionEnd } = this.el;
-                if (this.options.hideNegligibleDecimalDigitsOnFocus && value) {
-                    this.format(value, true);
-                }
+                this.format(value, this.options.hideNegligibleDecimalDigitsOnFocus);
                 if (selectionStart != null && selectionEnd != null && Math.abs(selectionStart - selectionEnd) > 0) {
@@ -458,2 +490,2 @@ this.setCaretPosition(0, this.el.value.length);
 
-export { NumberFormatStyle, NumberInput };
+export { CurrencyDisplay, NumberFormatStyle, NumberInput, UnitDisplay };

package.json

 {
   "name": "intl-number-input",
   "description": "Easy input of formatted numbers based on the ECMAScript Internationalization API (ECMA-402).",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
@@ -33,5 +33,7 @@ "module": "./dist/index.esm.js",
     "test": "jest",
-    "lint": "eslint src",
+    "lint": "eslint --no-fix --max-warnings 0 {**/*,*}.{js,ts} && prettier --check {**/*,*}.{js,ts}",
     "prebuild": "rimraf dist",
-    "build": "tsc --emitDeclarationOnly --declaration --outDir dist/types && rollup -c rollup.config.js"
+    "build": "tsc --emitDeclarationOnly --declaration --outDir dist/types && rollup -c rollup.config.js",
+    "dev": "vitepress dev docs",
+    "docs": "vitepress build docs"
   },
@@ -51,5 +53,12 @@ "devDependencies": {
     "rollup-plugin-typescript2": "^0.30.0",
+    "sass": "^1.37.5",
+    "stringify-object": "^3.3.0",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "vite-plugin-components": "^0.8.4",
+    "vite-plugin-windicss": "^0.15.10",
+    "vitepress": "^0.20.0",
+    "vue": "^3.2.20",
+    "windicss": "^2.5.14"
   }
 }

README.md

 # Intl Number Input
-Easy input of formatted numbers based on the ECMAScript Internationalization API (ECMA-402).
+
+Intl Number Input allows an easy input of formatted numbers based on the [ECMAScript Internationalization API (Intl.NumberFormat)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
+
+## Getting started
+
+Please read the [guide](https://dm4t2.github.io/intl-number-input/guide) to get started or check out the [playground](https://dm4t2.github.io/intl-number-input/playground) to see it in action.
+
+## Support me
+
+If you find my work helpful, or you want to support the development, star the repo or buy me a coffee:
+
+[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D6SXEA)

No alert changes

Improved metrics

Total package byte prevSize

52384

increased by9.57%

Lines of code

1041

increased by7.99%

Number of lines in readme file

14

increased by366.67%

Worsened metrics

Dev dependency count

21

increased by50%

No dependency changes