@canutin/svelte-currency-input 0.4.0 → 0.5.1

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.1",
 	"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
 	});

package/package/CurrencyInput.svelte

@@ -1,106 +0,0 @@
-<script>export let value = 0;
-export let locale = 'en-US';
-export let currency = 'USD';
-export let name = 'total';
-export let required = false;
-export let disabled = false;
-export let isNegativeAllowed = true;
-let formattedValue = '';
-$: isZero = value === 0;
-$: isNegative = value < 0;
-$: value, applyFormatting();
-// Formats value as: e.g. $1,523.00 | -$1,523.00
-const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
-    return new Intl.NumberFormat(locale, {
-        currency: currency,
-        style: 'currency',
-        maximumFractionDigits: maximumFractionDigits || 0,
-        minimumFractionDigits: minimumFractionDigits || 0
-    }).format(value);
-};
-const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
-const currencySymbol = formatCurrency(0, 0)
-    .replace('0', '') // e.g. '$0' > '$'
-    .replace(/\u00A0/, ''); // e.g '0 €' > '€'
-const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
-// Updates `value` by stripping away the currency formatting
-const setValue = (event) => {
-    // Don't format if the user is typing a currencyDecimal point
-    if (event?.key === currencyDecimal)
-        return;
-    // If `formattedValue` is ['$', '-$', "-"] we don't need to continue
-    const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
-    const strippedUnformattedValue = formattedValue.replace(' ', '');
-    if (ignoreSymbols.includes(strippedUnformattedValue))
-        return;
-    // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
-    let unformattedValue = isNegativeAllowed
-        ? formattedValue.replace(/[^0-9,.-]/g, '')
-        : formattedValue.replace(/[^0-9,.]/g, '');
-    // Reverse the value when minus is pressed
-    if (isNegativeAllowed && event?.key === '-')
-        value = value * -1;
-    // Finally set the value
-    if (Number.isNaN(parseFloat(unformattedValue))) {
-        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);
-    }
-};
-const applyFormatting = () => {
-    formattedValue = isZero ? '' : formatCurrency(value, 2, 0);
-};
-</script>
-
-<div class="currencyInput">
-	<input class="currencyInput__unformatted" type="hidden" {name} {disabled} bind:value />
-	<input
-		class="
-			currencyInput__formatted
-			{isNegativeAllowed && !isZero && !isNegative && 'currencyInput__formatted--positive'}
-			{isZero && 'currencyInput__formatted--zero'}
-			{isNegativeAllowed && isNegative && 'currencyInput__formatted--negative'}
-		"
-		type="text"
-		inputmode="numeric"
-		name={`formatted-${name}`}
-		required={required && !isZero}
-		{placeholder}
-		{disabled}
-		bind:value={formattedValue}
-		on:keyup={setValue}
-	/>
-</div>
-
-<style>
-	input.currencyInput__formatted {
-		border: 1px solid #e2e2e2;
-		padding: 10px;
-		box-sizing: border-box;
-	}
-
-	input.currencyInput__formatted--zero {
-		color: #333;
-	}
-
-	input.currencyInput__formatted--positive {
-		color: #00a36f;
-	}
-
-	input.currencyInput__formatted--negative {
-		color: #e75258;
-	}
-
-	input.currencyInput__formatted:disabled {
-		color: #999;
-		background-color: #e2e2e2;
-		pointer-events: none;
-		cursor: default;
-	}
-</style>

package/package/CurrencyInput.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: number | undefined;
-        locale?: string | undefined;
-        currency?: string | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        disabled?: boolean | undefined;
-        isNegativeAllowed?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type CurrencyInputProps = typeof __propDef.props;
-export declare type CurrencyInputEvents = typeof __propDef.events;
-export declare type CurrencyInputSlots = typeof __propDef.slots;
-export default class CurrencyInput extends SvelteComponentTyped<CurrencyInputProps, CurrencyInputEvents, CurrencyInputSlots> {
-}
-export {};

package/package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Canutin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/package/README.md

