@canutin/svelte-currency-input 0.4.0 → 0.5.0

package/README.md

@@ -68,6 +68,7 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
 | disabled          | `boolean`       | `false`     | Marks the inputs as disabled                                                                                                                        |
 | placeholder       | `number` `null` | `0`         | Overrides the default placeholder. Setting the value to a `number` will display it as formatted. Setting it to `null` will not show a placeholder   |
 | isNegativeAllowed | `boolean`       | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
+| fractionDigits | `number` | `2` | Sets `maximumFractionDigits` in [`Intl.NumberFormat()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) used for formatting the currency. Supported digits: `0` to `20` |
 
 ## Styling
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"exports": {
 		".": "./index.js"
 	},

package/src/lib/CurrencyInput.svelte

@@ -3,6 +3,7 @@
 	const DEFAULT_CURRENCY = 'USD';
 	const DEFAULT_NAME = 'total';
 	const DEFAULT_VALUE = 0;
+	const DEFAULT_FRACTION_DIGITS = 2;
 
 	export let value: number = DEFAULT_VALUE;
 	export let locale: string = DEFAULT_LOCALE;
@@ -12,6 +13,7 @@
 	export let disabled: boolean = false;
 	export let placeholder: number | null = DEFAULT_VALUE;
 	export let isNegativeAllowed: boolean = true;
+	export let fractionDigits: number = DEFAULT_FRACTION_DIGITS;
 
 	// Formats value as: e.g. $1,523.00 | -$1,523.00
 	const formatCurrency = (
@@ -37,16 +39,18 @@
 		if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter) event.preventDefault();
 	};
 
+	const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+	const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
+	const currencySymbol = formatCurrency(0, 0)
+		.replace('0', '') // e.g. '$0' > '$'
+		.replace(/\u00A0/, ''); // e.g '0 €' > '€'
+
 	// Updates `value` by stripping away the currency formatting
 	const setUnformattedValue = (event: KeyboardEvent) => {
 		// Don't format if the user is typing a `currencyDecimal` point
-		const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
 		if (event.key === currencyDecimal) return;
 
-		// If `formattedValue` is ['$', '-$', "-"] we don't need to continue
-		const currencySymbol = formatCurrency(0, 0)
-			.replace('0', '') // e.g. '$0' > '$'
-			.replace(/\u00A0/, ''); // e.g '0 €' > '€'
+		// Don't format if `formattedValue` is ['$', '-$', "-"]
 		const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
 		const strippedUnformattedValue = formattedValue.replace(' ', '');
 		if (ignoreSymbols.includes(strippedUnformattedValue)) return;
@@ -64,7 +68,6 @@
 			value = 0;
 		} else {
 			// The order of the following operations is *critical*
-			const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
 			unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
 			if (isDecimalComma) unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
 			value = parseFloat(unformattedValue);
@@ -72,11 +75,12 @@
 	};
 
 	const setFormattedValue = () => {
-		formattedValue = isZero ? '' : formatCurrency(value, 2, 0);
+		formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
 	};
 
 	let formattedValue = '';
-	let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, 2, 2) : '';
+	let formattedPlaceholder =
+		placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
 	$: isZero = value === 0;
 	$: isNegative = value < 0;
 	$: value, setFormattedValue();

package/src/routes/+page.svelte

@@ -19,7 +19,7 @@
 		<CurrencyInput name="total" value={-42069.69} />
 		<CurrencyInput name="rent" />
 		<CurrencyInput name="balance" value={1234.56} isNegativeAllowed={false} placeholder={null} />
-		<CurrencyInput name="cashflow" value={5678.9} />
+		<CurrencyInput name="btc" value={0.87654321} fractionDigits={8} />
 
 		<CurrencyInput name="amount" value={5678.9} {locale} {currency} />
 		<CurrencyInput name="loss" value={97532.95} disabled={true} {locale} {currency} />

package/tests/svelte-currency-input.test.ts

@@ -1,4 +1,9 @@
-import { expect, test } from '@playwright/test';
+import { expect, test, type Page } from '@playwright/test';
+
+const isMacOs = process.platform === 'darwin';
+const selectAll = async (page: Page) => {
+	isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
+};
 
 test.describe('CurrencyInput', () => {
 	test('Default behavior is correct', async ({ page }) => {
@@ -73,8 +78,8 @@ test.describe('CurrencyInput', () => {
 					'formatted-rent': '',
 					balance: '1234.56',
 					'formatted-balance': '$1,234.56',
-					cashflow: '5678.9',
-					'formatted-cashflow': '$5,678.9',
+					btc: '0.87654321',
+					'formatted-btc': '$0.87654321',
 					amount: '5678.9',
 					'formatted-amount': '€ 5.678,9',
 					cost: '-42069.69',
@@ -139,7 +144,6 @@ test.describe('CurrencyInput', () => {
 	test("Incorrect characters can't be entered", async ({ page }) => {
 		await page.goto('/');
 
-		const isMacOs = process.platform === 'darwin';
 		const rentUnformattedInput = page.locator('.currencyInput__unformatted[name=rent]');
 		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
 
@@ -162,10 +166,8 @@ test.describe('CurrencyInput', () => {
 		await expect(rentFormattedInput).toHaveValue('$420.69');
 		await expect(rentUnformattedInput).toHaveValue('420.69');
 
-		// Select all
-		isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
-
 		// Check "Backspace" works
+		await selectAll(page);
 		await page.keyboard.press('Backspace');
 		await expect(rentUnformattedInput).toHaveValue('0');
 		await expect(rentFormattedInput).toHaveValue('');
@@ -175,10 +177,8 @@ test.describe('CurrencyInput', () => {
 		await expect(rentFormattedInput).toHaveValue('-$420.69');
 		await expect(rentUnformattedInput).toHaveValue('-420.69');
 
-		// Select all
-		isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
-
 		// Check "Delete" also works
+		await selectAll(page);
 		await page.keyboard.press('Delete');
 		await expect(rentUnformattedInput).toHaveValue('0');
 		await expect(rentFormattedInput).toHaveValue('');
@@ -204,6 +204,27 @@ test.describe('CurrencyInput', () => {
 		await expect(deficitFormattedInput).toHaveAttribute('placeholder', '€ 1.234,56'); // The space is `%A0`, not `%20`
 	});
 
+	test('Fraction digits can be overriden', async ({ page }) => {
+		await page.goto('/');
+
+		const btcUnformattedInput = page.locator('.currencyInput__unformatted[name=btc]');
+		const btcFormattedInput = page.locator('.currencyInput__formatted[name="formatted-btc"]');
+
+		await expect(btcUnformattedInput).toHaveValue('0.87654321');
+		await expect(btcFormattedInput).toHaveValue('$0.87654321');
+		await expect(btcFormattedInput).toHaveAttribute('placeholder', '$0.00000000');
+
+		await btcFormattedInput.focus();
+		await selectAll(page);
+		await page.keyboard.press('Backspace');
+		await expect(btcUnformattedInput).toHaveValue('0');
+		await expect(btcFormattedInput).toHaveValue('');
+
+		await page.keyboard.type('-0.987654321');
+		await expect(btcUnformattedInput).toHaveValue('-0.987654321');
+		await expect(btcFormattedInput).toHaveValue('-$0.98765432');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});