@canutin/svelte-currency-input 1.0.0 → 1.1.1

package/README.md

@@ -18,6 +18,7 @@ A fully-featured currency input component for Svelte 5 that handles formatting,
 - [Examples](#examples)
 - [Styling](#styling)
 - [Exported utilities](#exported-utilities)
+  - [formatValue options](#formatvalue-options)
 - [Svelte 4 / migration guide](#svelte-4)
 - [Contributing](#contributing)
 
@@ -274,6 +275,51 @@ const expanded = parseAbbrValue('2.5m', 'en-US');
 // → "2500000"
 ```
 
+### formatValue options
+
+| Option                   | Type         | Default     | Description                                   |
+| ------------------------ | ------------ | ----------- | --------------------------------------------- |
+| `value`                  | `string`     | —           | The value to format                           |
+| `intlConfig`             | `IntlConfig` | `undefined` | Locale and currency configuration             |
+| `decimalScale`           | `number`     | `undefined` | Number of decimal places                      |
+| `decimalSeparator`       | `string`     | From locale | Override the decimal separator                |
+| `groupSeparator`         | `string`     | From locale | Override the grouping separator               |
+| `disableGroupSeparators` | `boolean`    | `false`     | Disable thousand separators                   |
+| `prefix`                 | `string`     | From locale | Override the currency prefix                  |
+| `suffix`                 | `string`     | `''`        | Override the currency suffix                  |
+| `roundValue`             | `boolean`    | `false`     | Round to `decimalScale` instead of truncating |
+
+By default, `formatValue` truncates decimals to `decimalScale`. Set `roundValue: true` to round instead, which is useful when formatting computed values with floating-point precision artifacts:
+
+```typescript
+// Default: truncates
+formatValue({
+	value: '87.5',
+	intlConfig: { locale: 'en-US', currency: 'USD' },
+	decimalScale: 0
+});
+// → "$87"
+
+// With roundValue: rounds
+formatValue({
+	value: '87.5',
+	intlConfig: { locale: 'en-US', currency: 'USD' },
+	decimalScale: 0,
+	roundValue: true
+});
+// → "$88"
+
+// Useful for computed values with floating-point issues
+const sum = 500.75 + 300.5 - 200.25 - 150.33; // = 450.66999999999996
+formatValue({
+	value: String(sum),
+	intlConfig: { locale: 'en-US', currency: 'USD' },
+	decimalScale: 2,
+	roundValue: true
+});
+// → "$450.67" (without roundValue, would be "$450.66")
+```
+
 ## Svelte 4
 
 For Svelte 4 support, use the [0.x version](https://github.com/fmaclen/svelte-currency-input/tree/v0.13.0):

package/dist/types.d.ts

@@ -22,6 +22,7 @@ export type FormatValueOptions = {
     decimalScale?: number;
     prefix?: string;
     suffix?: string;
+    roundValue?: boolean;
 };
 export type CleanValueOptions = {
     value: string;

package/dist/utils/formatValue.js

@@ -1,7 +1,7 @@
 import { escapeRegExp } from './escapeRegExp';
 import { getSuffix } from './getSuffix';
 export const formatValue = (options) => {
-    const { value: _value, decimalSeparator, intlConfig, decimalScale, prefix = '', suffix = '' } = options;
+    const { value: _value, decimalSeparator, intlConfig, decimalScale, prefix = '', suffix = '', roundValue = false } = options;
     if (_value === '' || _value === undefined) {
         return '';
     }
@@ -19,7 +19,7 @@ export const formatValue = (options) => {
     const defaultNumberFormatOptions = {
         ...formatOptions,
         minimumFractionDigits: decimalScale || 0,
-        maximumFractionDigits: 20
+        maximumFractionDigits: roundValue && decimalScale !== undefined ? decimalScale : 20
     };
     const numberFormatter = intlConfig
         ? new Intl.NumberFormat(locale, {
@@ -66,7 +66,7 @@ const replaceDecimalSeparator = (value, decimalSeparator, isNegative) => {
     }
     return newValue;
 };
-const replaceParts = (parts, { prefix, groupSeparator, decimalSeparator, decimalScale, disableGroupSeparators = false }) => {
+const replaceParts = (parts, { prefix, groupSeparator, decimalSeparator, decimalScale, disableGroupSeparators = false, roundValue = false }) => {
     return parts
         .reduce((prev, { type, value }, i) => {
         if (i === 0 && prefix) {
@@ -93,6 +93,9 @@ const replaceParts = (parts, { prefix, groupSeparator, decimalSeparator, decimal
             return [...prev, decimalSeparator !== undefined ? decimalSeparator : value];
         }
         if (type === 'fraction') {
+            if (roundValue) {
+                return [...prev, value];
+            }
             return [...prev, decimalScale !== undefined ? value.slice(0, decimalScale) : value];
         }
         return [...prev, value];

package/dist/utils/parseAbbrValue.js

@@ -17,7 +17,16 @@ export const parseAbbrValue = (value, decimalSeparator = '.') => {
     if (match) {
         const [, digits, , abbr] = match;
         const multiplier = abbrMap[abbr.toLowerCase()];
-        return Number(digits.replace(decimalSeparator, '.')) * multiplier;
+        const result = Number(digits.replace(decimalSeparator, '.')) * multiplier;
+        // Round based on input precision to avoid floating-point errors
+        // e.g. 4.1 * 1000000 = 4099999.9999999995 should become 4100000
+        // but 1.12345678 * 1000 = 1123.45678 should preserve all decimals
+        const decimalPart = digits.split(decimalSeparator)[1] || '';
+        const inputDecimals = decimalPart.length;
+        const multiplierZeros = Math.log10(multiplier);
+        const resultDecimals = Math.max(0, inputDecimals - multiplierZeros);
+        const precision = Math.pow(10, resultDecimals);
+        return Math.round(result * precision) / precision;
     }
     return undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "1.0.0",
+	"version": "1.1.1",
 	"engines": {
 		"node": ">=22"
 	},