@@ -1,118 +0,0 @@
-# svelte-currency-input
-
-A form input that converts numbers to localized currency formats as you type
-
-[<img width="1059" alt="image" src="https://user-images.githubusercontent.com/1434675/190315136-c1d310ab-0ef1-441d-a80c-2b3727d74f59.png">](https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1)
-
-<p align="center">
-  👩‍💻 Play with it on <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">REPL</a>  &nbsp;—&nbsp; 💵 See it in a <a href="https://github.com/Canutin/desktop/blob/master/sveltekit/src/lib/components/FormCurrency.svelte" target="_blank">real project</a>!
-</p>
-
----
-
-## Features
-
-- Formats **positive** and **negative** values
-- Leverages [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for **localizing** currency denominations and masking the input
-- Simple [API](#api)
-- Minimal [default styling](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118), easy to [customize](#styling)
-
-## Usage
-
-```bash
-npm install svelte-currency-input --save
-```
-
-```html
-<script lang="ts">
-  import CurrencyInput from '@canutin/svelte-currency-input';
-</script>
-
-<CurrencyInput name="total" value={-420.69} locale="nl-NL" currency="EUR" />
-```
-
-## How it works
-
-When the form is submitted you get _unformatted_ or _formatted_ values from two `<input />`'s.
-This is more or less what `<CurrencyInput />` looks like under the hood:
-
-```html
-<div class="currencyInput">
-  <!-- Unformatted value -->
-  <input
-    class="currencyInput__unformatted"
-    type="hidden"
-    name="total"
-    value="-420.69"
-  />
-
-  <!-- Formatted value -->
-  <input
-    class="currencyInput__formatted"
-    type="text"
-    name="formatted-total"
-    value="€ -420,69"
-  />
-</div>
-```
-
-## API
-
-| Option            | Type      | Default     | Description                                                                                                                                         |
-| ----------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value             | `number`  | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder                                                             |
-| locale            | `string`  | `en-US`     | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896)                                                                      |
-| currency          | `string`  | `USD`       | Overrides default currency. [Examples](https://github.com/datasets/currency-codes/blob/master/data/codes-all.csv)                                   |
-| name              | `string`  | `total`     | Applies the name to the [input fields](#how-it-works) for _unformatted_ (e.g `[name=total]`) and _formatted_ (e.g. `[name=formatted-total]`) values |
-| required          | `boolean` | `false`     | Marks the inputs as required                                                                                                                        |
-| disabled          | `boolean` | `false`     | Marks the inputs as disabled                                                                                                                        |
-| isNegativeAllowed | `boolean` | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
-
-## Styling
-
-The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118) use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
-
-```html
-<div class="my-currency-input">
-  <CurrencyInput name="total" value="{420.69}" />
-</div>
-
-<style>
-  /* Container */
-  div.my-currency-input :global(div.currencyInput) { /* ... */ }
-
-  /* Formatted input */
-  div.my-currency-input :global(input.currencyInput__formatted) { /* ... */ }
-
-  /* Formatted input when the it's disabled */
-  div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ }
-
-  /* Formatted input when the value is zero */
-  div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */ }
-
-  /* Formatted input when the value is positive */
-  div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */ }
-
-  /* Formatted input when the value is negative */
-  div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */ }
-</style>
-```
-
-## Contributing
-
-Here's ways in which you can contribute:
-
-- Found a bug? Open a [new issue](https://github.com/canutin/svelte-currency-input/issues/new)
-- Browse our [existing issues](https://github.com/canutin/svelte-currency-input/issues)
-- Submit a [pull request](https://github.com/canutin/svelte-currency-input/pulls)
-
-## Developing
-
-This package was generated with [SvelteKit](https://kit.svelte.dev/). Install dependencies with `npm install`, then start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```

package/package/index.d.ts

@@ -1,2 +0,0 @@
-import CurrencyInput from './CurrencyInput.svelte';
-export default CurrencyInput;

package/package/index.js

@@ -1,2 +0,0 @@
-import CurrencyInput from './CurrencyInput.svelte';
-export default CurrencyInput;

package/package/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "@canutin/svelte-currency-input",
-  "version": "0.0.0-development",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": "./index.js",
-    "./CurrencyInput.svelte": "./CurrencyInput.svelte"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.25.0",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "semantic-release": "^19.0.5",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
-  },
-  "type": "module",
-  "description": "A form input that converts numbers to currencies as you type in localized formats",
-  "keywords": [
-    "svelte",
-    "currency",
-    "money",
-    "input",
-    "i18n",
-    "positive",
-    "negative"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/canutin/svelte-currency-input.git"
-  },
-  "author": "Fernando Maclen <hello@fernando.is>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/canutin/svelte-currency-input/issues"
-  },
-  "homepage": "https://github.com/canutin/svelte-currency-input#readme",
-  "svelte": "./index.js"
-}